@digigov/ui 2.0.0-b4cd6916 → 2.0.0-d0adc9fb

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

@@ -9,11 +9,7 @@ Use the back link component to help users go back to the previous page in a mult
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/BackLink/__stories__/Default.tsx" />
 
 ## API
 

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

@@ -4,12 +4,12 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/navigation/BackLink/__stories__/Default';
 
 test('renders the Default Click link', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>a").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>a').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/BackToTopLink/index.tsx

@@ -34,9 +34,8 @@ export const BackToTop: React.FC<BackToTopProps> = React.forwardRef(
     ...props
   }) {
     const [persistent, setPersistent] = useState<boolean>(false);
-    const callSetPersistent = (value) => {
+    const callSetPersistent = (value) =>
       window.scrollY > 0 && setPersistent(value);
-    };
     useObserver(topLimitId, callSetPersistent);
     useObserver('back-to-top-element', callSetPersistent);
 

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 { WithProvider } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithProvider';
+export { Auto } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Auto';

package/src/navigation/Breadcrumbs/BreadcrumbsListItem.tsx

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

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

@@ -0,0 +1,201 @@
+import React from 'react';
+import { List, ListItem } from '@digigov/ui/content/List';
+import { Button } from '@digigov/ui/form/Button/';
+import {
+  BreadcrumbsAuto,
+  BreadcrumbsListAuto,
+  useBreadcrumbsContext,
+} from '@digigov/ui/navigation/Breadcrumbs/auto';
+import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+import { Heading } from '@digigov/ui/typography';
+
+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,219 @@
+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,
+  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;

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

@@ -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,
+  };
+};