@digigov/ui 2.0.0-6c42d5eb → 2.0.0-6e3977bc

package/src/form/TextInput/interaction.test.tsx

@@ -2,16 +2,31 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
 import { Default } from '@digigov/ui/form/TextInput/__stories__/Default';
+import { WithErrorMessage } from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
 
 test('renders the Default Click and write', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>label>input").click();
- await page.keyboard.insertText("undefined");
+  await page.locator('#root>div>label>input').click();
+  await page.keyboard.insertText('όνομα');
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the WithErrorMessage Keyboard navigation', async ({
+  mount,
+  page,
+}) => {
+  await mount(<WithErrorMessage />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.keyboard.press('Tab');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/i18n/index.tsx

@@ -17,8 +17,8 @@ export const defaultTranslate = (
           if (typeof locale[path] === 'string' && context) {
             let nextLocale = locale[path];
             const matches = locale[path].match(/\{{(\w+)\}}/g) || [];
-            matches.forEach((match) => {
-              const variable = match.replaceAll(/{|}/g, '');
+            matches.forEach((match: string) => {
+              const variable = match.replace(/{|}/g, '');
               nextLocale = nextLocale.replace(match, context[variable]);
             });
             return nextLocale;

package/src/i18n/locales/el.ts

@@ -8,7 +8,7 @@ export default {
     error: {
       required: 'Το πεδίο είναι υποχρεωτικό.',
       number: 'Συμπληρώστε έναν έγκυρο αριθμό',
-      positive_integer_number: 'Συμπληρώστε έναν θετικό ακέραιο αριθμό',
+      positive_integer_number: 'Συμπληρώστε έναν θετικό ακέραιο αριθμό.',
       string: 'Το πεδίο πρέπει να είναι string',
       email: 'Συμπληρώστε μια έγκυρη ηλεκτρονική διεύθυνση (e-mail).',
       afm: 'Ο Α.Φ.Μ που πληκτρολογήσατε είναι λανθασμένος.',

package/src/lazy.js

@@ -52,10 +52,6 @@ export default {
   'ModalHeading': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['ModalHeading']}))),
   'ModalContent': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['ModalContent']}))),
   'ModalAction': lazy(() => import('@digigov/ui/app/Modal').then((module)=> ({default: module['ModalAction']}))),
-  'ModalAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalAuto']}))),
-  'ModalButtonAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalButtonAuto']}))),
-  'ModalContext': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalContext']}))),
-  'ModalProvider': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalProvider']}))),
   'Modal': lazy(() => import('@digigov/ui/app/Modal/Modal').then((module)=> ({default: module['Modal']}))),
   'ModalBase': lazy(() => import('@digigov/ui/app/Modal/Modal').then((module)=> ({default: module['ModalBase']}))),
   'NotFound': lazy(() => import('@digigov/ui/app/NotFound').then((module)=> ({default: module['NotFound']}))),
@@ -66,6 +62,10 @@ export default {
   'QrCodeScanner': lazy(() => import('@digigov/ui/app/QrCodeScanner').then((module)=> ({default: module['QrCodeScanner']}))),
   'QrCodeViewer': lazy(() => import('@digigov/ui/app/QrCodeViewer').then((module)=> ({default: module['QrCodeViewer']}))),
   'ThemeOptions': lazy(() => import('@digigov/ui/app/ThemeOptions').then((module)=> ({default: module['ThemeOptions']}))),
+  'ModalAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalAuto']}))),
+  'ModalButtonAuto': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalButtonAuto']}))),
+  'ModalContext': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalContext']}))),
+  'ModalProvider': lazy(() => import('@digigov/ui/app/Modal/auto').then((module)=> ({default: module['ModalProvider']}))),
   'MARGIN_SIZE': lazy(() => import('@digigov/ui/app/QrCodeViewer/utils').then((module)=> ({default: module['MARGIN_SIZE']}))),
   'Skeleton': lazy(() => import('@digigov/ui/app/Skeleton').then((module)=> ({default: module['Skeleton']}))),
   'AccordionAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module)=> ({default: module['AccordionAuto']}))),
