@digigov/ui 1.0.0-8ae63a77 → 1.0.0-eb2842b4

package/navigation/NavList/NavList.stories.playwright.json

@@ -7,14 +7,34 @@
           "actions": [
             {
               "name": "hover",
+              "args": {
+                "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": "FO0jt9D4koTE",
-          "title": "Hover Item"
-        },
+          "id": "2DykhuHWrXMe",
+          "title": "Open submenu"
+        }
+      ]
+    },
+    "digigov-ui-navigation-navlist--vertical-with-submenu": {
+      "actionSets": [
         {
           "actions": [
             {
@@ -24,7 +44,7 @@
               }
             }
           ],
-          "id": "pSAeXNWiklxX",
+          "id": "yTIrKHLeGZkx",
           "title": "Open submenu"
         }
       ]

package/navigation/NavList/NavListAuto/index.js

@@ -33,12 +33,10 @@ var _NavMenuContentListItem = _interopRequireDefault(require("@digigov/react-cor
 
 var _NavMenuTitle = _interopRequireDefault(require("@digigov/react-core/NavMenuTitle"));
 
-var _excluded = ["layout", "border", "fixed", "links"];
+var _excluded = ["layout", "links"];
 
 var NavListAuto = function NavListAuto(_ref) {
   var layout = _ref.layout,
-      border = _ref.border,
-      fixed = _ref.fixed,
       _ref$links = _ref.links,
       links = _ref$links === void 0 ? [] : _ref$links,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
@@ -47,22 +45,18 @@ var NavListAuto = function NavListAuto(_ref) {
       registerNavItemMenu = _useNavList.registerNavItemMenu,
       registerNavItem = _useNavList.registerNavItem;
 
-  return /*#__PURE__*/_react["default"].createElement(_Nav["default"], (0, _extends2["default"])({
-    open: true,
-    border: border,
-    fixed: fixed
-  }, props), /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_Nav["default"], props, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
     layout: layout
   }, links.map(function (item, key) {
-    var _item$menu, _item$menu2, _item$menu$links;
+    var _item$subMenu;
 
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: key
-    }, /*#__PURE__*/_react["default"].createElement(_NavListItemAction["default"], registerNavItem(item), item.label), item.menu && /*#__PURE__*/_react["default"].createElement(_NavMenuContainer["default"], (0, _extends2["default"])({
+    }, /*#__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$menu = item.menu) === null || _item$menu === void 0 ? void 0 : _item$menu.title) && /*#__PURE__*/_react["default"].createElement(_NavMenuTitle["default"], null, (_item$menu2 = item.menu) === null || _item$menu2 === void 0 ? void 0 : _item$menu2.title), /*#__PURE__*/_react["default"].createElement(_NavMenuContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NavMenuContentList["default"], {
+    }, 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$menu$links = item.menu.links) === null || _item$menu$links === void 0 ? void 0 : _item$menu$links.map(function (subMenu, menuIndex) {
+    }, (_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"

package/navigation/NavList/__stories__/Default.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,43 +11,38 @@ 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 _react = _interopRequireWildcard(require("react"));
 
 var _NavList = require("@digigov/ui/navigation/NavList");
 
-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 _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 Default = function Default() {
   var _useNavList = (0, _NavList.useNavList)(),
       registerNavItem = _useNavList.registerNavItem;
 
+  var _useState = (0, _react.useState)(""),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      useActive = _useState2[0],
+      setUseActive = _useState2[1];
+
   return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
-    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
-    }, registerNavItem(item), {
-      active: item === null || item === void 0 ? void 0 : item.active
+    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;

package/navigation/NavList/__stories__/HorizontalWithDrawer.js

@@ -0,0 +1,93 @@
+"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.HorizontalWithDrawer = 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 = require("@digigov/ui/navigation/NavList");
+
+var _Link = require("@digigov/ui/navigation/Link");
+
+var _NavLinksWithSubmenu = _interopRequireDefault(require("./NavLinksWithSubmenu.json"));
+
+var _Button = require("@digigov/ui/form/Button");
+
+var _BurgerIcon = _interopRequireDefault(require("@digigov/react-icons/BurgerIcon"));
+
+var _CloseButton = _interopRequireDefault(require("@digigov/react-core/CloseButton"));
+
+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 _ref = /*#__PURE__*/_react["default"].createElement(_BurgerIcon["default"], null);
+
+var HorizontalWithDrawer = function HorizontalWithDrawer() {
+  var layout = 'horizontal';
+  var drawer = 'mdDown';
+  var border = false;
+
+  var _useNavList = (0, _NavList.useNavList)(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    color: "secondary",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    mdUpHidden: true
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 ", _ref), /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
+    border: border,
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list",
+    open: open,
+    drawer: drawer
+  }, /*#__PURE__*/_react["default"].createElement(_CloseButton["default"], {
+    mdUpHidden: true,
+    onClick: function onClick() {
+      return setOpen(false);
+    }
+  }, "\u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF"), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: layout
+  }, _NavLinksWithSubmenu["default"].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.HorizontalWithDrawer = HorizontalWithDrawer;
+var _default = HorizontalWithDrawer;
+exports["default"] = _default;

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

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

package/navigation/NavList/__stories__/{WithSubMenu.js → HorizontalWithoutDrawer.js}

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithSubMenu = void 0;
+exports["default"] = exports.HorizontalWithoutDrawer = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -17,45 +17,13 @@ var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _Link = require("@digigov/ui/navigation/Link");
 
+var _NavLinksWithSubmenu = _interopRequireDefault(require("./NavLinksWithSubmenu.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 WithSubMenu = function WithSubMenu() {
+var HorizontalWithoutDrawer = function HorizontalWithoutDrawer() {
   var layout = 'horizontal';
   var border = false;
 
@@ -64,12 +32,12 @@ var WithSubMenu = function WithSubMenu() {
       registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
-    open: true,
     border: border,
-    "aria-orientation": layout
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
   }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
     layout: layout
-  }, links.map(function (item, key) {
+  }, _NavLinksWithSubmenu["default"].map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
@@ -91,6 +59,6 @@ var WithSubMenu = function WithSubMenu() {
   })));
 };
 
-exports.WithSubMenu = WithSubMenu;
-var _default = WithSubMenu;
+exports.HorizontalWithoutDrawer = HorizontalWithoutDrawer;
+var _default = HorizontalWithoutDrawer;
 exports["default"] = _default;

package/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/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/navigation/NavList/__stories__/NavListWithoutNav.d.ts

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

package/navigation/NavList/__stories__/NavListWithoutNav.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavListWithoutNav = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = require("@digigov/ui/navigation/NavList");
+
+var _NavLinksOneLevel = _interopRequireDefault(require("./NavLinksOneLevel.json"));
+
+var NavListWithoutNav = function NavListWithoutNav() {
+  var layout = 'vertical';
+
+  var _useNavList = (0, _NavList.useNavList)(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: layout
+  }, _NavLinksOneLevel["default"].map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, (0, _extends2["default"])({}, registerNavItem(item), {
+      key: key
+    }), item.label);
+  }));
+};
+
+exports.NavListWithoutNav = NavListWithoutNav;
+var _default = NavListWithoutNav;
+exports["default"] = _default;

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

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

package/navigation/NavList/__stories__/UsingHeaderButton.js

@@ -0,0 +1,98 @@
+"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.UsingHeaderButton = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Top = require("@digigov/ui/layouts/Basic/Top");
+
+var _Header = require("@digigov/ui/app/Header");
+
+var _GovGRLogo = require("@digigov/ui/govgr/GovGRLogo");
+
+var _Paragraph = require("@digigov/ui/typography/Paragraph");
+
+var _NavList = require("@digigov/ui/navigation/NavList");
+
+var _Link = require("@digigov/ui/navigation/Link");
+
+var _Button = require("@digigov/ui/form/Button");
+
+var _ArrowIcon = _interopRequireDefault(require("@digigov/react-icons/ArrowIcon"));
+
+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 = [];
+
+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["default"].createElement(_Header.HeaderSection, null, /*#__PURE__*/_react["default"].createElement(_GovGRLogo.GovGRLogo, {
+  href: "#"
+}), /*#__PURE__*/_react["default"].createElement(_Header.HeaderTitle, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1\u03C2"));
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContent, {
+  md: 12
+}, /*#__PURE__*/_react["default"].createElement(_Paragraph.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["default"].createElement(_NavList.NavMenuTitle, null, menuTitle || menuLabel);
+
+var UsingHeaderButton = function UsingHeaderButton() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_Top.Top, null, /*#__PURE__*/_react["default"].createElement(_Header.Header, null, /*#__PURE__*/_react["default"].createElement(_Header.HeaderContent, null, _ref, /*#__PURE__*/_react["default"].createElement(_Header.HeaderSection, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    variant: "link",
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  }, menuLabel, /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+    direction: open ? 'up' : "down"
+  }))))), /*#__PURE__*/_react["default"].createElement(_NavList.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["default"].createElement(_NavList.NavMenuContainer, {
+    active: open
+  }, _ref2, _ref3, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContentList, {
+    role: "menu"
+  }, links && links.map(function (item, menuIndex) {
+    return /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContentListItem, {
+      key: menuIndex,
+      role: "presentation"
+    }, (item === null || item === void 0 ? void 0 : item.href) && /*#__PURE__*/_react["default"].createElement(_Link.Link, {
+      role: "menuitem",
+      id: item.name,
+      href: item.href
+    }, item.label));
+  }))))));
+};
+
+exports.UsingHeaderButton = UsingHeaderButton;
+var _default = UsingHeaderButton;
+exports["default"] = _default;

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

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

package/navigation/NavList/__stories__/UsingNavListAuto.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.UsingNavListAuto = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = require("@digigov/ui/navigation/NavList");
+
+var _NavLinksWithSubmenu = _interopRequireDefault(require("./NavLinksWithSubmenu.json"));
+
+var _Button = require("@digigov/ui/form/Button");
+
+var _BurgerIcon = _interopRequireDefault(require("@digigov/react-icons/BurgerIcon"));
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_BurgerIcon["default"], null);
+
+var UsingNavListAuto = function UsingNavListAuto() {
+  var layout = 'horizontal';
+  var drawer = 'smDown';
+  var border = true;
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    color: "secondary",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    smUpHidden: true
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 ", _ref), /*#__PURE__*/_react["default"].createElement(_NavList.NavListAuto, {
+    layout: layout,
+    border: border,
+    drawer: drawer,
+    open: open,
+    links: _NavLinksWithSubmenu["default"],
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    "aria-label": "Nav list"
+  }));
+};
+
+exports.UsingNavListAuto = UsingNavListAuto;
+var _default = UsingNavListAuto;
+exports["default"] = _default;

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

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