@digigov/ui 0.30.2 → 0.31.0

package/core/NavList/NavListAuto/NavListSubMenuAuto.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { NavListLayout } from '@digigov/ui/core/NavList/types';
+export interface NavListSubMenuAutoProps {
+    items?: any[];
+    open?: boolean;
+    layout?: NavListLayout;
+}
+export declare const NavListSubMenuAuto: React.FC<NavListSubMenuAutoProps>;
+export default NavListSubMenuAuto;

package/core/NavList/NavListAuto/NavListSubMenuAuto.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavListSubMenuAuto = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Nav = require("@digigov/ui/core/NavList/Nav");
+
+var _NavList = require("@digigov/ui/core/NavList/NavList");
+
+var _NavListItemAuto = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListAuto/NavListItemAuto"));
+
+var _excluded = ["items", "open", "layout"];
+
+var NavListSubMenuAuto = function NavListSubMenuAuto(_ref) {
+  var items = _ref.items,
+      open = _ref.open,
+      layout = _ref.layout,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return open ? /*#__PURE__*/_react["default"].createElement(_Nav.Nav, (0, _extends2["default"])({
+    hidden: !open,
+    layout: layout
+  }, props, {
+    "aria-orientation": layout
+  }), /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: layout
+  }, items === null || items === void 0 ? void 0 : items.map(function (subMenuItem, index) {
+    return /*#__PURE__*/_react["default"].createElement(_NavListItemAuto["default"], {
+      key: index,
+      item: subMenuItem
+    });
+  }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null);
+};
+
+exports.NavListSubMenuAuto = NavListSubMenuAuto;
+var _default = NavListSubMenuAuto;
+exports["default"] = _default;

package/core/NavList/NavListItem.js

@@ -21,22 +21,23 @@ var _NavListItemLink = require("@digigov/ui/core/NavList/NavListItemLink");
 
 var _types = require("@digigov/ui/core/NavList/types");
 
-var _excluded = ["link", "layout", "setRegister", "active", "children"];
+var _excluded = ["link", "layout", "setRegisterButton", "setRegisterLink", "active", "children"];
 
 var NavListItem = function NavListItem(_ref) {
   var link = _ref.link,
       layout = _ref.layout,
-      setRegister = _ref.setRegister,
+      setRegisterButton = _ref.setRegisterButton,
+      setRegisterLink = _ref.setRegisterLink,
       active = _ref.active,
       children = _ref.children,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_NavListItem["default"], (0, _extends2["default"])({
     layout: layout
-  }, props), children ? children : (0, _types.isNavListItemSubMenuInterface)(link) && link !== null && link !== void 0 && link.subMenu && setRegister ? /*#__PURE__*/_react["default"].createElement(_NavListItemButton["default"], setRegister(link.name), link === null || link === void 0 ? void 0 : link.label) : (0, _types.isNavListItemLinkInterface)(link) && /*#__PURE__*/_react["default"].createElement(_NavListItemLink.NavListItemLink, (0, _extends2["default"])({
+  }, props), children ? children : (0, _types.isNavListItemSubMenuInterface)(link) && link !== null && link !== void 0 && link.subMenu ? /*#__PURE__*/_react["default"].createElement(_NavListItemButton["default"], setRegisterButton && setRegisterButton(link.name), link === null || link === void 0 ? void 0 : link.label) : (0, _types.isNavListItemLinkInterface)(link) && /*#__PURE__*/_react["default"].createElement(_NavListItemLink.NavListItemLink, (0, _extends2["default"])({
     href: link === null || link === void 0 ? void 0 : link.href
-  }, props, {
+  }, setRegisterLink && setRegisterLink(link.name), {
     active: active
-  }), link === null || link === void 0 ? void 0 : link.label));
+  }, props), link === null || link === void 0 ? void 0 : link.label));
 };
 
 exports.NavListItem = NavListItem;

package/core/NavList/NavListItemBase.d.ts

@@ -5,7 +5,7 @@ export interface NavListItemBaseProps {
         active: boolean;
         id: string;
     };
-    setRegister?: (name: string) => any;
+    setRegisterButton?: (name: string) => any;
     children?: React.ReactNode;
     item?: any;
     layout?: NavListLayout;

package/core/NavList/NavListItemBase.js

