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

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

@@ -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-ubg1nw"
+      className="chakra-accordion__button css-1ivt2zz"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}
@@ -132,7 +132,249 @@ exports[`Accordion Renders the UI snapshot correctly 2`] = `
     <button
       aria-controls="accordion-panel-accordian-item-0"
       aria-expanded={false}
-      className="chakra-accordion__button css-ubg1nw"
+      className="chakra-accordion__button css-1ivt2zz"
+      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 3`] = `
+<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-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-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 4`] = `
+<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-x43iy9"
       disabled={false}
       id="accordion-button-accordian-item-0"
       onClick={[Function]}

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

@@ -8,7 +8,7 @@ import {
 import { withDesign } from "storybook-addon-designs";
 
 import Breadcrumbs from "./Breadcrumbs";
-import { ColorVariants } from "./BreadcrumbsTypes";
+import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
 import Heading from "../Heading/Heading";
 import { HeadingLevels } from "../Heading/HeadingTypes";
 import Link from "../Link/Link";
@@ -17,8 +17,8 @@ import DSProvider from "../../theme/provider";
 import { getStorybookEnumValues } from "../../utils/utils";
 
 export const enumValues = getStorybookEnumValues(
-  ColorVariants,
-  "ColorVariants"
+  BreadcrumbsTypes,
+  "BreadcrumbsTypes"
 );
 
 <Meta
@@ -36,7 +36,7 @@ export const enumValues = getStorybookEnumValues(
     additionalStyles: { control: false },
     breadcrumbsData: { control: false },
     className: { control: false },
-    colorVariant: {
+    breadcrumbsType: {
       control: { type: "select" },
       options: enumValues.options,
     },
@@ -49,7 +49,7 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.12`  |
+| Latest            | `0.25.13`  |
 
 <Description of={Breadcrumbs} />
 
@@ -68,14 +68,14 @@ available in the breadcrumb hierarchy.
         { url: "#", text: "Grandchild" },
       ],
       className: undefined,
-      colorVariant: undefined,
+      breadcrumbsType: undefined,
       id: "breadcrumbs-id",
     }}
   >
     {(args) => (
       <Breadcrumbs
         {...args}
-        colorVariant={enumValues.getValue(args.colorVariant)}
+        breadcrumbsType={enumValues.getValue(args.breadcrumbsType)}
       />
     )}
   </Story>
@@ -115,13 +115,15 @@ so only one component must be rendered on a page.
 
 ## Color Variations
 
-The `Breadcrumbs` component background color can be set using the `colorVariant` prop and the `ColorVariants` enum. If the `colorVariant` prop is omitted, the default background color is `black`.
+The `Breadcrumbs` component background color can be set using the `breadcrumbsType`
+prop and the `BreadcrumbsTypes` enum. If the `breadcrumbsType` prop is omitted,
+the default background color is `black`.
 
 <Canvas>
   <Story
     name="Color Variations"
     args={{
-      colorVariant: ColorVariants.Blogs,
+      breadcrumbsType: BreadcrumbsTypes.Blogs,
     }}
   >
     {(args) => (
@@ -136,7 +138,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
               text: "Grandchild",
             },
           ]}
-          colorVariant={args.colorVariant}
+          breadcrumbsType={args.breadcrumbsType}
         />
       </>
     )}
@@ -155,7 +157,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
           text: "Grandchild",
         },
       ]}
-      colorVariant={ColorVariants.BooksAndMore}
+      breadcrumbsType={BreadcrumbsTypes.BooksAndMore}
     />
   </DSProvider>
 </Canvas>
@@ -172,7 +174,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
           text: "Grandchild",
         },
       ]}
-      colorVariant={ColorVariants.Education}
+      breadcrumbsType={BreadcrumbsTypes.Education}
     />
   </DSProvider>
 </Canvas>
@@ -189,7 +191,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
           text: "Grandchild",
         },
       ]}
-      colorVariant={ColorVariants.Locations}
+      breadcrumbsType={BreadcrumbsTypes.Locations}
     />
   </DSProvider>
 </Canvas>
@@ -206,7 +208,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
           text: "Grandchild",
         },
       ]}
