feat(DataTable): introduce 1.0 component

- new component for complex data-based table content
- add in types, layouts, and test
- add in snapshots
- make use of newly-added tokens

.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,38 @@
+/*------------------------------------*\
+    # DATA TABLE
+\*------------------------------------*/
+
+/**
+ * DataTable
+ */
+
+.data-table__caption {
+  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);
+  }
+}
+
+/**
+ * Color Tokens
+ */
+ .data-table {
+  .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.ts

@@ -0,0 +1,32 @@
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import type { StoryObj, Meta } from '@storybook/react';
+import type React from 'react';
+
+import { DataTable } from './DataTable';
+
+export default {
+  title: 'Components/DataTable',
+  component: DataTable,
+  parameters: {
+    badges: [BADGE.BETA, 'intro-1.0', 'current-1.0'],
+  },
+} as Meta<Args>;
+
+type Args = React.ComponentProps<typeof DataTable>;
+
+export const Default: StoryObj<Args> = {
+  args: {},
+};
+
+export const WithBasicCaption: StoryObj<Args> = {
+  args: {
+    caption: 'Test Caption',
+  },
+};
+
+export const WithFullCaption: StoryObj<Args> = {
+  args: {
+    caption: 'Test Caption',
+    subcaption: 'Additional Sub-caption text description',
+  },
+};

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

src/components/DataTable/DataTable.tsx

@@ -0,0 +1,94 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import type { Status } from '../../util/variant-types';
+import type { IconName } from '../Icon/Icon';
+
+import styles from './DataTable.module.css';
+
+export type DataTableProps = {
+  // Component API
+  /**
+   * CSS class names that can be appended to the component.
+   */
+  className?: string;
+  // Design API
+  caption?: string;
+  rowStyle?: 'striped' | 'lined';
+  subcaption?: string;
+  tableStyle?: 'basic' | 'border';
+  isSelectable?: boolean;
+  isStatusEligible?: boolean;
+};
+
+// TODO: DataTableColumnProps
+
+export type DataTableRowProps = {
+  isInteractive?: boolean;
+  isSelectable?: boolean;
+  status?: Extract<Status, 'error' | 'favorable' | 'warning'>;
+};
+
+// TODO: DataTableTableActionsProps
+
+export type DataTableHeaderProps = {
+  initialSortDirection?: 'ascending' | 'descending';
+  isSticky?: boolean;
+  isSelected?: boolean;
+  isSortable?: boolean;
+  //textOverflowBehavior handled by tailwind/styles
+};
+
+export type DataTableHeaderCellProps = {
+  alignment?: 'leading' | 'trailing';
+  /**
+   * An icon that prefixes the field input.
+   */
+  leadingIcon?: IconName;
+  sublabel?: string;
+};
+
+export type DataTableDataCellProps = DataTableHeaderCellProps & {
+  // dataType?: 'link' | 'number' | 'text' | 'boolean' | 'list';
+};
+
+// TODO: TableSectionHeaderProps
+
+/**
+ * `import {DataTable} from "@chanzuckerberg/eds";`
+ *
+ * DataTable represents a full-featured data view for controlling, sorting, and acting on tabular data. It:
+ * - handles responsive behaviors
+ * - allows for showing status for each row
+ * - sort behavior on individual columns
+ * - **Soon** search of table content w/ hooks to support
+ * - **Soon** actions to perform when rows can be selected
+ *
+ */
+export const DataTable = ({
+  className,
+  // Add other deferenced props to use
+  caption,
+  subcaption,
+  ...other
+}: DataTableProps) => {
+  const componentClassName = clsx(styles['data-table'], className);
+  const tableClassName = clsx(styles['data-table__table']);
+
+  return (
+    <div
+      className={componentClassName}
+      // Other de-referenced props go here
+      {...other}
+    >
+      {caption && (
+        <div className={styles['data-table__caption']}>{caption}</div>
+      )}
+      {subcaption && (
+        <div className={styles['data-table__subcaption']}>{subcaption}</div>
+      )}
+
+      <div className={tableClassName}>Table Here</div>
+    </div>
+  );
+};

src/components/DataTable/__snapshots__/DataTable.test.ts.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DataTable /> Default story renders snapshot 1`] = `
+<div
+  class="data-table"
+>
+  <div
+    class="data-table__table"
+  >
+    Table Here
+  </div>
+</div>
+`;
+
+exports[`<DataTable /> WithBasicCaption story renders snapshot 1`] = `
+<div
+  class="data-table"
+>
+  <div
+    class="data-table__caption"
+  >
+    Test Caption
+  </div>
+  <div
+    class="data-table__table"
+  >
+    Table Here
+  </div>
+</div>
+`;
+
+exports[`<DataTable /> WithFullCaption story renders snapshot 1`] = `
+<div
+  class="data-table"
+>
+  <div
+    class="data-table__caption"
+  >
+    Test Caption
+  </div>
+  <div
+    class="data-table__subcaption"
+  >
+    Additional Sub-caption text description
+  </div>
+  <div
+    class="data-table__table"
+  >
+    Table Here
+  </div>
+</div>
+`;

src/components/DataTable/index.ts

@@ -0,0 +1 @@
+export { DataTable as default } from './DataTable';

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';