feat: add Breadcrumbs component

packages/fuselage/src/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -0,0 +1,36 @@
+import type { ComponentProps, Ref } from 'react';
+import { forwardRef } from 'react';
+
+import { Box } from '../Box';
+
+type BreadcrumbItemProps = ComponentProps<typeof Box> & {
+  selected?: boolean;
+  href?: string;
+  target?: string;
+  title?: string;
+};
+
+const BreadcrumbItem = forwardRef(function BreadcrumbItem(
+  { children, selected, href, target, title, ...props }: BreadcrumbItemProps,
+  ref: Ref<HTMLLIElement>,
+) {
+  return (
+    <Box is='li' className='rcx-breadcrumbs__item' {...props} ref={ref}>
+      <Box
+        is={href ? 'a' : 'span'}
+        className={[
+          'rcx-breadcrumbs__item-link',
+          selected && 'rcx-breadcrumbs__item-link--selected',
+        ]}
+        href={href}
+        target={target}
+        title={title}
+        aria-current={selected ? 'page' : undefined}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+});
+
+export default BreadcrumbItem;

packages/fuselage/src/components/Breadcrumbs/Breadcrumbs.spec.tsx

@@ -0,0 +1,33 @@
+import { composeStories } from '@storybook/react-webpack5';
+import { axe } from 'jest-axe';
+import { SSRProvider } from 'react-aria';
+
+import { render } from '../../testing';
+
+import * as stories from './Breadcrumbs.stories';
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [
+  Story.storyName || 'Story',
+  Story,
+]);
+
+describe('[Breadcrumbs Component]', () => {
+  test.each(testCases)(
+    `renders %s without crashing`,
+    async (_storyname, Story) => {
+      const tree = render(<Story />, {
+        wrapper: ({ children }) => <SSRProvider>{children}</SSRProvider>,
+      });
+      expect(tree.baseElement).toMatchSnapshot();
+    },
+  );
+
+  test.each(testCases)(
+    '%s should have no a11y violations',
+    async (_storyname, Story) => {
+      const { container } = render(<Story />);
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    },
+  );
+});

packages/fuselage/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,25 @@
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
+
+import BreadcrumbItem from './BreadcrumbItem';
+import Breadcrumbs from './Breadcrumbs';
+
+export default {
+  title: 'Navigation/Breadcrumbs',
+  component: Breadcrumbs,
+} satisfies Meta<typeof Breadcrumbs>;
+
+export const Default: StoryFn<typeof Breadcrumbs> = (props) => (
+  <Breadcrumbs {...props}>
+    <BreadcrumbItem href='#'>Home</BreadcrumbItem>
+    <BreadcrumbItem href='#'>Components</BreadcrumbItem>
+    <BreadcrumbItem href='#' selected>Breadcrumbs</BreadcrumbItem>
+  </Breadcrumbs>
+);
+
+export const WithTitle: StoryFn<typeof Breadcrumbs> = (props) => (
+  <Breadcrumbs {...props}>
+    <BreadcrumbItem title='Home page' href='#'>Home</BreadcrumbItem>
+    <BreadcrumbItem title='Components list' href='#'>Components</BreadcrumbItem>
+    <BreadcrumbItem title='Current page' href='#' selected>Breadcrumbs</BreadcrumbItem>
+  </Breadcrumbs>
+);

packages/fuselage/src/components/Breadcrumbs/Breadcrumbs.styles.scss

@@ -0,0 +1,51 @@
+@use '../../styles/colors.scss';
+@use '../../styles/lengths.scss';
+@use '../../styles/typography.scss';
+
+.rcx-breadcrumbs {
+  @include typography.use-font-scale(p2);
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  color: colors.font(default);
+
+  &__list {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    &-link {
+      color: colors.font(hint);
+      text-decoration: none;
+      cursor: pointer;
+
+      &:hover,
+      &:focus {
+        color: colors.font(default);
+      }
+
+      &--selected {
+        color: colors.font(default);
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+  }
+
+  &__separator {
+    display: flex;
+    align-items: center;
+    margin: 0 lengths.margin(8);
+    color: colors.font(hint);
+  }
+}

packages/fuselage/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,39 @@
+import flattenChildren from 'react-keyed-flatten-children';
+import type { ComponentProps, ReactNode, Ref } from 'react';
+import { forwardRef, Children, Fragment } from 'react';
+
+import { Box } from '../Box';
+import { Chevron } from '../Chevron';
+
+type BreadcrumbsProps = ComponentProps<typeof Box> & {
+  children?: ReactNode;
+};
+
+const Breadcrumbs = forwardRef(function Breadcrumbs(
+  { children, ...props }: BreadcrumbsProps,
+  ref: Ref<HTMLElement>,
+) {
+  const childrenArray = flattenChildren(children);
+
+  const separatedChildren = Children.map(childrenArray, (child, index) => {
+    if (index === childrenArray.length - 1) {
+      return child;
+    }
+    return (
+      <Fragment key={index}>
+        {child}
+        <Chevron right size='x16' className='rcx-breadcrumbs__separator' />
+      </Fragment>
+    );
+  });
+
+  return (
+    <Box is='nav' aria-label='Breadcrumbs' className='rcx-breadcrumbs' {...props} ref={ref}>
+      <Box is='ol' className='rcx-breadcrumbs__list'>
+        {separatedChildren}
+      </Box>
+    </Box>
+  );
+});
+
+export default Breadcrumbs;

packages/fuselage/src/components/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from './Breadcrumbs';
+export { default as BreadcrumbItem } from './BreadcrumbItem';

packages/fuselage/src/components/index.ts

@@ -6,6 +6,8 @@ export * from './Avatar';
 export * from './Badge';
 export * from './Banner';
 export * from './Box';
+export * from './Breadcrumbs';
+
 export * from './Bubble';
 export * from './Button';
 export * from './ButtonGroup';