From 8ee024908ff3381c85275e4d82e57a2918314765 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Tue, 27 Aug 2024 09:50:45 -0500 Subject: [PATCH] feat(DataTable): introduce 1.0 component - new component for complex data-based table content - add in the documentation for props - add in types, layouts, and test - add in snapshots - make use of newly-added tokens --- .storybook/data/tokens.json | 1 + .storybook/preview.tsx | 1 + src/components/DataTable/DataTable.module.css | 66 + .../DataTable/DataTable.stories.tsx | 223 ++++ src/components/DataTable/DataTable.test.ts | 7 + src/components/DataTable/DataTable.tsx | 193 +++ .../__snapshots__/DataTable.test.ts.snap | 1059 +++++++++++++++++ src/components/DataTable/index.ts | 1 + src/design-tokens/primitives.json | 5 + src/index.ts | 1 + src/tokens-dist/css/variables.css | 1 + src/tokens-dist/json/variables-nested.json | 1 + 12 files changed, 1559 insertions(+) create mode 100644 src/components/DataTable/DataTable.module.css create mode 100644 src/components/DataTable/DataTable.stories.tsx create mode 100644 src/components/DataTable/DataTable.test.ts create mode 100644 src/components/DataTable/DataTable.tsx create mode 100644 src/components/DataTable/__snapshots__/DataTable.test.ts.snap create mode 100644 src/components/DataTable/index.ts diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json index 3910b55aa..034fba7b8 100644 --- a/.storybook/data/tokens.json +++ b/.storybook/data/tokens.json @@ -811,6 +811,7 @@ "eds-size-20": "160", "eds-size-24": "192", "eds-size-32": "256", + "eds-size-34": "272", "eds-size-40": "320", "eds-size-base-unit": "8", "eds-size-half": "4", diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index ccd9cc76a..6afd608e5 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -84,6 +84,7 @@ export const parameters: Preview['parameters'] = { ...createInitialReleaseConfig('1.2'), ...createInitialReleaseConfig('1.1'), ...createInitialReleaseConfig('1.0'), + ...createCurrentReleaseConfig('1.0'), ...createCurrentReleaseConfig('1.3'), ...createCurrentReleaseConfig('2.0'), ...createCurrentReleaseConfig('2.1'), diff --git a/src/components/DataTable/DataTable.module.css b/src/components/DataTable/DataTable.module.css new file mode 100644 index 000000000..dd2170c2e --- /dev/null +++ b/src/components/DataTable/DataTable.module.css @@ -0,0 +1,66 @@ +/*------------------------------------*\ + # DATA TABLE +\*------------------------------------*/ + +/** + * DataTable + */ + + /* Visible table caption */ +.data-table__caption-container { + display: flex; + align-items: flex-end; + flex-wrap: wrap; + justify-content: space-between; + gap: calc(var(--eds-size-3) / 16 * 1rem) calc(var(--eds-size-6) / 16 * 1rem); + + text-align: start; + margin: 0 calc(var(--eds-size-3) / 16 * 1rem) calc(var(--eds-size-4) / 16 * 1rem); +} + +.data-table__caption-text { + flex-grow: 1; +} + +/* Invisible table caption (a11y) */ +.data-table__aria-caption { + display: none; +} + +.data-table__caption { + caption-side: top; + font: var(--eds-theme-typography-headline-md-bold); +} + +.data-table__subcaption { + font: var(--eds-theme-typography-headline-sm); +} + +.data-table__table { + border: 1px solid; + width: 100%; + + .data-table__caption + &, + .data-table__subcaption + & { + margin-top: calc(var(--eds-size-4) / 16 * 1rem); + } +} + +.data-table__search { + width: calc(var(--eds-size-34) / 16 * 1rem); +} + +/** + * Color Tokens + */ +.data-table { + display: block; + + .data-table__caption { + color: var(--eds-theme-color-text-utility-default-primary); + } + + .data-table__subcaption { + color: var(--eds-theme-color-text-utility-default-secondary); + } +} diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx new file mode 100644 index 000000000..38c077a98 --- /dev/null +++ b/src/components/DataTable/DataTable.stories.tsx @@ -0,0 +1,223 @@ +import { BADGE } from '@geometricpanda/storybook-addon-badges'; +import type { StoryObj, Meta } from '@storybook/react'; +import React from 'react'; + +import { DataTable } from './DataTable'; +import { chromaticViewports } from '../../util/viewports'; +import Button from '../Button'; +import Menu from '../Menu'; + +export default { + title: 'Components/DataTable', + component: DataTable, + parameters: { + badges: [BADGE.BETA, 'intro-1.0', 'current-1.0'], + chromatic: { + viewports: [ + chromaticViewports.ipadMini, + chromaticViewports.chromebook, + chromaticViewports.googlePixel2, + ], + }, + }, + argTypes: { + actions: { + control: false, + }, + }, + args: { + children: ( + + + + + + +
TODO: Table rows/cells Here
+ ), + }, +} as Meta; + +type Args = React.ComponentProps; + +export const Default: StoryObj = { + args: {}, +}; + +export const WithBasicCaption: StoryObj = { + args: { + caption: 'Fruits of the world', + }, +}; + +export const WithFullCaption: StoryObj = { + args: { + caption: 'Fruits of the world', + subcaption: "Aren't they all so delicious?", + }, +}; + +export const WithSearch: StoryObj = { + args: { + caption: 'Fruits of the world', + subcaption: "Aren't they all so delicious?", + onSearchChange: () => {}, + }, +}; + +export const WithOnlyActions: StoryObj = { + args: { + actions: ( + + + + + + + ), + }, +}; + +export const WithLongCaption: StoryObj = { + args: { + caption: + 'This is a really long title that really should not be this long and it just keeps going and going and going', + subcaption: 'Seriously, who let this happen?', + onSearchChange: () => {}, + actions: ( + + + + + + + + + + + +
+ TODO: Table rows/cells Here +
+ +`; + +exports[` TableB story renders snapshot 1`] = ` +
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+
+
+ + + +
+
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` TableC story renders snapshot 1`] = ` +
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+
+
+ + + +
+
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` TableD story renders snapshot 1`] = ` +
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+
+
+ + + +
+
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` WithBasicCaption story renders snapshot 1`] = ` +
+
+
+ +
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` WithFullCaption story renders snapshot 1`] = ` +
+
+
+ + +
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` WithLongCaption story renders snapshot 1`] = ` +
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+
+
+ + + +
+
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` WithOnlyActions story renders snapshot 1`] = ` +
+
+
+
+ + + +
+
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` WithSearch story renders snapshot 1`] = ` +
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` WithSearchAndActions story renders snapshot 1`] = ` +
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+
+
+ + + +
+
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; + +exports[` WithSearchAndCustomActions story renders snapshot 1`] = ` +
+
+
+ + +
+
+
+
+ +
+ +
+
+
+
+
+
+ + +
+ +
+
+
+
+ + + + + + +
+ TODO: Table rows/cells Here +
+
+`; diff --git a/src/components/DataTable/index.ts b/src/components/DataTable/index.ts new file mode 100644 index 000000000..cadb02a9a --- /dev/null +++ b/src/components/DataTable/index.ts @@ -0,0 +1 @@ +export { DataTable as default } from './DataTable'; diff --git a/src/design-tokens/primitives.json b/src/design-tokens/primitives.json index b6e1733d5..8a9f7d5af 100644 --- a/src/design-tokens/primitives.json +++ b/src/design-tokens/primitives.json @@ -655,6 +655,11 @@ "group": "size", "comment": "Relative EMs (rem)" }, + "34": { + "value": "272", + "group": "size", + "comment": "Relative EMs (rem)" + }, "40": { "value": "320", "group": "size", diff --git a/src/index.ts b/src/index.ts index 47b2912b0..e8703047d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,6 +29,7 @@ export { default as Button } from './components/Button'; export { default as ButtonGroup } from './components/ButtonGroup'; export { default as Card } from './components/Card'; export { default as Checkbox } from './components/Checkbox'; +export { default as DataTable } from './components/DataTable'; export { default as FieldLabel } from './components/FieldLabel'; export { default as FieldNote } from './components/FieldNote'; export { default as Fieldset } from './components/Fieldset'; diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css index 4778c90d2..229db7bf8 100644 --- a/src/tokens-dist/css/variables.css +++ b/src/tokens-dist/css/variables.css @@ -13,6 +13,7 @@ --eds-size-half: 4; /* Relative EMs (rem) */ --eds-size-base-unit: 8; /* Relative EMs (rem) @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-size-40: 320; /* Relative EMs (rem) */ + --eds-size-34: 272; /* Relative EMs (rem) */ --eds-size-32: 256; /* Relative EMs (rem) */ --eds-size-24: 192; /* Relative EMs (rem) */ --eds-size-20: 160; /* Relative EMs (rem) */ diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json index a7af61bb3..ed6350f8b 100644 --- a/src/tokens-dist/json/variables-nested.json +++ b/src/tokens-dist/json/variables-nested.json @@ -1465,6 +1465,7 @@ "20": "160", "24": "192", "32": "256", + "34": "272", "40": "320", "base-unit": "8", "half": "4",