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

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/Header/Header.stories.playwright.json

@@ -36,7 +36,7 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>div:nth-child(1)>details>summary"
+                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>button"
               }
             }
           ],

package/src/app/Header/__stories__/WithHeaderNavigation.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import Header from '@digigov/ui/app/Header';
 import HeaderContent from '@digigov/ui/app/Header/HeaderContent';
-import HeaderNavMenuContent from '@digigov/ui/app/Header/HeaderNavMenuContent';
 import HeaderSection from '@digigov/ui/app/Header/HeaderSection';
 import HeaderTitle from '@digigov/ui/app/Header/HeaderTitle';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import { ArrowIcon } from '@digigov/ui/icons';
-import { BurgerIcon, MoreVertIcon } from '@digigov/ui/icons';
+import { ArrowIcon, MoreVertIcon } from '@digigov/ui/icons';
 import { Top } from '@digigov/ui/layouts/Basic';
 import {
   Dropdown,
@@ -14,52 +12,39 @@ import {
   DropdownContent,
 } from '@digigov/ui/navigation/Dropdown';
 import NavList from '@digigov/ui/navigation/NavList/NavList';
-import NavListItem from '@digigov/ui/navigation/NavList/NavListItem';
-import NavListItemLink from '@digigov/ui/navigation/NavList/NavListItemLink';
-import List, { ListItem } from '@digigov/ui/content/List';
-import Link from '@digigov/ui/navigation/Link';
+import { NavListItemAction } from '@digigov/ui/navigation/NavList';
+import Button from '@digigov/ui/form/Button';
 
-export const WithHeaderNavigation = () => (
-  <Top>
-    <Header>
-      <HeaderContent>
-        <HeaderSection>
-          <GovGRLogo />
-          <HeaderTitle href="#">Δηλώσεις</HeaderTitle>
-        </HeaderSection>
-        <HeaderSection>
-          <HeaderNavMenuContent>
-            <NavList active={true}>
-              <NavListItem>
-                <NavListItemLink>
-                  Μενού <ArrowIcon direction="down" />
-                </NavListItemLink>
-              </NavListItem>
-            </NavList>
+export const WithHeaderNavigation = () => {
+  return (
+    <Top>
+      <Header>
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+            <HeaderTitle href="#">Δηλώσεις</HeaderTitle>
+          </HeaderSection>
+          <HeaderSection>
+            <Button variant="link">
+              Μενού <ArrowIcon direction="down" />
+            </Button>
             <Dropdown align="right">
               <DropdownButton variant="link">
                 ΜΑΡΙΟΣ ΜΕΝΕΞΕΣ
                 <MoreVertIcon size="md" />
               </DropdownButton>
               <DropdownContent>
-                <List margin={0}>
-                  <ListItem>
-                    <Link>Ρυθμίσεις</Link>
-                  </ListItem>
-                  <ListItem>
-                    <Link>Έξοδος</Link>
-                  </ListItem>
-                </List>
+                <NavList layout="vertical">
+                  <NavListItemAction href="#">Ρυθμίσεις</NavListItemAction>
+                  <NavListItemAction href="#">Έξοδος</NavListItemAction>
+                </NavList>
               </DropdownContent>
             </Dropdown>
-          </HeaderNavMenuContent>
-          <HeaderNavMenuContent>
-            <BurgerIcon smUpHidden size="sm"></BurgerIcon>
-          </HeaderNavMenuContent>
-        </HeaderSection>
-      </HeaderContent>
-    </Header>
-  </Top>
-);
+          </HeaderSection>
+        </HeaderContent>
+      </Header>
+    </Top>
+  );
+};
 
 export default WithHeaderNavigation;

package/src/app/Header/__stories__/WithNavigation.tsx

@@ -1,21 +1,15 @@
-import React from 'react';
-import { SectionBreak } from '@digigov/ui';
+import React, { useState } from 'react';
+import { NavListAuto } from '@digigov/ui/navigation/NavList';
+import { BurgerIcon } from '@digigov/ui/icons';
 import { Header } from '@digigov/ui/app/Header';
 import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
 import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Top } from '@digigov/ui/layouts/Basic';
