@digigov/ui 1.0.0-88820b1e → 1.0.0-8bbf3ef2

package/src/content/StepNav/__stories__/Dense.tsx

@@ -0,0 +1,261 @@
+import React, { useState, useEffect } from 'react';
+import {
+  StepNav,
+  StepNavCircleNumber,
+  StepNavControls,
+  StepNavList,
+  StepNavListItem,
+  StepNavAccordion,
+  StepNavAccordionContent,
+  StepNavAccordionSummary,
+  StepNavAccordionSummaryHeading,
+  StepNavAccordionHeadingTitle,
+  StepNavAccordionHeadingText,
+} from '@digigov/ui/content/StepNav';
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+  SummaryListItemValue,
+} from '@digigov/ui/content/SummaryList';
+
+const data = [
+  {
+    title: 'Απάντηση',
+    codename: '(KEP-APA)',
+    date: '7 Απριλίου 2023, 12:32μ.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '7 Απριλίου 2023, 12:32μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Καλλιόπη Παπαδοπούλου',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '637283494',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Συμπληρωματικά έγγραφα ',
+    codename: '(MORE-DOCS)',
+    date: '5 Απριλίου 2023, 8:32π.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '7 Απριλίου 2023, 12:32μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '637283494',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Αίτηση για συμπληρωματικά έγγραφα',
+    codename: '(MORE-DOCS-REQUEST)',
+    date: '5 Απριλίου 2023, 8:32π.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '5 Απριλίου 2023, 8:32π.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '974256',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Αίτηση Βεβαίωσης Μόνιμης Κατοικίας',
+    codename: '(PERMRES-FOREIS)',
+    date: '3 Απριλίου 2023, 5:42μ.μ.',
+    actions: [
+      {
+        label: 'Απάντηση',
+      },
+      {
+        label: 'Αίτημα για συμπληρωματικά έγγραφα',
+      },
+    ],
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '3 Απριλίου 2023, 5:42μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '475747',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+];
+
+export const Dense = () => {
+  const [open, setOpen] = useState<boolean>(false);
+  const [openItem, setOpenItem] = useState(
+    Array<boolean>(data.length).fill(false)
+  );
+  useEffect(() => {
+    const stateArray: boolean[] = [];
+    if (open === false) {
+      openItem.map(() => {
+        stateArray.push(false);
+      });
+      setOpenItem(stateArray);
+    } else {
+      openItem.map(() => {
+        stateArray.push(true);
+      });
+      setOpenItem(stateArray);
+    }
+  }, [open]);
+
+  function openCloseItem(index): void {
+    const statusOpenItem = [...openItem];
+    statusOpenItem[index] = !statusOpenItem[index];
+    setOpenItem(statusOpenItem);
+  }
+  function openCloseAll(): void {
+    setOpen(!open);
+  }
+  return (
+    <StepNav dense>
+      <StepNavControls>
+        <Button
+          variant="link"
+          onClick={() => {
+            openCloseAll();
+          }}
+        >
+          {open === false ? 'Εμφάνιση όλων' : 'Απόκρυψη όλων'}
+        </Button>
+      </StepNavControls>
+      <StepNavList>
+        {data &&
+          data.map((field, index) => {
+            return (
+              <StepNavListItem key={index}>
+                <StepNavAccordion open={open}>
+                  <StepNavAccordionSummary
+                    onClick={() => {
+                      openCloseItem(index);
+                    }}
+                  >
+                    <StepNavAccordionSummaryHeading aria-controls="content1">
+                      <StepNavCircleNumber border={false}></StepNavCircleNumber>
+                      {index === 1 ? (
+                        <StepNavCircleNumber border={false}>
+                          <VisuallyHidden>Βήμα</VisuallyHidden>
+                          και
+                        </StepNavCircleNumber>
+                      ) : (
+                        <StepNavCircleNumber>
+                          <VisuallyHidden>Βήμα</VisuallyHidden>
+                          {index > 1 ? index : index + 1}
+                        </StepNavCircleNumber>
+                      )}
+                      <StepNavAccordionHeadingTitle>
+                        <StepNavAccordionHeadingText>
+                          {field.title}
+                          {field.codename && (
+                            <>
+                              {' - '} {field.codename}
+                            </>
+                          )}
+                        </StepNavAccordionHeadingText>
+                      </StepNavAccordionHeadingTitle>
+                    </StepNavAccordionSummaryHeading>
+                  </StepNavAccordionSummary>
+                  <StepNavAccordionContent id="content1">
+                    <ButtonGroup>
+                      {(field.actions || []).map((action, subIndex) => (
+                        <Button color="primary" key={subIndex}>
+                          {action.label}
+                        </Button>
+                      ))}
+                      <Button color="secondary">Προβολή εγγράφου</Button>
+                    </ButtonGroup>
+                    {field.details && (
+                      <SummaryList>
+                        {field.details.map((field, index) => {
+                          return (
+                            <SummaryListItem key={index}>
+                              <SummaryListItemKey>
+                                {field.name}
+                              </SummaryListItemKey>
+                              <SummaryListItemValue>
+                                {field.value}
+                              </SummaryListItemValue>
+                              {field.actions && (
+                                <SummaryListItemAction>
+                                  <ButtonGroup>
+                                    {field.actions &&
+                                      field.actions.map((action, subIndex) => {
+                                        return (
+                                          <Button key={subIndex} variant="link">
+                                            {action}
+                                          </Button>
+                                        );
+                                      })}
+                                  </ButtonGroup>
+                                </SummaryListItemAction>
+                              )}
+                            </SummaryListItem>
+                          );
+                        })}
+                      </SummaryList>
+                    )}
+                  </StepNavAccordionContent>
+                </StepNavAccordion>
+              </StepNavListItem>
+            );
+          })}
+      </StepNavList>
+    </StepNav>
+  );
+};
+
+export default Dense;

package/src/content/SummaryList/SummaryList.stories.js

@@ -10,6 +10,7 @@ export default {
 };
 export * from './__stories__/Default';
 export * from './__stories__/WithActions';
+export * from './__stories__/WithoutActions';
 export * from './__stories__/WithoutBorders';
 export * from './__stories__/WithKeyAndAction';
 export * from './__stories__/RowVariations';

package/src/content/SummaryList/__stories__/Default.tsx

@@ -10,28 +10,37 @@ import {
 
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
 export const Default = () => (
-  <>
-    <SummaryList>
-      <SummaryListItem>
-        <SummaryListItemKey>Όνομα</SummaryListItemKey>
-        <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
-      </SummaryListItem>
-      <SummaryListItem>
-        <SummaryListItemKey>Διεύθυνση</SummaryListItemKey>
-        <SummaryListItemValue>Συντάγματος 15, Αθήνα</SummaryListItemValue>
-        <SummaryListItemAction>
-          <Link href="#">
-            Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
-          </Link>
-        </SummaryListItemAction>
-      </SummaryListItem>
-      <SummaryListItem>
-        <SummaryListItemKey>Τηλέφωνο</SummaryListItemKey>
-        <SummaryListItemValue>6941234567</SummaryListItemValue>
-      </SummaryListItem>
-    </SummaryList>
-  </>
+  <SummaryList>
+    <SummaryListItem>
+      <SummaryListItemKey>Όνομα</SummaryListItemKey>
+      <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Ημερομηνία Γέννησης</SummaryListItemKey>
+      <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
+      <SummaryListItemValue>6941234567</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+  </SummaryList>
 );
 
 export default Default;

package/src/content/SummaryList/__stories__/WithActions.tsx

@@ -8,49 +8,45 @@ import {
   SummaryListItemValue,
 } from '@digigov/ui/content/SummaryList';
 
-import { ButtonGroup, Button } from '@digigov/ui/form/Button';
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import Button, { ButtonGroup } from '@digigov/ui/form/Button';
 
-export const WithActions = () => {
-  return (
-    <>
-      <SummaryList>
-        <SummaryListItem>
-          <SummaryListItemKey>Όνομα</SummaryListItemKey>
-          <SummaryListItemValue> Γιώργος Παπαδόπουλος</SummaryListItemValue>
-          <SummaryListItemAction>
-            <Link href="#">
-              Αλλαγή<VisuallyHidden>Ονόματος</VisuallyHidden>
-            </Link>
-          </SummaryListItemAction>
-        </SummaryListItem>
-        <SummaryListItem>
-          <SummaryListItemKey>Διεύθυνση</SummaryListItemKey>
-          <SummaryListItemValue>Συντάγματος 15, Αθήνα</SummaryListItemValue>
-          <SummaryListItemAction>
-            <Link href="#">
-              Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
-            </Link>
-          </SummaryListItemAction>
-        </SummaryListItem>
-        <SummaryListItem>
-          <SummaryListItemKey>Τηλέφωνο</SummaryListItemKey>
-          <SummaryListItemValue>6941234567</SummaryListItemValue>
-          <SummaryListItemAction>
-            <ButtonGroup>
-              <Button variant="link">
-                Αλλαγή <VisuallyHidden>τηλεφώνου</VisuallyHidden>
-              </Button>
-              <Button variant="link">
-                Διαγραφή <VisuallyHidden>τηλεφώνου</VisuallyHidden>
-              </Button>
-            </ButtonGroup>
-          </SummaryListItemAction>
-        </SummaryListItem>
-      </SummaryList>
-    </>
-  );
-};
+export const WithActions = () => (
+  <SummaryList>
+    <SummaryListItem>
+      <SummaryListItemKey>Όνομα</SummaryListItemKey>
+      <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Ημερομηνία Γέννησης</SummaryListItemKey>
+      <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>ημερομηνίας</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
+      <SummaryListItemValue>6941234567</SummaryListItemValue>
+      <SummaryListItemAction>
+        <ButtonGroup>
+          <Button variant="link">
+            Αλλαγή <VisuallyHidden>τηλεφώνου</VisuallyHidden>
+          </Button>
+          <Button variant="link">
+            Διαγραφή <VisuallyHidden>τηλεφώνου</VisuallyHidden>
+          </Button>
+        </ButtonGroup>
+      </SummaryListItemAction>
+    </SummaryListItem>
+  </SummaryList>
+);
 
 export default WithActions;

package/src/content/SummaryList/__stories__/WithoutActions.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+} from '@digigov/ui/content/SummaryList';
+
+export const WithoutActions = () => (
+  <SummaryList>
+    <SummaryListItem>
+      <SummaryListItemKey>Όνομα</SummaryListItemKey>
+      <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Ημερομηνία Γέννησης</SummaryListItemKey>
+      <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
+      <SummaryListItemValue>6941234567</SummaryListItemValue>
+    </SummaryListItem>
+  </SummaryList>
+);
+
+export default WithoutActions;

package/src/content/SummaryList/__stories__/WithoutBorders.tsx

@@ -7,25 +7,39 @@ import {
   SummaryListItemKey,
   SummaryListItemValue,
 } from '@digigov/ui/content/SummaryList';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
+import Link from '@digigov/ui/navigation/Link';
 
 export const WithoutBorders = () => (
-  <>
-    <SummaryList border={false}>
-      <SummaryListItem>
-        <SummaryListItemKey>Όνομα</SummaryListItemKey>
-        <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
-      </SummaryListItem>
-      <SummaryListItem>
-        <SummaryListItemKey>Διεύθυνση</SummaryListItemKey>
-        <SummaryListItemValue>Συντάγματος 15, Αθήνα</SummaryListItemValue>
-        <SummaryListItemAction></SummaryListItemAction>
-      </SummaryListItem>
-      <SummaryListItem>
-        <SummaryListItemKey>Τηλέφωνο</SummaryListItemKey>
-        <SummaryListItemValue>6941234567</SummaryListItemValue>
-      </SummaryListItem>
-    </SummaryList>
-  </>
+  <SummaryList border={false}>
+    <SummaryListItem>
+      <SummaryListItemKey>Όνομα</SummaryListItemKey>
+      <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Ημερομηνία Γέννησης</SummaryListItemKey>
+      <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>ημερομηνίας</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
+      <SummaryListItemValue>6941234567</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>τηλεφώνου</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+  </SummaryList>
 );
 
 export default WithoutBorders;

package/src/content/Table/__stories__/RowColors.tsx

@@ -23,31 +23,31 @@ const data = {
     {
       date: '24-07-23 16:34',
       title: 'Ειδοποίηση',
-      actions: 'λεπτομέρειες',
+      actions: 'Λεπτομέρειες',
       new: true,
     },
     {
       date: '24-07-23 12:41',
       title: 'Μήνυμα υπηρεσίας',
-      actions: 'λεπτομέρειες',
+      actions: 'Λεπτομέρειες',
       new: true,
     },
     {
       date: '24-07-23 12:40',
       title: 'Μήνυμα από τον διαχειριστή',
-      actions: 'λεπτομέρειες',
+      actions: 'Λεπτομέρειες',
       new: false,
     },
     {
       date: '23-07-23 15:14',
       title: 'Έχετε συνδεθεί',
-      actions: 'λεπτομέρειες',
+      actions: 'Λεπτομέρειες',
       new: false,
     },
     {
       date: '23-07-23 13:25',
       title: 'Ο κωδικός άλλαξε',
-      actions: 'λεπτομέρειες',
+      actions: 'Λεπτομέρειες',
       new: false,
     },
   ],

package/src/content/Table/__stories__/WithFloatingScroll.tsx

@@ -15,8 +15,7 @@ import {
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 const labels = {
   name: 'Ονοματεπώνυμο',
@@ -75,17 +74,16 @@ export const WithFloatingScroll = () => {
                     {Object.keys(dt).map((key) => (
                       <TableDataCell key={key}>{dt[key]}</TableDataCell>
                     ))}
-
                     <TableDataCell>
                       <Dropdown float align="right" placement="bottom">
                         <DropdownButton variant="link">
                           Ενέργειες
                         </DropdownButton>
                         <DropdownContent>
-                          <NavVertical>
-                            <NavVerticalItem href="#">Επεξεργασία</NavVerticalItem>
-                            <NavVerticalItem href="#">Διαγραφή</NavVerticalItem>
-                          </NavVertical>
+                          <NavList layout='vertical'>
+                            <NavListItemAction href="#">Επεξεργασία</NavListItemAction>
+                            <NavListItemAction href="#">Διαγραφή</NavListItemAction>
+                          </NavList>
                         </DropdownContent>
                       </Dropdown>
                     </TableDataCell>

package/src/content/Table/index.mdx

@@ -69,7 +69,7 @@ The prop `color='primary'` or `color='secondary'` is only functional when Table
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Table
-implementation in the ARIA Authoring Practices Guide (APG) at
+implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
 
 ## API
 

package/src/content/Table/index.tsx

@@ -8,8 +8,7 @@ import {
   DropdownContent,
   DropdownProps,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 export type SortDirection = 1 | -1 | 0;
 
@@ -59,10 +58,11 @@ export const TableSortLabel = React.forwardRef<
         </TableSortIconContainer>
       </DropdownButton>
       <DropdownContent>
-        <NavVertical>
-          <NavVerticalItem
+        <NavList layout='vertical'>
+          <NavListItemAction
             active={direction === 1}
             tabIndex={0}
+            arrow={false}
             onClick={() => {
               onSort(1);
               dropdownRef.current && (dropdownRef.current.open = false);
@@ -81,10 +81,11 @@ export const TableSortLabel = React.forwardRef<
               size="sm"
             />
             {labels.asc}
-          </NavVerticalItem>
-          <NavVerticalItem
+          </NavListItemAction>
+          <NavListItemAction
             active={direction === -1}
             tabIndex={0}
+            arrow={false}
             onClick={() => {
               onSort(-1);
               dropdownRef.current && (dropdownRef.current.open = false);
@@ -103,8 +104,8 @@ export const TableSortLabel = React.forwardRef<
               size="sm"
             />
             {labels.desc}
-          </NavVerticalItem>
-        </NavVertical>
+          </NavListItemAction>
+        </NavList>
       </DropdownContent>
     </Dropdown>
   );

package/src/content/TaskList/TaskList.stories.js

@@ -7,3 +7,4 @@ export default {
   displayName: 'TaskList',
 };
 export * from '@digigov/ui/content/TaskList/__stories__/Default';
+export * from '@digigov/ui/content/TaskList/__stories__/Dense';