@arbor-education/design-system.components 0.3.0 → 0.3.2

package/src/components/table/Table.stories.tsx

@@ -13,6 +13,7 @@ import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
 import { ModalManager } from 'Components/modal/modalManager/ModalManager';
 import { Modal } from 'Components/modal/Modal';
 import { ModalUtils } from 'Utils/ModalUtils';
+import type { SemanticColorKey } from './cellColorStyles';
 
 type TableProps = ComponentProps<typeof Table>;
 
@@ -31,20 +32,26 @@ const meta: Meta<TableProps> = {
 
 type Story = StoryObj<typeof Table>;
 
+type CellColors = {
+  foregroundColor?: string;
+  backgroundColor?: string;
+  semanticColor?: SemanticColorKey;
+};
+
 interface RowData {
   id: number;
-  name: string;
-  email: string;
-  role: string;
-  status: string;
+  name: { value: string } & CellColors;
+  email: { value: string } & CellColors;
+  role: { value: string } & CellColors;
+  status: { value: string } & CellColors;
 }
 
 const sampleData: RowData[] = [
-  { id: 1, name: 'Alice Johnson', email: 'alice.johnson@example.com', role: 'Developer', status: 'Active' },
-  { id: 2, name: 'Bob Smith', email: 'bob.smith@example.com', role: 'Designer', status: 'Active' },
-  { id: 3, name: 'Charlie Brown', email: 'charlie.brown@example.com', role: 'Manager', status: 'Inactive' },
-  { id: 4, name: 'Diana Prince', email: 'diana.prince@example.com', role: 'Developer', status: 'Active' },
-  { id: 5, name: 'Ethan Hunt', email: 'ethan.hunt@example.com', role: 'Analyst', status: 'Active' },
+  { id: 1, name: { value: 'Alice Johnson' }, email: { value: 'alice.johnson@example.com' }, role: { value: 'Developer' }, status: { value: 'Active' } },
+  { id: 2, name: { value: 'Bob Smith' }, email: { value: 'bob.smith@example.com' }, role: { value: 'Designer' }, status: { value: 'Active' } },
+  { id: 3, name: { value: 'Charlie Brown' }, email: { value: 'charlie.brown@example.com' }, role: { value: 'Manager' }, status: { value: 'Inactive' } },
+  { id: 4, name: { value: 'Diana Prince' }, email: { value: 'diana.prince@example.com' }, role: { value: 'Developer' }, status: { value: 'Active' } },
+  { id: 5, name: { value: 'Ethan Hunt' }, email: { value: 'ethan.hunt@example.com' }, role: { value: 'Analyst' }, status: { value: 'Active' } },
 ];
 
 const defaultColDef: ColDef = {
@@ -68,17 +75,20 @@ const sampleColumnDefs: (ColDef | ColGroupDef)[] = [
       field: 'role',
       headerTooltip: 'The role of the user',
     }],
+    // Value formatters from the defaultColDef are not respected for non-string value
+    // so until AG Grid fixes it we have to do it explicitly on each colDef
+    valueFormatter: Table.DefaultValueFormatter,
   },
-  { field: 'status' },
+  { field: 'status', valueFormatter: Table.DefaultValueFormatter },
 ];
 
