@simplybusiness/mobius 3.10.0 → 3.11.0

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

@@ -1,166 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/src/components/DataTable/mockTableData.ts

@@ -1,34 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,48 +0,0 @@
-"use client";
-
-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

@@ -1,58 +0,0 @@
-"use client";
-
-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 };