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

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

@@ -2,7 +2,7 @@
 
 exports[`Tabs renders the UI snapshot correctly 1`] = `
 <div
-  className="chakra-tabs css-0"
+  className="chakra-tabs css-1xdhyk6"
   id="basic"
 >
   <div
@@ -10,7 +10,7 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
   >
     <button
       aria-label="Previous"
-      className="chakra-button css-fg6w03"
+      className="chakra-button css-1fhylxi"
       data-testid="button"
       id="tabs-previous-basic"
       onClick={[Function]}
@@ -18,7 +18,7 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="tabs-previous-icon-basic"
         role="img"
@@ -105,7 +105,7 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
     </div>
     <button
       aria-label="Next"
-      className="chakra-button css-1whvqek"
+      className="chakra-button css-12jygyh"
       data-testid="button"
       id="tabs-next-basic"
       onClick={[Function]}
@@ -113,7 +113,7 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
     >
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="tabs-next-icon-basic"
         role="img"
@@ -193,3 +193,392 @@ exports[`Tabs renders the UI snapshot correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`Tabs renders the UI snapshot correctly 2`] = `
+<div
+  className="chakra-tabs css-kle7zy"
+  id="chakra"
+>
+  <div
+    className="css-l3f8vc"
+  >
+    <button
+      aria-label="Previous"
+      className="chakra-button css-1fhylxi"
+      data-testid="button"
+      id="tabs-previous-chakra"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="tabs-previous-icon-chakra"
+        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="chakra--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="chakra--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Tom Nook
+          </button>
+          <button
+            aria-controls="chakra--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="chakra--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Isabelle
+          </button>
+          <button
+            aria-controls="chakra--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="chakra--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-12jygyh"
+      data-testid="button"
+      id="tabs-next-chakra"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="tabs-next-icon-chakra"
+        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="chakra--tab-0"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      hidden={false}
+      id="chakra--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="chakra--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="chakra--tabpanel-1"
+      role="tabpanel"
+      tabIndex={0}
+    />
+    <div
+      aria-labelledby="chakra--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="chakra--tabpanel-2"
+      role="tabpanel"
+      tabIndex={0}
+    />
+  </div>
+</div>
+`;
+
+exports[`Tabs renders the UI snapshot correctly 3`] = `
+<div
+  className="chakra-tabs css-1xdhyk6"
+  data-testid="props"
+  id="props"
+>
+  <div
+    className="css-l3f8vc"
+  >
+    <button
+      aria-label="Previous"
+      className="chakra-button css-1fhylxi"
+      data-testid="button"
+      id="tabs-previous-props"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="tabs-previous-icon-props"
+        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="props--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="props--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Tom Nook
+          </button>
+          <button
+            aria-controls="props--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="props--tab--1"
+            onClick={[Function]}
+            onFocus={[Function]}
+            role="tab"
+            tabIndex={-1}
+            type="button"
+          >
+            Isabelle
+          </button>
+          <button
+            aria-controls="props--tabpanel--1"
+            aria-selected={false}
+            className="chakra-tabs__tab css-abpfcx"
+            id="props--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-12jygyh"
+      data-testid="button"
+      id="tabs-next-props"
+      onClick={[Function]}
+      type="button"
+    >
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-1grhd2q"
+        focusable={false}
+        id="tabs-next-icon-props"
+        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="props--tab-0"
+      className="chakra-tabs__tab-panel css-sjt5nk"
+      hidden={false}
+      id="props--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="props--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="props--tabpanel-1"
+      role="tabpanel"
+      tabIndex={0}
+    />
+    <div
+      aria-labelledby="props--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="props--tabpanel-2"
+      role="tabpanel"
+      tabIndex={0}
+    />
+  </div>
+</div>
+`;

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

