@digigov/ui 1.0.0-480e3d97 → 1.0.0-55e4210c

package/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/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/app/Header/__stories__/WithHeaderNavigation.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -31,36 +29,30 @@ var _Dropdown = require("@digigov/ui/navigation/Dropdown");
 
 var _NavList = _interopRequireDefault(require("@digigov/ui/navigation/NavList/NavList"));
 
-var _NavListItem = _interopRequireDefault(require("@digigov/ui/navigation/NavList/NavListItem"));
-
-var _NavListItemLink = _interopRequireDefault(require("@digigov/ui/navigation/NavList/NavListItemLink"));
-
-var _List = _interopRequireWildcard(require("@digigov/ui/content/List"));
-
-var _Link = _interopRequireDefault(require("@digigov/ui/navigation/Link"));
-
-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 _NavList2 = require("@digigov/ui/navigation/NavList");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Top, null, /*#__PURE__*/_react["default"].createElement(_Header["default"], null, /*#__PURE__*/_react["default"].createElement(_HeaderContent["default"], null, /*#__PURE__*/_react["default"].createElement(_HeaderSection["default"], null, /*#__PURE__*/_react["default"].createElement(_GovGRLogo["default"], null), /*#__PURE__*/_react["default"].createElement(_HeaderTitle["default"], {
   href: "#"
-}, "\u0394\u03B7\u03BB\u03CE\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/_react["default"].createElement(_HeaderSection["default"], null, /*#__PURE__*/_react["default"].createElement(_HeaderNavMenuContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+}, "\u0394\u03B7\u03BB\u03CE\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/_react["default"].createElement(_HeaderNavMenuContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
   active: true
-}, /*#__PURE__*/_react["default"].createElement(_NavListItem["default"], null, /*#__PURE__*/_react["default"].createElement(_NavListItemLink["default"], null, "\u039C\u03B5\u03BD\u03BF\u03CD ", /*#__PURE__*/_react["default"].createElement(_icons.ArrowIcon, {
-  direction: "down"
-})))), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
+}, /*#__PURE__*/_react["default"].createElement(_NavList2.NavListItemAction, {
+  arrow: true
+}, "\u039C\u03B5\u03BD\u03BF\u03CD")), /*#__PURE__*/_react["default"].createElement(_Dropdown.Dropdown, {
   align: "right"
 }, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   variant: "link"
 }, "\u039C\u0391\u03A1\u0399\u039F\u03A3 \u039C\u0395\u039D\u0395\u039E\u0395\u03A3", /*#__PURE__*/_react["default"].createElement(_icons.MoreVertIcon, {
   size: "md"
-})), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_List["default"], {
-  margin: 0
-}, /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "\u03A1\u03C5\u03B8\u03BC\u03AF\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/_react["default"].createElement(_List.ListItem, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], null, "\u0388\u03BE\u03BF\u03B4\u03BF\u03C2")))))), /*#__PURE__*/_react["default"].createElement(_HeaderNavMenuContent["default"], null, /*#__PURE__*/_react["default"].createElement(_icons.BurgerIcon, {
+})), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList2.NavListItemAction, {
+  href: "#"
+}, "\u03A1\u03C5\u03B8\u03BC\u03AF\u03C3\u03B5\u03B9\u03C2"), /*#__PURE__*/_react["default"].createElement(_NavList2.NavListItemAction, {
+  href: "#"
+}, "\u0388\u03BE\u03BF\u03B4\u03BF\u03C2"))))), /*#__PURE__*/_react["default"].createElement(_icons.BurgerIcon, {
   smUpHidden: true,
   size: "sm"
-}))))));
+}))));
 
 var WithHeaderNavigation = function WithHeaderNavigation() {
   return _ref;

package/app/Header/__stories__/WithNavigation.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.WithNavigation = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _ui = require("@digigov/ui");
@@ -23,61 +21,31 @@ var _GovGRLogo = require("@digigov/ui/govgr/GovGRLogo");
 
 var _Basic = require("@digigov/ui/layouts/Basic");
 
-var _useNavList2 = require("@digigov/ui/navigation/NavList/hooks/useNavList");
-
-var _Nav = require("@digigov/ui/navigation/NavList/Nav");
-
-var _NavList = require("@digigov/ui/navigation/NavList/NavList");
-
-var _NavListItem = require("@digigov/ui/navigation/NavList/NavListItem");
-
 var _ref = /*#__PURE__*/_react["default"].createElement(_Header.Header, null, /*#__PURE__*/_react["default"].createElement(_HeaderContent.HeaderContent, null, /*#__PURE__*/_react["default"].createElement(_HeaderSection.HeaderSection, null, /*#__PURE__*/_react["default"].createElement(_GovGRLogo.GovGRLogo, {
   href: "#"
 }))));
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_ui.SectionBreak, {
-  visible: false
-});
-
 var WithNavigation = function WithNavigation() {
-  var _useNavList = (0, _useNavList2.useNavList)(),
-      registerButton = _useNavList.registerButton;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return (0, _extends2["default"])({}, registerButton(name));
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(_Basic.Top, null, _ref, /*#__PURE__*/_react["default"].createElement(_Nav.Nav, {
-    open: true
-  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, null, /*#__PURE__*/_react["default"].createElement(_NavListItem.NavListItem, {
-    link: {
+  return /*#__PURE__*/_react["default"].createElement(_Basic.Top, null, _ref, /*#__PURE__*/_react["default"].createElement(_ui.NavListAuto, {
+    links: [{
       name: 'home',
       label: 'Αρχική',
       href: '#home'
-    },
-    setRegisterButton: setRegisterButton
-  }), /*#__PURE__*/_react["default"].createElement(_NavListItem.NavListItem, {
-    link: {
+    }, {
       name: 'news',
       label: 'Νέα',
       href: '#news'
-    },
-    setRegisterButton: setRegisterButton
-  }), /*#__PURE__*/_react["default"].createElement(_NavListItem.NavListItem, {
-    link: {
+    }, {
       name: 'links',
       label: 'Σύνδεσμοι',
       href: '#links'
-    },
-    setRegisterButton: setRegisterButton
-  }), /*#__PURE__*/_react["default"].createElement(_NavListItem.NavListItem, {
-    link: {
+    }, {
       name: 'contact',
       label: 'Επικοινωνία',
       href: '#contact'
-    },
-    setRegisterButton: setRegisterButton
-  }), _ref2)));
+    }],
+    border: true
+  }));
 };
 
 exports.WithNavigation = WithNavigation;