@@ -104,10 +104,6 @@ export default {
   'StepNavControls': lazy(() => import('@digigov/ui/content/StepNav').then((module)=> ({default: module['StepNavControls']}))),
   'StepNavList': lazy(() => import('@digigov/ui/content/StepNav').then((module)=> ({default: module['StepNavList']}))),
   'StepNavListItem': lazy(() => import('@digigov/ui/content/StepNav').then((module)=> ({default: module['StepNavListItem']}))),
-  'StepNavAccordionAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavAccordionAuto']}))),
-  'StepNavAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavAuto']}))),
-  'StepNavCloseAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavCloseAllButtonAuto']}))),
-  'StepNavOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavOpenAllButtonAuto']}))),
   'StepNavAccordion': lazy(() => import('@digigov/ui/content/StepNav').then((module)=> ({default: module['StepNavAccordion']}))),
   'SummaryList': lazy(() => import('@digigov/ui/content/SummaryList').then((module)=> ({default: module['SummaryList']}))),
   'SummaryListItemAction': lazy(() => import('@digigov/ui/content/SummaryList').then((module)=> ({default: module['SummaryListItemAction']}))),
@@ -139,6 +135,10 @@ export default {
   'TimelineActions': lazy(() => import('@digigov/ui/content/Timeline').then((module)=> ({default: module['TimelineActions']}))),
   'Markdown': lazy(() => import('@digigov/ui/content/Markdown').then((module)=> ({default: module['Markdown']}))),
   'SafeHTML': lazy(() => import('@digigov/ui/content/SafeHTML').then((module)=> ({default: module['SafeHTML']}))),
+  'StepNavAccordionAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavAccordionAuto']}))),
+  'StepNavAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavAuto']}))),
+  'StepNavCloseAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavCloseAllButtonAuto']}))),
+  'StepNavOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module)=> ({default: module['StepNavOpenAllButtonAuto']}))),
   'CopyToClipboard': lazy(() => import('@digigov/ui/feedback/CopyToClipboard').then((module)=> ({default: module['CopyToClipboard']}))),
   'CopyToClipboardContainer': lazy(() => import('@digigov/ui/feedback/CopyToClipboard').then((module)=> ({default: module['CopyToClipboardContainer']}))),
   'CopyToClipboardMessage': lazy(() => import('@digigov/ui/feedback/CopyToClipboard').then((module)=> ({default: module['CopyToClipboardMessage']}))),
@@ -153,6 +153,7 @@ export default {
   'PhaseBannerHeaderContainer': lazy(() => import('@digigov/ui/feedback/PhaseBanner').then((module)=> ({default: module['PhaseBannerHeaderContainer']}))),
   'PhaseBannerTag': lazy(() => import('@digigov/ui/feedback/PhaseBanner').then((module)=> ({default: module['PhaseBannerTag']}))),
   'PhaseBannerText': lazy(() => import('@digigov/ui/feedback/PhaseBanner').then((module)=> ({default: module['PhaseBannerText']}))),
+  'WarningTextAssistive': lazy(() => import('@digigov/ui/feedback/WarningText').then((module)=> ({default: module['WarningTextAssistive']}))),
   'WarningText': lazy(() => import('@digigov/ui/feedback/WarningText').then((module)=> ({default: module['WarningText']}))),
   'AutoComplete': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoComplete']}))),
   'AutoCompleteAssistiveHint': lazy(() => import('@digigov/ui/form/AutoComplete').then((module)=> ({default: module['AutoCompleteAssistiveHint']}))),
@@ -173,6 +174,7 @@ export default {
   'ButtonGroup': lazy(() => import('@digigov/ui/form/Button').then((module)=> ({default: module['ButtonGroup']}))),
   'Checkbox': lazy(() => import('@digigov/ui/form/Checkbox').then((module)=> ({default: module['Checkbox']}))),
   'CheckboxItem': lazy(() => import('@digigov/ui/form/Checkbox').then((module)=> ({default: module['CheckboxItem']}))),
+  'CheckboxItemInput': lazy(() => import('@digigov/ui/form/Checkbox').then((module)=> ({default: module['CheckboxItemInput']}))),
   'CheckboxConditional': lazy(() => import('@digigov/ui/form/Checkbox').then((module)=> ({default: module['CheckboxConditional']}))),
   'DateInputContainer': lazy(() => import('@digigov/ui/form/DateInputContainer').then((module)=> ({default: module['DateInputContainer']}))),
   'DateInputItem': lazy(() => import('@digigov/ui/form/DateInputContainer').then((module)=> ({default: module['DateInputItem']}))),
@@ -256,11 +258,6 @@ export default {
   'BreadcrumbsListItem': lazy(() => import('@digigov/ui/navigation/Breadcrumbs').then((module)=> ({default: module['BreadcrumbsListItem']}))),
   'Drawer': lazy(() => import('@digigov/ui/navigation/Drawer').then((module)=> ({default: module['Drawer']}))),
   'DrawerHeading': lazy(() => import('@digigov/ui/navigation/Drawer').then((module)=> ({default: module['DrawerHeading']}))),
-  'DrawerAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerAuto']}))),
-  'DrawerButtonAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerButtonAuto']}))),
-  'DrawerContext': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerContext']}))),
-  'DrawerHeadingAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerHeadingAuto']}))),
-  'DrawerProvider': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerProvider']}))),
   'Dropdown': lazy(() => import('@digigov/ui/navigation/Dropdown').then((module)=> ({default: module['Dropdown']}))),
   'DropdownBase': lazy(() => import('@digigov/ui/navigation/Dropdown').then((module)=> ({default: module['DropdownBase']}))),
   'DropdownButton': lazy(() => import('@digigov/ui/navigation/Dropdown').then((module)=> ({default: module['DropdownButton']}))),
