@nypl/design-system-react-components 0.27.0 → 0.28.0

package/src/components/Table/Table.stories.mdx

@@ -7,6 +7,7 @@ import {
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
+import Image from "../Image/Image";
 import Table from "./Table";
 import DSProvider from "../../theme/provider";
 import { getCategory } from "../../utils/componentCategories";
@@ -36,7 +37,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.25.9`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 
@@ -47,6 +48,7 @@ import { getCategory } from "../../utils/componentCategories";
 - [With Row Dividers](#with-row-dividers)
 - [With Row Headers](#with-row-headers)
 - [With Custom Header Colors](#with-custom-header-colors)
+- [With JSX Elements](#with-jsx-elements)
 
 ## Overview
 
@@ -190,3 +192,85 @@ color contrast.
     />
   </DSProvider>
 </Canvas>
+
+## With JSX Elements
+
+export const characterHeaders = ["First Name", "Last Name", "Avatar"];
+export const charactersData = [
+  [
+    "Tom",
+    "Nook",
+    <Image
+      alt="Tom Nook"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "Isabelle",
+    "-",
+    ,
+    <Image
+      alt="Isabelle"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "K.K.",
+    "Slider",
+    ,
+    <Image
+      alt="K.K Slider"
+      size="small"
+      src="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+];
+
+It's possible to pass in JSX elements in the `tableData` prop.
+
+```jsx
+export const charactersData = [
+  [
+    "Tom",
+    "Nook",
+    <Image
+      alt="Tom Nook"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "Isabelle",
+    "-",
+    ,
+    <Image
+      alt="Isabelle"
+      size="small"
+      src="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+  [
+    "K.K.",
+    "Slider",
+    ,
+    <Image
+      alt="K.K Slider"
+      size="small"
+      src="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+    />,
+  ],
+];
+```
+
+<Canvas>
+  <DSProvider>
+    <Table
+      columnHeaders={characterHeaders}
+      id="jsx-example"
+      showRowDividers
+      tableData={charactersData}
+    />
+  </DSProvider>
+</Canvas>

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

@@ -3,6 +3,7 @@ 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 = [
@@ -14,7 +15,6 @@ export const columnHeaders = [
   "Zipcode",
   "State",
 ];
-
 export const tableData = [
   ["Tom", "Nook", "Tanukichi", "Main Street", "New York", "23458", "NY"],
   ["Isabelle", "-", "Shizue", "Walnut Street", "New York", "23458", "NY"],
@@ -29,6 +29,41 @@ export const tableData = [
     "NY",
   ],
 ];
+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 () => {
@@ -80,6 +115,17 @@ describe("Table", () => {
     );
   });
 
+  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} />)
@@ -140,6 +186,15 @@ describe("Table", () => {
     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();
@@ -148,5 +203,6 @@ describe("Table", () => {
     expect(withCustomHeaderColors).toMatchSnapshot();
     expect(withChakraProps).toMatchSnapshot();
     expect(withOtherProps).toMatchSnapshot();
+    expect(withJSXData).toMatchSnapshot();
   });
 });

package/src/components/Table/Table.tsx

@@ -11,6 +11,10 @@ import {
 } 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;
@@ -26,7 +30,7 @@ export interface TableProps {
    * component. The default value is false. */
   showRowDividers?: boolean;
   /** Two-dimensional array used to populate the table rows. */
-  tableData: string[][];
+  tableData: (string | JSX.Element)[][];
   /** Displays `Table` title element. */
   titleText?: string;
   /** If true, the first cell of each row in the `Table` component will be
@@ -41,7 +45,7 @@ export interface TableProps {
 export const Table = chakra((props: React.PropsWithChildren<TableProps>) => {
   const {
     className,
-    columnHeaders,
+    columnHeaders = [],
     columnHeadersBackgroundColor,
     columnHeadersTextColor,
     id,
@@ -51,8 +55,7 @@ export const Table = chakra((props: React.PropsWithChildren<TableProps>) => {
     useRowHeaders = false,
     ...rest
   } = props;
-
-  const customColors = {};
+  const customColors: CustomColors = {};
 
   columnHeadersBackgroundColor &&
     (customColors["backgroundColor"] = columnHeadersBackgroundColor);

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

@@ -1580,3 +1580,124 @@ exports[`Table renders the UI snapshot correctly 7`] = `
   </tbody>
 </table>
 `;
+
+exports[`Table renders the UI snapshot correctly 8`] = `
+<table
+  className="chakra-table css-1xdhyk6"
+  id="jsx-example"
+  role="table"
+>
+  <thead
+    className="css-0"
+  >
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <th
+        className="css-0"
+        scope="col"
+      >
+        First Name
+      </th>
+      <th
+        className="css-0"
+        scope="col"
+      >
+        Last Name
+      </th>
+      <th
+        className="css-0"
+        scope="col"
+      >
+        Avatar
+      </th>
+    </tr>
+  </thead>
+  <tbody
+    className="css-0"
+  >
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Tom
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Nook
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        <img
+          alt="Tom Nook"
+          className="css-0"
+          src="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        />
+      </td>
+    </tr>
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Isabelle
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        -
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        <img
+          alt="Isabelle"
+          className="css-0"
+          src="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        />
+      </td>
+    </tr>
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        K.K.
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Slider
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        <img
+          alt="K.K Slider"
+          className="css-0"
+          src="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+        />
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;

package/src/components/Tabs/Tabs.stories.mdx

@@ -41,7 +41,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.26.0`   |
+| Latest            | `0.28.0`   |
 
 ## Table of Contents
 

package/src/components/Tabs/Tabs.test.tsx

@@ -73,7 +73,7 @@ describe("Tabs Accessibility", () => {
 });
 
 describe("Tabs", () => {
-  const getTabByName = (name) => screen.getByRole("tab", { name });
+  const getTabByName = (name: string) => screen.getByRole("tab", { name });
 
   it("renders all tabs but only one panel at a time with children", () => {
     render(
@@ -191,7 +191,7 @@ describe("Tabs", () => {
 
   it("invokes the callback function", () => {
     let selectedIndex = 0;
-    const onChange = (index) => (selectedIndex = index);
+    const onChange = (index: number) => (selectedIndex = index);
 
     render(<Tabs tabsData={animalCrossing} onChange={onChange} />);
 

package/src/components/Tabs/Tabs.tsx

@@ -10,10 +10,8 @@ import {
 } from "@chakra-ui/react";
 import * as React from "react";
 
-import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
-import Icon from "../Icons/Icon";
-import { ButtonTypes } from "../Button/ButtonTypes";
 import Button from "../Button/Button";
+import Icon from "../Icons/Icon";
 import useCarouselStyles from "../../hooks/useCarouselStyles";
 import useWindowSize from "../../hooks/useWindowSize";
 
@@ -47,7 +45,7 @@ export interface TabsProps {
  * An internal function used to update the hash in the URL.
  * This function is only used when `useHash` is `true`.
  */
-const onClickHash = (tabHash) => {
+const onClickHash = (tabHash: string) => {
   window.location.hash = tabHash;
 };
 
@@ -55,9 +53,12 @@ const onClickHash = (tabHash) => {
  * This returns an object with `Tab` and `TabPanel` components to rendered in
  * `TabList` and `TabPanels` components respectively.
  */
-const getElementsFromData = (data, useHash): TabPanelProps => {
-  const tabs = [];
-  const panels = [];
+const getElementsFromData = (
+  data: TabsDataProps[],
+  useHash: boolean
+): TabPanelProps => {
+  const tabs: React.ReactNode[] = [];
+  const panels: React.ReactNode[] = [];
 
   if (!data?.length) {
     return { tabs: [], panels: [] };
@@ -76,7 +77,7 @@ const getElementsFromData = (data, useHash): TabPanelProps => {
       <Tab
         fontSize={["0", null, "1"]}
         key={index}
-        onClick={useHash ? () => onClickHash(`tab${index + 1}`) : null}
+        onClick={useHash ? () => onClickHash(`tab${index + 1}`) : undefined}
       >
         {tab.label}
       </Tab>
@@ -107,14 +108,14 @@ const getElementsFromData = (data, useHash): TabPanelProps => {
  * the DOM when building up the `Tabs` component using child component.
  */
 const getElementsFromChildren = (children): TabPanelProps => {
-  const tabs = [];
-  const panels = [];
+  const tabs: React.ReactNode[] = [];
+  const panels: React.ReactNode[] = [];
 
   if (!children?.length) {
     return { tabs: [], panels: [] };
   }
 
-  children.forEach((child) => {
+  children.forEach((child: JSX.Element) => {
     if (child.type === TabList || child.props.mdxType === "TabList") {
       tabs.push(child);
 
@@ -187,39 +188,37 @@ export const Tabs = chakra((props: React.PropsWithChildren<TabsProps>) => {
   }, [goToStart, windowDimensions.width]);
   const previousButton = (
     <Button
-      attributes={{
-        "aria-label": "Previous",
+      aria-label="Previous"
+      id={`tabs-previous-${id}`}
+      onClick={prevSlide}
+      __css={{
         ...styles.buttonArrows,
         left: "0",
       }}
-      buttonType={ButtonTypes.Primary}
-      id={`tabs-previous-${id}`}
-      onClick={prevSlide}
     >
       <Icon
-        iconRotation={IconRotationTypes.Rotate90}
+        iconRotation="rotate90"
         id={`tabs-previous-icon-${id}`}
-        name={IconNames.Arrow}
-        size={IconSizes.Small}
+        name="arrow"
+        size="small"
       />
     </Button>
   );
   const nextButton = (
     <Button
-      attributes={{
-        "aria-label": "Next",
+      aria-label="Next"
+      id={`tabs-next-${id}`}
+      onClick={nextSlide}
+      __css={{
         ...styles.buttonArrows,
         right: "0",
       }}
-      buttonType={ButtonTypes.Primary}
-      id={`tabs-next-${id}`}
-      onClick={nextSlide}
     >
       <Icon
-        iconRotation={IconRotationTypes.Rotate270}
+        iconRotation="rotate270"
         id={`tabs-next-icon-${id}`}
-        name={IconNames.Arrow}
-        size={IconSizes.Small}
+        name="arrow"
+        size="small"
       />
     </Button>
   );