@nypl/design-system-react-components 0.25.11 → 0.26.0

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

@@ -2,7 +2,7 @@
 
 exports[`Table renders the UI snapshot correctly 1`] = `
 <table
-  className="chakra-table css-0"
+  className="chakra-table css-1xdhyk6"
   id="basic"
   role="table"
 >
@@ -203,7 +203,7 @@ exports[`Table renders the UI snapshot correctly 1`] = `
 
 exports[`Table renders the UI snapshot correctly 2`] = `
 <table
-  className="chakra-table css-0"
+  className="chakra-table css-1xdhyk6"
   id="withCaption"
   role="table"
 >
@@ -409,7 +409,7 @@ exports[`Table renders the UI snapshot correctly 2`] = `
 
 exports[`Table renders the UI snapshot correctly 3`] = `
 <table
-  className="chakra-table css-0"
+  className="chakra-table css-1xdhyk6"
   id="withHeaders"
   role="table"
 >
@@ -666,7 +666,7 @@ exports[`Table renders the UI snapshot correctly 3`] = `
 
 exports[`Table renders the UI snapshot correctly 4`] = `
 <table
-  className="chakra-table css-0"
+  className="chakra-table css-1xdhyk6"
   id="withHeaders"
   role="table"
 >
@@ -923,7 +923,7 @@ exports[`Table renders the UI snapshot correctly 4`] = `
 
 exports[`Table renders the UI snapshot correctly 5`] = `
 <table
-  className="chakra-table css-0"
+  className="chakra-table css-1xdhyk6"
   id="withHeaders"
   role="table"
 >
@@ -1177,3 +1177,406 @@ exports[`Table renders the UI snapshot correctly 5`] = `
   </tbody>
 </table>
 `;
+
+exports[`Table renders the UI snapshot correctly 6`] = `
+<table
+  className="chakra-table css-kle7zy"
+  id="chakra"
+  role="table"
+>
+  <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"
+      >
+        Tanukichi
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Main Street
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        New York
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        23458
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        NY
+      </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"
+      >
+        Shizue
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Walnut Street
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        New York
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        23458
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        NY
+      </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"
+      >
+        Totakeke
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Niper Place
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        New York
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        98765
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        NY
+      </td>
+    </tr>
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Sonny
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Resetti
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Risetto san
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Village Road
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        New York
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        09873
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        NY
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Table renders the UI snapshot correctly 7`] = `
+<table
+  className="chakra-table css-1xdhyk6"
+  data-testid="props"
+  id="props"
+  role="table"
+>
+  <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"
+      >
+        Tanukichi
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Main Street
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        New York
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        23458
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        NY
+      </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"
+      >
+        Shizue
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Walnut Street
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        New York
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        23458
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        NY
+      </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"
+      >
+        Totakeke
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Niper Place
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        New York
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        98765
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        NY
+      </td>
+    </tr>
+    <tr
+      className="css-0"
+      role="row"
+    >
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Sonny
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Resetti
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Risetto san
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        Village Road
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        New York
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        09873
+      </td>
+      <td
+        className="css-0"
+        role="gridcell"
+      >
+        NY
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;

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

@@ -7,7 +7,7 @@ import {
 } from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
-import { Tabs, TabList, Tab, TabPanels, TabPanel } from "./Tabs";
+import Tabs, { TabList, Tab, TabPanels, TabPanel } from "./Tabs";
 import { getCategory } from "../../utils/componentCategories";
 import DSProvider from "../../theme/provider";
 
