@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

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 = {};
@@ -15,9 +15,9 @@ export const flattenRoutes = (
 
     const routeChildren = children
       ? children.map((child) => ({
-        href: child.href || slug(child.title, maxLength),
-        ...child,
-      }))
+          href: child.href || slug(child.title, maxLength),
+          ...child,
+        }))
       : [];
 
     flattened[route] = {

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

@@ -1,8 +1,7 @@
 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';
+import { Heading } from '@digigov/ui/typography/Heading';
 
 function useDrawer(): [boolean, () => void] {
   const [open, setOpen] = useState(true);
@@ -52,7 +51,6 @@ const links = [
 
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
-
   const layout = 'vertical';
   const border = false;
   const fixed = false;
@@ -72,4 +70,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/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

@@ -0,0 +1,34 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+# Dropdown
+
+## How to use
+
+<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.
+
+<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.
+
+<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.
+
+<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();
 });

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

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

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/__stories__/DarkBackground.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
+import { Masthead } from '@digigov/ui/app/Masthead';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Link } from '@digigov/ui/navigation/Link';
 export const DarkBackground = () => (

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
+import { Masthead } from '@digigov/ui/app/Masthead';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Link } from '@digigov/ui/navigation/Link';
 export const DarkBackgroundNoUnderline = () => (

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/{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/Link/index.test.tsx

@@ -38,6 +38,10 @@ test('renders the All Link 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/Link/index.tsx

@@ -1,17 +1,22 @@
 import React from 'react';
 import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
-
 export interface LinkComponentContextProps {
   component: React.ElementType<LinkProps>;
   children?: React.ReactNode;
 }
 
-export const CommonLink: React.FC<LinkProps> = (props) => (
-  <LinkBase {...props}>{props.children}</LinkBase>
-);
+export const CommonLink: React.FC<LinkProps> = (props) => {
+  const defaultStyle = !props.className;
+  const underline = props.className ? !defaultStyle : defaultStyle;
+  return (
+    <LinkBase defaultStyle={defaultStyle} underline={underline} {...props}>
+      {props.children}
+    </LinkBase>
+  );
+};
 
 const LinkComponentContext =
-  React.createContext<React.ElementType<LinkProps>>(LinkBase);
+  React.createContext<React.ElementType<LinkProps>>(CommonLink);
 export const LinkProvider: React.FC<LinkComponentContextProps> = (props) => {
   return (
     <LinkComponentContext.Provider value={props.component}>