@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

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/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/Table.stories.js

@@ -22,6 +22,7 @@ export * from './__stories__/DarkVariantWithVerticalHeaders';
 export * from './__stories__/WithLoader';
 export * from './__stories__/DefinedWidth';
 export * from './__stories__/Densed';
+export * from './__stories__/RowColors';
 export * from './__stories__/MultipleProps';
 export * from './__stories__/WithSortFilters';
 export * from './__stories__/WithFloatingScroll';

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

@@ -44,7 +44,7 @@ const data = {
 export const DarkVariant = () => {
   return (
     <TableContainer>
-      <Table variant="dark">
+      <Table headerVariant="dark">
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

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

@@ -44,7 +44,7 @@ const data = {
 export const DarkVariantWithVerticalHeaders = () => {
   return (
     <TableContainer>
-      <Table variant="dark">
+      <Table headerVariant="dark">
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

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__/Full.tsx

@@ -75,7 +75,7 @@ const data = {
 export const Full = () => {
   return (
     <TableContainer>
-      <Table zebra variant="dark" verticalBorders dense stacked='sm'>
+      <Table variant='zebra' headerVariant="dark" verticalBorders dense stacked='sm'>
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>

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

@@ -60,7 +60,7 @@ const data = {
 export const MultipleProps = () => {
   return (
     <TableContainer>
-      <Table zebra variant="dark" verticalBorders>
+      <Table variant='zebra' headerVariant="dark" verticalBorders>
         {data && (
           <>
             <TableCaption>{data.title}</TableCaption>