Merge pull request #24 from tonyghiani/feature/breadcrumb-component

feat(react-components): 🎸 add MntBreadcrumbs component

packages/react-components/README.md

@@ -86,5 +86,6 @@ For detailed information about each component, refer to the sub-pages:
 ### Molecules
 
 - [MntAccordion](./src/components/molecules/Accordion)
+- [MntBreadcrumbs](./src/components/molecules/Breadcrumbs)
 - [MntCodeBlock](./src/components/molecules/CodeBlock)
 - [MntRangeInput](./src/components/molecules/RangeInput)

packages/react-components/src/components/molecules/Breadcrumbs/Breadcrumbs.classes.ts

@@ -0,0 +1,11 @@
+const accordionClasses = {
+  '.mnt-breadcrumbs': {
+    '@apply flex': {},
+    '& > ol > li': { '@apply inline': {} },
+    '& > ol > li:not(:first-child)': {
+      '@apply before:content-[attr(data-separator)] before:mx-1.5': {}
+    }
+  }
+};
+
+export default accordionClasses;

packages/react-components/src/components/molecules/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { MntText } from '../../atoms/Typography';
+
+import { MntBreadcrumbs } from './Breadcrumbs';
+
+const meta = {
+  title: 'Molecules/MntBreadcrumbs',
+  component: MntBreadcrumbs,
+  tags: ['autodocs']
+} satisfies Meta<typeof MntBreadcrumbs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Main: Story = {
+  args: {
+    separator: '/',
+    children: [
+      <MntText key='home'>Home</MntText>,
+      <MntText key='blog'>Blog</MntText>,
+      <MntText key='post'>A design system called Mountain UI</MntText>
+    ]
+  }
+};

packages/react-components/src/components/molecules/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import mnt from 'react-mnt';
+
+export interface BreadcrumbsProps {
+  /**
+   * Optional separator to use between breadcrumbs
+   */
+  separator?: string;
+}
+
+const StyledBreadcrumbs = mnt('nav')<BreadcrumbsProps>`
+  mnt-breadcrumbs
+`;
+
+export type MntBreadcrumbsProps = React.ComponentPropsWithRef<typeof StyledBreadcrumbs>;
+
+/**
+ * Breadcrums component for displaying breadcrumb navigation.
+ */
+export const MntBreadcrumbs = ({ children, separator = '/', ...props }: MntBreadcrumbsProps) => {
+  const liChildren = React.Children.map(children, child => (
+    <li data-separator={separator}>{child}</li>
+  ));
+
+  return (
+    <StyledBreadcrumbs {...props}>
+      <ol>{liChildren}</ol>
+    </StyledBreadcrumbs>
+  );
+};
+
+MntBreadcrumbs.displayName = 'MntBreadcrumbs';

packages/react-components/src/components/molecules/Breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { MntBreadcrumbs } from './Breadcrumbs';
+export type { MntBreadcrumbsProps } from './Breadcrumbs';

packages/react-components/src/components/molecules/index.ts

@@ -1,5 +1,7 @@
 export * from './Accordion';
 
+export * from './Breadcrumbs';
+
 export * from './CodeBlock';
 
 export * from './RangeInput';

packages/react-components/src/with_mnt_config.ts

@@ -15,6 +15,7 @@ import tagClasses from './components/atoms/Tag/Tag.classes';
 import typographyClasses from './components/atoms/Typography/Typography.classes';
 import visuallyHiddenClasses from './components/atoms/VisuallyHidden/VisuallyHidden.classes';
 import accordionClasses from './components/molecules/Accordion/Accordion.classes';
+import breadcrumbsClasses from './components/molecules/Breadcrumbs/Breadcrumbs.classes';
 import codeblockClasses from './components/molecules/CodeBlock/CodeBlock.classes';
 import rangeInputClasses from './components/molecules/RangeInput/RangeInput.classes';
 
@@ -44,6 +45,7 @@ const materialTailwindConfig = {
           visuallyHiddenClasses,
           typographyClasses,
           accordionClasses,
+          breadcrumbsClasses,
           codeblockClasses,
           rangeInputClasses
         )

packages/react-components/tests/__snapshots__/storyshots.test.ts.snap

@@ -1438,6 +1438,42 @@ exports[`Storyshots Molecules/MntAccordion Main 1`] = `
 </div>
 `;
 
+exports[`Storyshots Molecules/MntBreadcrumbs Main 1`] = `
+<nav
+  className="mnt-breadcrumbs"
+>
+  <ol>
+    <li
+      data-separator="/"
+    >
+      <span
+        className="leading-relaxed text-body text-[--c-text-primary]"
+      >
+        Home
+      </span>
+    </li>
+    <li
+      data-separator="/"
+    >
+      <span
+        className="leading-relaxed text-body text-[--c-text-primary]"
+      >
+        Blog
+      </span>
+    </li>
+    <li
+      data-separator="/"
+    >
+      <span
+        className="leading-relaxed text-body text-[--c-text-primary]"
+      >
+        A design system called Mountain UI
+      </span>
+    </li>
+  </ol>
+</nav>
+`;
+
 exports[`Storyshots Molecules/MntCodeBlock Main 1`] = `
 <div
   className="mnt-codeblock"