Skip to content

Commit 7150d1f

Browse files
marklearstmarklearst
committed
feat(table): refresh stories and helpers
1 parent 76d72fc commit 7150d1f

30 files changed

Lines changed: 1452 additions & 1161 deletions

‎src/components/table-key-value-pair/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { TableKeyValuePair } from "./table-key-value-pair";
1+
export { TableKeyValuePair } from './table-key-value-pair'

‎src/components/table-key-value-pair/table-key-value-pair-body-key-cell.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import React from "react";
2-
import { classNames } from "../../util/class-names";
1+
import type { DetailedHTMLProps, TdHTMLAttributes } from 'react'
2+
import { classNames } from '../../util/class-names'
33

4-
export type TableKeyValuePairBodyKeyProps = React.DetailedHTMLProps<
5-
React.TdHTMLAttributes<HTMLTableCellElement>,
6-
HTMLTableCellElement
7-
>;
4+
export type TableKeyValuePairBodyKeyProps = DetailedHTMLProps<
5+
TdHTMLAttributes<HTMLTableCellElement>,
6+
HTMLTableCellElement
7+
>
88

99
export const TableKeyValuePairBodyKeyCell = ({
10-
children,
11-
className,
12-
...props
10+
children,
11+
className,
12+
...props
1313
}: TableKeyValuePairBodyKeyProps) => {
14-
return (
15-
<td
16-
className={classNames(
17-
"headline-400 bg-neutral-0 border-r border-b border-neutral-300 px-2.5 text-neutral-900 first:border-l",
18-
className
19-
)}
20-
{...props}
21-
>
22-
{children}
23-
</td>
24-
);
25-
};
14+
return (
15+
<td
16+
className={classNames(
17+
'headline-400 bg-neutral-0 border-r border-b border-neutral-300 px-2.5 text-neutral-900 first:border-l',
18+
className,
19+
)}
20+
{...props}
21+
>
22+
{children}
23+
</td>
24+
)
25+
}

‎src/components/table-key-value-pair/table-key-value-pair-body-row.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,23 @@
1-
import React from "react";
2-
import { classNames } from "../../util/class-names";
1+
import type { TableHTMLAttributes } from 'react'
2+
import { classNames } from '../../util/class-names'
33

4-
export type TableKeyValuePairBodyProps = React.TableHTMLAttributes<HTMLTableRowElement>;
4+
export type TableKeyValuePairBodyProps =
5+
TableHTMLAttributes<HTMLTableRowElement>
56

67
export const TableKeyValuePairBodyRow = ({
7-
children,
8-
className,
9-
...props
8+
children,
9+
className,
10+
...props
1011
}: TableKeyValuePairBodyProps) => {
11-
return (
12-
<tr
13-
className={classNames(
14-
"h-12 [&:last-child_>_td:first-child]:rounded-bl-md [&:last-child_>_td:first-child]:border-l [&:last-child_>_td:first-child]:border-neutral-300 [&:last-child_>_td:last-child]:rounded-br-md",
15-
className
16-
)}
17-
{...props}
18-
>
19-
{children}
20-
</tr>
21-
);
22-
};
12+
return (
13+
<tr
14+
className={classNames(
15+
'h-12 [&:last-child_>_td:first-child]:rounded-bl-md [&:last-child_>_td:first-child]:border-l [&:last-child_>_td:first-child]:border-neutral-300 [&:last-child_>_td:last-child]:rounded-br-md',
16+
className,
17+
)}
18+
{...props}
19+
>
20+
{children}
21+
</tr>
22+
)
23+
}

‎src/components/table-key-value-pair/table-key-value-pair-body-value-cell.tsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import React from "react";
2-
import { classNames } from "../../util/class-names";
1+
import type { DetailedHTMLProps, TdHTMLAttributes } from 'react'
2+
import { classNames } from '../../util/class-names'
33

4-
export type TableKeyValuePairBodyValueProps = React.DetailedHTMLProps<
5-
React.TdHTMLAttributes<HTMLTableCellElement>,
6-
HTMLTableCellElement
7-
>;
4+
export type TableKeyValuePairBodyValueProps = DetailedHTMLProps<
5+
TdHTMLAttributes<HTMLTableCellElement>,
6+
HTMLTableCellElement
7+
>
88

