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

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;

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

@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
+import {
+  Header,
+  HeaderSection,
+  HeaderContent,
+  HeaderTitle,
+} from '@digigov/ui/app/Header';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import {
+  Nav,
+  NavMenuContainer,
+  NavMenuTitle,
+  NavMenuContent,
+  NavMenuContentList,
+  NavMenuContentListItem,
+} from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Button } from '@digigov/ui/form/Button';
+import ArrowIcon from '@digigov/react-icons/ArrowIcon';
+
+const links: any = [];
+for (let index = 0; index < 14; index++) {
+  links.push({
+    name: `Nav${index}`,
+    label: `σύνδεσμος ${index + 1}`,
+    href: `?q=item${index + 1}`,
+  });
+}
+
+const menuLabel = 'Επιλογές';
+const menuTitle = 'Επιλογές της υπηρεσίας';
+
+export const UsingHeaderButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Top>
+      <Header>
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo href="#" />
+            <HeaderTitle>Τίτλος Υπηρεσίας</HeaderTitle>
+          </HeaderSection>
+          <HeaderSection>
+            <Button variant="link" onClick={() => setOpen(!open)}>
+              {menuLabel}<ArrowIcon direction={open? 'up' : "down"} />
+            </Button>
+          </HeaderSection>
+        </HeaderContent>
+      </Header>
+      <Nav
+        open={open}
+        drawer="smDown"
+        onClose={() => setOpen(false)}
+        closeButtonLabel="Κλείσιμο"
+        aria-label="navigation list"
+      >
+        <NavMenuContainer active={open}>
+          <NavMenuContent md={12}>
+            <Paragraph>
+              Εξερευνήστε τις δυνατότητες της Υπηρεσίας, επιλέγοντας από τους παρακάτω συνδέσμους:
+            </Paragraph>
+          </NavMenuContent>
+          <NavMenuTitle>{menuTitle || menuLabel}</NavMenuTitle>
+          <NavMenuContent>
+            <NavMenuContentList role="menu">
+              {links &&
+                links.map((item, menuIndex) => {
+                  return (
+                    <NavMenuContentListItem key={menuIndex} role="presentation">
+                      {item?.href && (
+                        <Link role="menuitem" id={item.name} href={item.href}>
+                          {item.label}
+                        </Link>
+                      )}
+                    </NavMenuContentListItem>
+                  );
+                })}
+            </NavMenuContentList>
+          </NavMenuContent>
+        </NavMenuContainer>
+      </Nav>
+    </Top>
+  );
+};
+
+export default UsingHeaderButton;

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import {
+  NavListAuto,
+} from '@digigov/ui/navigation/NavList';
+import links from './NavLinksWithSubmenu.json';
+import { Button } from '@digigov/ui/form/Button';
+import BurgerIcon from '@digigov/react-icons/BurgerIcon';
+
+export const UsingNavListAuto = () => {
+  const layout = 'horizontal';
+  const drawer = 'smDown';
+  const border = true;
+  const [open, setOpen] = React.useState(false);
+  return (
+    <>
+      <Button color="secondary" onClick={() => setOpen(!open)} smUpHidden>
+        Επιλογές <BurgerIcon />
+      </Button>
+      <NavListAuto
+        layout={layout}
+        border={border}
+        drawer={drawer}
+        open={open}
+        links={links}
+        onClose={() => setOpen(false)}
+        aria-label="Nav list"
+      ></NavListAuto>
+    </>
+  );
+};
+
+export default UsingNavListAuto;

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

@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import {
+  Nav,
+  NavList,
+  NavListItemAction,
+  useNavList,
+} from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
+
+export const Vertical = () => {
+  const layout = 'vertical';
+  const { registerNavItem } = useNavList();
+  const [useActive, setUseActive] = useState("");
+
+  return (
+    <Nav aria-orientation={layout || 'horizontal'} aria-label="navigation list">
+      <NavList layout={layout}>
+        {links.map((item, key) => (
+          <NavListItemAction
+            {...registerNavItem(item)}
+            key={key}
+            active={item.name === useActive}
+            onClick={() => setUseActive(item.name)}
+          >
+            {item.label}
+          </NavListItemAction>
+        ))}
+      </NavList>
+    </Nav>
+  );
+};
+
+export default Vertical;