@digigov/ui 1.0.0-480e3d97 → 1.0.0-60addd4a

package/es/navigation/NavList/hooks/useTogglableNav.js

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

package/es/navigation/NavList/index.js

@@ -1,20 +1,19 @@
-export * from '@digigov/ui/navigation/NavList/NavListItem';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto';
-export * from '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto';
-export * from '@digigov/ui/navigation/NavList/Nav';
-export * from '@digigov/ui/navigation/NavList/NavList';
-export * from '@digigov/ui/navigation/NavList/NavListItemLink';
-export * from '@digigov/ui/navigation/NavList/NavListItemButton';
-export * from '@digigov/ui/navigation/NavList/NavMenu';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainer';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerTitle';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContent';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContentList';
-export * from '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem';
-export * from '@digigov/ui/navigation/NavList/NavVertical';
-export * from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList from '@digigov/react-core/NavList';
+export * from '@digigov/ui/navigation/NavList/NavListAuto';
+export * from '@digigov/ui/navigation/NavList/NavMenuContentList';
 export * from '@digigov/ui/navigation/NavList/types';
 export * from '@digigov/ui/navigation/NavList/hooks/useNavList';
-import NavList from '@digigov/ui/navigation/NavList/NavList';
+export * from '@digigov/react-core/Nav';
+export * from '@digigov/react-core/NavList';
+export * from '@digigov/react-core/NavMenuContainer';
+export * from '@digigov/react-core/NavMenuContent';
+export * from '@digigov/react-core/NavMenuContentListBase';
+export * from '@digigov/react-core/NavMenuContentListItem';
+export * from '@digigov/react-core/NavMenuTitle';
+export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemActionContainer';
+export * from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemButton';
+export * from '@digigov/react-core/NavListItemAction';
 export default NavList;

package/es/navigation/NavList/types.js

@@ -1,6 +1 @@
-export var isNavListItemLinkInterface = function isNavListItemLinkInterface(item) {
-  return item && 'href' in item;
-};
-export var isNavListItemSubMenuInterface = function isNavListItemSubMenuInterface(item) {
-  return item && 'subMenu' in item;
-};
+export {};

package/es/navigation/Pagination/__stories__/Default.js

@@ -6,9 +6,9 @@ import { Link } from '@digigov/ui/navigation/Link';
 import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/navigation/Pagination';
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
+  start: 21,
+  end: 30,
+  total: 90
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
@@ -34,67 +34,9 @@ var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
-}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  active: false
-}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "left"
-}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
-  currentPage: true
-}, "1"), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page2"
-}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page3"
-}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
-  variant: "dots"
-}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page7"
-}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page8"
-}, "8")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page9"
-}, "9")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "right"
-})))));
-
-var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
-  size: "lg"
-});
-
-var _ref5 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
-}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "left"
-}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page1"
-}, "1")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page3"
-}, "3")), /*#__PURE__*/React.createElement(PaginationListItem, {
-  variant: "dots"
-}), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page7"
-}, "7")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
-  href: "#page8"
-}, "8")), /*#__PURE__*/React.createElement(PaginationListItem, {
-  currentPage: true
-}, "9"), /*#__PURE__*/React.createElement(PaginationListItem, {
-  active: false
-}, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "right"
-})))));
-
-var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
-  size: "lg"
-});
-
-var _ref7 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
-  start: 1,
-  end: 10,
-  total: 15
+  start: 81,
+  end: 90,
+  total: 197
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
@@ -120,6 +62,6 @@ export var Default = function Default() {
     t: function t(str) {
       return str;
     }
-  }, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7);
+  }, _ref, _ref2, _ref3);
 };
 export default Default;

package/es/navigation/Pagination/index.mdx

@@ -9,8 +9,7 @@ import Pagination from '@digigov/ui/app/Pagination';
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="navigation/Pagination" story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination" story="Default.tsx"/>
 
 ## With inactive values
 

package/es/navigation/Tabs/index.mdx

@@ -13,6 +13,12 @@ import Tabs from '@digigov/ui/navigation/Tabs';
 
 <Story packageName="@digigov/ui" component="navigation/Tabs" story="Default.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Tabs
+implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) section.
+
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Tabs" />

package/es/registry.js

