@nypl/design-system-react-components 1.0.1 → 1.0.2

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

@@ -0,0 +1,144 @@
+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 breadcrumbsData = [
+    { url: "#string1", text: "string1" },
+    { url: "#string2", text: "string2" },
+  ];
+
+  it("passes axe accessibility test", async () => {
+    const { container } = render(
+      <Breadcrumbs breadcrumbsData={breadcrumbsData} />
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+
+  // This fails because there MUST only be one "breadcrumb" landmark item
+  // on a page. This specifically means there should be one `<nav>` element
+  // with `aria-label="Breadcrumb"`.
+  // https://www.w3.org/TR/wai-aria-practices/examples/breadcrumb/index.html
+  it("does not pass axe accessibility test", async () => {
+    const { container } = render(
+      <>
+        <Breadcrumbs breadcrumbsData={breadcrumbsData} />
+        <Breadcrumbs breadcrumbsData={breadcrumbsData} />
+      </>
+    );
+    expect(await axe(container)).not.toHaveNoViolations();
+  });
+});
+
+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 = [
+      { 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}
+          breadcrumbsType="booksAndMore"
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsBlogsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          breadcrumbsType="blogs"
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsLocationsVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          breadcrumbsType="blogs"
+          id="breadcrumbs-test"
+        />
+      )
+      .toJSON();
+    const breadcrumbsEducationVariant = renderer
+      .create(
+        <Breadcrumbs
+          breadcrumbsData={breadcrumbsData}
+          breadcrumbsType="education"
+          id="breadcrumbs-test"
+        />
+      )
+      .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(withChakraProps).toMatchSnapshot();
+    expect(withOtherProps).toMatchSnapshot();
+  });
+});

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,98 @@
+import {
+  Breadcrumb as ChakraBreadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  chakra,
+  useStyleConfig,
+} from "@chakra-ui/react";
+import * as React from "react";
+
+import Icon from "../Icons/Icon";
+
+export type BreadcrumbsTypes =
+  | "blogs"
+  | "booksAndMore"
+  | "education"
+  | "locations"
+  | "research"
+  | "whatsOn";
+export interface BreadcrumbsDataProps {
+  url: string;
+  text: string | React.ReactNode;
+}
+
+export interface BreadcrumbProps {
+  /** 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;
+}
+
+const getElementsFromData = (
+  data: BreadcrumbsDataProps[],
+  breadcrumbsID?: string
+) => {
+  if (!data?.length) {
+    return {};
+  }
+
+  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="arrow"
+            size="small"
+            iconRotation="rotate90"
+            id={`${breadcrumbsID}__backarrow`}
+            className="breadcrumbs-icon"
+            type="breadcrumbs"
+          />
+        )}
+        <span className="breadcrumb-label">{breadcrumbData.text}</span>
+      </BreadcrumbLink>
+    </BreadcrumbItem>
+  ));
+
+  return breadcrumbItems;
+};
+
+export const Breadcrumbs = chakra((props: BreadcrumbProps) => {
+  const {
+    breadcrumbsData,
+    breadcrumbsType = "whatsOn",
+    className,
+    id,
+    ...rest
+  } = props;
+
+  if (!breadcrumbsData || breadcrumbsData.length === 0) {
+    throw new Error(
+      "NYPL Reservoir Breadcrumbs: No data was passed to the `breadcrumbsData` prop."
+    );
+  }
+
+  const styles = useStyleConfig("Breadcrumb", { variant: breadcrumbsType });
+  const breadcrumbItems = getElementsFromData(breadcrumbsData, id);
+
+  return (
+    <ChakraBreadcrumb
+      aria-label="Breadcrumb"
+      className={className}
+      id={id}
+      __css={styles}
+      {...rest}
+    >
+      {breadcrumbItems}
+    </ChakraBreadcrumb>
+  );
+});
+
+export default Breadcrumbs;