@simplybusiness/mobius 3.0.0

package/src/components/DataTable/DataTable.test.tsx

@@ -0,0 +1,166 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { DataTable } from ".";
+import { data, columns } from "./mockTableData";
+import {
+  TABLE_BODY_CELL_CLASS,
+  TABLE_CLASS,
+  TABLE_HEAD_CELL_CLASS,
+} from "./constants";
+
+const props = {
+  data,
+  columns,
+};
+
+describe("DataTable", () => {
+  it("should render without errors", () => {
+    const component = render(<DataTable {...props} />);
+    expect(component).toBeTruthy();
+  });
+
+  describe("uses correct class names", () => {
+    it("uses mobius class", () => {
+      render(<DataTable {...props} data-testid="test-id" />);
+      expect(screen.getByTestId("test-id")).toHaveClass("mobius");
+    });
+
+    it("uses mobius/Table class", () => {
+      render(<DataTable {...props} data-testid="test-id" />);
+      expect(screen.getByTestId("test-id")).toHaveClass(TABLE_CLASS);
+    });
+
+    it("includes custom class name for table layout", () => {
+      render(
+        <DataTable {...props} data-testid="test-id" className="my-class" />,
+      );
+      expect(screen.getByTestId("test-id")).toHaveClass("my-class");
+      expect(screen.getByTestId("test-id")).toHaveClass(TABLE_CLASS);
+    });
+
+    it("includes custom class name for div layout", () => {
+      render(
+        <DataTable
+          {...props}
+          layout="flex"
+          data-testid="test-id"
+          className="my-class"
+        />,
+      );
+      expect(screen.getByTestId("test-id")).toHaveClass("my-class");
+      expect(screen.getByTestId("test-id")).toHaveClass(TABLE_CLASS);
+    });
+
+    it("uses table head cell class name", () => {
+      render(<DataTable {...props} />);
+      expect(
+        screen.getByRole("columnheader", {
+          name: /insurance cover/i,
+        }),
+      ).toHaveClass(TABLE_HEAD_CELL_CLASS);
+    });
+
+    it("uses table body cell class name", () => {
+      render(<DataTable {...props} />);
+      expect(
+        screen.getByRole("cell", {
+          name: /Stock/i,
+        }),
+      ).toHaveClass(TABLE_BODY_CELL_CLASS);
+    });
+  });
+
+  describe("renders correct elements based on passed props", () => {
+    it("uses 'display:table-row' for rows by default", () => {
+      render(<DataTable {...props} />);
+      expect(screen.getAllByRole("row")[0]).toHaveStyle("display: table-row");
+    });
+
+    it("uses table head cells that are not clickable by default", () => {
+      render(<DataTable {...props} />);
+      const headCells = screen.getAllByRole("columnheader");
+      headCells.forEach(cell => {
+        expect(cell).not.toHaveAttribute("tabindex", "0");
+      });
+    });
+
+    it("uses 'display:block' when layout prop is set to flex", () => {
+      render(<DataTable {...props} layout="flex" />);
+      expect(screen.getAllByRole("row")[0]).toHaveStyle("display: block");
+    });
+
+    it("renders 'table' based container by default", () => {
+      const { container } = render(<DataTable {...props} />);
+      expect(container.querySelector("table.mobius")).not.toBeNull();
+      expect(container.querySelector("div.mobius")).toBeNull();
+    });
+
+    it("renders 'div' based container with renderAsDivs prop", () => {
+      const { container } = render(<DataTable {...props} layout="flex" />);
+      expect(container.querySelector("div.mobius")).not.toBeNull();
+      expect(container.querySelector("table.mobius")).toBeNull();
+    });
+
+    it("adds sorting behaviour with sortable prop", () => {
+      render(<DataTable {...props} isSortable />);
+      const headCells = screen.getAllByRole("columnheader");
+      const firstHeadCell = headCells[0];
+
+      expect(firstHeadCell).not.toHaveClass("sortedAsc");
+      expect(firstHeadCell).not.toHaveClass("sortedDesc");
+      fireEvent.click(firstHeadCell);
+      expect(firstHeadCell).toHaveClass("sortedAsc");
+      fireEvent.click(firstHeadCell);
+      expect(firstHeadCell).toHaveClass("sortedDesc");
+      headCells.forEach(cell => {
+        expect(cell).toHaveAttribute("tabindex", "0");
+      });
+    });
+  });
+
+  describe("Column and Row spanning", () => {
+    const testSpanData = {
+      lowest_excess: {
+        colspan: 2,
+        rowspan: 3,
+        targetValue: "£350",
+      },
+    };
+
+    it("adds span attrs to target cell with spanData prop", () => {
+      render(<DataTable {...props} spanData={testSpanData} />);
+      const cell = screen.getByRole("cell", {
+        name: /£350/i,
+      });
+
+      expect(cell).toHaveAttribute(
+        "colspan",
+        `${testSpanData.lowest_excess.colspan}`,
+      );
+      expect(cell).toHaveAttribute(
+        "aria-colspan",
+        `${testSpanData.lowest_excess.colspan}`,
+      );
+      expect(cell).toHaveAttribute(
+        "rowspan",
+        `${testSpanData.lowest_excess.rowspan}`,
+      );
+      expect(cell).toHaveAttribute(
+        "aria-rowspan",
+        `${testSpanData.lowest_excess.rowspan}`,
+      );
+    });
+
+    it("doesn't render the cell if its value is undefined and 'spanData' provided", () => {
+      const testData = [
+        {
+          insurance_cover: "Employers' liability",
+          lowest_excess: "£250",
+        },
+      ];
+
+      render(<DataTable {...props} data={testData} spanData={testSpanData} />);
+      const bodyCells = screen.getAllByRole("cell");
+      expect(bodyCells).toHaveLength(Object.keys(testData[0]).length);
+    });
+  });
+});

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,44 @@
+import { forwardRef, RefAttributes } from "react";
+import { DOMProps } from "@react-types/shared";
+import { Column } from "react-table";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+import { TableLayout } from "./TableLayout";
+import {
+  SpanType,
+  DataTableElementType,
+  DataTableRef,
+  CollapseDataType,
+  LayoutType,
+} from "./types";
+import { FlexLayout } from "./FlexLayout";
+import { TABLE_CLASS } from "./constants";
+
+export interface DataTableProps
+  extends DOMProps,
+    RefAttributes<DataTableElementType> {
+  /** Custom class name for setting specific CSS */
+  className?: string;
+  data: Array<object>;
+  columns: Array<Column<object>>;
+  layout?: LayoutType;
+  isSortable?: boolean;
+  spanData?: SpanType;
+  collapseData?: CollapseDataType;
+  caption?: string;
+}
+
+const DataTable: ForwardedRefComponent<DataTableProps, DataTableElementType> =
+  forwardRef((props: DataTableProps, ref: DataTableRef) => {
+    const { layout = "table", className, ...rest } = props;
+    const classes = clsx(TABLE_CLASS, className);
+
+    if (layout === "flex") {
+      return <FlexLayout ref={ref} className={classes} {...rest} />;
+    }
+
+    return <TableLayout ref={ref} className={className} {...rest} />;
+  });
+
+DataTable.displayName = "DataTable";
+export { DataTable };

