@digigov/ui 1.0.0-7c9716da → 1.0.0-871b6be5

package/navigation/NavList/__stories__/Default.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,97 +11,42 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
-var _NavList = _interopRequireWildcard(require("@digigov/ui/navigation/NavList"));
-
-var _Link = require("@digigov/ui/navigation/Link");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _NavList = require("@digigov/ui/navigation/NavList");
 
 var links = [{
   name: 'home',
   href: '#home',
-  label: 'Αρχική'
+  label: 'Αρχική',
+  active: true
 }, {
-  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: 'new_form',
+  href: '#new_form',
+  label: 'Καταχώριση φόρμας'
 }, {
   name: 'news',
   href: '#news',
   label: 'Νέα'
+}, {
+  name: 'contact',
+  href: '#contact',
+  label: 'Επικοινωνία'
 }];
 
 var Default = function Default() {
-  var layout = 'horizontal';
-  var border = false;
-
   var _useNavList = (0, _NavList.useNavList)(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return (0, _extends2["default"])({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return (0, _extends2["default"])({}, registerLink(name));
-  };
+      registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
-    open: true,
-    layout: layout,
-    border: border,
-    "aria-orientation": layout
-  }, /*#__PURE__*/_react["default"].createElement(_NavList["default"], null, links.map(function (item, key) {
-    var _item$subMenu;
-
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list",
+    fixed: false
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, null, links.map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, (0, _extends2["default"])({
       key: key
-    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, (0, _extends2["default"])({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
-      layout: layout,
-      paddingLeft: 5,
-      paddingRight: 5
-    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, null, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, {
-      role: "menu"
-    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return (0, _NavList.isNavListItemLinkInterface)(subMenu) && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentListItem, {
-        key: menuIndex,
-        role: "presentation"
-      }, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-        role: "menuitem",
-        id: subMenu.name,
-        href: subMenu.href
-      }, subMenu.label));
-    }))))));
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
   })));
 };
 

package/navigation/NavList/__stories__/NavVertical.d.ts

@@ -0,0 +1,2 @@
+export declare const NavVertical: () => JSX.Element;
+export default NavVertical;

package/navigation/NavList/__stories__/NavVertical.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavVertical = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = require("@digigov/ui/navigation/NavList");
+
+var links = [{
+  name: 'link_1',
+  href: '#link_1',
+  label: 'Σύνδεσμος 1',
+  active: true
+}, {
+  name: 'link_2',
+  href: '#link_2',
+  label: 'Σύνδεσμος 2'
+}, {
+  name: 'link_3',
+  href: '#link_3',
+  label: 'Σύνδεσμος 3'
+}];
+
+var NavVertical = function NavVertical() {
+  var _useNavList = (0, _NavList.useNavList)(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
+    "aria-orientation": "vertical",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: "vertical"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, (0, _extends2["default"])({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  })));
+};
+
+exports.NavVertical = NavVertical;
+var _default = NavVertical;
+exports["default"] = _default;

package/navigation/NavList/__stories__/NavVerticalLayout.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,14 +13,10 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Link = _interopRequireDefault(require("@digigov/ui/navigation/Link"));
 
-var _NavList = _interopRequireWildcard(require("@digigov/ui/navigation/NavList"));
+var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _useNavList2 = require("@digigov/ui/navigation/NavList/hooks/useNavList");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var links = [{
   name: 'home',
   href: '#home',
@@ -63,49 +57,35 @@ var NavVerticalLayout = function NavVerticalLayout() {
   var border = false;
 
   var _useNavList = (0, _useNavList2.useNavList)(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return (0, _extends2["default"])({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return (0, _extends2["default"])({}, registerLink(name));
-  };
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
     open: true,
-    layout: layout,
     border: border
-  }, /*#__PURE__*/_react["default"].createElement(_NavList["default"], null, links.map(function (item, key) {
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: key
-    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, (0, _extends2["default"])({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
+    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, (0, _extends2["default"])({
       layout: layout,
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, null, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, {
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuTitle, null, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContentList, {
       role: "menu"
     }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return (0, _NavList.isNavListItemLinkInterface)(subMenu) && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentListItem, {
-        role: "presentation",
-        key: menuIndex
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
       }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
         role: "menuitem",
         id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
-    }))))));
+    })))));
   })));
 };
 

