feat: New Component: Breadcrumb

src/components/breadcrumb/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import classnames from 'classnames'
+
+export interface BreadcrumbProps {
+  label: string
+  href?: string
+  current?: boolean
+  withMetaData?: boolean
+  position?: number
+}
+
+export const Breadcrumb = (
+  props: BreadcrumbProps & JSX.IntrinsicElements['li']
+): React.ReactElement => {
+  const {
+    label,
+    href,
+    current = false,
+    withMetaData = false,
+    position = undefined,
+    className,
+    ...listItemProps
+  } = props
+
+  const assignMetaDataValue = (value: string): string | undefined => {
+    return withMetaData ? value : undefined
+  }
+
+  const metaData = {
+    li: {
+      property: assignMetaDataValue('itemListElement'),
+      typeof: assignMetaDataValue('ListItem'),
+    },
+    a: {
+      property: assignMetaDataValue('item'),
+      typeof: assignMetaDataValue('WebPage'),
+    },
+    span: {
+      property: assignMetaDataValue('name'),
+    },
+  }
+
+  const metaPositionTag = position ? (
+    <meta property="position" content={position.toString()} />
+  ) : undefined
+
+  if (current) {
+    return (
+      <li
+        property={metaData.li.property}
+        typeof={metaData.li.typeof}
+        className={classnames(
+          'usa-breadcrumb__list-item usa-current',
+          className
+        )}
+        {...listItemProps}
+        aria-current="page">
+        <span property={metaData.span.property}>{label}</span>
+        {withMetaData && metaPositionTag}
+      </li>
+    )
+  }
+
+  return (
+    <li
+      property={metaData.li.property}
+      typeof={metaData.li.typeof}
+      className={classnames('usa-breadcrumb__list-item', className)}
+      {...listItemProps}>
+      <a
+        property={metaData.a.property}
+        typeof={metaData.a.typeof}
+        href={href}
+        className="usa-breadcrumb__link">
+        <span property={metaData.span.property}>{label}</span>
+        {withMetaData && metaPositionTag}
+      </a>
+    </li>
+  )
+}

src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Breadcrumb } from '../Breadcrumb/Breadcrumb'
+import { BreadcrumbNav } from './BreadcrumbNav'
+
+export default {
+  title: 'Breadcrumb',
+  component: BreadcrumbNav,
+  parameters: {
+    info: `
+    Provide secondary navigation to help users understand where they are in a website.
+
+    Source: https://designsystem.digital.gov/components/breadcrumb/
+    `,
+  },
+}
+
+export const DefaultBreadcrumb = (): React.ReactElement => (
+  <BreadcrumbNav>
+    <Breadcrumb label="Home" href="#" />
+    <Breadcrumb label="Federal Contracting" href="#" />
+    <Breadcrumb label="Contacting assistance programs" href="#" />
+    <Breadcrumb
+      label="Women-owned small business federal contracting program"
+      current
+    />
+  </BreadcrumbNav>
+)
+
+export const BreadcrumbWithRdfaMetaData = (): React.ReactElement => (
+  <BreadcrumbNav withMetaData>
+    <Breadcrumb label="Home" href="#" />
+    <Breadcrumb label="Federal Contracting" href="#" />
+    <Breadcrumb label="Contacting assistance programs" href="#" />
+    <Breadcrumb
+      label="Women-owned small business federal contracting program"
+      current
+    />
+  </BreadcrumbNav>
+)
+
+export const WrappingBreadcrumb = (): React.ReactElement => (
+  <BreadcrumbNav variant="wrap">
+    <Breadcrumb label="Home" href="#" />
+    <Breadcrumb label="Federal Contracting" href="#" />
+    <Breadcrumb label="Contacting assistance programs" href="#" />
+    <Breadcrumb
+      label="Women-owned small business federal contracting program"
+      current
+    />
+  </BreadcrumbNav>
+)

src/components/breadcrumb/BreadcrumbNav/BreadcrumbNav.tsx

@@ -0,0 +1,47 @@
+import React, { ReactElement } from 'react'
+import classnames from 'classnames'
+
+import { BreadcrumbProps } from '../Breadcrumb/Breadcrumb'
+
+interface BreadcrumbNavProps {
+  variant?: 'default' | 'wrap'
+  withMetaData?: boolean
+  children: ReactElement<BreadcrumbProps>[]
+}
+
+export const BreadcrumbNav = (
+  props: BreadcrumbNavProps & JSX.IntrinsicElements['nav']
+): React.ReactElement => {
+  const {
+    variant = 'default',
+    withMetaData = false,
+    children,
+    className,
+    ...navProps
+  } = props
+  const uswdsClassName =
+    variant === 'wrap'
+      ? 'usa-breadcrumb usa-breadcrumb--wrap'
+      : 'usa-breadcrumb'
+  const classes = classnames(uswdsClassName, className)
+
+  let breadcrumbs = children
+  if (withMetaData) {
+    breadcrumbs = children.map((child, index) =>
+      React.cloneElement(child, {
+        withMetaData: true,
+        position: index + 1,
+      })
+    )
+  }
+
+  return (
+    <nav className={classes} {...navProps} aria-label="Breadcrumbs">
+      <ol
+        vocab={withMetaData ? 'http://schema.org/' : undefined}
+        className="usa-breadcrumb__list">
+        {breadcrumbs}
+      </ol>
+    </nav>
+  )
+}