@digigov/ui 1.0.0-002c630d → 1.0.0-079f34f3d

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/Link.stories.playwright.json

@@ -46,13 +46,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>a"
+                "selector": "html>body>div:nth-child(5)>section>a"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>a"
+                "selector": "html>body>div:nth-child(5)>section>a"
               }
             }
           ],

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;

package/src/navigation/NavList/{NavMenuContainerContentList.tsx → NavMenuContentList.tsx}

@@ -1,8 +1,8 @@
 import React from 'react';
-import NavMenuContainerContentListWrapper, {
-  NavMenuContainerContentListProps,
-} from '@digigov/react-core/NavMenuContainerContentList';
-export * from '@digigov/react-core/NavMenuContainerContentList';
+import NavMenuContentListBase, {
+  NavMenuContentListProps,
+} from '@digigov/react-core/NavMenuContentListBase';
+export * from '@digigov/react-core/NavMenuContentListBase';
 
 const focusNavListItem = (e, nextItemIndex) => {
   e.preventDefault();
@@ -33,12 +33,12 @@ const focusNavListItem = (e, nextItemIndex) => {
   }
 };
 
-export const NavMenuContainerContentList: React.FC<NavMenuContainerContentListProps> = ({
+export const NavMenuContentList: React.FC<NavMenuContentListProps> = ({
   children,
   ...props
 }) => {
   return (
-    <NavMenuContainerContentListWrapper
+    <NavMenuContentListBase
       {...props}
       onKeyDown={(event) => {
         switch (event.key) {
@@ -56,8 +56,8 @@ export const NavMenuContainerContentList: React.FC<NavMenuContainerContentListPr
       }}
     >
       {children}
-    </NavMenuContainerContentListWrapper>
+    </NavMenuContentListBase>
   );
 };
 
-export default NavMenuContainerContentList;
+export default NavMenuContentList;

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

@@ -1,14 +1,13 @@
-import React from 'react';
-import NavList, {
-  isNavListItemLinkInterface,
+import React, { Fragment } from 'react';
+import {
   Nav,
-  NavListItem,
-  NavMenu,
+  NavList,
+  NavListItemAction,
   NavMenuContainer,
-  NavMenuContainerContent,
-  NavMenuContainerContentList,
-  NavMenuContainerContentListItem,
-  NavMenuContainerTitle,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuTitle,
   useNavList
 } from '@digigov/ui/navigation/NavList';
 import { Link } from '@digigov/ui/navigation/Link';
@@ -49,42 +48,31 @@ const links = [
   { name: 'news', href: '#news', label: 'Νέα' },
 ];
 
+
 export const Default = () => {
   const layout = 'horizontal';
   const border = false;
-  const { container, registerButton, registerLink } = useNavList();
-
-  const setRegisterButton = (name: string) => {
-    return { ...registerButton(name) };
-  };
-
-  const setRegisterLink = (name: string) => {
-    return { ...registerLink(name) };
-  };
-
+  const { registerNavItemMenu, registerNavItem } = useNavList();
   return (
-    <Nav open={true} layout={layout} border={border} aria-orientation={layout}>
-      <NavList>
+    <Nav open={true} border={border} aria-orientation={layout}>
+      <NavList layout={layout}>
         {links.map((item, key) => (
-          <React.Fragment key={key}>
-            <NavListItem
-              link={item}
-              setRegisterButton={setRegisterButton}
-              setRegisterLink={setRegisterLink}
-            />
-            <NavMenu layout={layout} {...container(item.name)}>
+          <Fragment key={key}>
+            <NavListItemAction {...registerNavItem(item)} >
+              {item.label}
+            </NavListItemAction>
+            {item.subMenu &&
               <NavMenuContainer
                 layout={layout}
-                paddingLeft={5}
-                paddingRight={5}
+                {...registerNavItemMenu(item.name)}
               >
-                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
-                <NavMenuContainerContent>
-                  <NavMenuContainerContentList role="menu">
+                <NavMenuTitle>{item.label}</NavMenuTitle>
+                <NavMenuContent>
+                  <NavMenuContentList role="menu">
                     {item.subMenu?.map((subMenu, menuIndex) => {
                       return (
-                        isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem
+                        subMenu?.href && (
+                          <NavMenuContentListItem
                             key={menuIndex}
                             role="presentation"
                           >
@@ -95,15 +83,15 @@ export const Default = () => {
                             >
                               {subMenu.label}
                             </Link>
-                          </NavMenuContainerContentListItem>
+                          </NavMenuContentListItem>
                         )
                       );
                     })}
-                  </NavMenuContainerContentList>
-                </NavMenuContainerContent>
+                  </NavMenuContentList>
+                </NavMenuContent>
               </NavMenuContainer>
-            </NavMenu>
-          </React.Fragment>
+            }
+          </Fragment>
         ))}
       </NavList>
     </Nav>

package/src/navigation/NavList/__stories__/NavVerticalLayout.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import Link from '@digigov/ui/navigation/Link';
-import NavList, {
-  isNavListItemLinkInterface,
+import {
   Nav,
-  NavListItem,
-  NavMenu,
+  NavList,
+  NavListItemAction,
   NavMenuContainer,
-  NavMenuContainerContent,
-  NavMenuContainerContentList,
-  NavMenuContainerContentListItem,
-  NavMenuContainerTitle,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuTitle,
 } from '@digigov/ui/navigation/NavList';
 import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
 
@@ -53,41 +52,34 @@ const links = [
 export const NavVerticalLayout = () => {
   const layout = 'vertical';
   const border = false;
-  const { container, registerButton, registerLink } = useNavList();
+  const { registerNavItemMenu, registerNavItem } = useNavList();
 
-  const setRegisterButton = (name: string) => {
-    return { ...registerButton(name) };
-  };
 
-  const setRegisterLink = (name: string) => {
-    return { ...registerLink(name) };
-  };
 
   return (
-    <Nav open={true} layout={layout} border={border}>
-      <NavList>
+    <Nav open={true}  border={border}>
+      <NavList layout={layout}>
         {links.map((item, key) => (
           <React.Fragment key={key}>
-            <NavListItem
-              link={item}
-              setRegisterButton={setRegisterButton}
-              setRegisterLink={setRegisterLink}
-            />
-            <NavMenu layout={layout} {...container(item.name)}>
+            <NavListItemAction {...registerNavItem(item)} >
+              {item.label}
+            </NavListItemAction>
+            {item.subMenu &&
               <NavMenuContainer
                 layout={layout}
                 paddingLeft={5}
                 paddingRight={5}
+                {...registerNavItemMenu(item.name)}
               >
-                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
-                <NavMenuContainerContent>
-                  <NavMenuContainerContentList role="menu">
+                <NavMenuTitle>{item.label}</NavMenuTitle>
+                <NavMenuContent>
+                  <NavMenuContentList role="menu">
                     {item.subMenu?.map((subMenu, menuIndex) => {
                       return (
-                        isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem
-                            role="presentation"
+                        subMenu?.href && (
+                          <NavMenuContentListItem
                             key={menuIndex}
+                            role="presentation"
                           >
                             <Link
                               role="menuitem"
@@ -96,14 +88,14 @@ export const NavVerticalLayout = () => {
                             >
                               {subMenu.label}
                             </Link>
-                          </NavMenuContainerContentListItem>
+                          </NavMenuContentListItem>
                         )
                       );
                     })}
-                  </NavMenuContainerContentList>
-                </NavMenuContainerContent>
+                  </NavMenuContentList>
+                </NavMenuContent>
               </NavMenuContainer>
-            </NavMenu>
+            }
           </React.Fragment>
         ))}
       </NavList>

package/src/navigation/NavList/hooks/useNavList.ts

@@ -5,7 +5,7 @@ import {
 } from '@digigov/ui/navigation/NavList/hooks/useTogglableNav';
 
 export interface UseNavListReturn extends UseTogglableNavReturn {
-  container: (key: string) => { active: boolean; id: string };
+  registerNavItemMenu: (key: string) => { active: boolean; id: string };
 }
 export const useNavList = (): UseNavListReturn => {
   const registeredContainers = useRef({});
@@ -18,7 +18,7 @@ export const useNavList = (): UseNavListReturn => {
     onToggleProperty: 'onClick',
     ariaNavigation: true,
   });
-  const container = useCallback(
+  const registerNavItemMenu = useCallback(
     (key: string) => {
       return {
         ref: (el) => {
@@ -32,5 +32,5 @@ export const useNavList = (): UseNavListReturn => {
     },
     [opened]
   );
-  return { registerButton, registerLink, opened, container, ...rest };
+  return { registerButton, registerLink, opened, registerNavItemMenu, ...rest };
 };

package/src/navigation/NavList/hooks/useTogglableNav.tsx

@@ -15,6 +15,7 @@ export interface UseTogglableNavInterface {
 export interface UseTogglableNavReturn {
   registerButton: (el: string) => any;
   registerLink: (el: string) => any;
+  registerNavItem: (item: any) => any;
   registered: { current: Record<string, { el: HTMLElement; type: string }> };
   opened: Record<string, boolean>;
   toggle: (id: string) => void;
@@ -40,25 +41,7 @@ export function useTogglableNav({
   );
   const openedKeys = useRef<string[]>([]);
 
-  const registerButtonRef = useCallback((el) => {
-    if (!el) return;
-    const key = el.getAttribute('aria-controls') as string;
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el,
-      type: 'button',
-    };
-  }, []);
 
-  const registerLinkRef = useCallback((el) => {
-    if (!el) return;
-    const key = el.getAttribute('aria-controls') as string;
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el,
-      type: 'link',
-    };
-  }, []);
 
   const toggle = useCallback((e) => {
     const key = e.currentTarget.getAttribute('aria-controls') as string;
@@ -254,7 +237,25 @@ export function useTogglableNav({
         break;
     }
   }, []);
+  const registerButtonRef = useCallback((el) => {
+    if (!el) return;
+    const key = el.getAttribute('aria-controls') as string;
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el,
+      type: 'button',
+    };
+  }, []);
 
+  const registerLinkRef = useCallback((el) => {
+    if (!el) return;
+    const key = el.getAttribute('aria-controls') as string;
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el,
+      type: 'link',
+    };
+  }, []);
   const registerButton = useCallback(
     (key) => {
       const isOpen = !!opened[key];
@@ -279,9 +280,20 @@ export function useTogglableNav({
     },
     [opened]
   );
-
+  const registerNavItem = useCallback(
+    (item) => {
+      if(item.subMenu || item.menu) {
+        return {...registerButton(item.name), role: 'button'};
+      }else if (item.href) {
+        return {...registerLink(item.name), href: item.href};
+      }else {
+        console.error(item)
+        throw new Error('Invalid nav item. Must be either button or link');
+      }
+    },[opened])
   return useMemo(
     () => ({
+      registerNavItem,
       registerButton,
       registerLink,
       registered,

package/src/navigation/NavList/index.mdx

@@ -11,19 +11,11 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
 
 ### Vertical NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/NavList" story="Default.tsx" />
 
 ### Horizontal NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="NavVerticalLayout.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/NavList" story="NavVerticalLayout.tsx" />
 
 ## Accessibility