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

@@ -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",

.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'),

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);
+ }
+}

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: (
+ <table>
+ <tbody className="border-2 border-utility-default-lowEmphasis-hover">
+ <tr>
+ <td>TODO: Table rows/cells Here</td>
+ </tr>
+ </tbody>
+ </table>
+ ),
+ },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof DataTable>;
+
+export const Default: StoryObj<Args> = {
+ args: {},
+};
+
+export const WithBasicCaption: StoryObj<Args> = {
+ args: {
+ caption: 'Fruits of the world',
+ },
+};
+
+export const WithFullCaption: StoryObj<Args> = {
+ args: {
+ caption: 'Fruits of the world',
+ subcaption: "Aren't they all so delicious?",
+ },
+};
+
+export const WithSearch: StoryObj<Args> = {
+ args: {
+ caption: 'Fruits of the world',
+ subcaption: "Aren't they all so delicious?",
+ onSearchChange: () => {},
+ },
+};
+
+export const WithOnlyActions: StoryObj<Args> = {
+ args: {
+ actions: (
+ <Button
+ aria-label="Add a row"
+ icon="add-encircled"
+ iconLayout="icon-only"
+ isDisabled
+ rank="secondary"
+ />
+ ),
+ },
+};
+
+export const WithSearchAndActions: StoryObj<Args> = {
+ args: {
+ caption: 'Fruits of the world',
+ subcaption: "Aren't they all so delicious?",
+ onSearchChange: () => {},
+ actions: (
+ <Button
+ aria-label="Add a row"
+ icon="add-encircled"
+ iconLayout="icon-only"
+ isDisabled
+ rank="secondary"
+ />
+ ),
+ },
+};
+
+export const WithSearchAndCustomActions: StoryObj<Args> = {
+ args: {
+ caption: 'Fruits of the world',
+ subcaption: "Aren't they all so delicious?",
+ onSearchChange: () => {},
+ actions: (
+ <>
+ <Button
+ aria-label="add item"
+ icon="add"
+ iconLayout="icon-only"
+ ></Button>
+ <Button icon="sparkles" iconLayout="left" rank="secondary">
+ Tailor an Activity
+ </Button>
+ <Menu>
+ <Menu.PlainButton as={React.Fragment}>
+ <Button
+ aria-label="show more actions"
+ icon="dots-horizontal"
+ iconLayout="icon-only"
+ rank="secondary"
+ />
+ </Menu.PlainButton>
+ <Menu.Items className="w-40">
+ <Menu.Item href="https://example.org">Menu Label</Menu.Item>
+ <Menu.Item href="https://example.org">Menu Label</Menu.Item>
+ </Menu.Items>
+ </Menu>
+ </>
+ ),
+ },
+};
+
+export const WithLongCaption: StoryObj<Args> = {
+ 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: (
+ <Button
+ aria-label="Add a row"
+ icon="add-encircled"
+ iconLayout="icon-only"
+ isDisabled
+ rank="secondary"
+ />
+ ),
+ },
+};
+
+// TODO: pick a table library based on the integration examples below
+
+export const TableA: StoryObj<Args> = {
+ 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: (
+ <Button
+ aria-label="Add a row"
+ icon="add-encircled"
+ iconLayout="icon-only"
+ isDisabled
+ rank="secondary"
+ />
+ ),
+ },
+};
+
+export const TableB: StoryObj<Args> = {
+ 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: (
+ <Button
+ aria-label="Add a row"
+ icon="add-encircled"
+ iconLayout="icon-only"
+ isDisabled
+ rank="secondary"
+ />
+ ),
+ },
+};
+
+export const TableC: StoryObj<Args> = {
+ 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: (
+ <Button
+ aria-label="Add a row"
+ icon="add-encircled"
+ iconLayout="icon-only"
+ isDisabled
+ rank="secondary"
+ />
+ ),
+ },
+};
+
+export const TableD: StoryObj<Args> = {
+ 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: (
+ <Button
+ aria-label="Add a row"
+ icon="add-encircled"
+ iconLayout="icon-only"
+ isDisabled
+ rank="secondary"
+ />
+ ),
+ },
+};

src/components/DataTable/DataTable.test.ts

@@ -0,0 +1,7 @@
+import { generateSnapshots } from '@chanzuckerberg/story-utils';
+import * as stories from './DataTable.stories';
+import type { StoryFile } from '../../util/utility-types';
+
+describe('<DataTable />', () => {
+ generateSnapshots(stories as StoryFile);
+});