@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-871b6be5

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

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)>ul>li>button"
               }
             }
           ],

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

@@ -5,7 +5,6 @@ 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 { Top } from '@digigov/ui/layouts/Basic';
 import {
@@ -14,48 +13,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';
 
 export const WithHeaderNavigation = () => (
   <Top>
     <Header>
-      <HeaderSection>
-        <HeaderContent>
+      <HeaderContent>
+        <HeaderSection>
           <GovGRLogo />
           <HeaderTitle href="#">Δηλώσεις</HeaderTitle>
-        </HeaderContent>
+        </HeaderSection>
         <HeaderNavMenuContent>
           <NavList active={true}>
-            <NavListItem>
-              <NavListItemLink>
-                Μενού <ArrowIcon direction="down" />
-              </NavListItemLink>
-            </NavListItem>
+            <NavListItemAction arrow>Μενού</NavListItemAction>
           </NavList>
           <Dropdown align="right">
             <DropdownButton variant="link">
               ΜΑΡΙΟΣ ΜΕΝΕΞΕΣ
-              <MoreVertIcon size="lg" />
+              <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="md"></BurgerIcon>
-        </HeaderNavMenuContent>
-      </HeaderSection>
+        <BurgerIcon smUpHidden size="sm"></BurgerIcon>
+      </HeaderContent>
     </Header>
   </Top>
 );

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

@@ -1,56 +1,35 @@
 import React from 'react';
-import { SectionBreak } from '@digigov/ui';
+import { NavListAuto } from '@digigov/ui';
 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';
 
 export const WithNavigation = () => {
-  const { registerButton } = useNavList();
-
-  const setRegisterButton = (name: string) => {
-    return { ...registerButton(name) };
-  };
+  
 
   return (
     <Top>
       <Header>
-        <HeaderSection>
-          <HeaderContent>
+        <HeaderContent>
+          <HeaderSection>
             <GovGRLogo href="#" />
-          </HeaderContent>
-        </HeaderSection>
+          </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}
+        <NavListAuto 
+          links={[{
+            name: 'home',
+            label: 'Αρχική',
+            href: '#home',
+            }, 
+            { name: 'news', label: 'Νέα', href: '#news' },
+            { name: 'links', label: 'Σύνδεσμοι', href: '#links' },
+            { name: 'contact', label: 'Επικοινωνία', href: '#contact' }
+          ]}
+          border
           />
-          <SectionBreak visible={false} />
-        </NavList>
-      </Nav>
     </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>
   );
 };