@nypl/design-system-react-components 0.25.9 → 0.25.12

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.25.0`   |
+| Latest            | `0.25.11`  |
 
 <Description of={Tabs} />
 

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' prop 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 {
@@ -91,8 +97,8 @@ const getElementsFromContentData = (data, useHash) => {
   });
 
   return {
-    tabs: <TabList>{tabs}</TabList>,
-    panels: <TabPanels>{panels}</TabPanels>,
+    tabs: [<TabList key="list">{tabs}</TabList>],
+    panels: [<TabPanels key="panels">{panels}</TabPanels>],
   };
 };
 
@@ -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 === 0 || panels.length === 0) {
+    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>
+`;

package/src/components/Template/Template.stories.mdx

@@ -29,6 +29,7 @@ import Notification, {
 import Placeholder from "../Placeholder/Placeholder";
 import {
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,
@@ -49,7 +50,7 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11982%3A47778",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=36835%3A26688",
     },
   }}
 />
@@ -59,14 +60,25 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.3.6`    |
-| Latest            | `0.25.9`   |
+| Latest            | `0.25.12`  |
 
 ## TemplateAppContainer Component
 
 <Description of={TemplateAppContainer} />
 
-If you have a custom `Footer` component that _already_ renders an HTML `<footer>`
-element, set `renderFooterElement` to false so only one `<footer>` element is rendered.
+If you have a custom `Header` component that _already_ renders an HTML `<header>`
+element, set `renderHeaderElement` to false so only one `<header>` element is
+rendered.
+
+Likewise, if you have a custom `Footer` component that _already_ renders an HTML
+`<footer>` element, set `renderFooterElement` to false so only one `<footer>`
+element is rendered.
+
+If you need to render an alert or notification at the top of the page with an
+`aside` HTML element or HTML element with the `role="complementary"` attribute,
+then pass that alert or notification component to the `aboveHeader` prop. These
+elements should _not_ be rendered in the `header` HTML section since that's an
+accessibility violation.
 
 <b>This is the recommended way to render an app page template.</b>
 
@@ -74,6 +86,7 @@ element, set `renderFooterElement` to false so only one `<footer>` element is re
 import { TemplateAppContainer } from "@nypl/design-system-react-components";
 
 <TemplateAppContainer
+  aboveHeader={<Placeholder variant="short">Above Header</Placeholder>}
   header={<Placeholder variant="short">NYPL Header</Placeholder>}
   breakout={
     <>
@@ -98,6 +111,7 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
   <Story
     name="TemplateAppContainer Component"
     args={{
+      aboveHeader: <Placeholder variant="short">Above Header</Placeholder>,
       breakout: (
         <>
           <Placeholder variant="short">Breadcrumbs</Placeholder>
@@ -116,8 +130,10 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
       header: <Placeholder variant="short">NYPL Header</Placeholder>,
       sidebar: "left",
       renderFooterElement: true,
+      renderHeaderElement: true,
     }}
     argTypes={{
+      aboveHeader: { control: false },
       breakout: { control: false },
       contentPrimary: { control: false },
       contentSidebar: { control: false },
@@ -149,6 +165,7 @@ Basic "template" components structure:
 ```
 import {
   Template,
+  TemplateAboveHeader,
   TemplateHeader,
   TemplateBreakout,
   TemplateContent,
@@ -160,6 +177,9 @@ import {
 
 
 <Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
   <TemplateHeader>
     // ...
     <TemplateBreakout>
@@ -190,6 +210,7 @@ import {
       sidebar: "left",
     }}
     argTypes={{
+      aboveHeader: { table: { disable: true } },
       breakout: { table: { disable: true } },
       contentPrimary: { table: { disable: true } },
       contentSidebar: { table: { disable: true } },
@@ -201,6 +222,9 @@ import {
   >
     {(args) => (
       <Template>
+        <TemplateAboveHeader>
+          <Placeholder variant="short">Above Header</Placeholder>
+        </TemplateAboveHeader>
         <TemplateHeader>
           <Placeholder variant="short">NYPL Header</Placeholder>
           <TemplateBreakout>
@@ -242,6 +266,7 @@ import {
 The components consist of:
 
 - `Template`
+- `TemplateAboveHeader`
 - `TemplateHeader`
 - `TemplateBreakout`
 - `TemplateContent`
@@ -260,10 +285,25 @@ The components consist of:
 
 <Description of={Template} />
 
+#### TemplateAboveHeader
+
+```
+<Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
+<Template>
+```
+
+<Description of={TemplateAboveHeader} />
+
 #### TemplateHeader
 
 ```
 <Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
   <TemplateHeader>
     // ...
   </TemplateHeader>
@@ -276,6 +316,9 @@ The components consist of:
 
 ```
 <Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
   <TemplateHeader>
     <TemplateBreakout>
       // ...
@@ -303,6 +346,9 @@ The components consist of:
 
 ```
 <Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
   <TemplateHeader>...</TemplateHeader>
   <TemplateContent>
     <TemplateContentTop>
@@ -318,6 +364,9 @@ The components consist of:
 
 ```
 <Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
   <TemplateHeader>...</TemplateHeader>
   <TemplateContent>
     <TemplateContentPrimary>
@@ -333,6 +382,9 @@ The components consist of:
 
 ```
 <Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
   <TemplateHeader>...</TemplateHeader>
   <TemplateContent sidebar="right">
     <TemplateContentPrimary>
@@ -345,6 +397,9 @@ The components consist of:
 <Template>
 
 <Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
   <TemplateHeader>...</TemplateHeader>
   <TemplateContent sidebar="left">
     <TemplateContentSidebar>
@@ -363,6 +418,9 @@ The components consist of:
 
 ```
 <Template>
+  <TemplateAboveHeader>
+    // ...
+  </TemplateAboveHeader>
   <TemplateHeader>
     // ...
   </TemplateHeader>
@@ -425,6 +483,23 @@ This is best viewed in the Storybook "Canvas" and not "Docs" section.
 <Canvas>
   <Story name="Full Example with Template Children Components">
     <Template>
+      <TemplateAboveHeader>
+        <Notification
+          notificationType={NotificationTypes.Standard}
+          notificationHeading="Standard Notification"
+          notificationContent={
+            <>
+              This is an "announcement" Notification with a heading. Cras mattis
+              consectetur purus sit amet fermentum. Maecenas faucibus mollis
+              interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at
+              eros. Cum sociis natoque penatibus et magnis dis parturient
+              montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue
+              laoreet rutrum faucibus dolor auctor.
+            </>
+          }
+          showIcon={false}
+        />
+      </TemplateAboveHeader>
       <TemplateHeader>
         <TemplateBreakout>
           <Breadcrumbs