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

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,31 @@ type TableProps<TData = any> = {
   'footerTestId'?: string;
   'headerContent'?: ReactNode;
   'headerTestId'?: string;
+  'onTableSettingsChanged'?: (val: TableSettings) => void;
+  'onTableSettingsReset'?: () => void;
+  'onColumnBordersChanged'?: (val: boolean) => void;
+  'onTableSpacingChanged'?: (val: TABLE_SPACING) => void;
 } & AgGridReactProps<TData>;
 
 ModuleRegistry.registerModules([AllEnterpriseModule]);
 
+export enum TABLE_SPACING {
+  XS = 'XS',
+  S = 'S',
+  M = 'M',
+  L = 'L',
+}
+
+export const TableSettingsContext = createContext<ReturnType<typeof useTableSettings>>({
+  settings: {
+    hasColumnBorders: false,
+    tableSpacing: TABLE_SPACING.S,
+  },
+  setTableSpacing: () => {},
+  setHasColumnBorders: () => {},
+  resetSettings: () => {},
+});
+
 export const Table = (props: TableProps) => {
   const {
     'data-testid': testId,
@@ -36,6 +58,10 @@ export const Table = (props: TableProps) => {
     footerContent,
     footerTestId,
     onGridReady,
+    onTableSettingsChanged,
+    onTableSettingsReset,
+    onColumnBordersChanged,
+    onTableSpacingChanged,
     ...rest
   } = props;
 
@@ -43,31 +69,61 @@ export const Table = (props: TableProps) => {
 
   const [searchValue, setSearchValue] = useState('');
 
+  const {
+    settings,
+    resetSettings,
+    setHasColumnBorders,
+    setTableSpacing,
+  } = useTableSettings({
+    onTableSettingsChanged,
+    onTableSettingsReset,
+    onColumnBordersChanged,
+    onTableSpacingChanged,
+  });
+
+  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, setHasColumnBorders, setTableSpacing }}>
+        <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,
+      tableSpacing,
+    },
+    setTableSpacing,
+    setHasColumnBorders,
+    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

