@digigov/ui 1.0.0-079f34f3d → 1.0.0-21c8c3dc

package/src/app/Footer/__stories__/FooterWithSecondaryNavigation.tsx

@@ -22,64 +22,64 @@ export const FooterWithSecondaryNavigation = () => {
   return (
     <Footer>
       <FooterContainer>
-      <FooterNavigation>
-        <FooterNavigationSection aria-label='footer navigation section'>
-          <FooterHeading>Επιλογές</FooterHeading>
-          <FooterList columns={2}>
-            <FooterListItem>
-              <FooterLink href="#">Υπηρεσίες</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Φορείς</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Αρχές</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Όροι χρήσης</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Ιδιωτικό απόρρητο </FooterLink>
-            </FooterListItem>
-          </FooterList>
-        </FooterNavigationSection>
-        <FooterNavigationSection aria-label='footer navigation section'>
-          <FooterHeading>Εξωτερικές Υπηρεσίες</FooterHeading>
-          <FooterList>
-            <FooterListItem>
-              <FooterLink href="#">ΕΜΔΔ - ΜΙΤΟΣ</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">EUGO</FooterLink>
-            </FooterListItem>
-          </FooterList>
-        </FooterNavigationSection>
-      </FooterNavigation>
-      <SectionBreak visible={false} size="md" />
-      <FooterInfo>
-        <FooterInfoSection grow aria-label='footer info section'>
-          <FooterContent>
-            <Copyright>
-              Υλοποίηση από το{' '}
-              <Link href="https://grnet.gr/" target="_blank">
-                ΕΔΥΤΕ
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>{' '}
-              για το{' '}
-              <Link href="https://mindigital.gr/" target="_blank">
-                Υπουργείο Ψηφιακής Διακυβέρνησης
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>
-            </Copyright>
-          </FooterContent>
-        </FooterInfoSection>
-        <FooterInfoSection>
-          <HellenicRepublicLogo></HellenicRepublicLogo>
-        </FooterInfoSection>
-      </FooterInfo>
+        <FooterNavigation>
+          <FooterNavigationSection aria-label='footer navigation section'>
+            <FooterHeading>Επιλογές</FooterHeading>
+            <FooterList columns={2}>
+              <FooterListItem>
+                <FooterLink href="#">Υπηρεσίες</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Φορείς</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Αρχές</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Όροι χρήσης</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Ιδιωτικό απόρρητο</FooterLink>
+              </FooterListItem>
+            </FooterList>
+          </FooterNavigationSection>
+          <FooterNavigationSection aria-label='footer navigation section'>
+            <FooterHeading>Εξωτερικές Υπηρεσίες</FooterHeading>
+            <FooterList>
+              <FooterListItem>
+                <FooterLink href="#">ΕΜΔΔ - ΜΙΤΟΣ</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">EUGO</FooterLink>
+              </FooterListItem>
+            </FooterList>
+          </FooterNavigationSection>
+        </FooterNavigation>
+        <SectionBreak visible={false} size="md" />
+        <FooterInfo>
+          <FooterInfoSection grow aria-label='footer info section'>
+            <FooterContent>
+              <Copyright>
+                {`Υλοποίηση από το `}
+                <Link href="https://grnet.gr/" target="_blank">
+                  ΕΔΥΤΕ
+                  <VisuallyHidden>{` (ανοίγει σε καινούρια καρτέλα)`}</VisuallyHidden>
+                </Link>
+                {` για το `}
+                <Link href="https://mindigital.gr/" target="_blank">
+                  Υπουργείο Ψηφιακής Διακυβέρνησης
+                  <VisuallyHidden>{` (ανοίγει σε καινούρια καρτέλα)`}</VisuallyHidden>
+                </Link>
+              </Copyright>
+            </FooterContent>
+          </FooterInfoSection>
+          <FooterInfoSection>
+            <HellenicRepublicLogo></HellenicRepublicLogo>
+          </FooterInfoSection>
+        </FooterInfo>
       </FooterContainer>
     </Footer>
   );

package/src/app/Masthead/Masthead.stories.js

@@ -9,3 +9,5 @@ export default {
   displayName: 'Masthead',
 };
 export * from '@digigov/ui/app/Masthead/__stories__/Default';
+export * from '@digigov/ui/app/Masthead/__stories__/WithLogo';
+export * from '@digigov/ui/app/Masthead/__stories__/WithElements';

package/src/app/Masthead/Masthead.stories.playwright.json

@@ -8,7 +8,7 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>section>div>div>main>a"
+                "selector": "html>body>div:nth-child(5)>section>div>main>a"
               }
             }
           ],

