feat(DataTable): add support for table row statuses

- component to support standard EDS statuses per row
- update tests and snapshots (new story for comparison)

src/components/DataTable/DataTable.module.css

@@ -127,6 +127,28 @@
   }
 }
 
+.data-table__status-cell {
+  text-align: center;
+
+  .data-table--size-md & {
+    padding: calc(var(--eds-size-2) / 16 * 1rem)
+      calc(var(--eds-size-3) / 16 * 1rem);
+  }
+  .data-table--size-sm & {
+    padding: calc(var(--eds-size-half) / 16 * 1rem)
+      calc(var(--eds-size-1) / 16 * 1rem);
+  }
+}
+
+.data-table__status-header-cell {
+  /* display: none; */
+  /* visibility: hidden; */
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  text-indent: 9999;
+}
+
 .data-table__cell {
   display: flex;
   gap: calc(var(--eds-size-1) / 16 * 1rem);
@@ -288,3 +310,31 @@
     background-color: var(--eds-theme-color-background-utility-interactive-low-emphasis);
   }
 }
+
+.data-table .data-table__status-cell {
+  &.data-table--status-critical {
+    color: var(--eds-theme-color-icon-utility-critical)
+  }
+
+  &.data-table--status-favorable {
+    color: var(--eds-theme-color-icon-utility-favorable);
+  }
+
+  &.data-table--status-warning {
+    color: var(--eds-theme-color-icon-utility-warning);
+  }
+}
+
+.data-table .data-table__row {
+  &.data-table--status-critical {
+    background-color: var(--eds-theme-color-background-utility-critical-low-emphasis);
+  }
+
+  &.data-table--status-favorable {
+    background-color: var(--eds-theme-color-background-utility-favorable-low-emphasis);
+  }
+
+  &.data-table--status-warning {
+    background-color: var(--eds-theme-color-background-utility-warning-low-emphasis);
+  }
+}

src/components/DataTable/DataTable.stories.tsx

@@ -16,6 +16,7 @@ import {
 // We import all of the utilities from tanstack here, and this can contain other custom utilities
 import { Button, Menu, Checkbox, DataTableUtils } from '../..';
 
+import type { Status } from '../../util/variant-types';
 import { chromaticViewports } from '../../util/viewports';
 
 export default {
@@ -59,6 +60,8 @@ type Person = {
   age: number;
   visits: number;
   progress: number;
+  // This column is used for tables that are eligible for status
+  status?: Extract<Status, 'critical' | 'favorable' | 'warning'>;
 };
 
 // Specifying the example (static) data for the table to use with tanstack primitives
@@ -76,6 +79,7 @@ const defaultData: Person[] = [
     age: 40,
     visits: 40,
     progress: 80,
+    status: 'warning',
   },
   {
     firstName: 'Tanner',
@@ -90,6 +94,7 @@ const defaultData: Person[] = [
     age: 45,
     visits: 20,
     progress: 10,
+    status: 'critical',
   },
   {
     firstName: 'Tandy',
@@ -111,6 +116,7 @@ const defaultData: Person[] = [
     age: 45,
     visits: 20,
     progress: 10,
+    status: 'favorable',
   },
   {
     firstName: 'Tandy',
@@ -700,6 +706,96 @@ export const Grouping: StoryObj<Args> = {
   },
 };
 
+/**
+ * You can specify detailed statuses for each row in a table, matching a few common options.
+ * Extend the data type to include `status` which maps to the internal type
+ *
+ * Use the Utility type StatusDataTable (TODO-AH)
+ *
+ * TODO:
+ * - should indent table caption and subcaption to align to status column?
+ */
+export const StatusRows: StoryObj<Args> = {
+  args: {
+    caption: 'Test table',
+    subcaption: 'Additional Subcaption',
+    isStatusEligible: true,
+    tableStyle: 'border',
+    rowStyle: 'lined',
+  },
+  render: (args) => {
+    const columns = [
+      // TODO-AH: export something to make this more convenient
+      columnHelper.accessor(DataTable.__StatusColumnId__, {
+        header: () => <DataTable.StatusHeaderCell />,
+        cell: (info) => <DataTable.StatusCell status={info.getValue()} />,
+        // TODO-AH: figure out cell size to make 28x32
+        size: 32,
+      }),
+      columnHelper.accessor('firstName', {
+        header: () => (
+          <DataTable.HeaderCell sortDirection="ascending">
+            First Name
+          </DataTable.HeaderCell>
+        ),
+        cell: (info) => (
+          <DataTable.DataCell>{info.getValue()}</DataTable.DataCell>
+        ),
+      }),
+      columnHelper.accessor((row) => row.lastName, {
+        id: 'lastName',
+        header: () => <DataTable.HeaderCell>Last Name</DataTable.HeaderCell>,
+        cell: (info) => (
+          <DataTable.DataCell>{info.getValue()}</DataTable.DataCell>
+        ),
+      }),
+      columnHelper.accessor('age', {
+        header: () => (
+          <DataTable.HeaderCell alignment="trailing">Age</DataTable.HeaderCell>
+        ),
+        cell: (info) => (
+          <DataTable.DataCell alignment="trailing">
+            {info.renderValue()}
+          </DataTable.DataCell>
+        ),
+      }),
+      columnHelper.accessor('visits', {
+        header: () => (
+          <DataTable.HeaderCell alignment="trailing">
+            Visits
+          </DataTable.HeaderCell>
+        ),
+        cell: (info) => (
+          <DataTable.DataCell alignment="trailing">
+            {info.renderValue()}
+          </DataTable.DataCell>
+        ),
+      }),
+      columnHelper.accessor('progress', {
+        header: () => (
+          <DataTable.HeaderCell alignment="trailing">
+            Profile Progress
+          </DataTable.HeaderCell>
+        ),
+        cell: (info) => (
+          <DataTable.DataCell alignment="trailing">
+            {info.renderValue()}
+          </DataTable.DataCell>
+        ),
+      }),
+    ];
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const table = DataTableUtils.useReactTable({
+      data: defaultData,
+      columns,
+      getCoreRowModel: DataTableUtils.getCoreRowModel(),
+    });
+
+    return <DataTable {...args} table={table} />;
+  },
+};
+
 // TODO: Story for sticky column pinning (https://tanstack.com/table/latest/docs/framework/react/examples/column-pinning-sticky)
 
 export const DefaultWithCustomTable: StoryObj<Args> = {