@purpurds/table 0.0.1

package/src/table-action-bar.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { Button } from "@purpurds/button";
+import { Paragraph } from "@purpurds/paragraph";
+import { Toggle } from "@purpurds/toggle";
+import c from "classnames/bind";
+
+import styles from "./table-action-bar.module.scss";
+import { useScreenSize } from "./use-screen-size.hook";
+
+export type TableActionBarCopyProps = {
+  buttons: {
+    cancel: string;
+    primary: string;
+    secondary?: string;
+    toggleSelected: string;
+  };
+  selectedRowsCount: {
+    of: string;
+    selected: string;
+  };
+};
+
+export type TableActionBarProps = {
+  rowCount: number;
+  selectedRowsCount: number;
+  copy: TableActionBarCopyProps;
+  isVisible: boolean;
+  onCancelSelection: () => void;
+  onToggleSelected: () => void;
+  onPrimaryButtonClick: () => void;
+  onSecondaryButtonClick?: () => void;
+};
+
+const rootClassName = "purpur-table-action-bar";
+const cx = c.bind(styles);
+const rootTestId = "purpur-table-action-bar";
+
+export const TableActionBar = ({
+  rowCount,
+  selectedRowsCount,
+  copy,
+  isVisible,
+  onCancelSelection,
+  onToggleSelected,
+  onPrimaryButtonClick,
+  onSecondaryButtonClick,
+}: TableActionBarProps) => {
+  const { isLgOrSmaller } = useScreenSize();
+
+  return (
+    <div
+      data-testid={rootTestId}
+      className={cx(rootClassName, { [`${rootClassName}--is-visible`]: isVisible })}
+    >
+      <div className={cx(styles[`${rootClassName}__selected-wrapper`])}>
+        <Paragraph data-testid={`${rootTestId}-selected-text`}>
+          <span>{selectedRowsCount}</span> {copy.selectedRowsCount.of} {rowCount}{" "}
+          {copy.selectedRowsCount.selected}
+        </Paragraph>
+
+        <Toggle
+          data-testid={`${rootTestId}-toggle-selected`}
+          id="toggle-selected"
+          label={copy.buttons.toggleSelected}
+          onChange={onToggleSelected}
+        />
+      </div>
+
+      <div className={cx(styles[`${rootClassName}__button-group`])}>
+        <Button
+          data-testid={`${rootTestId}-cancel-button`}
+          variant="tertiary-purple"
+          fullWidth={isLgOrSmaller}
+          onClick={onCancelSelection}
+        >
+          {copy.buttons.cancel}
+        </Button>
+
+        <div className={cx(styles[`${rootClassName}__primary-secondary-buttons`])}>
+          {onSecondaryButtonClick && copy.buttons.secondary && (
+            <Button
+              data-testid={`${rootTestId}-secondary-button`}
+              variant="secondary"
+              fullWidth={isLgOrSmaller}
+              onClick={onSecondaryButtonClick}
+            >
+              {copy.buttons.secondary}
+            </Button>
+          )}
+          {onPrimaryButtonClick && copy.buttons.primary && (
+            <Button
+              data-testid={`${rootTestId}-primary-button`}
+              variant="primary"
+              fullWidth={isLgOrSmaller}
+              onClick={onPrimaryButtonClick}
+            >
+              {copy.buttons.primary}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/table-body.tsx

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+import c from "classnames/bind";
+
+import styles from "./table.module.scss";
+const cx = c.bind(styles);
+
+type TableBodyProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+const rootClassName = "purpur-table-body";
+
+const TableBody = ({ children, className, ...props }: TableBodyProps) => {
+  const classes = cx([className, rootClassName]);
+
+  return (
+    <tbody className={classes} {...props}>
+      {children}
+    </tbody>
+  );
+};
+
+export default TableBody;

package/src/table-column-header-cell.tsx

@@ -0,0 +1,305 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Button } from "@purpurds/button";
+import { Checkbox, CheckedState } from "@purpurds/checkbox";
+import { IconArrowDown } from "@purpurds/icon/arrow-down";
+import { IconArrowUp } from "@purpurds/icon/arrow-up";
+import { IconSorter } from "@purpurds/icon/sorter";
+import { Paragraph } from "@purpurds/paragraph";
+import { Select, SelectProps } from "@purpurds/select";
+import { TextField } from "@purpurds/text-field";
+import { VisuallyHidden } from "@purpurds/visually-hidden";
+import { flexRender, Header, RowData, SortDirection, Table } from "@tanstack/react-table";
+import c from "classnames/bind";
+
+import styles from "./table.module.scss";
+import { pxToRemString } from "./utils/unit-conversions";
+const cx = c.bind(styles);
+
+export type SortingEnabledProps = {
+  enableSorting: true;
+  sortingAriaLabels: SortingAriaLabels;
+};
+
+export type SortingDisabledProps = {
+  enableSorting?: false;
+  sortingAriaLabels?: never;
+};
+
+export type TableColumnHeaderCellProps<TData> = {
+  className?: string;
+  stickyColumn: boolean;
+  stickyHeaders: boolean;
+  header: Header<TData, unknown>;
+  tanstackTable: Table<TData>;
+  isScrolled?: boolean;
+  showBorder?: boolean;
+} & (SortingEnabledProps | SortingDisabledProps);
+
+export type SortingAriaLabels = {
+  desc: string;
+  asc: string;
+  default: string;
+};
+
+export type FilterVariants = "string" | "select";
+
+const rootClassName = "purpur-table-column-header-cell";
+
+export const TableColumnHeaderCell = <TData extends RowData>({
+  className,
+  enableSorting,
+  header,
+  sortingAriaLabels,
+  stickyColumn,
+  stickyHeaders,
+  tanstackTable,
+  isScrolled,
+  showBorder,
+}: TableColumnHeaderCellProps<TData>) => {
+  const canSort = enableSorting && header.column.getCanSort();
+  const hasFilter = header.column.getCanFilter();
+  const isCheckBox = header.column.columnDef.meta?.cellType === "rowSelection";
+  const isRadiobutton = header.column.columnDef.meta?.cellType === "rowToggle";
+  const [isVisible, setIsVisible] = useState(false);
+  const elementRef = useRef<HTMLTableCellElement>(null);
+
+  useEffect(() => {
+    const currentElement = elementRef.current;
+    if (!currentElement) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 1 }
+    );
+
+    observer.observe(currentElement);
+
+    return () => {
+      if (currentElement) {
+        observer.unobserve(currentElement);
+      }
+    };
+  }, []);
+
+  const getSortingDirection = (sortingDirection: SortDirection | false) => {
+    switch (sortingDirection) {
+      case "desc":
+        return "descending";
+      case "asc":
+        return "ascending";
+      case false:
+      default:
+        return "none";
+    }
+  };
+
+  const widthInRemString = pxToRemString(header.getSize());
+
+  const isFirstColumn = header.column.getIsFirstColumn();
+  const isLastColumn = header.column.getIsLastColumn();
+
+  // If its a string we use it as aria-label else its a custom markup and consumer has to make sure the aria label is set correctly.
+  const ariaLabel =
+    typeof header.column.columnDef.header === "string"
+      ? `${header.column.columnDef.header}`
+      : undefined;
+
+  return (
+    <th
+      ref={elementRef}
+      className={cx([
+        className,
+        rootClassName,
+        {
+          [`${rootClassName}__checkbox`]: isCheckBox,
+          [`${rootClassName}__sticky-column`]: stickyColumn,
+          [`${rootClassName}__sticky-header`]: stickyHeaders,
+          [`${rootClassName}__sticky-column__with-sticky-border`]: isScrolled && showBorder,
+          [`${rootClassName}__first-header-visible`]: isFirstColumn && isVisible,
+          [`${rootClassName}__last-header-visible`]: isLastColumn && isVisible,
+          [`${rootClassName}__border-radius-first-cell`]: isFirstColumn,
+          [`${rootClassName}__border-radius-last-cell`]: isLastColumn,
+        },
+      ])}
+      style={{
+        // If column resizing is enabled Don't use column.getSize() on every header and every data cell. Instead, calculate all column widths once upfront, memoized! https://tanstack.com/table/latest/docs/guide/column-sizing#column-sizing-guide
+        maxWidth: widthInRemString,
+        minWidth: widthInRemString,
+      }}
+      scope="col"
+      aria-sort={getSortingDirection(header.column.getIsSorted())}
+      aria-label={ariaLabel}
+    >
+      <div className={cx(`${rootClassName}__content`)}>
+        <div className={cx(`${rootClassName}__title`)}>
+          <HeaderContent
+            header={header}
+            tanstackTable={tanstackTable}
+            canSort={canSort}
+            isCheckBox={isCheckBox}
+            isRadiobutton={isRadiobutton}
+            sortingAriaLabels={sortingAriaLabels}
+          />
+        </div>
+
+        {hasFilter && !isCheckBox && (
+          <div className={cx(`${rootClassName}__filter-wrapper`)}>
+            <Filter header={header} />
+          </div>
+        )}
+      </div>
+    </th>
+  );
+};
+
+type HeaderContentProps<TData> = {
+  header: Header<TData, unknown>;
+  tanstackTable: Table<TData>;
+  canSort: boolean | undefined;
+  isCheckBox: boolean;
+  isRadiobutton: boolean;
+  sortingAriaLabels?: SortingAriaLabels;
+};
+
+const HeaderContent = <TData extends RowData>({
+  header,
+  tanstackTable,
+  canSort,
+  isCheckBox,
+  isRadiobutton,
+  sortingAriaLabels,
+}: HeaderContentProps<TData>) => {
+  if (isCheckBox) {
+    return (
+      <HeaderCheckBox
+        id={header.id}
+        tanstackTable={tanstackTable}
+        ariaLabel={header.column.columnDef.meta?.rowSelectionAriaLabels?.header ?? ""}
+      />
+    );
+  }
+
+  if (isRadiobutton) {
+    const ariaLabel = header.column.columnDef.meta?.rowSelectionAriaLabels?.header ?? "";
+    return <VisuallyHidden>{ariaLabel}</VisuallyHidden>;
+  }
+
+  if (canSort && sortingAriaLabels) {
+    return (
+      <Button
+        variant="text"
+        iconOnly={false}
+        size="sm"
+        type="button"
+        aria-label={getSortingAriaLabel(header.column.getIsSorted(), sortingAriaLabels)}
+        onClick={header.column.getToggleSortingHandler()}
+        className={cx(`${rootClassName}__sortable-title`)}
+      >
+        <HeaderParagraph header={header} />
+        {getIcon(header.column.getIsSorted())}
+      </Button>
+    );
+  }
+
+  return <HeaderParagraph header={header} />;
+};
+
+type HeaderCheckboxProps<TData> = {
+  id: string;
+  ariaLabel: string;
+  tanstackTable: Table<TData>;
+};
+
+const HeaderCheckBox = <TData extends RowData>({
+  id,
+  ariaLabel,
+  tanstackTable,
+}: HeaderCheckboxProps<TData>) => {
+  const checked: CheckedState = tanstackTable.getIsSomeRowsSelected()
+    ? "indeterminate"
+    : tanstackTable.getIsAllPageRowsSelected();
+
+  return (
+    <Checkbox
+      id={id}
+      onChange={() => tanstackTable.toggleAllPageRowsSelected()}
+      checked={checked}
+      aria-label={ariaLabel}
+    />
+  );
+};
+
+const HeaderParagraph = <TData extends RowData>({ header }: { header: Header<TData, unknown> }) => (
+  <Paragraph data-testid="purpur-table-column-header-cell-title" variant="paragraph-100-bold">
+    {flexRender(header.column.columnDef.header, header.getContext())}
+  </Paragraph>
+);
+
+const getIcon = (sortingDirection: SortDirection | false) => {
+  switch (sortingDirection) {
+    case "desc":
+      return <IconArrowDown size="xs" />;
+    case "asc":
+      return <IconArrowUp size="xs" />;
+    case false:
+    default:
+      return <IconSorter size="xs" />;
+  }
+};
+
+const getSortingAriaLabel = (
+  sortingDirection: SortDirection | false,
+  sortingAriaLabels: SortingAriaLabels
+) => {
+  switch (sortingDirection) {
+    case "desc":
+      return sortingAriaLabels.desc;
+    case "asc":
+      return sortingAriaLabels.asc;
+    case false:
+    default:
+      return sortingAriaLabels.default;
+  }
+};
+
+const Filter = <TData extends RowData>({ header }: { header: Header<TData, unknown> }) => {
+  const { filterVariant, filterKey, filterPlaceholder, filterAriaLabel } =
+    header.column.columnDef.meta ?? {};
+
+  if (filterVariant === "string") {
+    const columnFilterValue = header.column.getFilterValue() as string;
+    return (
+      <TextField
+        onChange={(event) => header.column.setFilterValue(event.target.value)}
+        type="text"
+        value={columnFilterValue ?? ""}
+        placeholder={filterPlaceholder}
+        aria-label={filterAriaLabel}
+      />
+    );
+  }
+
+  if (filterVariant === "select") {
+    const columnFilterValue = header.column.getFilterValue() as {
+      filterKey: string;
+      value: string;
+    };
+    const selectProps = header.column.columnDef.meta?.selectProps as SelectProps;
+    return (
+      <Select
+        {...selectProps}
+        onChange={(event) => {
+          const filter = filterKey ? { filterKey, value: event.target.value } : event.target.value;
+          header.column.setFilterValue(filter);
+        }}
+        value={columnFilterValue?.value ?? ""}
+      />
+    );
+  }
+
+  return null;
+};

package/src/table-export-drawer.module.scss

@@ -0,0 +1,9 @@
+.purpur-table-export-drawer {
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--purpur-spacing-100);
+    align-self: stretch;
+  }
+}

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+
+import { TableExportDrawer } from "./table-export-drawer";
+import { copy, Selectors } from "./test-utils/helpers";
+
+const onExportDataMock = vi.fn();
+const setDrawerIsOpenMock = vi.fn();
+
+describe("Data table - Export drawer", () => {
+  let container: HTMLElement;
+  beforeEach(() => {
+    container = render(
+      <TableExportDrawer
+        copy={copy.exportDrawer}
+        exportFormats={["csv", "xlxs"]}
+        isOpen={true}
+        onExportData={onExportDataMock}
+        setDrawerIsOpen={setDrawerIsOpenMock}
+      />
+    ).container;
+  });
+
+  it("should have a drawer title", () => {
+    const drawerTitle = screen.getByTestId(Selectors.EXPORT_DRAWER.TITLE);
+    expect(drawerTitle).toHaveTextContent("Export");
+  });
+
+  it("should have a body text", () => {
+    const bodyText = screen.getByTestId(Selectors.EXPORT_DRAWER.BODY_TEXT);
+    expect(bodyText).toHaveTextContent("Choose the format you want to export the table in.");
+  });
+
+  it("should have two export buttons", () => {
+    const exportButtons = screen.getAllByTestId(Selectors.EXPORT_DRAWER.EXPORT_BUTTON);
+    expect(exportButtons).toHaveLength(2);
+
+    expect(exportButtons[0]).toHaveTextContent("Export as csv");
+    expect(exportButtons[1]).toHaveTextContent("Export as xlxs");
+  });
+
+  it("should have a close button", () => {
+    const closeButton = within(screen.getByTestId(Selectors.EXPORT_DRAWER.HEADER_ROW)).getByRole(
+      "button"
+    );
+    expect(closeButton).toHaveAttribute("aria-label", "Close drawer");
+  });
+
+  it("should send an 'onClose' event when closeButton clicked", async () => {
+    const closeButton = within(screen.getByTestId(Selectors.EXPORT_DRAWER.HEADER_ROW)).getByRole(
+      "button"
+    );
+
+    await userEvent.click(closeButton);
+
+    expect(setDrawerIsOpenMock).toHaveBeenCalled();
+  });
+
+  it("should send an 'onExportData' event when export button clicked", async () => {
+    const exportButtons = screen.getAllByTestId(Selectors.EXPORT_DRAWER.EXPORT_BUTTON);
+
+    await userEvent.click(exportButtons[0]);
+
+    expect(onExportDataMock).toHaveBeenCalledWith("csv");
+  });
+
+  it("should be accessible", async () => {
+    const results = await axe(container);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    expect(results).toHaveNoViolations();
+  });
+});