@@ -290,25 +287,12 @@ export default {
   'Pagination': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['Pagination']}))),
   'PaginationList': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationList']}))),
   'PaginationListItem': lazy(() => import('@digigov/ui/navigation/Pagination').then((module)=> ({default: module['PaginationListItem']}))),
-  'PaginationAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationAuto']}))),
-  'PaginationContextAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationContextAuto']}))),
-  'PaginationLabelAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationLabelAuto']}))),
-  'PaginationListAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationListAuto']}))),
-  'PaginationResultsPerPageSelectAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationResultsPerPageSelectAuto']}))),
   'SkipLink': lazy(() => import('@digigov/ui/navigation/SkipLink').then((module)=> ({default: module['SkipLink']}))),
   'Tabs': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['Tabs']}))),
   'TabsList': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['TabsList']}))),
   'TabsListItemBase': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['TabsListItemBase']}))),
   'TabsPanelBase': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['TabsPanelBase']}))),
   'TabsHeading': lazy(() => import('@digigov/ui/navigation/Tabs').then((module)=> ({default: module['TabsHeading']}))),
-  'TabsAuto': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsAuto']}))),
-  'TabsContext': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsContext']}))),
-  'TabsListItem': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsListItem']}))),
-  'TabsPanel': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsPanel']}))),
-  'BlockFilteredResults': lazy(() => import('@digigov/ui/patterns/FilteredResults').then((module)=> ({default: module['BlockFilteredResults']}))),
-  'DrawerFilteredResults': lazy(() => import('@digigov/ui/patterns/FilteredResults').then((module)=> ({default: module['DrawerFilteredResults']}))),
-  'FilteredResults': lazy(() => import('@digigov/ui/patterns/FilteredResults').then((module)=> ({default: module['FilteredResults']}))),
-  'FormBuilderSyncValues': lazy(() => import('@digigov/ui/patterns/FilteredResults').then((module)=> ({default: module['FormBuilderSyncValues']}))),
   'Heading': lazy(() => import('@digigov/ui/typography/Heading').then((module)=> ({default: module['Heading']}))),
   'HeadingCaption': lazy(() => import('@digigov/ui/typography/HeadingCaption').then((module)=> ({default: module['HeadingCaption']}))),
   'Paragraph': lazy(() => import('@digigov/ui/typography/Paragraph').then((module)=> ({default: module['Paragraph']}))),
@@ -324,12 +308,27 @@ export default {
   'BackToTopLink': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopLink']}))),
   'BackToTopLimit': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopLimit']}))),
   'BackToTopContainer': lazy(() => import('@digigov/ui/navigation/BackToTopLink').then((module)=> ({default: module['BackToTopContainer']}))),
-  'DataTable': lazy(() => import('@digigov/ui/patterns/FilteredResults/DataTable').then((module)=> ({default: module['DataTable']}))),
-  'FilterChips': lazy(() => import('@digigov/ui/patterns/FilteredResults/FilterChips').then((module)=> ({default: module['FilterChips']}))),
-  'FilterFields': lazy(() => import('@digigov/ui/patterns/FilteredResults/FilterFields').then((module)=> ({default: module['FilterFields']}))),
+  'BreadcrumbsAuto': lazy(() => import('@digigov/ui/navigation/Breadcrumbs/auto').then((module)=> ({default: module['BreadcrumbsAuto']}))),
+  'BreadcrumbsContext': lazy(() => import('@digigov/ui/navigation/Breadcrumbs/auto').then((module)=> ({default: module['BreadcrumbsContext']}))),
+  'BreadcrumbsListAuto': lazy(() => import('@digigov/ui/navigation/Breadcrumbs/auto').then((module)=> ({default: module['BreadcrumbsListAuto']}))),
+  'DrawerAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerAuto']}))),
+  'DrawerButtonAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerButtonAuto']}))),
+  'DrawerContext': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerContext']}))),
+  'DrawerHeadingAuto': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerHeadingAuto']}))),
+  'DrawerProvider': lazy(() => import('@digigov/ui/navigation/Drawer/auto').then((module)=> ({default: module['DrawerProvider']}))),
+  'PaginationAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationAuto']}))),
+  'PaginationContextAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationContextAuto']}))),
+  'PaginationLabelAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationLabelAuto']}))),
+  'PaginationListAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationListAuto']}))),
+  'PaginationResultsPerPageSelectAuto': lazy(() => import('@digigov/ui/navigation/Pagination/auto').then((module)=> ({default: module['PaginationResultsPerPageSelectAuto']}))),
+  'TabsAuto': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsAuto']}))),
+  'TabsContext': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsContext']}))),
+  'TabsListItem': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsListItem']}))),
+  'TabsPanel': lazy(() => import('@digigov/ui/navigation/Tabs/auto').then((module)=> ({default: module['TabsPanel']}))),
   'Code': lazy(() => import('@digigov/ui/typography/Code').then((module)=> ({default: module['Code']}))),
   'CodeBlock': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlock']}))),
   'CodeBlockContent': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlockContent']}))),
