@arbor-education/design-system.components 0.1.5 → 0.2.0

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

@@ -1,9 +1,10 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Table } from './Table';
+import { Table, TABLE_SPACING } from './Table';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/BulkActionsDropdown';
 import { HideColumnsDropdown } from 'Components/table/HideColumnsDropdown';
+import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
 import userEvent from '@testing-library/user-event';
 import type { GridApi } from 'ag-grid-enterprise';
 
@@ -409,4 +410,446 @@ describe('Table', () => {
       expect(container.querySelector('button')).toBeNull();
     });
   });
+
+  describe('TableSettingsDropdown', () => {
+    test('renders settings dropdown button in header', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await waitFor(() => {
+        const button = screen.getByRole('button', { name: /Table settings/i });
+        expect(button).toBeInTheDocument();
+      });
+    });
+
+    test('opens dropdown when settings button is clicked', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      const settingsButton = screen.getByRole('button', { name: /Table settings/i });
+      await userEvent.click(settingsButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Table spacing')).toBeInTheDocument();
+        expect(screen.getByText('Style')).toBeInTheDocument();
+        expect(screen.getByText('Reset Table Settings')).toBeInTheDocument();
+      });
+    });
+
+    test('displays all table spacing options', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('X-Small')).toBeInTheDocument();
+        expect(screen.getByLabelText('Small')).toBeInTheDocument();
+        expect(screen.getByLabelText('Medium')).toBeInTheDocument();
+        expect(screen.getByLabelText('Large')).toBeInTheDocument();
+      });
+    });
+
+    test('Medium spacing is selected by default', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        const mediumRadio = screen.getByLabelText('Medium') as HTMLInputElement;
+        expect(mediumRadio.checked).toBe(true);
+      });
+    });
+
+    test('can change table spacing to Small', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Small')).toBeInTheDocument();
+      });
+
+      const smallRadio = screen.getByLabelText('Small');
+      await userEvent.click(smallRadio);
+
+      await waitFor(() => {
+        expect((smallRadio as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('can change table spacing to Large', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      await waitFor(() => {
+        expect((largeRadio as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('can change table spacing to X-Small', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const xsmallRadio = screen.getByLabelText('X-Small');
+      await userEvent.click(xsmallRadio);
+
+      await waitFor(() => {
+        expect((xsmallRadio as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('displays style options with Column borders and Cell colours', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Column borders')).toBeInTheDocument();
+        expect(screen.getByLabelText('Cell colours')).toBeInTheDocument();
+      });
+    });
+
+    test('Column borders checkbox is unchecked by default', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        const columnBordersCheckbox = screen.getByLabelText('Column borders') as HTMLInputElement;
+        expect(columnBordersCheckbox.checked).toBe(false);
+      });
+    });
+
+    test('can toggle Column borders checkbox on', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('can toggle Column borders checkbox off after turning it on', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+    });
+
+    test('Cell colours checkbox is unchecked by default', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        const cellColoursCheckbox = screen.getByLabelText('Cell colours') as HTMLInputElement;
+        expect(cellColoursCheckbox.checked).toBe(false);
+      });
+    });
+
+    test('can toggle Cell colours checkbox on', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const cellColoursCheckbox = screen.getByLabelText('Cell colours');
+      await userEvent.click(cellColoursCheckbox);
+
+      await waitFor(() => {
+        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('can toggle Cell colours checkbox off after turning it on', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const cellColoursCheckbox = screen.getByLabelText('Cell colours');
+      await userEvent.click(cellColoursCheckbox);
+      await userEvent.click(cellColoursCheckbox);
+
+      await waitFor(() => {
+        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+    });
+
+    test('displays Reset Table Settings button', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Reset Table Settings/i })).toBeInTheDocument();
+      });
+    });
+
+    test('reset button resets table spacing to default (Medium)', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Change to Large
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      await waitFor(() => {
+        expect((largeRadio as HTMLInputElement).checked).toBe(true);
+      });
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        const mediumRadio = screen.getByLabelText('Medium') as HTMLInputElement;
+        expect(mediumRadio.checked).toBe(true);
+      });
+    });
+
+    test('reset button resets column borders to default (off)', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Turn on column borders
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(true);
+      });
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+    });
+
+    test('reset button resets all settings together', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Change multiple settings
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect((largeRadio as HTMLInputElement).checked).toBe(true);
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(true);
+      });
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        const mediumRadio = screen.getByLabelText('Medium') as HTMLInputElement;
+        expect(mediumRadio.checked).toBe(true);
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+    });
+
+    test('can combine settings dropdown with other header content', async () => {
+      render(
+        <Table
+          headerContent={(
+            <>
+              <BulkActionsDropdown
+                actions={[
+                  {
+                    displayName: 'Test Action',
+                    callback: () => {},
+                  },
+                ]}
+              />
+              <TableSettingsDropdown />
+            </>
+          )}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Actions (1)')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Table settings/i })).toBeInTheDocument();
+      });
+    });
+
+    test('settings persist when dropdown is closed and reopened', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      // Open dropdown and change settings
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const smallRadio = screen.getByLabelText('Small');
+      await userEvent.click(smallRadio);
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      // Close dropdown
+      await userEvent.keyboard('{Escape}');
+
+      // Reopen dropdown
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Check settings persisted
+      await waitFor(() => {
+        expect((screen.getByLabelText('Small') as HTMLInputElement).checked).toBe(true);
+        expect((screen.getByLabelText('Column borders') as HTMLInputElement).checked).toBe(true);
+      });
+    });
+  });
+
+  test('onTableSettingsChanged gets called appropriately', async () => {
+    const onTableSettingsChanged = vi.fn();
+
+    render(
+      <Table
+        headerContent={<TableSettingsDropdown />}
+        onTableSettingsChanged={onTableSettingsChanged}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+    const largeRadio = screen.getByLabelText('Large');
+    await userEvent.click(largeRadio);
+
+    await waitFor(() => {
+      expect((largeRadio as HTMLInputElement).checked).toBe(true);
+    });
+    expect(onTableSettingsChanged).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
+      tableSpacing: TABLE_SPACING.L,
+    }));
+
+    const columnBordersCheckbox = screen.getByLabelText('Column borders');
+    await userEvent.click(columnBordersCheckbox);
+
+    expect(onTableSettingsChanged).toHaveBeenCalledTimes(2);
+    expect(onTableSettingsChanged).toHaveBeenNthCalledWith(2, expect.objectContaining({ hasColumnBorders: true }));
+  });
+
+  test('resetSettings is called appropriately', async () => {
+    const onTableSettingsReset = vi.fn();
+
+    render(
+      <Table
+        headerContent={<TableSettingsDropdown />}
+        onTableSettingsReset={onTableSettingsReset}
+      />,
+    );
+
+    await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+    const largeRadio = screen.getByLabelText('Large');
+    await userEvent.click(largeRadio);
+
+    await waitFor(() => {
+      expect((largeRadio as HTMLInputElement).checked).toBe(true);
+    });
+
+    // Click reset button
+    const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+    await userEvent.click(resetButton);
+
+    expect(onTableSettingsReset).toHaveBeenCalledOnce();
+  });
 });

