@digigov/ui 1.0.0-290a96e2 → 1.0.0-3bfc7d37

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/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';

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

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+} from '@digigov/ui/content/SummaryList';
+
+import {
+  TaskList,
+  TaskListItem,
+  TaskListItemHeading,
+  TaskListItemContent,
+  TaskListItemTag,
+} from '@digigov/ui/content/TaskList';
+import { LinkBase } from '@digigov/ui/navigation/Link';
+
+const fields = [
+  {
+    title: 'Έλεγχοι πριν ξεκινήσετε',
+    tasks: [
+      {
+        text: 'Ελέγξτε την καταλληλότητα',
+        status: 'Ολοκληρωθηκε',
+      },
+      {
+        text: 'Εμφάνιση δήλωσης',
+        status: 'Ολοκληρωθηκε',
+      },
+    ],
+  },
+  {
+    title: 'Προετοιμασία αίτησης',
+    tasks: [
+      {
+        text: 'Στοιχεία εταιρείας',
+        status: 'Ολοκληρωθηκε',
+      },
+      {
+        text: 'Στοιχεία επικοινωνίας',
+        status: 'Σε εξελιξη',
+      },
+      {
+        text: 'Λίστα αποδείξεων',
+        status: 'Δεν εχει ξεκινησει',
+      },
+      {
+        text: 'Παροχή οικονομικών στοιχείων',
+        status: 'Σε αναμονη',
+      },
+      {
+        text: 'Παροχή ιατρικών πληροφοριών',
+        status: 'Σε αναμονη',
+      },
+    ],
+  },
+  {
+    title: 'Αίτηση',
+    tasks: [
+      {
+        text: 'Υποβολή και πληρωμή',
+        status: 'Σε αναμονη',
+      },
+    ],
+  },
+];
+
+export const Dense = () => (
+  <div>
+    <TaskList dense>
+      {fields &&
+        fields.map((field, index) => {
+          return (
+            <TaskListItem key={index}>
+              <TaskListItemHeading size="md">{`${index + 1}. ${field.title
+                }`}</TaskListItemHeading>
+              <TaskListItemContent>
+                <SummaryList>
+                  {field.tasks.map((task, key) => {
+                    let tagColor;
+                    switch (task.status) {
+                      case 'Ολοκληρωθηκε':
+                        tagColor = 'info';
+                        break;
+                      case 'Σε εξελιξη':
+                        tagColor = 'primary';
+                        break;
+                      case 'Δεν εχει ξεκινησει':
+                        tagColor = 'secondary';
+                        break;
+                      case 'Σε αναμονη':
+                        tagColor = 'secondary';
+                        break;
+                    }
+                    return (
+                      <SummaryListItem key={key}>
+                        <SummaryListItemKey>
+                          <LinkBase>{task.text}</LinkBase>
+                        </SummaryListItemKey>
+                        <SummaryListItemAction>
+                          <TaskListItemTag color={tagColor}>
+                            {task.status}
+                          </TaskListItemTag>
+                        </SummaryListItemAction>
+                      </SummaryListItem>
+                    );
+                  })}
+                </SummaryList>
+              </TaskListItemContent>
+            </TaskListItem>
+          );
+        })}
+    </TaskList>
+  </div>
+);
+
+export default Dense;

package/src/content/Timeline/Timeline.stories.js

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