package/src/components/DataTable/FlexLayout.tsx

@@ -0,0 +1,110 @@
+import { forwardRef } from "react";
+import { useTable, useSortBy } from "react-table";
+import clsx from "clsx";
+import { ForwardedRefComponent } from "../../types/components";
+import {
+  TABLE_BODY_CELL_CLASS,
+  TABLE_BODY_CLASS,
+  TABLE_HEAD_CELL_CLASS,
+  TABLE_HEAD_CLASS,
+  TABLE_ROW_CLASS,
+} from "./constants";
+import { CommonTableProps, DataTableElementType, DataTableRef } from "./types";
+import { useHideColumns } from "../../hooks";
+import { getSortClasses, getSortableAttributes } from "./helpers";
+import { SortIcon } from "./SortIcon";
+
+export type FlexBasedTableProps = CommonTableProps;
+
+const FlexLayout: ForwardedRefComponent<
+  FlexBasedTableProps,
+  DataTableElementType
+> = forwardRef((props: FlexBasedTableProps, ref: DataTableRef) => {
+  const {
+    className,
+    columns,
+    data,
+    collapseData,
+    isSortable,
+    caption,
+    ...rest
+  } = props;
+
+  const { getTableProps, headerGroups, rows, prepareRow, setHiddenColumns } =
+    useTable(
+      {
+        columns,
+        data,
+      },
+      useSortBy,
+    );
+
+  useHideColumns(setHiddenColumns, collapseData);
+
+  return (
+    <div
+      className={className}
+      aria-label={caption}
+      ref={ref}
+      {...getTableProps()}
+      {...rest}
+    >
+      <div className={TABLE_HEAD_CLASS}>
+        {headerGroups.map((headerGroup, index) => (
+          <div
+            {...headerGroup.getHeaderGroupProps()}
+            className={TABLE_ROW_CLASS}
+            aria-rowindex={index + 1}
+          >
+            {headerGroup.headers.map((column: any, idx) => {
+              const sortClasses = getSortClasses(column);
+              const headCellClasses = clsx(TABLE_HEAD_CELL_CLASS, sortClasses);
+              return (
+                <div
+                  {...column.getHeaderProps(
+                    isSortable && column.getSortByToggleProps(),
+                  )}
+                  className={headCellClasses}
+                  aria-colindex={idx + 1}
+                  {...(isSortable && getSortableAttributes())}
+                >
+                  <span>{column.render("Header")}</span>
+                  <SortIcon
+                    showPlaceholder={!isSortable}
+                    isSorted={column.isSorted}
+                    isSortedDesc={column.isSortedDesc}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+      <div role="rowgroup" className={TABLE_BODY_CLASS}>
+        {rows.map(row => {
+          prepareRow(row);
+          return (
+            <div
+              {...row.getRowProps()}
+              className={TABLE_ROW_CLASS}
+              role="row"
+              aria-rowindex={row.index + 1}
+            >
+              {row.cells.map((cell, idx) => (
+                <div
+                  {...cell.getCellProps()}
+                  className={TABLE_BODY_CELL_CLASS}
+                  aria-colindex={idx + 1}
+                >
+                  <span>{cell.render("Cell")}</span>
+                </div>
+              ))}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+});
+
+export { FlexLayout };

package/src/components/DataTable/SortIcon.tsx

@@ -0,0 +1,34 @@
+import type { IconName } from "@simplybusiness/icons";
+import { Icon } from "../Icon";
+import { TABLE_HEAD_SORT_ICON_PLACEHOLDER_CLASS } from "./constants";
+
+export type SortIconProps = {
+  showPlaceholder?: boolean;
+  isSorted?: boolean;
+  isSortedDesc?: boolean;
+  descIcon?: IconName;
+  ascIcon?: IconName;
+  defaultIcon?: IconName;
+};
+
+export const SortIcon = ({
+  showPlaceholder = true,
+  isSorted = false,
+  isSortedDesc,
+  descIcon = "chevronDown",
+  ascIcon = "chevronUp",
+  defaultIcon = "chevronUpDown",
+}: SortIconProps) => {
+  if (showPlaceholder)
+    return <span className={TABLE_HEAD_SORT_ICON_PLACEHOLDER_CLASS} />;
+
+  return (
+    <span>
+      {isSorted ? (
+        <Icon name={isSortedDesc ? descIcon : ascIcon} />
+      ) : (
+        <Icon name={defaultIcon} />
+      )}
+    </span>
+  );
+};

package/src/components/DataTable/TableLayout.tsx

@@ -0,0 +1,136 @@
+import { forwardRef } from "react";
+import { useTable, useSortBy } from "react-table";
+import { ForwardedRefComponent } from "../../types/components";
+import { Table } from "../Table";
+import {
+  SpanType,
+  DataTableElementType,
+  DataTableRef,
+  CommonTableProps,
+} from "./types";
+import { useHideColumns } from "../../hooks";
+import { getSortClasses, getSortableAttributes } from "./helpers";
+import { SortIcon } from "./SortIcon";
+
+export interface TableLayoutProps extends CommonTableProps {
+  spanData?: SpanType;
+}
+
+const TableLayout: ForwardedRefComponent<
+  TableLayoutProps,
+  DataTableElementType
+> = forwardRef((props: TableLayoutProps, ref: DataTableRef) => {
+  const {
+    className,
+    columns,
+    data,
+    collapseData,
+    spanData,
+    isSortable,
+    caption,
+    ...rest
+  } = props;
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    setHiddenColumns,
+  } = useTable(
+    {
+      columns,
+      data,
+    },
+    useSortBy,
+  );
+
+  useHideColumns(setHiddenColumns, collapseData);
+
+  return (
+    <Table
+      className={className}
+      aria-label={caption}
+      ref={ref}
+      {...getTableProps()}
+      {...rest}
+    >
+      <Table.Head>
+        {headerGroups.map((headerGroup, index) => (
+          <Table.Row
+            {...headerGroup.getHeaderGroupProps()}
+            aria-rowindex={index + 1}
+          >
+            {headerGroup.headers.map((column: any, idx) => {
+              const sortClasses = getSortClasses(column);
+              return (
+                <Table.HeaderCell
+                  {...column.getHeaderProps(
+                    isSortable && column.getSortByToggleProps(),
+                  )}
+                  aria-colindex={idx + 1}
+                  className={sortClasses}
+                  {...(isSortable && getSortableAttributes())}
+                >
+                  <span>{column.render("Header")}</span>
+                  <SortIcon
+                    showPlaceholder={!isSortable}
+                    isSorted={column.isSorted}
+                    isSortedDesc={column.isSortedDesc}
+                  />
+                </Table.HeaderCell>
+              );
+            })}
+          </Table.Row>
+        ))}
+      </Table.Head>
+
+      <Table.Body {...getTableBodyProps()}>
+        {rows.map(row => {
+          prepareRow(row);
+          return (
+            <Table.Row {...row.getRowProps()} aria-rowindex={row.index + 1}>
+              {row.cells.map((cell, idx) => {
+                const accessor = cell.column.id;
+                const isTargetCell =
+                  spanData?.[accessor] &&
+                  spanData?.[accessor]?.targetValue === cell.value;
+
+                if (isTargetCell) {
+                  const { colspan, rowspan, substValue, spanClass } =
+                    spanData[accessor];
+
+                  return (
+                    <Table.Cell
+                      {...cell.getCellProps()}
+                      aria-colindex={idx + 1}
+                      colSpan={colspan}
+                      rowSpan={rowspan}
+                      aria-colspan={colspan}
+                      aria-rowspan={rowspan}
+                    >
+                      <span className={spanClass}>
+                        {substValue || cell.render("Cell")}
+                      </span>
+                    </Table.Cell>
+                  );
+                }
+
+                const isEmptyCell = !cell.value && spanData;
+                if (isEmptyCell) return false;
+                return (
+                  <Table.Cell {...cell.getCellProps()} aria-colindex={idx + 1}>
+                    <span>{cell.render("Cell")}</span>
+                  </Table.Cell>
+                );
+              })}
+            </Table.Row>
+          );
+        })}
+      </Table.Body>
+    </Table>
+  );
+});
+
+export { TableLayout };

package/src/components/DataTable/constants.ts

@@ -0,0 +1,8 @@
+export const TABLE_CLASS = "mobius mobius/Table";
+export const TABLE_HEAD_CLASS = "mobius mobius/TableHead";
+export const TABLE_HEAD_SORT_ICON_PLACEHOLDER_CLASS =
+  "mobius mobius/TableHeadSortIconPlaceholder";
+export const TABLE_ROW_CLASS = "mobius mobius/TableRow";
+export const TABLE_HEAD_CELL_CLASS = "mobius mobius/TableHeadCell";
+export const TABLE_BODY_CLASS = "mobius mobius/TableBody";
+export const TABLE_BODY_CELL_CLASS = "mobius mobius/TableBodyCell";

package/src/components/DataTable/helpers.ts

@@ -0,0 +1,13 @@
+import clsx from "clsx";
+
+export function getSortClasses(column: any): string {
+  return clsx({
+    sortedDesc: column.isSorted && column.isSortedDesc,
+    sortedAsc: column.isSorted && !column.isSortedDesc,
+  });
+}
+
+export const getSortableAttributes = () => ({
+  role: "columnheader",
+  tabIndex: 0,
+});

package/src/components/DataTable/index.tsx

@@ -0,0 +1,2 @@
+export * from "./DataTable";
+export * from "./types";

package/src/components/DataTable/mockTableData.ts

@@ -0,0 +1,34 @@
+import { Column } from "react-table";
+
+export const data: Array<object> = [
+  {
+    insurance_cover: "Employers' liability",
+    lowest_excess: "£250",
+    highest_excess: "£2,500",
+  },
+  {
+    insurance_cover: "Public liability",
+    lowest_excess: "£350",
+    highest_excess: "£500",
+  },
+  {
+    insurance_cover: "Stock",
+    lowest_excess: "£100",
+    highest_excess: "£500",
+  },
+];
+
+export const columns: Array<Column<object>> = [
+  {
+    Header: "Insurance cover",
+    accessor: "insurance_cover",
+  },
+  {
+    Header: "Lowest excess",
+    accessor: "lowest_excess",
+  },
+  {
+    Header: "Highest excess",
+    accessor: "highest_excess",
+  },
+];

package/src/components/DataTable/types.ts

@@ -0,0 +1,33 @@
+import { Ref, RefAttributes } from "react";
+import { Column } from "react-table";
+import { SizeType } from "../../types/size";
+
+export type DataTableElementType = HTMLTableElement;
+
+export type DataTableRef = Ref<DataTableElementType>;
+
+export type SpanType = {
+  [key: string]: {
+    colspan?: number;
+    rowspan?: number;
+    targetValue: any;
+    substValue?: any;
+    spanClass?: string;
+  };
+};
+
+export type CollapseDataType = {
+  collapseOnSize: SizeType;
+  collapseColumns: Array<string>;
+};
+
+export type LayoutType = "table" | "flex";
+
+export interface CommonTableProps extends RefAttributes<DataTableElementType> {
+  data: Array<object>;
+  columns: Array<Column<object>>;
+  className?: string;
+  collapseData?: CollapseDataType;
+  isSortable?: boolean;
+  caption?: string;
+}

package/src/components/DatePicker/Calendar.tsx

@@ -0,0 +1,46 @@
+import { useCalendarState } from "@react-stately/calendar";
+import {
+  CalendarProps as AriaCalendarProps,
+  useCalendar,
+} from "@react-aria/calendar";
+import { useLocale } from "@react-aria/i18n";
+import { createCalendar, DateValue } from "@internationalized/date";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+
+import { CalendarGrid } from "./CalendarGrid";
+import { CalendarButton } from "./CalendarButton";
+
+export interface CalendarProps extends AriaCalendarProps<DateValue> {}
+
+export function Calendar(props: CalendarProps) {
+  const { locale } = useLocale();
+  const state = useCalendarState({
+    ...props,
+    locale,
+    createCalendar,
+  });
+
+  const { calendarProps, prevButtonProps, nextButtonProps, title } =
+    useCalendar(props, state);
+
+  return (
+    <div {...calendarProps} className="mobius/Calendar">
+      <div className="mobius/CalendarHeader">
+        <CalendarButton
+          className="mobius/CalendarPreviousButton"
+          {...prevButtonProps}
+        >
+          <VisuallyHidden>&lt;</VisuallyHidden>
+        </CalendarButton>
+        <h2 className="mobius/CalendarTitle">{title}</h2>
+        <CalendarButton
+          className="mobius/CalendarNextButton"
+          {...nextButtonProps}
+        >
+          <VisuallyHidden>&gt;</VisuallyHidden>
+        </CalendarButton>
+      </div>
+      <CalendarGrid state={state} />
+    </div>
+  );
+}

package/src/components/DatePicker/CalendarButton.tsx

@@ -0,0 +1,56 @@
+import { Ref, forwardRef, RefAttributes, useRef, ReactNode } from "react";
+import { useButton } from "@react-aria/button";
+import { HoverProps, useHover } from "@react-aria/interactions";
+import type { AriaButtonProps } from "@react-types/button";
+import { DOMProps } from "@react-types/shared";
+import clsx from "clsx";
+import { useFocusRing } from "@react-aria/focus";
+import { ForwardedRefComponent } from "../../types/components";
+
+export type ButtonElementType = HTMLButtonElement;
+
+export interface ButtonProps
+  extends AriaButtonProps<"button" | "a" | "span">,
+    DOMProps,
+    HoverProps,
+    RefAttributes<ButtonElementType> {
+  children?: ReactNode;
+  className?: string;
+}
+
+export type ButtonRef = Ref<ButtonElementType>;
+
+const CalendarButton: ForwardedRefComponent<ButtonProps, ButtonElementType> =
+  forwardRef((props: ButtonProps, ref: ButtonRef) => {
+    const refObj = useRef(null);
+    const { hoverProps, isHovered } = useHover(props);
+    const { buttonProps } = useButton(props, refObj);
+    const { focusProps, isFocusVisible } = useFocusRing(props);
+
+    // Reshape class name and apply to outer element
+    const classes = clsx(
+      "mobius",
+      "mobius/CalendarButton",
+      {
+        "--is-disabled": props.isDisabled,
+        "--is-hovered": isHovered,
+        "--is-focused": isFocusVisible,
+      },
+      props.className,
+    );
+    return (
+      <button
+        type="button"
+        ref={ref}
+        {...buttonProps}
+        {...hoverProps}
+        {...focusProps}
+        className={classes}
+      >
+        {props.children}
+      </button>
+    );
+  });
+
+CalendarButton.displayName = "CalendarButton";
+export { CalendarButton };