@@ -147,26 +147,8 @@ import * as _digigov_ui_navigation_NavList_hooks_useTogglableNav from '@digigov/
 import * as _digigov_ui_navigation_NavList from '@digigov/ui/navigation/NavList';
 import * as _digigov_ui_navigation_NavList_Nav from '@digigov/ui/navigation/NavList/Nav';
 import * as _digigov_ui_navigation_NavList_NavList from '@digigov/ui/navigation/NavList/NavList';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListBaseAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListBaseAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListContextAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemAnchorAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAnchorAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListItemButtonAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListItemButtonAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListMenuAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListMenuAuto';
-import * as _digigov_ui_navigation_NavList_NavListAuto_NavListSubMenuAuto from '@digigov/ui/navigation/NavList/NavListAuto/NavListSubMenuAuto';
-import * as _digigov_ui_navigation_NavList_NavListItem from '@digigov/ui/navigation/NavList/NavListItem';
-import * as _digigov_ui_navigation_NavList_NavListItemBase from '@digigov/ui/navigation/NavList/NavListItemBase';
-import * as _digigov_ui_navigation_NavList_NavListItemButton from '@digigov/ui/navigation/NavList/NavListItemButton';
-import * as _digigov_ui_navigation_NavList_NavListItemLink from '@digigov/ui/navigation/NavList/NavListItemLink';
-import * as _digigov_ui_navigation_NavList_NavMenu from '@digigov/ui/navigation/NavList/NavMenu';
-import * as _digigov_ui_navigation_NavList_NavMenuContainer from '@digigov/ui/navigation/NavList/NavMenuContainer';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContent from '@digigov/ui/navigation/NavList/NavMenuContainerContent';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContentList from '@digigov/ui/navigation/NavList/NavMenuContainerContentList';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerContentListItem from '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem';
-import * as _digigov_ui_navigation_NavList_NavMenuContainerTitle from '@digigov/ui/navigation/NavList/NavMenuContainerTitle';
-import * as _digigov_ui_navigation_NavList_NavVertical from '@digigov/ui/navigation/NavList/NavVertical';
-import * as _digigov_ui_navigation_NavList_NavVerticalItem from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import * as _digigov_ui_navigation_NavList_NavListAuto from '@digigov/ui/navigation/NavList/NavListAuto';
+import * as _digigov_ui_navigation_NavList_NavMenuContentList from '@digigov/ui/navigation/NavList/NavMenuContentList';
 import * as _digigov_ui_navigation_NavList_types from '@digigov/ui/navigation/NavList/types';
 import * as _digigov_ui_navigation_Pagination from '@digigov/ui/navigation/Pagination';
 import * as _digigov_ui_navigation_SkipLink from '@digigov/ui/navigation/SkipLink';
@@ -360,26 +342,8 @@ export default {
   '@digigov/ui/navigation/NavList': lazyImport(_digigov_ui_navigation_NavList),
   '@digigov/ui/navigation/NavList/Nav': lazyImport(_digigov_ui_navigation_NavList_Nav),
   '@digigov/ui/navigation/NavList/NavList': lazyImport(_digigov_ui_navigation_NavList_NavList),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListBaseAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListBaseAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListContextAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAnchorAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemAnchorAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListItemButtonAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListItemButtonAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListMenuAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListMenuAuto),
-  '@digigov/ui/navigation/NavList/NavListAuto/NavListSubMenuAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto_NavListSubMenuAuto),
-  '@digigov/ui/navigation/NavList/NavListItem': lazyImport(_digigov_ui_navigation_NavList_NavListItem),
-  '@digigov/ui/navigation/NavList/NavListItemBase': lazyImport(_digigov_ui_navigation_NavList_NavListItemBase),
-  '@digigov/ui/navigation/NavList/NavListItemButton': lazyImport(_digigov_ui_navigation_NavList_NavListItemButton),
-  '@digigov/ui/navigation/NavList/NavListItemLink': lazyImport(_digigov_ui_navigation_NavList_NavListItemLink),
-  '@digigov/ui/navigation/NavList/NavMenu': lazyImport(_digigov_ui_navigation_NavList_NavMenu),
-  '@digigov/ui/navigation/NavList/NavMenuContainer': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainer),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContent': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContent),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContentList': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContentList),
-  '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerContentListItem),
-  '@digigov/ui/navigation/NavList/NavMenuContainerTitle': lazyImport(_digigov_ui_navigation_NavList_NavMenuContainerTitle),
-  '@digigov/ui/navigation/NavList/NavVertical': lazyImport(_digigov_ui_navigation_NavList_NavVertical),
-  '@digigov/ui/navigation/NavList/NavVerticalItem': lazyImport(_digigov_ui_navigation_NavList_NavVerticalItem),
+  '@digigov/ui/navigation/NavList/NavListAuto': lazyImport(_digigov_ui_navigation_NavList_NavListAuto),
+  '@digigov/ui/navigation/NavList/NavMenuContentList': lazyImport(_digigov_ui_navigation_NavList_NavMenuContentList),
   '@digigov/ui/navigation/NavList/types': lazyImport(_digigov_ui_navigation_NavList_types),
   '@digigov/ui/navigation/Pagination': lazyImport(_digigov_ui_navigation_Pagination),
   '@digigov/ui/navigation/SkipLink': lazyImport(_digigov_ui_navigation_SkipLink),