@@ -24,12 +24,12 @@ import DSProvider from "../../theme/provider";
   }}
   argTypes={{
     children: { table: { disable: true } },
-    contentData: { control: false },
     defaultIndex: {
       table: { defaultValue: { summary: 0 } },
     },
     id: { control: false },
     onChange: { control: false },
+    tabsData: { control: false },
     useHash: {
       table: { defaultValue: { summary: false } },
     },
@@ -41,7 +41,20 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.11`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Composing with a Data Object](#composing-with-a-data-object)
+- [Responsive Mobile Carousel](#responsive-mobile-carousel)
+- [With Callback Event Function](#with-callback-event-function)
+- [With URL Hash Option](#with-url-hash-option)
+- [With Children Components](#with-children-components)
+
+## Overview
 
 <Description of={Tabs} />
 
@@ -91,11 +104,13 @@ export const animalCrossing = [
   },
 ];
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Tabs with Controls"
     args={{
-      contentData: animalCrossing,
+      tabsData: animalCrossing,
       defaultIndex: 0,
       id: "tabs-id",
       onChange: undefined,
@@ -108,6 +123,40 @@ export const animalCrossing = [
 
 <ArgsTable story="Tabs with Controls" />
 
+## Accessibility
+
+Using the DS `Tabs` component renders HTML for button tabs and panels that are
+associated with each other. In order to simplify the content and reduce cognitive
+load for a user, we recommend to not use more than a six (6) button tabs and
+panels. Likewise, button tab labels should be clear and concise. Do not use
+icons for tab labels.
+
+The `Tabs` component is fully accessible through keyboard usage. The initial focus
+on the UI is set on the first tab. To move between tabs, use the left and right
+key arrows. The `home` key can be used to navigate to the first tab and the `end`
+key can be used to navigate to the last tab. To move from a tab to its panel,
+use the `tab` key. Likewise, use the `tab + shift` key combination to move from
+the panel to its tab. A user cannot navigate between panels; they must navigate
+through the tabs.
+
+This `Tabs` component is implemented with Chakra UI and this library handles the
+appropriate `aria-selected` and `aria-controls` attributes for the tabs, the
+related `aria-labelledby` and `id` attributes for the panels, and the `tablist`,
+`tab`, and `tabpanel` roles for the relevant HTML elements.
+
+### Mobile Carousel
+
+When viewing the `Tabs` component on a narrow screen, an additional carousel
+interface is wrapped around the button tabs. "Next" and "Previous" arrow buttons
+slide the view of the tabs to the left and right, but all initial functionality
+for the `Tabs` component doesn't change.
+
+Resources:
+
+- [Inclusive Design Tabbed Interfaces](https://inclusive-components.design/tabbed-interfaces/)
+- [W3C WAI Example of Tabs with Automatic Activation](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)
+- [Chakra UI Tabs](https://chakra-ui.com/docs/components/disclosure/tabs)
+
 ## Composing with a Data Object
 
 _Note: this is the recommended approach._
@@ -116,7 +165,7 @@ We recommended passing in the data for the `Tabs` component through the `data`
 prop. This allows the consumer to pass in well-formed data and always generate
 the correct DOM.
 
-Internally in the DS `Tabs` component:
+Internally in the Reservoir Design System (DS) `Tabs` component:
 
 - we map through the data array and generate the appropriate components needed
   for the layout.
@@ -154,12 +203,12 @@ const animalCrossing = [
 ];
 
 // ...
-<Tabs contentData={animalCrossing} />;
+<Tabs tabsData={animalCrossing} />;
 ```
 
 ## Responsive Mobile Carousel
 
-For both, the `contentData` prop approach and the children component approach
+For both, the `tabsData` prop approach and the children component approach
 (described below in this document), the mobile carousel feature is built. This
 adds "previous" and "next" arrows in the tab list for users to scroll through
 all the tabs while the panel stays static.
@@ -183,7 +232,7 @@ export const onChange = (value) => {
 };
 
 // ...
-<Tabs contentData={animalCrossing} onChange={onChange} />;
+<Tabs tabsData={animalCrossing} onChange={onChange} />;
 ```
 
 export const onChange = (value) => {
@@ -192,7 +241,7 @@ export const onChange = (value) => {
 
 <Canvas>
   <Story name="With Callback Event Function">
-    <Tabs contentData={animalCrossing} onChange={onChange} />
+    <Tabs tabsData={animalCrossing} onChange={onChange} />
   </Story>
 </Canvas>
 
@@ -203,7 +252,7 @@ To enable this, set the `useHash` prop to true.
 
 <Canvas>
   <Story name="With URL Hash Option">
-    <Tabs contentData={animalCrossing} useHash={true} />
+    <Tabs tabsData={animalCrossing} useHash={true} />
   </Story>
 </Canvas>
 

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

@@ -36,7 +36,7 @@ export const animalCrossing = [
 
 describe("Tabs Accessibility", () => {
   it("passes axe accessibility test with the data prop", async () => {
-    const { container } = render(<Tabs contentData={animalCrossing} />);
+    const { container } = render(<Tabs tabsData={animalCrossing} />);
     expect(await axe(container)).toHaveNoViolations();
   });
 
@@ -121,7 +121,7 @@ describe("Tabs", () => {
   });
 
   it("renders all tabs but only one visible panel at a time with data prop", () => {
-    render(<Tabs contentData={animalCrossing} />);
+    render(<Tabs tabsData={animalCrossing} />);
     expect(getTabByName("Tom Nook")).toBeInTheDocument();
     expect(getTabByName("Isabelle")).toBeInTheDocument();
     expect(getTabByName("K.K. Slider")).toBeInTheDocument();
@@ -137,7 +137,7 @@ describe("Tabs", () => {
   });
 
   it("switches between tabs", () => {
-    render(<Tabs contentData={animalCrossing} />);
+    render(<Tabs tabsData={animalCrossing} />);
     const isabelleTab = getTabByName("Isabelle");
     const kkSliderTab = getTabByName("K.K. Slider");
 
@@ -179,7 +179,7 @@ describe("Tabs", () => {
   });
 
   it("renders the specified initial index value", () => {
-    render(<Tabs contentData={animalCrossing} defaultIndex={2} />);
+    render(<Tabs tabsData={animalCrossing} defaultIndex={2} />);
     let tomTab = getTabByName("Tom Nook");
     let isabelleTab = getTabByName("Isabelle");
     let kkSliderTab = getTabByName("K.K. Slider");
@@ -193,7 +193,7 @@ describe("Tabs", () => {
     let selectedIndex = 0;
     const onChange = (index) => (selectedIndex = index);
 
-    render(<Tabs contentData={animalCrossing} onChange={onChange} />);
+    render(<Tabs tabsData={animalCrossing} onChange={onChange} />);
 
     const tomTab = getTabByName("Tom Nook");
     const isabelleTab = getTabByName("Isabelle");
@@ -213,14 +213,14 @@ describe("Tabs", () => {
     const warn = jest.spyOn(console, "warn");
     render(<Tabs />);
     expect(warn).toHaveBeenCalledWith(
-      "Tabs: Pass data in the `data` props or as children."
+      "NYPL Reservoir Tabs: Pass data in the `contentData` props or as children."
     );
   });
 
   it("should throw a warning when both the 'data' prop and children are passed", () => {
     const warn = jest.spyOn(console, "warn");
     render(
-      <Tabs contentData={animalCrossing}>
+      <Tabs tabsData={animalCrossing}>
         <TabList>
           <Tab>Tom Nook</Tab>
           <Tab>Isabelle</Tab>
@@ -247,7 +247,8 @@ describe("Tabs", () => {
       </Tabs>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Tabs: Only pass children or data in the `data` props but not both."
+      "NYPL Reservoir Tabs: Only pass children or data in the `contentData` " +
+        "prop. Do not pass both."
     );
   });
 
@@ -255,7 +256,7 @@ describe("Tabs", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <Tabs
-        contentData={[
+        tabsData={[
           ...animalCrossing,
           ...[
             { label: "Another character 1", content: "Text" },
@@ -267,14 +268,31 @@ describe("Tabs", () => {
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "Tabs: We recommend to use no more than six tabs. If more than six tabs are needed, consider other navigational patterns."
+      "NYPL Reservoir Tabs: it is recommended to use no more than six tabs. If " +
+        "more than six tabs are needed, consider other navigational patterns."
     );
   });
 
   it("renders the UI snapshot correctly", () => {
     const basic = renderer
-      .create(<Tabs contentData={animalCrossing} id="basic" />)
+      .create(<Tabs tabsData={animalCrossing} id="basic" />)
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Tabs
+          tabsData={animalCrossing}
+          id="chakra"
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(<Tabs tabsData={animalCrossing} id="props" data-testid="props" />)
+      .toJSON();
+
     expect(basic).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });