@purpurds/table 0.0.1

package/src/table-settings-drawer.test.tsx

@@ -0,0 +1,350 @@
+import React from "react";
+import { Column } from "@tanstack/react-table";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+
+import { TableSettingsDrawer } from "./table-settings-drawer";
+import { copy, Selectors } from "./test-utils/helpers";
+
+const setDrawerIsOpenMock = vi.fn();
+const setColumnFiltersEnabledMock = vi.fn();
+const setStickyFirstColumnMock = vi.fn();
+const setStickyHeadersMock = vi.fn();
+const onResetSettingsMock = vi.fn();
+const getAllColumnsMock = vi.fn(() => [
+  {
+    id: "column_1",
+    columnDef: { header: "Column 1" },
+    getIsVisible: vi.fn(() => true),
+    getCanHide: vi.fn(() => true),
+    toggleVisibility: vi.fn(),
+  },
+  {
+    id: "column_2",
+    columnDef: { header: "Column 2" },
+    getIsVisible: vi.fn(() => true),
+    getCanHide: vi.fn(() => true),
+    toggleVisibility: vi.fn(),
+  },
+  {
+    id: "column_3",
+    columnDef: { header: "Column 3" },
+    getIsVisible: vi.fn(() => true),
+    getCanHide: vi.fn(() => true),
+    toggleVisibility: vi.fn(),
+  },
+]) as unknown as () => Column<unknown, unknown>[];
+
+describe("Data Table - Settings drawer", () => {
+  describe("Data Table - Settings drawer", () => {
+    let closeButton: HTMLButtonElement;
+    let container: HTMLElement;
+    let withinDrawerContent: ReturnType<typeof within>;
+
+    beforeEach(() => {
+      container = render(
+        <TableSettingsDrawer
+          isDrawerOpen={true}
+          columnFiltersEnabled={true}
+          showColumnFilters={true}
+          stickyFirstColumn={true}
+          stickyHeaders={true}
+          copy={copy.settingsDrawer}
+          setDrawerIsOpen={setDrawerIsOpenMock}
+          setShowColumnFiltersEnabled={setColumnFiltersEnabledMock}
+          setStickyFirstColumn={setStickyFirstColumnMock}
+          setStickyHeaders={setStickyHeadersMock}
+          getAllColumns={getAllColumnsMock}
+          onResetSettings={onResetSettingsMock}
+        />
+      ).container;
+
+      closeButton = within(screen.getByTestId(Selectors.SETTINGS_DRAWER.HEADER_ROW)).getByRole(
+        "button"
+      );
+
+      withinDrawerContent = within(screen.getByTestId(Selectors.SETTINGS_DRAWER.CONTENT));
+    });
+
+    it("should open the drawer", () => {
+      expect(screen.getByTestId(Selectors.SETTINGS_DRAWER.CONTENT)).toBeVisible();
+    });
+
+    it("should have drawer title", () => {
+      expect(withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.TITLE)).toHaveTextContent(
+        "Table settings"
+      );
+    });
+
+    it("should have reset settings button in drawer footer", () => {
+      const withinDrawerFooter = within(
+        withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.FOOTER)
+      );
+      expect(
+        withinDrawerFooter.getByTestId(Selectors.SETTINGS_DRAWER.FOOTER_RESET_SETTINGS_BUTTON)
+      ).toHaveTextContent("Reset settings");
+    });
+
+    it("should have a close drawer button", () => {
+      expect(closeButton).toHaveAttribute("aria-label", "Close drawer");
+    });
+
+    it("should be possible to close the drawer", async () => {
+      await userEvent.click(closeButton);
+      expect(screen.queryByTestId(Selectors.SETTINGS_DRAWER.CONTENT)).toBeNull();
+    });
+
+    it("should be accessible", async () => {
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+
+    describe("General settings", () => {
+      let toggleElements: HTMLElement[];
+      let toggleLabels: HTMLLabelElement[];
+      let withinGeneralSettings: ReturnType<typeof within>;
+
+      beforeEach(() => {
+        withinGeneralSettings = within(
+          withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.GENERAL_SETTINGS)
+        );
+
+        toggleElements = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE);
+        toggleLabels = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE_LABEL);
+      });
+
+      it("should have a a section header", () => {
+        expect(withinGeneralSettings.getByRole("heading")).toHaveTextContent("General settings");
+      });
+
+      it("should have 3 toggles", () => {
+        expect(toggleElements).toHaveLength(3);
+      });
+
+      it.each([
+        { label: "Show Filters", index: 0, dataState: "checked" },
+        { label: "Lock first column", index: 1, dataState: "checked" },
+        { label: "Sticky header", index: 2, dataState: "checked" },
+      ])("should have '%s' toggle", ({ label, index, dataState }) => {
+        expect(toggleElements[index]).toHaveRole("switch");
+        expect(toggleElements[index]).toHaveAttribute("data-state", dataState);
+        expect(toggleLabels[index]).toHaveTextContent(label);
+      });
+    });
+
+    describe("Visible columns", () => {
+      let toggleElements: HTMLElement[];
+      let toggleLabels: HTMLLabelElement[];
+      let withinVisibleColumns: ReturnType<typeof within>;
+
+      beforeEach(() => {
+        withinVisibleColumns = within(
+          withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.VISIBLE_COLUMNS)
+        );
+
+        toggleElements = withinVisibleColumns.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE);
+        toggleLabels = withinVisibleColumns.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE_LABEL);
+      });
+
+      it("should have a a section header", () => {
+        expect(withinVisibleColumns.getByRole("heading")).toHaveTextContent("Visible columns");
+      });
+
+      it("should have 3 toggles", () => {
+        expect(toggleElements).toHaveLength(3);
+      });
+
+      it.each([
+        { label: "Column 1", index: 0, dataState: "checked", disabled: false },
+        { label: "Column 2", index: 1, dataState: "checked", disabled: false },
+        { label: "Column 3", index: 2, dataState: "checked", disabled: false },
+      ])("should have '%s' toggle", ({ label, index, dataState }) => {
+        expect(toggleElements[index]).toHaveRole("switch");
+        expect(toggleElements[index]).toHaveAttribute("data-state", dataState);
+        expect(toggleLabels[index]).toHaveTextContent(label);
+      });
+
+      it("should be accessible", async () => {
+        const results = await axe(
+          withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.VISIBLE_COLUMNS),
+          {
+            elementRef: true,
+          }
+        );
+        const buttonNameViolation = results.violations.find(
+          (violation) => violation.id === "button-name"
+        );
+
+        // "Buttons must have discernible text (button-name)"
+        // This is rule is failing on the toggles
+        if (buttonNameViolation) {
+          buttonNameViolation.nodes = buttonNameViolation.nodes.filter(
+            (node) => !node.element?.matches('[role="switch"]')
+          );
+
+          // remove the violation if there are no more nodes
+          if (!buttonNameViolation.nodes.length) {
+            results.violations.splice(results.violations.indexOf(buttonNameViolation), 1);
+          }
+        }
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        expect(results).toHaveNoViolations();
+      });
+    });
+  });
+
+  describe("Filters disabled", () => {
+    let withinDrawerContent: ReturnType<typeof within>;
+
+    beforeEach(() => {
+      render(
+        <TableSettingsDrawer
+          isDrawerOpen={true}
+          showColumnFilters={false}
+          columnFiltersEnabled={false}
+          stickyFirstColumn={true}
+          stickyHeaders={true}
+          copy={copy.settingsDrawer}
+          setDrawerIsOpen={setDrawerIsOpenMock}
+          setShowColumnFiltersEnabled={setColumnFiltersEnabledMock}
+          setStickyFirstColumn={setStickyFirstColumnMock}
+          setStickyHeaders={setStickyHeadersMock}
+          getAllColumns={getAllColumnsMock}
+          onResetSettings={onResetSettingsMock}
+        />
+      );
+
+      withinDrawerContent = within(screen.getByTestId(Selectors.SETTINGS_DRAWER.CONTENT));
+    });
+
+    describe("General settings", () => {
+      let toggleElements: HTMLElement[];
+      let toggleLabels: HTMLLabelElement[];
+      let withinGeneralSettings: ReturnType<typeof within>;
+
+      beforeEach(() => {
+        withinGeneralSettings = within(
+          withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.GENERAL_SETTINGS)
+        );
+
+        toggleElements = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE);
+        toggleLabels = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE_LABEL);
+      });
+
+      it("should have 2 toggles", () => {
+        expect(toggleElements).toHaveLength(2);
+      });
+
+      it.each([
+        { label: "Lock first column", index: 0, dataState: "checked" },
+        { label: "Sticky header", index: 1, dataState: "checked" },
+      ])("should have '%s' toggle", ({ label, index, dataState }) => {
+        expect(toggleElements[index]).toHaveRole("switch");
+        expect(toggleElements[index]).toHaveAttribute("data-state", dataState);
+        expect(toggleLabels[index]).toHaveTextContent(label);
+      });
+    });
+  });
+
+  describe("Row selection in settings drawer", () => {
+    const setRowSelectionEnabledMock = vi.fn();
+
+    describe("When row selection is enabled", () => {
+      let toggleElements: HTMLElement[];
+      let toggleLabels: HTMLLabelElement[];
+      let withinGeneralSettings: ReturnType<typeof within>;
+
+      beforeEach(() => {
+        render(
+          <TableSettingsDrawer
+            isDrawerOpen={true}
+            columnFiltersEnabled={true}
+            showColumnFilters={true}
+            stickyFirstColumn={true}
+            stickyHeaders={true}
+            copy={{
+              ...copy.settingsDrawer,
+              generalSettings: {
+                ...copy.settingsDrawer.generalSettings,
+                toggles: {
+                  ...copy.settingsDrawer.generalSettings.toggles,
+                  rowSelection: "Row selection",
+                },
+              },
+            }}
+            setDrawerIsOpen={setDrawerIsOpenMock}
+            setShowColumnFiltersEnabled={setColumnFiltersEnabledMock}
+            setStickyFirstColumn={setStickyFirstColumnMock}
+            setStickyHeaders={setStickyHeadersMock}
+            getAllColumns={getAllColumnsMock}
+            onResetSettings={onResetSettingsMock}
+            enableRowSelection={true}
+            rowSelectionEnabled={true}
+            setRowSelectionEnabled={setRowSelectionEnabledMock}
+          />
+        );
+
+        withinGeneralSettings = within(
+          screen.getByTestId(Selectors.SETTINGS_DRAWER.GENERAL_SETTINGS)
+        );
+        toggleElements = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE);
+        toggleLabels = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE_LABEL);
+      });
+
+      it("should have 4 toggles including row selection", () => {
+        expect(toggleElements).toHaveLength(4);
+      });
+
+      it("should have row selection toggle", () => {
+        expect(toggleLabels[3]).toHaveTextContent("Row selection");
+        expect(toggleElements[3]).toHaveAttribute("data-state", "checked");
+      });
+
+      it("should call setRowSelectionEnabled when toggled", async () => {
+        await userEvent.click(toggleElements[3]);
+        expect(setRowSelectionEnabledMock).toHaveBeenCalled();
+      });
+    });
+
+    describe("When row selection is not enabled", () => {
+      beforeEach(() => {
+        render(
+          <TableSettingsDrawer
+            isDrawerOpen={true}
+            columnFiltersEnabled={true}
+            showColumnFilters={true}
+            stickyFirstColumn={true}
+            stickyHeaders={true}
+            copy={copy.settingsDrawer}
+            setDrawerIsOpen={setDrawerIsOpenMock}
+            setShowColumnFiltersEnabled={setColumnFiltersEnabledMock}
+            setStickyFirstColumn={setStickyFirstColumnMock}
+            setStickyHeaders={setStickyHeadersMock}
+            getAllColumns={getAllColumnsMock}
+            onResetSettings={onResetSettingsMock}
+            enableRowSelection={false}
+            rowSelectionEnabled={true}
+            setRowSelectionEnabled={setRowSelectionEnabledMock}
+          />
+        );
+      });
+
+      it("should not show row selection toggle", () => {
+        const withinGeneralSettings = within(
+          screen.getByTestId(Selectors.SETTINGS_DRAWER.GENERAL_SETTINGS)
+        );
+        const toggleLabels = withinGeneralSettings.getAllByTestId(
+          Selectors.SETTINGS_DRAWER.TOGGLE_LABEL
+        );
+
+        expect(toggleLabels).toHaveLength(3);
+        expect(toggleLabels.map((label) => label.textContent)).not.toContain("Row selection");
+      });
+    });
+  });
+});

