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

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

@@ -2,7 +2,7 @@
 
 exports[`Accordion Renders the UI snapshot correctly 1`] = `
 <div
-  className="chakra-accordion css-0"
+  className="chakra-accordion css-1xdhyk6"
   id="accordian"
 >
   <div
@@ -11,7 +11,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1ivt2zz"
+      className="chakra-accordion__button css-1v42wmb"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -26,7 +26,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
       </div>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
@@ -75,14 +75,14 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
         role="region"
       >
         <div
-          className="css-0"
+          className="css-1xdhyk6"
           id="card"
         >
           <div
             className="css-0"
           >
             <div
-              className="the-wrap  css-0"
+              className="the-wrap css-1u8qly9"
             >
               <div
                 className="the-crop css-0"
@@ -99,13 +99,14 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
             className="card-body css-0"
           >
             <h4
-              className="chakra-heading css-0"
+              className="chakra-heading css-1xdhyk6"
               id="heading1"
+              layout="row"
             >
               Gerry Kellman
             </h4>
             <div
-              className="css-0"
+              className="css-1xdhyk6"
             >
               Gerri is 
               <b>
@@ -123,7 +124,7 @@ exports[`Accordion Renders the UI snapshot correctly 1`] = `
 
 exports[`Accordion Renders the UI snapshot correctly 2`] = `
 <div
-  className="chakra-accordion css-0"
+  className="chakra-accordion css-1xdhyk6"
   id="accordian"
 >
   <div
@@ -132,7 +133,7 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1ivt2zz"
+      className="chakra-accordion__button css-1v42wmb"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -147,7 +148,7 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
       </div>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
@@ -196,14 +197,14 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
         role="region"
       >
         <div
-          className="css-0"
+          className="css-1xdhyk6"
           id="card"
         >
           <div
             className="css-0"
           >
             <div
-              className="the-wrap  css-0"
+              className="the-wrap css-1u8qly9"
             >
               <div
                 className="the-crop css-0"
@@ -220,13 +221,14 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
             className="card-body css-0"
           >
             <h4
-              className="chakra-heading css-0"
+              className="chakra-heading css-1xdhyk6"
               id="heading1"
+              layout="row"
             >
               Gerry Kellman
             </h4>
             <div
-              className="css-0"
+              className="css-1xdhyk6"
             >
               Gerri is 
               <b>
@@ -244,7 +246,7 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
 
 exports[`Accordion Renders the UI snapshot correctly 3`] = `
 <div
-  className="chakra-accordion css-0"
+  className="chakra-accordion css-1t0bvx9"
   id="accordian"
 >
   <div
@@ -253,7 +255,7 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-1m4sr3t"
+      className="chakra-accordion__button css-1v42wmb"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -268,7 +270,7 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
       </div>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
@@ -317,14 +319,14 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
         role="region"
       >
         <div
-          className="css-0"
+          className="css-1xdhyk6"
           id="card"
         >
           <div
             className="css-0"
           >
             <div
-              className="the-wrap  css-0"
+              className="the-wrap css-1u8qly9"
             >
               <div
                 className="the-crop css-0"
@@ -341,13 +343,14 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
             className="card-body css-0"
           >
             <h4
-              className="chakra-heading css-0"
+              className="chakra-heading css-1xdhyk6"
               id="heading1"
+              layout="row"
             >
               Gerry Kellman
             </h4>
             <div
-              className="css-0"
+              className="css-1xdhyk6"
             >
               Gerri is 
               <b>
@@ -365,7 +368,252 @@ exports[`Accordion Renders the UI snapshot correctly 3`] = `
 
 exports[`Accordion Renders the UI snapshot correctly 4`] = `
 <div
-  className="chakra-accordion css-0"
+  className="chakra-accordion css-1xdhyk6"
+  data-testid="testid"
+  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-1v42wmb"
+      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-1grhd2q"
+        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-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <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-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              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 5`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
+  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-1m4sr3t"
+      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-1grhd2q"
+        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-1xdhyk6"
+          id="card"
+        >
+          <div
+            className="css-0"
+          >
+            <div
+              className="the-wrap css-1u8qly9"
+            >
+              <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-1xdhyk6"
+              id="heading1"
+              layout="row"
+            >
+              Gerry Kellman
+            </h4>
+            <div
+              className="css-1xdhyk6"
+            >
+              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 6`] = `
+<div
+  className="chakra-accordion css-1xdhyk6"
   id="accordian"
 >
   <div
@@ -389,7 +637,7 @@ exports[`Accordion Renders the UI snapshot correctly 4`] = `
       </div>
       <svg
         aria-hidden={true}
-        className="chakra-icon css-onkibi"
+        className="chakra-icon css-1grhd2q"
         focusable={false}
         id="accordion-accordian-icon-0"
         role="img"
@@ -438,14 +686,14 @@ exports[`Accordion Renders the UI snapshot correctly 4`] = `
         role="region"
       >
         <div
-          className="css-0"
+          className="css-1xdhyk6"
           id="card"
         >
           <div
             className="css-0"
           >
             <div
-              className="the-wrap  css-0"
+              className="the-wrap css-1u8qly9"
             >
               <div
                 className="the-crop css-0"
@@ -462,13 +710,14 @@ exports[`Accordion Renders the UI snapshot correctly 4`] = `
             className="card-body css-0"
           >
             <h4
-              className="chakra-heading css-0"
+              className="chakra-heading css-1xdhyk6"
               id="heading1"
+              layout="row"
             >
               Gerry Kellman
             </h4>
             <div
-              className="css-0"
+              className="css-1xdhyk6"
             >
               Gerri is 
               <b>

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

@@ -8,12 +8,13 @@ import { getCategory } from "../../utils/componentCategories";
 
 # Autosuggest
 