@@ -60,46 +60,18 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.3.6`    |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
 
 ## Table of Contents
 
-- [Accessibility for TemplateAppContainer](#accessibility-for-templateappcontainer)
-- [TemplateAppContainer Component](#templateappcontainer-component)
-- [TemplateAppContainer Props](#templateappcontainer-props)
-- [Template Children Components](#template-children-components)
-- [Template Children Props](#template-children-props)
+- [TemplateAppContainer Overview](#templateappcontainer-overview)
+- [TemplateAppContainer Component Props](#templateappcontainer-component-props)
+- [TemplateAppContainer Accessibility](#templateappcontainer-accessibility)
+- [Template Children Overview](#template-children-overview)
+- [Template Children Component Props](#template-children-component-props)
 - [Full Example with Template Children Components](#full-example-with-template-children-components)
 
-## Accessibility
-
-**The `TemplateAppContainer` component is the recommended way to render the entire
-application.** Therefore, this accessibility section is specifically for the
-`TemplateAppContainer` but the same rules apply to the individual "Template"
-components.
-
-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.
-
-The `TemplateAppContainer` component renders a full DOM and one of the children
-is the `main` HTML element with a default "id" of `"mainContent"`. This should
-be used as the anchor element that the skip navigation link points to. As of
-v0.25.13, the consuming application is responsible for adding the skip
-navigation feature to the application. If your application is using the current
-NYPL Header, it already contains the skip navigation feature but make sure it is
-pointing to the correct anchor element.
-
-Resources
-
-- [W3C Aria Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/complementary.html)
-- [Digital A11y Role=Complementary](https://www.digitala11y.com/complementary-role/)
-- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
-- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)
-
-## TemplateAppContainer Component
+## TemplateAppContainer Overview
 
 <Description of={TemplateAppContainer} />
 
@@ -138,7 +110,7 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
 />;
 ```
 
-## TemplateAppContainer Props
+## TemplateAppContainer Component Props
 
 <Canvas>
   <Story
@@ -186,13 +158,45 @@ import { TemplateAppContainer } from "@nypl/design-system-react-components";
 
 <ArgsTable story="TemplateAppContainer Component" />
 
-## Template Children Components
+## TemplateAppContainer Accessibility
+
+**The `TemplateAppContainer` component is the recommended way to render the entire
+application.** Therefore, this accessibility section is specifically for the
+`TemplateAppContainer` but the same rules apply to the individual "Template"
+components.
+
+The `TemplateAppContainer` component renders the header as a `<header>` element,
+the content as a `<main>` element, and the footer as a `<footer>` element.
+
+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.
+
+The `TemplateAppContainer` component renders a full DOM and one of the children
+is the `main` HTML element with a default "id" of `"mainContent"`. This should
+be used as the anchor element that the skip navigation link points to. As of
+v0.25.13, the consuming application is responsible for adding the skip
+navigation feature to the application. If your application is using the current
+NYPL Header, it already contains the skip navigation feature but make sure it is
+pointing to the correct anchor element.
+
+Resources
+
+- [W3C Aria Landmarks Example](https://www.w3.org/TR/wai-aria-practices/examples/landmarks/complementary.html)
+- [Digital A11y Role=Complementary](https://www.digitala11y.com/complementary-role/)
+- [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
+- [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)
+
+## Template Children Overview
 
-The DS also provides a set of "template" components that work together to
-render a consistent mobile and desktop layout. More information on individual
-components and how they should be composed can be found below. Even though these
-component are available for use, we recommend using the `TemplateAppContainer`
-component and passing down children component as props as needed.
+The Reservoir Design System (DS) also provides a set of "template" components 
+that work together to render a consistent mobile and desktop layout. More 
+information on individual components and how they should be composed can be 
+found below. Even though these component are available for use, we recommend 
+using the `TemplateAppContainer` component and passing down children component 
+as props as needed.
 
 Basic "template" components structure:
 
@@ -237,7 +241,7 @@ import {
 </Template>
 ```
 
-## Template Children Props
+## Template Children Component Props
 
 <Canvas>
   <Story

package/src/components/Template/Template.test.tsx

@@ -269,8 +269,41 @@ describe("Template components", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <TemplateAppContainer
+          aboveHeader={aboveHeader}
+          header={header}
+          breakout={breakout}
+          sidebar={sidebar}
+          contentTop={contentTop}
+          contentSidebar={contentSidebar}
+          contentPrimary={contentPrimary}
+          footer={footer}
+          p="20px"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <TemplateAppContainer
+          aboveHeader={aboveHeader}
+          header={header}
+          breakout={breakout}
+          sidebar={sidebar}
+          contentTop={contentTop}
+          contentSidebar={contentSidebar}
+          contentPrimary={contentPrimary}
+          footer={footer}
+          data-testid="props"
+        />
+      )
+      .toJSON();
 
     expect(templateComponents).toMatchSnapshot();
     expect(singleComponent).toMatchSnapshot();
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });