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

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,17 @@ export const enumValues = getStorybookEnumValues(
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.25.10`  |
+| 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"
@@ -68,14 +80,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>
@@ -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>
@@ -115,13 +131,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 +154,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
               text: "Grandchild",
             },
           ]}
-          colorVariant={args.colorVariant}
+          breadcrumbsType={args.breadcrumbsType}
         />
       </>
     )}
@@ -155,7 +173,24 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
           text: "Grandchild",
         },
       ]}
-      colorVariant={ColorVariants.BooksAndMore}
+      breadcrumbsType={BreadcrumbsTypes.BooksAndMore}
+    />
+  </DSProvider>
+</Canvas>
+
+<Canvas>
+  <DSProvider>
+    <Heading level={HeadingLevels.Three}>Education</Heading>
+    <Breadcrumbs
+      breadcrumbsData={[
+        { url: "#", text: "Parent" },
+        { url: "#", text: "Child" },
+        {
+          url: "#",
+          text: "Grandchild",
+        },
+      ]}
+      breadcrumbsType={BreadcrumbsTypes.Education}
     />
   </DSProvider>
 </Canvas>
@@ -172,7 +207,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
           text: "Grandchild",
         },
       ]}
-      colorVariant={ColorVariants.Locations}
+      breadcrumbsType={BreadcrumbsTypes.Locations}
     />
   </DSProvider>
 </Canvas>
@@ -189,7 +224,7 @@ The `Breadcrumbs` component background color can be set using the `colorVariant`
           text: "Grandchild",
         },
       ]}
-      colorVariant={ColorVariants.Research}
+      breadcrumbsType={BreadcrumbsTypes.Research}
     />
   </DSProvider>
 </Canvas>
@@ -206,7 +241,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 = [
@@ -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 = [
@@ -51,7 +82,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          colorVariant={ColorVariants.BooksAndMore}
+          breadcrumbsType={BreadcrumbsTypes.BooksAndMore}
           id="breadcrumbs-test"
         />
       )
@@ -60,7 +91,7 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          colorVariant={ColorVariants.Blogs}
+          breadcrumbsType={BreadcrumbsTypes.Blogs}
           id="breadcrumbs-test"
         />
       )
@@ -69,7 +100,16 @@ describe("Breadcrumbs Snapshot", () => {
       .create(
         <Breadcrumbs
           breadcrumbsData={breadcrumbsData}
-          colorVariant={ColorVariants.Blogs}
+          breadcrumbsType={BreadcrumbsTypes.Blogs}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsEducationVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          breadcrumbsType={BreadcrumbsTypes.Education}
           id="breadcrumbs-test"
         />
       )
@@ -85,42 +125,33 @@ 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();
     expect(breadcrumbsBlogsVariant).toMatchSnapshot();
     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(
-      "You must use the `breadcrumbsData` prop to pass a data object to the Breadcrumbs component. That prop is current empty."
-    );
+    expect(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
   });
 });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,10 +1,11 @@
-import * as React from "react";
 import {
   Breadcrumb as ChakraBreadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
+  chakra,
   useStyleConfig,
 } from "@chakra-ui/react";
+import * as React from "react";
 
 import Icon from "../Icons/Icon";
 import {
@@ -13,8 +14,7 @@ import {
   IconSizes,
   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) => {
@@ -64,37 +64,38 @@ const getElementsFromData = (data, breadcrumbsID) => {
   return breadcrumbItems;
 };
 
-function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
+export const Breadcrumbs = chakra((props: BreadcrumbProps) => {
   const {
     additionalStyles = {},
     breadcrumbsData,
+    breadcrumbsType,
     className,
-    colorVariant,
-    id = generateUUID(),
+    id,
+    ...rest
   } = 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."
     );
   }
 
   const styles = useStyleConfig("Breadcrumb", { variant });
   const finalStyles = { ...styles, ...additionalStyles };
   const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
-  const ariaAttrs = { "aria-label": "Breadcrumb" };
 
   return (
     <ChakraBreadcrumb
+      aria-label="Breadcrumb"
       className={className}
       id={id}
-      {...ariaAttrs}
       __css={finalStyles}
+      {...rest}
     >
       {breadcrumbItems}
     </ChakraBreadcrumb>
   );
-}
+});
 
 export default Breadcrumbs;

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -1,6 +1,7 @@
-export enum ColorVariants {
+export enum BreadcrumbsTypes {
   Blogs = "blogs",
   BooksAndMore = "booksAndMore",
+  Education = "education",
   Locations = "locations",
   Research = "research",
   WhatsOn = "whatsOn",