-const FooterContent = [
+const footerContent = [
   <Button key={0} variant="primary">Button 1</Button>,
   <RowCountInfo key={3} />,
   <Button key={2} variant="secondary">Button 2</Button>,
 ];
 
-const HeaderContent = [
+const headerContent = [
   <div key={0} style={{ display: 'flex', gap: '0.5rem' }}>
     <Button key={0} variant="secondary" size="S">Button 1</Button>
     <Button key={1} variant="secondary" size="S">Button 2</Button>
@@ -95,7 +105,7 @@ export const Default: Story = {
   args: {
     rowData: sampleData,
     columnDefs: sampleColumnDefs,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
     rowSelection: { mode: 'multiRow', checkboxes: true },
     initialState: {
@@ -111,7 +121,7 @@ export const WithFooter: Story = {
     columnDefs: sampleColumnDefs,
     defaultColDef: defaultColDef,
     domLayout: 'autoHeight',
-    footerContent: FooterContent,
+    footerContent,
     pagination: true,
   },
 };
@@ -122,7 +132,7 @@ export const WithHeader: Story = {
     columnDefs: sampleColumnDefs,
     defaultColDef: defaultColDef,
     domLayout: 'autoHeight',
-    headerContent: HeaderContent,
+    headerContent,
     onTableSettingsChanged: (newSettings) => {
       console.log('Settings changed', newSettings);
     },
@@ -144,7 +154,7 @@ export const WithHeaderAndNoSearch: Story = {
     columnDefs: sampleColumnDefs,
     defaultColDef: defaultColDef,
     domLayout: 'autoHeight',
-    headerContent: HeaderContent,
+    headerContent,
     hasSearch: false,
   },
 };
@@ -155,8 +165,8 @@ export const WithHeaderAndFooter: Story = {
     columnDefs: sampleColumnDefs,
     defaultColDef: defaultColDef,
     domLayout: 'autoHeight',
-    headerContent: HeaderContent,
-    footerContent: FooterContent,
+    headerContent,
+    footerContent,
   },
 };
 
@@ -171,7 +181,7 @@ export const WithBulkActions: Story = {
   args: {
     rowData: sampleData,
     columnDefs: sampleColumnDefs,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
     headerContent: [
       <BulkActionsDropdown
@@ -204,7 +214,7 @@ export const WithHideColumnsDropdown: Story = {
   args: {
     rowData: sampleData,
     columnDefs: sampleColumnDefs,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -249,7 +259,7 @@ export const WithRestrictedHideColumnsDropdown: Story = {
   args: {
     rowData: sampleData,
     columnDefs: sampleColumnDefs,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -301,7 +311,7 @@ export const WithClientSidePagination: StoryObj<TableProps> = {
   args: {
     rowData: sampleData,
     columnDefs: sampleColumnDefs,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
     pagination: true,
     footerContent: <PaginationPanel availableSizes={[1, 2, 3, 4, 'All']} initialPageSize={2} />,
@@ -319,7 +329,7 @@ export const WithServerSidePagination: StoryObj<TableProps> = {
   args: {
     rowData: sampleData,
     columnDefs: sampleColumnDefs,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
     pagination: false,
   },
@@ -366,6 +376,9 @@ const sampleColumnDefsWithButtonCellRenderer: (ColDef | ColGroupDef)[] = [
       field: 'name',
       headerTooltip: 'The name of the user',
       cellRenderer: 'dsButtonCellRenderer',
+      cellRendererParams: {
+        supressCellFocusAndFocusFirstElement: true,
+      },
       editable: false,
     }, {
       field: 'email',
@@ -392,9 +405,9 @@ export const WithButtonCellRenderer: Story = {
   args: {
     rowData: sampleDataWithButtonCellRenderer,
     columnDefs: sampleColumnDefsWithButtonCellRenderer,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
-    footerContent: FooterContent,
+    footerContent,
     pagination: true,
   },
 };
@@ -403,7 +416,7 @@ export const WithButtonCellRendererThatOpensAModalWithModalManager: StoryObj<Tab
   args: {
     rowData: sampleData,
     columnDefs: sampleColumnDefs,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
   },
   render: () => {
@@ -448,7 +461,7 @@ export const WithButtonCellRendererThatOpensAModalWithComposableModal: StoryObj<
   args: {
     rowData: sampleData,
     columnDefs: sampleColumnDefs,
-    defaultColDef: defaultColDef,
+    defaultColDef,
     domLayout: 'autoHeight',
   },
   render: () => {
@@ -652,7 +665,7 @@ const colDefsWithValidationClasses: (ColDef | ColGroupDef)[] = [
         maxLength: 10,
       },
       cellClassRules: {
-        'ds-table__cell--invalid': params => params.value.length > 10,
+        'ds-table__cell--invalid': params => params.value.value.length > 10,
       },
     }, {
       field: 'email',
@@ -683,4 +696,247 @@ export const WithValidationClassesAdded: Story = {
   },
 };
 
+const tidyTableDefaultColDef: ColDef = {
+  ...defaultColDef,
+  suppressHeaderMenuButton: true,
+  resizable: false,
+};
+
+const assessmentComponentOptions = [
+  { value: 'comp-english-lang', label: 'English Language' },
+  { value: 'comp-english-lit', label: 'English Literature' },
+  { value: 'comp-maths', label: 'Maths' },
+];
+
+const visibilityOptions = [
+  { value: 'show', label: 'Show' },
+  { value: 'auto-visible', label: 'Auto-visible' },
+  { value: 'hide', label: 'Hide' },
+];
+
+const marksheetTidyTableColumnDefs: (ColDef | ColGroupDef)[] = [
+  {
+    headerName: 'Assessment Component',
+    field: 'assessmentComponent',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellEditor: 'dsSelectDropdownCellEditor',
+    cellRendererParams: { options: assessmentComponentOptions, placeholder: 'Select' },
+    cellEditorParams: { options: assessmentComponentOptions, placeholder: 'Select' },
+    editable: params => !params.node.group,
+  },
+  {
+    headerName: 'Visibility',
+    field: 'visibility',
+    cellRenderer: 'dsSelectDropdownCellRenderer',
+    cellEditor: 'dsSelectDropdownCellEditor',
+    cellRendererParams: { options: visibilityOptions, placeholder: 'Select' },
+    cellEditorParams: { options: visibilityOptions, placeholder: 'Select' },
+    editable: params => !params.node.group,
+  },
+  {
+    headerName: 'Editable',
+    field: 'editable',
+    editable: true,
+  },
+  {
+    headerName: 'Formatting',
+    field: 'formatting',
+    editable: false,
+  },
+];
+
+const marksheetTidyTableData = [
+  {
+    id: 1,
+    name: 'Student Name',
+    assessmentComponent: undefined,
+    visibility: 'show',
+    editable: true,
+    formatting: undefined,
+  },
+  {
+    id: 2,
+    name: 'Autumn',
+    children: [
+      { id: 3, name: 'English Language', assessmentComponent: 'comp-english-lang', visibility: 'auto-visible', editable: true, formatting: undefined },
+      { id: 4, name: 'English Literature', assessmentComponent: 'comp-english-lit', visibility: 'auto-visible', editable: true, formatting: undefined },
+      { id: 5, name: 'Maths', assessmentComponent: 'comp-maths', visibility: 'auto-visible', editable: true, formatting: undefined },
+    ],
+  },
+  {
+    id: 6,
+    name: 'Spring',
+    children: [
+      { id: 7, name: 'English Language', assessmentComponent: 'comp-english-lang', visibility: 'auto-visible', editable: true, formatting: undefined },
+      { id: 8, name: 'English Literature', assessmentComponent: 'comp-english-lit', visibility: 'auto-visible', editable: true, formatting: undefined },
+      { id: 9, name: 'Maths', assessmentComponent: 'comp-maths', visibility: 'auto-visible', editable: true, formatting: undefined },
+    ],
+  },
+  {
+    id: 10,
+    name: 'Summer',
+    children: [
+      { id: 11, name: 'English Language', assessmentComponent: 'comp-english-lang', visibility: 'auto-visible', editable: true, formatting: undefined },
+      { id: 12, name: 'English Literature', assessmentComponent: 'comp-english-lit', visibility: 'auto-visible', editable: true, formatting: undefined },
+      { id: 13, name: 'Maths', assessmentComponent: 'comp-maths', visibility: 'auto-visible', editable: true, formatting: undefined },
+    ],
+  },
+];
+
+export const TidyTable: Story = {
+  args: {
+    rowData: marksheetTidyTableData,
+    columnDefs: marksheetTidyTableColumnDefs,
+    defaultColDef: tidyTableDefaultColDef,
+    domLayout: 'autoHeight',
+    tableTheme: 'tidy',
+    treeData: true,
+    treeDataChildrenField: 'children',
+    singleClickEdit: true,
+    stopEditingWhenCellsLoseFocus: true,
+    groupDefaultExpanded: -1,
+    icons: {
+      groupExpanded: '',
+      groupContracted: '',
+    },
+    rowSelection: {
+      mode: 'multiRow',
+      groupSelects: 'filteredDescendants',
+    },
+    autoGroupColumnDef: {
+      field: 'name',
+      headerName: 'Marksheet Columns',
+      headerTooltip: 'Marksheet column or group name',
+      editable: true,
+      singleClickEdit: true,
+      cellRenderer: 'agGroupCellRenderer',
+      cellEditor: 'agTextCellEditor',
+      cellRendererParams: {
+        suppressCount: true,
+        suppressDoubleClickExpand: true,
+        suppressEnterExpand: true,
+        innerRenderer: 'dsInlineTextCellRenderer',
+      },
+    },
+  },
+};
+
+export const TableWithExplicitColours: Story = {
+  args: {
+    rowData: [
+      {
+        id: 1,
+        name: { value: 'Alice Johnson', backgroundColor: '#e3f2fd', foregroundColor: '#0d47a1' },
+        email: { value: 'alice.johnson@example.com' },
+        role: { value: 'Developer', backgroundColor: '#c8e6c9', foregroundColor: '#1b5e20' },
+        status: { value: 'Active', backgroundColor: '#a5d6a7', foregroundColor: '#2e7d32' },
+      },
+      {
+        id: 2,
+        name: { value: 'Bob Smith', backgroundColor: '#fff3e0', foregroundColor: '#e65100' },
+        email: { value: 'bob.smith@example.com' },
+        role: { value: 'Designer', backgroundColor: '#f3e5f5', foregroundColor: '#4a148c' },
+        status: { value: 'Active', backgroundColor: '#a5d6a7', foregroundColor: '#2e7d32' },
+      },
+      {
+        id: 3,
+        name: { value: 'Charlie Brown', backgroundColor: '#fce4ec', foregroundColor: '#880e4f' },
+        email: { value: 'charlie.brown@example.com' },
+        role: { value: 'Manager', backgroundColor: '#fff9c4', foregroundColor: '#f57f17' },
+        status: { value: 'Inactive', backgroundColor: '#ffcdd2', foregroundColor: '#b71c1c' },
+      },
+      {
+        id: 4,
+        name: { value: 'Diana Prince', backgroundColor: '#e1bee7', foregroundColor: '#6a1b9a' },
+        email: { value: 'diana.prince@example.com' },
+        role: { value: 'Developer', backgroundColor: '#c8e6c9', foregroundColor: '#1b5e20' },
+        status: { value: 'Active', backgroundColor: '#a5d6a7', foregroundColor: '#2e7d32' },
+      },
+      {
+        id: 5,
+        name: { value: 'Ethan Hunt', backgroundColor: '#b2ebf2', foregroundColor: '#006064' },
+        email: { value: 'ethan.hunt@example.com' },
+        role: { value: 'Analyst', backgroundColor: '#ffccbc', foregroundColor: '#bf360c' },
+        status: { value: 'Active', backgroundColor: '#a5d6a7', foregroundColor: '#2e7d32' },
+      },
+    ],
+    columnDefs: sampleColumnDefs,
+    defaultColDef,
+    headerContent,
+    onCellValueChanged: (e) => {
+      const { node, column, oldValue, newValue } = e;
+      if (typeof oldValue === 'object' && 'value' in oldValue) {
+        node.setDataValue(column.getColId(), { ...oldValue, value: newValue });
+      }
+    },
+    domLayout: 'autoHeight',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Table cells can define `foregroundColor` and `backgroundColor` fields with any valid CSS color (including ones from our tokens)',
+      },
+    },
+  },
+};
+
+export const TableWithSemanticColors: Story = {
+  args: {
+    rowData: [
+      {
+        id: 1,
+        name: { value: 'Alice Johnson' },
+        email: { value: 'alice.johnson@example.com' },
+        role: { value: 'Developer' },
+        status: { value: 'Destructive', semanticColor: 'DESTRUCTIVE' },
+      },
+      {
+        id: 2,
+        name: { value: 'Bob Smith' },
+        email: { value: 'bob.smith@example.com' },
+        role: { value: 'Designer' },
+        status: { value: 'Caution', semanticColor: 'CAUTION' },
+      },
+      {
+        id: 3,
+        name: { value: 'Charlie Brown' },
+        email: { value: 'charlie.brown@example.com' },
+        role: { value: 'Manager' },
+        status: { value: 'Info', semanticColor: 'INFO' },
+      },
+      {
+        id: 4,
+        name: { value: 'Diana Prince' },
+        email: { value: 'diana.prince@example.com' },
+        role: { value: 'Developer' },
+        status: { value: 'Success', semanticColor: 'SUCCESS' },
+      },
+      {
+        id: 5,
+        name: { value: 'Ethan Hunt' },
+        email: { value: 'ethan.hunt@example.com' },
+        role: { value: 'Analyst' },
+        status: { value: 'Warning', semanticColor: 'WARNING' },
+      },
+    ],
+    columnDefs: sampleColumnDefs,
+    defaultColDef,
+    headerContent,
+    domLayout: 'autoHeight',
+    onCellValueChanged: (e) => {
+      const { node, column, oldValue, newValue } = e;
+      if (typeof oldValue === 'object' && 'value' in oldValue) {
+        node.setDataValue(column.getColId(), { ...oldValue, value: newValue });
+      }
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Table cells can define a `semanticColor` field with one of the following values: DESTRUCTIVE, CAUTION, INFO, SUCCESS and WARNING',
+      },
+    },
+  },
+};
+
 export default meta;