@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-871b6be5

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

@@ -22,7 +22,6 @@ import {
   SummaryListItemValue,
 } from '@digigov/ui/content/SummaryList';
 
-
 const data = [
   {
     title: 'Απάντηση',
@@ -135,7 +134,7 @@ const data = [
 ];
 
 export const Default = () => {
-  const [open, SetOpen] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
   const [openItem, setOpenItem] = useState(
     Array<boolean>(data.length).fill(false)
   );
@@ -160,7 +159,7 @@ export const Default = () => {
     setOpenItem(statusOpenItem);
   }
   function openCloseAll(): void {
-    SetOpen(!open);
+    setOpen(!open);
   }
   return (
     <StepNav>
@@ -199,7 +198,7 @@ export const Default = () => {
                         </StepNavCircleNumber>
                       )}
                       <StepNavAccordionHeadingTitle>
-                        <StepNavAccordionHeadingText open={openItem[index]}>
+                        <StepNavAccordionHeadingText>
                           {field.title}
                           {field.codename && (
                             <>

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

@@ -199,16 +199,16 @@ export const WithHints = () => {
                           {index > 1 ? index : index + 1}
                         </StepNavCircleNumber>
                       )}
-                       <StepNavAccordionHeadingTitle>
-                        <StepNavAccordionHeadingText open={openItem[index]}>
+                      <StepNavAccordionHeadingTitle>
+                        <StepNavAccordionHeadingText>
                           {field.title}
                           {field.codename && (
                             <>
                               {' - '} {field.codename}
                             </>
                           )}
-                       </StepNavAccordionHeadingText>
-                       <Hint fontSize='14'>
+                        </StepNavAccordionHeadingText>
+                        <Hint fontSize={14}>
                           {field.date}
                         </Hint>
                       </StepNavAccordionHeadingTitle>

package/src/content/StepNav/index.mdx

@@ -0,0 +1,21 @@
+---
+id: step-nav
+title: StepNav
+---
+
+# StepNav
+ StepNav is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import StepNav from '@digigov/ui/content/StepNav';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/StepNav" story="Default.tsx" />
+
+### With hints
+
+<Story packageName="@digigov/ui" component="content/StepNav" story="WithHints.tsx" />

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/SummaryList/index.mdx

@@ -13,11 +13,7 @@ import SummaryList from '@digigov/ui/content/SummaryList';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="Default.tsx" />
 
 ### Summary list with actions
 
@@ -25,21 +21,13 @@ Assistive technology users, like those who use a screen reader, may hear the lin
 To give more context, add visually hidden text to the links.
 This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithActions.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="WithActions.tsx" />
 
 ### Summary list without borders
 
 If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithoutBorders.tsx"
-/>
+<Story packageName="@digigov/ui" component="content/SummaryList" story="WithoutBorders.tsx" />
 
 ## API
 

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

@@ -47,13 +47,13 @@ export const DefinedWidth = () => {
               <TableRow>
                 {data.labels && (
                   <>
-                    <TableHeadCell cellWidth="one-half">
+                    <TableHeadCell width='50%'>
                       {data.labels.name}
                     </TableHeadCell>
-                    <TableHeadCell cellWidth="one-quarter">
+                    <TableHeadCell width='25%'>
                       {data.labels.role}
                     </TableHeadCell>
-                    <TableHeadCell cellWidth="one-quarter">
+                    <TableHeadCell width='25%'>
                       {data.labels.email}
                     </TableHeadCell>
                   </>

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;
 
@@ -48,21 +47,22 @@ export const TableSortLabel = React.forwardRef<
         <TableSortIconContainer marginLeft={1}>
           <CaretIcon
             direction={'up'}
-            size="md"
+            size="sm"
             variant={direction === 1 ? 'dark' : 'gray'}
           />
           <CaretIcon
             direction={'down'}
-            size="md"
+            size="sm"
             variant={direction === -1 ? 'dark' : 'gray'}
           />
         </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);
@@ -78,13 +78,14 @@ export const TableSortLabel = React.forwardRef<
               direction={'up'}
               marginRight={1}
               marginTop={1}
-              size="md"
+              size="sm"
             />
             {labels.asc}
-          </NavVerticalItem>
-          <NavVerticalItem
+          </NavListItemAction>
+          <NavListItemAction
             active={direction === -1}
             tabIndex={0}
+            arrow={false}
             onClick={() => {
               onSort(-1);
               dropdownRef.current && (dropdownRef.current.open = false);
@@ -100,11 +101,11 @@ export const TableSortLabel = React.forwardRef<
               direction={'down'}
               marginRight={1}
               marginTop={1}
-              size="md"
+              size="sm"
             />
             {labels.desc}
-          </NavVerticalItem>
-        </NavVertical>
+          </NavListItemAction>
+        </NavList>
       </DropdownContent>
     </Dropdown>
   );

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

@@ -82,16 +82,16 @@ export const Default = () => (
                     let tagColor;
                     switch (task.status) {
                       case 'Ολοκληρωθηκε':
-                        tagColor = 'completed';
+                        tagColor = 'info';
                         break;
                       case 'Σε εξελιξη':
-                        tagColor = 'in-progress';
+                        tagColor = 'primary';
                         break;
                       case 'Δεν εχει ξεκινησει':
-                        tagColor = 'not-started';
+                        tagColor = 'secondary';
                         break;
                       case 'Σε αναμονη':
-                        tagColor = 'not-started';
+                        tagColor = 'secondary';
                         break;
                     }
                     return (
@@ -100,7 +100,7 @@ export const Default = () => (
                           <LinkBase>{task.text}</LinkBase>
                         </SummaryListItemKey>
                         <SummaryListItemAction>
-                          <TaskListItemTag status={tagColor}>
+                          <TaskListItemTag color={tagColor}>
                             {task.status}
                           </TaskListItemTag>
                         </SummaryListItemAction>

package/src/content/TaskList/index.mdx

@@ -0,0 +1,21 @@
+---
+id: task-list
+title: TaskList
+---
+
+# TaskList
+ TaskList is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import TaskList from '@digigov/ui/content/TaskList';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/TaskList" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="TaskList" />