@digigov/ui 0.30.0-navlist.alpha.3 → 0.30.1

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

@@ -1,5 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { NavList, NavListItem } from '@digigov/ui/core/NavList';
+import NavList, { isNavListItemLinkInterface, Nav, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle } from '@digigov/ui/core/NavList';
+import { useNavList } from '@digigov/ui/hooks/useNavList';
+import { Link } from '@digigov/ui/core';
 var links = [{
   name: 'Nav1',
   href: '#',
@@ -31,18 +34,47 @@ var links = [{
   label: 'Nav list item 3'
 }];
 export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavList, {
-    links: links,
-    "aria-label": "Nav list",
-    role: "menu"
-  }, links.map(function (link, key) {
-    return /*#__PURE__*/React.createElement(NavListItem, {
-      key: key,
-      name: link.name,
-      "aria-label": link.label,
-      role: "menuitem",
-      "aria-haspopup": link.subMenu ? 'true' : 'false'
-    });
+  var layout = 'vertical';
+
+  var _useNavList = useNavList(),
+      container = _useNavList.container,
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return _extends({}, register(name));
+  };
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    open: true,
+    layout: layout
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItem, {
+      layout: layout,
+      link: item,
+      setRegister: setRegister
+    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
+      layout: layout
+    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
+      layout: layout,
+      paddingLeft: 5,
+      paddingRight: 5
+    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
+      layout: layout
+    }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      layout: layout
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
+        key: menuIndex
+      }, /*#__PURE__*/React.createElement(Link, {
+        href: subMenu.href
+      }, subMenu.label));
+    }))))));
   })));
 };
 export default Default;

package/es/core/NavList/__stories__/NavHorizontalLayout.js

@@ -1,10 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { NavHorizontalListItem, NavHorizontal, NavHorizontalList, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle, useNavList, isNavListItemSubMenuInterface, isNavListItemLinkInterface } from '@digigov/ui/core/NavList';
-import { Link } from '@digigov/ui/core';
-var navItemArray = [{
+import NavList, { isNavListItemLinkInterface, Nav, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle } from '@digigov/ui/core/NavList';
+import { useNavList } from '@digigov/ui/hooks/useNavList';
+import Link from '@digigov/ui/core/Link';
+var links = [{
   name: 'Nav1',
-  label: 'Item list 1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
   subMenu: [{
     name: 'Nav2.1',
     href: '#',
@@ -21,9 +27,11 @@ var navItemArray = [{
 }, {
   name: 'Nav3',
   href: '#',
-  label: 'Item list 3'
+  label: 'Nav list item 3'
 }];
 export var NavHorizontalLayout = function NavHorizontalLayout() {
+  var layout = 'horizontal';
+
   var _useNavList = useNavList(),
       container = _useNavList.container,
       register = _useNavList.register;
@@ -32,26 +40,37 @@ export var NavHorizontalLayout = function NavHorizontalLayout() {
     return _extends({}, register(name));
   };
 
-  return /*#__PURE__*/React.createElement(NavHorizontal, {
-    open: true
-  }, /*#__PURE__*/React.createElement(NavHorizontalList, null, navItemArray.map(function (item, index) {
+  return /*#__PURE__*/React.createElement(Nav, {
+    open: true,
+    layout: layout
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: index
-    }, /*#__PURE__*/React.createElement(NavHorizontalListItem, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItem, {
+      layout: layout,
       link: item,
       setRegister: setRegister
-    }), /*#__PURE__*/React.createElement(NavMenu, container(item.name), /*#__PURE__*/React.createElement(NavMenuContainer, {
+    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
+      layout: layout
+    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
+      layout: layout,
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.name), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, null, isNavListItemSubMenuInterface(item) && (item === null || item === void 0 ? void 0 : (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
-      return /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
+    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
+      layout: layout
+    }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      layout: layout
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
         key: menuIndex
-      }, isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(Link, {
+      }, /*#__PURE__*/React.createElement(Link, {
         href: subMenu.href
       }, subMenu.label));
-    })))))));
+    }))))));
   })));
 };
 export default NavHorizontalLayout;

