Merge pull request #28082 from backstage/canon-tables
Canon - Table component
This commit is contained in:
Charles de Dreuille
@@ -6,7 +6,8 @@ import { withThemeByDataAttribute } from '@storybook/addon-themes';
|
||||
import '../docs/components/styles.css';
|
||||
|
||||
// Canon specific styles
|
||||
import '../src/theme/styles.css';
|
||||
import '../src/css/core.css';
|
||||
import '../src/css/components.css';
|
||||
|
||||
// Custom themes
|
||||
import './themes/backstage.css';
|
||||
@@ -22,6 +23,11 @@ const preview: Preview = {
|
||||
backgrounds: {
|
||||
disable: true,
|
||||
},
|
||||
options: {
|
||||
storySort: {
|
||||
method: 'alphabetical',
|
||||
},
|
||||
},
|
||||
},
|
||||
decorators: [
|
||||
withThemeByDataAttribute<ReactRenderer>({
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
|
||||
import { ForwardRefExoticComponent } from 'react';
|
||||
import { default as React_2 } from 'react';
|
||||
import * as React_3 from 'react';
|
||||
import { RefAttributes } from 'react';
|
||||
|
||||
// @public (undocumented)
|
||||
@@ -457,6 +458,48 @@ export interface StackProps extends SpaceProps, ColorProps {
|
||||
style?: React.CSSProperties;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export const Table: React_3.ForwardRefExoticComponent<
|
||||
React_3.HTMLAttributes<HTMLTableElement> &
|
||||
React_3.RefAttributes<HTMLTableElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TableBody: React_3.ForwardRefExoticComponent<
|
||||
React_3.HTMLAttributes<HTMLTableSectionElement> &
|
||||
React_3.RefAttributes<HTMLTableSectionElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TableCell: React_3.ForwardRefExoticComponent<
|
||||
React_3.TdHTMLAttributes<HTMLTableCellElement> &
|
||||
React_3.RefAttributes<HTMLTableCellElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TableFooter: React_3.ForwardRefExoticComponent<
|
||||
React_3.HTMLAttributes<HTMLTableSectionElement> &
|
||||
React_3.RefAttributes<HTMLTableSectionElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TableHead: React_3.ForwardRefExoticComponent<
|
||||
React_3.ThHTMLAttributes<HTMLTableCellElement> &
|
||||
React_3.RefAttributes<HTMLTableCellElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TableHeader: React_3.ForwardRefExoticComponent<
|
||||
React_3.HTMLAttributes<HTMLTableSectionElement> &
|
||||
React_3.RefAttributes<HTMLTableSectionElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export const TableRow: React_3.ForwardRefExoticComponent<
|
||||
React_3.HTMLAttributes<HTMLTableRowElement> &
|
||||
React_3.RefAttributes<HTMLTableRowElement>
|
||||
>;
|
||||
|
||||
// @public (undocumented)
|
||||
export type Theme = keyof typeof themes;
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
user-select: none;
|
||||
font-family: var(--canon-font-regular);
|
||||
font-weight: var(--canon-font-bold);
|
||||
font-size: var(--canon-font-sizes-md);
|
||||
font-size: var(--canon-font-size-md);
|
||||
padding: 0;
|
||||
transition: all 150ms ease;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--canon-spacing-xs);
|
||||
font-size: var(--canon-font-sizes-xs);
|
||||
font-size: var(--canon-font-size-xs);
|
||||
font-family: var(--canon-font-regular);
|
||||
color: var(--canon-text-primary);
|
||||
user-select: none;
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
import { Meta, Controls } from '@storybook/blocks';
|
||||
|
||||
<Meta title="Components/Table" />
|
||||
|
||||
# Table
|
||||
@@ -0,0 +1,115 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import * as React from 'react';
|
||||
|
||||
/** @public */
|
||||
const Table = React.forwardRef<
|
||||
HTMLTableElement,
|
||||
React.HTMLAttributes<HTMLTableElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div className="table">
|
||||
<table ref={ref} className={className} {...props} />
|
||||
</div>
|
||||
));
|
||||
Table.displayName = 'Table';
|
||||
|
||||
/** @public */
|
||||
const TableHeader = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<thead
|
||||
ref={ref}
|
||||
className={['table-header', className].join(' ')}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableHeader.displayName = 'TableHeader';
|
||||
|
||||
/** @public */
|
||||
const TableBody = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tbody ref={ref} className={['table-body', className].join(' ')} {...props} />
|
||||
));
|
||||
TableBody.displayName = 'TableBody';
|
||||
|
||||
/** @public */
|
||||
const TableFooter = React.forwardRef<
|
||||
HTMLTableSectionElement,
|
||||
React.HTMLAttributes<HTMLTableSectionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tfoot
|
||||
ref={ref}
|
||||
className={['table-footer', className].join(' ')}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableFooter.displayName = 'TableFooter';
|
||||
|
||||
/** @public */
|
||||
const TableRow = React.forwardRef<
|
||||
HTMLTableRowElement,
|
||||
React.HTMLAttributes<HTMLTableRowElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<tr ref={ref} className={['table-row', className].join(' ')} {...props}>
|
||||
{props.children}
|
||||
</tr>
|
||||
));
|
||||
TableRow.displayName = 'TableRow';
|
||||
|
||||
/** @public */
|
||||
const TableHead = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<th ref={ref} className={['table-head', className].join(' ')} {...props} />
|
||||
));
|
||||
TableHead.displayName = 'TableHead';
|
||||
|
||||
/** @public */
|
||||
const TableCell = React.forwardRef<
|
||||
HTMLTableCellElement,
|
||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td ref={ref} className={['table-cell', className].join(' ')} {...props} />
|
||||
));
|
||||
TableCell.displayName = 'TableCell';
|
||||
|
||||
/** @public */
|
||||
const TableCaption = React.forwardRef<
|
||||
HTMLTableCaptionElement,
|
||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<caption
|
||||
ref={ref}
|
||||
className={['table-caption', className].join(' ')}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
TableCaption.displayName = 'TableCaption';
|
||||
|
||||
export {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
TableCaption,
|
||||
};
|
||||
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
export {
|
||||
Table,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableHeader,
|
||||
TableCell,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
} from './Table';
|
||||
@@ -0,0 +1,111 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import {
|
||||
Table,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableHeader,
|
||||
TableCell,
|
||||
TableBody,
|
||||
TableFooter,
|
||||
} from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Examples/Simple',
|
||||
component: Table,
|
||||
} satisfies Meta<typeof Table>;
|
||||
|
||||
const invoices = [
|
||||
{
|
||||
invoice: 'INV001',
|
||||
paymentStatus: 'Paid',
|
||||
totalAmount: '$250.00',
|
||||
paymentMethod: 'Credit Card',
|
||||
},
|
||||
{
|
||||
invoice: 'INV002',
|
||||
paymentStatus: 'Pending',
|
||||
totalAmount: '$150.00',
|
||||
paymentMethod: 'PayPal',
|
||||
},
|
||||
{
|
||||
invoice: 'INV003',
|
||||
paymentStatus: 'Unpaid',
|
||||
totalAmount: '$350.00',
|
||||
paymentMethod: 'Bank Transfer',
|
||||
},
|
||||
{
|
||||
invoice: 'INV004',
|
||||
paymentStatus: 'Paid',
|
||||
totalAmount: '$450.00',
|
||||
paymentMethod: 'Credit Card',
|
||||
},
|
||||
{
|
||||
invoice: 'INV005',
|
||||
paymentStatus: 'Paid',
|
||||
totalAmount: '$550.00',
|
||||
paymentMethod: 'PayPal',
|
||||
},
|
||||
{
|
||||
invoice: 'INV006',
|
||||
paymentStatus: 'Pending',
|
||||
totalAmount: '$200.00',
|
||||
paymentMethod: 'Bank Transfer',
|
||||
},
|
||||
{
|
||||
invoice: 'INV007',
|
||||
paymentStatus: 'Unpaid',
|
||||
totalAmount: '$300.00',
|
||||
paymentMethod: 'Credit Card',
|
||||
},
|
||||
];
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[100px]">Invoice</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Method</TableHead>
|
||||
<TableHead className="text-right">Amount</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{invoices.map(invoice => (
|
||||
<TableRow key={invoice.invoice}>
|
||||
<TableCell className="font-medium">{invoice.invoice}</TableCell>
|
||||
<TableCell>{invoice.paymentStatus}</TableCell>
|
||||
<TableCell>{invoice.paymentMethod}</TableCell>
|
||||
<TableCell className="text-right">{invoice.totalAmount}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={3}>Total</TableCell>
|
||||
<TableCell className="text-right">$2,500.00</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
),
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Table } from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Components/Table',
|
||||
component: Table,
|
||||
} satisfies Meta<typeof Table>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: "Hello World! I'm a basic table",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Table, TableBody } from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Components/TableBody',
|
||||
component: TableBody,
|
||||
decorators: [
|
||||
Story => (
|
||||
<Table>
|
||||
<Story />
|
||||
</Table>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<typeof TableBody>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: "Hello World! I'm a basic table body",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { TableCaption } from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Components/TableCaption',
|
||||
component: TableCaption,
|
||||
} satisfies Meta<typeof TableCaption>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { TableCell } from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Components/TableCell',
|
||||
component: TableCell,
|
||||
} satisfies Meta<typeof TableCell>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { TableFooter } from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Components/TableFooter',
|
||||
component: TableFooter,
|
||||
} satisfies Meta<typeof TableFooter>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
@@ -0,0 +1,30 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { TableHead } from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Components/TableHead',
|
||||
component: TableHead,
|
||||
} satisfies Meta<typeof TableHead>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {},
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Table, TableHeader } from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Components/TableHeader',
|
||||
component: TableHeader,
|
||||
decorators: [
|
||||
Story => (
|
||||
<Table>
|
||||
<Story />
|
||||
</Table>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<typeof TableHeader>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: "Hello World! I'm a basic table header",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,42 @@
|
||||
/*
|
||||
* Copyright 2024 The Backstage Authors
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import { Table, TableRow, TableHeader } from '../Table';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Table/Components/TableRow',
|
||||
component: TableRow,
|
||||
decorators: [
|
||||
Story => (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<Story />
|
||||
</TableHeader>
|
||||
</Table>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<typeof TableRow>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
children: "Hello World! I'm a basic table row",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
.table {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
background-color: var(--canon-surface-1);
|
||||
border-radius: var(--canon-border-radius-xs);
|
||||
padding-bottom: var(--canon-spacing-5xs);
|
||||
padding-top: var(--canon-spacing-5xs);
|
||||
font-size: var(--canon-font-size-body);
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
caption-side: bottom;
|
||||
font-size: var(--canon-font-size-sm);
|
||||
border-collapse: collapse;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
tr {
|
||||
/* border-bottom: 1px solid var(--canon-outline); */
|
||||
}
|
||||
}
|
||||
|
||||
.table-head {
|
||||
text-align: left;
|
||||
padding: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
.table-body {
|
||||
tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.table-row {
|
||||
transition: color 0.2s ease-in-out;
|
||||
|
||||
&:hover td {
|
||||
background-color: var(--canon-surface-3);
|
||||
}
|
||||
|
||||
& .table-cell:first-child {
|
||||
border-top-left-radius: var(--canon-border-radius-xs);
|
||||
border-bottom-left-radius: var(--canon-border-radius-xs);
|
||||
box-shadow: inset 4px 2px 0 0 var(--canon-surface-1),
|
||||
inset 4px -2px 0 0 var(--canon-surface-1);
|
||||
padding-left: var(--canon-spacing-xs);
|
||||
}
|
||||
|
||||
& .table-cell:last-child {
|
||||
border-top-right-radius: var(--canon-border-radius-xs);
|
||||
border-bottom-right-radius: var(--canon-border-radius-xs);
|
||||
box-shadow: inset -4px 2px 0 0 var(--canon-surface-1),
|
||||
inset -4px -2px 0 0 var(--canon-surface-1);
|
||||
padding-right: var(--canon-spacing-xs);
|
||||
}
|
||||
}
|
||||
|
||||
.table-cell {
|
||||
padding: var(--canon-spacing-xs);
|
||||
background-color: var(--canon-surface-2);
|
||||
box-shadow: inset 0px 2px 0 0 var(--canon-surface-1),
|
||||
inset 0px -2px 0 0 var(--canon-surface-1);
|
||||
}
|
||||
@@ -14,13 +14,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Geist font */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap');
|
||||
|
||||
/* Theme */
|
||||
@import './theme.css';
|
||||
|
||||
/* Components */
|
||||
@import '../components/Button/styles.css';
|
||||
@import '../components/Stack/styles.css';
|
||||
@@ -29,3 +22,4 @@
|
||||
@import '../components/Container/styles.css';
|
||||
@import '../components/Icon/styles.css';
|
||||
@import '../components/Checkbox/styles.css';
|
||||
@import '../components/Table/styles.css';
|
||||
@@ -14,13 +14,17 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
/* Light theme */
|
||||
/* Normalize */
|
||||
@import './normalize.css';
|
||||
|
||||
/* Light theme tokens */
|
||||
:root {
|
||||
/* Colors */
|
||||
--canon-accent: #000;
|
||||
--canon-background: #f8f8f8;
|
||||
--canon-surface-1: #fff;
|
||||
--canon-surface-2: #f4f4f4;
|
||||
--canon-surface-3: #f1f1f1;
|
||||
|
||||
/* Outlines */
|
||||
--canon-outline: rgba(0, 0, 0, 0.1);
|
||||
@@ -51,36 +55,51 @@
|
||||
--canon-font-bold: 600;
|
||||
|
||||
/* Font sizes */
|
||||
--canon-font-sizes-2xs: 0.625rem;
|
||||
--canon-font-sizes-xs: 0.75rem;
|
||||
--canon-font-sizes-sm: 0.875rem;
|
||||
--canon-font-sizes-md: 1rem;
|
||||
--canon-font-sizes-lg: 1.125rem;
|
||||
--canon-font-sizes-xl: 1.25rem;
|
||||
--canon-font-sizes-2xl: 1.5rem;
|
||||
--canon-font-sizes-3xl: 1.875rem;
|
||||
--canon-font-sizes-4xl: 2.25rem;
|
||||
--canon-font-sizes-5xl: 3rem;
|
||||
--canon-font-sizes-6xl: 3.75rem;
|
||||
--canon-font-sizes-7xl: 4.5rem;
|
||||
--canon-font-sizes-8xl: 6rem;
|
||||
--canon-font-sizes-9xl: 8rem;
|
||||
--canon-font-size-label: 0.625rem; /* 10px */
|
||||
--canon-font-size-caption: 0.75rem; /* 12px */
|
||||
--canon-font-size-body: 0.875rem; /* 14px */
|
||||
--canon-font-size-subtitle: 1rem; /* 16px */
|
||||
--canon-font-size-title1: 1.25rem; /* 20px */
|
||||
--canon-font-size-title2: 1.5rem; /* 24px */
|
||||
--canon-font-size-title3: 2rem; /* 32px */
|
||||
--canon-font-size-title4: 3rem; /* 48px */
|
||||
--canon-font-size-title5: 4rem; /* 64px */
|
||||
--canon-font-size-display: 5.75rem; /* 48px */
|
||||
|
||||
/* Spacing */
|
||||
--canon-spacing-2xs: 0.25rem;
|
||||
--canon-spacing-xs: 0.5rem;
|
||||
--canon-spacing-sm: 0.75rem;
|
||||
--canon-spacing-md: 1.25rem;
|
||||
--canon-spacing-lg: 2rem;
|
||||
--canon-spacing-xl: 3.25rem;
|
||||
--canon-spacing-2xl: 5.25rem;
|
||||
--canon-spacing-5xs: 0.125rem; /* 2px */
|
||||
--canon-spacing-4xs: 0.25rem; /* 4px */
|
||||
--canon-spacing-3xs: 0.375rem; /* 6px */
|
||||
--canon-spacing-2xs: 0.5rem; /* 8px */
|
||||
--canon-spacing-xs: 0.75rem; /* 12px */
|
||||
--canon-spacing-sm: 1rem; /* 16px */
|
||||
--canon-spacing-md: 1.5rem; /* 24px */
|
||||
--canon-spacing-lg: 2rem; /* 32px */
|
||||
--canon-spacing-xl: 2.5rem; /* 40px */
|
||||
--canon-spacing-2xl: 3rem; /* 48px */
|
||||
--canon-spacing-3xl: 3.5rem; /* 56px */
|
||||
|
||||
/* Border radius */
|
||||
--canon-border-radius-2xs: 0.125rem; /* 2px */
|
||||
--canon-border-radius-xs: 0.25rem; /* 4px */
|
||||
--canon-border-radius-sm: 0.5rem; /* 8px */
|
||||
--canon-border-radius-md: 0.75rem; /* 12px */
|
||||
--canon-border-radius-lg: 1rem; /* 16px */
|
||||
--canon-border-radius-xl: 1.25rem; /* 20px */
|
||||
--canon-border-radius-2xl: 1.5rem; /* 24px */
|
||||
|
||||
/* Container */
|
||||
--canon-container-max-width: 1200px;
|
||||
--canon-container-padding: 1rem;
|
||||
|
||||
*,
|
||||
html,
|
||||
body {
|
||||
font-family: var(--canon-font-regular);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
/* Dark theme tokens */
|
||||
[data-theme='dark'] {
|
||||
/* Colors */
|
||||
--canon-accent: #fff;
|
||||
Vendored
+201
@@ -0,0 +1,201 @@
|
||||
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
/*
|
||||
Document
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Use a better box model (opinionated).
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
|
||||
font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji';
|
||||
line-height: 1.15; /* 1. Correct the line height in all browsers. */
|
||||
-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
|
||||
tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
|
||||
}
|
||||
|
||||
/*
|
||||
Sections
|
||||
========
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0; /* Remove the margin in all browsers. */
|
||||
}
|
||||
|
||||
/*
|
||||
Text-level semantics
|
||||
====================
|
||||
*/
|
||||
|
||||
/**
|
||||
Add the correct font weight in Chrome and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
|
||||
2. Correct the odd 'em' font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo,
|
||||
monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Tabular data
|
||||
============
|
||||
*/
|
||||
|
||||
/**
|
||||
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
*/
|
||||
|
||||
table {
|
||||
border-color: currentcolor;
|
||||
}
|
||||
|
||||
/*
|
||||
Forms
|
||||
=====
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to 'inherit' in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Interactive
|
||||
===========
|
||||
*/
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
@@ -34,3 +34,4 @@ export * from './components/Container';
|
||||
export * from './components/Button';
|
||||
export * from './components/Icon';
|
||||
export * from './components/Checkbox';
|
||||
export * from './components/Table';
|
||||
|
||||
Reference in New Issue
Block a user