@nypl/design-system-react-components 0.25.0 → 0.25.1

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

@@ -3,16 +3,16 @@ import {
   Story,
   Canvas,
   ArgsTable,
-  Preview,
   Description,
 } from "@storybook/addon-docs/blocks";
 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 sections from "../../utils/siteSections";
 import { getCategory } from "../../utils/componentCategories";
 
 <Meta
@@ -23,14 +23,13 @@ import { getCategory } from "../../utils/componentCategories";
     design: {
       type: "figma",
       url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10766%3A1031",
     },
     jest: ["Breadcrumbs.test.tsx"],
   }}
   argTypes={{
-    blockName: { table: { disable: true } },
+    id: { table: { disable: true } },
     className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
   }}
 />
 
@@ -39,72 +38,63 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.23.0`   |
+| Latest            | `0.25.1`   |
 
 <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.
 
-<Preview withToolbar>
+<Canvas withToolbar>
   <Story
-    name="Basic"
+    name="Breadcrumbs Props"
     args={{
-      breadcrumbs: [
+      breadcrumbsData: [
         { url: "#", text: "Parent" },
         { url: "#", text: "Child" },
         { url: "#", text: "Grandchild" },
       ],
+      id: "init-breadcrumbs",
     }}
   >
     {(args) => <Breadcrumbs {...args} />}
   </Story>
-</Preview>
+</Canvas>
 
-<ArgsTable story="Basic" />
+<ArgsTable story="Breadcrumbs Props" />
 
 ### Long Titles
 
 <Canvas>
-  <Breadcrumbs
-    breadcrumbs={[
-      { url: "#", text: "Parent with a Long Name" },
-      { url: "#", text: "Child with an Even Longer Name" },
-      {
-        url: "#",
-        text: "Grandchild with an Exceptionally Long Name",
-      },
-      {
-        url: "#",
-        text:
-          "Great-Grandchild with the Longest Name That Will Wrap onto the Second Line of the Breadcrumb Component Under the Right Circumstances",
-      },
-    ]}
-  />
+  <DSProvider>
+    <Breadcrumbs
+      breadcrumbsData={[
+        { url: "#", text: "Parent with a Long Name" },
+        { url: "#", text: "Child with an Even Longer Name" },
+        {
+          url: "#",
+          text: "Grandchild with an Exceptionally Long Name",
+        },
+        {
+          url: "#",
+          text:
+            "Great-Grandchild with the Longest Name That Will Wrap onto the Second Line of the Breadcrumb Component Under the Right Circumstances",
+        },
+      ]}
+    />
+  </DSProvider>
 </Canvas>
 
 ## Color Variations
 
-The `Breadcrumbs` component background color will match the secondary section color of the website section it is placed into. See more about brand colors <Link href="?path=/story/colors--colors-brand">here</Link>.
+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`.
 
