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

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

@@ -1,39 +1,40 @@
 import React from 'react';
 
-import { Footer } from '@digigov/ui/app/Footer';
 import {
-  FooterMeta,
-  FooterMetaItem,
+  Footer,
+  FooterContainer,
+  FooterInfo,
+  FooterInfoSection,
   FooterContent,
-  FooterInlineList,
-  FooterInlineListItem,
+  FooterList,
+  FooterListItem,
   FooterLink,
 } from '@digigov/ui/app/Footer';
 import { Copyright, getCopyright } from '@digigov/ui/govgr/Footer/Copyright';
-
 import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
 export const YearCopyright = () => {
   return (
     <Footer>
-      <FooterMeta>
-        <FooterMetaItem grow>
-          <FooterContent>
-            <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
-            <FooterInlineList>
-              <FooterInlineListItem>
-                <FooterLink href="#">Όροι και Προϋποθέσεις</FooterLink>
-              </FooterInlineListItem>
-            </FooterInlineList>
-            <Copyright copyright={getCopyright()} />
-          </FooterContent>
-        </FooterMetaItem>
-        <FooterMetaItem>
-          <HellenicRepublicLogo></HellenicRepublicLogo>
-        </FooterMetaItem>
-      </FooterMeta>
+      <FooterContainer>
+        <FooterInfo>
+          <FooterInfoSection grow aria-label='footer info section'>
+            <FooterContent>
+              <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
+              <FooterList layout='horizontal'>
+                <FooterListItem>
+                  <FooterLink href="#">Όροι και Προϋποθέσεις</FooterLink>
+                </FooterListItem>
+              </FooterList>
+              <Copyright copyright={getCopyright()} />
+            </FooterContent>
+          </FooterInfoSection>
+          <FooterInfoSection>
+            <HellenicRepublicLogo></HellenicRepublicLogo>
+          </FooterInfoSection>
+        </FooterInfo>
+      </FooterContainer>
     </Footer>
   );
 };

package/src/app/Footer/index.mdx

@@ -15,35 +15,19 @@ import Footer from '@digigov/ui/app/Footer';
 
 ### Footer with logos
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithLogo.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLogo.tsx" />
 
 ### Footer with secondary navigation
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithSecondaryNavigation.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithSecondaryNavigation.tsx" />
 
 ### Footer with links to meta information
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterWithLink.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterWithLink.tsx" />
 
 ### All inclusive footer
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Footer"
-  story="FooterAllInclusive.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Footer" story="FooterAllInclusive.tsx" />
 
 ## API
 

package/src/app/Footer/index.tsx

@@ -4,15 +4,13 @@ export * from '@digigov/react-core/FooterContent';
 export * from '@digigov/react-core/FooterContentLogos';
 export * from '@digigov/react-core/FooterHeading';
 export * from '@digigov/react-core/FooterImage';
-export * from '@digigov/react-core/FooterInlineList';
-export * from '@digigov/react-core/FooterInlineListItem';
 export * from '@digigov/react-core/FooterLink';
 export * from '@digigov/react-core/FooterList';
 export * from '@digigov/react-core/FooterListItem';
-export * from '@digigov/react-core/FooterMeta';
-export * from '@digigov/react-core/FooterMetaItem';
+export * from '@digigov/react-core/FooterInfo';
+export * from '@digigov/react-core/FooterInfoSection';
 export * from '@digigov/react-core/FooterNavigation';
-export * from '@digigov/react-core/FooterSection';
+export * from '@digigov/react-core/FooterNavigationSection';
 
 import Footer from '@digigov/react-core/Footer';
 export default 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)>details>summary"
+                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>button"
               }
             }
           ],

package/src/app/Header/__snapshots__/index.spec.tsx.snap

@@ -48,8 +48,5 @@ exports[`renders the header with logo, title and subtitle  1`] = `
   >
     A title
   </ForwardRef(HeaderTitle)>
-  <ForwardRef(HeaderSubtitle)>
-    A subtitle
-  </ForwardRef(HeaderSubtitle)>
 </ForwardRef(Header)>
 `;

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

@@ -6,11 +6,11 @@ import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 
 export const Default = () => (
   <Header>
-    <HeaderSection>
-      <HeaderContent>
+    <HeaderContent>
+      <HeaderSection>
         <GovGRLogo href="#" />
-      </HeaderContent>
-    </HeaderSection>
+      </HeaderSection>
+    </HeaderContent>
   </Header>
 );
 

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,50 +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>
-      <HeaderSection>
+export const WithHeaderNavigation = () => {
+  return (
+    <Top>
+      <Header>
         <HeaderContent>
-          <GovGRLogo />
-          <HeaderTitle href="#">Δηλώσεις</HeaderTitle>
+          <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>
+                <NavList layout="vertical">
+                  <NavListItemAction href="#">Ρυθμίσεις</NavListItemAction>
+                  <NavListItemAction href="#">Έξοδος</NavListItemAction>
+                </NavList>
+              </DropdownContent>
+            </Dropdown>
+          </HeaderSection>
         </HeaderContent>
-        <HeaderNavMenuContent>
-          <NavList active={true}>
-            <NavListItem>
-              <NavListItemLink>
-                Μενού <ArrowIcon direction="down" />
-              </NavListItemLink>
-            </NavListItem>
-          </NavList>
-          <Dropdown align="right">
-            <DropdownButton variant="link">
-              ΜΑΡΙΟΣ ΜΕΝΕΞΕΣ
-              <MoreVertIcon size="lg" />
-            </DropdownButton>
-            <DropdownContent>
-              <List margin={0}>
-                <ListItem>
-                  <Link>Ρυθμίσεις</Link>
-                </ListItem>
-                <ListItem>
-                  <Link>Έξοδος</Link>
-                </ListItem>
-              </List>
-            </DropdownContent>
-          </Dropdown>
-        </HeaderNavMenuContent>
-        <HeaderNavMenuContent>
-          <BurgerIcon smUpHidden size="md"></BurgerIcon>
-        </HeaderNavMenuContent>
-      </HeaderSection>
-    </Header>
-  </Top>
-);
+      </Header>
+    </Top>
+  );
+};
 
 export default WithHeaderNavigation;

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