package/es/core/NavList/__stories__/NavListAutoExample.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { NavListAuto, NavListItemAuto } from '@digigov/ui/core/NavList';
+var links = [{
+  name: 'Nav1',
+  href: '#',
+  label: 'Nav list item 1'
+}, {
+  name: 'Nav2',
+  href: '#',
+  label: 'Nav list item 2',
+  subMenu: [{
+    name: 'Nav2.1',
+    href: '#',
+    label: 'Nav list item 2.1'
+  }, {
+    name: 'Nav2.2',
+    href: '#',
+    label: 'Nav list item 2.2'
+  }, {
+    name: 'Nav2.3',
+    href: '#',
+    label: 'Nav list item 2.3'
+  }, {
+    name: 'Nav2.4',
+    href: '#',
+    label: 'Nav list item 2.4'
+  }]
+}, {
+  name: 'Nav3',
+  href: '#',
+  label: 'Nav list item 3'
+}];
+export var NavListAutoExample = function NavListAutoExample() {
+  var layout = 'horizontal';
+  return /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    links: links,
+    "aria-label": "Nav list",
+    role: "menu"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAuto, {
+      key: key,
+      item: item,
+      role: "menuitem"
+    });
+  }));
+};
+export default NavListAutoExample;

package/es/core/NavList/__stories__/NavListEpathlaExample.js

@@ -0,0 +1,123 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { NavListAuto, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle, isNavListItemLinkInterface } from '@digigov/ui/core/NavList';
+import { useNavList } from '@digigov/ui/hooks/useNavList';
+import { Link } from '@digigov/ui/core';
+var LANG = 'el';
+var DEFAULT_HREF_FLAG = true;
+var epathlaLinks = [{
+  name: 'index',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG),
+  label: 'Αρχική'
+}, {
+  name: 'epathla',
+  label: 'Ε.Π.ΑΘΛ.Α',
+  subMenu: [{
+    name: 'epathla/aim',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/epathla/aim"),
+    label: 'Σκοπός'
+  }, {
+    name: 'epathla/structure',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/epathla/structure"),
+    label: 'Δομή'
+  }, {
+    name: 'epathla/members',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/epathla/members"),
+    label: 'Συγκρότηση'
+  }, {
+    name: 'epathla/wording-groups',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/epathla/working-groups"),
+    label: 'Ομάδες εργασίας'
+  }]
+}, {
+  name: 'sport-manipulation',
+  label: 'Χειραγώγηση Αγώνων',
+  subMenu: [{
+    name: 'sport-manipulation/macolin',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/macolin"),
+    label: 'Σύμβαση Macolin'
+  }, {
+    name: 'sport-manipulation/terminology',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/terminology"),
+    label: 'Ορολογία'
+  }, {
+    name: 'sport-manipulation/typology',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/typology"),
+    label: 'Τυπολογία'
+  }, {
+    name: 'sport-manipulation/law',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/law"),
+    label: 'Νομοθεσία'
+  }, {
+    name: 'sport-manipulation/documents',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/sport-manipulation/documents"),
+    label: 'Κείμενα αναφοράς διεθνών οργανισμών'
+  }]
+}, {
+  name: 'educational-material',
+  label: 'Εκπαιδευτικό υλικό',
+  subMenu: [{
+    name: 'educational-material/videos',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/educational-material/videos"),
+    label: 'Βίντεο'
+  }, {
+    name: 'educational-material/presentations',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/educational-material/presentations"),
+    label: 'Παρουσιάσεις'
+  }, {
+    name: 'educational-material/other-texts',
+    href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/educational-material/other-texts"),
+    label: 'Άλλα κείμενα'
+  }]
+}, {
+  name: 'news',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/news"),
+  label: 'Νέα'
+}, {
+  name: 'send-report',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/send-report"),
+  label: 'Προστάτεψε το άθλημά σου'
+}, {
+  name: 'links',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/links"),
+  label: 'Σύνδεσμοι'
+}, {
+  name: 'contact',
+  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/contact"),
+  label: 'Επικοινωνία'
+}];
+export var NavListEpathlaExample = function NavListEpathlaExample() {
+  var _useNavList = useNavList(),
+      container = _useNavList.container,
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return _extends({}, register(name));
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: 'horizontal',
+    links: epathlaLinks,
+    "aria-label": "Nav list",
+    role: "menu"
+  }, epathlaLinks.map(function (item, key) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItem, {
+      link: item,
+      setRegister: setRegister
+    }), /*#__PURE__*/React.createElement(NavMenu, container(item.name), /*#__PURE__*/React.createElement(NavMenuContainer, {
+      paddingLeft: 5,
+      paddingRight: 5
+    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, null, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
+        key: menuIndex
+      }, /*#__PURE__*/React.createElement(Link, {
+        href: subMenu.href
+      }, subMenu.label));
+    }))))));
+  })));
+};
+export default NavListEpathlaExample;

