@nypl/design-system-react-components 0.25.2 → 0.25.6

package/src/components/Accordion/Accordion.stories.mdx

@@ -8,7 +8,8 @@ import {
 import Accordion from "./Accordion";
 import { withDesign } from "storybook-addon-designs";
 import Card, { CardHeading, CardContent } from "../Card/Card";
-import { CardImageRatios, CardLayouts } from "../Card/CardTypes";
+import { CardLayouts } from "../Card/CardTypes";
+import { ImageRatios } from "../Image/ImageTypes";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import { Source } from "@storybook/addon-docs/blocks";
 import ReactDOMServer from "react-dom/server";
@@ -59,36 +60,32 @@ necessary icon, Chakra components, and styles.
     name="Basic"
     args={{
       isDefaultOpen: false,
+      contentData: [
+        {
+          label: "Tom Nook",
+          panel: (
+            <Card
+              layout={CardLayouts.Row}
+              center
+              imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
+              imageAlt="Alt text"
+              imageAspectRatio={ImageRatios.TwoByOne}
+            >
+              <CardHeading level={HeadingLevels.Four} id="heading1">
+                Tom Nook
+              </CardHeading>
+              <CardContent>
+                Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
+                character in the Animal Crossing series who operates the village
+                store.
+              </CardContent>
+            </Card>
+          ),
+        },
+      ],
     }}
   >
-    {(args) => (
-      <Accordion
-        {...args}
-        contentData={[
-          {
-            label: "Tom Nook",
-            panel: (
-              <Card
-                layout={CardLayouts.Row}
-                center
-                imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
-                imageAlt="Alt text"
-                imageAspectRatio={CardImageRatios.TwoByOne}
-              >
-                <CardHeading level={HeadingLevels.Four} id="heading1">
-                  Tom Nook
-                </CardHeading>
-                <CardContent>
-                  Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
-                  character in the Animal Crossing series who operates the
-                  village store.
-                </CardContent>
-              </Card>
-            ),
-          },
-        ]}
-      />
-    )}
+    {(args) => <Accordion {...args} />}
   </Story>
 </Canvas>
 
@@ -102,7 +99,7 @@ const contentData = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
         <CardHeading level={HeadingLevels.Four} id="heading1">
           Tom Nook
@@ -135,9 +132,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-tom">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -155,9 +152,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
           Isabelle
         </CardHeading>
         <CardContent>
@@ -177,9 +174,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
           K.K. Slider
         </CardHeading>
         <CardContent>
@@ -214,9 +211,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-tom">
           Tom Nook
         </CardHeading>
         <CardContent>
@@ -234,9 +231,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-isabelle">
           Isabelle
         </CardHeading>
         <CardContent>
@@ -256,9 +253,9 @@ export const faqContent = [
         center
         imageSrc="https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png"
         imageAlt="Alt text"
-        imageAspectRatio={CardImageRatios.TwoByOne}
+        imageAspectRatio={ImageRatios.TwoByOne}
       >
-        <CardHeading level={HeadingLevels.Four} id="heading1">
+        <CardHeading level={HeadingLevels.Four} id="heading1-kkslider">
           K.K. Slider
         </CardHeading>
         <CardContent>

package/src/components/Autosuggest/Autosuggest.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
+import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
 import Autosuggest from "react-autosuggest";
 import * as stories from "./Autosuggest.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
@@ -19,9 +19,9 @@ every input element. Since the suggestion dropdown will appear on top of page co
 we've added a min-height to make it easier to see the dropdown. This is for demonstration
 purposes only and you will not need to do this in your application.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story name="Basic" story={stories.AutosuggestLibrary} />
-</Preview>
+</Canvas>
 
 ## With custom icons
 

package/src/components/Autosuggest/Autosuggest.stories.tsx

@@ -99,6 +99,7 @@ const LibraryExample = ({ renderInputComponent }) => {
   const renderSuggestion = (suggestion) => <span>{suggestion.label}</span>;
   // Autosuggest will pass through all these props to the Input component.
   const inputProps = {
+    "aria-label": "Home Library",
     placeholder: "Type a library name",
     value,
     onChange,

package/src/components/Autosuggest/_Autosuggest.scss

@@ -25,11 +25,11 @@
 }
 
 .react-autosuggest__suggestions-container--open {
-  background-color: var(--ui-white);
+  background-color: var(--nypl-colors-ui-white);
   display: block;
   font-weight: 300;
   margin-top: -6px; // accounts for the focus ring on the input
-  outline: 1px solid var(--ui-gray-light-cool);
+  outline: 1px solid var(--nypl-colors-ui-gray-light-cool);
   position: absolute;
   width: 100%;
   z-index: 2;
@@ -43,13 +43,13 @@
 
 .react-autosuggest__suggestion {
   cursor: pointer;
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }
 
 .react-autosuggest__suggestion--highlighted {
-  background-color: var(--ui-gray-light-cool);
+  background-color: var(--nypl-colors-ui-gray-light-cool);
 }
 
 .auto-suggest-bottom {
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }

package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -22,14 +22,14 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10766%3A1031",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10766%3A1031",
     },
     jest: ["Breadcrumbs.test.tsx"],
   }}
   argTypes={{
-    id: { table: { disable: true } },
+    additionalStyles: { control: false },
     className: { table: { disable: true } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -38,7 +38,7 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.1`   |
+| Latest            | `0.25.6`   |
 
 <Description of={Breadcrumbs} />
 
@@ -76,8 +76,7 @@ The `Breadcrumbs` component is a navigation element that provides a breadcrumb p
         },
         {
           url: "#",
-          text:
-            "Great-Grandchild with the Longest Name That Will Wrap onto the Second Line of the Breadcrumb Component Under the Right Circumstances",
+          text: "Great-Grandchild with the Longest Name That Will Wrap onto the Second Line of the Breadcrumb Component Under the Right Circumstances",
         },
       ]}
     />
@@ -92,12 +91,12 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
   <Story
     name="Color Variations"
     args={{
-      colorVariant: ColorVariants.BooksAndMore,
+      colorVariant: ColorVariants.Blogs,
     }}
   >
     {(args) => (
       <>
-        <Heading level={HeadingLevels.Three}>Books and More</Heading>
+        <Heading level={HeadingLevels.Three}>Blogs</Heading>
         <Breadcrumbs
           breadcrumbsData={[
             { url: "#", text: "Parent" },
@@ -114,6 +113,23 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
   </Story>
 </Canvas>
 
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Three}>Books and More</Heading>
+    <Breadcrumbs
+      breadcrumbsData={[
+        { url: "#", text: "Parent" },
+        { url: "#", text: "Child" },
+        {
+          url: "#",
+          text: "Grandchild",
+        },
+      ]}
+      colorVariant={ColorVariants.BooksAndMore}
+    />
+  </DSProvider>
+</Canvas>
+
 <Canvas>
   <DSProvider>
     <Heading level={HeadingLevels.Three}>Locations</Heading>

package/src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -4,6 +4,7 @@ import renderer from "react-test-renderer";
 import { axe } from "jest-axe";
 
 import Breadcrumbs from "./Breadcrumbs";
+import { ColorVariants } from "./BreadcrumbsTypes";
 
 describe("Breadcrumbs Accessibility", () => {
   const breadcrumbsData = [
@@ -31,8 +32,40 @@ describe("Breadcrumbs Snapshot", () => {
         <Breadcrumbs id="breadcrumbs-test" breadcrumbsData={breadcrumbsData} />
       )
       .toJSON();
+    const breadcrumbsVariantColor = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.BooksAndMore}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsBlogsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsAdditionalStyles = renderer
+      .create(
+        <Breadcrumbs
+          additionalStyles={{
+            bg: "var(--nypl-colors-ui-error-primary)",
+          }}
+          breadcrumbsData={breadcrumbsData}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
 
     expect(breadcrumbsSnapshot).toMatchSnapshot();
+    expect(breadcrumbsVariantColor).toMatchSnapshot();
+    expect(breadcrumbsBlogsVariant).toMatchSnapshot();
+    expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
   });
 });
 

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -23,6 +23,8 @@ export interface BreadcrumbsDataProps {
 }
 
 export interface BreadcrumbProps {
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** Breadcrumb links as an array */
   breadcrumbsData: BreadcrumbsDataProps[];
   /** className you can add in addition to 'input' */
@@ -64,6 +66,7 @@ const getElementsFromData = (data, breadcrumbsID) => {
 
 function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   const {
+    additionalStyles = {},
     breadcrumbsData,
     className,
     colorVariant,
@@ -78,10 +81,11 @@ function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   }
 
   const styles = useStyleConfig("Breadcrumb", { variant });
+  const finalStyles = { ...styles, ...additionalStyles };
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
 
   return (
-    <ChakraBreadcrumb className={className} __css={styles} id={id}>
+    <ChakraBreadcrumb className={className} __css={finalStyles} id={id}>
       {breadcrumbItems}
     </ChakraBreadcrumb>
   );

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -1,4 +1,5 @@
 export enum ColorVariants {
+  Blogs = "blogs",
   BooksAndMore = "booksAndMore",
   Locations = "locations",
   Research = "research",

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

@@ -42,6 +42,304 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
           focusable={false}
           id="breadcrumbs-test__backarrow"
           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>
+        <span
+          className="breadcrumb-label"
+        >
+          string2
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <span
+        aria-current="page"
+        className="chakra-breadcrumb__link css-0"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
+<nav
+  aria-label="breadcrumb"
+  className="chakra-breadcrumb css-0"
+  id="breadcrumbs-test"
+>
+  <ol
+    className="chakra-breadcrumb__list css-0"
+  >
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string1"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string1
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string2"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon breadcrumbs-icon css-onkibi"
+          focusable={false}
+          id="breadcrumbs-test__backarrow"
+          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>
+        <span
+          className="breadcrumb-label"
+        >
+          string2
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <span
+        aria-current="page"
+        className="chakra-breadcrumb__link css-0"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
+<nav
+  aria-label="breadcrumb"
+  className="chakra-breadcrumb css-0"
+  id="breadcrumbs-test"
+>
+  <ol
+    className="chakra-breadcrumb__list css-0"
+  >
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string1"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string1
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string2"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon breadcrumbs-icon css-onkibi"
+          focusable={false}
+          id="breadcrumbs-test__backarrow"
+          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>
+        <span
+          className="breadcrumb-label"
+        >
+          string2
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <span
+        aria-current="page"
+        className="chakra-breadcrumb__link css-0"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
+<nav
+  aria-label="breadcrumb"
+  className="chakra-breadcrumb css-1f2fw9u"
+  id="breadcrumbs-test"
+>
+  <ol
+    className="chakra-breadcrumb__list css-0"
+  >
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string1"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string1
+        </span>
+      </a>
+      <span
+        className="css-t4q1nq"
+        role="presentation"
+      >
+        /
+      </span>
+    </li>
+    <li
+      className="chakra-breadcrumb__list-item css-18biwo"
+    >
+      <a
+        className="chakra-breadcrumb__link css-0"
+        href="#string2"
+      >
+        <svg
+          aria-hidden={true}
+          className="chakra-icon breadcrumbs-icon css-onkibi"
+          focusable={false}
+          id="breadcrumbs-test__backarrow"
+          role="img"
+          title="arrow icon"
           viewBox="0 0 24 24"
         >
           <g
@@ -86,7 +384,6 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
       <span
         aria-current="page"
         className="chakra-breadcrumb__link css-0"
-        href="#string3"
       >
         <span
           className="breadcrumb-label"