@nypl/design-system-react-components 1.0.2 → 1.0.3-beta

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

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

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