package/es/core/NavList/index.js

@@ -1,49 +1,13 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["register", "opened"];
-import { useCallback, useRef } from 'react';
-import NavList from '@digigov/ui/core/NavList/NavList';
-import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
-export var useNavList = function useNavList() {
-  var registeredContainers = useRef({});
-
-  var _useTogglableSections = useTogglableSections({
-    singleOpen: true,
-    reOpen: true,
-    toggleProperty: 'active',
-    onToggleProperty: 'onClick',
-    ariaNavigation: true
-  }),
-      registerListItem = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
-
-  var registerNavMenu = useCallback(function (key) {
-    return {
-      ref: function ref(el) {
-        if (el && !registeredContainers.current[el.id]) {
-          registeredContainers.current[el.id] = el;
-        }
-      },
-      active: opened[key],
-      id: key
-    };
-  }, [opened]);
-  return _extends({
-    register: registerListItem,
-    opened: opened,
-    container: registerNavMenu
-  }, rest);
-};
-export * from '@digigov/ui/core/NavList/NavList';
 export * from '@digigov/ui/core/NavList/NavListItem';
+export * from '@digigov/ui/core/NavList/NavListAuto';
+export * from '@digigov/ui/core/NavList/NavListItemAuto';
 export * from '@digigov/ui/core/NavList/NavListSubMenu';
 export * from '@digigov/ui/core/NavList/NavListContext';
-export * from '@digigov/ui/core/NavList/NavHorizontal';
-export * from '@digigov/ui/core/NavList/NavHorizontalList';
-export * from '@digigov/ui/core/NavList/NavHorizontalListItem';
-export * from '@digigov/ui/core/NavList/NavHorizontalListItemLink';
-export * from '@digigov/ui/core/NavList/NavHorizontalListItemButton';
+export * from '@digigov/ui/core/NavList/Nav';
+export * from '@digigov/ui/core/NavList/NavList';
+export * from '@digigov/ui/core/NavList/NavListItem';
+export * from '@digigov/ui/core/NavList/NavListItemLink';
+export * from '@digigov/ui/core/NavList/NavListItemButton';
 export * from '@digigov/ui/core/NavList/NavMenu';
 export * from '@digigov/ui/core/NavList/NavMenuContainer';
 export * from '@digigov/ui/core/NavList/NavMenuContainerTitle';
@@ -53,4 +17,5 @@ export * from '@digigov/ui/core/NavList/NavMenuContainerContentListItem';
 export * from '@digigov/ui/core/NavList/NavVertical';
 export * from '@digigov/ui/core/NavList/NavVerticalItem';
 export * from '@digigov/ui/core/NavList/types';
+import NavList from '@digigov/ui/core/NavList/NavList';
 export default NavList;