@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

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

@@ -1,4 +1,11 @@
 import React from 'react';
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
 import {
   SummaryList,
   SummaryListItem,
@@ -6,6 +13,7 @@ import {
   SummaryListItemValue,
   SummaryListItemAction,
 } from '@digigov/ui/content/SummaryList';
+import { Hidden } from '@digigov/ui/layouts/Hidden';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
   Tabs,
@@ -13,26 +21,14 @@ 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';
-import { Hidden } from '@digigov/ui/layouts/Hidden';
-import {
-  Accordion,
-  AccordionSection,
-  AccordionSectionContent,
-  AccordionSectionSummary,
-  AccordionSectionSummaryHeading,
-} from '@digigov/ui/content/Accordion';
 
 export function UsingAccordion() {
   const { register, panel } = useTabs({ defaultOpen: 'a' });
 
-  const StoixeiaContent = () => {
+  const UserContent = () => {
     return (
       <>
         <Heading size="md" element="h3">
@@ -65,7 +61,7 @@ export function UsingAccordion() {
       </>
     );
   };
-  const YpotheseisContent = () => {
+  const CaseContent = () => {
     return (
       <>
         <Heading size="md" element="h3">
@@ -76,40 +72,131 @@ export function UsingAccordion() {
     );
   };
 
-  const MhnumataContent = () => {
+  const MessageContent = () => {
     return (
       <>
         <Heading size="md" element="h3">
           Μηνύματα
         </Heading>
-        <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>
       </>
     );
   };
 
-  const IstorikoContent = () => {
+  const HistoryContent = () => {
     return (
       <>
         <Heading size="md" element="h3">
           Ιστορικό
         </Heading>
-        <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>
       </>
     );
   };
@@ -126,21 +213,21 @@ export function UsingAccordion() {
             <TabsListItem {...register('d')}>Ιστορικό</TabsListItem>
           </TabsList>
           <TabsPanel {...panel('a')}>
-            <StoixeiaContent />
+            <UserContent />
           </TabsPanel>
           <TabsPanel {...panel('b')}>
-            <YpotheseisContent />
+            <CaseContent />
           </TabsPanel>
           <TabsPanel {...panel('c')}>
-            <MhnumataContent />
+            <MessageContent />
           </TabsPanel>
           <TabsPanel {...panel('d')}>
-            <IstorikoContent />
+            <HistoryContent />
           </TabsPanel>
         </Tabs>
       </Hidden>
       <Hidden mdUp>
-        <Accordion summaryColor='secondary' dense>
+        <Accordion summaryColor="secondary" dense>
           <AccordionSection open>
             <AccordionSectionSummary>
               <AccordionSectionSummaryHeading aria-controls="content1">
@@ -148,7 +235,7 @@ export function UsingAccordion() {
               </AccordionSectionSummaryHeading>
             </AccordionSectionSummary>
             <AccordionSectionContent id="content1">
-              <StoixeiaContent />
+              <UserContent />
             </AccordionSectionContent>
           </AccordionSection>
           <AccordionSection>
@@ -158,7 +245,7 @@ export function UsingAccordion() {
               </AccordionSectionSummaryHeading>
             </AccordionSectionSummary>
             <AccordionSectionContent id="content2">
-              <YpotheseisContent />
+              <CaseContent />
             </AccordionSectionContent>
           </AccordionSection>
           <AccordionSection>
@@ -168,7 +255,7 @@ export function UsingAccordion() {
               </AccordionSectionSummaryHeading>
             </AccordionSectionSummary>
             <AccordionSectionContent id="content3">
-              <MhnumataContent />
+              <MessageContent />
             </AccordionSectionContent>
           </AccordionSection>
           <AccordionSection>
@@ -178,7 +265,7 @@ export function UsingAccordion() {
               </AccordionSectionSummaryHeading>
             </AccordionSectionSummary>
             <AccordionSectionContent id="content4">
-              <IstorikoContent />
+              <HistoryContent />
             </AccordionSectionContent>
           </AccordionSection>
         </Accordion>

package/src/navigation/Tabs/doc.mdx

@@ -0,0 +1,47 @@
+---
+id: tabs
+title: Tabs
+---
+
+import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+
+# Tabs
+
+## How to use
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/Default.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/Dense.tsx" />
+
+### Using Accordion
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+
+### Auto
+
+This is an implementation of the Tabs collection, encapsulated within a `TabsContext` provider, designed to facilitate and manage Tabs functionality effectively.
+
+<PhaseBanner>
+    <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
+</PhaseBanner>
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Tabs
+implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) section.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["Tabs",
+  "TabsHeading",
+  "TabsList",
+  "TabsListItem",
+  "TabsPanel",]} /> 
+

package/src/navigation/Tabs/hooks.ts

@@ -1,5 +1,5 @@
-import { useScreenSize } from '@digigov/ui/utils/hooks/useScreen';
 import React, { useState, useRef, useCallback } from 'react';
+import { useScreenSize } from '@digigov/ui/utils/hooks/useScreen';
 
 export type TabId = string | number | null;
 
@@ -8,9 +8,7 @@ export interface UseTabsProps {
 }
 
 export interface UseTabsReturn {
-  register: (
-    id: TabId
-  ) => {
+  register: (id: TabId) => {
     role: string;
     href: string;
     id: string;
@@ -21,9 +19,7 @@ export interface UseTabsReturn {
     onKeyDown: (e: React.KeyboardEvent) => void;
     ref?: React.RefObject<HTMLAnchorElement>;
   };
-  panel: (
-    id: TabId
-  ) => {
+  panel: (id: TabId) => {
     tab: TabId;
     role: string;
     'aria-labelledby': string;
@@ -79,12 +75,11 @@ export const useTabs = ({
         'aria-controls': `panel-${id}`,
         tabIndex: currentOpen === id ? 0 : -1,
         onClick: (e) => {
-
           // If the screen is mobile, we don't want to prevent the default behavior of the anchor tag,
           // which is to navigate to the href.
-          if (screenSize != 'xs' && screenSize !='sm') {
+          if (screenSize != 'xs' && screenSize != 'sm') {
             e.preventDefault();
-          }        
+          }
           open(id);
         },
         onKeyDown: (e: React.KeyboardEvent) => {

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

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

@@ -2,16 +2,22 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
 import { Default } from '@digigov/ui/navigation/Tabs/__stories__/Default';
+const SCREENSHOT_DELAY = 2_000;
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 test('renders the Default Click second tab', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>ul>li:nth-child(2)>a").hover();
- await page.locator("#root>div>ul>li:nth-child(2)>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 delay(SCREENSHOT_DELAY);
+  await page.locator('#root>div>ul>li:nth-child(2)>a').hover();
+  await page.locator('#root>div>ul>li:nth-child(2)>a').click();
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-