+  'CodeBlockHeader': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlockHeader']}))),
   'CodeBlockContainer': lazy(() => import('@digigov/ui/typography/CodeBlock').then((module)=> ({default: module['CodeBlockContainer']}))),
   'TestVariant': lazy(() => import('@digigov/ui/utils/TestVariant').then((module)=> ({default: module['TestVariant']}))),
 

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,200 @@
+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 { Button } from '@digigov/ui/form/Button/';
+import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+
+const items: BreadcrumbItem[] = [
+  {
+    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 ? (
+    <>
+      <Heading size="sm" mb={0}>
+        {item.title}
+      </Heading>
+      <List listStyle="number">
+        {item.children?.map((subMenu, key) => (
+          <ListItem key={key}>{getListChild(subMenu, setActive)}</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}
+      initialUrlRoute="/nomothesia-pyroprostasias/odigies-epi-protypon-pyroprostasias"
+    >
+      <BreadcrumbsListAuto mb={8} />
+      <ContentRoutes />
+    </BreadcrumbsAuto>
+  );
+};
+
+const ContentRoutes = () => {
+  const { breadcrumbs, setActiveItem } = useBreadcrumbsContext();
+
+  return (
+    <>
+      {breadcrumbs.length > 0 && (
+        <Heading size="xl">
+          {breadcrumbs[breadcrumbs.length - 1]?.title}
+        </Heading>
+      )}
+      {items.map((item) => getListChild(item, setActiveItem))}
+    </>
+  );
+};
+
+export default Auto;

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

@@ -0,0 +1,217 @@
+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 { useBreadcrumbs } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+import { Heading } from '@digigov/ui/typography';
+
+const items: BreadcrumbItem[] = [
+  {
+    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 ? (
+    <>
+      <Heading size="sm" mb={0}>
+        {item.title}
+      </Heading>
+      <List listStyle="number">
+        {item.children?.map((subMenu, key) => (
+          <ListItem key={key}>{getListChild(subMenu, setActive)}</ListItem>
+        ))}
+      </List>
+    </>
+  ) : (
+    <Button
+      variant="link"
+      role="menuitem"
+      id={item.title}
+      onClick={(e) => {
+        e.preventDefault();
+        setActive(item);
+      }}
+    >
+      {item.title}
+    </Button>
+  );
+};
+
+export const WithHook = () => {
+  // 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 > 1 && (
+        <Breadcrumbs mb={8}>
+          <BreadcrumbsList>
+            {breadcrumbs.map((breadcrumb, index) => (
+              <BreadcrumbsListItem
+                key={index}
+                href={breadcrumbs.length - 1 === index ? undefined : '#'}
+                onClick={() => setActiveItem(breadcrumb)}
+                aria-current={
+                  breadcrumbs.length - 1 === index ? 'page' : undefined
+                }
+              >
+                {breadcrumb.title}
+              </BreadcrumbsListItem>
+            ))}
+          </BreadcrumbsList>
+        </Breadcrumbs>
+      )}
+      {breadcrumbs.length > 0 && (
+        <Heading size="xl">
+          {breadcrumbs[breadcrumbs.length - 1]?.title}
+        </Heading>
+      )}
+      {items.map((item) => getListChild(item, setActiveItem))}
+    </>
+  );
+};
+
+export default WithHook;