@digigov/ui 2.0.0-8e254888 → 2.0.0-a32ad9b2

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

@@ -15,7 +15,6 @@ import {
 } from '@digigov/ui/navigation/Tabs';
 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() {
@@ -71,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__/UsingAccordion.tsx

@@ -23,13 +23,12 @@ import {
 } from '@digigov/ui/navigation/Tabs';
 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 UsingAccordion() {
   const { register, panel } = useTabs({ defaultOpen: 'a' });
 
-  const StoixeiaContent = () => {
+  const UserContent = () => {
     return (
       <>
         <Heading size="md" element="h3">
@@ -62,7 +61,7 @@ export function UsingAccordion() {
       </>
     );
   };
-  const YpotheseisContent = () => {
+  const CaseContent = () => {
     return (
       <>
         <Heading size="md" element="h3">
@@ -73,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>
       </>
     );
   };
@@ -123,16 +213,16 @@ 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>
@@ -145,7 +235,7 @@ export function UsingAccordion() {
               </AccordionSectionSummaryHeading>
             </AccordionSectionSummary>
             <AccordionSectionContent id="content1">
-              <StoixeiaContent />
+              <UserContent />
             </AccordionSectionContent>
           </AccordionSection>
           <AccordionSection>
@@ -155,7 +245,7 @@ export function UsingAccordion() {
               </AccordionSectionSummaryHeading>
             </AccordionSectionSummary>
             <AccordionSectionContent id="content2">
-              <YpotheseisContent />
+              <CaseContent />
             </AccordionSectionContent>
           </AccordionSection>
           <AccordionSection>
@@ -165,7 +255,7 @@ export function UsingAccordion() {
               </AccordionSectionSummaryHeading>
             </AccordionSectionSummary>
             <AccordionSectionContent id="content3">
-              <MhnumataContent />
+              <MessageContent />
             </AccordionSectionContent>
           </AccordionSection>
           <AccordionSection>
@@ -175,7 +265,7 @@ export function UsingAccordion() {
               </AccordionSectionSummaryHeading>
             </AccordionSectionSummary>
             <AccordionSectionContent id="content4">
-              <IstorikoContent />
+              <HistoryContent />
             </AccordionSectionContent>
           </AccordionSection>
         </Accordion>

package/src/navigation/Tabs/hooks.ts

@@ -17,7 +17,7 @@ export interface UseTabsReturn {
     tabIndex: number;
     onClick: (e: any) => void;
     onKeyDown: (e: React.KeyboardEvent) => void;
-    ref?: React.RefObject<HTMLAnchorElement>;
+    ref?: React.RefObject<HTMLAnchorElement | null>;
   };
   panel: (id: TabId) => {
     tab: TabId;
@@ -34,7 +34,7 @@ export const useTabs = ({
   defaultOpen = null,
 }: UseTabsProps = {}): UseTabsReturn => {
   const [currentOpen, setCurrentOpen] = useState<TabId | null>(defaultOpen);
-  const tabsRef = useRef<Map<TabId, React.RefObject<HTMLAnchorElement>>>(
+  const tabsRef = useRef<Map<TabId, React.RefObject<HTMLAnchorElement | null>>>(
     new Map()
   );
   const { screenSize } = useScreenSize();

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,10 +2,16 @@ 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 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 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();