Merge pull request #176 from reaviz/Add-breadcrumbs

Add breadcrumbs component

docs/components/layout/Breadcrumbs.mdx

@@ -0,0 +1,33 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/addon-docs';
+import { Breadcrumbs, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator, breadcrumbsTheme } from '../../../src/layout/Breadcrumbs';
+import * as BreadcrumbsStories from '../../../src/layout/Breadcrumbs/Breadcrumbs.story';
+import ThemeRender from '../../ThemeRender.tsx';
+
+<Meta title="Docs/Components/Layout/Breadcrumbs" />
+
+# Breadcrumbs
+Breadcrumbs are a navigation component that shows the user's location within a website or application.
+
+## Example
+<Canvas sourceState="shown" of={BreadcrumbsStories.Basic}/>
+
+## Theme
+This component uses the following default theme:
+
+<ThemeRender theme={breadcrumbsTheme} />
+
+Learn more about how to customize in the [Theme documentation](?path=/docs/docs-theme-getting-started--docs).
+
+## API
+
+### Breadcrumbs
+<ArgTypes of={Breadcrumbs} />
+
+### BreadcrumbList
+<ArgTypes of={BreadcrumbList} />
+
+### BreadcrumbLink
+<ArgTypes of={BreadcrumbLink} />
+
+### BreadcrumbSeparator
+<ArgTypes of={BreadcrumbSeparator} />

src/layout/Breadcrumbs/BreadcrumbItem.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from 'react';
+import { cn } from '@/utils';
+
+export const BreadcrumbItem: FC<React.LiHTMLAttributes<HTMLLIElement>> = ({
+  className,
+  ...rest
+}) => <li className={cn('flex gap-2 items-center', className)} {...rest} />;

