@digigov/ui 2.0.0-d57821ba → 2.0.0-daaf7bdf

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

@@ -9,3 +9,6 @@ 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 { Auto } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Auto';
+

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { List, ListItem } from '@digigov/ui/content/List';
+import {
+  BreadcrumbsAuto,
+  BreadcrumbsListAuto,
+  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';
+
+const items: ConfigData[] = [
+  {
+    title: 'Νομοθεσία Πυροπροστασίας',
+    children: [
+      { title: 'Εγχειρίδια Νομοθεσίας Πυρασφάλειας', pdf: '#' },
+      { title: 'Διάγραμμα Ισχύουσας Νομοθεσίας' },
+      { title: 'Οδηγίες Επί Προτύπων Πυροπροστασίας' },
+      { title: 'Απλουστεύσεις Διαδικασιών' },
+      { title: 'Χρήσιμα Έγγραφα' },
+      {
+        title: 'Νομοθεσία Πυρασφάλειας',
+        children: [
+          {
+            title: 'Λοιπές Δραστηριότητες Εγκαταστάσεις',
+          },
+          {
+            title:
+              'Εγκαταστάσεις Πετρελαιοειδών Προϊόντων – Υγραερίου – Φυσικού Αερίου',
+          },
+          { title: 'Διατάξεις Προληπτικής Πυροπροστασίας' },
+          { title: 'Συνδρομητική Νομοθεσία Πυροπροστασίας' },
+          {
+            title:
+              'Δραστηριότητες – Εγκαταστάσεις που δεν υπάγονται σε Νομοθετικό Πλαίσιο',
+          },
+          {
+            title: 'Κανονισμοί Πυροπροστασίας Κτιρίων',
+            // href: '/kanonismoi-pyroprostasias',
+            children: [
+              {
+                title: 'Κατοικίες',
+              },
+              {
+                title: 'Εγκαταστάσεις Κεντρικής Θέρμανσης',
+              },
+              {
+                title: 'Προσωρινή Διαμονή (Ξεν/χεία-Κατ/σεις)',
+              },
+              {
+                title: 'Εκπαιδευτήρια',
+              },
+              {
+                title: 'Γραφεία',
+              },
+              {
+                title: 'Εμπόριο (Καταστήματα)',
+              },
+              {
+                title: 'Συνάθροιση Κοινού',
+              },
+              {
+                title: 'Υγεία & Κοινωνική Πρόνοια',
+              },
+              {
+                title: 'Σωφρονισμός',
+              },
+              {
+                title: 'Στάθμευση Αυτοκινήτων',
+              },
+
+              {
+                title: 'Λοιπές Βιομηχανικές Εγκαταστάσεις',
+              },
+              {
+                title: 'Αποθήκευση',
+              },
+              {
+                title: 'Συνεργεία, ΙΚτέο, Εμπ.Σταθμοί, Κτελ, Πλυντ.-Λιπαντ.',
+              },
+              {
+                title: 'Πρατήρια Υγρών Καυσίμων',
+              },
+              {
+                title: 'Πρατήρια Αερίων Καυσίμων',
+              },
+              {
+                title: 'Μεταποιητικές & Συναφείς Εγκαταστάσεις',
+                // href: '/metapoiitikes-egkatastaseis',
+                children: [
+                  {
+                    title: 'ΠΔ 41/2018 & ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                  },
+                  {
+                    title: 'ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                  },
+                  {
+                    title: 'ΠΔ 71/1988 ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                    children: [
+                      { title: 'Γενικές Διατάξεις ΠΔ 41/2018' },
+                      { title: 'ΚΥΑ ΑΠ-136860-1673-Φ15-2018' },
+                      {
+                        title: 'Γενικές Διατάξεις ΠΔ 71/2018',
+                        children: [
+                          {
+                            title: 'Άρθρο 1: Ορισμοί – Ταξινόμηση Κτιρίων',
+                          },
+                          {
+                            title: 'Άρθρο 2: Οδεύσεις Διαφυγής',
+                          },
+                          {
+                            title: 'Άρθρο 3: Δομική Προστασία',
+                          },
+                          {
+                            title: 'Άρθρο 4: Ενεργητικά Μέτρα Πυροπροστασίας',
+                            pdf: '#pdf',
+                          },
+                          {
+                            title:
+                              'Άρθρο 14: Παράρτημα Α - Δείκτες Πυραντίστασης',
+                          },
+                          {
+                            title:
+                              'Άρθρο 14: Παράρτημα Β – Εσωτερικά Τελειώματα',
+                          },
+                          {
+                            title: 'Άρθρο 15: Εφαρμογή ΠΔ 71/1988',
+                          },
+                          {
+                            title:
+                              'Άρθρο 23-24: Έναρξη Εφαρμογής – Καταργούμενες Διατάξεις',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const getListChild = (item, setActive) => {
+  return item.children ? (
+    <List listStyle="number">
+      <ListItem>
+        <Heading size="md">{item.title}</Heading>
+        {item.children?.map((subMenu, key) => (
+          <ListItem key={key}>{getListChild(subMenu, setActive)}</ListItem>
+        ))}
+      </ListItem>
+    </List>
+  ) : (
+    <Button variant='link' role="menuitem" id={item.title} onClick={(e) => { e.preventDefault(), setActive(item) }}>
+      {item.title}
+    </Button>
+  );
+};
+
+export const Auto = () => {
+  return (
+    <BreadcrumbsAuto items={items} hrefGenerator={(item) => { return item.href ? item.href : slug(item.title, 100) }}>
+      <BreadcrumbsListAuto />
+      <ContentRoutes />
+    </BreadcrumbsAuto>
+  );
+};
+
+const ContentRoutes = () => {
+  const { active, setActive } = useBreadcrumbsContext();
+
+  return <>
+    <Heading size="xl">
+      {active?.title}
+    </Heading>
+    {items.map((item) => getListChild(item, setActive))}
+  </>;
+};
+
+export default Auto;

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

@@ -0,0 +1,195 @@
+import React from 'react';
+import { List, ListItem } from '@digigov/ui/content/List';
+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';
+
+const items: ConfigData[] = [
+  {
+    title: 'Νομοθεσία Πυροπροστασίας',
+    children: [
+      { title: 'Εγχειρίδια Νομοθεσίας Πυρασφάλειας', pdf: '#', href: "echiridia-nomothesia-pyroprostasias" },
+      { title: 'Διάγραμμα Ισχύουσας Νομοθεσίας' },
+      { title: 'Οδηγίες Επί Προτύπων Πυροπροστασίας' },
+      { title: 'Απλουστεύσεις Διαδικασιών' },
+      { title: 'Χρήσιμα Έγγραφα' },
+      {
+        title: 'Νομοθεσία Πυρασφάλειας',
+        children: [
+          {
+            title: 'Λοιπές Δραστηριότητες Εγκαταστάσεις',
+          },
+          {
+            title:
+              'Εγκαταστάσεις Πετρελαιοειδών Προϊόντων – Υγραερίου – Φυσικού Αερίου',
+          },
+          { title: 'Διατάξεις Προληπτικής Πυροπροστασίας' },
+          { title: 'Συνδρομητική Νομοθεσία Πυροπροστασίας' },
+          {
+            title:
+              'Δραστηριότητες – Εγκαταστάσεις που δεν υπάγονται σε Νομοθετικό Πλαίσιο',
+          },
+          {
+            title: 'Κανονισμοί Πυροπροστασίας Κτιρίων',
+            // href: '/kanonismoi-pyroprostasias',
+            children: [
+              {
+                title: 'Κατοικίες',
+              },
+              {
+                title: 'Εγκαταστάσεις Κεντρικής Θέρμανσης',
+              },
+              {
+                title: 'Προσωρινή Διαμονή (Ξεν/χεία-Κατ/σεις)',
+              },
+              {
+                title: 'Εκπαιδευτήρια',
+              },
+              {
+                title: 'Γραφεία',
+              },
+              {
+                title: 'Εμπόριο (Καταστήματα)',
+              },
+              {
+                title: 'Συνάθροιση Κοινού',
+              },
+              {
+                title: 'Υγεία & Κοινωνική Πρόνοια',
+              },
+              {
+                title: 'Σωφρονισμός',
+              },
+              {
+                title: 'Στάθμευση Αυτοκινήτων',
+              },
+
+              {
+                title: 'Λοιπές Βιομηχανικές Εγκαταστάσεις',
+              },
+              {
+                title: 'Αποθήκευση',
+              },
+              {
+                title: 'Συνεργεία, ΙΚτέο, Εμπ.Σταθμοί, Κτελ, Πλυντ.-Λιπαντ.',
+              },
+              {
+                title: 'Πρατήρια Υγρών Καυσίμων',
+              },
+              {
+                title: 'Πρατήρια Αερίων Καυσίμων',
+              },
+              {
+                title: 'Μεταποιητικές & Συναφείς Εγκαταστάσεις',
+                // href: '/metapoiitikes-egkatastaseis',
+                children: [
+                  {
+                    title: 'ΠΔ 41/2018 & ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                  },
+                  {
+                    title: 'ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                  },
+                  {
+                    title: 'ΠΔ 71/1988 ΚΥΑ ΑΠ-136860-1673-Φ15-2018',
+                    children: [
+                      { title: 'Γενικές Διατάξεις ΠΔ 41/2018' },
+                      { title: 'ΚΥΑ ΑΠ-136860-1673-Φ15-2018' },
+                      {
+                        title: 'Γενικές Διατάξεις ΠΔ 71/2018',
+                        children: [
+                          {
+                            title: 'Άρθρο 1: Ορισμοί – Ταξινόμηση Κτιρίων',
+                          },
+                          {
+                            title: 'Άρθρο 2: Οδεύσεις Διαφυγής',
+                          },
+                          {
+                            title: 'Άρθρο 3: Δομική Προστασία',
+                          },
+                          {
+                            title: 'Άρθρο 4: Ενεργητικά Μέτρα Πυροπροστασίας',
+                            pdf: '#pdf',
+                          },
+                          {
+                            title:
+                              'Άρθρο 14: Παράρτημα Α - Δείκτες Πυραντίστασης',
+                          },
+                          {
+                            title:
+                              'Άρθρο 14: Παράρτημα Β – Εσωτερικά Τελειώματα',
+                          },
+                          {
+                            title: 'Άρθρο 15: Εφαρμογή ΠΔ 71/1988',
+                          },
+                          {
+                            title:
+                              'Άρθρο 23-24: Έναρξη Εφαρμογής – Καταργούμενες Διατάξεις',
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+// 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>
+        {item.children?.map((subMenu, key) => (
+          <ListItem key={key}>{getListChild(subMenu, setActive)}</ListItem>
+        ))}
+      </ListItem>
+    </List>
+  ) : (
+    <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) });
+  return (
+    <>
+      {breadcrumbs.length > 0 && (
+        <Breadcrumbs marginBottom={8}>
+          <BreadcrumbsList>
+            {breadcrumbs.map((breadcrumb, index) => (
+              <BreadcrumbsListItem
+                key={index}
+                href={breadcrumb.href}
+                aria-current={breadcrumb.active ? "page" : undefined}
+              >
+                {breadcrumb.title}
+              </BreadcrumbsListItem>
+            ))}
+          </BreadcrumbsList>
+        </Breadcrumbs>
+      )}
+      {breadcrumbs.length > 0 && (
+        <Heading size="xl">
+          {breadcrumbs[breadcrumbs.length - 1]?.title}
+        </Heading>
+      )}
+      {items.map((item) => getListChild(item, setActive))}
+    </>
+  );
+};
+
+export default WithHook;

package/src/navigation/Breadcrumbs/auto.tsx

@@ -0,0 +1,55 @@
+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';
+
+export interface BreadcrumbsListAutoProps extends BreadcrumbsProps { }
+export interface BreadcrumbsAutoProps extends BreadcrumbsProps { }
+export interface BreadcrumbsAutoProps {
+  items: ConfigData[];
+  hrefGenerator: (value: ChildrenData) => string;
+  children: ReactNode;
+};
+export const BreadcrumbsContext = createContext<UseBreadcrumbsReturn | null>(null);
+
+export const BreadcrumbsAuto = ({ items, hrefGenerator, children }: BreadcrumbsAutoProps) => {
+  const breadcrumbs = useBreadcrumbs(items, hrefGenerator);
+
+  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 (props, ref) {
+  const { breadcrumbs } = useBreadcrumbsContext();
+  return (
+    <Breadcrumbs ref={ref} role="navigation" {...props}>
+      <BreadcrumbsList>
+        {breadcrumbs.map((item, index) => (
+          <BreadcrumbsListItem
+            key={index}
+            href={item.href}
+            aria-current={item.active ? "page" : undefined}
+          >
+            {item.title}
+          </BreadcrumbsListItem>
+        ))}
+      </BreadcrumbsList>
+
+    </Breadcrumbs>
+  );
+});

package/src/navigation/Breadcrumbs/hooks.ts

@@ -0,0 +1,75 @@
+import { useCallback, useMemo, useState, } from 'react';
+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[];
+}
+
+export interface UseBreadcrumbsReturn {
+  breadcrumbs: Array<BreadcrumbItem>;
+  active: CurrentItem;
+  setActive: (item: string) => void;
+}
+
+export const useBreadcrumbs = (
+  items: ConfigData[],
+  hrefGenerator: (value: ChildrenData) => 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 getParentPath = useCallback((parent: string): string => {
+    return Object.keys(routes).find(
+      (path) => routes[path].title === parent
+    ) || '#';
+  }, [currentPath]);
+
+  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,
+    });
+  }
+
+  return {
+    breadcrumbs,
+    active,
+    setActive,
+  };
+};

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

@@ -1,16 +1,24 @@
 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';
 
 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>

package/src/navigation/Breadcrumbs/index.tsx

@@ -2,4 +2,7 @@ export * from '@digigov/react-core/Breadcrumbs';
 export * from '@digigov/react-core/BreadcrumbsList';
 export * from '@digigov/react-core/BreadcrumbsListItem';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
+
+export * from '@digigov/ui/navigation/Breadcrumbs/utils';
+
 export default Breadcrumbs;

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

@@ -2,17 +2,41 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
 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 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");
+  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);
+  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);
+  await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+