@digigov/ui 1.2.0-dcbd7ded → 2.0.0-0edebf87

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 role="menuitem" href={item.href}>
+            {item.name}
+          </NavListItemAction>
+        ))}
+      </NavList>
+    </DropdownContent>
+  </Dropdown>
+);
+
+export default ScrollableContent;

package/src/navigation/Dropdown/index.mdx

@@ -5,10 +5,6 @@ title: Dropdown
 
 # Dropdown
 
-```bash
-import Dropdown from '@digigov/ui/navigation/Dropdown';
-```
-
 ## How to use
 
 <Story
@@ -39,4 +35,6 @@ You can display the dropdown menu to the top of the `Dropdown` button.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Dropdown" />
+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,60 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+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';
+
+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,67 @@
+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

@@ -11,3 +11,4 @@ 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 * from '@digigov/ui/navigation/Link/__stories__/WithProvider';

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

@@ -0,0 +1,16 @@
+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/index.mdx

@@ -3,10 +3,6 @@ id: link
 title: Link
 ---
 
-```bash
-import Link from '@digigov/ui/navigation/Link';
-```
-
 ## How to use
 
 ### Default
@@ -35,19 +31,11 @@ import Link from '@digigov/ui/navigation/Link';
 
 ### At dark background
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackground.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackgroundNoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
 
 ### Accessibility
 
@@ -57,4 +45,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Link" />
+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.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+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';
+
+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/interaction.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 { 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/__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();

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

@@ -14,7 +14,43 @@ import {
   NavMenuTitle,
   useNavList,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
+
+const links = [
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "subMenu": [
+      {
+        "name": "elearning",
+        "href": "#elearning",
+        "label": "Εκπαιδευτική πλατφόρμα"
+      },
+      {
+        "name": "videos",
+        "href": "#videos",
+        "label": "Βίντεο"
+      },
+      {
+        "name": "presentations",
+        "href": "#presentations",
+        "label": "Παρουσιάσεις"
+      },
+      {
+        "name": "promoting",
+        "href": "#promoting",
+        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+      },
+      {
+        "name": "other-texts",
+        "href": "#other-texts",
+        "label": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]
 
 export const HorizontalWithDrawer = () => {
   const layout = 'horizontal';

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

@@ -11,7 +11,43 @@ import {
   NavMenuTitle,
   useNavList,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
+
+const links = [
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "subMenu": [
+      {
+        "name": "elearning",
+        "href": "#elearning",
+        "label": "Εκπαιδευτική πλατφόρμα"
+      },
+      {
+        "name": "videos",
+        "href": "#videos",
+        "label": "Βίντεο"
+      },
+      {
+        "name": "presentations",
+        "href": "#presentations",
+        "label": "Παρουσιάσεις"
+      },
+      {
+        "name": "promoting",
+        "href": "#promoting",
+        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+      },
+      {
+        "name": "other-texts",
+        "href": "#other-texts",
+        "label": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]
 
 export const HorizontalWithoutDrawer = () => {
   const layout = 'horizontal';

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

@@ -4,7 +4,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 NavListWithoutNav = () => {
   const layout = 'vertical';

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

@@ -1,8 +1,45 @@
 import React from 'react';
-import BurgerIcon from '@digigov/react-icons/BurgerIcon';
+import BurgerIcon from '@digigov/ui/utils/SvgIcon';
 import { Button } from '@digigov/ui/form/Button';
 import { NavListAuto } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
+
+const links = [
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "subMenu": [
+      {
+        "name": "elearning",
+        "href": "#elearning",
+        "label": "Εκπαιδευτική πλατφόρμα"
+      },
+      {
+        "name": "videos",
+        "href": "#videos",
+        "label": "Βίντεο"
+      },
+      {
+        "name": "presentations",
+        "href": "#presentations",
+        "label": "Παρουσιάσεις"
+      },
+      {
+        "name": "promoting",
+        "href": "#promoting",
+        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+      },
+      {
+        "name": "other-texts",
+        "href": "#other-texts",
+        "label": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]
+
 
 export const UsingNavListAuto = () => {
   const layout = 'horizontal';

package/src/navigation/NavList/__stories__/Vertical.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 Vertical = () => {
   const layout = 'vertical';

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

@@ -10,9 +10,45 @@ import {
   NavMenuContentListItem,
   NavMenuTitle,
 } from '@digigov/ui/navigation/NavList';
-import links from '@digigov/ui/navigation/NavList/__stories__/NavLinksWithSubmenu.json';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
+const links = [
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "subMenu": [
+      {
+        "name": "elearning",
+        "href": "#elearning",
+        "label": "Εκπαιδευτική πλατφόρμα"
+      },
+      {
+        "name": "videos",
+        "href": "#videos",
+        "label": "Βίντεο"
+      },
+      {
+        "name": "presentations",
+        "href": "#presentations",
+        "label": "Παρουσιάσεις"
+      },
+      {
+        "name": "promoting",
+        "href": "#promoting",
+        "label": "Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά"
+      },
+      {
+        "name": "other-texts",
+        "href": "#other-texts",
+        "label": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]
+
 export const VerticalWithoutDrawer = () => {
   const layout = 'vertical';
   const border = false;