-      colorVariant={ColorVariants.Research}
+      breadcrumbsType={BreadcrumbsTypes.Research}
     />
   </DSProvider>
 </Canvas>
@@ -223,7 +225,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
           text: "Grandchild",
         },
       ]}
-      colorVariant={ColorVariants.WhatsOn}
+      breadcrumbsType={BreadcrumbsTypes.WhatsOn}
     />
   </DSProvider>
 </Canvas>

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

@@ -4,7 +4,7 @@ import renderer from "react-test-renderer";
 import { axe } from "jest-axe";
 
 import Breadcrumbs from "./Breadcrumbs";
-import { ColorVariants } from "./BreadcrumbsTypes";
+import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
 
 describe("Breadcrumbs Accessibility", () => {
   const breadcrumbsData = [
@@ -51,7 +51,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          colorVariant={ColorVariants.BooksAndMore}
+          breadcrumbsType={BreadcrumbsTypes.BooksAndMore}
           id="breadcrumbs-test"
         />
       )
@@ -60,7 +60,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          colorVariant={ColorVariants.Blogs}
+          breadcrumbsType={BreadcrumbsTypes.Blogs}
           id="breadcrumbs-test"
         />
       )
@@ -69,7 +69,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          colorVariant={ColorVariants.Blogs}
+          breadcrumbsType={BreadcrumbsTypes.Blogs}
           id="breadcrumbs-test"
         />
       )
@@ -78,7 +78,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          colorVariant={ColorVariants.Education}
+          breadcrumbsType={BreadcrumbsTypes.Education}
           id="breadcrumbs-test"
         />
       )
@@ -130,7 +130,7 @@ describe("Breadcrumbs Testing", () => {
 
   it("Throws error when nothing is passed into Breadcrumb", () => {
     expect(() => render(<Breadcrumbs breadcrumbsData={[]} />)).toThrowError(
-      "You must use the `breadcrumbsData` prop to pass a data object to the Breadcrumbs component. That prop is current empty."
+      "NYPL Reservoir Breadcrumbs: No data was passed to the `breadcrumbsData` prop."
     );
   });
 });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -14,7 +14,7 @@ import {
   IconTypes,
 } from "../Icons/IconTypes";
 import generateUUID from "../../helpers/generateUUID";
-import { ColorVariants } from "./BreadcrumbsTypes";
+import { BreadcrumbsTypes } from "./BreadcrumbsTypes";
 import { getVariant } from "../../utils/utils";
 
 export interface BreadcrumbsDataProps {
@@ -27,12 +27,12 @@ export interface BreadcrumbProps {
   additionalStyles?: { [key: string]: any };
   /** Breadcrumb links as an array */
   breadcrumbsData: BreadcrumbsDataProps[];
+  /** Used to control how the `Hero` component will be rendered. */
+  breadcrumbsType?: BreadcrumbsTypes;
   /** className you can add in addition to 'input' */
   className?: string;
   /** ID that other components can cross reference for accessibility purposes */
   id?: string;
-  /** Used to control how the `Hero` component will be rendered. */
-  colorVariant?: ColorVariants;
 }
 
 const getElementsFromData = (data, breadcrumbsID) => {
@@ -68,15 +68,15 @@ function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
   const {
     additionalStyles = {},
     breadcrumbsData,
+    breadcrumbsType,
     className,
-    colorVariant,
     id = generateUUID(),
   } = props;
-  const variant = getVariant(colorVariant, ColorVariants);
+  const variant = getVariant(breadcrumbsType, BreadcrumbsTypes);
 
   if (!breadcrumbsData || breadcrumbsData.length === 0) {
     throw new Error(
-      "You must use the `breadcrumbsData` prop to pass a data object to the Breadcrumbs component. That prop is current empty."
+      "NYPL Reservoir Breadcrumbs: No data was passed to the `breadcrumbsData` prop."
     );
   }
 

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -1,4 +1,4 @@
-export enum ColorVariants {
+export enum BreadcrumbsTypes {
   Blogs = "blogs",
   BooksAndMore = "booksAndMore",
   Education = "education",