@nypl/design-system-react-components 0.25.7 → 0.25.10

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

@@ -1,10 +1,10 @@
 import {
-  Meta,
-  Story,
-  Canvas,
   ArgsTable,
+  Canvas,
   Description,
-} from "@storybook/addon-docs/blocks";
+  Meta,
+  Story,
+} from "@storybook/addon-docs";
 import { withDesign } from "storybook-addon-designs";
 
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "./Tabs";
@@ -18,17 +18,21 @@ import DSProvider from "../../theme/provider";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26464",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26464",
     },
     jest: ["Tabs.test.tsx"],
   }}
   argTypes={{
     children: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    data: { table: { disable: true } },
-    onChange: { table: { disable: true } },
+    contentData: { control: false },
+    defaultIndex: {
+      table: { defaultValue: { summary: 0 } },
+    },
+    id: { control: false },
+    onChange: { control: false },
+    useHash: {
+      table: { defaultValue: { summary: false } },
+    },
   }}
 />
 
@@ -37,7 +41,7 @@ import DSProvider from "../../theme/provider";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.24.0`   |
-| Latest            | `0.25.0`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Tabs} />
 
@@ -89,18 +93,20 @@ export const animalCrossing = [
 
 <Canvas withToolbar>
   <Story
-    name="Basic with props"
+    name="Tabs with Controls"
     args={{
+      contentData: animalCrossing,
       defaultIndex: 0,
+      id: "tabs-id",
+      onChange: undefined,
       useHash: false,
-      contentData: animalCrossing,
     }}
   >
     {(args) => <Tabs {...args} />}
   </Story>
 </Canvas>
 
-<ArgsTable story="Basic with props" />
+<ArgsTable story="Tabs with Controls" />
 
 ## Composing with a Data Object
 

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

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
-import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import renderer from "react-test-renderer";
 
 import { Tabs, TabList, Tab, TabPanels, TabPanel } from "./Tabs";
 
@@ -208,7 +209,15 @@ describe("Tabs", () => {
     expect(selectedIndex).toEqual(1);
   });
 
-  it("should throw warning when both the 'data' probp and children are passed", () => {
+  it("should throw a warning when no data is passed", () => {
+    const warn = jest.spyOn(console, "warn");
+    render(<Tabs />);
+    expect(warn).toHaveBeenCalledWith(
+      "Tabs: Pass data in the `data` 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}>
@@ -238,11 +247,11 @@ describe("Tabs", () => {
       </Tabs>
     );
     expect(warn).toHaveBeenCalledWith(
-      "Only pass children or data in the `data` props but not both."
+      "Tabs: Only pass children or data in the `data` props but not both."
     );
   });
 
-  it("should throw warning when more than six object tabs are passed", () => {
+  it("should throw a warning when more than six object tabs are passed", () => {
     const warn = jest.spyOn(console, "warn");
     render(
       <Tabs
@@ -258,7 +267,14 @@ describe("Tabs", () => {
       />
     );
     expect(warn).toHaveBeenCalledWith(
-      "We recommend to use no more than six tabs. If more than six tabs are needed, consider other navigational patterns."
+      "Tabs: We recommend 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" />)
+      .toJSON();
+    expect(basic).toMatchSnapshot();
+  });
 });

package/src/components/Tabs/Tabs.tsx

@@ -17,6 +17,12 @@ import Button from "../Button/Button";
 import useCarouselStyles from "../../hooks/useCarouselStyles";
 import useWindowSize from "../../hooks/useWindowSize";
 
+// Internal interface used for rendering `Tabs` tab and panel
+// elements, either from data or from children.
+interface TabPanelProps {
+  tabs: React.ReactNode[] | React.ReactNode;
+  panels: React.ReactNode[] | React.ReactNode;
+}
 // The general shape of the data object for each Tab.
 export interface TabsContentDataProps {
   label: string;
@@ -49,18 +55,18 @@ const onClickHash = (tabHash) => {
  * This returns an object with `Tab` and `TabPanel` components to rendered in
  * `TabList` and `TabPanels` components respectively.
  */
-const getElementsFromContentData = (data, useHash) => {
+const getElementsFromContentData = (data, useHash): TabPanelProps => {
   const tabs = [];
   const panels = [];
 
   if (!data?.length) {
-    return {};
+    return { tabs: [], panels: [] };
   }
 
   if (data?.length > 6) {
     console.warn(
-      "We recommend to use no more than six tabs. If more than six tabs are " +
-        "needed, consider other navigational patterns."
+      "Tabs: We recommend to use no more than six tabs. If more than six tabs " +
+        "are needed, consider other navigational patterns."
     );
   }
   data.forEach((tab, index) => {
@@ -78,8 +84,8 @@ const getElementsFromContentData = (data, useHash) => {
     if (typeof tab.content === "string") {
       tempPanel = (
         <TabPanel
-          key={index}
           dangerouslySetInnerHTML={{ __html: tab.content }}
+          key={index}
         />
       );
     } else {
@@ -100,12 +106,12 @@ const getElementsFromContentData = (data, useHash) => {
  * This returns an object with `TabList` and `TabPanels` components to help format
  * the DOM when building up the `Tabs` component using child component.
  */
-const getElementsFromChildren = (children) => {
+const getElementsFromChildren = (children): TabPanelProps => {
   const tabs = [];
   const panels = [];
 
   if (!children?.length) {
-    return {};
+    return { tabs: [], panels: [] };
   }
 
   children.forEach((child) => {
@@ -115,8 +121,8 @@ const getElementsFromChildren = (children) => {
       const childTabs = React.Children.count(child.props.children);
       if (childTabs > 6) {
         console.warn(
-          "We recommend to use no more than six tabs. If more than six tabs are " +
-            "needed, consider other navigational patterns."
+          "Tabs: We recommend to use no more than six tabs. If more than six " +
+            "tabs are needed, consider other navigational patterns."
         );
       }
     }
@@ -149,9 +155,14 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
   const mediumTabWidth = 40;
   const [tabWidth, setTabWidth] = React.useState(initTabWidth);
   const windowDimensions = useWindowSize();
-  const { tabs, panels } = contentData
+  const { tabs, panels }: any = contentData
     ? getElementsFromContentData(contentData, useHash)
     : getElementsFromChildren(children);
+
+  if (!tabs.length || !panels.length) {
+    console.warn("Tabs: Pass data in the `data` props or as children.");
+  }
+
   // `tabs` is an array for the children component approach but an object for
   // the `contentData` prop approach. We need to get the right props key value
   // to set the carousel's length.
@@ -173,34 +184,38 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
   }, [goToStart, windowDimensions.width]);
   const previousButton = (
     <Button
-      buttonType={ButtonTypes.Primary}
       attributes={{
         "aria-label": "Previous",
         ...styles.buttonArrows,
         left: "0",
       }}
+      buttonType={ButtonTypes.Primary}
+      id={`tabs-previous-${id}`}
       onClick={prevSlide}
     >
       <Icon
-        name={IconNames.Arrow}
         iconRotation={IconRotationTypes.Rotate90}
+        id={`tabs-previous-icon-${id}`}
+        name={IconNames.Arrow}
         size={IconSizes.Small}
       />
     </Button>
   );
   const nextButton = (
     <Button
-      buttonType={ButtonTypes.Primary}
       attributes={{
         "aria-label": "Next",
         ...styles.buttonArrows,
         right: "0",
       }}
+      buttonType={ButtonTypes.Primary}
+      id={`tabs-next-${id}`}
       onClick={nextSlide}
     >
       <Icon
-        name={IconNames.Arrow}
         iconRotation={IconRotationTypes.Rotate270}
+        id={`tabs-next-icon-${id}`}
+        name={IconNames.Arrow}
         size={IconSizes.Small}
       />
     </Button>
@@ -208,18 +223,18 @@ function Tabs(props: React.PropsWithChildren<TabsProps>) {
 
   if (children && contentData?.length) {
     console.warn(
-      "Only pass children or data in the `data` props but not both."
+      "Tabs: Only pass children or data in the `data` props but not both."
     );
   }
 
   return (
     <ChakraTabs
-      id={id}
-      onChange={onChange}
       defaultIndex={defaultIndex}
-      variant="enclosed"
+      id={id}
       // The following lazy loads each panel whenever it is needed.
       isLazy
+      onChange={onChange}
+      variant="enclosed"
     >
       <Box
         __css={styles.tablistWrapper}

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

@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs renders the UI snapshot correctly 1`] = `
+<div
+  className="chakra-tabs css-0"
+  id="basic"
+>
+  <div
+    className="css-l3f8vc"
+  >
+    <button
+      aria-label="Previous"
+      className="chakra-button css-fg6w03"
+      data-testid="button"
+      id="tabs-previous-basic"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="tabs-previous-icon-basic"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+    <div
+      className="css-0"
+    >
+      <div
+        className="css-16fuzwj"
+      >
+        <div
+          aria-orientation="horizontal"
+          className="chakra-tabs__tablist css-k008qs"
+          onKeyDown={[Function]}
+          role="tablist"
+        >
+          <button
+            aria-controls="basic--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="basic--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Tom Nook
+          </button>
+          <button
+            aria-controls="basic--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="basic--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Isabelle
+          </button>
+          <button
+            aria-controls="basic--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="basic--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            K.K. Slider
+          </button>
+        </div>
+      </div>
+    </div>
+    <button
+      aria-label="Next"
+      className="chakra-button css-1whvqek"
+      data-testid="button"
+      id="tabs-next-basic"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="tabs-next-icon-basic"
+        role="img"
+        title="arrow icon"
+        viewBox="0 0 24 24"
+      >
+        <g
+          stroke="currentColor"
+          strokeWidth="1.5"
+        >
+          <path
+            d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+            fill="currentColor"
+            strokeLinecap="round"
+          />
+          <circle
+            cx="12"
+            cy="12"
+            fill="none"
+            r="11.25"
+            strokeMiterlimit="10"
+          />
+        </g>
+      </svg>
+    </button>
+  </div>
+  <div
+    className="chakra-tabs__tab-panels css-8atqhb"
+  >
+    <div
+      aria-labelledby="basic--tab-0"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      hidden={false}
+      id="basic--tabpanel-0"
+      role="tabpanel"
+      tabIndex={0}
+    >
+      <p>
+        Tom Nook, 
+        <b>
+          known in Japan as Tanukichi
+        </b>
+        , is a fictional character in the Animal Crossing series who operates the village store.
+      </p>
+    </div>
+    <div
+      aria-labelledby="basic--tab-1"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "Isabelle, known as Shizue in Japan, is a fictional character from the Animal Crossing series of video games. She is a kindly Shih Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where she serves as the secretary to the player character.",
+        }
+      }
+      hidden={true}
+      id="basic--tabpanel-1"
+      role="tabpanel"
+      tabIndex={0}
+    />
+    <div
+      aria-labelledby="basic--tab-2"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "<p>Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a fictional character within the Animal Crossing franchise. One of the franchise's most popular characters, he debuted in the title Animal Crossing, and has appeared in every installment since.</p>",
+        }
+      }
+      hidden={true}
+      id="basic--tabpanel-2"
+      role="tabpanel"
+      tabIndex={0}
+    />
+  </div>
+</div>
+`;