@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

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

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

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

@@ -1,51 +1,50 @@
-import React from 'react';
-import BurgerIcon from '@digigov/ui/utils/SvgIcon';
+import React, { useState } from 'react';
 import { Button } from '@digigov/ui/form/Button';
+import { BurgerIcon } from '@digigov/ui/icons';
 import { NavListAuto } 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 UsingNavListAuto = () => {
   const layout = 'horizontal';
   const drawer = 'smDown';
   const border = true;
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
   return (
     <>
       <Button color="secondary" onClick={() => setOpen(!open)} smUpHidden>

package/src/navigation/NavList/__stories__/Vertical.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 Vertical = () => {
   const layout = 'vertical';
@@ -30,7 +30,11 @@ export const Vertical = () => {
   const [useActive, setUseActive] = useState('');
 
   return (
-    <Nav aria-orientation={layout || 'horizontal'} aria-label="navigation list">
+    <Nav
+      aria-orientation={layout || 'horizontal'}
+      aria-label="navigation list"
+      border={false}
+    >
       <NavList layout={layout}>
         {links.map((item, key) => (
           <NavListItemAction

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

@@ -13,41 +13,41 @@ import {
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
 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 VerticalWithoutDrawer = () => {
   const layout = 'vertical';

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

@@ -8,22 +8,22 @@ 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": "Νέα",
-    "badge": "2"
-  }
-]
+    name: 'news',
+    href: '#news',
+    label: 'Νέα',
+    badge: '2',
+  },
+];
 
 export const WithBadge = () => {
   const { registerNavItem } = useNavList();

package/src/navigation/NavList/{index.mdx → doc.mdx}

@@ -3,39 +3,36 @@ id: nav-list
 title: NavList
 ---
 
-## How to use
+import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+
+# NavList
 
-### Horizontal NavList
+## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/NavList/__stories__/Default.tsx" />
 
 ### Vertical NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="Vertical.tsx"
-/>
+<code src="@digigov/ui/navigation/NavList/__stories__/Vertical.tsx" />
 
 ### Horizontal NavList with submenu
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="HorizontalWithoutDrawer.tsx"
-/>
+<code src="@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx" />
+
 
 ### Vertical NavList with submenu
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="VerticalWithoutDrawer.tsx"
-/>
+<code src="@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer.tsx" />
+
+### Auto
+
+<PhaseBanner>
+    <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
+</PhaseBanner>
+
+This is an implementation of NavList, utilizing the `useNavList` hook to register each item along with its associated content.
+
+<code src="@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto.tsx" />
 
 ## Accessibility
 

package/src/navigation/NavList/hooks/useTogglableNav.tsx

@@ -68,7 +68,7 @@ export function useTogglableNav({
           );
         }
 
-        setOpened((_) => ({
+        setOpened(() => ({
           ...totalKeys.reduce((acc, cur) => {
             acc[cur] = cur === currentKey ? !selected : true;
             return acc;
@@ -165,7 +165,7 @@ export function useTogglableNav({
       ?.getAttribute('aria-orientation');
     const key = e.target.getAttribute('aria-controls');
     const keys = Object.entries(registered.current).map(
-      ([entryKey, _]) => entryKey
+      ([entryKey]) => entryKey
     );
 
     const handleArrowRight = () => {

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/navigation/NavList/__stories__/Default';
 import { HorizontalWithDrawer } from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithDrawer';
 import { HorizontalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
@@ -10,43 +9,45 @@ import { UsingNavListAuto } from '@digigov/ui/navigation/NavList/__stories__/Usi
 import { Vertical } from '@digigov/ui/navigation/NavList/__stories__/Vertical';
 import { VerticalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
 import { WithBadge } from '@digigov/ui/navigation/NavList/__stories__/WithBadge';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All NavList variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="HorizontalWithDrawer">
-      <HorizontalWithDrawer />
-    </TestVariant>
-    <TestVariant title="HorizontalWithoutDrawer">
-      <HorizontalWithoutDrawer />
-    </TestVariant>
-    <TestVariant title="NavListWithoutNav">
-      <NavListWithoutNav />
-    </TestVariant>
-    <TestVariant title="UsingHeaderButton">
-      <UsingHeaderButton />
-    </TestVariant>
-    <TestVariant title="UsingNavListAuto">
-      <UsingNavListAuto />
-    </TestVariant>
-    <TestVariant title="Vertical">
-      <Vertical />
-    </TestVariant>
-    <TestVariant title="VerticalWithoutDrawer">
-      <VerticalWithoutDrawer />
-    </TestVariant>
-    <TestVariant title="WithBadge">
-      <WithBadge />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="HorizontalWithDrawer">
+        <HorizontalWithDrawer />
+      </TestVariant>
+      <TestVariant title="HorizontalWithoutDrawer">
+        <HorizontalWithoutDrawer />
+      </TestVariant>
+      <TestVariant title="NavListWithoutNav">
+        <NavListWithoutNav />
+      </TestVariant>
+      <TestVariant title="UsingHeaderButton">
+        <UsingHeaderButton />
+      </TestVariant>
+      <TestVariant title="UsingNavListAuto">
+        <UsingNavListAuto />
+      </TestVariant>
+      <TestVariant title="Vertical">
+        <Vertical />
+      </TestVariant>
+      <TestVariant title="VerticalWithoutDrawer">
+        <VerticalWithoutDrawer />
+      </TestVariant>
+      <TestVariant title="WithBadge">
+        <WithBadge />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  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/interaction.test.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { HorizontalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
+import { UsingHeaderButton } from '@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton';
+import { VerticalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
+
+test('renders the HorizontalWithoutDrawer Open submenu', async ({
+  mount,
+  page,
+}) => {
+  await mount(<HorizontalWithoutDrawer />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>nav>ul>li:nth-child(2)>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the VerticalWithoutDrawer Open submenu', async ({
+  mount,
+  page,
+}) => {
+  await mount(<VerticalWithoutDrawer />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>nav>ul>li:nth-child(2)>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the UsingHeaderButton menu', async ({ mount, page }) => {
+  await mount(<UsingHeaderButton />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('button:text("Επιλογές")').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/navigation/Pagination/Pagination.stories.js

@@ -3,8 +3,7 @@ export default {
   title: 'Digigov UI/navigation/Pagination',
   description:
     'Use the pagination component to let users browse through a long list.',
-  link:
-    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/pagination',
   component: Pagination,
   displayName: 'Pagination',
 };

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

@@ -1,16 +1,15 @@
 import React from 'react';
 import Card from '@digigov/ui/content/Card';
-import Container from '@digigov/ui/layouts/Basic';
-import Main from '@digigov/ui/layouts/Basic';
+import Container from '@digigov/ui/layouts/Basic/Container';
 import Grid from '@digigov/ui/layouts/Grid';
+import { Pagination } from '@digigov/ui/navigation/Pagination';
 import {
-  Pagination,
   PaginationContextAuto,
   PaginationLabelAuto,
   PaginationListAuto,
   PaginationResultsPerPageSelectAuto,
   usePaginationContext,
-} from '@digigov/ui/navigation/Pagination';
+} from '@digigov/ui/navigation/Pagination/auto';
 
 const fetchedData: { id: number }[] = [];
 
@@ -18,21 +17,26 @@ for (let i = 0; i < 78; i++) {
   fetchedData.push({ id: i });
 }
 
-const MyContainer = ({ data }) => {
+const DataGrid = ({ data }) => {
   const { offset, limit } = usePaginationContext();
 
-  return data
-    .filter((item, index) => {
-      index > offset && index < offset + limit;
-      console.log(item);
-    })
-    .map((item, index) => {
-      return (
-        <Grid item xs={4} md={2} key={index}>
-          <Card variant="border"> {item.id}</Card>
-        </Grid>
-      );
-    });
+  return (
+    <Grid container spacing={4} mb={{ xs: 4, md: 8 }}>
+      {data
+        .filter((_item, index) => {
+          return index > offset && index < offset + limit;
+        })
+        .map((item, index) => {
+          return (
+            <Grid item xs={4} md={2} key={index}>
+              <Card variant="border" borderColor="light" dense>
+                {item.id}
+              </Card>
+            </Grid>
+          );
+        })}
+    </Grid>
+  );
 };
 
 export const Auto = () => {
@@ -43,19 +47,15 @@ export const Auto = () => {
       previousLabel="Προηγούμενη"
       nextLabel="Επόμενη"
     >
-      <Container>
-        <Main>
-          <Grid container spacing={4}>
-            <MyContainer data={fetchedData} />
-          </Grid>
-          <Pagination>
-            <PaginationLabelAuto />
-            <PaginationResultsPerPageSelectAuto>
-              Αποτελέσματα ανά σελίδα
-            </PaginationResultsPerPageSelectAuto>
-            <PaginationListAuto />
-          </Pagination>
-        </Main>
+      <Container grid={false}>
+        <DataGrid data={fetchedData} />
+        <Pagination>
+          <PaginationLabelAuto />
+          <PaginationResultsPerPageSelectAuto>
+            Αποτελέσματα ανά σελίδα
+          </PaginationResultsPerPageSelectAuto>
+          <PaginationListAuto />
+        </Pagination>
       </Container>
     </PaginationContextAuto>
   );

package/src/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx

@@ -6,6 +6,7 @@ import {
   SelectOption,
 } from '@digigov/ui/form/SelectContainer';
 import { I18NProvider } from '@digigov/ui/i18n';
+import { ChevronIcon } from '@digigov/ui/icons';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Pagination,
@@ -14,8 +15,6 @@ import {
   PaginationLabel,
 } from '@digigov/ui/navigation/Pagination';
 
-import { ChevronIcon } from '@digigov/ui/utils/SvgIcon';
-
 export const PaginationWithSmallFont = () => (
   <div className="example">
     <I18NProvider t={(str: string) => str}>

package/src/navigation/Pagination/__stories__/WithInactiveValues.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { I18NProvider } from '@digigov/ui/i18n';
+import { ChevronIcon } from '@digigov/ui/icons';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
@@ -9,7 +10,6 @@ import {
   PaginationListItem,
   PaginationLabel,
 } from '@digigov/ui/navigation/Pagination';
-import { ChevronIcon } from '@digigov/ui/utils/SvgIcon';
 
 export const WithInactiveValues = () => (
   <I18NProvider t={(str: string) => str}>

package/src/navigation/Pagination/__stories__/WithResultsPerPage.tsx

@@ -6,6 +6,7 @@ import {
   SelectOption,
 } from '@digigov/ui/form/SelectContainer';
 import { I18NProvider } from '@digigov/ui/i18n';
+import { ChevronIcon } from '@digigov/ui/icons';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Pagination,
@@ -14,8 +15,6 @@ import {
   PaginationLabel,
 } from '@digigov/ui/navigation/Pagination';
 
-import { ChevronIcon } from '@digigov/ui/utils/SvgIcon';
-
 export const WithResultsPerPage = () => (
   <I18NProvider t={(str: string) => str}>
     <Pagination>