@digigov/ui 2.0.0-113e6661 → 2.0.0-298cfc51

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

@@ -9,11 +9,7 @@ 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
 

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,34 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@digigov/ui/navigation/Link';
+import BreadcrumbsListItemBase, {
+  BreadcrumbsListItemBaseProps,
+} from '@digigov/react-core/BreadcrumbsListItem';
+
+export interface BreadcrumbsListItemProps extends BreadcrumbsListItemBaseProps {
+  href?: string;
+}
+
+const BreadcrumbsListItem: React.FC<BreadcrumbsListItemProps> = ({
+  href,
+  children,
+  ...props
+}) => {
+  return (
+    <BreadcrumbsListItemBase {...props}>
+      <Link
+        href={href}
+        defaultStyle={false}
+        className={clsx({
+          'ds-breadcrumbs__link': true,
+          'ds-breadcrumbs__link--inactive': href === undefined,
+        })}
+      >
+        {children}
+      </Link>
+    </BreadcrumbsListItemBase>
+  );
+};
+
+export { BreadcrumbsListItem };
+export default BreadcrumbsListItem;

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

@@ -6,11 +6,10 @@ import {
   useBreadcrumbsContext,
 } from '@digigov/ui/navigation/Breadcrumbs/auto';
 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';
+import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
 
-const items: ConfigData[] = [
+const items: BreadcrumbItem[] = [
   {
     title: 'Νομοθεσία Πυροπροστασίας',
     children: [
@@ -147,16 +146,25 @@ 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 +172,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,24 @@
 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 { 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';
+import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+import { Heading } from '@digigov/ui/typography';
 
-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 +148,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 +209,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 { LinkProvider } from '@digigov/ui/navigation/Link';
+import {
+  Breadcrumbs,
+  BreadcrumbsList,
+  BreadcrumbsListItem,
+} from '@digigov/ui/navigation/Breadcrumbs';
+
+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,33 @@
 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 BreadcrumbsListAutoProps extends BreadcrumbsProps {}
+export interface BreadcrumbsAutoProps extends BreadcrumbsProps {}
 export interface BreadcrumbsAutoProps {
-  items: ConfigData[];
-  hrefGenerator: (value: ChildrenData) => string;
+  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 +49,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,6 +23,9 @@ 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);

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/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;

package/src/navigation/Breadcrumbs/utils.ts

@@ -15,9 +15,9 @@ export const flattenRoutes = (
 
     const routeChildren = children
       ? children.map((child) => ({
-        href: child.href || slug(child.title, maxLength),
-        ...child,
-      }))
+          href: child.href || slug(child.title, maxLength),
+          ...child,
+        }))
       : [];
 
     flattened[route] = {

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

@@ -64,7 +64,7 @@ export const Auto = () => {
       <DrawerProvider>
         <AdminHeader>
           <AdminHeaderContent>
-            <GovGRLogo></GovGRLogo>
+            <GovGRLogo />
             <DrawerButtonAuto
               drawer="drawer-1"
               className="md:hidden"
@@ -102,3 +102,5 @@ export const Auto = () => {
     </AdminLayout>
   );
 };
+
+export default Auto;

package/src/navigation/Drawer/__stories__/Default.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/navigation/Drawer';
 import { DrawerHeading } from '@digigov/ui/navigation/Drawer';
 import { NavListAuto } from '@digigov/ui/navigation/NavList';
-import Heading from '@digigov/ui/typography/Heading';
+import { Heading } from '@digigov/ui/typography/Heading';
 
 function useDrawer(): [boolean, () => void] {
   const [open, setOpen] = useState(true);
@@ -52,7 +52,6 @@ const links = [
 
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
-
   const layout = 'vertical';
   const border = false;
   const fixed = false;
@@ -72,4 +71,5 @@ export const Default = () => {
     </Drawer>
   );
 };
+
 export default Default;

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

@@ -3,9 +3,13 @@ id: drawer
 title: Drawer
 ---
 
+import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+
+# Drawer
+
 ## How to use
 
-<Story packageName="@digigov/ui" component="navigation/Drawer" story="Default.tsx" />
+<code src="@digigov/ui/navigation/Drawer/__stories__/Default.tsx" />
 
 ## API
 

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

@@ -7,31 +7,19 @@ title: Dropdown
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
 
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="AlignRight.tsx"
-/>
+<code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
 
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="PlacementTop.tsx"
-/>
+<code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
 
 ## API