package/src/components/table/Table.tsx

@@ -2,7 +2,7 @@ import { AllEnterpriseModule, ModuleRegistry, type GridApi } from 'ag-grid-enter
 import { AgGridReact, type AgGridReactProps } from 'ag-grid-react';
 import { tableTheme } from './tableTheme';
 import classNames from 'classnames';
-import { useState, type ReactNode } from 'react';
+import { createContext, useState, type ReactNode } from 'react';
 import { TableFooter } from './TableFooter';
 import { TableHeader } from './TableHeader';
 import { GridApiContext } from './GridApiContext';
@@ -12,6 +12,7 @@ import { PaginationControls } from './pagination/PaginationControls';
 import { RowCountInfo } from './pagination/RowCountInfo';
 import { BulkActionsDropdown } from './BulkActionsDropdown';
 import { HideColumnsDropdown } from './HideColumnsDropdown';
+import { useTableSettings, type TableSettings } from './useTableSettings';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type TableProps<TData = any> = {
@@ -22,10 +23,29 @@ type TableProps<TData = any> = {
   'footerTestId'?: string;
   'headerContent'?: ReactNode;
   'headerTestId'?: string;
+  'onTableSettingsChanged'?: (val: TableSettings) => void;
+  'onTableSettingsReset'?: () => void;
 } & AgGridReactProps<TData>;
 
 ModuleRegistry.registerModules([AllEnterpriseModule]);
 
+export enum TABLE_SPACING {
+  XS = 'XS',
+  S = 'S',
+  M = 'M',
+  L = 'L',
+}
+
+export const TableSettingsContext = createContext<{ settings: TableSettings; resetSettings: () => void }>({
+  settings: {
+    hasColumnBorders: false,
+    setHasColumnBorders: () => {},
+    tableSpacing: TABLE_SPACING.S,
+    setTableSpacing: () => {},
+  },
+  resetSettings: () => {},
+});
+
 export const Table = (props: TableProps) => {
   const {
     'data-testid': testId,
@@ -36,6 +56,8 @@ export const Table = (props: TableProps) => {
     footerContent,
     footerTestId,
     onGridReady,
+    onTableSettingsChanged,
+    onTableSettingsReset,
     ...rest
   } = props;
 
@@ -43,31 +65,54 @@ export const Table = (props: TableProps) => {
 
   const [searchValue, setSearchValue] = useState('');
 
+  const { settings, resetSettings } = useTableSettings({
+    onTableSettingsChanged,
+    onTableSettingsReset,
+  });
+
+  const { hasColumnBorders, tableSpacing } = settings;
+
   return (
     <GridApiContext.Provider value={gridApi}>
-      <section data-testid={testId} className={classNames('ds-table__container', wrapperClassName)}>
-        {headerContent && (
-          <TableHeader data-testid={headerTestId} hasSearch={hasSearch} searchValue={searchValue} setSearchValue={setSearchValue}>
-            {headerContent}
-          </TableHeader>
-        )}
-        <AgGridReact
-          theme={tableTheme}
-          onGridReady={(event) => {
-            const { api } = event;
-            setGridApi(api);
-            onGridReady?.(event);
-          }}
-          suppressPaginationPanel
-          {...rest}
-          {...(hasSearch && { quickFilterText: searchValue })}
-        />
-        {footerContent && (
-          <TableFooter data-testid={footerTestId}>
-            {footerContent}
-          </TableFooter>
-        )}
-      </section>
+      <TableSettingsContext.Provider value={{ settings, resetSettings }}>
+        <section data-testid={testId} className={classNames('ds-table__container', wrapperClassName)}>
+          {headerContent && (
+            <TableHeader data-testid={headerTestId} hasSearch={hasSearch} searchValue={searchValue} setSearchValue={setSearchValue}>
+              {headerContent}
+            </TableHeader>
+          )}
+          <AgGridReact
+            theme={tableTheme.withParams({
+              headerRowBorder: hasColumnBorders,
+              rowBorder: hasColumnBorders,
+              wrapperBorder: hasColumnBorders,
+              columnBorder: hasColumnBorders,
+              spacing: {
+                // These are offset by one from the usual spacing tokens. We still use the token values to make spacing
+                // consistent with other parts of the DS, but --spacing-xsmall was too large for xsmall spacing, and so on
+                // for the other tokens
+                [TABLE_SPACING.XS]: 0,
+                [TABLE_SPACING.S]: 'var(--spacing-xsmall)',
+                [TABLE_SPACING.M]: 'var(--spacing-small)',
+                [TABLE_SPACING.L]: 'var(--spacing-medium)',
+              }[tableSpacing],
+            })}
+            onGridReady={(event) => {
+              const { api } = event;
+              setGridApi(api);
+              onGridReady?.(event);
+            }}
+            suppressPaginationPanel
+            {...rest}
+            {...(hasSearch && { quickFilterText: searchValue })}
+          />
+          {footerContent && (
+            <TableFooter data-testid={footerTestId}>
+              {footerContent}
+            </TableFooter>
+          )}
+        </section>
+      </TableSettingsContext.Provider>
     </GridApiContext.Provider>
   );
 };

package/src/components/table/pagination/TableSettingsDropdown.tsx

@@ -0,0 +1,90 @@
+import { Button } from 'Components/button/Button';
+import { Dropdown } from 'Components/dropdown/Dropdown';
+import { CheckboxGroup } from 'Components/formField/inputs/checkbox/CheckboxGroup';
+import { RadioButtonGroup } from 'Components/formField/inputs/radio/RadioButtonGroup';
+import { Separator } from 'Components/separator/Separator';
+import { useContext, useState, type ChangeEvent } from 'react';
+import { TABLE_SPACING, TableSettingsContext } from '../Table';
+
+const TABLE_SPACING_NAMES = {
+  XS: 'X-Small',
+  S: 'Small',
+  M: 'Medium',
+  L: 'Large',
+};
+
+export const TableSettingsDropdown = () => {
+  const {
+    settings: {
+      hasColumnBorders,
+      setHasColumnBorders,
+      tableSpacing,
+      setTableSpacing,
+    },
+    resetSettings,
+  } = useContext(TableSettingsContext);
+
+  const [cellColours, setCellColours] = useState<boolean>(false);
+
+  return (
+    <Dropdown>
+      <Dropdown.Trigger>
+        <Button
+          variant="secondary"
+          iconRightName="settings"
+          iconRightScreenReaderText="Table settings"
+          borderless
+        />
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        <RadioButtonGroup
+          legend="Table spacing"
+          options={Object.values(TABLE_SPACING).map((option) => {
+            return {
+              name: 'ds-table-spacing',
+              label: TABLE_SPACING_NAMES[option],
+              value: option,
+            };
+          })}
+          name="ds-table-spacing"
+          checkedValue={tableSpacing}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
+            setTableSpacing(e.target.value as TABLE_SPACING);
+          }}
+        />
+
+        <Separator />
+
+        <CheckboxGroup
+          legend="Style"
+          options={[
+            {
+              label: 'Column borders',
+              checked: hasColumnBorders,
+              onChange: () => {
+                setHasColumnBorders(!hasColumnBorders);
+              },
+            },
+            {
+              label: 'Cell colours',
+              checked: cellColours,
+              onChange: () => {
+                setCellColours(!cellColours);
+              },
+            },
+          ]}
+        />
+
+        <Separator />
+
+        <Button
+          variant="tertiary"
+          iconLeftName="redo"
+          onClick={resetSettings}
+        >
+          Reset Table Settings
+        </Button>
+      </Dropdown.Content>
+    </Dropdown>
+  );
+};

package/src/components/table/table.scss

@@ -40,4 +40,10 @@
       }
     }
   }
+
+  .ag-header-cell-resize {
+    // AG-Grid gives these a z-index of 2 which interferes with our stacking elements
+    // so we just unset it here
+    z-index: unset;
+  }
 }