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