@digigov/ui 2.0.0-8de46296 → 2.0.0-aefd0709

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/navigation/Dropdown';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
+
+const data = [
+  {
+    name: 'Item 1',
+    href: '#',
+  },
+  {
+    name: 'Item 2',
+    href: '#',
+  },
+  {
+    name: 'Item 3',
+    href: '#',
+  },
+  {
+    name: 'Item 4',
+    href: '#',
+  },
+  {
+    name: 'Item 5',
+    href: '#',
+  },
+  {
+    name: 'Item 6',
+    href: '#',
+  },
+  {
+    name: 'Item 7',
+    href: '#',
+  },
+  {
+    name: 'Item 8',
+    href: '#',
+  },
+  {
+    name: 'Item 9',
+    href: '#',
+  },
+  {
+    name: 'Item 10',
+    href: '#',
+  },
+  {
+    name: 'Item 11',
+    href: '#',
+  },
+  {
+    name: 'Item 12',
+    href: '#',
+  },
+];
+
+export const ScrollableContent = () => (
+  <Dropdown>
+    <DropdownButton
+      role="button"
+      aria-haspopup="true"
+      aria-controls="menu2"
+      arrow
+    >
+      Ενέργειες
+    </DropdownButton>
+    <DropdownContent role="menu" id="menu2" scrollable>
+      <NavList layout="vertical">
+        {data.map((item) => (
+          <NavListItemAction key={item.name} role="menuitem" href={item.href}>
+            {item.name}
+          </NavListItemAction>
+        ))}
+      </NavList>
+    </DropdownContent>
+  </Dropdown>
+);
+
+export default ScrollableContent;

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,28 @@
+---
+id: dropdown
+title: Dropdown
+---
+
+# Dropdown
+
+## How to use
+
+<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.
+
+<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.
+
+<code src="@digigov/ui/navigation/Dropdown/__stories__/PlacementTop.tsx" />
+
+## 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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { AlignRight } from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
+import { ContentPosition } from '@digigov/ui/navigation/Dropdown/__stories__/ContentPosition';
+import { Default } from '@digigov/ui/navigation/Dropdown/__stories__/Default';
+import { Dense } from '@digigov/ui/navigation/Dropdown/__stories__/Dense';
+import { Disabled } from '@digigov/ui/navigation/Dropdown/__stories__/Disabled';
+import { PlacementTop } from '@digigov/ui/navigation/Dropdown/__stories__/PlacementTop';
+import { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
+import { Secondary } from '@digigov/ui/navigation/Dropdown/__stories__/Secondary';
+import { VariantLink } from '@digigov/ui/navigation/Dropdown/__stories__/VariantLink';
+import { Warning } from '@digigov/ui/navigation/Dropdown/__stories__/Warning';
+import { WithIcons } from '@digigov/ui/navigation/Dropdown/__stories__/WithIcons';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+test('renders the All Dropdown variants', async ({ mount, page }) => {
+  await mount(
+    <div>
+      <TestVariant title="AlignRight">
+        <AlignRight />
+      </TestVariant>
+      <TestVariant title="ContentPosition">
+        <ContentPosition />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="Disabled">
+        <Disabled />
+      </TestVariant>
+      <TestVariant title="PlacementTop">
+        <PlacementTop />
+      </TestVariant>
+      <TestVariant title="ScrollableContent">
+        <ScrollableContent />
+      </TestVariant>
+      <TestVariant title="Secondary">
+        <Secondary />
+      </TestVariant>
+      <TestVariant title="VariantLink">
+        <VariantLink />
+      </TestVariant>
+      <TestVariant title="Warning">
+        <Warning />
+      </TestVariant>
+      <TestVariant title="WithIcons">
+        <WithIcons />
+      </TestVariant>
+    </div>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { AlignRight } from '@digigov/ui/navigation/Dropdown/__stories__/AlignRight';
+import { Default } from '@digigov/ui/navigation/Dropdown/__stories__/Default';
+import { Dense } from '@digigov/ui/navigation/Dropdown/__stories__/Dense';
+import { PlacementTop } from '@digigov/ui/navigation/Dropdown/__stories__/PlacementTop';
+import { ScrollableContent } from '@digigov/ui/navigation/Dropdown/__stories__/ScrollableContent';
+
+test('renders the AlignRight Align right action', async ({ mount, page }) => {
+  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',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the Default Open dropdown action', async ({ mount, page }) => {
+  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',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the Dense Open dropdown action', async ({ mount, page }) => {
+  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',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+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',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the ScrollableContent open content', async ({ mount, page }) => {
+  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',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/navigation/Link/Link.stories.js

@@ -5,9 +5,10 @@ export default {
   component: Link,
   displayName: 'Link',
 };
-export * from '@digigov/ui/navigation/Link/__stories__/Default';
-export * from '@digigov/ui/navigation/Link/__stories__/ExternalLink';
-export * from '@digigov/ui/navigation/Link/__stories__/OpensInNewTab';
-export * from '@digigov/ui/navigation/Link/__stories__/NoUnderline';
-export * from '@digigov/ui/navigation/Link/__stories__/DarkBackground';
-export * from '@digigov/ui/navigation/Link/__stories__/DarkBackgroundNoUnderline';
+export { Default } from '@digigov/ui/navigation/Link/__stories__/Default';
+export { ExternalLink } from '@digigov/ui/navigation/Link/__stories__/ExternalLink';
+export { OpensInNewTab } from '@digigov/ui/navigation/Link/__stories__/OpensInNewTab';
+export { NoUnderline } from '@digigov/ui/navigation/Link/__stories__/NoUnderline';
+export { DarkBackground } from '@digigov/ui/navigation/Link/__stories__/DarkBackground';
+export { DarkBackgroundNoUnderline } from '@digigov/ui/navigation/Link/__stories__/DarkBackgroundNoUnderline';
+export { WithProvider } from '@digigov/ui/navigation/Link/__stories__/WithProvider';

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link, LinkProvider } from '@digigov/ui/navigation/Link';
+
+const CustomLink: React.FC<any> = (props) => {
+  return <div>{props.children}</div>;
+};
+
+export const WithProvider = () => (
+  <LinkProvider component={CustomLink}>
+    <Link
+      aria-label="πλοηγηθείτε στην ιστοσελίδα το govgr"
+      role="link"
+      href="#"
+    >
+      Σύνδεσμος
+    </Link>
+  </LinkProvider>
+);
+
+export default WithProvider;

package/src/navigation/Link/doc.mdx

@@ -0,0 +1,38 @@
+---
+id: link
+title: Link
+---
+
+# Link
+
+## How to use
+
+<code src="@digigov/ui/navigation/Link/__stories__/Default.tsx" />
+
+### No Underline
+
+<code src="@digigov/ui/navigation/Link/__stories__/NoUnderline.tsx" />
+
+### Opens in a new tab
+
+<code src="@digigov/ui/navigation/Link/__stories__/OpensInNewTab.tsx" />
+
+### At dark background
+
+<code src="@digigov/ui/navigation/Link/__stories__/DarkBackground.tsx" />
+
+### At dark background and no underline
+
+<code src="@digigov/ui/navigation/Link/__stories__/DarkBackgroundNoUnderline.tsx" />
+
+### Accessibility
+
+You can read more about the accessibility patterns used in our Link
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["LinkBase"]} /> 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import Component, { LinkProvider } from '@digigov/ui/navigation/Link';
 
@@ -8,15 +8,15 @@ const CustomLink: React.FC<any> = (props) => {
 };
 
 it('renders the Link', () => {
-  expect(mount(<Component>hello</Component>)).toMatchSnapshot();
+  expect(render(<Component>hello</Component>).baseElement).toMatchSnapshot();
 });
 
 it('Provider', () => {
   expect(
-    mount(
+    render(
       <LinkProvider component={CustomLink}>
         <Component>hello</Component>
       </LinkProvider>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { DarkBackground } from '@digigov/ui/navigation/Link/__stories__/DarkBackground';
+import { DarkBackgroundNoUnderline } from '@digigov/ui/navigation/Link/__stories__/DarkBackgroundNoUnderline';
+import { Default } from '@digigov/ui/navigation/Link/__stories__/Default';
+import { ExternalLink } from '@digigov/ui/navigation/Link/__stories__/ExternalLink';
+import { NoUnderline } from '@digigov/ui/navigation/Link/__stories__/NoUnderline';
+import { OpensInNewTab } from '@digigov/ui/navigation/Link/__stories__/OpensInNewTab';
+import { WithProvider } from '@digigov/ui/navigation/Link/__stories__/WithProvider';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+test('renders the All Link variants', async ({ mount, page }) => {
+  await mount(
+    <div>
+      <TestVariant title="DarkBackground">
+        <DarkBackground />
+      </TestVariant>
+      <TestVariant title="DarkBackgroundNoUnderline">
+        <DarkBackgroundNoUnderline />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="ExternalLink">
+        <ExternalLink />
+      </TestVariant>
+      <TestVariant title="NoUnderline">
+        <NoUnderline />
+      </TestVariant>
+      <TestVariant title="OpensInNewTab">
+        <OpensInNewTab />
+      </TestVariant>
+      <TestVariant title="WithProvider">
+        <WithProvider />
+      </TestVariant>
+    </div>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/navigation/Link/index.tsx

@@ -3,15 +3,15 @@ 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>
 );
 
-const LinkComponentContext = React.createContext<React.ElementType<LinkProps>>(
-  LinkBase
-);
+const LinkComponentContext =
+  React.createContext<React.ElementType<LinkProps>>(LinkBase);
 export const LinkProvider: React.FC<LinkComponentContextProps> = (props) => {
   return (
     <LinkComponentContext.Provider value={props.component}>
@@ -20,9 +20,8 @@ export const LinkProvider: React.FC<LinkComponentContextProps> = (props) => {
   );
 };
 
-export interface LinkProps extends LinkBaseProps {
-  ref?: React.Ref<HTMLAnchorElement>;
-}
+export type LinkProps = Omit<LinkBaseProps, 'ref'> &
+  React.RefAttributes<HTMLAnchorElement>;
 
 const Link: React.ExoticComponent<LinkProps> = React.forwardRef(function Link(
   { children, href = '', ...props },

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { DarkBackground } from '@digigov/ui/navigation/Link/__stories__/DarkBackground';
+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 page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>section>a').hover();
+  await page.locator('#root>section>a').click();
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the Default Focus', async ({ mount, page }) => {
+  await mount(<Default />);
+  await page.evaluate(() => document.fonts.ready);
+  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 page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>a').hover();
+  await page.locator('#root>a').click();
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/navigation/NavList/NavList.stories.js

@@ -7,11 +7,12 @@ export default {
   component: NavList,
   displayName: 'NavList',
 };
-export * from '@digigov/ui/navigation/NavList/__stories__/Default';
-export * from '@digigov/ui/navigation/NavList/__stories__/Vertical';
-export * from '@digigov/ui/navigation/NavList/__stories__/NavListWithoutNav';
-export * from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
-export * from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
-export * from '@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto';
-export * from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithDrawer';
-export * from '@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton';
+export { Default } from '@digigov/ui/navigation/NavList/__stories__/Default';
+export { WithBadge } from '@digigov/ui/navigation/NavList/__stories__/WithBadge';
+export { Vertical } from '@digigov/ui/navigation/NavList/__stories__/Vertical';
+export { NavListWithoutNav } from '@digigov/ui/navigation/NavList/__stories__/NavListWithoutNav';
+export { HorizontalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
+export { VerticalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
+export { UsingNavListAuto } from '@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto';
+export { HorizontalWithDrawer } from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithDrawer';
+export { UsingHeaderButton } from '@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton';

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__/Default.tsx

@@ -5,7 +5,24 @@ import {
   NavListItemAction,
   useNavList,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksOneLevel.json';
+
+const links = [
+  {
+    name: 'home',
+    href: '#home',
+    label: 'Αρχική',
+  },
+  {
+    name: 'educational',
+    label: 'Εκπαιδευτικό υλικό',
+    href: '#educational',
+  },
+  {
+    name: 'news',
+    href: '#news',
+    label: 'Νέα',
+  },
+];
 
 export const Default = () => {
   const { registerNavItem } = useNavList();