@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/src/navigation/NavList/doc.mdx

@@ -0,0 +1,59 @@
+---
+id: nav-list
+title: NavList
+---
+
+import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+
+# NavList
+
+## How to use
+
+<code src="@digigov/ui/navigation/NavList/__stories__/Default.tsx" />
+
+### Vertical NavList
+
+<code src="@digigov/ui/navigation/NavList/__stories__/Vertical.tsx" />
+
+### Horizontal NavList with submenu
+
+<code src="@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer.tsx" />
+
+### Vertical NavList with submenu
+
+<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
+
+You can read more about the accessibility patterns used in our NavList
+implementation in the ARIA Authoring Practices Guide (APG) at
+[Menu or Menu bar](https://www.w3.org/WAI/ARIA/apg/patterns/menu/).
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={[
+    'Nav',
+    'NavList',
+    'NavListAction',
+    'NavListItemActionContainer',
+    'NavListItemButton',
+    'NavListItemLinkBase',
+    'NavMenuContainer',
+    'NavMenuContentListBase',
+    'NavMenuContentListItem',
+    'NavMenuTitle',
+  ]}
+/>{' '}

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

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

@@ -12,8 +12,9 @@ export * from '@digigov/react-core/NavMenuContentListBase';
 export * from '@digigov/react-core/NavMenuContentListItem';
 export * from '@digigov/react-core/NavMenuTitle';
 export * from '@digigov/react-core/NavListItemActionContainer';
-export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/ui/navigation/NavList/NavListItemAction';
 export * from '@digigov/react-core/NavListItemBadge';
 export * from '@digigov/react-core/NavListItemButton';
-export * from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/ui/navigation/NavList/NavListItemLink';
+
 export default NavList;

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

@@ -11,6 +11,10 @@ test('renders the HorizontalWithoutDrawer Open submenu', async ({
 }) => {
   await mount(<HorizontalWithoutDrawer />);
   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.locator('#root>nav>ul>li:nth-child(2)>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -25,6 +29,10 @@ test('renders the VerticalWithoutDrawer Open submenu', async ({
 }) => {
   await mount(<VerticalWithoutDrawer />);
   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.locator('#root>nav>ul>li:nth-child(2)>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -36,6 +44,10 @@ test('renders the VerticalWithoutDrawer Open submenu', async ({
 test('renders the UsingHeaderButton menu', async ({ mount, page }) => {
   await mount(<UsingHeaderButton />);
   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.locator('button:text("Επιλογές")').click();
   const screenshot = await page.screenshot({
     fullPage: true,

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,11 +1,8 @@
 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 } from '@digigov/ui/navigation/Pagination';
 import {
   PaginationContextAuto,
   PaginationLabelAuto,
@@ -20,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 = () => {
@@ -45,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>

package/src/navigation/Pagination/doc.mdx

@@ -0,0 +1,37 @@
+---
+id: pagination
+title: Pagination
+---
+
+# Pagination
+
+pagination component displays a list of page numbers, and allows the user to navigate to a specific page.
+
+## How to use
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/Default.tsx" />
+
+### With inactive values
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues.tsx" />
+
+### With small fonts
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont.tsx" />
+
+### With results per page
+
+<code src="@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps
+  componentName={[
+    'Pagination',
+    'PaginationLabel',
+    'PaginationList',
+    'PaginationListItem',
+  ]}
+/>{' '}

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

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

@@ -4,14 +4,18 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/navigation/Pagination/__stories__/Default';
 
 test('renders the Default Hover and click no3', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>nav:nth-child(1)>ul>li:nth-child(4)>a").hover();
- await page.locator("#root>nav:nth-child(1)>ul>li:nth-child(4)>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>nav:nth-child(1)>ul>li:nth-child(4)>a').hover();
+  await page.locator('#root>nav:nth-child(1)>ul>li:nth-child(4)>a').click();
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -14,6 +14,10 @@ test('renders the All SkipLink 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/Tabs/__stories__/Auto.tsx

@@ -8,11 +8,7 @@ import {
   SummaryListItemAction,
 } from '@digigov/ui/content/SummaryList';
 import { Link } from '@digigov/ui/navigation/Link';
-import {
-  TabsHeading,
-  TabsList,
-
-} from '@digigov/ui/navigation/Tabs';
+import { TabsHeading, TabsList } from '@digigov/ui/navigation/Tabs';
 import {
   TabsAuto,
   TabsListItem,

package/src/navigation/Tabs/__stories__/Default.tsx

@@ -13,12 +13,8 @@ import {
   TabsList,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
-import {
-  TabsListItem,
-  TabsPanel,
-} from '@digigov/ui/navigation/Tabs/auto';
+import { TabsListItem, TabsPanel } from '@digigov/ui/navigation/Tabs/auto';
 import { Heading } from '@digigov/ui/typography/Heading';
-import { Paragraph } from '@digigov/ui/typography/Paragraph';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
 export function Default() {
@@ -74,49 +70,120 @@ export function Default() {
         <Heading size="md" element="h3">
           Μηνύματα
         </Heading>
-        {/* fill a random paragraph */}
-        <Paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </Paragraph>
-        <Paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </Paragraph>
+        <SummaryList>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημερομηνία Ειδοποίησης</SummaryListItemKey>
+            <SummaryListItemValue>25/03/2025</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Αποστολέας</SummaryListItemKey>
+            <SummaryListItemValue>Δημοτική Αρχή Αθηνών</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Θέμα</SummaryListItemKey>
+            <SummaryListItemValue>
+              Ειδοποίηση για πληρωμή Δημοτικών Τελών
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Μήνυμα</SummaryListItemKey>
+            <SummaryListItemValue>
+              Παρακαλούμε να εξοφλήσετε τα δημοτικά τέλη για το έτος 2025 μέχρι
+              τις 15/04/2025.
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημερομηνία Ειδοποίησης</SummaryListItemKey>
+            <SummaryListItemValue>15/03/2025</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Αποστολέας</SummaryListItemKey>
+            <SummaryListItemValue>Υπουργείο Οικονομικών</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Θέμα</SummaryListItemKey>
+            <SummaryListItemValue>
+              Ειδοποίηση για Φορολογική Δήλωση
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Μήνυμα</SummaryListItemKey>
+            <SummaryListItemValue>
+              Η προθεσμία υποβολής της φορολογικής δήλωσης λήγει στις
+              31/03/2025. Παρακαλούμε υποβάλετε τη δήλωσή σας εγκαίρως.
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημερομηνία Ειδοποίησης</SummaryListItemKey>
+            <SummaryListItemValue>10/03/2025</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Αποστολέας</SummaryListItemKey>
+            <SummaryListItemValue>Εθνική Τράπεζα Ελλάδος</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Θέμα</SummaryListItemKey>
+            <SummaryListItemValue>Αναγγελία Συναλλαγής</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Μήνυμα</SummaryListItemKey>
+            <SummaryListItemValue>
+              Η συναλλαγή σας για το ποσό των 500€ ολοκληρώθηκε με επιτυχία στις
+              10/03/2025.
+            </SummaryListItemValue>
+          </SummaryListItem>
+        </SummaryList>
       </TabsPanel>
       <TabsPanel {...panel('d')}>
         <Heading size="md" element="h3">
           Ιστορικό
         </Heading>
-        {/* fill a random paragraph */}
-        <Paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </Paragraph>
-        <Paragraph>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </Paragraph>
+        <SummaryList>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημερομηνία</SummaryListItemKey>
+            <SummaryListItemValue>25/03/2025</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ενέργεια</SummaryListItemKey>
+            <SummaryListItemValue>
+              Έκδοση Υπεύθυνης Δήλωσης
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Λεπτομέρειες</SummaryListItemKey>
+            <SummaryListItemValue>
+              Δήλωση απώλειας εγγράφου
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημερομηνία</SummaryListItemKey>
+            <SummaryListItemValue>15/03/2025</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ενέργεια</SummaryListItemKey>
+            <SummaryListItemValue>
+              Υποβολή Φορολογικής Δήλωσης
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Λεπτομέρειες</SummaryListItemKey>
+            <SummaryListItemValue>Ε1 - Έτος 2024</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημερομηνία</SummaryListItemKey>
+            <SummaryListItemValue>10/03/2025</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ενέργεια</SummaryListItemKey>
+            <SummaryListItemValue>
+              Έκδοση Πιστοποιητικού Οικογενειακής Κατάστασης
+            </SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Λεπτομέρειες</SummaryListItemKey>
+            <SummaryListItemValue>Δήμος Αθηναίων</SummaryListItemValue>
+          </SummaryListItem>
+        </SummaryList>
       </TabsPanel>
     </Tabs>
   );

package/src/navigation/Tabs/__stories__/Dense.tsx

@@ -14,10 +14,7 @@ import {
   TabsList,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
-import {
-  TabsListItem,
-  TabsPanel,
-} from '@digigov/ui/navigation/Tabs/auto';
+import { TabsListItem, TabsPanel } from '@digigov/ui/navigation/Tabs/auto';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';