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

package/src/form/TextInput/TextInput.stories.js

@@ -15,3 +15,4 @@ export * from '@digigov/ui/form/TextInput/__stories__/WithHint';
 export * from '@digigov/ui/form/TextInput/__stories__/AskingForNumbers';
 export * from '@digigov/ui/form/TextInput/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/TextInput/__stories__/DisabledInput';
+export * from '@digigov/ui/form/TextInput/__stories__/Dense';

package/src/form/TextInput/__stories__/Dense.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+export const Dense = () => (
+  <FieldContainer>
+    <LabelContainer>
+      Όνομα επιχείρησης
+       <TextInput dense name="inputext"></TextInput>
+    </LabelContainer>
+  </FieldContainer>
+);
+
+export default Dense;

package/src/form/TextInput/__stories__/FixedWidths.tsx

@@ -5,44 +5,44 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FixedWidths = () => (
-  <>
+  <div>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 20 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 10 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 5 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 4 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 3 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 2 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
+        <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
-  </>
+  </div>
 );
 
 export default FixedWidths;

package/src/form/TextInput/__stories__/FluidWidths.tsx

@@ -5,7 +5,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FluidWidths = () => (
-  <>
+  <div>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Μέγιστο πλάτος</LabelTitle>
@@ -42,7 +42,7 @@ export const FluidWidths = () => (
         <TextInput name="inputext" width='25%'></TextInput>
       </LabelContainer>
     </FieldContainer>
-  </>
+  </div>
 );
 
 export default FluidWidths;

package/src/govgr/Footer/Copyright.tsx

@@ -23,13 +23,13 @@ export const Copyright: React.FC<CopyrightProps> = ({
   const { t } = useTranslation();
   const copyrightInfo = minDigitalCopyright
     ? {
-        url: 'https://mindigital.gr',
-        label: t('footer.mindigital'),
-      }
+      url: 'https://mindigital.gr',
+      label: t('footer.mindigital'),
+    }
     : {
-        url: 'https://grnet.gr',
-        label: t('footer.grnet'),
-      };
+      url: 'https://grnet.gr',
+      label: t('footer.grnet'),
+    };
 
   return (
     <CopyrightContainer {...props}>
@@ -40,23 +40,23 @@ export const Copyright: React.FC<CopyrightProps> = ({
           {copyright}
           {createdBy || (
             <>
-              {t('footer.created_by')}{' '}
+              {`${t('footer.created_by')} `}
               <Link
                 href={copyrightInfo.url}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {copyrightInfo.label}
-              </Link>{' '}
+                {`${copyrightInfo.label}`}
+              </Link>
               {!minDigitalCopyright && (
                 <>
-                  {t('footer.created_for')}{' '}
+                  {` ${t('footer.created_for')} `}
                   <Link
                     href="https://mindigital.gr"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    {t('footer.mindigital')}
+                    {`${t('footer.mindigital')}`}
                   </Link>
                 </>
               )}

package/src/icons/Icon/index.tsx

@@ -1,6 +1,6 @@
-export * from '@digigov/react-core/Icon';
+export * from '@digigov/react-icons/Icon';
 export * from '@digigov/react-icons';
 export * from '@digigov/react-icons/icons';
 
-import Icon from '@digigov/react-core/Icon';
+import Icon from '@digigov/react-icons/Icon';
 export default Icon;

package/src/icons/ImageLogo/index.tsx

@@ -0,0 +1,5 @@
+
+import ImageLogo from '@digigov/react-core/ImageLogo';
+export * from '@digigov/react-core/ImageLogo';
+
+export default ImageLogo;

package/src/icons/ImageLogoSet/index.tsx

@@ -0,0 +1,4 @@
+import ImageLogoSet from '@digigov/react-core/ImageLogoSet';
+export * from '@digigov/react-core/ImageLogoSet';
+
+export default ImageLogoSet;

package/src/layouts/Grid/Grid.stories.js

@@ -5,4 +5,5 @@ export default {
   displayName: 'Grid',
 };
 export * from '@digigov/ui/layouts/Grid/__stories__/Default';
+export * from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
 export * from '@digigov/ui/layouts/Grid/__stories__/Inline';

package/src/layouts/Grid/__stories__/ResponsiveSpacing.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Card } from '@digigov/ui/content/Card';
+import { Grid } from '@digigov/ui/layouts/Grid';
+
+export const ResponsiveSpacing = () => {
+  return (
+    <>
+      <Grid role="grid" aria-label="grid-example" container spacing={{xs:1, sm:4, md:6, lg:8, xl:12}}>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+export default ResponsiveSpacing;

package/src/navigation/Breadcrumbs/index.mdx

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

package/src/navigation/Drawer/__stories__/Default.tsx

@@ -1,19 +1,9 @@
 import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/navigation/Drawer';
 import { DrawerHeading } from '@digigov/ui/navigation/Drawer';
-import { Link } from '@digigov/ui/navigation/Link';
 import {
-  isNavListItemLinkInterface,
   NavListAuto,
-  NavListItem,
-  NavMenu,
-  NavMenuContainer,
-  NavMenuContainerContent,
-  NavMenuContainerContentList,
-  NavMenuContainerContentListItem,
-  NavMenuContainerTitle,
 } from '@digigov/ui/navigation/NavList';
-import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 import { Title } from '@digigov/ui/typography/Title';
 
 function useDrawer(): [boolean, () => void] {
@@ -29,33 +19,35 @@ const links = [
   {
     name: 'educational',
     label: 'Εκπαιδευτικό υλικό',
-    subMenu: [
-      {
-        name: 'elearning',
-        href: '#elearning',
-        label: 'Εκπαιδευτική πλατφόρμα',
-      },
-      {
-        name: 'videos',
-        href: '#videos',
-        label: 'Βίντεο',
-      },
-      {
-        name: 'presentations',
-        href: '#presentations',
-        label: 'Παρουσιάσεις',
-      },
-      {
-        name: 'promoting',
-        href: '#promoting',
-        label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
-      },
-      {
-        name: 'other-texts',
-        href: '#other-texts',
-        label: 'Άλλα κείμενα',
-      },
-    ],
+    menu: {
+      links: [
+        {
+          name: 'elearning',
+          href: '#elearning',
+          label: 'Εκπαιδευτική πλατφόρμα',
+        },
+        {
+          name: 'videos',
+          href: '#videos',
+          label: 'Βίντεο',
+        },
+        {
+          name: 'presentations',
+          href: '#presentations',
+          label: 'Παρουσιάσεις',
+        },
+        {
+          name: 'promoting',
+          href: '#promoting',
+          label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά',
+        },
+        {
+          name: 'other-texts',
+          href: '#other-texts',
+          label: 'Άλλα κείμενα',
+        },
+      ]
+    },
   },
   { name: 'news', href: '#news', label: 'Νέα' },
 ];
@@ -63,13 +55,7 @@ const links = [
 export const Default = () => {
   const [open, toggleDrawer] = useDrawer();
 
-  const { container, registerButton, registerLink } = useNavList();
-  const setRegisterButton = (name: string) => {
-    return { ...registerButton(name) };
-  };
-  const setRegisterLink = (name: string) => {
-    return { ...registerLink(name) };
-  };
+
 
   const layout = 'vertical';
   const border = false;
@@ -87,46 +73,7 @@ export const Default = () => {
         fixed={fixed}
         aria-label="Nav list"
       >
-        {links.map((item, key) => (
-          <React.Fragment key={key}>
-            <NavListItem
-              link={item}
-              setRegisterButton={setRegisterButton}
-              setRegisterLink={setRegisterLink}
-            />
-            <NavMenu layout={layout} {...container(item.name)}>
-              <NavMenuContainer
-                layout={layout}
-                paddingLeft={5}
-                paddingRight={5}
-              >
-                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
-                <NavMenuContainerContent>
-                  <NavMenuContainerContentList role="menu">
-                    {item.subMenu?.map((subMenu, menuIndex) => {
-                      return (
-                        isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem
-                            key={menuIndex}
-                            role="presentation"
-                          >
-                            <Link
-                              role="menuitem"
-                              id={subMenu.name}
-                              href={subMenu.href}
-                            >
-                              {subMenu.label}
-                            </Link>
-                          </NavMenuContainerContentListItem>
-                        )
-                      );
-                    })}
-                  </NavMenuContainerContentList>
-                </NavMenuContainerContent>
-              </NavMenuContainer>
-            </NavMenu>
-          </React.Fragment>
-        ))}
+
       </NavListAuto>
     </Drawer>
   );

package/src/navigation/Dropdown/__stories__/AlignRight.tsx

@@ -12,8 +12,7 @@ import {
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 export const AlignRight = () => (
   <div
@@ -39,20 +38,22 @@ export const AlignRight = () => (
             <TextInput name="input-name" />
           </LabelContainer>
         </FieldContainer>
-        <SectionBreak role="separator" />
-        <NavVertical role="menu">
-          <NavVerticalItem role="menuitem" href="#">
+        <SectionBreak role="separator" paddingBottom={0} paddingTop={0} />
+        <NavList layout="vertical">
+          <NavListItemAction role="menuitem" href="#">
             Επεξεργασία
-          </NavVerticalItem>
-          <NavVerticalItem role="menuitem" href="#">
+          </NavListItemAction>
+          <NavListItemAction role="menuitem" href="#">
             Μετακίνηση
-          </NavVerticalItem>
-          <NavVerticalItem role="menuitem" href="#">
+          </NavListItemAction>
+          <NavListItemAction role="menuitem" href="#">
             Οριστική διαγραφή
-          </NavVerticalItem>
-        </NavVertical>
+          </NavListItemAction>
+        </NavList>
         <SectionBreak role="separator" />
-        <Button role="menuitem" color='secondary'>Ενέργεια</Button>
+        <Button role="menuitem" color="secondary">
+          Ενέργεια
+        </Button>
       </DropdownContent>
     </Dropdown>
   </div>

package/src/navigation/Dropdown/__stories__/Default.tsx

@@ -12,8 +12,7 @@ import {
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
 
 export const Default = () => (
   <Dropdown>
@@ -32,18 +31,18 @@ export const Default = () => (
           <TextInput name="input-name" />
         </LabelContainer>
       </FieldContainer>
-      <SectionBreak role="separator" />
-      <NavVertical role="menu">
-        <NavVerticalItem role="menuitem" href="#">
+      <SectionBreak role="separator" paddingBottom={0} paddingTop={0} />
+      <NavList layout='vertical' >
+        <NavListItemAction role="menuitem" href="#">
           Επεξεργασία
-        </NavVerticalItem>
-        <NavVerticalItem role="menuitem" href="#">
+        </NavListItemAction>
+        <NavListItemAction role="menuitem" href="#">
           Μετακίνηση
-        </NavVerticalItem>
-        <NavVerticalItem role="menuitem" href="#">
+        </NavListItemAction>
+        <NavListItemAction role="menuitem" href="#">
           Οριστική διαγραφή
-        </NavVerticalItem>
-      </NavVertical>
+        </NavListItemAction>
+      </NavList>
       <SectionBreak role="separator" />
       <Button role="menuitem" color='secondary'>Ενέργεια</Button>
     </DropdownContent>

package/src/navigation/Dropdown/__stories__/PlacementTop.tsx

@@ -12,8 +12,8 @@ import {
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
+
 
 export const PlacementTop = () => (
   <div
@@ -40,18 +40,18 @@ export const PlacementTop = () => (
             <TextInput name="input-name" />
           </LabelContainer>
         </FieldContainer>
-        <SectionBreak role="separator" />
-        <NavVertical role="menu">
-          <NavVerticalItem role="menuitem" href="#">
+        <SectionBreak role="separator" paddingBottom={0} paddingTop={0} />
+        <NavList layout="vertical">
+          <NavListItemAction role="menuitem" href="#">
             Επεξεργασία
-          </NavVerticalItem>
-          <NavVerticalItem role="menuitem" href="#">
+          </NavListItemAction>
+          <NavListItemAction role="menuitem" href="#">
             Μετακίνηση
-          </NavVerticalItem>
-          <NavVerticalItem role="menuitem" href="#">
+          </NavListItemAction>
+          <NavListItemAction role="menuitem" href="#">
             Οριστική διαγραφή
-          </NavVerticalItem>
-        </NavVertical>
+          </NavListItemAction>
+        </NavList>
         <SectionBreak role="separator" />
         <Button role="menuitem" color='secondary'>Ενέργεια</Button>
       </DropdownContent>

package/src/navigation/Dropdown/index.mdx

@@ -25,8 +25,6 @@ You can display the dropdown menu to the top of the `Dropdown` button.
 
 <Story packageName="@digigov/ui" component="navigation/Dropdown" story="PlacementTop.tsx" />
 
-You can read more about the accessibility patterns used in our Dropdown
-implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 

package/src/navigation/Link/index.mdx

@@ -29,6 +29,8 @@ import Link from '@digigov/ui/navigation/Link';
 
 <Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
 
+### Accessibility
+
 You can read more about the accessibility patterns used in our Link
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.

package/src/navigation/Link/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
 
 export interface LinkComponentContextProps {

package/src/navigation/NavList/NavList.stories.js

@@ -8,4 +8,10 @@ export default {
   displayName: 'NavList',
 };
 export * from '@digigov/ui/navigation/NavList/__stories__/Default';
-export * from '@digigov/ui/navigation/NavList/__stories__/NavVerticalLayout';
+export * from '@digigov/ui/navigation/NavList/__stories__/Vertical';
+export * from '@digigov/ui/navigation/NavList/__stories__/NavListWithoutNav';
+export * from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto';
+export * from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithDrawer';
+export * from '@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton';

package/src/navigation/NavList/NavList.stories.playwright.json

@@ -1,31 +1,51 @@
 {
   "version": "4",
   "stories": {
-    "digigov-ui-navigation-navlist--default": {
+    "digigov-ui-navigation-navlist--with-sub-menu": {
       "actionSets": [
         {
           "actions": [
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(1)>a"
               }
             }
           ],
           "id": "dHQxEQCIJ4bJ",
           "title": "Hover item"
-        },
+        }
+      ]
+    },
+    "digigov-ui-navigation-navlist--horizontal-with-submenu": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>button"
+              }
+            }
+          ],
+          "id": "2DykhuHWrXMe",
+          "title": "Open submenu"
+        }
+      ]
+    },
+    "digigov-ui-navigation-navlist--vertical-with-submenu": {
+      "actionSets": [
         {
           "actions": [
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>button"
               }
             }
           ],
-          "id": "WMfgyO3E_9S_",
-          "title": "Open sub menu"
+          "id": "yTIrKHLeGZkx",
+          "title": "Open submenu"
         }
       ]
     }