@digigov/ui 1.0.0-002c630d → 1.0.0-290a96e2

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

@@ -1,37 +1,39 @@
 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 } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
 export const DefaultCopyright = () => {
   return (
     <Footer>
-      <FooterMeta>
-        <FooterMetaItem grow>
-          <FooterContent>
-            <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
-            <FooterInlineList>
-              <FooterInlineListItem>
-                <FooterLink href="#terms">Όροι και Προϋποθέσεις</FooterLink>
-              </FooterInlineListItem>
-            </FooterInlineList>
-            <Copyright />
-          </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="#terms">Όροι και Προϋποθέσεις</FooterLink>
+                </FooterListItem>
+              </FooterList>
+              <Copyright />
+            </FooterContent>
+          </FooterInfoSection>
+          <FooterInfoSection>
+            <HellenicRepublicLogo></HellenicRepublicLogo>
+          </FooterInfoSection>
+        </FooterInfo>
+      </FooterContainer>
     </Footer>
   );
 };

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

@@ -1,109 +1,118 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
 import {
-  FooterMeta,
-  FooterMetaItem,
+  Footer,
+  FooterContainer,
+  FooterInfo,
+  FooterInfoSection,
   FooterContent,
   FooterNavigation,
-  FooterSection,
+  FooterNavigationSection,
   FooterHeading,
   FooterList,
   FooterListItem,
   FooterLink,
-  FooterInlineList,
-  FooterInlineListItem,
   FooterContentLogos,
   FooterImage,
 } from '@digigov/ui/app/Footer';
-import { Copyright } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
 import logo1 from '@digigov/ui/govgr/images/greek-government-base64';
 import logo2 from '@digigov/ui/govgr/images/grnet-logo-base64';
-import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-import { Link } from '@digigov/ui/navigation/Link';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
 export const FooterAllInclusive = () => {
   return (
     <Footer>
-      <FooterNavigation>
-        <FooterSection>
-        <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>
-        </FooterSection>
-        <FooterSection>
-          <FooterHeading>
-            Εξωτερικές Υπηρεσίες
-          </FooterHeading>
-          <FooterList>
-            <FooterListItem>
-              <FooterLink href="#">ΕΜΔΔ - ΜΙΤΟΣ</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">EUGO</FooterLink>
-            </FooterListItem>
-          </FooterList>
-        </FooterSection>
-      </FooterNavigation>
-      <SectionBreak visible={false} size="md" />
-      <FooterMeta>
-        <FooterMetaItem grow>
-          <FooterContent>
-            <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
-            <FooterInlineList>
-              <FooterInlineListItem>
-                <FooterLink>Όροι και Προϋποθέσεις</FooterLink>
-              </FooterInlineListItem>
-            </FooterInlineList>
-            <FooterContentLogos>
-              <FooterImage src={logo1} />
-              <FooterImage src={logo2} />
-            </FooterContentLogos>
-            <Copyright>
-              Υλοποίηση από το{' '}
-              <Link href="https://grnet.gr/" target="_blank">
-                
-                ΕΔΥΤΕ
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>{' '}
-              για το{' '}
-              <Link href="https://mindigital.gr/" target="_blank">
-                {' '}
-                Υπουργείο Ψηφιακής Διακυβέρνησης
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>{' '}
-              και για το{' '}
-              <Link href="https://www.minedu.gov.gr/" target="_blank">
-                Υπουργείο Παιδείας και Θρησκευμάτων
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>
-            </Copyright>
-          </FooterContent>
-        </FooterMetaItem>
-        <FooterMetaItem>
-          <HellenicRepublicLogo></HellenicRepublicLogo>
-        </FooterMetaItem>
-      </FooterMeta>
+      <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>
+              <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
+              <FooterList layout='horizontal'>
+                <FooterListItem>
+                  <FooterLink>Όροι και Προϋποθέσεις</FooterLink>
+                </FooterListItem>
+                <FooterListItem>
+                  <FooterLink>Σχετικά με το gov.gr</FooterLink>
+                </FooterListItem>
+              </FooterList>
+              <FooterContentLogos>
+                <FooterImage src={logo1} />
+                <FooterImage src={logo2} />
+              </FooterContentLogos>
+              <Copyright>
+                Υλοποίηση από το{' '}
+                <Link href="https://grnet.gr/" target="_blank">
+                  ΕΔΥΤΕ
+                  <VisuallyHidden>
+                    {' '}
+                    (ανοίγει σε καινούρια καρτέλα)
+                  </VisuallyHidden>
+                </Link>{' '}
+                για το{' '}
+                <Link href="https://mindigital.gr/" target="_blank">
+                  {' '}
+                  Υπουργείο Ψηφιακής Διακυβέρνησης
+                  <VisuallyHidden>
+                    {' '}
+                    (ανοίγει σε καινούρια καρτέλα)
+                  </VisuallyHidden>
+                </Link>{' '}
+                και για το{' '}
+                <Link href="https://www.minedu.gov.gr/" target="_blank">
+                  Υπουργείο Παιδείας και Θρησκευμάτων
+                  <VisuallyHidden>
+                    {' '}
+                    (ανοίγει σε καινούρια καρτέλα)
+                  </VisuallyHidden>
+                </Link>
+              </Copyright>
+            </FooterContent>
+          </FooterInfoSection>
+          <FooterInfoSection>
+            <HellenicRepublicLogo></HellenicRepublicLogo>
+          </FooterInfoSection>
+        </FooterInfo>
+      </FooterContainer>
     </Footer>
   );
 };

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

@@ -1,52 +1,60 @@
 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 } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-