package/src/table-settings-drawer.tsx

@@ -0,0 +1,254 @@
+import React from "react";
+import { Button } from "@purpurds/button";
+import { Drawer } from "@purpurds/drawer";
+import { Heading } from "@purpurds/heading";
+import { IconSync } from "@purpurds/icon/sync";
+import { Toggle } from "@purpurds/toggle";
+import { Column, RowData } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "./table-settings-drawer.module.scss";
+
+export type TableSettingsDrawerCopyProps = {
+  title: string;
+  generalSettings: {
+    header: string;
+    toggles: {
+      showFilters: string;
+      lockFirstcolumn: string;
+      stickyHeader: string;
+      rowSelection?: string;
+    };
+  };
+  visibleColumns: {
+    header: string;
+  };
+  buttons: {
+    closeDrawer: string;
+    resetSettings: string;
+  };
+};
+
+export type TableSettingsDrawerProps<TData> = {
+  getAllColumns: () => Column<TData, unknown>[];
+  onResetSettings: () => void;
+  setDrawerIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setShowColumnFiltersEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+  setStickyFirstColumn: React.Dispatch<React.SetStateAction<boolean>>;
+  setStickyHeaders: React.Dispatch<React.SetStateAction<boolean>>;
+  columnFiltersEnabled: boolean;
+  copy: TableSettingsDrawerCopyProps;
+  isDrawerOpen: boolean;
+  showColumnFilters: boolean;
+  stickyFirstColumn: boolean;
+  stickyHeaders: boolean;
+  enableRowSelection?: boolean;
+  rowSelectionEnabled?: boolean;
+  setRowSelectionEnabled?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const rootClassName = "purpur-table-settings-drawer";
+const cx = c.bind(styles);
+const rootTestId = "purpur-table-settings-drawer";
+
+export const TableSettingsDrawer = <TData extends RowData>({
+  columnFiltersEnabled,
+  copy,
+  isDrawerOpen,
+  showColumnFilters,
+  stickyFirstColumn,
+  stickyHeaders,
+  getAllColumns,
+  onResetSettings,
+  setDrawerIsOpen,
+  setShowColumnFiltersEnabled,
+  setStickyFirstColumn,
+  setStickyHeaders,
+  enableRowSelection,
+  rowSelectionEnabled,
+  setRowSelectionEnabled,
+}: TableSettingsDrawerProps<TData>) => {
+  return (
+    <div id="purpur-table-settings-drawer">
+      <Drawer data-testid={rootTestId} open={isDrawerOpen} onOpenChange={setDrawerIsOpen}>
+        <Drawer.Content
+          data-testid={`${rootTestId}-content`}
+          zIndex={6}
+          closeButtonText={copy.buttons.closeDrawer}
+          title={copy.title}
+          footerContent={
+            <FooterContent text={copy.buttons.resetSettings} onClick={onResetSettings} />
+          }
+          stickyFooter
+          aria-describedby={undefined}
+        >
+          <div className={cx(rootClassName)}>
+            <GeneralSettings
+              setShowColumnFiltersEnabled={setShowColumnFiltersEnabled}
+              setStickyFirstColumn={setStickyFirstColumn}
+              setStickyHeaders={setStickyHeaders}
+              columnFiltersEnabled={columnFiltersEnabled}
+              showColumnFilters={showColumnFilters}
+              stickyFirstColumn={stickyFirstColumn}
+              stickyHeaders={stickyHeaders}
+              copy={copy.generalSettings}
+              enableRowSelection={enableRowSelection}
+              rowSelectionEnabled={rowSelectionEnabled}
+              setRowSelectionEnabled={setRowSelectionEnabled}
+            />
+            <VisibleColumns getAllColumns={getAllColumns} header={copy.visibleColumns.header} />
+          </div>
+        </Drawer.Content>
+      </Drawer>
+    </div>
+  );
+};
+
+const FooterContent = ({ text, onClick }: { text: string; onClick: () => void }) => (
+  <div className={cx(`${rootClassName}__button-group`)}>
+    <Button data-testid={`${rootTestId}-reset-button`} variant="tertiary-purple" onClick={onClick}>
+      <IconSync size="sm" />
+      {text}
+    </Button>
+  </div>
+);
+
+type GeneralSettingsProps = {
+  setShowColumnFiltersEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+  setStickyHeaders: React.Dispatch<React.SetStateAction<boolean>>;
+  setStickyFirstColumn: React.Dispatch<React.SetStateAction<boolean>>;
+  columnFiltersEnabled: boolean;
+  stickyFirstColumn: boolean;
+  stickyHeaders: boolean;
+  showColumnFilters: boolean;
+  copy: {
+    header: string;
+    toggles: {
+      showFilters: string;
+      lockFirstcolumn: string;
+      stickyHeader: string;
+      rowSelection?: string;
+    };
+  };
+  enableRowSelection?: boolean;
+  rowSelectionEnabled?: boolean;
+  setRowSelectionEnabled?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const GeneralSettings = ({
+  setShowColumnFiltersEnabled,
+  setStickyFirstColumn,
+  setStickyHeaders,
+  columnFiltersEnabled,
+  showColumnFilters,
+  stickyFirstColumn,
+  stickyHeaders,
+  copy,
+  enableRowSelection,
+  rowSelectionEnabled,
+  setRowSelectionEnabled,
+}: GeneralSettingsProps) => (
+  <div
+    data-testid={`${rootTestId}-general-settings`}
+    className={cx(`${rootClassName}__general-settings`)}
+    aria-labelledby="general-settings"
+  >
+    <Heading id="general-settings" variant="title-100" tag="h3">
+      {copy.header}
+    </Heading>
+    {columnFiltersEnabled && (
+      <ToggleWrapper
+        id="show-filters"
+        checked={showColumnFilters}
+        label={copy.toggles.showFilters}
+        onChange={setShowColumnFiltersEnabled}
+      />
+    )}
+    <ToggleWrapper
+      id="lock-first-column"
+      checked={stickyFirstColumn}
+      label={copy.toggles.lockFirstcolumn}
+      onChange={setStickyFirstColumn}
+    />
+    <ToggleWrapper
+      id="sticky-header"
+      checked={stickyHeaders}
+      label={copy.toggles.stickyHeader}
+      onChange={setStickyHeaders}
+    />
+    {enableRowSelection && copy.toggles.rowSelection && setRowSelectionEnabled && (
+      <ToggleWrapper
+        id="row-selection"
+        checked={rowSelectionEnabled || false}
+        label={copy.toggles.rowSelection}
+        onChange={setRowSelectionEnabled}
+      />
+    )}
+  </div>
+);
+
+const VisibleColumns = <TData extends RowData>({
+  header,
+  getAllColumns,
+}: {
+  header: string;
+  getAllColumns: () => Column<TData, unknown>[];
+}) => {
+  const allColumns = getAllColumns();
+  // Filter out row-selection and row-toggle columns
+  const filteredColumns = allColumns.filter(
+    (column) => column.id !== "row-selection" && column.id !== "row-toggle"
+  );
+  const visible = filteredColumns.filter((column) => column.getIsVisible());
+
+  const isDisabled = (column: Column<TData, unknown>) => {
+    return !column.getCanHide() || (visible.length === 1 && visible.includes(column));
+  };
+
+  return (
+    <section
+      data-testid={`${rootTestId}-visible-columns`}
+      className={cx(`${rootClassName}__visible-columns`)}
+      aria-labelledby="visible-columns"
+    >
+      <Heading id="visible-columns" variant="title-100" tag="h3">
+        {header}
+      </Heading>
+      {filteredColumns.map((column) => (
+        <ToggleWrapper
+          key={column.id}
+          id={column.id}
+          checked={column.getIsVisible()}
+          disabled={isDisabled(column)}
+          label={column.columnDef.header as string}
+          onChange={() => column.toggleVisibility()}
+        />
+      ))}
+    </section>
+  );
+};
+
+const ToggleWrapper = ({
+  id,
+  checked,
+  label,
+  disabled,
+  onChange,
+}: {
+  id: string;
+  checked: boolean;
+  disabled?: boolean;
+  label: string;
+  onChange?: React.Dispatch<React.SetStateAction<boolean>>;
+}) => (
+  <Toggle
+    id={id}
+    checked={checked}
+    label={label}
+    disabled={disabled}
+    labelPosition="left"
+    className={cx(`${rootClassName}__toggle`)}
+    onChange={onChange}
+    data-testid={`${rootTestId}-toggle`}
+  />
+);

package/src/table-toolbar.module.scss

@@ -0,0 +1,17 @@
+.purpur-table-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+  column-gap: var(--purpur-spacing-100);
+  row-gap: var(--purpur-spacing-50);
+  align-self: stretch;
+  flex-wrap: wrap;
+  width: 100%;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    gap: var(--purpur-spacing-200);
+  }
+}