@@ -31,13 +31,13 @@ var _NavMenuContainerContentList = _interopRequireDefault(require("@digigov/ui/c
 
 var _NavMenuContainerContentListItem = _interopRequireDefault(require("@digigov/ui/core/NavList/NavMenuContainerContentListItem"));
 
-var _excluded = ["container", "setRegister", "children", "item", "layout", "role"];
+var _excluded = ["container", "setRegisterButton", "children", "item", "layout", "role"];
 
 var NavListItemBase = function NavListItemBase(_ref) {
   var _item$subMenu;
 
   var container = _ref.container,
-      setRegister = _ref.setRegister,
+      setRegisterButton = _ref.setRegisterButton,
       children = _ref.children,
       item = _ref.item,
       _ref$layout = _ref.layout,
@@ -47,7 +47,7 @@ var NavListItemBase = function NavListItemBase(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavListItem["default"], (0, _extends2["default"])({
     layout: layout,
     link: item,
-    setRegister: setRegister,
+    setRegisterButton: setRegisterButton,
     role: "menuitem"
   }, props)), /*#__PURE__*/_react["default"].createElement(_NavMenu["default"], (0, _extends2["default"])({
     layout: layout

package/core/NavList/NavMenuContainerContentList.d.ts

@@ -1,3 +1,5 @@
-import NavMenuContainerContentList from '@digigov/react-core/NavMenuContainerContentList';
+import React from 'react';
+import { NavMenuContainerContentListProps } from '@digigov/react-core/NavMenuContainerContentList';
 export * from '@digigov/react-core/NavMenuContainerContentList';
+export declare const NavMenuContainerContentList: React.FC<NavMenuContainerContentListProps>;
 export default NavMenuContainerContentList;

package/core/NavList/NavMenuContainerContentList.js

@@ -1,12 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
-exports["default"] = void 0;
+var _exportNames = {
+  NavMenuContainerContentList: true
+};
+exports["default"] = exports.NavMenuContainerContentList = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
 
 var _NavMenuContainerContentList = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerContentList"));
 
@@ -21,10 +31,73 @@ Object.keys(_NavMenuContainerContentList).forEach(function (key) {
     }
   });
 });
+var _excluded = ["layout", "children"];
 
 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 = _NavMenuContainerContentList["default"];
+var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
+  var _document$activeEleme;
+
+  e.preventDefault();
+  var id = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id;
+  var menuItems = Array.from(e.currentTarget.querySelectorAll("[role=menuitem]"));
+  var currentItem = menuItems.findIndex(function (x) {
+    var _document$activeEleme2;
+
+    return x.getAttribute('id') === ((_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.id);
+  });
+
+  if (currentItem + nextItemIndex > -1 && currentItem + nextItemIndex < menuItems.length) {
+    var _menuItems;
+
+    (_menuItems = menuItems[currentItem + nextItemIndex]) === null || _menuItems === void 0 ? void 0 : _menuItems.focus();
+  } else {
+    var menuElement = Array.from(document.querySelectorAll("[aria-controls]"));
+
+    var _currentItem = menuElement.findIndex(function (x) {
+      return id === null || id === void 0 ? void 0 : id.includes(x.getAttribute('aria-controls') || '');
+    });
+
+    if (nextItemIndex > 0) {
+      var _menuElement;
+
+      (_menuElement = menuElement[_currentItem + nextItemIndex]) === null || _menuElement === void 0 ? void 0 : _menuElement.focus();
+    } else {
+      var _menuElement$_current;
+
+      (_menuElement$_current = menuElement[_currentItem]) === null || _menuElement$_current === void 0 ? void 0 : _menuElement$_current.focus();
+    }
+  }
+};
+
+var NavMenuContainerContentList = function NavMenuContainerContentList(_ref) {
+  var layout = _ref.layout,
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_NavMenuContainerContentList["default"], (0, _extends2["default"])({
+    layout: layout
+  }, props, {
+    onKeyDown: function onKeyDown(event) {
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowRight':
+          focusNavListItem(event, 1);
+          break;
+
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          focusNavListItem(event, -1);
+          break;
+
+        default:
+          break;
+      }
+    }
+  }), children);
+};
+
+exports.NavMenuContainerContentList = NavMenuContainerContentList;
+var _default = NavMenuContainerContentList;
 exports["default"] = _default;

package/core/NavList/__stories__/Default.js

@@ -56,18 +56,26 @@ var links = [{
 
 var Default = function Default() {
   var layout = 'vertical';
+  var border = false;
 
   var _useNavList = (0, _useNavList2.useNavList)(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return (0, _extends2["default"])({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return (0, _extends2["default"])({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return (0, _extends2["default"])({}, registerLink(name));
   };
 
   return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
     open: true,
-    layout: layout
+    layout: layout,
+    border: border,
+    "aria-orientation": layout
   }, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
     layout: layout
   }, links.map(function (item, key) {
@@ -78,7 +86,8 @@ var Default = function Default() {
     }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
       layout: layout,
       link: item,
-      setRegister: setRegister
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
     }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, (0, _extends2["default"])({
       layout: layout
     }, container(item.name)), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
@@ -88,11 +97,15 @@ var Default = function Default() {
     }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, {
       layout: layout
     }, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, {
+      role: "menu",
       layout: layout
     }, (_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
+        key: menuIndex,
+        role: "presentation"
       }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
+        role: "menuitem",
+        id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/core/NavList/__stories__/NavHorizontalLayout.js

@@ -52,18 +52,25 @@ var links = [{
 
 var NavHorizontalLayout = function NavHorizontalLayout() {
   var layout = 'horizontal';
+  var border = true;
 
   var _useNavList = (0, _useNavList2.useNavList)(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return (0, _extends2["default"])({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return (0, _extends2["default"])({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return (0, _extends2["default"])({}, registerLink(name));
   };
 
   return /*#__PURE__*/_react["default"].createElement(_NavList.Nav, {
     open: true,
-    layout: layout
+    layout: layout,
+    border: border
   }, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
     layout: layout
   }, links.map(function (item, key) {
@@ -74,7 +81,8 @@ var NavHorizontalLayout = function NavHorizontalLayout() {
     }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
       layout: layout,
       link: item,
-      setRegister: setRegister
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
     }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, (0, _extends2["default"])({
       layout: layout
     }, container(item.name)), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
@@ -84,11 +92,15 @@ var NavHorizontalLayout = function NavHorizontalLayout() {
     }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, {
       layout: layout
     }, item.label), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, {
+      role: "menu",
       layout: layout
     }, (_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
       }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+        role: "menuitem",
+        id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/core/NavList/__stories__/NavListEpathlaExample.js

@@ -21,7 +21,7 @@ var LANG = 'el';
 var DEFAULT_HREF_FLAG = true;
 var epathlaLinks = [{
   name: 'index',
-  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG),
+  href: DEFAULT_HREF_FLAG ? '#index' : "/".concat(LANG),
   label: 'Αρχική'
 }, {
   name: 'epathla',
@@ -85,7 +85,7 @@ var epathlaLinks = [{
   }]
 }, {
   name: 'news',
-  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/news"),
+  href: DEFAULT_HREF_FLAG ? '#news' : "/".concat(LANG, "/news"),
   label: 'Νέα'
 }, {
   name: 'send-report',
@@ -104,32 +104,44 @@ var epathlaLinks = [{
 var NavListEpathlaExample = function NavListEpathlaExample() {
   var _useNavList = (0, _useNavList2.useNavList)(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return (0, _extends2["default"])({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return (0, _extends2["default"])({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return (0, _extends2["default"])({}, registerLink(name));
   };
 
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavListAuto, {
     layout: 'horizontal',
     links: epathlaLinks,
-    "aria-label": "Nav list",
-    role: "menu"
+    "aria-label": "Nav list"
   }, epathlaLinks.map(function (item, key) {
-    var _item$subMenu;
+    var _container, _item$subMenu;
 
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
       key: key
     }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItem, {
       link: item,
-      setRegister: setRegister
-    }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, container(item.name), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
+    }), (item === null || item === void 0 ? void 0 : item.subMenu) && /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, (0, _extends2["default"])({}, container(item.name), {
+      "aria-expanded": (_container = container(item.name)) === null || _container === void 0 ? void 0 : _container.active
+    }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
       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, null, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+    }, /*#__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
+        key: menuIndex,
+        role: "presentation"
       }, /*#__PURE__*/_react["default"].createElement(_core.Link, {
+        role: "menuitem",
+        id: "".concat(item.name, "-").concat(menuIndex),
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/core/NavList/__stories__/NavListHorizontalAutoExample.d.ts

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

package/core/NavList/__stories__/NavListHorizontalAutoExample.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavListHorizontalAutoExample = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _NavList = require("@digigov/ui/core/NavList");
+
+var _NavListItemAuto = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListAuto/NavListItemAuto"));
+
+var links = [{
+  name: 'Nav1',
+  label: 'Nav list item 1',
+  href: '#'
+}, {
+  name: 'Nav2',
+  label: 'Nav list item 2',
+  menu: {
+    title: 'This is the first Menu',
+    links: [{
+      name: 'Nav2.1',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.2',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.3',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.4',
+      label: 'link navigation',
+      href: '#'
+    }]
+  }
+}, {
+  name: 'Nav3',
+  label: 'Nav list item 3',
+  href: '#'
+}];
+
+var NavListHorizontalAutoExample = function NavListHorizontalAutoExample() {
+  var layout = 'horizontal';
+  var border = true;
+  return /*#__PURE__*/_react["default"].createElement(_NavList.NavListAuto, {
+    layout: layout,
+    border: border,
+    links: links,
+    "aria-label": "Nav list"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement(_NavListItemAuto["default"], {
+      key: key,
+      item: item
+    });
+  }));
+};
+
+exports.NavListHorizontalAutoExample = NavListHorizontalAutoExample;
+var _default = NavListHorizontalAutoExample;
+exports["default"] = _default;

package/core/NavList/__stories__/NavListSecondaryAutoExample.d.ts

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