-import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
-import { Nav } from '@digigov/ui/navigation/NavList/Nav';
-import { NavList } from '@digigov/ui/navigation/NavList/NavList';
-import { NavListItem } from '@digigov/ui/navigation/NavList/NavListItem';
+import { Button } from '@digigov/ui/form';
 
 export const WithNavigation = () => {
-  const { registerButton } = useNavList();
-
-  const setRegisterButton = (name: string) => {
-    return { ...registerButton(name) };
-  };
+  const [open, setOpen] = useState(false);
 
   return (
     <Top>
@@ -24,33 +18,24 @@ export const WithNavigation = () => {
           <HeaderSection>
             <GovGRLogo href="#" />
           </HeaderSection>
+          <HeaderSection>
+            <Button variant="link" smUpHidden onClick={() => setOpen(!open)}>
+              <BurgerIcon size='md' />
+            </Button>
+          </HeaderSection>
         </HeaderContent>
       </Header>
-      <Nav open={true}>
-        <NavList>
-          <NavListItem
-            link={{
-              name: 'home',
-              label: 'Αρχική',
-              href: '#home',
-            }}
-            setRegisterButton={setRegisterButton}
-          />
-          <NavListItem
-            link={{ name: 'news', label: 'Νέα', href: '#news' }}
-            setRegisterButton={setRegisterButton}
-          />
-          <NavListItem
-            link={{ name: 'links', label: 'Σύνδεσμοι', href: '#links' }}
-            setRegisterButton={setRegisterButton}
-          />
-          <NavListItem
-            link={{ name: 'contact', label: 'Επικοινωνία', href: '#contact' }}
-            setRegisterButton={setRegisterButton}
-          />
-          <SectionBreak visible={false} />
-        </NavList>
-      </Nav>
+      <NavListAuto
+        links={[
+          { name: 'home', label: 'Αρχική', href: '#home' },
+          { name: 'news', label: 'Νέα', href: '#news' },
+          { name: 'links', label: 'Σύνδεσμοι', href: '#links' },
+          { name: 'contact', label: 'Επικοινωνία', href: '#contact' },
+        ]}
+        open={open}
+        drawer="smDown"
+        onClose={() => setOpen(false)}
+      />
     </Top>
   );
 };

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

@@ -10,3 +10,4 @@ export default {
 };
 export * from '@digigov/ui/app/Modal/__stories__/Default';
 export * from '@digigov/ui/app/Modal/__stories__/AlertDialog';
+export * from '@digigov/ui/app/Modal/__stories__/Dense';

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

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-app-modal--dense": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>button"
+              }
+            }
+          ],
+          "id": "kiFgErhdQ2jf",
+          "title": "Open modal"
+        }
+      ]
+    }
+  }
+}

package/src/app/Modal/__stories__/Dense.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+import {
+  Modal,
+  ModalHeading,
+  ModalContent,
+  ModalAction,
+} from '@digigov/ui/app/Modal';
+
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+export const Dense = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Προσθήκη τηλεφώνου
+      </Button>
+      <Modal open={open} aria-labelledby="modal-label" dense>
+        <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
+        <ModalContent>
+          <FieldContainer margin={0}>
+            <LabelContainer>
+              Συμπληρώστε το τηλέφωνο επικοινωνίας
+              <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
+            </LabelContainer>
+          </FieldContainer>
+        </ModalContent>
+        <ModalAction>
+          <Button>Υποβολή</Button>
+          <Button
+            variant="link"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            Ακύρωση
+          </Button>
+        </ModalAction>
+      </Modal>
+    </div>
+  );
+};
+
+export default Dense;

package/src/app/ThemeOptions/index.tsx

@@ -271,12 +271,12 @@ export const ThemeOptions = React.forwardRef<
                 Ναι
               </RadioItem>
             </RadioContainer>
-            <Button onClick={resetOptions} variant="link">
-              Επαναφορά όλων των επιλογών
-            </Button>
           </Fieldset>
         </FieldContainer>
       )}
+      <Button onClick={resetOptions} variant="link">
+        Επαναφορά όλων των επιλογών
+      </Button>
       <SectionBreak visible={false} />
       <Button onClick={handleOptions} disabled={!optionsHasChanged()}>
         Εφαρμογή

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

@@ -15,6 +15,11 @@ import Details from '@digigov/ui/content/Details';
 
 <Story packageName="@digigov/ui" component="content/Details" story="Default.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Details
+implementation in the ARIA Authoring Practices Guide (APG) at [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) section.
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Details" />

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