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

package/es/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/es/navigation/NavList/NavListAuto/index.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["layout", "links"];
+import React from 'react';
+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 var NavListAuto = function NavListAuto(_ref) {
+  var layout = _ref.layout,
+      _ref$links = _ref.links,
+      links = _ref$links === void 0 ? [] : _ref$links,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, props, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout
+    }, registerNavItemMenu(item.name)), (item.subMenuHeading || item.label) && /*#__PURE__*/React.createElement(NavMenuTitle, null, item.subMenuHeading || item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+export default NavListAuto;

package/es/navigation/NavList/{NavMenuContainerContentList.js → NavMenuContentList.js}

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import React from 'react';
-import NavMenuContainerContentListWrapper from '@digigov/react-core/NavMenuContainerContentList';
-export * from '@digigov/react-core/NavMenuContainerContentList';
+import NavMenuContentListBase from '@digigov/react-core/NavMenuContentListBase';
+export * from '@digigov/react-core/NavMenuContentListBase';
 
 var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
   var _document$activeEleme;
@@ -40,11 +40,11 @@ var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
   }
 };
 
-export var NavMenuContainerContentList = function NavMenuContainerContentList(_ref) {
+export var NavMenuContentList = function NavMenuContentList(_ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(NavMenuContainerContentListWrapper, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(NavMenuContentListBase, _extends({}, props, {
     onKeyDown: function onKeyDown(event) {
       switch (event.key) {
         case 'ArrowDown':
@@ -63,4 +63,4 @@ export var NavMenuContainerContentList = function NavMenuContainerContentList(_r
     }
   }), children);
 };
-export default NavMenuContainerContentList;
+export default NavMenuContentList;

package/es/navigation/NavList/__stories__/Default.js

@@ -1,89 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import NavList, { isNavListItemLinkInterface, Nav, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle, useNavList } from '@digigov/ui/navigation/NavList';
-import { Link } from '@digigov/ui/navigation/Link';
-var 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 _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
 export var Default = function Default() {
-  var layout = 'horizontal';
-  var border = false;
-
   var _useNavList = useNavList(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return _extends({}, registerButton(name));
-  };
+      registerNavItem = _useNavList.registerNavItem;
 
-  var setRegisterLink = function setRegisterLink(name) {
-    return _extends({}, registerLink(name));
-  };
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      useActive = _useState2[0],
+      setUseActive = _useState2[1];
 
   return /*#__PURE__*/React.createElement(Nav, {
-    open: true,
-    layout: layout,
-    border: border,
-    "aria-orientation": layout
+    "aria-orientation": "horizontal",
+    role: "menubar",
+    "aria-label": "navigation list"
   }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
-    var _item$subMenu;
-
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: key
-    }, /*#__PURE__*/React.createElement(NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
-      layout: layout,
-      paddingLeft: 5,
-      paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
-      role: "menu"
-    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
-        key: menuIndex,
-        role: "presentation"
-      }, /*#__PURE__*/React.createElement(Link, {
-        role: "menuitem",
-        id: subMenu.name,
-        href: subMenu.href
-      }, subMenu.label));
-    }))))));
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({}, registerNavItem(item), {
+      key: key,
+      active: item.name === useActive,
+      onClick: function onClick() {
+        return setUseActive(item.name);
+      }
+    }), item.label);
   })));
 };
 export default Default;

package/es/navigation/NavList/__stories__/HorizontalWithDrawer.js

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
+
+var _ref = /*#__PURE__*/React.createElement(BurgerIcon, null);
+
+export var HorizontalWithDrawer = function HorizontalWithDrawer() {
+  var layout = 'horizontal';
+  var drawer = 'mdDown';
+  var border = false;
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    mdUpHidden: true
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 ", _ref), /*#__PURE__*/React.createElement(Nav, {
+    border: border,
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list",
+    open: open,
+    drawer: drawer
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    mdUpHidden: true,
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }, "\u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF"), /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  }))));
+};
+export default HorizontalWithDrawer;

package/es/navigation/NavList/__stories__/HorizontalWithoutDrawer.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+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 var HorizontalWithoutDrawer = function HorizontalWithoutDrawer() {
+  var layout = 'horizontal';
+  var border = false;
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    border: border,
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+export default HorizontalWithoutDrawer;

package/es/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/es/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/es/navigation/NavList/__stories__/NavListWithoutNav.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
+export var NavListWithoutNav = function NavListWithoutNav() {
+  var layout = 'vertical';
+
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({}, registerNavItem(item), {
+      key: key
+    }), item.label);
+  }));
+};
+export default NavListWithoutNav;