package/es/typography/Hint/index.mdx

@@ -13,6 +13,8 @@ import Hint from '@digigov/ui/typography/Hint';
 
 ### Font sizes
 
+<Story packageName="@digigov/ui" component="typography/Hint" story="FontSizes.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Hint" />

package/es/typography/NormalText/index.mdx

@@ -23,6 +23,8 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/NormalText" story="FontWeight.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="NormalText" />

package/es/typography/Paragraph/index.mdx

@@ -27,6 +27,7 @@ import Paragraph from '@digigov/ui/typography/Paragraph';
 
 ### Font weight
 
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontWeight.tsx" />
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Paragraph" />

package/esm/app/Footer/Footer.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>footer>div>div>div>section:nth-child(1)>p>a:nth-child(1)"
+                "selector": "html>body>div:nth-child(5)>footer>div>div>section:nth-child(1)>p>a:nth-child(1)"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>footer>div>div>div>section:nth-child(1)>p>a:nth-child(1)"
+                "selector": "html>body>div:nth-child(5)>footer>div>div>section:nth-child(1)>p>a:nth-child(1)"
               }
             }
           ],

package/esm/app/Header/Header.stories.playwright.json

@@ -36,7 +36,7 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>div:nth-child(1)>details>summary"
+                "selector": "html>body>div:nth-child(5)>div>header>div>div:nth-child(2)>ul>li>button"
               }
             }
           ],

package/esm/app/Header/__stories__/WithHeaderNavigation.js

@@ -5,34 +5,34 @@ import HeaderNavMenuContent from '@digigov/ui/app/Header/HeaderNavMenuContent';
 import HeaderSection from '@digigov/ui/app/Header/HeaderSection';
 import HeaderTitle from '@digigov/ui/app/Header/HeaderTitle';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import { ArrowIcon } from '@digigov/ui/icons';
 import { BurgerIcon, MoreVertIcon } from '@digigov/ui/icons';
 import { Top } from '@digigov/ui/layouts/Basic';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
 import NavList from '@digigov/ui/navigation/NavList/NavList';
