@arbor-education/design-system.components 0.14.0 → 0.16.0

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

@@ -7,6 +7,35 @@ import { useContext, type ChangeEvent } from 'react';
 import { TABLE_SPACING } from '../tableConsts';
 import { TableSettingsContext } from '../TableSettingsContext';
 
+export const TABLE_SETTINGS_ITEMS = [
+  'tableSpacing',
+  'separator',
+  'style',
+] as const;
+
+export type CheckboxGroupSettingsItem = {
+  type: 'checkboxGroup';
+  legend?: string;
+  options: { label: string; checked: boolean; onChange: (checked: boolean) => void }[];
+};
+
+export type RadioGroupSettingsItem = {
+  type: 'radioGroup';
+  legend?: string;
+  name: string;
+  checkedValue: string;
+  onChange: (value: string) => void;
+  options: { label: string; value: string }[];
+};
+
+export type CustomTableSettingsItem = CheckboxGroupSettingsItem | RadioGroupSettingsItem;
+
+export type TableSettingsItem = typeof TABLE_SETTINGS_ITEMS[number] | CustomTableSettingsItem;
+
+export type TableSettingsDropdownProps = {
+  items?: readonly TableSettingsItem[];
+};
+
 const TABLE_SPACING_NAMES = {
   XS: 'X-Small',
   S: 'Small',
@@ -14,75 +43,110 @@ const TABLE_SPACING_NAMES = {
   L: 'Large',
 };
 
-export const TableSettingsDropdown = () => {
+export const TableSettingsDropdown = ({ items = TABLE_SETTINGS_ITEMS }: TableSettingsDropdownProps) => {
   const {
-    settings: {
-      hasColumnBorders,
-      tableSpacing,
-      areCellColorsEnabled,
-    },
+    settings: { hasColumnBorders, tableSpacing, areCellColorsEnabled },
     setTableSpacing,
     setHasColumnBorders,
     resetSettings,
     setAreCellColorsEnabled,
   } = useContext(TableSettingsContext);
 
-  return (
-    <Dropdown>
-      <Dropdown.Trigger>
-        <Button
-          variant="secondary"
-          iconRightName="settings"
-          iconRightScreenReaderText="Table settings"
-          borderless
-        />
-      </Dropdown.Trigger>
-      <Dropdown.Content>
+  const renderItem = (item: TableSettingsItem, index: number) => {
+    if (item === 'tableSpacing') {
+      return (
         <RadioButtonGroup
+          key="tableSpacing"
           legend="Table spacing"
-          options={Object.values(TABLE_SPACING).map((option) => {
-            return {
-              name: 'ds-table-spacing',
-              label: TABLE_SPACING_NAMES[option],
-              value: option,
-            };
-          })}
+          options={Object.values(TABLE_SPACING).map(option => ({
+            name: 'ds-table-spacing',
+            label: TABLE_SPACING_NAMES[option],
+            value: option,
+            id: `TableSettings-tableSpacing-${option}`,
+          }))}
           name="ds-table-spacing"
           checkedValue={tableSpacing}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => {
-            setTableSpacing(e.target.value as TABLE_SPACING);
-          }}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => setTableSpacing(event.target.value as TABLE_SPACING)}
         />
+      );
+    }
 
-        <Separator />
+    if (item === 'separator') {
+      return <Separator key={`separator-${index}`} />;
+    }
 
+    if (item === 'style') {
+      return (
         <CheckboxGroup
+          key="style"
           legend="Style"
           options={[
             {
               label: 'Column borders',
+              id: 'TableSettings_columnBorders',
               checked: hasColumnBorders,
-              onChange: () => {
-                setHasColumnBorders(!hasColumnBorders);
-              },
+              onChange: () => setHasColumnBorders(!hasColumnBorders),
             },
             {
               label: 'Cell colours',
+              id: 'TableSettings_cellColours',
               checked: areCellColorsEnabled,
-              onChange: () => {
-                setAreCellColorsEnabled(!areCellColorsEnabled);
-              },
+              onChange: () => setAreCellColorsEnabled(!areCellColorsEnabled),
             },
           ]}
         />
+      );
+    }
 
-        <Separator />
+    if (item.type === 'checkboxGroup') {
+      return (
+        <CheckboxGroup
+          key={`checkboxGroup-${index}`}
+          legend={item.legend}
+          options={item.options.map(option => ({
+            label: option.label,
+            id: option.label,
+            checked: option.checked,
+            onChange: (event: ChangeEvent<HTMLInputElement>) => option.onChange(event.target.checked),
+          }))}
+        />
+      );
+    }
+
+    if (item.type === 'radioGroup') {
+      return (
+        <RadioButtonGroup
+          key={`radioGroup-${index}`}
+          legend={item.legend}
+          name={item.name}
+          checkedValue={item.checkedValue}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => item.onChange(event.target.value)}
+          options={item.options.map(option => ({
+            label: option.label,
+            value: option.value,
+            id: option.value,
+          }))}
+        />
+      );
+    }
+
+    return null;
+  };
 
+  return (
+    <Dropdown>
+      <Dropdown.Trigger>
         <Button
-          variant="tertiary"
-          iconLeftName="redo"
-          onClick={resetSettings}
-        >
+          variant="secondary"
+          iconRightName="settings"
+          iconRightScreenReaderText="Table settings"
+          borderless
+        />
+      </Dropdown.Trigger>
+      <Dropdown.Content>
+        {items.map(renderItem)}
+        <Separator />
+        <Button variant="tertiary" iconLeftName="redo" onClick={resetSettings}>
           Reset Table Settings
         </Button>
       </Dropdown.Content>