-import { Link } from '@digigov/ui/navigation/Link';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
 export const FooterWithLink = () => {
   return (
     <Footer>
-      <FooterMeta>
-        <FooterMetaItem grow>
-          <FooterContent>
-            <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
-            <FooterInlineList>
-              <FooterInlineListItem>
-                <FooterLink href="#">Όροι και Προϋποθέσεις</FooterLink>
-              </FooterInlineListItem>
-              <FooterInlineListItem>
-                <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
-              </FooterInlineListItem>
-            </FooterInlineList>
-            <Copyright>
-              Υλοποίηση από το{' '}
-              <Link href="https://grnet.gr/" target="_blank">
-                ΕΔΥΤΕ
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>{' '}
-              για το{' '}
-              <Link href="https://mindigital.gr/" target="_blank">
-                Υπουργείο Ψηφιακής Διακυβέρνησης
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>
-            </Copyright>
-          </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>
+                <FooterListItem>
+                  <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
+                </FooterListItem>
+              </FooterList>
+              <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/Footer/__stories__/FooterWithLogo.tsx

@@ -1,48 +1,56 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
 import {
-  FooterMeta,
-  FooterMetaItem,
+  Footer,
+  FooterContainer,
+  FooterInfo,
+  FooterInfoSection,
   FooterContent,
   FooterContentLogos,
   FooterImage,
 } from '@digigov/ui/app/Footer';
-import { Copyright } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
 import logo1 from '@digigov/ui/govgr/images/greek-government-base64';
 import logo2 from '@digigov/ui/govgr/images/grnet-logo-base64';
-import { Link } from '@digigov/ui/navigation/Link';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
 export const FooterWithLogo = () => {
   return (
     <Footer>
-      <FooterMeta>
-        <FooterMetaItem>
-          <FooterContent>
-            <FooterContentLogos>
-              <FooterImage src={logo1}></FooterImage>
-              <FooterImage src={logo2}></FooterImage>
-            </FooterContentLogos>
-            <Copyright>
-              Υλοποίηση από το{' '}
-              <Link href="https://grnet.gr/" target="_blank">
-                ΕΔΥΤΕ
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>{' '}
-              για το{' '}
-              <Link href="https://mindigital.gr/" target="_blank">
-                Υπουργείο Ψηφιακής Διακυβέρνησης
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>
-            </Copyright>
-          </FooterContent>
-        </FooterMetaItem>
-        <FooterMetaItem>
-          <HellenicRepublicLogo></HellenicRepublicLogo>
-        </FooterMetaItem>
-      </FooterMeta>
+      <FooterContainer>
+        <FooterInfo>
+          <FooterInfoSection aria-label='footer info section'>
+            <FooterContent>
+              <FooterContentLogos>
+                <FooterImage src={logo1}></FooterImage>
+                <FooterImage src={logo2}></FooterImage>
+              </FooterContentLogos>
+              <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/Footer/__stories__/FooterWithSecondaryNavigation.tsx

@@ -1,28 +1,29 @@
 import React from 'react';
-import { Footer } from '@digigov/ui/app/Footer';
 import {
-  FooterMeta,
-  FooterMetaItem,
+  Footer,
+  FooterContainer,
+  FooterInfo,
+  FooterInfoSection,
   FooterContent,
   FooterNavigation,
-  FooterSection,
+  FooterNavigationSection,
   FooterHeading,
   FooterList,
   FooterListItem,
   FooterLink,
 } from '@digigov/ui/app/Footer';
-import { Copyright } from '@digigov/ui/govgr/Footer/Copyright';
-import { HellenicRepublicLogo } from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-
-import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-import { Link } from '@digigov/ui/navigation/Link';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import Link from '@digigov/ui/navigation/Link';
+import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
 export const FooterWithSecondaryNavigation = () => {
   return (
     <Footer>
+      <FooterContainer>
       <FooterNavigation>
-        <FooterSection>
+        <FooterNavigationSection aria-label='footer navigation section'>
           <FooterHeading>Επιλογές</FooterHeading>
           <FooterList columns={2}>
             <FooterListItem>
@@ -44,8 +45,8 @@ export const FooterWithSecondaryNavigation = () => {
               <FooterLink href="#">Ιδιωτικό απόρρητο </FooterLink>
             </FooterListItem>
           </FooterList>
-        </FooterSection>
-        <FooterSection>
+        </FooterNavigationSection>
+        <FooterNavigationSection aria-label='footer navigation section'>
           <FooterHeading>Εξωτερικές Υπηρεσίες</FooterHeading>
           <FooterList>
             <FooterListItem>
@@ -55,11 +56,11 @@ export const FooterWithSecondaryNavigation = () => {
               <FooterLink href="#">EUGO</FooterLink>
             </FooterListItem>
           </FooterList>
-        </FooterSection>
+        </FooterNavigationSection>
       </FooterNavigation>
       <SectionBreak visible={false} size="md" />
-      <FooterMeta>
-        <FooterMetaItem grow>
+      <FooterInfo>
+        <FooterInfoSection grow aria-label='footer info section'>
           <FooterContent>
             <Copyright>
               Υλοποίηση από το{' '}
@@ -74,11 +75,12 @@ export const FooterWithSecondaryNavigation = () => {
               </Link>
             </Copyright>
           </FooterContent>
-        </FooterMetaItem>
-        <FooterMetaItem>
+        </FooterInfoSection>
+        <FooterInfoSection>
           <HellenicRepublicLogo></HellenicRepublicLogo>
-        </FooterMetaItem>
-      </FooterMeta>
+        </FooterInfoSection>
+      </FooterInfo>
+      </FooterContainer>
     </Footer>
   );
 };

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>
   );
 };