package/navigation/NavList/__stories__/NavVerticalWithTitle.d.ts

@@ -0,0 +1,2 @@
+export declare const NavVerticalWithTitle: () => JSX.Element;
+export default NavVerticalWithTitle;

package/navigation/NavList/__stories__/NavVerticalWithTitle.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavVerticalWithTitle = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = require("@digigov/ui/navigation/NavList");
+
+var _Heading = require("@digigov/ui/typography/Heading");
+
+var links = [{
+  name: 'link_1',
+  href: '#link_1',
+  label: 'Σύνδεσμος 1',
+  active: true
+}, {
+  name: 'link_2',
+  href: '#link_2',
+  label: 'Σύνδεσμος 2'
+}, {
+  name: 'link_3',
+  href: '#link_3',
+  label: 'Σύνδεσμος 3'
+}];
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+  size: "sm"
+}, "\u03A3\u03C7\u03B5\u03C4\u03B9\u03BA\u03BF\u03AF \u03A3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03B9");
+
+var NavVerticalWithTitle = function NavVerticalWithTitle() {
+  var _useNavList = (0, _NavList.useNavList)(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/_react["default"].createElement("div", null, _ref, /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
+    "aria-orientation": "vertical",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: "vertical"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, (0, _extends2["default"])({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  }))));
+};
+
+exports.NavVerticalWithTitle = NavVerticalWithTitle;
+var _default = NavVerticalWithTitle;
+exports["default"] = _default;

package/navigation/NavList/__stories__/WithBurgerIcon.d.ts

@@ -0,0 +1,2 @@
+export declare const WithBurgerIcon: () => JSX.Element;
+export default WithBurgerIcon;

package/navigation/NavList/__stories__/WithBurgerIcon.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithBurgerIcon = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NavList = _interopRequireDefault(require("@digigov/ui/navigation/NavList/NavList"));
+
+var _icons = require("@digigov/ui/icons");
+
+var _NavList2 = require("@digigov/ui/navigation/NavList");
+
+var _useNavList2 = require("@digigov/ui/navigation/NavList/hooks/useNavList");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var links = [{
+  name: 'home',
+  href: '#home',
+  label: 'Αρχική',
+  active: true
+}, {
+  name: 'new_form',
+  href: '#new_form',
+  label: 'Καταχώριση φόρμας'
+}, {
+  name: 'news',
+  href: '#news',
+  label: 'Νέα'
+}, {
+  name: 'contact',
+  href: '#contact',
+  label: 'Επικοινωνία'
+}];
+
+var WithBurgerIcon = function WithBurgerIcon() {
+  var _useNavList = (0, _useNavList2.useNavList)(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icons.BurgerIcon, {
+    mdUpHidden: true,
+    size: "lg",
+    onClick: function onClick() {
+      setOpen(!open);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_NavList2.Nav, {
+    role: "menubar",
+    "aria-orientation": "horizontal",
+    "aria-label": "Nav list",
+    fixed: false,
+    border: false,
+    open: open
+  }, /*#__PURE__*/_react["default"].createElement(_NavList["default"], null, links.map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList2.NavListItemAction, (0, _extends2["default"])({
+      key: key
+    }, registerNavItem(item), {
+      active: item === null || item === void 0 ? void 0 : item.active
+    }), item.label);
+  }))));
+};
+
+exports.WithBurgerIcon = WithBurgerIcon;
+var _default = WithBurgerIcon;
+exports["default"] = _default;

package/navigation/NavList/__stories__/WithSubMenu.d.ts

@@ -0,0 +1,2 @@
+export declare const WithSubMenu: () => JSX.Element;
+export default WithSubMenu;

