@nypl/design-system-react-components 1.0.1 → 1.0.2

package/src/components/Table/Table.test.tsx

@@ -0,0 +1,241 @@
+import * as React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
+
+import Image from "../Image/Image";
+import Table from "./Table";
+
+export const columnHeaders = [
+  "First Name",
+  "Last Name",
+  "Nick Name",
+  "Address1",
+  "City",
+  "Zipcode",
+  "State",
+];
+export const columnHeadersUneven = [
+  "First Name",
+  "Last Name",
+  "Nick Name",
+  "Address1",
+  "City",
+  "Zipcode",
+];
+export const tableData = [
+  ["Tom", "Nook", "Tanukichi", "Main Street", "New York", "23458", "NY"],
+  ["Isabelle", "-", "Shizue", "Walnut Street", "New York", "23458", "NY"],
+  ["K.K.", "Slider", "Totakeke", "Niper Place", "New York", "98765", "NY"],
+  [
+    "Sonny",
+    "Resetti",
+    "Risetto san",
+    "Village Road",
+    "New York",
+    "09873",
+    "NY",
+  ],
+];
+export const tableDataUneven = [
+  ["Tom", "Nook", "Tanukichi", "Main Street", "New York", "23458", "NY"],
+  ["Isabelle", "-", "Shizue", "Walnut Street", "New York", "23458", "NY"],
+  ["K.K.", "Slider", "Totakeke", "Niper Place", "New York", "98765", "NY"],
+  ["Sonny", "Resetti", "Risetto san", "Village Road", "New York", "09873"],
+];
+export const characterHeaders = ["First Name", "Last Name", "Avatar"];
+export const charactersData = [
+  [
+    "Tom",
+    "Nook",
+    <Image
+      alt="Tom Nook"
+      key="tom"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "Isabelle",
+    "-",
+    ,
+    <Image
+      alt="Isabelle"
+      key="isa"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "K.K.",
+    "Slider",
+    ,
+    <Image
+      alt="K.K Slider"
+      key="kk"
+      size="small"
+      src="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+];
+
+describe("Table Accessibility", () => {
+  it("passes axe accessibility test with the columnHeaders and tableData prop", async () => {
+    const { container } = render(
+      <Table columnHeaders={columnHeaders} tableData={tableData} />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  it("passes axe accessibility test with tableData prop", async () => {
+    const { container } = render(<Table tableData={tableData} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
+
+describe("Table", () => {
+  it("renders a caption", () => {
+    render(<Table tableData={tableData} titleText="this is the caption" />);
+    expect(screen.getByText("this is the caption")).toBeInTheDocument();
+  });
+
+  it("renders a table header", () => {
+    render(
+      <Table
+        columnHeaders={columnHeaders}
+        tableData={tableData}
+        titleText="this is the caption"
+      />
+    );
+
+    expect(screen.getByText("First Name")).toBeInTheDocument();
+    expect(screen.getByText("Last Name")).toBeInTheDocument();
+    expect(screen.getByText("Nick Name")).toBeInTheDocument();
+  });
+
+  it("renders table data", () => {
+    render(<Table tableData={tableData} columnHeaders={columnHeaders} />);
+
+    expect(screen.getByText("Tom")).toBeInTheDocument();
+    expect(screen.getByText("Nook")).toBeInTheDocument();
+    expect(screen.getByText("Village Road")).toBeInTheDocument();
+  });
+
+  it("logs a warning when the `tableData` prop is an empty array", async () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Table tableData={[]} />);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Table: Data in the `tableData` prop must be a two dimensional array."
+    );
+  });
+
+  it("logs a warning when the columns in each `tableData` row are not identical", async () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Table tableData={tableDataUneven} columnHeaders={columnHeaders} />);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Table: The number of columns in each row of the data table are not identical. " +
+        "The `Table` component may not render properly."
+    );
+  });
+
+  it("logs a warning when the column headers `columnHeaders` is not equal the number of columns in the data table", async () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Table tableData={tableData} columnHeaders={columnHeadersUneven} />);
+    expect(warn).toHaveBeenCalledWith(
+      "NYPL Reservoir Table: The number of column headers in the `columnHeaders` prop is not equal " +
+        "to the number of columns in the data table. " +
+        "The `Table` component may not render properly."
+    );
+  });
+
+  it("renders JSX elements from the data array", () => {
+    render(
+      <Table
+        columnHeaders={characterHeaders}
+        id="jsx-example"
+        tableData={charactersData}
+      />
+    );
+    expect(screen.getAllByRole("img")).toHaveLength(3);
+  });
+
+  it("renders the UI snapshot correctly", () => {
+    const basic = renderer
+      .create(<Table id="basic" tableData={tableData} />)
+      .toJSON();
+    const withCaption = renderer
+      .create(
+        <Table
+          id="withCaption"
+          tableData={tableData}
+          titleText="this is the caption"
+        />
+      )
+      .toJSON();
+    const withHeaders = renderer
+      .create(
+        <Table
+          columnHeaders={columnHeaders}
+          id="withHeaders"
+          tableData={tableData}
+          titleText="this is the caption"
+        />
+      )
+      .toJSON();
+    const withRowHeaders = renderer
+      .create(
+        <Table
+          columnHeaders={columnHeaders}
+          id="withHeaders"
+          tableData={tableData}
+          titleText="this is the caption"
+          useRowHeaders
+        />
+      )
+      .toJSON();
+    const withCustomHeaderColors = renderer
+      .create(
+        <Table
+          columnHeadersBackgroundColor="var(--nypl-colors-ui-link-primary)"
+          columnHeadersTextColor="var(--nypl-colors-ui-white)"
+          columnHeaders={columnHeaders}
+          id="withHeaders"
+          tableData={tableData}
+          titleText="this is the caption"
+          useRowHeaders
+        />
+      )
+      .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Table
+          id="chakra"
+          tableData={tableData}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Table id="props" tableData={tableData} data-testid="props" />)
+      .toJSON();
+    const withJSXData = renderer
+      .create(
+        <Table
+          columnHeaders={characterHeaders}
+          id="jsx-example"
+          tableData={charactersData}
+        />
+      )
+      .toJSON();
+
+    expect(basic).toMatchSnapshot();
+    expect(withCaption).toMatchSnapshot();
+    expect(withHeaders).toMatchSnapshot();
+    expect(withRowHeaders).toMatchSnapshot();
+    expect(withCustomHeaderColors).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+    expect(withJSXData).toMatchSnapshot();
+  });
+});

package/src/components/Table/Table.tsx

@@ -0,0 +1,152 @@
+import {
+  chakra,
+  Table as ChakraTable,
+  TableCaption as ChakraTableCaption,
+  Tbody as ChakraTbody,
+  Thead as ChakraTHead,
+  Td as ChakraTd,
+  Th as ChakraTh,
+  Tr as ChakraTr,
+  useMultiStyleConfig,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+interface CustomColors {
+  backgroundColor?: string;
+  color?: string;
+}
+export interface TableProps {
+  /** Additional class name for the `Table` component. */
+  className?: string;
+  /** Array of string values used to populate the `Table` column headers. */
+  columnHeaders?: string[];
+  /** Hex value to set the background color of the column headers. */
+  columnHeadersBackgroundColor?: string;
+  /** Hex value to set the text color of the column headers. */
+  columnHeadersTextColor?: string;
+  /** ID that other components can cross reference for accessibility purposes. */
+  id?: string;
+  /** If true, a border will be displayed between each row in the `Table`
+   * component. The default value is false. */
+  showRowDividers?: boolean;
+  /** Two-dimensional array used to populate the table rows. */
+  tableData: (string | JSX.Element)[][];
+  /** Displays `Table` title element. */
+  titleText?: string;
+  /** If true, the first cell of each row in the `Table` component will be
+   * visually styled as a header. The default value is false */
+  useRowHeaders?: boolean;
+}
+
+/**
+ * Basic `Table` component used to organize and display tabular data in
+ * rows and columns.
+ */
+export const Table = chakra((props: React.PropsWithChildren<TableProps>) => {
+  const {
+    className,
+    columnHeaders = [],
+    columnHeadersBackgroundColor,
+    columnHeadersTextColor,
+    id,
+    showRowDividers = false,
+    tableData,
+    titleText,
+    useRowHeaders = false,
+    ...rest
+  } = props;
+  const customColors: CustomColors = {};
+
+  columnHeadersBackgroundColor &&
+    (customColors["backgroundColor"] = columnHeadersBackgroundColor);
+  columnHeadersTextColor && (customColors["color"] = columnHeadersTextColor);
+
+  const styles = useMultiStyleConfig("CustomTable", {
+    columnHeadersTextColor,
+    showRowDividers,
+    useRowHeaders,
+  });
+
+  const tableCaption = titleText && (
+    <ChakraTableCaption>{titleText}</ChakraTableCaption>
+  );
+
+  const columnHeadersElems = columnHeaders?.length > 0 && (
+    <ChakraTHead>
+      <ChakraTr>
+        {columnHeaders.map((child, key) => (
+          <ChakraTh key={key} scope="col" sx={customColors}>
+            {child}
+          </ChakraTh>
+        ))}
+      </ChakraTr>
+    </ChakraTHead>
+  );
+
+  /**
+   * This renders a normal `tbody` DOM element structure if the `tableData`
+   * passed is a two-dimensional array. This is to render the appropriate
+   * row and column structure for a table.
+   */
+  const tableBodyElems = () => {
+    if (
+      !Array.isArray(tableData) ||
+      tableData.length <= 0 ||
+      tableData[0].constructor !== Array
+    ) {
+      console.warn(
+        "NYPL Reservoir Table: Data in the `tableData` prop must be a two dimensional array."
+      );
+      return null;
+    }
+
+    for (let i = 1; i < tableData.length; i++) {
+      if (tableData[0].length !== tableData[i].length) {
+        console.warn(
+          "NYPL Reservoir Table: The number of columns in each row of the data table are not identical. " +
+            "The `Table` component may not render properly."
+        );
+        break;
+      }
+    }
+
+    return (
+      <ChakraTbody>
+        {tableData.map((row, index) => (
+          <ChakraTr key={index}>
+            {row.map((column, key) =>
+              key === 0 && useRowHeaders ? (
+                <ChakraTh scope="row" key={key}>
+                  {column}
+                </ChakraTh>
+              ) : (
+                <ChakraTd key={key}>{column}</ChakraTd>
+              )
+            )}
+          </ChakraTr>
+        ))}
+      </ChakraTbody>
+    );
+  };
+
+  for (let j = 0; j < tableData.length; j++) {
+    if (columnHeaders.length !== tableData[j].length) {
+      console.warn(
+        "NYPL Reservoir Table: The number of column headers in the `columnHeaders` prop is not equal " +
+          "to the number of columns in the data table. " +
+          "The `Table` component may not render properly."
+      );
+      break;
+    }
+  }
+
+  return (
+    <ChakraTable id={id} sx={styles} className={className} {...rest}>
+      {tableCaption}
+      {columnHeadersElems}
+      {tableBodyElems()}
+    </ChakraTable>
+  );
+});
+
+export default Table;