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

package/src/components/Autosuggest/_Autosuggest.scss

@@ -25,11 +25,11 @@
 }
 
 .react-autosuggest__suggestions-container--open {
-  background-color: var(--ui-white);
+  background-color: var(--nypl-colors-ui-white);
   display: block;
   font-weight: 300;
   margin-top: -6px; // accounts for the focus ring on the input
-  outline: 1px solid var(--ui-gray-light);
+  outline: 1px solid var(--nypl-colors-ui-gray-light-cool);
   position: absolute;
   width: 100%;
   z-index: 2;
@@ -43,13 +43,13 @@
 
 .react-autosuggest__suggestion {
   cursor: pointer;
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }
 
 .react-autosuggest__suggestion--highlighted {
-  background-color: var(--ui-gray-light);
+  background-color: var(--nypl-colors-ui-gray-light-cool);
 }
 
 .auto-suggest-bottom {
-  padding: var(--space-xs);
+  padding: var(--nypl-space-xs);
 }

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
@@ -22,15 +22,14 @@ import { getCategory } from "../../utils/componentCategories";
   parameters={{
     design: {
       type: "figma",
-      url:
-        "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=11895%3A547",
+      url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=10766%3A1031",
     },
     jest: ["Breadcrumbs.test.tsx"],
   }}
   argTypes={{
-    blockName: { table: { disable: true } },
+    additionalStyles: { control: false },
     className: { table: { disable: true } },
-    modifiers: { table: { disable: true } },
+    id: { table: { disable: true } },
   }}
 />
 
@@ -39,72 +38,67 @@ import { getCategory } from "../../utils/componentCategories";
 | Component Version | DS Version |
 | ----------------- | ---------- |
 | Added             | `0.0.3`    |
-| Latest            | `0.23.0`   |
+| Latest            | `0.25.4`   |
 
 <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>
+<Canvas>
   <Story
     name="Color Variations"
     args={{
-      breadcrumbs: [
-        { url: "#", text: "Parent" },
-        { url: "#", text: "Child" },
-        {
-          url: "#",
-          text: "Grandchild",
-        },
-      ],
+      colorVariant: ColorVariants.BooksAndMore,
     }}
   >
     {(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 +106,18 @@ The `Breadcrumbs` component background color will match the secondary section co
               text: "Grandchild",
             },
           ]}
+          colorVariant={args.colorVariant}
         />
-      </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 +125,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 +142,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 +159,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,91 @@
 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";
+import { ColorVariants } from "./BreadcrumbsTypes";
 
 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();
+    const breadcrumbsVariantColor = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          colorVariant={ColorVariants.BooksAndMore}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsAdditionalStyles = renderer
+      .create(
+        <Breadcrumbs
+          additionalStyles={{
+            bg: "var(--nypl-colors-ui-error-primary)",
+          }}
+          breadcrumbsData={breadcrumbsData}
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+
+    expect(breadcrumbsSnapshot).toMatchSnapshot();
+    expect(breadcrumbsVariantColor).toMatchSnapshot();
+    expect(breadcrumbsAdditionalStyles).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,94 @@
 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;
+  /** Optionally pass in additional Chakra-based styles. */
+  additionalStyles?: { [key: string]: any };
   /** 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 {
+    additionalStyles = {},
+    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 finalStyles = { ...styles, ...additionalStyles };
+  const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
+
+  return (
+    <ChakraBreadcrumb className={className} __css={finalStyles} 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",
+}