@digigov/ui 2.0.0-834daea4 → 2.0.0-87b6232d

package/src/navigation/BackLink/doc.mdx

@@ -15,5 +15,5 @@ Use the back link component to help users go back to the previous page in a mult
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["BackLink"]} />
+<ComponentProps componentName={["BackLink", "BackLinkBase"]} />
 

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

@@ -14,6 +14,10 @@ test('renders the All BackLink variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/BackLink/index.tsx

@@ -1,3 +1,20 @@
-export * from '@digigov/react-core/BackLink';
-import BackLink from '@digigov/react-core/BackLink';
+export * from '@digigov/react-core/BackLinkBase';
+import React from 'react';
+import {
+  BackLinkBase,
+  BackLinkBaseProps,
+} from '@digigov/react-core/BackLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface BackLinkProps extends BackLinkBaseProps {}
+
+export const BackLink = React.forwardRef<HTMLAnchorElement, BackLinkProps>(
+  function BackLink({ children, ...props }, ref) {
+    return (
+      <BackLinkBase as={Link} ref={ref} {...props}>
+        {children}
+      </BackLinkBase>
+    );
+  }
+);
 export default BackLink;

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

@@ -4,12 +4,16 @@ 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' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>a').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -18,6 +18,10 @@ test('renders the All BackToTopLink variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   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

@@ -10,4 +10,5 @@ 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,36 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+  BreadcrumbsListItemWrapper,
+  BreadcrumbsListItemWrapperProps,
+} from '@digigov/react-core/BreadcrumbsListItemWrapper';
+import Link from '@digigov/ui/navigation/Link';
+
+export interface BreadcrumbsListItemProps
+  extends BreadcrumbsListItemWrapperProps {
+  href?: string;
+}
+
+const BreadcrumbsListItem: React.FC<BreadcrumbsListItemProps> = ({
+  href,
+  children,
+  ...props
+}) => {
+  return (
+    <BreadcrumbsListItemWrapper {...props}>
+      <Link
+        href={href}
+        defaultStyle={false}
+        className={clsx({
+          'ds-breadcrumbs__link': true,
+          'ds-breadcrumbs__link--inactive': href === undefined,
+        })}
+      >
+        {children}
+      </Link>
+    </BreadcrumbsListItemWrapper>
+  );
+};
+
+export { BreadcrumbsListItem };
+export default BreadcrumbsListItem;

package/src/navigation/Breadcrumbs/BreadcrumbsListItemLink.tsx

@@ -0,0 +1,22 @@
+export * from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+import React from 'react';
+import {
+  BreadcrumbsListItemLinkBase,
+  BreadcrumbsListItemLinkBaseProps,
+} from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+import { Link } from '@digigov/ui/navigation/Link';
+
+export interface BreadcrumbsListItemLinkProps
+  extends BreadcrumbsListItemLinkBaseProps {}
+
+export const BreadcrumbsListItemLink = React.forwardRef<
+  HTMLAnchorElement,
+  BreadcrumbsListItemLinkProps
+>(function BreadcrumbsListItemLink({ children, ...props }, ref) {
+  return (
+    <BreadcrumbsListItemLinkBase as={Link} ref={ref} {...props}>
+      {children}
+    </BreadcrumbsListItemLinkBase>
+  );
+});
+export default BreadcrumbsListItemLink;

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

@@ -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

@@ -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.test.tsx

@@ -5,6 +5,7 @@ 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';
+import { WithProvider } from '@digigov/ui/navigation/Breadcrumbs/__stories__/WithProvider';
 
 test('renders the All Breadcrumbs variants', async ({ mount, page }) => {
   await mount(
@@ -22,10 +23,17 @@ test('renders the All Breadcrumbs variants', async ({ mount, page }) => {
     <TestVariant title="WithoutCurrentPage">
       <WithoutCurrentPage />
     </TestVariant>
+    <TestVariant title="WithProvider">
+      <WithProvider />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/navigation/Breadcrumbs/index.tsx

@@ -1,8 +1,10 @@
 export * from '@digigov/react-core/Breadcrumbs';
 export * from '@digigov/react-core/BreadcrumbsList';
-export * from '@digigov/react-core/BreadcrumbsListItem';
+export * from '@digigov/react-core/BreadcrumbsListItemWrapper';
+export * from '@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItemLink';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
 
+export * from '@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItem';
 export * from '@digigov/ui/navigation/Breadcrumbs/utils';
 
 export default Breadcrumbs;

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

@@ -1,42 +1,56 @@
 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' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  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);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   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);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
   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/Drawer/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All Drawer variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

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/doc.mdx

@@ -7,22 +7,28 @@ title: Dropdown
 
 ## How to use
 
-<code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
-
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/Default.tsx" />
+</div>
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
-
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/AlignRight.tsx" />
+</div>
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+<div className="dropdown-docs">
+  <code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+</div>
 
 ## API
 
-See below for a complete reference to all of the props  available to the components mentioned here.
+See below for a complete reference to all of the props available to the components mentioned here.
 
-<ComponentProps componentName={["DropdownBase","DropdownButton","DropdownContent"]} /> 
+<ComponentProps
+  componentName={['DropdownBase', 'DropdownButton', 'DropdownContent']}
+/>

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

@@ -54,6 +54,10 @@ test('renders the All Dropdown variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });