@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-758a1807

package/src/layouts/Stack/__stories__/JustifyContent.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const JustifyContent = () => {
+  return (
+    <Stack spacing={4}>
+      <Stack direction="row" spacing={2} justifyContent='flex-start'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='center'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='flex-end'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='space-between'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='space-around'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} justifyContent='space-evenly'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+    </Stack>
+  );
+};
+export default JustifyContent;

package/src/layouts/Stack/__stories__/NoWrap.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const NoWrap = () => {
+  return (
+    <Stack spacing={4} direction='row' flexWrap='nowrap'>
+      <Card variant="border"> Longer Item 1 </Card>
+      <Card variant="border"> Longer Item 2 </Card>
+      <Card variant="border"> Longer Item 3 </Card>
+      <Card variant="border"> Longer Item 4 </Card>
+      <Card variant="border"> Longer Item 5 </Card>
+      <Card variant="border"> Longer Item 6 </Card>
+    </Stack>
+  );
+};
+export default NoWrap;

package/src/layouts/Stack/__stories__/Row.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const Row = () => {
+  return (
+    <Stack spacing={2} direction='row'>
+      <Card variant="border"> Item 1 </Card>
+      <Card variant="border"> Item 2 </Card>
+      <Card variant="border"> Item 3 </Card>
+      <Card variant="border"> Item 4 </Card>
+      <Card variant="border"> Item 5 </Card>
+      <Card variant="border"> Item 6 </Card>
+    </Stack>
+  );
+};
+export default Row;

package/src/layouts/Stack/__stories__/Spacing.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const Spacing = () => {
+  return (
+    <Stack spacing={6}>
+      <Stack direction="row">
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={4}>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={8}>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+      <Stack direction="row" spacing={12}>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+      </Stack>
+    </Stack>
+  );
+};
+export default Spacing;

package/src/layouts/Stack/index.tsx

@@ -0,0 +1,3 @@
+import Stack from '@digigov/react-core/Stack';
+
+export default Stack;

package/src/layouts/index.ts

@@ -2,6 +2,7 @@ export * from '@digigov/ui/layouts/Admin';
 export * from '@digigov/ui/layouts/Basic';
 export * from '@digigov/ui/layouts/Divider';
 export * from '@digigov/ui/layouts/Grid';
+export * from '@digigov/ui/layouts/Stack';
 export * from '@digigov/ui/layouts/Hidden';
 export * from '@digigov/ui/layouts/SectionBreak';
 export { default as AdminLayout } from '@digigov/ui/layouts/Admin';
@@ -9,3 +10,4 @@ export { default as BasicLayout } from '@digigov/ui/layouts/Basic';
 export { default as Divider } from '@digigov/ui/layouts/Divider';
 export { default as SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 export { default as Grid } from '@digigov/ui/layouts/Grid';
+export { default as Stack } from '@digigov/ui/layouts/Stack';

package/src/navigation/BackLink/index.mdx

@@ -13,11 +13,7 @@ import BackLink from "@digigov/ui/navigation/BackLink";
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/BackLink" story="Default.tsx" />
 
 ## API
 

package/src/navigation/Breadcrumbs/index.mdx

@@ -15,11 +15,12 @@ import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Breadcrumbs"
-  story="Default.tsx"
-/>
+<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
 

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

@@ -9,11 +9,7 @@ import Drawer from '@digigov/ui/app/Drawer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Drawer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Drawer" story="Default.tsx" />
 
 ## API
 

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

@@ -11,34 +11,20 @@ import Dropdown from '@digigov/ui/navigation/Dropdown';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Dropdown" story="Default.tsx" />
 
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="AlignRight.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Dropdown" story="AlignRight.tsx" />
 
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="PlacementTop.tsx"
-/>
+<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/Dropdown/index.tsx

@@ -5,7 +5,6 @@ import DropdownBase, {
 
 export * from '@digigov/react-core/DropdownButton';
 export * from '@digigov/react-core/DropdownContent';
-export * from '@digigov/react-core/DropdownArrowDown';
 
 export interface DropdownProps extends DropdownBaseProps {
   /**

package/src/navigation/Link/index.mdx

@@ -11,43 +11,25 @@ import Link from '@digigov/ui/navigation/Link';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="Default.tsx" />
 
 ### No Underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="NoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link"story="NoUnderline.tsx" />
 
 ### Opens in a new tab
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="OpensInNewTab.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="OpensInNewTab.tsx" />
 
 ### At dark background
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackground.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackgroundNoUnderline.tsx"
-/>
+<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

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

@@ -8,7 +8,7 @@
             {
               "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(2)>button"
               }
             }
           ],
@@ -20,7 +20,7 @@
             {
               "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"
               }
             }
           ],

package/src/navigation/NavList/NavListAuto/index.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { NavListAutoProps } from '@digigov/ui/navigation/NavList/types';
+import { useNavList } from '../hooks/useNavList';
+import NavListItemAction from '@digigov/react-core/NavListItemAction';
+import { Link } from '@digigov/ui/navigation/Link';
+import Nav from '../Nav';
+import NavList from '@digigov/react-core/NavList';
+import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
+import NavMenuContent from '@digigov/react-core/NavMenuContent';
+import NavMenuContentList from '@digigov/ui/navigation/NavList/NavMenuContentList';
+import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
+import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
+
+export const NavListAuto: React.FC<NavListAutoProps> = ({
+  layout,
+  border,
+  fixed,
+  links = [],
+  ...props
+}) => {
+  const { registerNavItemMenu, registerNavItem } = useNavList();
+  return (
+    <Nav open={true} border={border} fixed={fixed} {...props}>
+      <NavList layout={layout}>
+        {links.map((item, key) => (
+          <React.Fragment key={key}>
+            <NavListItemAction {...registerNavItem(item)}>
+              {item.label}
+            </NavListItemAction>
+            {item.menu && (
+              <NavMenuContainer
+                layout={layout}
+                {...registerNavItemMenu(item.name)}
+              >
+                    {item.menu?.title && <NavMenuTitle>{item.menu?.title}</NavMenuTitle>}
+                    <NavMenuContent>
+                      <NavMenuContentList role="menu">
+                        {item.menu.links?.map((subMenu, menuIndex) => {
+                          return (
+                            subMenu?.href && (
+                              <NavMenuContentListItem
+                                key={menuIndex}
+                                role="presentation"
+                              >
+                                <Link
+                                  role="menuitem"
+                                  id={subMenu.name}
+                                  href={subMenu.href}
+                                >
+                                  {subMenu.label}
+                                </Link>
+                              </NavMenuContentListItem>
+                            )
+                          );
+                        })}
+                      </NavMenuContentList>
+                    </NavMenuContent>
+                
+              </NavMenuContainer>
+            )}
+          </React.Fragment>
+        ))}
+      </NavList>
+    </Nav>
+  );
+};
+
+export default NavListAuto;