package/src/table-export-drawer.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Button } from "@purpurds/button";
+import { Drawer } from "@purpurds/drawer";
+import c from "classnames/bind";
+
+import styles from "./table-export-drawer.module.scss";
+
+export type TableExportDrawerCopyProps = {
+  link: string;
+  title: string;
+  bodyText: string;
+  closeButtonText: string;
+};
+
+export type TableExportDrawerProps = {
+  isOpen: boolean;
+  exportFormats: string[];
+  copy: TableExportDrawerCopyProps;
+  onExportData: (format: string) => void;
+  setDrawerIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const rootClassName = "purpur-table-export-drawer";
+const cx = c.bind(styles);
+const rootTestId = "purpur-table-export-drawer";
+
+export const TableExportDrawer = ({
+  exportFormats,
+  isOpen,
+  copy,
+  onExportData,
+  setDrawerIsOpen,
+}: TableExportDrawerProps) => (
+  <div id="purpur-table-export-drawer">
+    <Drawer data-testid={rootTestId} open={isOpen} onOpenChange={setDrawerIsOpen}>
+      <Drawer.Content
+        data-testid={`${rootTestId}-content`}
+        zIndex={6}
+        title={copy.title}
+        bodyText={copy.bodyText}
+        closeButtonText={copy.closeButtonText}
+      >
+        <div className={cx(`${rootClassName}__content`)}>
+          {exportFormats.map((format) => (
+            <Button
+              key={format}
+              data-testid={`${rootTestId}-export-button`}
+              variant="secondary"
+              onClick={() => onExportData(format)}
+              fullWidth
+            >
+              {`${copy.link} ${format}`}
+            </Button>
+          ))}
+        </div>
+      </Drawer.Content>
+    </Drawer>
+  </div>
+);

package/src/table-header.tsx

@@ -0,0 +1,35 @@
+import React, { ReactNode } from "react";
+import c from "classnames/bind";
+
+import styles from "./table.module.scss";
+const cx = c.bind(styles);
+
+type TableHeaderProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  columnFiltersEnabled: boolean;
+};
+
+const rootClassName = "purpur-table-header";
+
+export const TableHeader = ({
+  children,
+  className,
+  columnFiltersEnabled,
+  ...props
+}: TableHeaderProps) => {
+  const classes = cx([
+    className,
+    rootClassName,
+    {
+      [`${rootClassName}--has-filters`]: columnFiltersEnabled,
+    },
+  ]);
+
+  return (
+    <thead className={classes} {...props}>
+      {children}
+    </thead>
+  );
+};