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

package/navigation/Dropdown/__stories__/Default.js

@@ -21,9 +21,7 @@ var _SectionBreak = require("@digigov/ui/layouts/SectionBreak");
 
 var _Dropdown = require("@digigov/ui/navigation/Dropdown");
 
-var _NavVertical = require("@digigov/ui/navigation/NavList/NavVertical");
-
-var _NavVerticalItem = require("@digigov/ui/navigation/NavList/NavVerticalItem");
+var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, null, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   role: "button",
@@ -38,16 +36,18 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, null
 }, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {

package/navigation/Dropdown/__stories__/PlacementTop.js

@@ -21,9 +21,7 @@ var _SectionBreak = require("@digigov/ui/layouts/SectionBreak");
 
 var _Dropdown = require("@digigov/ui/navigation/Dropdown");
 
-var _NavVertical = require("@digigov/ui/navigation/NavList/NavVertical");
-
-var _NavVerticalItem = require("@digigov/ui/navigation/NavList/NavVerticalItem");
+var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   role: "button",
@@ -40,16 +38,18 @@ var _ref2 = /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownConte
 }, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {

package/navigation/Dropdown/index.mdx

@@ -25,8 +25,6 @@ You can display the dropdown menu to the top of the `Dropdown` button.
 
 <Story packageName="@digigov/ui" component="navigation/Dropdown" story="PlacementTop.tsx" />
 
-You can read more about the accessibility patterns used in our Dropdown
-implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 

package/navigation/Link/index.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
 export interface LinkComponentContextProps {
     component: React.ElementType<LinkProps>;

package/navigation/Link/index.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
 });
@@ -20,42 +18,43 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _LinkBase = _interopRequireDefault(require("@digigov/react-core/LinkBase"));
 
 var _excluded = ["children", "href"];
 
-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 CommonLink = function CommonLink(props) {
-  return /*#__PURE__*/React.createElement(_LinkBase["default"], props, props.children);
+  return /*#__PURE__*/_react["default"].createElement(_LinkBase["default"], props, props.children);
 };
 
 exports.CommonLink = CommonLink;
