@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

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/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"
         }
       ]
     }

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

@@ -0,0 +1,70 @@
+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,
+  links = [],
+  ...props
+}) => {
+  const { registerNavItemMenu, registerNavItem } = useNavList();
+
+  return (
+    <Nav {...props}>
+      <NavList layout={layout}>
+        {links.map((item, key) => (
+          <React.Fragment key={key}>
+            <NavListItemAction {...registerNavItem(item)}>
+              {item.label}
+            </NavListItemAction>
+            {item.subMenu && (
+              <NavMenuContainer
+                layout={layout}
+                {...registerNavItemMenu(item.name)}
+              >
+                {(item.subMenuHeading || item.label) && (
+                  <NavMenuTitle>
+                    {item.subMenuHeading || item.label}
+                  </NavMenuTitle>
+                )}
+                <NavMenuContent>
+                  <NavMenuContentList role="menu">
+                    {item.subMenu?.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,109 +1,28 @@
-import React from 'react';
-import NavList, {
-  isNavListItemLinkInterface,
+import React, { useState } from 'react';
+import {
   Nav,
-  NavListItem,
-  NavMenu,
-  NavMenuContainer,
-  NavMenuContainerContent,
-  NavMenuContainerContentList,
-  NavMenuContainerContentListItem,
-  NavMenuContainerTitle,
-  useNavList
+  NavList,
+  NavListItemAction,
+  useNavList,
 } from '@digigov/ui/navigation/NavList';
-import { Link } from '@digigov/ui/navigation/Link';
-
-const links = [
-  { name: 'home', href: '#home', label: 'Αρχική' },
-  {
-    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: 'Άλλα κείμενα',
-      },
-    ],
-  },
-  { name: 'news', href: '#news', label: 'Νέα' },
-];
+import links from './NavLinksOneLevel.json';
 
 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 { registerNavItem } = useNavList();
+  const [useActive, setUseActive] = useState("");
 
   return (
-    <Nav open={true} layout={layout} border={border} aria-orientation={layout}>
+    <Nav aria-orientation="horizontal" role="menubar" aria-label="navigation list">
       <NavList>
         {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>
+          <NavListItemAction
+            {...registerNavItem(item)}
+            key={key}
+            active={item.name === useActive}
+            onClick={() => setUseActive(item.name)}
+          >
+            {item.label}
+          </NavListItemAction>
         ))}
       </NavList>
     </Nav>

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

@@ -0,0 +1,84 @@
+import React, { Fragment, useState } from 'react';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  NavMenuContainer,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuTitle,
+  useNavList,
+} from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+import links from './NavLinksWithSubmenu.json';
+import { Button } from '@digigov/ui/form/Button';
+import BurgerIcon from '@digigov/react-icons/BurgerIcon';
+import CloseButton from '@digigov/react-core/CloseButton';
+
+export const HorizontalWithDrawer = () => {
+  const layout = 'horizontal';
+  const drawer = 'mdDown';
+  const border = false;
+  const { registerNavItemMenu, registerNavItem } = useNavList();
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button color="secondary" onClick={() => setOpen(!open)} mdUpHidden>
+        Επιλογές <BurgerIcon />
+      </Button>
+      <Nav
+        border={border}
+        aria-orientation={layout || 'horizontal'}
+        aria-label="navigation list"
+        open={open}
+        drawer={drawer}
+      >
+        <CloseButton mdUpHidden onClick={() => setOpen(false)}>
+          Κλείσιμο
+        </CloseButton>
+        <NavList layout={layout}>
+          {links.map((item, key) => (
+            <Fragment key={key}>
+              <NavListItemAction {...registerNavItem(item)}>
+                {item.label}
+              </NavListItemAction>
+              {item.subMenu && (
+                <NavMenuContainer
+                  layout={layout}
+                  {...registerNavItemMenu(item.name)}
+                >
+                  <NavMenuTitle>{item.label}</NavMenuTitle>
+                  <NavMenuContent>
+                    <NavMenuContentList role="menu">
+                      {item.subMenu?.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>
+              )}
+            </Fragment>
+          ))}
+        </NavList>
+      </Nav>
+    </>
+  );
+};
+
+export default HorizontalWithDrawer;

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

@@ -0,0 +1,69 @@
+import React, { Fragment } from 'react';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  NavMenuContainer,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+  NavMenuTitle,
+  useNavList,
+} from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+import links from './NavLinksWithSubmenu.json';
+
+export const HorizontalWithoutDrawer = () => {
+  const layout = 'horizontal';
+  const border = false;
+  const { registerNavItemMenu, registerNavItem } = useNavList();
+  return (
+    <Nav
+      border={border}
+      aria-orientation={layout || 'horizontal'}
+      aria-label="navigation list"
+    >
+      <NavList layout={layout}>
+        {links.map((item, key) => (
+          <Fragment key={key}>
+            <NavListItemAction {...registerNavItem(item)}>
+              {item.label}
+            </NavListItemAction>
+            {item.subMenu && (
+              <NavMenuContainer
+                layout={layout}
+                {...registerNavItemMenu(item.name)}
+              >
+                <NavMenuTitle>{item.label}</NavMenuTitle>
+                <NavMenuContent>
+                  <NavMenuContentList role="menu">
+                    {item.subMenu?.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>
+            )}
+          </Fragment>
+        ))}
+      </NavList>
+    </Nav>
+  );
+};
+
+export default HorizontalWithoutDrawer;

package/src/navigation/NavList/__stories__/NavLinksOneLevel.json

@@ -0,0 +1,17 @@
+[
+  {
+    "name": "home",
+    "href": "#home",
+    "label": "Αρχική"
+  },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "href": "#educational"
+  },
+  {
+    "name": "news",
+    "href": "#news",
+    "label": "Νέα"
+  }
+]

package/src/navigation/NavList/__stories__/NavLinksWithSubmenu.json

@@ -0,0 +1,36 @@
+[
+  { "name": "home", "href": "#home", "label": "Αρχική" },
+  {
+    "name": "educational",
+    "label": "Εκπαιδευτικό υλικό",
+    "subMenuHeading": "Εκπαιδευτικό υλικό",
+    "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": "Άλλα κείμενα"
+      }
+    ]
+  },
+  { "name": "news", "href": "#news", "label": "Νέα" }
+]

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  NavList,
+  NavListItemAction,
+  useNavList,
+} from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
+
+export const NavListWithoutNav = () => {
+  const layout = 'vertical';
+  const { registerNavItem } = useNavList();
+
+  return (
+    <NavList layout={layout}>
+      {links.map((item, key) => (
+        <NavListItemAction {...registerNavItem(item)} key={key}>
+          {item.label}
+        </NavListItemAction>
+      ))}
+    </NavList>
+  );
+};
+
+export default NavListWithoutNav;