package/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/app/ThemeOptions/index.js

@@ -275,10 +275,10 @@ var ThemeOptions = /*#__PURE__*/_react["default"].forwardRef(function ThemeOptio
       setSelectedHighlightLinks('highlight');
     },
     checked: selectedHighlightLinks === 'highlight'
-  }, "\u039D\u03B1\u03B9")), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, "\u039D\u03B1\u03B9")))), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     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["default"].createElement(_Button["default"], {
+  }, "\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["default"].createElement(_Button["default"], {
     onClick: handleOptions,
     disabled: !optionsHasChanged()
   }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));

package/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/content/Table/__stories__/WithFloatingScroll.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
 });
@@ -15,9 +17,11 @@ var _TableFloatingScroll = require("@digigov/ui/content/Table/TableFloatingScrol
 
 var _Dropdown = require("@digigov/ui/navigation/Dropdown");
 
-var _NavVertical = require("@digigov/ui/navigation/NavList/NavVertical");
+var _NavList = _interopRequireWildcard(require("@digigov/ui/navigation/NavList"));
+
+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); }
 
-var _NavVerticalItem = require("@digigov/ui/navigation/NavList/NavVerticalItem");
+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 labels = {
   name: 'Ονοματεπώνυμο',
@@ -62,9 +66,11 @@ var _ref2 = /*#__PURE__*/_react["default"].createElement(_Table.TableDataCell, n
   placement: "bottom"
 }, /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownButton, {
   variant: "link"
-}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, null, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2"), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_NavList["default"], {
+  layout: "vertical"
+}, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
   href: "#"
 }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")))));
 

package/content/Table/index.js

@@ -50,9 +50,7 @@ var _icons = require("@digigov/ui/icons");
 
 var _Dropdown = require("@digigov/ui/navigation/Dropdown");
 
-var _NavVertical = require("@digigov/ui/navigation/NavList/NavVertical");
-
-var _NavVerticalItem = require("@digigov/ui/navigation/NavList/NavVerticalItem");
+var _NavList = require("@digigov/ui/navigation/NavList");
 
 var _TableContainer = require("@digigov/react-core/TableContainer");
 
@@ -259,9 +257,12 @@ var TableSortLabel = /*#__PURE__*/_react["default"].forwardRef(function TableSor
     direction: 'down',
     size: "sm",
     variant: direction === -1 ? 'dark' : 'gray'
-  }))), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_NavVertical.NavVertical, null, /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+  }))), /*#__PURE__*/_react["default"].createElement(_Dropdown.DropdownContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
+    layout: "vertical"
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
     active: direction === 1,
     tabIndex: 0,
+    arrow: false,
     onClick: function onClick() {
       onSort(1);
       dropdownRef.current && (dropdownRef.current.open = false);
@@ -272,9 +273,10 @@ var TableSortLabel = /*#__PURE__*/_react["default"].forwardRef(function TableSor
         dropdownRef.current && (dropdownRef.current.open = false);
       }
     }
-  }, _ref2, labels.asc), /*#__PURE__*/_react["default"].createElement(_NavVerticalItem.NavVerticalItem, {
+  }, _ref2, labels.asc), /*#__PURE__*/_react["default"].createElement(_NavList.NavListItemAction, {
     active: direction === -1,
     tabIndex: 0,
+    arrow: false,
     onClick: function onClick() {
       onSort(-1);
       dropdownRef.current && (dropdownRef.current.open = false);

package/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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
 

package/es/form/Button/index.mdx

@@ -55,7 +55,7 @@ Any links within a button group will automatically align with the buttons.
 <Story packageName="@digigov/ui" component="form/Button" story="GroupingButtonsAndLinks.tsx" />
 
 Write button text in sentence case, describing the action it performs. For
-example:'
+example:
 
 - `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
 - `Sign in` to an account a user has already created
@@ -85,12 +85,12 @@ to do next.
 
 ## API Docs
 
-Read more about [how to use the React types](/docs/api/Button)
+Read more about [how to use the React types](/docs/api/Button).
 
 ## Accessibility
 
-You can read more about the accessibility patterns used in our Select
-implementation in the ARIA Authoring Practices Guide (APG) at
+You can read more about the accessibility patterns used in our Button
+implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
 
 ## API
 

package/es/form/Checkbox/index.mdx

@@ -47,6 +47,11 @@ This might make 2 related questions easier to answer by grouping them on the sam
 
 <Story packageName="@digigov/ui" component="form/Checkbox" story="ConditionalReveal.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Checkbox
+implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Checkbox" />

package/es/form/DateInputContainer/index.mdx

@@ -26,3 +26,8 @@ If you’re highlighting the whole date, style all the fields like this:
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
 <Story packageName="@digigov/ui" component="form/DateInputContainer"story="WithErrorMessageForSingleField.tsx" />
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="DateInputContainer" />