@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-871b6be5

package/navigation/Pagination/__stories__/Default.js

@@ -20,9 +20,9 @@ var _Link = require("@digigov/ui/navigation/Link");
 var _Pagination = require("@digigov/ui/navigation/Pagination");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
+  start: 21,
+  end: 30,
+  total: 90
 }), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationList, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, /*#__PURE__*/_react["default"].createElement(_icons.ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
@@ -48,67 +48,9 @@ var _ref2 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBr
 });
 
 var _ref3 = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
-}), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationList, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
-  inactive: true
-}, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, /*#__PURE__*/_react["default"].createElement(_icons.ArrowIcon, {
-  direction: "left"
-}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
-  currentPage: true
-}, "1"), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page2"
-}, "2")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page3"
-}, "3")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
-  variant: "dots"
-}), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page7"
-}, "7")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page8"
-}, "8")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page9"
-}, "9")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/_react["default"].createElement(_icons.ArrowIcon, {
-  direction: "right"
-})))));
-
-var _ref4 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  size: "lg"
-});
-
-var _ref5 = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationLabel, {
-  start: 10,
-  end: 20,
-  total: 10000
-}), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationList, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, /*#__PURE__*/_react["default"].createElement(_icons.ArrowIcon, {
-  direction: "left"
-}), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page1"
-}, "1")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "2")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page3"
-}, "3")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
-  variant: "dots"
-}), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page7"
-}, "7")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
-  href: "#page8"
-}, "8")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
-  currentPage: true
-}, "9"), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
-  inactive: true
-}, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/_react["default"].createElement(_icons.ArrowIcon, {
-  direction: "right"
-})))));
-
-var _ref6 = /*#__PURE__*/_react["default"].createElement(_SectionBreak.SectionBreak, {
-  size: "lg"
-});
-
-var _ref7 = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationLabel, {
-  start: 1,
-  end: 10,
-  total: 15
+  start: 81,
+  end: 90,
+  total: 197
 }), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationList, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, /*#__PURE__*/_react["default"].createElement(_icons.ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
@@ -134,7 +76,7 @@ var Default = function Default() {
     t: function t(str) {
       return str;
     }
-  }, _ref, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7);
+  }, _ref, _ref2, _ref3);
 };
 
 exports.Default = Default;

package/navigation/Pagination/__stories__/PaginationSmall.js

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

package/navigation/Pagination/__stories__/PaginationWithSmallFont.js

@@ -22,7 +22,7 @@ var _Pagination = require("@digigov/ui/navigation/Pagination");
 var _SvgIcon = require("@digigov/ui/utils/SvgIcon");
 
 var _ref = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination, {
-  fontSize: "sm"
+  size: "sm"
 }, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationLabel, {
   start: 1,
   end: 10,

package/navigation/Pagination/__stories__/WithInactiveValues.js

@@ -24,7 +24,7 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination,
   end: 20,
   total: 10000
 }), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationList, null, /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, /*#__PURE__*/_react["default"].createElement(_SvgIcon.ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
@@ -68,7 +68,7 @@ var _ref3 = /*#__PURE__*/_react["default"].createElement(_Pagination.Pagination,
 }, "8")), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
   currentPage: true
 }, "9"), /*#__PURE__*/_react["default"].createElement(_Pagination.PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/_react["default"].createElement(_SvgIcon.ArrowIcon, {
   direction: "right"
 })))));

package/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/navigation/SkipLink/SkipLink.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export const title: string;
+    export const description: string;
+    export { SkipLink as component };
+    export const displayName: string;
+}
+export default _default;
+export * from "@digigov/ui/navigation/SkipLink/__stories__/Default";
+import SkipLink from "@digigov/ui/navigation/SkipLink";

package/navigation/SkipLink/SkipLink.stories.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _SkipLink = _interopRequireDefault(require("@digigov/ui/navigation/SkipLink"));
+
+var _Default = require("@digigov/ui/navigation/SkipLink/__stories__/Default");
+
+Object.keys(_Default).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Default[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Default[key];
+    }
+  });
+});
+var _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["default"],
+  displayName: 'SkipLink'
+};
+exports["default"] = _default;

