feature(component): Rewrite Breadcrumbs to use themes, resolves #129

src/lib/components/Breadcrumb/Breadcrumb.spec.tsx

@@ -1,13 +1,124 @@
 import { render } from '@testing-library/react';
 import { HiHome } from 'react-icons/hi';
 import { Breadcrumb } from '.';
+import { Flowbite } from '../Flowbite';
 
-describe('Breadcrumb', () => {
-  describe('given an aria-label', () => {
-    it('should override default aria-label', () => {
+describe('Components / Breadcrumb', () => {
+  describe('Props', () => {
+    it('should ignore `className` on `Breadcrumb.Item`s', () => {
+      const { getByRole } = render(
+        <Breadcrumb>
+          <Breadcrumb.Item href="#" icon={HiHome} className="test testing">
+            Home
+          </Breadcrumb.Item>
+        </Breadcrumb>,
+      );
+
+      const itemWithClassName = getByRole('listitem');
+
+      expect(itemWithClassName).not.toHaveClass('test testing');
+    });
+  });
+
+  describe('Theme', () => {
+    it('should use custom list classes', () => {
+      const theme = {
+        breadcrumb: {
+          list: 'gap-6',
+        },
+      };
+
+      const { getByRole } = render(
+        <Flowbite theme={{ theme }}>
+          <BreadcrumbTest />
+        </Flowbite>,
+      );
+
+      expect(getByRole('list')).toHaveClass('gap-6');
+    });
+
+    it('should use custom item classes', () => {
+      const theme = {
+        breadcrumb: {
+          item: {
+            base: 'justify-center',
+            chevron: 'h-9 w-9',
+            href: {
+              off: 'text-md',
+              on: 'text-lg',
+            },
+            icon: 'h-6 w-6',
+          },
+        },
+      };
+
+      const { getAllByRole, getAllByTestId } = render(
+        <Flowbite theme={{ theme }}>
+          <BreadcrumbTest />
+        </Flowbite>,
+      );
+
+      const wrappers = getAllByRole('listitem');
+      const items = getAllByTestId('flowbite-breadcrumb-item');
+
+      const linkWrapper = wrappers[0];
+      const linkItem = items[0];
+
+      expect(linkWrapper).toHaveClass('justify-center');
+      expect(linkItem).toHaveAttribute('href');
+      expect(linkItem).toHaveClass('text-lg');
+
+      const noLinkWrapper = wrappers[2];
+      const noLinkItem = items[2];
+
+      expect(noLinkItem).not.toHaveAttribute('href');
+      expect(noLinkWrapper).toHaveClass('justify-center');
+      expect(noLinkItem).toHaveClass('text-md');
+    });
+  });
+
+  describe('A11y', () => {
+    it('should have `role="navigation"`', () => {
       const { getByRole } = render(<BreadcrumbTest />);
 
       const breadcrumb = getByRole('navigation');
+
+      expect(breadcrumb).toBeInTheDocument();
+    });
+
+    it('should contain a `role="list"`', () => {
+      const { getByRole } = render(<BreadcrumbTest />);
+
+      const breadcrumb = getByRole('navigation');
+      const breadcrumbsList = getByRole('list');
+
+      expect(breadcrumb).toContainElement(breadcrumbsList);
+    });
+
+    it('should contain a `role="listitem"` for each `Breadcrumb.Item`', () => {
+      const { getAllByRole } = render(<BreadcrumbTest />);
+
+      const breadcrumbs = getAllByRole('listitem');
+
+      expect(breadcrumbs[0]).toHaveTextContent('Home');
+      expect(breadcrumbs[1]).toHaveTextContent('Projects');
+      expect(breadcrumbs[2]).toHaveTextContent('Flowbite React');
+    });
+
+    it('should contain a `role="link"` for each `Breadcrumb.Item href=".."`', () => {
+      const { getAllByRole } = render(<BreadcrumbTest />);
+
+      const breadcrumbLinks = getAllByRole('link');
+
+      expect(breadcrumbLinks[0]).toHaveTextContent('Home');
+      expect(breadcrumbLinks[1]).toHaveTextContent('Projects');
+    });
+
+    it('should use `aria-label` if provided', () => {
+      const { getByRole } = render(<BreadcrumbTest />);
+
+      const breadcrumb = getByRole('navigation');
+
       expect(breadcrumb).toHaveAccessibleName('test label');
     });
   });

src/lib/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,42 +1,27 @@
 import { FC, ComponentProps, PropsWithChildren } from 'react';
 import { HiOutlineChevronRight } from 'react-icons/hi';
+import { excludeClassName } from '../../helpers/exclude';
+import { useTheme } from '../Flowbite/ThemeContext';
 
-export interface BreadcrumbItemProps extends ComponentProps<'li'> {
+export interface BreadcrumbItemProps extends PropsWithChildren<ComponentProps<'li'>> {
   href?: string;
   icon?: FC<ComponentProps<'svg'>>;
 }
 
-const BreadcrumbItem: FC<PropsWithChildren<BreadcrumbItemProps>> = ({
-  children,
-  href,
-  icon: Icon,
-  ...rest
-}): JSX.Element => {
+const BreadcrumbItem: FC<BreadcrumbItemProps> = ({ children, href, icon: Icon, ...props }): JSX.Element => {
+  const isLink = typeof href !== 'undefined';
+  const theirProps = excludeClassName(props);
+  const theme = useTheme().theme.breadcrumb.item;
+
+  const Component = isLink ? 'a' : 'span';
+
   return (
-    <li className="group flex items-center" {...rest}>
-      <HiOutlineChevronRight
-        aria-hidden="true"
-        className="mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2"
-        data-testid="breadcrumb-separator"
-      />
-      {typeof href !== 'undefined' ? (
-        <a
-          className="flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-          data-testid="breadcrumb-item"
-          href={href}
-        >
-          {Icon && <Icon aria-hidden="true" className="mr-2 h-4 w-4" />}
-          {children}
-        </a>
-      ) : (
-        <span
-          className="flex items-center text-sm font-medium text-gray-400 dark:text-gray-500"
-          data-testid="breadcrumb-item"
-        >
-          {Icon && <Icon aria-hidden="true" className="mr-2 h-4 w-4" />}
-          {children}
-        </span>
-      )}
+    <li className={theme.base} {...theirProps}>
+      <HiOutlineChevronRight aria-hidden className={theme.chevron} data-testid="flowbite-breadcrumb-separator" />
+      <Component className={theme.href[isLink ? 'on' : 'off']} data-testid="flowbite-breadcrumb-item" href={href}>
+        {Icon && <Icon aria-hidden className={theme.icon} />}
+        {children}
+      </Component>
     </li>
   );
 };

src/lib/components/Breadcrumb/index.tsx

@@ -1,10 +1,13 @@
 import { ComponentProps, FC } from 'react';
+import { useTheme } from '../Flowbite/ThemeContext';
 import BreadcrumbItem from './BreadcrumbItem';
 
-const BreadcrumbComponent: FC<ComponentProps<'nav'>> = ({ children, ...rest }): JSX.Element => {
+const BreadcrumbComponent: FC<ComponentProps<'nav'>> = ({ children, ...props }): JSX.Element => {
+  const theme = useTheme().theme.breadcrumb;
+
   return (
-    <nav aria-label="Breadcrumb" {...rest}>
-      <ol className="flex items-center">{children}</ol>
+    <nav aria-label="Breadcrumb" {...props}>
+      <ol className={theme.list}>{children}</ol>
     </nav>
   );
 };

src/lib/components/Flowbite/FlowbiteTheme.d.ts

@@ -59,6 +59,18 @@ export interface FlowbiteTheme {
     };
     size: BadgeSizes;
   };
+  breadcrumb: {
+    item: {
+      base: string;
+      chevron: string;
+      href: {
+        off: string;
+        on: string;
+      };
+      icon: string;
+    };
+    list: string;
+  };
 }
 
 export type Colors = FlowbiteColors & {

src/lib/theme/default.ts

@@ -98,4 +98,16 @@ export default {
       sm: 'p-1.5 text-sm',
     },
   },
+  breadcrumb: {
+    item: {
+      base: 'group flex items-center',
+      chevron: 'mx-1 h-6 w-6 text-gray-400 group-first:hidden md:mx-2',
+      href: {
+        off: 'flex items-center text-sm font-medium text-gray-400 dark:text-gray-500',
+        on: 'flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',
+      },
+      icon: 'mr-2 h-4 w-4',
+    },
+    list: 'flex items-center',
+  },
 };