src/layout/Breadcrumbs/BreadcrumbLink.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { cn, useComponentTheme } from '@/utils';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const BreadcrumbLink: FC<BreadcrumbLinkProps> = ({
+  className,
+  theme: customTheme,
+  href,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return <a className={cn(theme.link, className)} href={href} {...rest} />;
+};

src/layout/Breadcrumbs/BreadcrumbList.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import { cn, useComponentTheme } from '@/utils';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbListProps
+  extends React.OlHTMLAttributes<HTMLOListElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const BreadcrumbList: FC<BreadcrumbListProps> = ({
+  className,
+  theme: customTheme,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return <ol className={cn(theme.list, className)} {...rest} />;
+};

src/layout/Breadcrumbs/BreadcrumbPage.tsx

@@ -0,0 +1,26 @@
+import { cn, useComponentTheme } from '@/utils';
+import React, { FC } from 'react';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbPageProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const BreadcrumbPage: FC<BreadcrumbPageProps> = ({
+  theme: customTheme,
+  className,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return (
+    <span
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn(theme.activePage, className)}
+      {...rest}
+    />
+  );
+};

src/layout/Breadcrumbs/BreadcrumbSeparator.tsx

@@ -0,0 +1,29 @@
+import { Arrow } from '@/elements';
+import { cn, useComponentTheme } from '@/utils';
+import React, { FC } from 'react';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbSeparatorProps
+  extends React.LiHTMLAttributes<HTMLLIElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const BreadcrumbSeparator: FC<BreadcrumbSeparatorProps> = ({
+  children = <Arrow direction="right" />,
+  className,
+  theme: customTheme,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return (
+    <li
+      role="presentation"
+      aria-hidden={true}
+      className={cn(theme.separator, className)}
+      {...rest}
+    >
+      {children}
+    </li>
+  );
+};

src/layout/Breadcrumbs/Breadcrumbs.story.tsx

@@ -0,0 +1,49 @@
+import {
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Breadcrumbs
+} from './';
+
+export default {
+  title: 'Components/Layout/Breadcrumbs',
+  component: Breadcrumbs
+};
+
+export const Basic = () => (
+  <Breadcrumbs>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Docs</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator />
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumbs>
+);
+
+export const WithCustomSeparator = () => (
+  <Breadcrumbs>
+    <BreadcrumbList>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Home</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>/</BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbLink href="/">Docs</BreadcrumbLink>
+      </BreadcrumbItem>
+      <BreadcrumbSeparator>/</BreadcrumbSeparator>
+      <BreadcrumbItem>
+        <BreadcrumbPage>Breadcrumbs</BreadcrumbPage>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumbs>
+);

src/layout/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,23 @@
+import { cn, useComponentTheme } from '@/utils';
+import React, { FC } from 'react';
+import { BreadcrumbsTheme } from './BreadcrumbsTheme';
+
+export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+  theme?: BreadcrumbsTheme;
+}
+
+export const Breadcrumbs: FC<BreadcrumbsProps> = ({
+  theme: customTheme,
+  className,
+  ...rest
+}) => {
+  const theme = useComponentTheme('breadcrumbs', customTheme);
+
+  return (
+    <nav
+      className={cn(theme.base, className)}
+      aria-label={rest?.['aria-label'] ?? 'breadcrumbs'}
+      {...rest}
+    />
+  );
+};

src/layout/Breadcrumbs/BreadcrumbsTheme.ts

@@ -0,0 +1,17 @@
+export interface BreadcrumbsTheme {
+  base: string;
+  separator: string;
+  list: string;
+  link: string;
+  activePage: string;
+}
+
+export const breadcrumbsTheme: BreadcrumbsTheme = {
+  base: '',
+  separator: '[&>svg]:size-3.5',
+  list: 'flex gap-2 items-center',
+  link: 'hover:text-panel-content text-panel-secondary-content transition-colors',
+  activePage: 'text-primary pointer-events-none'
+};
+
+export const legacyBreadcrumbTheme: BreadcrumbsTheme = breadcrumbsTheme;

src/layout/Breadcrumbs/index.ts

@@ -0,0 +1,7 @@
+export * from './Breadcrumbs';
+export * from './BreadcrumbsTheme';
+export * from './BreadcrumbItem';
+export * from './BreadcrumbLink';
+export * from './BreadcrumbList';
+export * from './BreadcrumbSeparator';
+export * from './BreadcrumbPage';

src/layout/index.ts

@@ -8,3 +8,4 @@ export * from './Stack';
 export * from './Tree';
 export * from './VerticalSpacer';
 export * from './Tabs';
+export * from './Breadcrumbs';

src/utils/Theme/themes/theme.ts

@@ -112,7 +112,10 @@ import {
   legacyDividerTheme,
   JsonTreeTheme,
   jsonTreeTheme,
-  legacyJsonTreeTheme
+  legacyJsonTreeTheme,
+  breadcrumbsTheme,
+  BreadcrumbsTheme,
+  legacyBreadcrumbTheme
 } from '@/layout';
 
 import {
@@ -182,6 +185,7 @@ export interface ReablocksTheme {
     popover: PopoverTheme;
     pager: PagerTheme;
     tabs: TabsTheme;
+    breadcrumbs: BreadcrumbsTheme;
   };
 }
 
@@ -227,7 +231,8 @@ export const theme: ReablocksTheme = {
     popover: popoverTheme,
     pager: pagerTheme,
     tabs: tabsTheme,
-    jsonTree: jsonTreeTheme
+    jsonTree: jsonTreeTheme,
+    breadcrumbs: breadcrumbsTheme
   }
 };
 
@@ -273,6 +278,7 @@ export const legacyThemeVars: ReablocksTheme = {
     popover: legacyPopoverTheme,
     pager: legacyPagerTheme,
     tabs: legacyTabsTheme,
-    jsonTree: legacyJsonTreeTheme
+    jsonTree: legacyJsonTreeTheme,
+    breadcrumbs: legacyBreadcrumbTheme
   }
 };