@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/src/navigation/BackLink/{index.mdx → doc.mdx}

@@ -9,15 +9,11 @@ Use the back link component to help users go back to the previous page in a mult
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/BackLink/__stories__/Default.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["BackLink"]} />
+<ComponentProps componentName={["BackLink", "BackLinkBase"]} />
 

package/src/navigation/BackLink/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All BackLink variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/BackLink/index.tsx

@@ -1,3 +1,20 @@
-export * from '@digigov/react-core/BackLink';
-import BackLink from '@digigov/react-core/BackLink';
+export * from '@digigov/react-core/BackLinkBase';
+import React from 'react';
+import {
+  BackLinkBase,
+  BackLinkBaseProps,
+} from '@digigov/react-core/BackLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface BackLinkProps extends BackLinkBaseProps {}
+
+export const BackLink = React.forwardRef<HTMLAnchorElement, BackLinkProps>(
+  function BackLink({ children, ...props }, ref) {
+    return (
+      <BackLinkBase as={Link} ref={ref} {...props}>
+        {children}
+      </BackLinkBase>
+    );
+  }
+);
 export default BackLink;

package/src/navigation/BackLink/interaction.test.tsx

@@ -4,12 +4,16 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';
 
 test('renders the Default Click link', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>a").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>a').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/BackToTopLink/index.test.tsx

@@ -18,6 +18,10 @@ test('renders the All BackToTopLink variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/BackToTopLink/index.tsx

@@ -34,9 +34,8 @@ export const BackToTop: React.FC<BackToTopProps> = React.forwardRef(
     ...props
   }) {
     const [persistent, setPersistent] = useState<boolean>(false);
-    const callSetPersistent = (value) => {
+    const callSetPersistent = (value) =>
       window.scrollY > 0 && setPersistent(value);
-    };
     useObserver(topLimitId, callSetPersistent);
     useObserver('back-to-top-element', callSetPersistent);
 

package/src/navigation/Breadcrumbs/Breadcrumbs.stories.js

@@ -10,5 +10,5 @@ export default {
 export { Default } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Default';
 export { WithoutCurrentPage } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage';
 export { WithHook } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithHook';
+export { WithProvider } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithProvider';
 export { Auto } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Auto';
-

package/src/navigation/Breadcrumbs/BreadcrumbsListItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+  BreadcrumbsListItemWrapper,
+  BreadcrumbsListItemWrapperProps,
+} from '@digigov/react-core/BreadcrumbsListItemWrapper';
+import Link from '@digigov/ui/navigation/Link';
+
+export interface BreadcrumbsListItemProps
+  extends BreadcrumbsListItemWrapperProps {
+  href?: string;
+}
+
+const BreadcrumbsListItem: React.FC<BreadcrumbsListItemProps> = ({
+  href,
+  children,
+  ...props
+}) => {
+  return (
+    <BreadcrumbsListItemWrapper {...props}>
+      <Link
+        href={href}
+        defaultStyle={false}
+        className={clsx({
+          'ds-breadcrumbs__link': true,
+          'ds-breadcrumbs__link--inactive': href === undefined,
+        })}
+      >
+        {children}
+      </Link>
+    </BreadcrumbsListItemWrapper>
+  );
+};
+
+export { BreadcrumbsListItem };
+export default BreadcrumbsListItem;

package/src/navigation/Breadcrumbs/BreadcrumbsListItemLink.tsx

@@ -0,0 +1,22 @@
+export * from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+import React from 'react';
+import {
+  BreadcrumbsListItemLinkBase,
+  BreadcrumbsListItemLinkBaseProps,
+} from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface BreadcrumbsListItemLinkProps
+  extends BreadcrumbsListItemLinkBaseProps {}
+
+export const BreadcrumbsListItemLink = React.forwardRef<
+  HTMLAnchorElement,
+  BreadcrumbsListItemLinkProps
+>(function BreadcrumbsListItemLink({ children, ...props }, ref) {
+  return (
+    <BreadcrumbsListItemLinkBase as={Link} ref={ref} {...props}>
+      {children}
+    </BreadcrumbsListItemLinkBase>
+  );
+});
+export default BreadcrumbsListItemLink;

package/src/navigation/Breadcrumbs/__stories__/Auto.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import { List, ListItem } from '@digigov/ui/content/List';
+import { Button } from '@digigov/ui/form/Button/';
 import {
   BreadcrumbsAuto,
   BreadcrumbsListAuto,
   useBreadcrumbsContext,
 } from '@digigov/ui/navigation/Breadcrumbs/auto';
+import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
 import { Heading } from '@digigov/ui/typography';
-import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
-import { Button } from '@digigov/ui/form/Button/';
-import { ConfigData, } from '@digigov/ui/navigation/Breadcrumbs/hooks';
 
-const items: ConfigData[] = [
+const items: BreadcrumbItem[] = [
   {
     title: 'Νομοθεσία Πυροπροστασίας',
     children: [
@@ -147,16 +146,26 @@ const items: ConfigData[] = [
 
 const getListChild = (item, setActive) => {
   return item.children ? (
-    <List listStyle="number">
-      <ListItem>
-        <Heading size="md">{item.title}</Heading>
+    <>
+      <Heading size="sm" mb={0}>
+        {item.title}
+      </Heading>
+      <List listStyle="number">
         {item.children?.map((subMenu, key) => (
           <ListItem key={key}>{getListChild(subMenu, setActive)}</ListItem>
         ))}
-      </ListItem>
-    </List>
+      </List>
+    </>
   ) : (
-    <Button variant='link' role="menuitem" id={item.title} onClick={(e) => { e.preventDefault(), setActive(item) }}>
+    <Button
+      variant="link"
+      role="menuitem"
+      id={item.title}
+      onClick={(e) => {
+        e.preventDefault();
+        setActive(item);
+      }}
+    >
       {item.title}
     </Button>
   );
@@ -164,22 +173,29 @@ const getListChild = (item, setActive) => {
 
 export const Auto = () => {
   return (
-    <BreadcrumbsAuto items={items} hrefGenerator={(item) => { return item.href ? item.href : slug(item.title, 100) }}>
-      <BreadcrumbsListAuto />
+    <BreadcrumbsAuto
+      items={items}
+      initialUrlRoute="/nomothesia-pyroprostasias/odigies-epi-protypon-pyroprostasias"
+    >
+      <BreadcrumbsListAuto mb={8} />
       <ContentRoutes />
     </BreadcrumbsAuto>
   );
 };
 
 const ContentRoutes = () => {
-  const { active, setActive } = useBreadcrumbsContext();
+  const { breadcrumbs, setActiveItem } = useBreadcrumbsContext();
 
-  return <>
-    <Heading size="xl">
-      {active?.title}
-    </Heading>
-    {items.map((item) => getListChild(item, setActive))}
-  </>;
+  return (
+    <>
+      {breadcrumbs.length > 0 && (
+        <Heading size="xl">
+          {breadcrumbs[breadcrumbs.length - 1]?.title}
+        </Heading>
+      )}
+      {items.map((item) => getListChild(item, setActiveItem))}
+    </>
+  );
 };
 
-export default Auto;
+export default Auto;

package/src/navigation/Breadcrumbs/__stories__/WithHook.tsx

@@ -1,21 +1,26 @@
 import React from 'react';
 import { List, ListItem } from '@digigov/ui/content/List';
+import { Button } from '@digigov/ui/form/Button';
 import {
   Breadcrumbs,
   BreadcrumbsList,
   BreadcrumbsListItem,
 } from '@digigov/ui/navigation/Breadcrumbs';
-import { Button } from '@digigov/ui/form/Button';
+import {
+  useBreadcrumbs,
+  BreadcrumbItem,
+} from '@digigov/ui/navigation/Breadcrumbs/hooks';
 import { Heading } from '@digigov/ui/typography';
-import { useBreadcrumbs } from '@digigov/ui/navigation/Breadcrumbs/hooks';
-import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
-import { ConfigData, } from '@digigov/ui/navigation/Breadcrumbs/hooks';
 
-const items: ConfigData[] = [
+const items: BreadcrumbItem[] = [
   {
     title: 'Νομοθεσία Πυροπροστασίας',
     children: [
-      { title: 'Εγχειρίδια Νομοθεσίας Πυρασφάλειας', pdf: '#', href: "echiridia-nomothesia-pyroprostasias" },
+      {
+        title: 'Εγχειρίδια Νομοθεσίας Πυρασφάλειας',
+        pdf: '#',
+        href: 'echiridia-nomothesia-pyroprostasias',
+      },
       { title: 'Διάγραμμα Ισχύουσας Νομοθεσίας' },
       { title: 'Οδηγίες Επί Προτύπων Πυροπροστασίας' },
       { title: 'Απλουστεύσεις Διαδικασιών' },
@@ -145,36 +150,55 @@ const items: ConfigData[] = [
     ],
   },
 ];
+
 // creates the ol>li lists for the items data
 const getListChild = (item, setActive) => {
   return item.children ? (
-    <List listStyle="number">
-      <ListItem>
-        <Heading size="md">{item.title}</Heading>
+    <>
+      <Heading size="sm" mb={0}>
+        {item.title}
+      </Heading>
+      <List listStyle="number">
         {item.children?.map((subMenu, key) => (
           <ListItem key={key}>{getListChild(subMenu, setActive)}</ListItem>
         ))}
-      </ListItem>
-    </List>
+      </List>
+    </>
   ) : (
-    <Button variant="link" role="menuitem" id={item.title} onClick={(e) => { e.preventDefault(); setActive(item) }}>
+    <Button
+      variant="link"
+      role="menuitem"
+      id={item.title}
+      onClick={(e) => {
+        e.preventDefault();
+        setActive(item);
+      }}
+    >
       {item.title}
     </Button>
   );
 };
 
 export const WithHook = () => {
-  const { breadcrumbs, setActive } = useBreadcrumbs(items, (item) => { return item.href ? item.href : slug(item.title, 100) });
+  // initialUrlRoute: '/nomothesia-pyroprostasias/odigies-epi-protypon-pyroprostasias'
+  // is to simulate that the user lands to a specific url
+  const { breadcrumbs, setActiveItem } = useBreadcrumbs(
+    items,
+    '/nomothesia-pyroprostasias/odigies-epi-protypon-pyroprostasias'
+  );
   return (
     <>
-      {breadcrumbs.length > 0 && (
-        <Breadcrumbs marginBottom={8}>
+      {breadcrumbs.length > 1 && (
+        <Breadcrumbs mb={8}>
           <BreadcrumbsList>
             {breadcrumbs.map((breadcrumb, index) => (
               <BreadcrumbsListItem
                 key={index}
-                href={breadcrumb.href}
-                aria-current={breadcrumb.active ? "page" : undefined}
+                href={breadcrumbs.length - 1 === index ? undefined : '#'}
+                onClick={() => setActiveItem(breadcrumb)}
+                aria-current={
+                  breadcrumbs.length - 1 === index ? 'page' : undefined
+                }
               >
                 {breadcrumb.title}
               </BreadcrumbsListItem>
@@ -187,9 +211,9 @@ export const WithHook = () => {
           {breadcrumbs[breadcrumbs.length - 1]?.title}
         </Heading>
       )}
-      {items.map((item) => getListChild(item, setActive))}
+      {items.map((item) => getListChild(item, setActiveItem))}
     </>
   );
 };
 
-export default WithHook;
+export default WithHook;

package/src/navigation/Breadcrumbs/__stories__/WithProvider.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  Breadcrumbs,
+  BreadcrumbsList,
+  BreadcrumbsListItem,
+} from '@digigov/ui/navigation/Breadcrumbs';
+import { LinkProvider } from '@digigov/ui/navigation/Link';
+
+const CustomLink: React.FC<any> = (props) => {
+  return <div>custom link: {props.children}</div>;
+};
+
+export const WithProvider = () => (
+  <LinkProvider component={CustomLink}>
+    <Breadcrumbs role="navigation">
+      <BreadcrumbsList>
+        <BreadcrumbsListItem href="#">Αρχική</BreadcrumbsListItem>
+        <BreadcrumbsListItem href="#">Υγεία και πρόνοια</BreadcrumbsListItem>
+        <BreadcrumbsListItem href="#">Φάκελος υγείας</BreadcrumbsListItem>
+        <BreadcrumbsListItem aria-current="page">
+          Άυλη συνταγογράφηση
+        </BreadcrumbsListItem>
+      </BreadcrumbsList>
+    </Breadcrumbs>
+  </LinkProvider>
+);
+
+export default WithProvider;

package/src/navigation/Breadcrumbs/auto.tsx

@@ -1,18 +1,32 @@
 import React, { createContext, useContext, ReactNode } from 'react';
-import { Breadcrumbs, BreadcrumbsList, BreadcrumbsListItem, BreadcrumbsProps } from '@digigov/ui/navigation/Breadcrumbs';
-import { useBreadcrumbs, UseBreadcrumbsReturn, ConfigData, ChildrenData } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+import {
+  Breadcrumbs,
+  BreadcrumbsList,
+  BreadcrumbsListItem,
+  BreadcrumbsProps,
+} from '@digigov/ui/navigation/Breadcrumbs';
+import {
+  useBreadcrumbs,
+  UseBreadcrumbsReturn,
+  BreadcrumbItem,
+} from '@digigov/ui/navigation/Breadcrumbs/hooks';
 
-export interface BreadcrumbsListAutoProps extends BreadcrumbsProps { }
-export interface BreadcrumbsAutoProps extends BreadcrumbsProps { }
-export interface BreadcrumbsAutoProps {
-  items: ConfigData[];
-  hrefGenerator: (value: ChildrenData) => string;
+export interface BreadcrumbsListAutoProps extends BreadcrumbsProps {}
+export interface BreadcrumbsAutoProps extends BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  initialUrlRoute?: string;
   children: ReactNode;
-};
-export const BreadcrumbsContext = createContext<UseBreadcrumbsReturn | null>(null);
+}
+export const BreadcrumbsContext = createContext<UseBreadcrumbsReturn | null>(
+  null
+);
 
-export const BreadcrumbsAuto = ({ items, hrefGenerator, children }: BreadcrumbsAutoProps) => {
-  const breadcrumbs = useBreadcrumbs(items, hrefGenerator);
+export const BreadcrumbsAuto = ({
+  items,
+  initialUrlRoute,
+  children,
+}: BreadcrumbsAutoProps) => {
+  const breadcrumbs = useBreadcrumbs(items, initialUrlRoute);
 
   return (
     <BreadcrumbsContext.Provider value={breadcrumbs}>
@@ -34,22 +48,24 @@ export const useBreadcrumbsContext = (): UseBreadcrumbsReturn => {
 export const BreadcrumbsListAuto = React.forwardRef<
   HTMLDivElement,
   BreadcrumbsListAutoProps
->(function (props, ref) {
-  const { breadcrumbs } = useBreadcrumbsContext();
+>(function BreadcrumbsListAuto(props, ref) {
+  const { breadcrumbs, setActiveItem } = useBreadcrumbsContext();
   return (
     <Breadcrumbs ref={ref} role="navigation" {...props}>
       <BreadcrumbsList>
-        {breadcrumbs.map((item, index) => (
+        {breadcrumbs.map((breadcrumb, index) => (
           <BreadcrumbsListItem
             key={index}
-            href={item.href}
-            aria-current={item.active ? "page" : undefined}
+            href={
+              breadcrumbs.length - 1 === index ? undefined : breadcrumb.href
+            }
+            onClick={() => setActiveItem(breadcrumb)}
+            aria-current={breadcrumbs.length - 1 === index ? 'page' : undefined}
           >
-            {item.title}
+            {breadcrumb.title}
           </BreadcrumbsListItem>
         ))}
       </BreadcrumbsList>
-
     </Breadcrumbs>
   );
-});
+});

package/src/navigation/Breadcrumbs/{index.mdx → doc.mdx}

@@ -11,11 +11,11 @@ The Breadcrumbs component lets users show and hide sections of related content o
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Breadcrumbs"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/Default.tsx" />
+
+### Without current page
+
+<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />
 
 ## Accessibility
 

package/src/navigation/Breadcrumbs/hooks.ts

@@ -1,75 +1,66 @@
-import { useCallback, useMemo, useState, } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
 import { flattenRoutes } from '@digigov/ui/navigation/Breadcrumbs/utils';
 
-export interface ChildrenData {
-  title: string;
-  href?: string;
-  pdf?: string;
-  children?: ChildrenData[];
-}
-
-export interface ConfigData {
-  title: string;
-  children?: ChildrenData[];
-
-}
-
 export interface BreadcrumbItem {
   title: string;
   href?: string;
-  active?: boolean;
-}
-
-export interface CurrentItem {
-  title: string;
-  children: CurrentItem[];
-  parents: string[];
+  [key: string]: unknown;
 }
 
 export interface UseBreadcrumbsReturn {
-  breadcrumbs: Array<BreadcrumbItem>;
-  active: CurrentItem;
-  setActive: (item: string) => void;
+  breadcrumbs: BreadcrumbItem[];
+  currentRoute: string;
+  setActiveItem: (item: BreadcrumbItem) => void;
 }
 
 export const useBreadcrumbs = (
-  items: ConfigData[],
-  hrefGenerator: (value: ChildrenData) => string,
+  items: BreadcrumbItem[],
+  initialUrlRoute?: string
 ): UseBreadcrumbsReturn => {
   const routes = useMemo(() => flattenRoutes(items, 100), [items]);
-  const [currentPath, setCurrentPath] = useState('');
-
-  const setActive = useCallback((item) => {
-    const itemHref = item.href ?? hrefGenerator(item)
-    setCurrentPath(() => {
-      const newRoute = Object.keys(routes).find((route) =>
-        route.endsWith(itemHref)
-      );
-      return newRoute || '/';
-    });
-  }, [routes]);
+  const [currentRoute, setCurrentRoute] = useState(initialUrlRoute || '');
 
-  const getParentPath = useCallback((parent: string): string => {
-    return Object.keys(routes).find(
-      (path) => routes[path].title === parent
-    ) || '#';
-  }, [currentPath]);
+  const setActiveItem = useCallback(
+    (item) => {
+      const itemHref = item.href ?? slug(item.title, 100);
+      setCurrentRoute(() => {
+        const selectedRoute = Object.keys(routes).find((route) =>
+          route.endsWith(itemHref)
+        );
+        return selectedRoute || '/';
+      });
+    },
+    [routes]
+  );
 
-  const active = routes[currentPath.replace(/\/$/, '')];
-  const breadcrumbs = active?.parents.map((parent) => ({
-    title: parent,
-    href: `#${getParentPath(parent)}`
-  })) || [];
-  if (active?.title) {
-    breadcrumbs.push({
-      title: active.title,
-      active: true,
-    });
-  }
+  const constructBreadcrumbs = useCallback(
+    (routes): BreadcrumbItem[] => {
+      if (currentRoute) {
+        const selectedBreadcrumb = routes[currentRoute];
+        return [
+          ...(selectedBreadcrumb?.parents?.map((parent) => {
+            return {
+              title: parent,
+              href: Object.keys(routes).find((route) => {
+                return routes[route].title === parent;
+              }),
+            };
+          }) || []),
+          {
+            title: selectedBreadcrumb?.title,
+            href: currentRoute,
+          },
+        ];
+      }
+      return [];
+    },
+    [currentRoute]
+  );
 
   return {
-    breadcrumbs,
-    active,
-    setActive,
+    breadcrumbs: constructBreadcrumbs(routes),
+    currentRoute,
+    setActiveItem,
   };
 };

package/src/navigation/Breadcrumbs/index.test.tsx

@@ -5,6 +5,7 @@ import { Auto } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Auto';
 import { Default } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Default';
 import { WithHook } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithHook';
 import { WithoutCurrentPage } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage';
+import { WithProvider } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithProvider';
 
 test('renders the All Breadcrumbs variants', async ({ mount, page }) => {
   await mount(
@@ -22,10 +23,17 @@ test('renders the All Breadcrumbs variants', async ({ mount, page }) => {
     <TestVariant title="WithoutCurrentPage">
       <WithoutCurrentPage />
     </TestVariant>
+    <TestVariant title="WithProvider">
+      <WithProvider />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/Breadcrumbs/index.tsx

@@ -1,8 +1,10 @@
 export * from '@digigov/react-core/Breadcrumbs';
 export * from '@digigov/react-core/BreadcrumbsList';
-export * from '@digigov/react-core/BreadcrumbsListItem';
+export * from '@digigov/react-core/BreadcrumbsListItemWrapper';
+export * from '@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItemLink';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
 
+export * from '@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItem';
 export * from '@digigov/ui/navigation/Breadcrumbs/utils';
 
 export default Breadcrumbs;