@digigov/ui 2.0.0-298cfc51 → 2.0.0-2a26e869

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/BreadcrumbsListItem.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
-import Link from '@digigov/ui/navigation/Link';
 import BreadcrumbsListItemBase, {
   BreadcrumbsListItemBaseProps,
 } from '@digigov/react-core/BreadcrumbsListItem';
+import Link from '@digigov/ui/navigation/Link';
 
 export interface BreadcrumbsListItemProps extends BreadcrumbsListItemBaseProps {
   href?: string;

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

@@ -1,13 +1,13 @@
 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 { Heading } from '@digigov/ui/typography';
-import { Button } from '@digigov/ui/form/Button/';
 import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+import { Heading } from '@digigov/ui/typography';
 
 const items: BreadcrumbItem[] = [
   {
@@ -162,7 +162,8 @@ const getListChild = (item, setActive) => {
       role="menuitem"
       id={item.title}
       onClick={(e) => {
-        e.preventDefault(), setActive(item);
+        e.preventDefault();
+        setActive(item);
       }}
     >
       {item.title}

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

@@ -6,8 +6,10 @@ import {
   BreadcrumbsList,
   BreadcrumbsListItem,
 } from '@digigov/ui/navigation/Breadcrumbs';
-import { useBreadcrumbs } from '@digigov/ui/navigation/Breadcrumbs/hooks';
-import { BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+import {
+  useBreadcrumbs,
+  BreadcrumbItem,
+} from '@digigov/ui/navigation/Breadcrumbs/hooks';
 import { Heading } from '@digigov/ui/typography';
 
 const items: BreadcrumbItem[] = [

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { LinkProvider } from '@digigov/ui/navigation/Link';
 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>;

package/src/navigation/Breadcrumbs/auto.tsx

@@ -12,8 +12,7 @@ import {
 } from '@digigov/ui/navigation/Breadcrumbs/hooks';
 
 export interface BreadcrumbsListAutoProps extends BreadcrumbsProps {}
-export interface BreadcrumbsAutoProps extends BreadcrumbsProps {}
-export interface BreadcrumbsAutoProps {
+export interface BreadcrumbsAutoProps extends BreadcrumbsProps {
   items: BreadcrumbItem[];
   initialUrlRoute?: string;
   children: ReactNode;

package/src/navigation/Breadcrumbs/index.tsx

@@ -1,6 +1,5 @@
 export * from '@digigov/react-core/Breadcrumbs';
 export * from '@digigov/react-core/BreadcrumbsList';
-export * from '@digigov/react-core/BreadcrumbsListItem';
 export * from '@digigov/react-core/BreadcrumbsListItemLink';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
 

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

@@ -1,42 +1,44 @@
 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';
-import { Auto } from '@digigov/ui/navigation/Breadcrumbs/__stories__/Auto';
 
 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' });
+  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 mount(<WithHook />);
   await page.evaluate(() => document.fonts.ready);
   await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
 
 test('renders the Auto click', async ({ mount, page }) => {
-  await mount(
-    <Auto />
-  )
+  await mount(<Auto />);
   await page.evaluate(() => document.fonts.ready);
   await page.click("[id='Εγχειρίδια Νομοθεσίας Πυρασφάλειας']");
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-

package/src/navigation/Breadcrumbs/slug.ts

@@ -1,6 +1,6 @@
 export function slug(text: string, maxWidth = 50): string {
   // Greek to Latin character mapping
-  const greekToLatinMap: { [key: string]: string } = {
+  const greekToLatinMap: Record<string, string> = {
     α: 'a',
     β: 'b',
     γ: 'g',
@@ -82,8 +82,8 @@ export function slug(text: string, maxWidth = 50): string {
   const processedText = latinText
     .toLowerCase()
     .replace(/\s+/g, '-')
-    .replace(/[^\w\-]+/g, '')
-    .replace(/\-\-+/g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
     .replace(/^-+/, '')
     .replace(/-+$/, '');
 

package/src/navigation/Breadcrumbs/utils.ts

@@ -2,8 +2,8 @@
 import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
 export const flattenRoutes = (
   items,
-  maxLength: number = 15,
-  prepend: string = '',
+  maxLength = 15,
+  prepend = '',
   parents: string[] = []
 ) => {
   let flattened = {};

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

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

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/interaction.test.tsx

@@ -8,60 +8,59 @@ import { PlacementTop } from '@digigov/ui/navigation/Dropdown/__stories__/Placem
 import { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
 
 test('renders the AlignRight Align right action', async ({ mount, page }) => {
-  await mount(
-    <AlignRight />
-  )
+  await mount(<AlignRight />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>div>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Default Open dropdown action', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Dense Open dropdown action', async ({ mount, page }) => {
-  await mount(
-    <Dense />
-  )
+  await mount(<Dense />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
 
-
-test('renders the PlacementTop Placement top action', async ({ mount, page }) => {
-  await mount(
-    <PlacementTop />
-  )
+test('renders the PlacementTop Placement top action', async ({
+  mount,
+  page,
+}) => {
+  await mount(<PlacementTop />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>div>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the ScrollableContent open content', async ({ mount, page }) => {
-  await mount(
-    <ScrollableContent />
-  )
+  await mount(<ScrollableContent />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/Link/__stories__/WithProvider.tsx

@@ -7,7 +7,11 @@ const CustomLink: React.FC<any> = (props) => {
 
 export const WithProvider = () => (
   <LinkProvider component={CustomLink}>
-    <Link aria-label="πλοηγηθείτε στην ιστοσελίδα το govgr" role="link" href="#">
+    <Link
+      aria-label="πλοηγηθείτε στην ιστοσελίδα το govgr"
+      role="link"
+      href="#"
+    >
       Σύνδεσμος
     </Link>
   </LinkProvider>

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

@@ -6,40 +6,38 @@ import { Default } from '@digigov/ui/navigation/Link/__stories__/Default';
 import { NoUnderline } from '@digigov/ui/navigation/Link/__stories__/NoUnderline';
 
 test('renders the DarkBackground Hover and focus', async ({ mount, page }) => {
-  await mount(
-    <DarkBackground />
-  )
+  await mount(<DarkBackground />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>section>a").hover();
- await page.locator("#root>section>a").click();
+  await page.locator('#root>section>a').hover();
+  await page.locator('#root>section>a').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Default Focus', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.keyboard.press("Tab");
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.keyboard.press('Tab');
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the NoUnderline Hover and focus', async ({ mount, page }) => {
-  await mount(
-    <NoUnderline />
-  )
+  await mount(<NoUnderline />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>a").hover();
- await page.locator("#root>a").click();
+  await page.locator('#root>a').hover();
+  await page.locator('#root>a').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/navigation/NavList/__stories__/Default.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 Default = () => {
   const { registerNavItem } = useNavList();

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

@@ -16,41 +16,41 @@ import {
 } 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 HorizontalWithDrawer = () => {
   const layout = 'horizontal';