package/navigation/SkipLink/__stories__/Default.d.ts

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

package/navigation/SkipLink/__stories__/Default.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SkipLink = require("@digigov/ui/navigation/SkipLink");
+
+var _Paragraph = require("@digigov/ui/typography/Paragraph");
+
+var _ref = /*#__PURE__*/_react["default"].createElement(_Paragraph.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["default"].createElement(_SkipLink.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");
+
+var Default = function Default() {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _ref, _ref2);
+};
+
+exports.Default = Default;
+var _default = Default;
+exports["default"] = _default;

package/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/navigation/Tabs/__stories__/Default.js

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.Default = Default;
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _SummaryList = require("@digigov/ui/content/SummaryList");
@@ -20,26 +22,37 @@ var _Heading = require("@digigov/ui/typography/Heading");
 
 var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Tabs.TabsHeading, {
+  size: "md"
+}, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1");
+
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
   size: "md",
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryList, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, ' ', /*#__PURE__*/_react["default"].createElement(_Link.Link, {
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryList, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, {
   href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "6941234567"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, ' ', /*#__PURE__*/_react["default"].createElement(_Link.Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "6941234567"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+  size: "md",
+  element: "h3"
+}, "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2");
 
-var _ref3 = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
   size: "md",
   element: "h3"
-}, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
+}, "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC");
 
 function Default() {
   var _useTabs = (0, _Tabs.useTabs)(),
       register = _useTabs.register,
       panel = _useTabs.panel;
 
-  return /*#__PURE__*/_react["default"].createElement(_Tabs.Tabs, null, /*#__PURE__*/_react["default"].createElement(_Tabs.TabsList, null, /*#__PURE__*/_react["default"].createElement(_Tabs.TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/_react["default"].createElement(_Tabs.TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/_react["default"].createElement(_Tabs.TabsPanel, panel('a'), _ref, _ref2), /*#__PURE__*/_react["default"].createElement(_Tabs.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["default"].createElement(_Tabs.Tabs, null, _ref, /*#__PURE__*/_react["default"].createElement(_Tabs.TabsList, null, /*#__PURE__*/_react["default"].createElement(_Tabs.TabsListItem, (0, _extends2["default"])({}, register('citizen'), {
+    open: true
+  }), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/_react["default"].createElement(_Tabs.TabsListItem, register('cases'), "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2"), /*#__PURE__*/_react["default"].createElement(_Tabs.TabsListItem, register('history'), "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC")), /*#__PURE__*/_react["default"].createElement(_Tabs.TabsPanel, panel('citizen'), _ref2, _ref3), /*#__PURE__*/_react["default"].createElement(_Tabs.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["default"].createElement(_Tabs.TabsPanel, panel('history'), _ref5, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03B9\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03BF\u03CD"));
 }
 
 var _default = Default;

package/navigation/Tabs/index.js

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

package/navigation/Tabs/index.mdx

@@ -11,11 +11,13 @@ import Tabs from '@digigov/ui/navigation/Tabs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Tabs"
-  story="Default.tsx"
-/>
+<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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "1.0.0-6b93ebf2",
+  "version": "1.0.0-871b6be5",
   "description": "@digigov reusable components toolkit",
   "main": "./index.js",
   "module": "./esm/index.js",
@@ -13,7 +13,7 @@
     "react-query": "2.26.4",
     "yup": "0.32.11",
     "publint": "0.1.8",
-    "@digigov/react-icons": "1.0.0-6b93ebf2"
+    "@digigov/react-icons": "1.0.0-871b6be5"
   },
   "peerDependencies": {
     "@material-ui/core": "4.11.3",
@@ -21,7 +21,7 @@
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "1.0.0-6b93ebf2"
+    "@digigov/react-core": "1.0.0-871b6be5"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry.d.ts

@@ -11,7 +11,8 @@ declare var _default: {
     '@digigov/ui/app/App': {};
     '@digigov/ui/app/BannerContainer': {};
     '@digigov/ui/app/BottomInfo': {};
-    '@digigov/ui/app/FilterSection': {};
+    '@digigov/ui/app/CloseButton': {};
+    '@digigov/ui/app/FilterContainer': {};
     '@digigov/ui/app/Footer': {};
     '@digigov/ui/app/Header/HeaderContent': {};
     '@digigov/ui/app/Header/HeaderLogo': {};
@@ -34,7 +35,7 @@ declare var _default: {
     '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion': {};
     '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck': {};
     '@digigov/ui/app/OutdatedBrowserBanner': {};
-    '@digigov/ui/app/PageTitle': {};
+    '@digigov/ui/app/PageTitleContainer': {};
     '@digigov/ui/app/Panel': {};
     '@digigov/ui/app/PhaseBannerHeader': {};
     '@digigov/ui/app/QrCodeScanner': {};
@@ -89,9 +90,9 @@ declare var _default: {
     '@digigov/ui/form': {};
     '@digigov/ui/form/LabelContainer': {};
     '@digigov/ui/form/RadioContainer': {};
-    '@digigov/ui/form/SearchSection': {};
+    '@digigov/ui/form/SearchContainer': {};
     '@digigov/ui/form/SelectContainer': {};
-    '@digigov/ui/form/SingleCharacterInputContainer': {};
+    '@digigov/ui/form/SingleCharacterInputs': {};
     '@digigov/ui/form/TextArea': {};
     '@digigov/ui/form/TextInput': {};
     '@digigov/ui/govgr/Footer/Copyright': {};
@@ -132,7 +133,9 @@ declare var _default: {
     '@digigov/ui/layouts/Grid': {};
     '@digigov/ui/layouts/Hidden': {};
     '@digigov/ui/layouts': {};
+    '@digigov/ui/layouts/Section': {};
     '@digigov/ui/layouts/SectionBreak': {};
+    '@digigov/ui/layouts/Stack': {};
     '@digigov/ui/misc/KitchenSink': {};
     '@digigov/ui/navigation/BackLink': {};
     '@digigov/ui/navigation/Breadcrumbs': {};
@@ -145,26 +148,8 @@ declare var _default: {
     '@digigov/ui/navigation/NavList': {};
     '@digigov/ui/navigation/NavList/Nav': {};
     '@digigov/ui/navigation/NavList/NavList': {};
-    '@digigov/ui/navigation/NavList/NavListAuto/NavListAuto': {};
-    '@digigov/ui/navigation/NavList/NavListAuto/NavListBaseAuto': {};
-    '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto': {};
-    '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAnchorAuto': {};
-    '@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto': {};
-    '@digigov/ui/navigation/NavList/NavListAuto/NavListItemButtonAuto': {};
-    '@digigov/ui/navigation/NavList/NavListAuto/NavListMenuAuto': {};
-    '@digigov/ui/navigation/NavList/NavListAuto/NavListSubMenuAuto': {};
-    '@digigov/ui/navigation/NavList/NavListItem': {};
-    '@digigov/ui/navigation/NavList/NavListItemBase': {};
-    '@digigov/ui/navigation/NavList/NavListItemButton': {};
-    '@digigov/ui/navigation/NavList/NavListItemLink': {};
-    '@digigov/ui/navigation/NavList/NavMenu': {};
-    '@digigov/ui/navigation/NavList/NavMenuContainer': {};
-    '@digigov/ui/navigation/NavList/NavMenuContainerContent': {};
-    '@digigov/ui/navigation/NavList/NavMenuContainerContentList': {};
-    '@digigov/ui/navigation/NavList/NavMenuContainerContentListItem': {};
-    '@digigov/ui/navigation/NavList/NavMenuContainerTitle': {};
-    '@digigov/ui/navigation/NavList/NavVertical': {};
-    '@digigov/ui/navigation/NavList/NavVerticalItem': {};
+    '@digigov/ui/navigation/NavList/NavListAuto': {};
+    '@digigov/ui/navigation/NavList/NavMenuContentList': {};
     '@digigov/ui/navigation/NavList/types': {};
     '@digigov/ui/navigation/Pagination': {};
     '@digigov/ui/navigation/SkipLink': {};
@@ -195,6 +180,7 @@ declare var _default: {
 };
 export default _default;
 export const stories: {
+    '@digigov/ui/app/BannerContainer/BannerContainer.stories': typeof _digigov_ui_app_BannerContainer_BannerContainer_stories;
     '@digigov/ui/app/Footer/Footer.stories': typeof _digigov_ui_app_Footer_Footer_stories;
     '@digigov/ui/app/Header/Header.stories': typeof _digigov_ui_app_Header_Header_stories;
     '@digigov/ui/app/Loader/Loader.stories': typeof _digigov_ui_app_Loader_Loader_stories;
@@ -228,13 +214,14 @@ export const stories: {
     '@digigov/ui/form/ErrorMessage/ErrorMessage.stories': typeof _digigov_ui_form_ErrorMessage_ErrorMessage_stories;
     '@digigov/ui/form/FileUpload/FileUpload.stories': typeof _digigov_ui_form_FileUpload_FileUpload_stories;
     '@digigov/ui/form/RadioContainer/RadioContainer.stories': typeof _digigov_ui_form_RadioContainer_RadioContainer_stories;
-    '@digigov/ui/form/SelectContainer/Select.stories': typeof _digigov_ui_form_SelectContainer_Select_stories;
-    '@digigov/ui/form/SingleCharacterInputContainer/SingleCharacterInputContainer.stories': typeof _digigov_ui_form_SingleCharacterInputContainer_SingleCharacterInputContainer_stories;
+    '@digigov/ui/form/SelectContainer/SelectContainer.stories': typeof _digigov_ui_form_SelectContainer_SelectContainer_stories;
+    '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories': typeof _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories;
     '@digigov/ui/form/TextArea/TextArea.stories': typeof _digigov_ui_form_TextArea_TextArea_stories;
     '@digigov/ui/form/TextInput/TextInput.stories': typeof _digigov_ui_form_TextInput_TextInput_stories;
     '@digigov/ui/layouts/Basic/Basic.stories': typeof _digigov_ui_layouts_Basic_Basic_stories;
     '@digigov/ui/layouts/Divider/Divider.stories': typeof _digigov_ui_layouts_Divider_Divider_stories;
     '@digigov/ui/layouts/Grid/Grid.stories': typeof _digigov_ui_layouts_Grid_Grid_stories;
+    '@digigov/ui/layouts/Stack/Stack.stories': typeof _digigov_ui_layouts_Stack_Stack_stories;
     '@digigov/ui/navigation/BackLink/BackLink.stories': typeof _digigov_ui_navigation_BackLink_BackLink_stories;
     '@digigov/ui/navigation/Breadcrumbs/Breadcrumbs.stories': typeof _digigov_ui_navigation_Breadcrumbs_Breadcrumbs_stories;
     '@digigov/ui/navigation/Drawer/Drawer.stories': typeof _digigov_ui_navigation_Drawer_Drawer_stories;
@@ -242,6 +229,7 @@ export const stories: {
     '@digigov/ui/navigation/Link/Link.stories': typeof _digigov_ui_navigation_Link_Link_stories;
     '@digigov/ui/navigation/NavList/NavList.stories': typeof _digigov_ui_navigation_NavList_NavList_stories;
     '@digigov/ui/navigation/Pagination/Pagination.stories': typeof _digigov_ui_navigation_Pagination_Pagination_stories;
+    '@digigov/ui/navigation/SkipLink/SkipLink.stories': typeof _digigov_ui_navigation_SkipLink_SkipLink_stories;
     '@digigov/ui/navigation/Tabs/Tabs.stories': typeof _digigov_ui_navigation_Tabs_Tabs_stories;
     '@digigov/ui/typography/Heading/Heading.stories': typeof _digigov_ui_typography_Heading_Heading_stories;
     '@digigov/ui/typography/HeadingCaption/HeadingCaption.stories': typeof _digigov_ui_typography_HeadingCaption_HeadingCaption_stories;
@@ -250,6 +238,7 @@ export const stories: {
     '@digigov/ui/typography/Paragraph/Paragraph.stories': typeof _digigov_ui_typography_Paragraph_Paragraph_stories;
     '@digigov/ui/utils/VisuallyHidden/VisuallyHidden.stories': typeof _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories;
 };
+import * as _digigov_ui_app_BannerContainer_BannerContainer_stories from "@digigov/ui/app/BannerContainer/BannerContainer.stories";
 import * as _digigov_ui_app_Footer_Footer_stories from "@digigov/ui/app/Footer/Footer.stories";
 import * as _digigov_ui_app_Header_Header_stories from "@digigov/ui/app/Header/Header.stories";
 import * as _digigov_ui_app_Loader_Loader_stories from "@digigov/ui/app/Loader/Loader.stories";
@@ -283,13 +272,14 @@ import * as _digigov_ui_form_DateInputContainer_DateInputContainer_stories from
 import * as _digigov_ui_form_ErrorMessage_ErrorMessage_stories from "@digigov/ui/form/ErrorMessage/ErrorMessage.stories";
 import * as _digigov_ui_form_FileUpload_FileUpload_stories from "@digigov/ui/form/FileUpload/FileUpload.stories";
 import * as _digigov_ui_form_RadioContainer_RadioContainer_stories from "@digigov/ui/form/RadioContainer/RadioContainer.stories";
-import * as _digigov_ui_form_SelectContainer_Select_stories from "@digigov/ui/form/SelectContainer/Select.stories";
-import * as _digigov_ui_form_SingleCharacterInputContainer_SingleCharacterInputContainer_stories from "@digigov/ui/form/SingleCharacterInputContainer/SingleCharacterInputContainer.stories";
+import * as _digigov_ui_form_SelectContainer_SelectContainer_stories from "@digigov/ui/form/SelectContainer/SelectContainer.stories";
+import * as _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories from "@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories";
 import * as _digigov_ui_form_TextArea_TextArea_stories from "@digigov/ui/form/TextArea/TextArea.stories";
 import * as _digigov_ui_form_TextInput_TextInput_stories from "@digigov/ui/form/TextInput/TextInput.stories";
 import * as _digigov_ui_layouts_Basic_Basic_stories from "@digigov/ui/layouts/Basic/Basic.stories";
 import * as _digigov_ui_layouts_Divider_Divider_stories from "@digigov/ui/layouts/Divider/Divider.stories";
 import * as _digigov_ui_layouts_Grid_Grid_stories from "@digigov/ui/layouts/Grid/Grid.stories";
+import * as _digigov_ui_layouts_Stack_Stack_stories from "@digigov/ui/layouts/Stack/Stack.stories";
 import * as _digigov_ui_navigation_BackLink_BackLink_stories from "@digigov/ui/navigation/BackLink/BackLink.stories";
 import * as _digigov_ui_navigation_Breadcrumbs_Breadcrumbs_stories from "@digigov/ui/navigation/Breadcrumbs/Breadcrumbs.stories";
 import * as _digigov_ui_navigation_Drawer_Drawer_stories from "@digigov/ui/navigation/Drawer/Drawer.stories";
@@ -297,6 +287,7 @@ import * as _digigov_ui_navigation_Dropdown_Dropdown_stories from "@digigov/ui/n
 import * as _digigov_ui_navigation_Link_Link_stories from "@digigov/ui/navigation/Link/Link.stories";
 import * as _digigov_ui_navigation_NavList_NavList_stories from "@digigov/ui/navigation/NavList/NavList.stories";
 import * as _digigov_ui_navigation_Pagination_Pagination_stories from "@digigov/ui/navigation/Pagination/Pagination.stories";
+import * as _digigov_ui_navigation_SkipLink_SkipLink_stories from "@digigov/ui/navigation/SkipLink/SkipLink.stories";
 import * as _digigov_ui_navigation_Tabs_Tabs_stories from "@digigov/ui/navigation/Tabs/Tabs.stories";
 import * as _digigov_ui_typography_Heading_Heading_stories from "@digigov/ui/typography/Heading/Heading.stories";
 import * as _digigov_ui_typography_HeadingCaption_HeadingCaption_stories from "@digigov/ui/typography/HeadingCaption/HeadingCaption.stories";