@nypl/design-system-react-components 0.25.13 → 0.27.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";
 
@@ -41,7 +41,20 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.13`  |
+| 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,6 +104,8 @@ export const animalCrossing = [
   },
 ];
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Tabs with Controls"
@@ -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.

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

@@ -277,6 +277,22 @@ describe("Tabs", () => {
     const basic = renderer
       .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();
   });
 });

package/src/components/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
-import * as React from "react";
 import {
   Box,
+  chakra,
   Tab,
   TabList,
   TabPanels,
@@ -8,8 +8,8 @@ import {
   Tabs as ChakraTabs,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
-import generateUUID from "../../helpers/generateUUID";
 import { IconNames, IconRotationTypes, IconSizes } from "../Icons/IconTypes";
 import Icon from "../Icons/Icon";
 import { ButtonTypes } from "../Button/ButtonTypes";
@@ -139,14 +139,15 @@ const getElementsFromChildren = (children): TabPanelProps => {
  * Renders Chakra's `Tab` component with specific variants, props,
  * and controlled styling.
  */
-function Tabs(props: React.PropsWithChildren<TabsProps>) {
+export const Tabs = chakra((props: React.PropsWithChildren<TabsProps>) => {
   const {
     children,
     defaultIndex = 0,
-    id = generateUUID(),
+    id,
     onChange,
     tabsData,
     useHash = false,
+    ...rest
   } = props;
   const styles = useMultiStyleConfig("Tabs", {});
   // Just an estimate of the tab width for the mobile carousel.
@@ -238,6 +239,7 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
       isLazy
       onChange={onChange}
       variant="enclosed"
+      {...rest}
     >
       <Box
         __css={styles.tablistWrapper}
@@ -256,6 +258,8 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
       {panels}
     </ChakraTabs>
   );
-}
+});
 
-export { Tabs, TabList, Tab, TabPanels, TabPanel };
+// Tabs is also exported above so the props can display in Storybook.
+export { TabList, Tab, TabPanels, TabPanel };
+export default Tabs;