@digigov/ui 2.0.0-b4cd6916 → 2.0.0-c6d0b3b8

package/src/navigation/Breadcrumbs/auto.tsx

@@ -0,0 +1,71 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+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 {
+  items: BreadcrumbItem[];
+  initialUrlRoute?: string;
+  children: ReactNode;
+}
+export const BreadcrumbsContext = createContext<UseBreadcrumbsReturn | null>(
+  null
+);
+
+export const BreadcrumbsAuto = ({
+  items,
+  initialUrlRoute,
+  children,
+}: BreadcrumbsAutoProps) => {
+  const breadcrumbs = useBreadcrumbs(items, initialUrlRoute);
+
+  return (
+    <BreadcrumbsContext.Provider value={breadcrumbs}>
+      {children}
+    </BreadcrumbsContext.Provider>
+  );
+};
+
+export const useBreadcrumbsContext = (): UseBreadcrumbsReturn => {
+  const context = useContext(BreadcrumbsContext);
+  if (!context) {
+    throw new Error(
+      'BreadcrumbsContext must be used within an BreadcrumbsProvider'
+    );
+  }
+  return context;
+};
+
+export const BreadcrumbsListAuto = React.forwardRef<
+  HTMLDivElement,
+  BreadcrumbsListAutoProps
+>(function BreadcrumbsListAuto(props, ref) {
+  const { breadcrumbs, setActiveItem } = useBreadcrumbsContext();
+  return (
+    <Breadcrumbs ref={ref} role="navigation" {...props}>
+      <BreadcrumbsList>
+        {breadcrumbs.map((breadcrumb, index) => (
+          <BreadcrumbsListItem
+            key={index}
+            href={
+              breadcrumbs.length - 1 === index ? undefined : breadcrumb.href
+            }
+            onClick={() => setActiveItem(breadcrumb)}
+            aria-current={breadcrumbs.length - 1 === index ? 'page' : undefined}
+          >
+            {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

@@ -0,0 +1,66 @@
+import { useCallback, useMemo, useState } from 'react';
+import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
+import { flattenRoutes } from '@digigov/ui/navigation/Breadcrumbs/utils';
+
+export interface BreadcrumbItem {
+  title: string;
+  href?: string;
+  [key: string]: unknown;
+}
+
+export interface UseBreadcrumbsReturn {
+  breadcrumbs: BreadcrumbItem[];
+  currentRoute: string;
+  setActiveItem: (item: BreadcrumbItem) => void;
+}
+
+export const useBreadcrumbs = (
+  items: BreadcrumbItem[],
+  initialUrlRoute?: string
+): UseBreadcrumbsReturn => {
+  const routes = useMemo(() => flattenRoutes(items, 100), [items]);
+  const [currentRoute, setCurrentRoute] = useState(initialUrlRoute || '');
+
+  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 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: constructBreadcrumbs(routes),
+    currentRoute,
+    setActiveItem,
+  };
+};

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

@@ -1,23 +1,39 @@
 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';
 
 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>
+    <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,5 +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;

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

@@ -1,18 +1,56 @@
 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';
 
 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' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  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 page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the Auto click', async ({ mount, page }) => {
+  await mount(<Auto />);
+  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);
+
+  await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/Breadcrumbs/slug.ts

@@ -0,0 +1,141 @@
+export function slug(text: string, maxWidth = 50): string {
+  // Greek to Latin character mapping
+  const greekToLatinMap: Record<string, string> = {
+    α: 'a',
+    β: 'b',
+    γ: 'g',
+    δ: 'd',
+    ε: 'e',
+    ζ: 'z',
+    η: 'i',
+    θ: 'th',
+    ι: 'i',
+    κ: 'k',
+    λ: 'l',
+    μ: 'm',
+    ν: 'n',
+    ξ: 'x',
+    ο: 'o',
+    π: 'p',
+    ρ: 'r',
+    σ: 's',
+    τ: 't',
+    υ: 'y',
+    φ: 'f',
+    χ: 'ch',
+    ψ: 'ps',
+    ω: 'o',
+    ά: 'a',
+    έ: 'e',
+    ί: 'i',
+    ό: 'o',
+    ύ: 'y',
+    ή: 'i',
+    ώ: 'o',
+    ς: 's',
+    ϊ: 'i',
+    ΰ: 'y',
+    ϋ: 'y',
+    ΐ: 'i',
+    Α: 'A',
+    Β: 'B',
+    Γ: 'G',
+    Δ: 'D',
+    Ε: 'E',
+    Ζ: 'Z',
+    Η: 'I',
+    Θ: 'TH',
+    Ι: 'I',
+    Κ: 'K',
+    Λ: 'L',
+    Μ: 'M',
+    Ν: 'N',
+    Ξ: 'X',
+    Ο: 'O',
+    Π: 'P',
+    Ρ: 'R',
+    Σ: 'S',
+    Τ: 'T',
+    Υ: 'Y',
+    Φ: 'F',
+    Χ: 'CH',
+    Ψ: 'PS',
+    Ω: 'O',
+    Ά: 'A',
+    Έ: 'E',
+    Ί: 'I',
+    Ό: 'O',
+    Ύ: 'Y',
+    Ή: 'I',
+    Ώ: 'O',
+    Ϊ: 'I',
+    Ϋ: 'Y',
+  };
+
+  // Convert Greek characters to Latin
+  const latinText = text
+    .split('')
+    .map((char) => greekToLatinMap[char] || char)
+    .join('');
+
+  // Convert to lowercase, replace spaces with hyphens, remove special characters
+  const processedText = latinText
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '');
+
+  // Calculate the available width for the slug (subtracting 1 for the hyphen and at least 8 for the ID)
+  // const availableWidth = Math.max(0, maxWidth - 9);
+
+  // Split the processed text into slug and remaining text for ID
+  let slug = processedText.substring(0, maxWidth);
+  const remainingText = processedText.substring(maxWidth);
+
+  // Remove trailing hyphens from the slug
+  slug = slug.replace(/-+$/, '');
+
+  // Generate ID from the remaining text
+  const id = generateIDFromText(remainingText);
+
+  // Combine the slug and ID
+  return `${slug}${id && '-'}${id}`;
+}
+
+function generateIDFromText(text: string): string {
+  // If text is empty or maxLength is 0 or less, return a default ID
+  if (!text) return '';
+
+  // Remove hyphens and take only alphanumeric characters
+  let processedText = text.replace(/-/g, '').replace(/[^a-z0-9]/g, '');
+
+  // If processed text is empty, use a default base
+  if (!processedText) processedText = 'default';
+
+  // Calculate a simple hash of the processed text
+  let hash = 0;
+  for (let i = 0; i < processedText.length; i++) {
+    const char = processedText.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  // Convert hash to a positive number and then to base 36 (0-9 and a-z)
+  const id = Math.abs(hash).toString(36);
+
+  // Ensure the ID is at least 8 characters long, padding with '0' if necessary
+  return id;
+  // return id.padEnd(8, '0').substring(0, maxLength);
+}
+
+// Test the function
+// console.log(createSlugWithID('Καλημέρα κόσμε! Hello world!', 10));
+// console.log(createSlugWithID('Ελληνικά και English mixed', 80));
+// console.log(
+//   createSlugWithID(
+//     'Αυτό είναι ένα πολύ μεγάλο κείμενο για να δοκιμάσουμε το όριο πλάτους',
+//     90
+//   )
+// );

package/src/navigation/Breadcrumbs/utils.ts

@@ -0,0 +1,39 @@
+// utility.ts
+import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
+export const flattenRoutes = (
+  items,
+  maxLength = 15,
+  prepend = '',
+  parents: string[] = []
+) => {
+  let flattened = {};
+
+  items.forEach((value) => {
+    const { title, href, children, ...rest } = value;
+
+    const route = [prepend, href || slug(title, maxLength)].join('/');
+
+    const routeChildren = children
+      ? children.map((child) => ({
+          href: child.href || slug(child.title, maxLength),
+          ...child,
+        }))
+      : [];
+
+    flattened[route] = {
+      ...rest,
+      title,
+      children: routeChildren,
+      parents,
+    };
+
+    if (children) {
+      flattened = {
+        ...flattened,
+        ...flattenRoutes(children, maxLength, route, [...parents, title]),
+      };
+    }
+  });
+
+  return flattened;
+};

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

@@ -22,6 +22,10 @@ test('renders the All Drawer 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/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 {

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

@@ -2,8 +2,7 @@ import React from 'react';
 
 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 {

package/src/navigation/Dropdown/__stories__/Dense.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 {

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

@@ -2,8 +2,7 @@ import React from 'react';
 
 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 {

package/src/navigation/Dropdown/__stories__/PlacementTop.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 {

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

@@ -70,7 +70,7 @@ export const ScrollableContent = () => (
     <DropdownContent role="menu" id="menu2" scrollable>
       <NavList layout="vertical">
         {data.map((item) => (
-          <NavListItemAction role="menuitem" href={item.href}>
+          <NavListItemAction key={item.name} role="menuitem" href={item.href}>
             {item.name}
           </NavListItemAction>
         ))}

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

@@ -2,8 +2,7 @@ import React from 'react';
 
 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 {

package/src/navigation/Dropdown/doc.mdx

@@ -0,0 +1,34 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+# Dropdown
+
+## How to use
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
+</div>
+### Dropdown with align right
+
+You can display the dropdown menu to the right side of the `Dropdown` button.
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
+</div>
+### Dropdown with placement top
+
+You can display the dropdown menu to the top of the `Dropdown` button.
+
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+</div>
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={['DropdownBase', 'DropdownButton', 'DropdownContent']}
+/>

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

@@ -54,6 +54,10 @@ test('renders the All Dropdown 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();
 });