-import NavListItem from '@digigov/ui/navigation/NavList/NavListItem';
-import NavListItemLink from '@digigov/ui/navigation/NavList/NavListItemLink';
-import List, { ListItem } from '@digigov/ui/content/List';
-import Link from '@digigov/ui/navigation/Link';
+import { NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 var _ref = /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(GovGRLogo, null), /*#__PURE__*/React.createElement(HeaderTitle, {
   href: "#"
-}, "\u0394\u03B7\u03BB\u03CE\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(HeaderNavMenuContent, null, /*#__PURE__*/React.createElement(NavList, {
+}, "\u0394\u03B7\u03BB\u03CE\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(HeaderNavMenuContent, null, /*#__PURE__*/React.createElement(NavList, {
   active: true
-}, /*#__PURE__*/React.createElement(NavListItem, null, /*#__PURE__*/React.createElement(NavListItemLink, null, "\u039C\u03B5\u03BD\u03BF\u03CD ", /*#__PURE__*/React.createElement(ArrowIcon, {
-  direction: "down"
-})))), /*#__PURE__*/React.createElement(Dropdown, {
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  arrow: true
+}, "\u039C\u03B5\u03BD\u03BF\u03CD")), /*#__PURE__*/React.createElement(Dropdown, {
   align: "right"
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   variant: "link"
 }, "\u039C\u0391\u03A1\u0399\u039F\u03A3 \u039C\u0395\u039D\u0395\u039E\u0395\u03A3", /*#__PURE__*/React.createElement(MoreVertIcon, {
   size: "md"
-})), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(List, {
-  margin: 0
-}, /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u03A1\u03C5\u03B8\u03BC\u03AF\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(ListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0388\u03BE\u03BF\u03B4\u03BF\u03C2")))))), /*#__PURE__*/React.createElement(HeaderNavMenuContent, null, /*#__PURE__*/React.createElement(BurgerIcon, {
+})), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
+  href: "#"
+}, "\u03A1\u03C5\u03B8\u03BC\u03AF\u03C3\u03B5\u03B9\u03C2"), /*#__PURE__*/React.createElement(NavListItemAction, {
+  href: "#"
+}, "\u0388\u03BE\u03BF\u03B4\u03BF\u03C2"))))), /*#__PURE__*/React.createElement(BurgerIcon, {
   smUpHidden: true,
   size: "sm"
-}))))));
+}))));
 
 export var WithHeaderNavigation = function WithHeaderNavigation() {
   return _ref;

package/esm/app/Header/__stories__/WithNavigation.js

@@ -1,62 +1,35 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { SectionBreak } from '@digigov/ui';
+import { NavListAuto } from '@digigov/ui';
 import { Header } from '@digigov/ui/app/Header';
 import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
 import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Top } from '@digigov/ui/layouts/Basic';
-import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
-import { Nav } from '@digigov/ui/navigation/NavList/Nav';
-import { NavList } from '@digigov/ui/navigation/NavList/NavList';
-import { NavListItem } from '@digigov/ui/navigation/NavList/NavListItem';
 
 var _ref = /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(GovGRLogo, {
   href: "#"
 }))));
 
-var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
-  visible: false
-});
-
 export var WithNavigation = function WithNavigation() {
-  var _useNavList = useNavList(),
-      registerButton = _useNavList.registerButton;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return _extends({}, registerButton(name));
-  };
-
-  return /*#__PURE__*/React.createElement(Top, null, _ref, /*#__PURE__*/React.createElement(Nav, {
-    open: true
-  }, /*#__PURE__*/React.createElement(NavList, null, /*#__PURE__*/React.createElement(NavListItem, {
-    link: {
+  return /*#__PURE__*/React.createElement(Top, null, _ref, /*#__PURE__*/React.createElement(NavListAuto, {
+    links: [{
       name: 'home',
       label: 'Αρχική',
       href: '#home'
-    },
-    setRegisterButton: setRegisterButton
-  }), /*#__PURE__*/React.createElement(NavListItem, {
-    link: {
+    }, {
       name: 'news',
       label: 'Νέα',
       href: '#news'
-    },
-    setRegisterButton: setRegisterButton
-  }), /*#__PURE__*/React.createElement(NavListItem, {
-    link: {
+    }, {
       name: 'links',
       label: 'Σύνδεσμοι',
       href: '#links'
-    },
-    setRegisterButton: setRegisterButton
-  }), /*#__PURE__*/React.createElement(NavListItem, {
-    link: {
+    }, {
       name: 'contact',
       label: 'Επικοινωνία',
       href: '#contact'
-    },
-    setRegisterButton: setRegisterButton
-  }), _ref2)));
+    }],
+    border: true
+  }));
 };
 export default WithNavigation;

package/esm/app/Masthead/Masthead.stories.playwright.json

@@ -8,7 +8,7 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>section>div>div>main>a"
+                "selector": "html>body>div:nth-child(5)>section>div>main>a"
               }
             }
           ],

package/esm/app/ThemeOptions/index.js

