feat(breadcrumbs): adds breadcrumbs components

Adds `Breadcrumbs` and `Crumb` components to support adding breadcrumbs to a page. Follows WAI-ARIA
guidelines for Breadcrumbs. Supports using child link component for routing.

Author: stuarthendren

src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,52 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import React from 'react'
+import {
+  Link as RouterLink,
+  MemoryRouter,
+  Route,
+  Routes,
+} from 'react-router-dom'
+import { Breadcrumbs, Crumb } from '.'
+import { Divider } from '../Divider'
+
+export default {
+  title: 'Components/Breadcrumbs',
+  component: Breadcrumbs,
+  subcomponents: { Crumb },
+} as Meta
+
+const Template: ComponentStory<typeof Breadcrumbs> = (args) => (
+  <Breadcrumbs {...args}>
+    <Crumb href="/">Home</Crumb>
+    <Crumb href="/first">First</Crumb>
+    <Crumb href="/first/second" isCurrentPage>
+      Second
+    </Crumb>
+  </Breadcrumbs>
+)
+export const Primary = Template.bind({})
+Primary.args = {}
+
+export const WithRouter = () => {
+  return (
+    <MemoryRouter>
+      <Breadcrumbs>
+        <Crumb asChild>
+          <RouterLink to="/">Home</RouterLink>
+        </Crumb>
+        <Crumb asChild>
+          <RouterLink to="/one">One</RouterLink>
+        </Crumb>
+        <Crumb asChild isCurrentPage>
+          <RouterLink to="/one/two">Two</RouterLink>
+        </Crumb>
+      </Breadcrumbs>
+      <Divider />
+      <Routes>
+        <Route index element={<div>Home</div>} />
+        <Route path="/one" element={<div>Route 1</div>} />
+        <Route path="/one/two" element={<div>Route 2</div>} />
+      </Routes>
+    </MemoryRouter>
+  )
+}

src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { renderDark, renderLight } from '../../test'
+import { Primary } from './Breadcrumbs.stories'
+
+it('renders light without error', () => {
+  const { asFragment } = renderLight(<Primary />)
+  expect(asFragment()).toBeDefined()
+})
+
+it('renders dark without error', () => {
+  const { asFragment } = renderDark(<Primary />)
+  expect(asFragment()).toBeDefined()
+})

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,75 @@
+import React, { ComponentProps, ElementRef, forwardRef } from 'react'
+import { CSSProps, styled, VariantProps } from '../../stitches.config'
+import { Link, LinkProps } from '../Link'
+
+const BREADCRUMB_TAG = 'nav'
+const BREADCRUMB_LIST_TAG = 'ol'
+const CRUMB_TAG = 'li'
+
+/**
+ * StyledBreadcrumbs base component
+ */
+const StyledBreadcrumbs = styled(BREADCRUMB_TAG, {})
+const BreadcrumbList = styled(BREADCRUMB_LIST_TAG, {
+  padding: 0,
+  margin: 0,
+  listStyleType: 'none',
+})
+
+const StyledCrumb = styled(CRUMB_TAG, {
+  display: 'inline',
+  $$spacing: '$space$3',
+
+  '&:not(:first-of-type)': {
+    marginLeft: '$$spacing',
+
+    '&::before': {
+      content: '',
+      opacity: 0.25,
+      marginRight: '$$spacing',
+      display: 'inline-block',
+      transform: 'rotate(15deg)',
+      borderRight: '1px solid',
+      height: '0.8em',
+    },
+  },
+})
+
+type BreadcrumbsVariants = VariantProps<typeof StyledBreadcrumbs>
+type BreadcrumbsProps = BreadcrumbsVariants &
+  CSSProps &
+  ComponentProps<typeof BREADCRUMB_TAG>
+
+export const Breadcrumbs = forwardRef<
+  ElementRef<typeof StyledBreadcrumbs>,
+  BreadcrumbsProps
+>(({ children, ...props }, forwardedRef) => {
+  return (
+    <StyledBreadcrumbs aria-label="Breadcrumb" {...props} ref={forwardedRef}>
+      <BreadcrumbList>{children}</BreadcrumbList>
+    </StyledBreadcrumbs>
+  )
+})
+Breadcrumbs.toString = () => `.${StyledBreadcrumbs.className}`
+
+export type CrumbProps = LinkProps & {
+  isCurrentPage?: boolean
+}
+
+export const Crumb = ({
+  isCurrentPage = false,
+  children,
+  ...props
+}: CrumbProps) => {
+  return (
+    <StyledCrumb>
+      <Link
+        variant={isCurrentPage ? 'clear' : 'hovered'}
+        aria-current={isCurrentPage ? 'page' : undefined}
+        {...props}
+      >
+        {children}
+      </Link>
+    </StyledCrumb>
+  )
+}

src/components/Breadcrumbs/index.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs'

src/components/Link/Link.stories.tsx

@@ -47,6 +47,17 @@ export const Clear: Story = () => (
   </Text>
 )
 
+/**
+ * For when a link should be hidden but shown on hover
+ */
+export const Hovered: Story = () => (
+  <Text>
+    <Link variant="hovered" href="#">
+      Link
+    </Link>
+  </Text>
+)
+
 /**
  * The styled variant is intended for use in articles such as blog posts.
  */

src/components/Link/Link.tsx

@@ -86,6 +86,12 @@ export const linkStyles = css({
       default: {
         textDecoration: 'underline',
       },
+      hovered: {
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'revert',
+        },
+      },
       styled: {
         '@motion': {
           transition: 'background 100ms ease-out',

src/components/index.ts

@@ -6,6 +6,7 @@ export * from './Avatar'
 export * from './Backdrop'
 export * from './Badge'
 export * from './Box'
+export * from './Breadcrumbs'
 export * from './Button'
 export * from './Card'
 export * from './Checkbox'