@@ -1,4 +1,12 @@
 .ds-table {
+  &__container {
+    .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;
+    }
+  }
+  
   &__footer,
   &__header {
     display: flex;

package/src/components/table/useTableSettings.ts

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { TABLE_SPACING } from './Table';
+import { useComponentDidUpdate } from 'Utils/hooks/useComponentDidUpdate';
+
+export type TableSettings = {
+  hasColumnBorders?: boolean;
+  tableSpacing: TABLE_SPACING;
+};
+
+type UseTableSettingsParams = {
+  onTableSettingsChanged?: (val: TableSettings) => void;
+  onTableSettingsReset?: () => void;
+  onColumnBordersChanged?: (val: boolean) => void;
+  onTableSpacingChanged?: (val: TABLE_SPACING) => void;
+};
+
+export const useTableSettings = (params: UseTableSettingsParams = {}) => {
+  const {
+    onTableSettingsChanged,
+    onTableSettingsReset,
+    onColumnBordersChanged,
+    onTableSpacingChanged,
+  } = params;
+  const [hasColumnBorders, setHasColumnBorders] = useState(false);
+  const [tableSpacing, setTableSpacing] = useState(TABLE_SPACING.M);
+
+  const settings = {
+    hasColumnBorders,
+    tableSpacing,
+  };
+
+  const resetSettings = () => {
+    setHasColumnBorders(false);
+    setTableSpacing(TABLE_SPACING.M);
+    if (onTableSettingsReset) {
+      onTableSettingsReset();
+    }
+  };
+
+  useComponentDidUpdate(() => {
+    if (onColumnBordersChanged) {
+      onColumnBordersChanged(hasColumnBorders);
+    }
+  }, [hasColumnBorders]);
+
+  useComponentDidUpdate(() => {
+    if (onTableSpacingChanged) {
+      onTableSpacingChanged(tableSpacing);
+    }
+  }, [tableSpacing]);
+
+  useComponentDidUpdate(() => {
+    if (onTableSettingsChanged) {
+      onTableSettingsChanged(settings);
+    }
+  }, [hasColumnBorders, tableSpacing]);
+
+  return { settings, resetSettings, setHasColumnBorders, setTableSpacing };
+};

package/src/index.scss

@@ -6,6 +6,7 @@
 @use "components/card/card.scss";
 @use "components/dropdown/dropdown.scss";
 @use "components/formField/formField.scss";
+@use "components/formField/fieldset/fieldset.scss";
 @use "components/formField/inputs/input.scss";
 @use "components/formField/label/label.scss";
 @use "components/formField/inputs/number/numberInput.scss";
@@ -22,4 +23,7 @@
 @use "components/searchBar/searchBar.scss";
 @use "components/table/pagination/pagination.scss";
 @use "components/tooltip/tooltip.scss";
+@use "components/separator/separator.scss";
+@use "components/modal/modal.scss";
+@use "components/modal/modalManager/modalManager.scss";
 @import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

package/src/index.ts

@@ -19,3 +19,7 @@ export { Table } from 'Components/table/Table';
 export { GridApiContext } from 'Components/table/GridApiContext';
 export { Tooltip } from 'Components/tooltip/Tooltip';
 export { TooltipWrapper } from 'Components/tooltip/TooltipWrapper';
+export { Fieldset } from 'Components/formField/fieldset/Fieldset';
+export { Separator } from 'Components/separator/Separator';
+export { Modal } from 'Components/modal/Modal';
+export { ModalManager } from 'Components/modal/modalManager/ModalManager';

package/src/tokens.scss

@@ -333,6 +333,7 @@
   --modal-header-color-icon-hover: var(--color-grey-050);
   --modal-radius: var(--border-radius-small);
   --modal-color-background: var(--color-grey-050);
+  --modal-min-width: 37.5rem;
   --toast-info-icon-hover-color-background: var(--color-semantic-info-100);
   --toast-info-icon-color-icon: var(--color-semantic-info-800);
   --toast-info-color-text: var(--color-semantic-info-800);

package/src/utils/Constants.ts

@@ -3,3 +3,9 @@ export const SLIDEOVER = {
   REMOVE_SLIDEOVER: 'ds-remove-slideover',
   REMOVE_ALL_SLIDEOVERS: 'ds-remove-all-slideover',
 };
+
+export const MODAL = {
+  ADD_MODAL: 'ds-add-modal',
+  REMOVE_MODAL: 'ds-remove-modal',
+  REMOVE_ALL_MODALS: 'ds-remove-all-modals',
+};

package/src/utils/ModalUtils.ts

@@ -0,0 +1,17 @@
+import type { ModalProps } from 'Components/modal/Modal';
+import PubSub from './PubSub';
+import { MODAL } from './Constants';
+
+export const ModalUtils = {
+  addModal: (modal: ModalProps) => {
+    PubSub.publish(MODAL.ADD_MODAL, modal);
+  },
+
+  removeModal: () => {
+    PubSub.publish(MODAL.REMOVE_MODAL);
+  },
+
+  removeAllModals: () => {
+    PubSub.publish(MODAL.REMOVE_ALL_MODALS);
+  },
+};

package/src/utils/hooks/useComponentDidUpdate.test.ts

@@ -0,0 +1,107 @@
+import { expect, test, describe, vi } from 'vitest';
+import { renderHook } from '@testing-library/react';
+import { useComponentDidUpdate } from './useComponentDidUpdate';
+
+describe('useComponentDidUpdate', () => {
+  test('does not call effect on initial render', () => {
+    const effect = vi.fn();
+    renderHook(() => useComponentDidUpdate(effect, []));
+
+    expect(effect).not.toHaveBeenCalled();
+  });
+
+  test('calls effect on subsequent renders when dependencies change', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1] } },
+    );
+
+    expect(effect).not.toHaveBeenCalled();
+
+    rerender({ deps: [2] });
+    expect(effect).toHaveBeenCalledTimes(1);
+  });
+
+  test('does not call effect when dependencies do not change', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1] } },
+    );
+
+    expect(effect).not.toHaveBeenCalled();
+
+    rerender({ deps: [1] });
+    expect(effect).not.toHaveBeenCalled();
+  });
+
+  test('calls effect multiple times on multiple updates', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1] } },
+    );
+
+    rerender({ deps: [2] });
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    rerender({ deps: [3] });
+    expect(effect).toHaveBeenCalledTimes(2);
+
+    rerender({ deps: [4] });
+    expect(effect).toHaveBeenCalledTimes(3);
+  });
+
+  test('calls cleanup function returned from effect', () => {
+    const cleanup = vi.fn();
+    const effect = vi.fn(() => cleanup);
+    const { rerender, unmount } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1] } },
+    );
+
+    rerender({ deps: [2] });
+    expect(effect).toHaveBeenCalledTimes(1);
+    expect(cleanup).not.toHaveBeenCalled();
+
+    rerender({ deps: [3] });
+    expect(cleanup).toHaveBeenCalledTimes(1);
+    expect(effect).toHaveBeenCalledTimes(2);
+
+    unmount();
+    expect(cleanup).toHaveBeenCalledTimes(2);
+  });
+
+  test('works with multiple dependencies', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(
+      ({ deps }) => useComponentDidUpdate(effect, deps),
+      { initialProps: { deps: [1, 'a', true] } },
+    );
+
+    expect(effect).not.toHaveBeenCalled();
+
+    // Change one dependency
+    rerender({ deps: [1, 'a', false] });
+    expect(effect).toHaveBeenCalledTimes(1);
+
+    // Change another dependency
+    rerender({ deps: [1, 'b', false] });
+    expect(effect).toHaveBeenCalledTimes(2);
+
+    // Change multiple dependencies
+    rerender({ deps: [2, 'c', true] });
+    expect(effect).toHaveBeenCalledTimes(3);
+  });
+
+  test('works with empty dependency array', () => {
+    const effect = vi.fn();
+    const { rerender } = renderHook(() => useComponentDidUpdate(effect, []));
+
+    expect(effect).not.toHaveBeenCalled();
+
+    rerender();
+    expect(effect).not.toHaveBeenCalled();
+  });
+});

package/src/utils/hooks/useComponentDidUpdate.ts

@@ -0,0 +1,19 @@
+import { useEffect, useRef, type DependencyList, type EffectCallback } from 'react';
+
+/**
+ * This is a hook that is functionally identical to useEffect, except it only runs on
+ * updates, never on first render
+ */
+export const useComponentDidUpdate = (effect: EffectCallback, deps: DependencyList) => {
+  const isFirstRenderRef = useRef(true);
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    else {
+      return effect();
+    }
+  }, deps);
+};