-var LinkComponentContext = /*#__PURE__*/React.createContext(_LinkBase["default"]);
+
+var LinkComponentContext = /*#__PURE__*/_react["default"].createContext(_LinkBase["default"]);
 
 var LinkProvider = function LinkProvider(props) {
-  return /*#__PURE__*/React.createElement(LinkComponentContext.Provider, {
+  return /*#__PURE__*/_react["default"].createElement(LinkComponentContext.Provider, {
     value: props.component
   }, props.children);
 };
 
 exports.LinkProvider = LinkProvider;
-var Link = /*#__PURE__*/React.forwardRef(function Link(_ref, ref) {
+
+var Link = /*#__PURE__*/_react["default"].forwardRef(function Link(_ref, ref) {
   var children = _ref.children,
       _ref$href = _ref.href,
       href = _ref$href === void 0 ? '' : _ref$href,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var LinkComponent = React.useContext(LinkComponentContext);
-  return /*#__PURE__*/React.createElement(LinkComponent, (0, _extends2["default"])({
+
+  var LinkComponent = _react["default"].useContext(LinkComponentContext);
+
+  return /*#__PURE__*/_react["default"].createElement(LinkComponent, (0, _extends2["default"])({
     ref: ref,
     href: href
   }, props), children);
 }); //@ts-ignore
 
+
 exports.Link = Link;
 Link.displayName = 'Link';
 var _default = Link;

package/navigation/Link/index.mdx

@@ -29,6 +29,8 @@ import Link from '@digigov/ui/navigation/Link';
 
 <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
 [Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.

package/navigation/NavList/NavList.stories.d.ts

@@ -7,5 +7,11 @@ declare namespace _default {
 }
 export default _default;
 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";
 import NavList from "@digigov/ui/navigation/NavList";

package/navigation/NavList/NavList.stories.js

@@ -24,16 +24,100 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
-var _NavVerticalLayout = require("@digigov/ui/navigation/NavList/__stories__/NavVerticalLayout");
+var _Vertical = require("@digigov/ui/navigation/NavList/__stories__/Vertical");
 
-Object.keys(_NavVerticalLayout).forEach(function (key) {
+Object.keys(_Vertical).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavVerticalLayout[key]) return;
+  if (key in exports && exports[key] === _Vertical[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavVerticalLayout[key];
+      return _Vertical[key];
+    }
+  });
+});
+
+var _NavListWithoutNav = require("@digigov/ui/navigation/NavList/__stories__/NavListWithoutNav");
+
+Object.keys(_NavListWithoutNav).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NavListWithoutNav[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavListWithoutNav[key];
+    }
+  });
+});
+
+var _HorizontalWithoutDrawer = require("@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer");
+
+Object.keys(_HorizontalWithoutDrawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HorizontalWithoutDrawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HorizontalWithoutDrawer[key];
+    }
+  });
+});
+
+var _VerticalWithoutDrawer = require("@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer");
+
+Object.keys(_VerticalWithoutDrawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _VerticalWithoutDrawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _VerticalWithoutDrawer[key];
+    }
+  });
+});
+
+var _UsingNavListAuto = require("@digigov/ui/navigation/NavList/__stories__/UsingNavListAuto");
+
+Object.keys(_UsingNavListAuto).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _UsingNavListAuto[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _UsingNavListAuto[key];
+    }
+  });
+});
+
+var _HorizontalWithDrawer = require("@digigov/ui/navigation/NavList/__stories__/HorizontalWithDrawer");
+
+Object.keys(_HorizontalWithDrawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _HorizontalWithDrawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _HorizontalWithDrawer[key];
+    }
+  });
+});
+
+var _UsingHeaderButton = require("@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton");
+
+Object.keys(_UsingHeaderButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _UsingHeaderButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _UsingHeaderButton[key];
     }
   });
 });

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavListAuto = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useNavList2 = require("../hooks/useNavList");
+
+var _NavListItemAction = _interopRequireDefault(require("@digigov/react-core/NavListItemAction"));
+
+var _Link = require("@digigov/ui/navigation/Link");
+
+var _Nav = _interopRequireDefault(require("../Nav"));
+
+var _NavList = _interopRequireDefault(require("@digigov/react-core/NavList"));
+
+var _NavMenuContainer = _interopRequireDefault(require("@digigov/react-core/NavMenuContainer"));
+
+var _NavMenuContent = _interopRequireDefault(require("@digigov/react-core/NavMenuContent"));
+
+var _NavMenuContentList = _interopRequireDefault(require("@digigov/ui/navigation/NavList/NavMenuContentList"));
+
+var _NavMenuContentListItem = _interopRequireDefault(require("@digigov/react-core/NavMenuContentListItem"));
+
+var _NavMenuTitle = _interopRequireDefault(require("@digigov/react-core/NavMenuTitle"));
+
+var _excluded = ["layout", "links"];
+
+var NavListAuto = function NavListAuto(_ref) {
+  var layout = _ref.layout,
+      _ref$links = _ref.links,
+      links = _ref$links === void 0 ? [] : _ref$links,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useNavList = (0, _useNavList2.useNavList)(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/_react["default"].createElement(_Nav["default"], props, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: key
+    }, /*#__PURE__*/_react["default"].createElement(_NavListItemAction["default"], registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/_react["default"].createElement(_NavMenuContainer["default"], (0, _extends2["default"])({
+      layout: layout
+    }, registerNavItemMenu(item.name)), (item.subMenuHeading || item.label) && /*#__PURE__*/_react["default"].createElement(_NavMenuTitle["default"], null, item.subMenuHeading || item.label), /*#__PURE__*/_react["default"].createElement(_NavMenuContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NavMenuContentList["default"], {
+      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(_NavMenuContentListItem["default"], {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+
+exports.NavListAuto = NavListAuto;
+var _default = NavListAuto;
+exports["default"] = _default;

package/navigation/NavList/NavMenuContentList.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { NavMenuContentListProps } from '@digigov/react-core/NavMenuContentListBase';
+export * from '@digigov/react-core/NavMenuContentListBase';
+export declare const NavMenuContentList: React.FC<NavMenuContentListProps>;
+export default NavMenuContentList;

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

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
-  NavMenuContainerContentList: true
+  NavMenuContentList: true
 };
-exports["default"] = exports.NavMenuContainerContentList = void 0;
+exports["default"] = exports.NavMenuContentList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -18,16 +18,16 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _NavMenuContainerContentList = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerContentList"));
+var _NavMenuContentListBase = _interopRequireWildcard(require("@digigov/react-core/NavMenuContentListBase"));
 
-Object.keys(_NavMenuContainerContentList).forEach(function (key) {
+Object.keys(_NavMenuContentListBase).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavMenuContainerContentList[key]) return;
+  if (key in exports && exports[key] === _NavMenuContentListBase[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerContentList[key];
+      return _NavMenuContentListBase[key];
     }
   });
 });
@@ -72,10 +72,10 @@ var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
   }
 };
 
-var NavMenuContainerContentList = function NavMenuContainerContentList(_ref) {
+var NavMenuContentList = function NavMenuContentList(_ref) {
   var children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_NavMenuContainerContentList["default"], (0, _extends2["default"])({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(_NavMenuContentListBase["default"], (0, _extends2["default"])({}, props, {
     onKeyDown: function onKeyDown(event) {
       switch (event.key) {
         case 'ArrowDown':
@@ -95,6 +95,6 @@ var NavMenuContainerContentList = function NavMenuContainerContentList(_ref) {
   }), children);
 };
 
-exports.NavMenuContainerContentList = NavMenuContainerContentList;
-var _default = NavMenuContainerContentList;
+exports.NavMenuContentList = NavMenuContentList;
+var _default = NavMenuContentList;
 exports["default"] = _default;

package/navigation/NavList/__stories__/Default.js

@@ -11,99 +11,39 @@ exports["default"] = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _NavList = _interopRequireWildcard(require("@digigov/ui/navigation/NavList"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _Link = require("@digigov/ui/navigation/Link");
+var _NavList = require("@digigov/ui/navigation/NavList");
+
+var _NavLinksOneLevel = _interopRequireDefault(require("./NavLinksOneLevel.json"));
 
 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 Default = function Default() {
-  var layout = 'horizontal';
-  var border = false;
-
   var _useNavList = (0, _NavList.useNavList)(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
+      registerNavItem = _useNavList.registerNavItem;
 
-  var setRegisterButton = function setRegisterButton(name) {
-    return (0, _extends2["default"])({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return (0, _extends2["default"])({}, registerLink(name));
-  };
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      useActive = _useState2[0],
+      setUseActive = _useState2[1];
 
   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, {
-      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));
-    }))))));
+    "aria-orientation": "horizontal",
+    role: "menubar",
+    "aria-label": "navigation list"
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, null, _NavLinksOneLevel["default"].map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, (0, _extends2["default"])({}, registerNavItem(item), {
+      key: key,
+      active: item.name === useActive,
+      onClick: function onClick() {
+        return setUseActive(item.name);
+      }
+    }), item.label);
   })));
 };
 

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

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