@digigov/ui 2.0.0-113e6661 → 2.0.0-2177f152

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

@@ -1,32 +1,37 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Breadcrumbs variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Auto">
-      <Auto />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="WithHook">
-      <WithHook />
-    </TestVariant>
-    <TestVariant title="WithoutCurrentPage">
-      <WithoutCurrentPage />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Auto">
+        <Auto />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="WithHook">
+        <WithHook />
+      </TestVariant>
+      <TestVariant title="WithoutCurrentPage">
+        <WithoutCurrentPage />
+      </TestVariant>
+      <TestVariant title="WithProvider">
+        <WithProvider />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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/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/interaction.test.tsx

@@ -1,42 +1,44 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
+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 { Auto } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Auto';
 
 test('renders the Default Hover and click', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
-  await page.locator("#root>nav>ol>li:nth-child(1)>a").hover();
-  await page.locator("#root>nav>ol>li:nth-child(1)>a").click();
-  await page.keyboard.press("Tab");
-
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>nav>ol>li:nth-child(1)>a').hover();
+  await page.locator('#root>nav>ol>li:nth-child(1)>a').click();
+  await page.keyboard.press('Tab');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
 
 test('renders the WithHook click', async ({ mount, page }) => {
-  await mount(
-    <WithHook />
-  )
+  await mount(<WithHook />);
   await page.evaluate(() => document.fonts.ready);
   await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
 
 test('renders the Auto click', async ({ mount, page }) => {
-  await mount(
-    <Auto />
-  )
+  await mount(<Auto />);
   await page.evaluate(() => document.fonts.ready);
   await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-

package/src/navigation/Breadcrumbs/slug.ts

@@ -1,6 +1,6 @@
 export function slug(text: string, maxWidth = 50): string {
   // Greek to Latin character mapping
-  const greekToLatinMap: { [key: string]: string } = {
+  const greekToLatinMap: Record<string, string> = {
     α: 'a',
     β: 'b',
     γ: 'g',
@@ -82,8 +82,8 @@ export function slug(text: string, maxWidth = 50): string {
   const processedText = latinText
     .toLowerCase()
     .replace(/\s+/g, '-')
-    .replace(/[^\w\-]+/g, '')
-    .replace(/\-\-+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
     .replace(/^-+/, '')
     .replace(/-+$/, '');
 

package/src/navigation/Breadcrumbs/utils.ts

@@ -2,8 +2,8 @@
 import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
 export const flattenRoutes = (
   items,
-  maxLength: number = 15,
-  prepend: string = '',
+  maxLength = 15,
+  prepend = '',
   parents: string[] = []
 ) => {
   let flattened = {};
@@ -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

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { Drawer } from '@digigov/ui/navigation/Drawer';
-import { DrawerHeading } from '@digigov/ui/navigation/Drawer';
+import { Drawer, 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 +51,6 @@ const links = [
 
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
-
   const layout = 'vertical';
   const border = false;
   const fixed = false;
@@ -72,4 +70,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/Drawer/index.test.tsx

@@ -1,28 +1,29 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Auto } from '@digigov/ui/navigation/Drawer/__stories__/Auto';
 import { Default } from '@digigov/ui/navigation/Drawer/__stories__/Default';
 import { WithHook } from '@digigov/ui/navigation/Drawer/__stories__/WithHook';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Drawer variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Auto">
-      <Auto />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="WithHook">
-      <WithHook />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Auto">
+        <Auto />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="WithHook">
+        <WithHook />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/Dropdown/Dropdown.stories.js

@@ -3,8 +3,7 @@ export default {
   title: 'Digigov UI/navigation/Dropdown',
   description:
     'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
-  link:
-    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
   component: Dropdown,
   displayName: 'Dropdown',
 };

package/src/navigation/Dropdown/__stories__/AlignRight.tsx

@@ -3,8 +3,7 @@ import React from 'react';
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import {