@digigov/ui 2.0.0-60d81ed8 → 2.0.0-6452adf3

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: { [key: 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: number = 15,
+  prepend: string = '',
+  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

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/navigation/Drawer';
 import { 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 +52,6 @@ const links = [
 
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
-
   const layout = 'vertical';
   const border = false;
   const fixed = false;
@@ -72,4 +71,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/Dropdown/{index.mdx → doc.mdx}

@@ -7,31 +7,19 @@ title: Dropdown
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
 
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="AlignRight.tsx"
-/>
+<code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
 
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="PlacementTop.tsx"
-/>
+<code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
 
 ## API
 

package/src/navigation/Link/__snapshots__/index.spec.tsx.snap

@@ -1,38 +1,24 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Provider 1`] = `
-<LinkProvider
-  component={[Function]}
->
-  <Link>
-    <CustomLink
-      href=""
-    >
-      <div>
-        hello
-      </div>
-    </CustomLink>
-  </Link>
-</LinkProvider>
+<body>
+  <div>
+    <div>
+      hello
+    </div>
+  </div>
+</body>
 `;
 
 exports[`renders the Link 1`] = `
-<Link>
-  <ForwardRef(LinkBase)
-    href=""
-  >
-    <ForwardRef(Base)
-      as="a"
-      className="ds-link"
+<body>
+  <div>
+    <a
+      class="ds-link"
       href=""
     >
-      <a
-        className="ds-link"
-        href=""
-      >
-        hello
-      </a>
-    </ForwardRef(Base)>
-  </ForwardRef(LinkBase)>
-</Link>
+      hello
+    </a>
+  </div>
+</body>
 `;

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

@@ -3,39 +3,27 @@ id: link
 title: Link
 ---
 
-## How to use
+# Link
 
-### Default
+## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/Link/__stories__/Default.tsx" />
 
 ### No Underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="NoUnderline.tsx"
-/>
+<code src="@digigov/ui/navigation/Link/__stories__/NoUnderline.tsx" />
 
 ### Opens in a new tab
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="OpensInNewTab.tsx"
-/>
+<code src="@digigov/ui/navigation/Link/__stories__/OpensInNewTab.tsx" />
 
 ### At dark background
 
-<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackground.tsx" />
+<code src="@digigov/ui/navigation/Link/__stories__/DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
+<code src="@digigov/ui/navigation/Link/__stories__/DarkBackgroundNoUnderline.tsx" />
 
 ### Accessibility
 

package/src/navigation/NavList/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(NavList)>
+<ForwardRef(NavList2)>
   this is some random warning text
-</ForwardRef(NavList)>
+</ForwardRef(NavList2)>
 `;

package/src/navigation/NavList/__stories__/UsingNavListAuto.tsx

@@ -1,51 +1,50 @@
-import React from 'react';
+import React, { useState } from 'react';
 import BurgerIcon from '@digigov/ui/utils/SvgIcon';
 import { Button } from '@digigov/ui/form/Button';
 import { NavListAuto } from '@digigov/ui/navigation/NavList';
 
 const links = [
-  { "name": "home", "href": "#home", "label": "Αρχική" },
+  { name: 'home', href: '#home', label: 'Αρχική' },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "subMenuHeading": "Εκπαιδευτικό υλικό",
-    "subMenu": [
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    subMenuHeading: 'Εκπαιδευτικό υλικό',
+    subMenu: [
       {
-        "name": "elearning",
-        "href": "#elearning",
-        "label": "Εκπαιδευτική πλατφόρμα"
+        name: 'elearning',
+        href: '#elearning',
+        label: 'Εκπαιδευτική πλατφόρμα',
       },
       {
-        "name": "videos",
-        "href": "#videos",
-        "label": "Βίντεο"
+        name: 'videos',
+        href: '#videos',
+        label: 'Βίντεο',
       },
       {
-        "name": "presentations",
-        "href": "#presentations",
-        "label": "Παρουσιάσεις"
+        name: 'presentations',
+        href: '#presentations',
+        label: 'Παρουσιάσεις',
       },
       {
-        "name": "promoting",
-        "href": "#promoting",
-        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+        name: 'promoting',
+        href: '#promoting',
+        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
       },
       {
-        "name": "other-texts",
-        "href": "#other-texts",
-        "label": "Άλλα κείμενα"
-      }
-    ]
+        name: 'other-texts',
+        href: '#other-texts',
+        label: 'Άλλα κείμενα',
+      },
+    ],
   },
-  { "name": "news", "href": "#news", "label": "Νέα" }
-]
-
+  { name: 'news', href: '#news', label: 'Νέα' },
+];
 
 export const UsingNavListAuto = () => {
   const layout = 'horizontal';
   const drawer = 'smDown';
   const border = true;
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   return (
     <>
       <Button color="secondary" onClick={() => setOpen(!open)} smUpHidden>

package/src/navigation/NavList/__stories__/Vertical.tsx

@@ -8,21 +8,21 @@ import {
 
 const links = [
   {
-    "name": "home",
-    "href": "#home",
-    "label": "Αρχική"
+    name: 'home',
+    href: '#home',
+    label: 'Αρχική',
   },
   {
-    "name": "educational",
-    "label": "Εκπαιδευτικό υλικό",
-    "href": "#educational"
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    href: '#educational',
   },
   {
-    "name": "news",
-    "href": "#news",
-    "label": "Νέα"
-  }
-]
+    name: 'news',
+    href: '#news',
+    label: 'Νέα',
+  },
+];
 
 export const Vertical = () => {
   const layout = 'vertical';
@@ -30,7 +30,11 @@ export const Vertical = () => {
   const [useActive, setUseActive] = useState('');
 
   return (
-    <Nav aria-orientation={layout || 'horizontal'} aria-label="navigation list">
+    <Nav
+      aria-orientation={layout || 'horizontal'}
+      aria-label="navigation list"
+      border={false}
+    >
       <NavList layout={layout}>
         {links.map((item, key) => (
           <NavListItemAction

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

@@ -3,39 +3,36 @@ id: nav-list
 title: NavList
 ---
 
-## How to use
+import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+
+# NavList
 
-### Horizontal NavList
+## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/NavList/__stories__/Default.tsx" />
 
 ### Vertical NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="Vertical.tsx"
-/>
+<code src="@digigov/ui/navigation/NavList/__stories__/Vertical.tsx" />
 
 ### Horizontal NavList with submenu
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="HorizontalWithoutDrawer.tsx"
-/>
+<code src="@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx" />
+
 
 ### Vertical NavList with submenu
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="VerticalWithoutDrawer.tsx"
-/>
+<code src="@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx" />
+
+### Auto
+
+<PhaseBanner>
+    <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
+</PhaseBanner>
+
+This is an implementation of NavList, utilizing the `useNavList` hook to register each item along with its associated content.
+
+<code src="@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto.tsx" />
 
 ## Accessibility
 

package/src/navigation/Pagination/doc.mdx

@@ -0,0 +1,32 @@
+---
+id: pagination
+title: Pagination
+---
+
+## How to use
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/Default.tsx" />
+
+### With inactive values
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues.tsx" />
+
+### With small fonts
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx" />
+
+### With results per page
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+  "Pagination",
+  "PaginationLabel",
+  "PaginationList",
+  "PaginationListItem",
+  ]} /> 

package/src/navigation/Tabs/doc.mdx

@@ -0,0 +1,47 @@
+---
+id: tabs
+title: Tabs
+---
+
+import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+
+# Tabs
+
+## How to use
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/Default.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/Dense.tsx" />
+
+### Using Accordion
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+
+### Auto
+
+This is an implementation of the Tabs collection, encapsulated within a `TabsContext` provider, designed to facilitate and manage Tabs functionality effectively.
+
+<PhaseBanner>
+    <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
+</PhaseBanner>
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Tabs
+implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) section.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["Tabs",
+  "TabsHeading",
+  "TabsList",
+  "TabsListItem",
+  "TabsPanel",]} /> 
+