package/src/app/Masthead/__stories__/WithElements.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Masthead, MastheadBody, MastheadLogo } from '@digigov/ui/layouts/Basic/Masthead';
+import { Heading } from '@digigov/ui/typography/Heading';
+import Hint from '@digigov/ui/typography/Hint';
+import mineduLogo from '@digigov/ui/govgr/images/minedu-logo-base64';
+import Link from '@digigov/ui/navigation/Link';
+
+export const WithElements = () => (
+  <Masthead>
+    <Container>
+      <Main>
+        <MastheadLogo src={mineduLogo} alt="minedu logo" />
+        <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
+        <MastheadBody>
+          Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή
+          στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την
+          εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν
+          ήδη γίνει. <Link>Προτείνετε βελτιώσεις.</Link>
+        </MastheadBody>
+        <Hint>Τελευταία ενημέρωση: 08/12/2021</Hint>
+        <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
+      </Main>
+    </Container>
+  </Masthead>
+);
+
+export default WithElements;

package/src/app/Masthead/__stories__/WithLogo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Masthead, MastheadBody, MastheadLogo } from '@digigov/ui/layouts/Basic/Masthead';
+import { Heading } from '@digigov/ui/typography/Heading';
+import logo3 from '@digigov/ui/govgr/images/minedu-logo-base64';
+
+export const WithLogo = () => (
+  <Masthead>
+    <Container>
+      <Main>
+        <MastheadLogo src={logo3} alt="minedu logo" />
+        <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
+        <MastheadBody>
+          Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή
+          στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την
+          εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν
+          ήδη γίνει.
+        </MastheadBody>
+        <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
+      </Main>
+    </Container>
+  </Masthead>
+);
+
+export default WithLogo;

package/src/content/Blockquote/Blockquote.stories.js

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Blockquote } from '@digigov/ui/content/Blockquote';
+
+export const Dense = () => (
+  <Blockquote dense>
+    Η διαδικασία έκδοσης του διαβατηρίου σας μπορεί να διαρκέσει εώς 10 μέρες,
+    εφόσον η αίτηση σας δεν περιέχει λάθη.
+  </Blockquote>
+);
+
+export default Dense;

package/src/content/Card/Card.stories.js

@@ -17,3 +17,5 @@ export * from '@digigov/ui/content/Card/__stories__/WithDivider';
 export * from '@digigov/ui/content/Card/__stories__/WithClickableContent';
 export * from '@digigov/ui/content/Card/__stories__/WithClickableLink';
 export * from '@digigov/ui/content/Card/__stories__/WithGroupButton';
+export * from '@digigov/ui/content/Card/__stories__/WithLink';
+export * from '@digigov/ui/content/Card/__stories__/Dense';

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

@@ -16,7 +16,7 @@ export const Default = () => (
       αλιευτική σας δραστηριότητα.
     </CardContent>
     <CardAction>
-      <Button>Συνέχεια</Button>
+      <Button>Είσοδος</Button>
     </CardAction>
   </Card>
 );

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

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  Card,
+  CardAction,
+  CardHeading,
+  CardContent,
+} from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Dense = () => (
+  <Card variant="border" borderColor="dark" dense>
+    <CardHeading>Γεωργία και κτηνοτροφία</CardHeading>
+    <CardContent>
+      Διαδικασίες, επιδοτήσεις και αποζημιώσεις για την γεωργική, κτηνοτροφική ή
+      αλιευτική σας δραστηριότητα.
+    </CardContent>
+    <CardAction>
+      <Button>Συνέχεια</Button>
+    </CardAction>
+  </Card>
+);
+
+export default Dense;

package/src/content/Card/__stories__/WithLink.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {
+  Card,
+  CardHeading,
+  CardContent,
+  CardAction,
+} from '@digigov/ui/content/Card';
+
+import { Link } from '@digigov/ui/navigation/Link';
+
+export const WithLink = () => (
+  <Card>
+    <CardHeading>Γεωργία και κτηνοτροφία</CardHeading>
+    <CardContent>
+      Διαδικασίες, επιδοτήσεις και αποζημιώσεις για την γεωργική, κτηνοτροφική ή
+      αλιευτική σας δραστηριότητα.
+    </CardContent>
+    <CardAction>
+      <Link>Είσοδος</Link>
+    </CardAction>
+  </Card>
+);
+
+export default WithLink;

package/src/content/StepNav/StepNav.stories.js

@@ -10,3 +10,4 @@ export default {
 };
 export * from './__stories__/Default';
 export * from './__stories__/WithHints';
+export * from './__stories__/Dense';

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;