@@ -1,56 +1,41 @@
-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>
       <Header>
-        <HeaderSection>
-          <HeaderContent>
+        <HeaderContent>
+          <HeaderSection>
             <GovGRLogo href="#" />
-          </HeaderContent>
-        </HeaderSection>
+          </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/Header/__stories__/WithServiceName.tsx

@@ -7,12 +7,12 @@ import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 
 export const WithServiceName = () => (
   <Header>
-    <HeaderSection>
-      <HeaderContent>
+    <HeaderContent>
+      <HeaderSection>
         <GovGRLogo href="#" />
         <HeaderTitle>Δηλώσεις</HeaderTitle>
-      </HeaderContent>
-    </HeaderSection>
+      </HeaderSection>
+    </HeaderContent>
   </Header>
 );
 

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

@@ -10,13 +10,13 @@ import logo3 from '@digigov/ui/govgr/images/minedu-logo-base64';
 export const WithServiceNameAndLogo = () => {
   return (
     <Header>
-      <HeaderSection>
-        <HeaderContent>
+      <HeaderContent>
+        <HeaderSection>
           <GovGRLogo href="#" />
           <HeaderSecondaryLogo src={logo3} href="#" />
           <HeaderTitle>Δηλώσεις</HeaderTitle>
-        </HeaderContent>
-      </HeaderSection>
+        </HeaderSection>
+      </HeaderContent>
     </Header>
   );
 };

package/src/app/Header/index.mdx

@@ -11,36 +11,19 @@ import Header from '@digigov/ui/app/Header';
 
 ### Default header
 
-<Story
-  title="### Default"
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="Default.tsx"
-/>
+<Story title="### Default" packageName="@digigov/ui" component="app/Header" story="Default.tsx" />
 
 ### Header with service name
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="WithServiceName.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Header" story="WithServiceName.tsx" />
 
 ### Header with service logo and service name
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="WithServiceNameAndLogo.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Header" story="WithServiceNameAndLogo.tsx" />
 
 ### Default header with navigation
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="WithNavigation.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Header" story="WithNavigation.tsx" />
 
 ## API
 

package/src/app/Header/index.spec.tsx

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 
 import Header, {
   HeaderTitle,
-  HeaderSubtitle,
+  HeaderSection,
   HeaderLogo,
 } from '@digigov/ui/app/Header';
 import logo from '../../govgr/GovGRLogo/govgr-logo.svg';
@@ -13,7 +13,7 @@ it('renders the header with logo, title and subtitle ', () => {
     <Header>
       <HeaderLogo src={logo} href="https://gov.gr" altText="govgr logo" />
       <HeaderTitle href="/some-url">A title</HeaderTitle>
-      <HeaderSubtitle>A subtitle</HeaderSubtitle>
+      <HeaderSection>A subtitle</HeaderSection>
     </Header>
   ).toMatchSnapshot();
 });

package/src/app/Header/index.tsx

@@ -7,5 +7,4 @@ export * from '@digigov/ui/app/Header/HeaderSection';
 export * from '@digigov/ui/app/Header/HeaderContent';
 export * from '@digigov/ui/app/Header/HeaderNavMenuContent';
 export * from '@digigov/ui/app/Header/HeaderSecondaryLogo';
-export * from '@digigov/ui/app/Header/HeaderSubtitle';
 export default Header;

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)>div>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__/Default.tsx

@@ -29,7 +29,7 @@ export const Default = () => {
           <FieldContainer margin={0}>
             <LabelContainer>
               Συμπληρώστε το τηλέφωνο επικοινωνίας
-              <TextInput name="inputext" characterWidth={10}></TextInput>
+              <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
             </LabelContainer>
           </FieldContainer>
         </ModalContent>

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

@@ -15,11 +15,7 @@ import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/app/Mo
 
 ### As an Alert Dialog
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Modal"
-  story="AlertDialog.tsx"
-/>
+<Story packageName="@digigov/ui" component="app/Modal" story="AlertDialog.tsx" />
 
 ## Accessibility
 

package/src/app/NotFound/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import PageTitle from '@digigov/react-core/PageTitle';
+import PageTitleContainer from '@digigov/react-core/PageTitleContainer';
 import PageTitleHeading from '@digigov/react-core/PageTitleHeading';
 import Paragraph from '@digigov/react-core/Paragraph';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -8,9 +8,9 @@ export const NotFound: React.FC = () => {
   const { t } = useTranslation();
   return (
     <>
-      <PageTitle>
+      <PageTitleContainer>
         <PageTitleHeading>{t('notfound.page_not_found')}</PageTitleHeading>
-      </PageTitle>
+      </PageTitleContainer>
       <Paragraph>{t('notfound.wrong_key_address')}</Paragraph>
       <Paragraph>{t('notfound.wrong_cp_address')}</Paragraph>
       <Paragraph>{t('notfound.service_contact')}</Paragraph>