[Issue 704] Breadcrumbs

frontend/src/components/Breadcrumbs.tsx

@@ -0,0 +1,67 @@
+import {
+  Breadcrumb,
+  BreadcrumbBar,
+  BreadcrumbLink,
+  GridContainer,
+} from "@trussworks/react-uswds";
+
+export type Breadcrumb = {
+  title: string;
+  path: string;
+};
+
+export type BreadcrumbList = Breadcrumb[];
+
+type Props = {
+  breadcrumbList: BreadcrumbList;
+};
+
+const Breadcrumbs = ({ breadcrumbList }: Props) => {
+  const rdfaMetadata = {
+    ol: {
+      vocab: "http://schema.org/",
+      typeof: "BreadcrumbList",
+    },
+    li: {
+      property: "itemListElement",
+      typeof: "ListItem",
+    },
+    a: {
+      property: "item",
+      typeof: "WebPage",
+    },
+  };
+
+  const breadcrumArray = breadcrumbList.map((breadcrumbInfo, i) => {
+    return (
+      <Breadcrumb
+        key={breadcrumbInfo.title + "-crumb"}
+        current={i + 1 === breadcrumbList.length}
+        {...rdfaMetadata.li}
+      >
+        {i + 1 !== breadcrumbList.length ? (
+          <BreadcrumbLink href={breadcrumbInfo.path} {...rdfaMetadata.a}>
+            {}
+            <span property="name">{breadcrumbInfo.title}</span>
+          </BreadcrumbLink>
+        ) : (
+          <span property="name">{breadcrumbInfo.title}</span>
+        )}
+        <meta property="position" content={(i + 1).toString()} />
+      </Breadcrumb>
+    );
+  });
+
+  return (
+    <GridContainer
+      className="padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-6"
+      data-testid="breadcrumb"
+    >
+      <BreadcrumbBar listProps={{ ...rdfaMetadata.ol }}>
+        {breadcrumArray}
+      </BreadcrumbBar>
+    </GridContainer>
+  );
+};
+
+export default Breadcrumbs;

frontend/src/constants/breadcrumbs.ts

@@ -0,0 +1,8 @@
+import { Breadcrumb, BreadcrumbList } from "src/components/Breadcrumbs";
+
+const HOME: Breadcrumb = { title: "Home", path: "/" };
+const RESEARCH: Breadcrumb = { title: "Research", path: "research/" };
+const PROCESS: Breadcrumb = { title: "Process", path: "process/" };
+
+export const RESEARCH_CRUMBS: BreadcrumbList = [HOME, RESEARCH];
+export const PROCESS_CRUMBS: BreadcrumbList = [HOME, PROCESS];

frontend/src/pages/process.tsx

@@ -1,9 +1,11 @@
 import type { GetStaticProps, NextPage } from "next";
+import { PROCESS_CRUMBS } from "src/constants/breadcrumbs";
 import { ExternalRoutes } from "src/constants/routes";
 
 import { Trans, useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
+import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
 import FullWidthAlert from "../components/FullWidthAlert";
 
@@ -28,6 +30,7 @@ const Process: NextPage = () => {
           }}
         />
       </FullWidthAlert>
+      <Breadcrumbs breadcrumbList={PROCESS_CRUMBS} />
       Process Placeholder
     </>
   );

frontend/src/pages/research.tsx

@@ -1,9 +1,11 @@
 import type { GetStaticProps, NextPage } from "next";
+import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs";
 import { ExternalRoutes } from "src/constants/routes";
 
 import { Trans, useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
+import Breadcrumbs from "src/components/Breadcrumbs";
 import PageSEO from "src/components/PageSEO";
 import FullWidthAlert from "../components/FullWidthAlert";
 
@@ -28,6 +30,7 @@ const Research: NextPage = () => {
           }}
         />
       </FullWidthAlert>
+      <Breadcrumbs breadcrumbList={RESEARCH_CRUMBS} />
       Research Placeholder
     </>
   );

frontend/stories/components/Breadcrumbs.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta } from "@storybook/react";
+import { PROCESS_CRUMBS, RESEARCH_CRUMBS } from "src/constants/breadcrumbs";
+
+import Breadcrumbs from "src/components/Breadcrumbs";
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: "Components/Breadcrumbs",
+  component: Breadcrumbs,
+};
+export default meta;
+
+export const Home = {
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/lpKPdyTyLJB5JArxhGjJnE/beta.grants.gov?type=design&node-id=918%3A1698&mode=design&t=rKuHZ4QiepVfLvwq-1",
+    },
+  },
+  args: {
+    breadcrumbList: [{ title: "Home", path: "/" }],
+  },
+};
+
+export const Research = {
+  parameters: Home.parameters,
+  args: {
+    breadcrumbList: RESEARCH_CRUMBS,
+  },
+};
+
+export const Process = {
+  parameters: Home.parameters,
+  args: {
+    breadcrumbList: PROCESS_CRUMBS,
+  },
+};

frontend/tests/components/Breadcrumbs.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+import { RESEARCH_CRUMBS } from "src/constants/breadcrumbs";
+
+import Breadcrumbs from "src/components/Breadcrumbs";
+
+describe("Breadcrumb", () => {
+  it("Renders without errors", () => {
+    render(<Breadcrumbs breadcrumbList={RESEARCH_CRUMBS} />);
+    const bc = screen.getByTestId("breadcrumb");
+    expect(bc).toBeInTheDocument();
+  });
+});

frontend/tests/pages/process.test.tsx

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { axe } from "jest-axe";
 import Process from "src/pages/process";
 
-describe("Index", () => {
+describe("Process", () => {
   it("renders alert with grants.gov link", () => {
     render(<Process />);
 

frontend/tests/pages/research.test.tsx

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from "@testing-library/react";
 import { axe } from "jest-axe";
 import Research from "src/pages/research";
 
-describe("Index", () => {
+describe("Research", () => {
   it("renders alert with grants.gov link", () => {
     render(<Research />);