package/es/navigation/NavList/__stories__/UsingHeaderButton.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
+var links = [];
+
+for (var index = 0; index < 14; index++) {
+  links.push({
+    name: "Nav".concat(index),
+    label: "\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03C2 ".concat(index + 1),
+    href: "?q=item".concat(index + 1)
+  });
+}
+
+var menuLabel = 'Επιλογές';
+var menuTitle = 'Επιλογές της υπηρεσίας';
+
+var _ref = /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(GovGRLogo, {
+  href: "#"
+}), /*#__PURE__*/React.createElement(HeaderTitle, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1\u03C2"));
+
+var _ref2 = /*#__PURE__*/React.createElement(NavMenuContent, {
+  md: 12
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03BE\u03B5\u03C1\u03B5\u03C5\u03BD\u03AE\u03C3\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03B4\u03C5\u03BD\u03B1\u03C4\u03CC\u03C4\u03B7\u03C4\u03B5\u03C2 \u03C4\u03B7\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1\u03C2, \u03B5\u03C0\u03B9\u03BB\u03AD\u03B3\u03BF\u03BD\u03C4\u03B1\u03C2 \u03B1\u03C0\u03CC \u03C4\u03BF\u03C5\u03C2 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03C3\u03C5\u03BD\u03B4\u03AD\u03C3\u03BC\u03BF\u03C5\u03C2:"));
+
+var _ref3 = /*#__PURE__*/React.createElement(NavMenuTitle, null, menuTitle || menuLabel);
+
+export var UsingHeaderButton = function UsingHeaderButton() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderContent, null, _ref, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  }, menuLabel, /*#__PURE__*/React.createElement(ArrowIcon, {
+    direction: open ? 'up' : "down"
+  }))))), /*#__PURE__*/React.createElement(Nav, {
+    open: open,
+    drawer: "smDown",
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    closeButtonLabel: "\u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF",
+    "aria-label": "navigation list"
+  }, /*#__PURE__*/React.createElement(NavMenuContainer, {
+    active: open
+  }, _ref2, _ref3, /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+    role: "menu"
+  }, links && links.map(function (item, menuIndex) {
+    return /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+      key: menuIndex,
+      role: "presentation"
+    }, (item === null || item === void 0 ? void 0 : item.href) && /*#__PURE__*/React.createElement(Link, {
+      role: "menuitem",
+      id: item.name,
+      href: item.href
+    }, item.label));
+  }))))));
+};
+export default UsingHeaderButton;

package/es/navigation/NavList/__stories__/UsingNavListAuto.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
+
+var _ref = /*#__PURE__*/React.createElement(BurgerIcon, null);
+
+export var UsingNavListAuto = function UsingNavListAuto() {
+  var layout = 'horizontal';
+  var drawer = 'smDown';
+  var border = true;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    smUpHidden: true
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 ", _ref), /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border,
+    drawer: drawer,
+    open: open,
+    links: links,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    "aria-label": "Nav list"
+  }));
+};
+export default UsingNavListAuto;

package/es/navigation/NavList/__stories__/Vertical.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
+export var Vertical = function Vertical() {
+  var layout = 'vertical';
+
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      useActive = _useState2[0],
+      setUseActive = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({}, registerNavItem(item), {
+      key: key,
+      active: item.name === useActive,
+      onClick: function onClick() {
+        return setUseActive(item.name);
+      }
+    }), item.label);
+  })));
+};
+export default Vertical;

package/es/navigation/NavList/__stories__/VerticalWithoutDrawer.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Link from '@digigov/ui/navigation/Link';
+import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle } from '@digigov/ui/navigation/NavList';
+import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
+import links from './NavLinksWithSubmenu.json';
+export var VerticalWithoutDrawer = function VerticalWithoutDrawer() {
+  var layout = 'vertical';
+  var border = false;
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    border: border,
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout,
+      paddingLeft: 5,
+      paddingRight: 5
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+export default VerticalWithoutDrawer;

package/es/navigation/NavList/hooks/useNavList.js

@@ -19,7 +19,7 @@ export var useNavList = function useNavList() {
       opened = _useTogglableNav.opened,
       rest = _objectWithoutProperties(_useTogglableNav, _excluded);
 
-  var container = useCallback(function (key) {
+  var registerNavItemMenu = useCallback(function (key) {
     return {
       ref: function ref(el) {
         if (el && !registeredContainers.current[el.id]) {
@@ -34,6 +34,6 @@ export var useNavList = function useNavList() {
     registerButton: registerButton,
     registerLink: registerLink,
     opened: opened,
-    container: container
+    registerNavItemMenu: registerNavItemMenu
   }, rest);
 };