@@ -244,10 +244,10 @@ export var ThemeOptions = /*#__PURE__*/React.forwardRef(function ThemeOptions(_r
       setSelectedHighlightLinks('highlight');
     },
     checked: selectedHighlightLinks === 'highlight'
-  }, "\u039D\u03B1\u03B9")), /*#__PURE__*/React.createElement(Button, {
+  }, "\u039D\u03B1\u03B9")))), /*#__PURE__*/React.createElement(Button, {
     onClick: resetOptions,
     variant: "link"
-  }, "\u0395\u03C0\u03B1\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC \u03CC\u03BB\u03C9\u03BD \u03C4\u03C9\u03BD \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03CE\u03BD"))), _ref7, /*#__PURE__*/React.createElement(Button, {
+  }, "\u0395\u03C0\u03B1\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC \u03CC\u03BB\u03C9\u03BD \u03C4\u03C9\u03BD \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03CE\u03BD"), _ref7, /*#__PURE__*/React.createElement(Button, {
     onClick: handleOptions,
     disabled: !optionsHasChanged()
   }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));

package/esm/content/Details/index.mdx

@@ -15,6 +15,11 @@ import Details from '@digigov/ui/content/Details';
 
 <Story packageName="@digigov/ui" component="content/Details" story="Default.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Details
+implementation in the ARIA Authoring Practices Guide (APG) at [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) section.
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Details" />

package/esm/content/Table/__stories__/WithFloatingScroll.js

@@ -2,8 +2,7 @@ import React from 'react';
 import { Table, TableHead, TableRow, TableBody, TableHeadCell, TableDataCell } from '@digigov/ui/content/Table';
 import { TableFloatingScroll } from '@digigov/ui/content/Table/TableFloatingScroll';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
 var labels = {
   name: 'Ονοματεπώνυμο',
   email: 'Email',
@@ -47,9 +46,11 @@ var _ref2 = /*#__PURE__*/React.createElement(TableDataCell, null, /*#__PURE__*/R
   placement: "bottom"
 }, /*#__PURE__*/React.createElement(DropdownButton, {
   variant: "link"
-}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   href: "#"
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))));
 

package/esm/content/Table/index.js

@@ -6,8 +6,7 @@ import Table from '@digigov/react-core/Table';
 import TableSortIconContainer from '@digigov/react-core/TableSortIconContainer';
 import { CaretIcon } from '@digigov/ui/icons';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 var _ref2 = /*#__PURE__*/React.createElement(CaretIcon, {
   direction: 'up',
@@ -56,9 +55,12 @@ export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabe
     direction: 'down',
     size: "sm",
     variant: direction === -1 ? 'dark' : 'gray'
-  }))), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavVertical, null, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  }))), /*#__PURE__*/React.createElement(DropdownContent, null, /*#__PURE__*/React.createElement(NavList, {
+    layout: "vertical"
+  }, /*#__PURE__*/React.createElement(NavListItemAction, {
     active: direction === 1,
     tabIndex: 0,
+    arrow: false,
     onClick: function onClick() {
       onSort(1);
       dropdownRef.current && (dropdownRef.current.open = false);
@@ -69,9 +71,10 @@ export var TableSortLabel = /*#__PURE__*/React.forwardRef(function TableSortLabe
         dropdownRef.current && (dropdownRef.current.open = false);
       }
     }
-  }, _ref2, labels.asc), /*#__PURE__*/React.createElement(NavVerticalItem, {
+  }, _ref2, labels.asc), /*#__PURE__*/React.createElement(NavListItemAction, {
     active: direction === -1,
     tabIndex: 0,
+    arrow: false,
     onClick: function onClick() {
       onSort(-1);
       dropdownRef.current && (dropdownRef.current.open = false);

package/esm/content/Table/index.mdx

@@ -69,7 +69,7 @@ The prop `color='primary'` or `color='secondary'` is only functional when Table
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Table
-implementation in the ARIA Authoring Practices Guide (APG) at
+implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
 
 ## API
 

package/esm/feedback/ServiceBadge/index.mdx

@@ -5,17 +5,21 @@ parent: docs/ui/component
 ---
 
 import ServiceBadge from '@digigov/ui/feedback/ServiceBadge';
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import Header, { HeaderContent, HeaderSection, HeaderTitle } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 
 ## Example
 
 <Header>
-  <GovGRLogo />
-  <HeaderTitle>
-    Service Name <ServiceBadge label="ALPHA" />
-  </HeaderTitle>
+  <HeaderContent>
+    <HeaderSection>
+      <GovGRLogo />
+      <HeaderTitle>Service Name </HeaderTitle>
+      <ServiceBadge label="ALPHA" />
+    </HeaderSection>
+  </HeaderContent>
 </Header>
+<br/>
 
 ## How to use