package/navigation/NavList/__stories__/WithSubMenu.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithSubMenu = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NavList = require("@digigov/ui/navigation/NavList");
+
+var _Link = require("@digigov/ui/navigation/Link");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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: 'Νέα'
+}];
+
+var WithSubMenu = function WithSubMenu() {
+  var layout = 'horizontal';
+  var border = false;
+
+  var _useNavList = (0, _NavList.useNavList)(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
+    open: true,
+    border: border,
+    "aria-orientation": layout
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
+      key: key
+    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, (0, _extends2["default"])({
+      layout: layout
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuTitle, null, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.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["default"].createElement(_NavList.NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+
+exports.WithSubMenu = WithSubMenu;
+var _default = WithSubMenu;
+exports["default"] = _default;

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

@@ -1,6 +1,6 @@
 import { UseTogglableNavReturn } from '@digigov/ui/navigation/NavList/hooks/useTogglableNav';
 export interface UseNavListReturn extends UseTogglableNavReturn {
-    container: (key: string) => {
+    registerNavItemMenu: (key: string) => {
         active: boolean;
         id: string;
     };

package/navigation/NavList/hooks/useNavList.js

@@ -33,7 +33,7 @@ var useNavList = function useNavList() {
       opened = _useTogglableNav.opened,
       rest = (0, _objectWithoutProperties2["default"])(_useTogglableNav, _excluded);
 
-  var container = (0, _react.useCallback)(function (key) {
+  var registerNavItemMenu = (0, _react.useCallback)(function (key) {
     return {
       ref: function ref(el) {
         if (el && !registeredContainers.current[el.id]) {
@@ -48,7 +48,7 @@ var useNavList = function useNavList() {
     registerButton: registerButton,
     registerLink: registerLink,
     opened: opened,
-    container: container
+    registerNavItemMenu: registerNavItemMenu
   }, rest);
 };
 

package/navigation/NavList/hooks/useTogglableNav.d.ts

@@ -12,6 +12,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;

package/navigation/NavList/hooks/useTogglableNav.js

@@ -31,24 +31,6 @@ function useTogglableNav(_ref) {
 
   var registered = (0, _react.useRef)({});
   var openedKeys = (0, _react.useRef)([]);
-  var registerButtonRef = (0, _react.useCallback)(function (el) {
-    if (!el) return;
-    var key = el.getAttribute('aria-controls');
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el: el,
-      type: 'button'
-    };
-  }, []);
-  var registerLinkRef = (0, _react.useCallback)(function (el) {
-    if (!el) return;
-    var key = el.getAttribute('aria-controls');
-    if (registered.current[key]) return;
-    registered.current[key] = {
-      el: el,
-      type: 'link'
-    };
-  }, []);
   var toggle = (0, _react.useCallback)(function (e) {
     var key = e.currentTarget.getAttribute('aria-controls');
     var selected = e.currentTarget.getAttribute('aria-selected') === 'true';
@@ -274,6 +256,24 @@ function useTogglableNav(_ref) {
         break;
     }
   }, []);
+  var registerButtonRef = (0, _react.useCallback)(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el: el,
+      type: 'button'
+    };
+  }, []);
+  var registerLinkRef = (0, _react.useCallback)(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el: el,
+      type: 'link'
+    };
+  }, []);
   var registerButton = (0, _react.useCallback)(function (key) {
     var _extends2;
 
@@ -292,8 +292,23 @@ function useTogglableNav(_ref) {
       onKeyDown: onKeyDown
     });
   }, [opened]);
+  var registerNavItem = (0, _react.useCallback)(function (item) {
+    if (item.subMenu || item.menu) {
+      return (0, _extends3["default"])({}, registerButton(item.name), {
+        role: 'button'
+      });
+    } else if (item.href) {
+      return (0, _extends3["default"])({}, registerLink(item.name), {
+        href: item.href
+      });
+    } else {
+      console.error(item);
+      throw new Error('Invalid nav item. Must be either button or link');
+    }
+  }, [opened]);
   return (0, _react.useMemo)(function () {
     return {
+      registerNavItem: registerNavItem,
       registerButton: registerButton,
       registerLink: registerLink,
       registered: registered,