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

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

@@ -0,0 +1,243 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Accordion Renders the UI snapshot correctly 1`] = `
+<div
+  className="chakra-accordion css-0"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-ubg1nw"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-1eziwv"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus 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="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-0"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap  css-0"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-0"
+              id="heading1"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-0"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Accordion Renders the UI snapshot correctly 2`] = `
+<div
+  className="chakra-accordion css-0"
+  id="accordian"
+>
+  <div
+    className="chakra-accordion__item css-1fsnuue"
+  >
+    <button
+      aria-controls="accordion-panel-accordian-item-0"
+      aria-expanded={false}
+      className="chakra-accordion__button css-ubg1nw"
+      disabled={false}
+      id="accordion-button-accordian-item-0"
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      <div
+        className="css-1eziwv"
+      >
+        Gerry Kellman
+      </div>
+      <svg
+        aria-hidden={true}
+        className="chakra-icon css-onkibi"
+        focusable={false}
+        id="accordion-accordian-icon-0"
+        role="img"
+        title="plus 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="chakra-collapse"
+      style={
+        Object {
+          "display": "none",
+          "height": "0px",
+          "opacity": 0,
+          "overflow": "hidden",
+        }
+      }
+    >
+      <div
+        aria-labelledby="accordion-button-accordian-item-0"
+        className="chakra-accordion__panel css-0"
+        id="accordion-panel-accordian-item-0"
+        role="region"
+      >
+        <div
+          className="css-0"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap  css-0"
+            >
+              <div
+                className="the-crop css-0"
+              >
+                <img
+                  alt="Alt text"
+                  className="css-0"
+                  src="https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            className="card-body css-0"
+          >
+            <h4
+              className="chakra-heading css-0"
+              id="heading1"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-0"
+            >
+              Gerri is 
+              <b>
+                one of Logan's most trusted confidantes
+              </b>
+              , one who serves many roles within the company. She's one of the most powerful people at Waystar Royco outside of the family itself.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -1,5 +1,6 @@
-import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
 import Autosuggest from "react-autosuggest";
+
 import * as stories from "./Autosuggest.stories.tsx";
 import { getCategory } from "../../utils/componentCategories";
 

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

@@ -3,10 +3,7 @@ import React, { useState } from "react";
 import Autosuggest from "react-autosuggest";
 import Icon from "../Icons/Icon";
 import { IconNames } from "../Icons/IconTypes";