-<Preview>
-  <Story
-    name="Color Variations"
-    args={{
-      breadcrumbs: [
-        { url: "#", text: "Parent" },
-        { url: "#", text: "Child" },
-        {
-          url: "#",
-          text: "Grandchild",
-        },
-      ],
-    }}
-  >
+<Canvas>
+  <Story name="Color Variations" args={{}}>
     {(args) => (
       <div className="nypl--books-and-more">
         <Heading level={HeadingLevels.Three}>Books and More</Heading>
         <Breadcrumbs
-          breadcrumbs={[
+          breadcrumbsData={[
             { url: "#", text: "Parent" },
             { url: "#", text: "Child" },
             {
@@ -112,17 +102,18 @@ The `Breadcrumbs` component background color will match the secondary section co
               text: "Grandchild",
             },
           ]}
+          colorVariant={ColorVariants.BooksAndMore}
         />
       </div>
     )}
   </Story>
-</Preview>
+</Canvas>
 
 <Canvas>
-  <div className="nypl--locations">
+  <DSProvider>
     <Heading level={HeadingLevels.Three}>Locations</Heading>
     <Breadcrumbs
-      breadcrumbs={[
+      breadcrumbsData={[
         { url: "#", text: "Parent" },
         { url: "#", text: "Child" },
         {
@@ -130,15 +121,16 @@ The `Breadcrumbs` component background color will match the secondary section co
           text: "Grandchild",
         },
       ]}
+      colorVariant={ColorVariants.Locations}
     />
-  </div>
+  </DSProvider>
 </Canvas>
 
 <Canvas>
-  <div className="nypl--research">
+  <DSProvider>
     <Heading level={HeadingLevels.Three}>Research</Heading>
     <Breadcrumbs
-      breadcrumbs={[
+      breadcrumbsData={[
         { url: "#", text: "Parent" },
         { url: "#", text: "Child" },
         {
@@ -146,15 +138,16 @@ The `Breadcrumbs` component background color will match the secondary section co
           text: "Grandchild",
         },
       ]}
+      colorVariant={ColorVariants.Research}
     />
-  </div>
+  </DSProvider>
 </Canvas>
 
 <Canvas>
-  <div className="nypl--whats-on">
+  <DSProvider>
     <Heading level={HeadingLevels.Three}>What's On</Heading>
     <Breadcrumbs
-      breadcrumbs={[
+      breadcrumbsData={[
         { url: "#", text: "Parent" },
         { url: "#", text: "Child" },
         {
@@ -162,6 +155,7 @@ The `Breadcrumbs` component background color will match the secondary section co
           text: "Grandchild",
         },
       ]}
+      colorVariant={ColorVariants.WhatsOn}
     />
-  </div>
+  </DSProvider>
 </Canvas>

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

@@ -1,62 +1,68 @@
 import * as React from "react";
 import { render, screen } from "@testing-library/react";
+import renderer from "react-test-renderer";
 import { axe } from "jest-axe";
 
 import Breadcrumbs from "./Breadcrumbs";
 
 describe("Breadcrumbs Accessibility", () => {
-  const breadcrumbString = [
+  const breadcrumbsData = [
     { url: "#string1", text: "string1" },
     { url: "#string2", text: "string2" },
   ];
   it("passes axe accessibility test", async () => {
     const { container } = render(
-      <Breadcrumbs breadcrumbs={breadcrumbString} />
+      <Breadcrumbs breadcrumbsData={breadcrumbsData} />
     );
     expect(await axe(container)).toHaveNoViolations();
   });
 });
 
-describe("Breadcrumbs", () => {
-  const breadcrumbString = [
+describe("Breadcrumbs Snapshot", () => {
+  it("Renders the UI snapshot correctly", () => {
+    const breadcrumbsData = [
+      { url: "#string1", text: "string1" },
+      { url: "#string2", text: "string2" },
+      { url: "#string3", text: "string3" },
+    ];
+
+    const breadcrumbsSnapshot = renderer
+      .create(
+        <Breadcrumbs id="breadcrumbs-test" breadcrumbsData={breadcrumbsData} />
+      )
+      .toJSON();
+
+    expect(breadcrumbsSnapshot).toMatchSnapshot();
+  });
+});
+
+describe("Breadcrumbs Testing", () => {
+  const breadcrumbsData = [
     { url: "#string1", text: "string1" },
     { url: "#string2", text: "string2" },
-  ];
-  const breadcrumbComponent = [
-    <a key="link1" href="#component1">
-      <span>component1</span>
-    </a>,
-    <a key="link2" href="#component2">
-      component2
-    </a>,
+    { url: "#string3", text: "string3" },
   ];
 
   it("Renders a tag with custom text", () => {
-    render(<Breadcrumbs breadcrumbs={breadcrumbString} />);
+    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");
-  });
-
-  it("Renders breadcrumb when passed components", () => {
-    render(<Breadcrumbs breadcrumbs={breadcrumbComponent} />);
-
-    expect(screen.getAllByRole("link")).toHaveLength(2);
-    expect(screen.getAllByRole("link")[0]).toHaveTextContent("component1");
-    expect(screen.getAllByRole("link")[1]).toHaveTextContent("component2");
+    expect(screen.getByText(/string3/)).toBeInTheDocument();
   });
 
   it("Renders icon", () => {
     const { container } = render(
-      <Breadcrumbs breadcrumbs={breadcrumbComponent} />
+      <Breadcrumbs breadcrumbsData={breadcrumbsData} />
     );
-    expect(container.querySelector(".breadcrumbs__icon")).toBeInTheDocument();
+    expect(container.querySelector(".breadcrumbs-icon")).toBeInTheDocument();
   });
 
   it("Throws error when nothing is passed into Breadcrumb", () => {
-    expect(() => render(<Breadcrumbs breadcrumbs={[]} />)).toThrowError(
-      "Breadcrumbs must contain a set of links. Breadcrumbs currently empty"
+    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."
     );
   });
 });

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,92 +1,90 @@
 import * as React from "react";
-import bem from "../../utils/bem";
-import Icon from "../Icons/Icon";
-import { IconNames } from "../Icons/IconTypes";
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  useStyleConfig,
+} from "@chakra-ui/react";
 
-type breadcrumb = { url: string; text: string };
+import generateUUID from "../../helpers/generateUUID";
+import { ColorVariants } from "./BreadcrumbsTypes";
+import Icon from "../Icons/Icon";
+import {
+  IconNames,
+  IconRotationTypes,
+  IconSizes,
+  IconTypes,
+} from "../Icons/IconTypes";
+import { getVariant } from "../../utils/utils";
 
-function isTextBreadcrumb(obj: breadcrumb | JSX.Element): obj is breadcrumb {
-  return typeof (obj as breadcrumb).url === "string";
+export interface BreadcrumbsDataProps {
+  url: string;
+  text: string | React.ReactNode;
 }
 
 export interface BreadcrumbProps {
-  /** BlockName for use with BEM. See how to work with blockNames and BEM here: http://getbem.com/introduction/ */
-  blockName?: string;
   /** Breadcrumb links as an array */
-  breadcrumbs: breadcrumb[] | JSX.Element[];
+  breadcrumbsData: BreadcrumbsDataProps[];
   /** className you can add in addition to 'input' */
   className?: string;
-  /** Modifiers array for use with BEM. See how to work with modifiers and BEM here: http://getbem.com/introduction/ */
-  modifiers?: 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;
 }
 
-export default class Breadcrumbs extends React.Component<BreadcrumbProps, any> {
-  static defaultProps = {};
-
-  constructor(props: BreadcrumbProps) {
-    super(props);
+const getElementsFromData = (data, breadcrumbsID) => {
+  if (!data?.length) {
+    return {};
   }
 
-  render(): JSX.Element {
-    const { breadcrumbs, className, blockName, modifiers } = this.props;
-
-    const baseClass = "breadcrumbs";
+  const breadcrumbItems = data.map((breadcrumbData, index) => (
+    <BreadcrumbItem
+      key={index}
+      isCurrentPage={index === data.length - 1 ? true : false}
+    >
+      <BreadcrumbLink href={breadcrumbData.url}>
+        {index === data.length - 2 && (
+          <Icon
+            name={IconNames.Arrow}
+            size={IconSizes.Small}
+            iconRotation={IconRotationTypes.Rotate90}
+            id={`${breadcrumbsID}__backarrow`}
+            className="breadcrumbs-icon"
+            type={IconTypes.Breadcrumbs}
+          />
+        )}
+        <span className="breadcrumb-label">{breadcrumbData.text}</span>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+  ));
 
-    const breadcrumbItems = [];
+  return breadcrumbItems;
+};
 
-    if (!breadcrumbs || breadcrumbs.length === 0) {
-      throw new Error(
-        "Breadcrumbs must contain a set of links. Breadcrumbs currently empty"
-      );
-    }
-    breadcrumbs.forEach((item: breadcrumb | JSX.Element, index: number) => {
-      const last = index === breadcrumbs.length - 1;
-      let linkComponent: string | JSX.Element;
+function Breadcrumbs(props: React.PropsWithChildren<BreadcrumbProps>) {
+  const {
+    breadcrumbsData,
+    className,
+    colorVariant,
+    id = generateUUID(),
+  } = props;
+  const variant = getVariant(colorVariant, ColorVariants);
 
-      if (isTextBreadcrumb(item)) {
-        linkComponent = item.url ? (
-          <a href={item.url} className={bem("link", [], baseClass)}>
-            {item.text}
-          </a>
-        ) : (
-          item.text
-        );
-      } else {
-        const props = {
-          className: bem("link", [], baseClass),
-        };
-        linkComponent = React.createElement(
-          item.type,
-          { ...props, ...item.props },
-          item.props.children
-        );
-      }
-      breadcrumbItems.push(
-        <li
-          key={`${baseClass}-${index}`}
-          className={bem("item", [], baseClass)}
-        >
-          {last && (
-            <Icon
-              name={IconNames.arrow}
-              blockName={baseClass}
-              modifiers={["small"]}
-              decorative={true}
-            />
-          )}
-          {linkComponent}
-        </li>
-      );
-    });
-
-    return (
-      <nav
-        className={bem(baseClass, modifiers, blockName, [className])}
-        role="navigation"
-        aria-label="Breadcrumbs"
-      >
-        <ul className={bem("list", [], baseClass)}>{breadcrumbItems}</ul>
-      </nav>
+  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."
     );
   }
+
+  const styles = useStyleConfig("Breadcrumb", { variant });
+  const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
+
+  return (
+    <ChakraBreadcrumb className={className} __css={styles} id={id}>
+      {breadcrumbItems}
+    </ChakraBreadcrumb>
+  );
 }
+
+export default Breadcrumbs;

package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx

@@ -0,0 +1,6 @@
+export enum ColorVariants {
+  BooksAndMore = "booksAndMore",
+  Locations = "locations",
+  Research = "research",
+  WhatsOn = "whatsOn",
+}

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

@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
+<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"
+          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"
+        href="#string3"
+      >
+        <span
+          className="breadcrumb-label"
+        >
+          string3
+        </span>
+      </span>
+    </li>
+  </ol>
+</nav>
+`;