99
export const TableKeyValuePairBodyValueCell = ({
10-
children,
11-
className,
12-
...props
10+
children,
11+
className,
12+
...props
1313
}: TableKeyValuePairBodyValueProps) => {
14-
return (
15-
<td
16-
className={classNames(
17-
"bg-neutral-0 border-r border-b border-neutral-300 px-2.5 text-neutral-900",
18-
className
19-
)}
20-
{...props}
21-
>
22-
{children}
23-
</td>
24-
);
25-
};
14+
return (
15+
<td
16+
className={classNames(
17+
'bg-neutral-0 border-r border-b border-neutral-300 px-2.5 text-neutral-900',
18+
className,
19+
)}
20+
{...props}
21+
>
22+
{children}
23+
</td>
24+
)
25+
}

‎src/components/table-key-value-pair/table-key-value-pair-body.tsx‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
1-
import React from "react";
2-
import { TableKeyValuePairBodyRow } from "./table-key-value-pair-body-row";
3-
import { TableKeyValuePairBodyValueCell } from "./table-key-value-pair-body-value-cell";
4-
import { TableKeyValuePairBodyKeyCell } from "./table-key-value-pair-body-key-cell";
1+
import type { TableHTMLAttributes } from 'react'
2+
import { TableKeyValuePairBodyRow } from './table-key-value-pair-body-row'
3+
import { TableKeyValuePairBodyValueCell } from './table-key-value-pair-body-value-cell'
4+
import { TableKeyValuePairBodyKeyCell } from './table-key-value-pair-body-key-cell'
55

6-
export type TableKeyValuePairBodyProps = React.TableHTMLAttributes<HTMLTableSectionElement>;
6+
export type TableKeyValuePairBodyProps =
7+
TableHTMLAttributes<HTMLTableSectionElement>
78

8-
const TableKeyValuePairBody = ({ children, ...props }: TableKeyValuePairBodyProps) => {
9-
return <tbody {...props}>{children}</tbody>;
10-
};
9+
const TableKeyValuePairBody = ({
10+
children,
11+
...props
12+
}: TableKeyValuePairBodyProps) => {
13+
return <tbody {...props}>{children}</tbody>
14+
}
1115

12-
TableKeyValuePairBody.Row = TableKeyValuePairBodyRow;
13-
TableKeyValuePairBody.Key = TableKeyValuePairBodyKeyCell;
14-
TableKeyValuePairBody.Value = TableKeyValuePairBodyValueCell;
16+
TableKeyValuePairBody.Row = TableKeyValuePairBodyRow
17+
TableKeyValuePairBody.Key = TableKeyValuePairBodyKeyCell
18+
TableKeyValuePairBody.Value = TableKeyValuePairBodyValueCell
1519

16-
export { TableKeyValuePairBody };
20+
export { TableKeyValuePairBody }

‎src/components/table-key-value-pair/table-key-value-pair-header.tsx‎

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
1-
import React from "react";
2-
import { classNames } from "../../util/class-names";
1+
import type { HTMLAttributes } from 'react'
2+
import { classNames } from '../../util/class-names'
33

4-
export interface TableKeyValuePairHeaderProps
5-
extends React.HTMLAttributes<HTMLTableSectionElement> {
6-
colSpan?: number;
4+
export interface TableKeyValuePairHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
5+
colSpan?: number
76
}
87

98
export const TableKeyValuePairHeader = ({
10-
children,
11-
className,
12-
colSpan,
13-
...props
9+
children,
10+
className,
11+
colSpan,
12+
...props
1413
}: TableKeyValuePairHeaderProps) => {
15-
return (
16-
<thead className={classNames(className)} {...props}>
17-
<tr>
18-
<th
19-
className="headline-400 rounded-t-md border border-neutral-300 bg-neutral-50 px-2.5 py-4 text-left text-neutral-900"
20-
colSpan={colSpan}
21-
>
22-
{children}
23-
</th>
24-
</tr>
25-
</thead>
26-
);
27-
};
14+
return (
15+
<thead className={classNames(className)} {...props}>
16+
<tr>
17+
<th
18+
className='headline-400 rounded-t-md border border-neutral-300 bg-neutral-50 px-2.5 py-4 text-left text-neutral-900'
19+
colSpan={colSpan}
20+
>
21+
{children}
22+
</th>
23+
</tr>
24+
</thead>
25+
)
26+
}

0 commit comments

Comments
 (0)