-The NYPL Design System does not have its own `Autosuggest` component. Instead,
+The Reservoir Design System (DS) does not have its own `Autosuggest` component. Instead,
 we are currently using the
 [react-autosuggest](https://www.npmjs.com/package/react-autosuggest) package.
 We recommend using this package in your application and wrapping it in a [custom
-component](#code-implementation). The NYPL Design System does have custom styling that targets the
-classes from the `react-autosuggest` package, so the look and feel will be consistent.
+component](#code-implementation). The Reservoir Design System (DS) does have custom
+styling that targets the classes from the `react-autosuggest` package, so the look
+and feel will be consistent.
 
 In the following previews, you'll notice that there is a lot of white space underneath
 every input element. Since the suggestion dropdown will appear on top of page content,

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

@@ -49,7 +49,17 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.13`  |
+| Latest            | `0.26.0`   |
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Component Props](#component-props)
+- [Accessibility](#accessibility)
+- [Long Titles](#long-titles)
+- [Color Variations](#color-variations)
+
+## Overview
 
 <Description of={Breadcrumbs} />
 
@@ -57,6 +67,8 @@ 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.
 
+## Component Props
+
 <Canvas withToolbar>
   <Story
     name="Breadcrumbs with Controls"
@@ -86,13 +98,17 @@ available in the breadcrumb hierarchy.
 ### 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.
+only one HTML `<nav>` element with an `aria-label` attribute value of
+"Breadcrumbs" should be rendered on a page. The DS `Breadcrumbs` component
+renders this HTML landmark so only one component must be rendered on a page.
+
+Internally, links are organized in a `ul` list element. The current page link is
+denoted by an `aria-current` attribute value of "page".
 
 - [W3 Breadcrumbs Practice](https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html)
+- [Chakra UI Breadcrumb](https://chakra-ui.com/docs/components/navigation/breadcrumb)
 
-### Long Titles
+## Long Titles
 
 <Canvas>
   <DSProvider>

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

@@ -34,6 +34,37 @@ describe("Breadcrumbs Accessibility", () => {
   });
 });
 
+describe("Breadcrumbs", () => {
+  const breadcrumbsData = [
+    { url: "#string1", text: "string1" },
+    { url: "#string2", text: "string2" },
+    { url: "#string3", text: "string3" },
+  ];
+
+  it("Renders a tag with custom text", () => {
+    render(<Breadcrumbs breadcrumbsData={breadcrumbsData} />);
+
+    // The last breadcrumb (the active page) is not a link.
+    expect(screen.getAllByRole("link")).toHaveLength(2);
+    expect(screen.getAllByRole("link")[0]).toHaveTextContent("string1");
+    expect(screen.getAllByRole("link")[1]).toHaveTextContent("string2");
+    expect(screen.getByText(/string3/)).toBeInTheDocument();
+  });
+
+  it("Renders icon", () => {
+    const { container } = render(
+      <Breadcrumbs breadcrumbsData={breadcrumbsData} />
+    );
+    expect(container.querySelector(".breadcrumbs-icon")).toBeInTheDocument();
+  });
+
+  it("Throws error when nothing is passed into Breadcrumb", () => {
+    expect(() => render(<Breadcrumbs breadcrumbsData={[]} />)).toThrowError(
+      "NYPL Reservoir Breadcrumbs: No data was passed to the `breadcrumbsData` prop."
+    );
+  });
+});
+
 describe("Breadcrumbs Snapshot", () => {
   it("Renders the UI snapshot correctly", () => {
     const breadcrumbsData = [
@@ -94,6 +125,25 @@ describe("Breadcrumbs Snapshot", () => {
         />
       )
       .toJSON();
+    const withChakraProps = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          id="breadcrumbs-test"
+          p="s"
+          color="ui.error.primary"
+        />
+      )
+      .toJSON();
+    const withOtherProps = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          id="breadcrumbs-test"
+          data-testid="testid"
+        />
+      )
+      .toJSON();
 
     expect(breadcrumbsSnapshot).toMatchSnapshot();
     expect(breadcrumbsVariantColor).toMatchSnapshot();
@@ -101,36 +151,7 @@ describe("Breadcrumbs Snapshot", () => {
     expect(breadcrumbsLocationsVariant).toMatchSnapshot();
     expect(breadcrumbsEducationVariant).toMatchSnapshot();
     expect(breadcrumbsAdditionalStyles).toMatchSnapshot();
-  });
-});
-
-describe("Breadcrumbs Testing", () => {
-  const breadcrumbsData = [
-    { url: "#string1", text: "string1" },
-    { url: "#string2", text: "string2" },
-    { url: "#string3", text: "string3" },
-  ];
-
-  it("Renders a tag with custom text", () => {
-    render(<Breadcrumbs breadcrumbsData={breadcrumbsData} />);
-
-    // The last breadcrumb (the active page) is not a link.
-    expect(screen.getAllByRole("link")).toHaveLength(2);
-    expect(screen.getAllByRole("link")[0]).toHaveTextContent("string1");
-    expect(screen.getAllByRole("link")[1]).toHaveTextContent("string2");
-    expect(screen.getByText(/string3/)).toBeInTheDocument();
-  });
-
-  it("Renders icon", () => {
-    const { container } = render(
-      <Breadcrumbs breadcrumbsData={breadcrumbsData} />
-    );
-    expect(container.querySelector(".breadcrumbs-icon")).toBeInTheDocument();
-  });
-
-  it("Throws error when nothing is passed into Breadcrumb", () => {
-    expect(() => render(<Breadcrumbs breadcrumbsData={[]} />)).toThrowError(
-      "NYPL Reservoir Breadcrumbs: No data was passed to the `breadcrumbsData` prop."
-    );
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });