@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

package/esm/navigation/NavList/__stories__/UsingHeaderButton.js

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
+import { Header, HeaderSection, HeaderContent, HeaderTitle } from '@digigov/ui/app/Header';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { Nav, NavMenuContainer, NavMenuTitle, NavMenuContent, NavMenuContentList, NavMenuContentListItem } from '@digigov/ui/navigation/NavList';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Button } from '@digigov/ui/form/Button';
+import ArrowIcon from '@digigov/react-icons/ArrowIcon';
+var links = [];
+
+for (var index = 0; index < 14; index++) {
+  links.push({
+    name: "Nav".concat(index),
+    label: "\u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03C2 ".concat(index + 1),
+    href: "?q=item".concat(index + 1)
+  });
+}
+
+var menuLabel = 'Επιλογές';
+var menuTitle = 'Επιλογές της υπηρεσίας';
+
+var _ref = /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(GovGRLogo, {
+  href: "#"
+}), /*#__PURE__*/React.createElement(HeaderTitle, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1\u03C2"));
+
+var _ref2 = /*#__PURE__*/React.createElement(NavMenuContent, {
+  md: 12
+}, /*#__PURE__*/React.createElement(Paragraph, null, "\u0395\u03BE\u03B5\u03C1\u03B5\u03C5\u03BD\u03AE\u03C3\u03C4\u03B5 \u03C4\u03B9\u03C2 \u03B4\u03C5\u03BD\u03B1\u03C4\u03CC\u03C4\u03B7\u03C4\u03B5\u03C2 \u03C4\u03B7\u03C2 \u03A5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1\u03C2, \u03B5\u03C0\u03B9\u03BB\u03AD\u03B3\u03BF\u03BD\u03C4\u03B1\u03C2 \u03B1\u03C0\u03CC \u03C4\u03BF\u03C5\u03C2 \u03C0\u03B1\u03C1\u03B1\u03BA\u03AC\u03C4\u03C9 \u03C3\u03C5\u03BD\u03B4\u03AD\u03C3\u03BC\u03BF\u03C5\u03C2:"));
+
+var _ref3 = /*#__PURE__*/React.createElement(NavMenuTitle, null, menuTitle || menuLabel);
+
+export var UsingHeaderButton = function UsingHeaderButton() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Top, null, /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(HeaderContent, null, _ref, /*#__PURE__*/React.createElement(HeaderSection, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: function onClick() {
+      return setOpen(!open);
+    }
+  }, menuLabel, /*#__PURE__*/React.createElement(ArrowIcon, {
+    direction: open ? 'up' : "down"
+  }))))), /*#__PURE__*/React.createElement(Nav, {
+    open: open,
+    drawer: "smDown",
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    closeButtonLabel: "\u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF",
+    "aria-label": "navigation list"
+  }, /*#__PURE__*/React.createElement(NavMenuContainer, {
+    active: open
+  }, _ref2, _ref3, /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+    role: "menu"
+  }, links && links.map(function (item, menuIndex) {
+    return /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+      key: menuIndex,
+      role: "presentation"
+    }, (item === null || item === void 0 ? void 0 : item.href) && /*#__PURE__*/React.createElement(Link, {
+      role: "menuitem",
+      id: item.name,
+      href: item.href
+    }, item.label));
+  }))))));
+};
+export default UsingHeaderButton;

package/esm/navigation/NavList/__stories__/UsingNavListAuto.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { NavListAuto } from '@digigov/ui/navigation/NavList';
+import links from './NavLinksWithSubmenu.json';
+import { Button } from '@digigov/ui/form/Button';
+import BurgerIcon from '@digigov/react-icons/BurgerIcon';
+
+var _ref = /*#__PURE__*/React.createElement(BurgerIcon, null);
+
+export var UsingNavListAuto = function UsingNavListAuto() {
+  var layout = 'horizontal';
+  var drawer = 'smDown';
+  var border = true;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      open = _React$useState2[0],
+      setOpen = _React$useState2[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    color: "secondary",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    smUpHidden: true
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AD\u03C2 ", _ref), /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border,
+    drawer: drawer,
+    open: open,
+    links: links,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    "aria-label": "Nav list"
+  }));
+};
+export default UsingNavListAuto;

package/esm/navigation/NavList/__stories__/Vertical.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { Nav, NavList, NavListItemAction, useNavList } from '@digigov/ui/navigation/NavList';
+import links from './NavLinksOneLevel.json';
+export var Vertical = function Vertical() {
+  var layout = 'vertical';
+
+  var _useNavList = useNavList(),
+      registerNavItem = _useNavList.registerNavItem;
+
+  var _useState = useState(""),
+      _useState2 = _slicedToArray(_useState, 2),
+      useActive = _useState2[0],
+      setUseActive = _useState2[1];
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAction, _extends({}, registerNavItem(item), {
+      key: key,
+      active: item.name === useActive,
+      onClick: function onClick() {
+        return setUseActive(item.name);
+      }
+    }), item.label);
+  })));
+};
+export default Vertical;

package/esm/navigation/NavList/__stories__/VerticalWithoutDrawer.js

@@ -0,0 +1,44 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import Link from '@digigov/ui/navigation/Link';
+import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle } from '@digigov/ui/navigation/NavList';
+import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
+import links from './NavLinksWithSubmenu.json';
+export var VerticalWithoutDrawer = function VerticalWithoutDrawer() {
+  var layout = 'vertical';
+  var border = false;
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, {
+    border: border,
+    "aria-orientation": layout || 'horizontal',
+    "aria-label": "navigation list"
+  }, /*#__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(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout,
+      paddingLeft: 5,
+      paddingRight: 5
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+export default VerticalWithoutDrawer;

package/esm/navigation/NavList/hooks/useNavList.js

@@ -19,7 +19,7 @@ export var useNavList = function useNavList() {
       opened = _useTogglableNav.opened,
       rest = _objectWithoutProperties(_useTogglableNav, _excluded);
 
-  var container = useCallback(function (key) {
+  var registerNavItemMenu = useCallback(function (key) {
     return {
       ref: function ref(el) {
         if (el && !registeredContainers.current[el.id]) {
@@ -34,6 +34,6 @@ export var useNavList = function useNavList() {
     registerButton: registerButton,
     registerLink: registerLink,
     opened: opened,
-    container: container
+    registerNavItemMenu: registerNavItemMenu
   }, rest);
 };

package/esm/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/esm/navigation/NavList/index.js

@@ -1,20 +1,17 @@
-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/NavListItemActionContainer';
+export * from '@digigov/react-core/NavListItemAction';
+export * from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemButton';
 export default NavList;

package/esm/navigation/NavList/index.mdx

@@ -9,21 +9,19 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
 
 ## How to use
 
+### Horizontal NavList
+
+<Story packageName="@digigov/ui" component="navigation/NavList" story="Default.tsx" />
+
 ### Vertical NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/NavList" story="Vertical.tsx" />
 
-### Horizontal NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="NavVerticalLayout.tsx"
-/>
+### NavListAuto
+
+<Story packageName="@digigov/ui" component="navigation/NavList" story="UsingNavListAuto.tsx" />
+
 
 ## Accessibility
 

package/esm/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/esm/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, {
-  inactive: true
-}, /*#__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, {
-  inactive: true
-}, /*#__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/esm/navigation/Pagination/__stories__/PaginationSmall.js

@@ -10,7 +10,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   end: 10,
   total: 15
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }))), /*#__PURE__*/React.createElement(PaginationListItem, {

package/esm/navigation/Pagination/__stories__/PaginationWithSmallFont.js

@@ -7,7 +7,7 @@ import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from
 import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, {
-  fontSize: "sm"
+  size: "sm"
 }, /*#__PURE__*/React.createElement(PaginationLabel, {
   start: 1,
   end: 10,

package/esm/navigation/Pagination/__stories__/WithInactiveValues.js

@@ -10,7 +10,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   end: 20,
   total: 10000
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  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, {
@@ -54,7 +54,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
 }, "8")), /*#__PURE__*/React.createElement(PaginationListItem, {
   currentPage: true
 }, "9"), /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "right"
 })))));

package/esm/navigation/Pagination/index.mdx

@@ -9,27 +9,19 @@ 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
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="WithInactiveValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination" story="WithInactiveValues.tsx" />
+
+## With small fonts
+
+<Story packageName="@digigov/ui" component="navigation/Pagination"story="PaginationWithSmallFont.tsx" />
 
 ## With results per page
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="WithResultsPerPage.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination"story="WithResultsPerPage.tsx" />
 
 ## API
 

package/esm/navigation/SkipLink/SkipLink.stories.js

@@ -0,0 +1,8 @@
+import SkipLink from '@digigov/ui/navigation/SkipLink';
+export default {
+  title: 'Digigov UI/navigation/SkipLink',
+  description: 'Use the skip link component to help keyboard-only users skip to the main content on a page.',
+  component: SkipLink,
+  displayName: 'SkipLink'
+};
+export * from '@digigov/ui/navigation/SkipLink/__stories__/Default';

package/esm/navigation/SkipLink/__stories__/Default.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SkipLink } from '@digigov/ui/navigation/SkipLink';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, null, "\u0393\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03BC\u03C6\u03B1\u03BD\u03B9\u03C3\u03C4\u03B5\u03AF \u03BF \u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03C2, \u03C0\u03B5\u03C1\u03B9\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B5 \u03C4\u03BF \u03BA\u03BF\u03C5\u03BC\u03C0\u03AF tab \u03AE \u03BA\u03AC\u03BD\u03BF\u03BD\u03C4\u03B1\u03C2 \u03BA\u03BB\u03B9\u03BA \u03C3\u03C4\u03BF \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03BA\u03B1\u03B9 \u03BC\u03B5\u03C4\u03AC \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03BF\u03C5\u03BC\u03C0\u03AF tab.");
+
+var _ref2 = /*#__PURE__*/React.createElement(SkipLink, null, "\u039C\u03B5\u03C4\u03AC\u03B2\u03B1\u03C3\u03B7 \u03C3\u03C4\u03BF \u03B2\u03B1\u03C3\u03B9\u03BA\u03CC \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);
+};
+export default Default;

package/esm/navigation/Tabs/Tabs.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             }
           ],

package/esm/navigation/Tabs/__stories__/Default.js

@@ -1,29 +1,44 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/content/SummaryList';
 import { Link } from '@digigov/ui/navigation/Link';
-import { Tabs, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/navigation/Tabs';
+import { Tabs, TabsHeading, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/navigation/Tabs';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Heading, {
+var _ref = /*#__PURE__*/React.createElement(TabsHeading, {
+  size: "md"
+}, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1");
+
+var _ref2 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
-var _ref2 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, {
+var _ref3 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
   href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
+
+var _ref4 = /*#__PURE__*/React.createElement(Heading, {
+  size: "md",
+  element: "h3"
+}, "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2");
 
-var _ref3 = /*#__PURE__*/React.createElement(Heading, {
+var _ref5 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
-}, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
+}, "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC");
 
 export function Default() {
   var _useTabs = useTabs(),
       register = _useTabs.register,
+      opened = _useTabs.opened,
       panel = _useTabs.panel;
 
-  return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref, _ref2), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref3, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
+  return /*#__PURE__*/React.createElement(Tabs, null, _ref, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, _extends({}, register('citizen'), {
+    open: Object.keys(opened).length === 0 || opened['citizen']
+  }), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('cases'), "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2"), /*#__PURE__*/React.createElement(TabsListItem, register('history'), "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC")), /*#__PURE__*/React.createElement(TabsPanel, _extends({}, panel('citizen'), {
+    active: Object.keys(opened).length === 0 || opened['citizen']
+  }), _ref2, _ref3), /*#__PURE__*/React.createElement(TabsPanel, panel('cases'), _ref4, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"), /*#__PURE__*/React.createElement(TabsPanel, panel('history'), _ref5, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03B9\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03BF\u03CD"));
 }
 export default Default;

package/esm/navigation/Tabs/index.js

@@ -19,7 +19,7 @@ export var useTabs = function useTabs() {
 
   var _useTogglableTab = useTogglableTab({
     singleOpen: true,
-    toggleProperty: 'selected',
+    toggleProperty: 'open',
     onToggleProperty: 'onClick',
     firstOpen: true,
     ariaNavigation: true,