-import Label from "../Label/Label";
-import Input from "../Input/Input";
-import { InputTypes } from "../Input/InputTypes";
-import HelperErrorText from "../HelperErrorText/HelperErrorText";
+import TextInput from "../TextInput/TextInput";
 
 /**
  * StoryWrapper
@@ -21,29 +18,16 @@ const libraryRenderInputComponent = (
   inputProps: React.HTMLProps<HTMLInputElement>
 ) => {
   return (
-    <>
-      <Label
-        htmlFor="library-autosuggest"
-        id="library-autosuggest-label"
-        optReqFlag={"Required"}
-      >
-        Home Library
-      </Label>
-      <HelperErrorText id="id-helperText" isInvalid={false}>
-        Select your home library. Start by typing the name of the library. Try{" "}
-        {'"'}ba{'"'}.
-      </HelperErrorText>
-      <Input
-        type={InputTypes.text}
-        id="library-autosuggest"
-        aria-required={true}
-        aria-labelledby="library-autosuggest-label id-helperText"
-        attributes={{
-          name: "homeLibraryName",
-          ...inputProps,
-        }}
-      />
-    </>
+    <TextInput
+      attributes={{
+        ...inputProps,
+      }}
+      id="library-autosuggest"
+      isRequired
+      labelText="Home Library"
+      name="homeLibraryName"
+      helperText="Select your home library. Start by typing the name of the library. Try 'ba'."
+    />
   );
 };
 
@@ -148,20 +132,14 @@ const FishExample = () => {
   ];
   const renderInputComponent = (inputProps) => {
     return (
-      <>
-        <Label htmlFor="input-fish-autosuggest" id="fish-autosuggest-label">
-          Fish in Animal Crossing
-        </Label>
-        <Input
-          type={InputTypes.text}
-          id="input-fish-autosuggest"
-          aria-required={false}
-          attributes={{
-            name: "favoriteFish",
-            ...inputProps,
-          }}
-        />
-      </>
+      <TextInput
+        attributes={{
+          ...inputProps,
+        }}
+        id="library-fish-autosuggest"
+        labelText="Fish in Animal Crossing"
+        name="favoriteFish"
+      />
     );
   };
   const onChange = (_: any, { newValue }) => setValue(newValue);
@@ -218,16 +196,14 @@ const searchBarRenderInputComponent = (
   inputProps: React.HTMLProps<HTMLInputElement>
 ) => {
   return (
-    <Input
-      type={InputTypes.text}
-      id="autosuggest-searchBar"
-      aria-required={true}
-      ariaLabelledBy="autosuggest-button"
+    <TextInput
       attributes={{
-        name: "homeLibraryName",
-        "aria-describedby": "autosuggest-helperText",
         ...inputProps,
       }}
+      id="autosuggest-searchBar"
+      isRequired
+      labelText="home library"
+      name="homeLibraryName"
     />
   );
 };

package/src/components/Autosuggest/_Autosuggest.scss

@@ -5,10 +5,6 @@
   width: 100%;
 }
 
-.react-autosuggest__input {
-  @extend .input;
-}
-
 .react-autosuggest__input--focused {
   outline: none;
 }
@@ -28,9 +24,9 @@
   background-color: var(--nypl-colors-ui-white);
   display: block;
   font-weight: 300;
-  margin-top: -6px; // accounts for the focus ring on the input
+  margin-top: 1px; // accounts for the focus ring on the input
   outline: 1px solid var(--nypl-colors-ui-gray-light-cool);
-  position: absolute;
+  position: relative;
   width: 100%;
   z-index: 2;
 }

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

@@ -1,19 +1,25 @@
 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 Breadcrumbs from "./Breadcrumbs";
 import { ColorVariants } from "./BreadcrumbsTypes";
-import DSProvider from "../../theme/provider";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Link from "../Link/Link";
 import { getCategory } from "../../utils/componentCategories";
+import DSProvider from "../../theme/provider";
+import { getStorybookEnumValues } from "../../utils/utils";
+
+export const enumValues = getStorybookEnumValues(
+  ColorVariants,
+  "ColorVariants"
+);
 
 <Meta
   title={getCategory("Breadcrumbs")}
@@ -28,8 +34,13 @@ import { getCategory } from "../../utils/componentCategories";
   }}
   argTypes={{
     additionalStyles: { control: false },
-    className: { table: { disable: true } },
-    id: { table: { disable: true } },
+    breadcrumbsData: { control: false },
+    className: { control: false },
+    colorVariant: {
+      control: { type: "select" },
+      options: enumValues.options,
+    },
+    id: { control: false },
   }}
 />
 
@@ -38,29 +49,48 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.6`   |
+| Latest            | `0.25.10`  |
 
 <Description of={Breadcrumbs} />
 
-The `Breadcrumbs` component is a navigation element that provides a breadcrumb path that reflects the site structure and allows a user to navigate to any page available in the breadcrumb hierarchy.
+The `Breadcrumbs` component is a navigation element that provides a breadcrumb
+path that reflects the site structure and allows a user to navigate to any page
+available in the breadcrumb hierarchy.
 
 <Canvas withToolbar>
   <Story
-    name="Breadcrumbs Props"
+    name="Breadcrumbs with Controls"
     args={{
+      additionalStyles: undefined,
       breadcrumbsData: [
         { url: "#", text: "Parent" },
         { url: "#", text: "Child" },
         { url: "#", text: "Grandchild" },
       ],
-      id: "init-breadcrumbs",
+      className: undefined,
+      colorVariant: undefined,
+      id: "breadcrumbs-id",
     }}
   >
-    {(args) => <Breadcrumbs {...args} />}
+    {(args) => (
+      <Breadcrumbs
+        {...args}
+        colorVariant={enumValues.getValue(args.colorVariant)}
+      />
+    )}
   </Story>
 </Canvas>
 
-<ArgsTable story="Breadcrumbs Props" />
+<ArgsTable story="Breadcrumbs with Controls" />
+
+### Accessibility
+
+Only one `Breadcrumbs` component should be rendered on a page. This is because
+only one HTML `<nav>` element with `aria-label` attribute of "Breadcrumbs"
+should be rendered. The DS `Breadcrumbs` component renders this HTML landmark
+so only one component must be rendered on a page.
+
+- [W3 Breadcrumbs Practice](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html)
 
 ### Long Titles
 

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

@@ -11,12 +11,27 @@ describe("Breadcrumbs Accessibility", () => {
     { url: "#string1", text: "string1" },
     { url: "#string2", text: "string2" },
   ];
+
   it("passes axe accessibility test", async () => {
     const { container } = render(
       <Breadcrumbs breadcrumbsData={breadcrumbsData} />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
+
+  // This fails because there MUST only be one "breadcrumb" landmark item
+  // on a page. This specifically means there should be one `<nav>` element
+  // with `aria-label="Breadcrumb"`.
+  // https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
+  it("does not pass axe accessibility test", async () => {
+    const { container } = render(
+      <>
+        <Breadcrumbs breadcrumbsData={breadcrumbsData} />
+        <Breadcrumbs breadcrumbsData={breadcrumbsData} />
+      </>
+    );
+    expect(await axe(container)).not.toHaveNoViolations();
+  });
 });
 
 describe("Breadcrumbs Snapshot", () => {
@@ -50,6 +65,15 @@ describe("Breadcrumbs Snapshot", () => {
         />
       )
       .toJSON();
+    const breadcrumbsLocationsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
     const breadcrumbsAdditionalStyles = renderer
       .create(
         <Breadcrumbs
@@ -65,6 +89,7 @@ describe("Breadcrumbs Snapshot", () => {
     expect(breadcrumbsSnapshot).toMatchSnapshot();
     expect(breadcrumbsVariantColor).toMatchSnapshot();
     expect(breadcrumbsBlogsVariant).toMatchSnapshot();
+    expect(breadcrumbsLocationsVariant).toMatchSnapshot();
     expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
   });
 });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -6,8 +6,6 @@ import {
   useStyleConfig,
 } from "@chakra-ui/react";
 
-import generateUUID from "../../helpers/generateUUID";
-import { ColorVariants } from "./BreadcrumbsTypes";
 import Icon from "../Icons/Icon";
 import {
   IconNames,
@@ -15,6 +13,8 @@ import {
   IconSizes,
   IconTypes,
 } from "../Icons/IconTypes";
+import generateUUID from "../../helpers/generateUUID";
+import { ColorVariants } from "./BreadcrumbsTypes";
 import { getVariant } from "../../utils/utils";
 
 export interface BreadcrumbsDataProps {
@@ -83,9 +83,15 @@ function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   const styles = useStyleConfig("Breadcrumb", { variant });
   const finalStyles = { ...styles, ...additionalStyles };
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
+  const ariaAttrs = { "aria-label": "Breadcrumb" };
 
   return (
-    <ChakraBreadcrumb className={className} __css={finalStyles} id={id}>
+    <ChakraBreadcrumb
+      className={className}
+      id={id}
+      {...ariaAttrs}
+      __css={finalStyles}
+    >
       {breadcrumbItems}
     </ChakraBreadcrumb>
   );

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

@@ -2,7 +2,7 @@
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -101,7 +101,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -200,7 +200,7 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 <nav
-  aria-label="breadcrumb"
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-0"
   id="breadcrumbs-test"
 >
@@ -299,7 +299,106 @@ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
 
 exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
 <nav
-  aria-label="breadcrumb"
+  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 5`] = `
+<nav
+  aria-label="Breadcrumb"
   className="chakra-breadcrumb css-1f2fw9u"
   id="breadcrumbs-test"
 >