@digigov/ui 1.0.0-88820b1e → 1.0.0-8bbf3ef2

package/navigation/NavList/hooks/useTogglableNav.js

@@ -31,24 +31,6 @@ function useTogglableNav(_ref) {
 
   var registered = (0, _react.useRef)({});
   var openedKeys = (0, _react.useRef)([]);
-  var registerButtonRef = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function (e) {
     var key = e.currentTarget.getAttribute('aria-controls');
     var selected = e.currentTarget.getAttribute('aria-selected') === 'true';
@@ -274,6 +256,24 @@ function useTogglableNav(_ref) {
         break;
     }
   }, []);
+  var registerButtonRef = (0, _react.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 = (0, _react.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 = (0, _react.useCallback)(function (key) {
     var _extends2;
 
@@ -292,8 +292,23 @@ function useTogglableNav(_ref) {
       onKeyDown: onKeyDown
     });
   }, [opened]);
+  var registerNavItem = (0, _react.useCallback)(function (item) {
+    if (item.subMenu || item.menu) {
+      return (0, _extends3["default"])({}, registerButton(item.name), {
+        role: 'button'
+      });
+    } else if (item.href) {
+      return (0, _extends3["default"])({}, registerLink(item.name), {
+        href: item.href
+      });
+    } else {
+      console.error(item);
+      throw new Error('Invalid nav item. Must be either button or link');
+    }
+  }, [opened]);
   return (0, _react.useMemo)(function () {
     return {
+      registerNavItem: registerNavItem,
       registerButton: registerButton,
       registerLink: registerLink,
       registered: registered,

package/navigation/NavList/index.d.ts

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

@@ -8,35 +8,21 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _NavListItem = require("@digigov/ui/navigation/NavList/NavListItem");
+var _NavList = _interopRequireWildcard(require("@digigov/react-core/NavList"));
 
-Object.keys(_NavListItem).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListItem[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _NavListItem[key];
-    }
-  });
-});
-
-var _NavListItemAuto = require("@digigov/ui/navigation/NavList/NavListAuto/NavListItemAuto");
-
-Object.keys(_NavListItemAuto).forEach(function (key) {
+Object.keys(_NavList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListItemAuto[key]) return;
+  if (key in exports && exports[key] === _NavList[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItemAuto[key];
+      return _NavList[key];
     }
   });
 });
 
-var _NavListAuto = require("@digigov/ui/navigation/NavList/NavListAuto/NavListAuto");
+var _NavListAuto = require("@digigov/ui/navigation/NavList/NavListAuto");
 
 Object.keys(_NavListAuto).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -50,91 +36,63 @@ Object.keys(_NavListAuto).forEach(function (key) {
   });
 });
 
-var _NavListContextAuto = require("@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto");
-
-Object.keys(_NavListContextAuto).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListContextAuto[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _NavListContextAuto[key];
-    }
-  });
-});
-
-var _Nav = require("@digigov/ui/navigation/NavList/Nav");
-
-Object.keys(_Nav).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Nav[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Nav[key];
-    }
-  });
-});
-
-var _NavList = _interopRequireWildcard(require("@digigov/ui/navigation/NavList/NavList"));
+var _NavMenuContentList = require("@digigov/ui/navigation/NavList/NavMenuContentList");
 
-Object.keys(_NavList).forEach(function (key) {
+Object.keys(_NavMenuContentList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavList[key]) return;
+  if (key in exports && exports[key] === _NavMenuContentList[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavList[key];
+      return _NavMenuContentList[key];
     }
   });
 });
 
-var _NavListItemLink = require("@digigov/ui/navigation/NavList/NavListItemLink");
+var _types = require("@digigov/ui/navigation/NavList/types");
 
-Object.keys(_NavListItemLink).forEach(function (key) {
+Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListItemLink[key]) return;
+  if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItemLink[key];
+      return _types[key];
     }
   });
 });
 
-var _NavListItemButton = require("@digigov/ui/navigation/NavList/NavListItemButton");
+var _useNavList = require("@digigov/ui/navigation/NavList/hooks/useNavList");
 
-Object.keys(_NavListItemButton).forEach(function (key) {
+Object.keys(_useNavList).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavListItemButton[key]) return;
+  if (key in exports && exports[key] === _useNavList[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavListItemButton[key];
+      return _useNavList[key];
     }
   });
 });
 
-var _NavMenu = require("@digigov/ui/navigation/NavList/NavMenu");
+var _Nav = require("@digigov/react-core/Nav");
 
-Object.keys(_NavMenu).forEach(function (key) {
+Object.keys(_Nav).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavMenu[key]) return;
+  if (key in exports && exports[key] === _Nav[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenu[key];
+      return _Nav[key];
     }
   });
 });
 
-var _NavMenuContainer = require("@digigov/ui/navigation/NavList/NavMenuContainer");
+var _NavMenuContainer = require("@digigov/react-core/NavMenuContainer");
 
 Object.keys(_NavMenuContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -148,114 +106,114 @@ Object.keys(_NavMenuContainer).forEach(function (key) {
   });
 });
 
-var _NavMenuContainerTitle = require("@digigov/ui/navigation/NavList/NavMenuContainerTitle");
+var _NavMenuContent = require("@digigov/react-core/NavMenuContent");
 
-Object.keys(_NavMenuContainerTitle).forEach(function (key) {
+Object.keys(_NavMenuContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavMenuContainerTitle[key]) return;
+  if (key in exports && exports[key] === _NavMenuContent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerTitle[key];
+      return _NavMenuContent[key];
     }
   });
 });
 
-var _NavMenuContainerContent = require("@digigov/ui/navigation/NavList/NavMenuContainerContent");
+var _NavMenuContentListBase = require("@digigov/react-core/NavMenuContentListBase");
 
-Object.keys(_NavMenuContainerContent).forEach(function (key) {
+Object.keys(_NavMenuContentListBase).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavMenuContainerContent[key]) return;
+  if (key in exports && exports[key] === _NavMenuContentListBase[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerContent[key];
+      return _NavMenuContentListBase[key];
     }
   });
 });
 
-var _NavMenuContainerContentList = require("@digigov/ui/navigation/NavList/NavMenuContainerContentList");
+var _NavMenuContentListItem = require("@digigov/react-core/NavMenuContentListItem");
 
-Object.keys(_NavMenuContainerContentList).forEach(function (key) {
+Object.keys(_NavMenuContentListItem).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavMenuContainerContentList[key]) return;
+  if (key in exports && exports[key] === _NavMenuContentListItem[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerContentList[key];
+      return _NavMenuContentListItem[key];
     }
   });
 });
 
-var _NavMenuContainerContentListItem = require("@digigov/ui/navigation/NavList/NavMenuContainerContentListItem");
+var _NavMenuTitle = require("@digigov/react-core/NavMenuTitle");
 
-Object.keys(_NavMenuContainerContentListItem).forEach(function (key) {
+Object.keys(_NavMenuTitle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavMenuContainerContentListItem[key]) return;
+  if (key in exports && exports[key] === _NavMenuTitle[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavMenuContainerContentListItem[key];
+      return _NavMenuTitle[key];
     }
   });
 });
 
-var _NavVertical = require("@digigov/ui/navigation/NavList/NavVertical");
+var _NavListItemActionContainer = require("@digigov/react-core/NavListItemActionContainer");
 
-Object.keys(_NavVertical).forEach(function (key) {
+Object.keys(_NavListItemActionContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavVertical[key]) return;
+  if (key in exports && exports[key] === _NavListItemActionContainer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavVertical[key];
+      return _NavListItemActionContainer[key];
     }
   });
 });
 
-var _NavVerticalItem = require("@digigov/ui/navigation/NavList/NavVerticalItem");
+var _NavListItemAction = require("@digigov/react-core/NavListItemAction");
 
-Object.keys(_NavVerticalItem).forEach(function (key) {
+Object.keys(_NavListItemAction).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _NavVerticalItem[key]) return;
+  if (key in exports && exports[key] === _NavListItemAction[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _NavVerticalItem[key];
+      return _NavListItemAction[key];
     }
   });
 });
 
-var _types = require("@digigov/ui/navigation/NavList/types");
+var _NavListItemLink = require("@digigov/react-core/NavListItemLink");
 
-Object.keys(_types).forEach(function (key) {
+Object.keys(_NavListItemLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _types[key]) return;
+  if (key in exports && exports[key] === _NavListItemLink[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _types[key];
+      return _NavListItemLink[key];
     }
   });
 });
 
-var _useNavList = require("@digigov/ui/navigation/NavList/hooks/useNavList");
+var _NavListItemButton = require("@digigov/react-core/NavListItemButton");
 
-Object.keys(_useNavList).forEach(function (key) {
+Object.keys(_NavListItemButton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useNavList[key]) return;
+  if (key in exports && exports[key] === _NavListItemButton[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _useNavList[key];
+      return _NavListItemButton[key];
     }
   });
 });

package/navigation/NavList/index.mdx

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

package/navigation/NavList/types.d.ts

@@ -1,8 +1,19 @@
 import React from 'react';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 import { NavProps } from '@digigov/ui/navigation/NavList';
-import { NavLinkInterface } from '@digigov/ui/navigation/NavList/NavListAuto/NavListContextAuto';
 export declare type NavListLayout = 'horizontal' | 'vertical';
+interface NavListItemMenuInterface {
+    links: NavListItemLinkInterface[];
+    title?: string;
+}
+export interface NavLinkInterface {
+    label?: string;
+    name: string;
+    href?: string;
+    subMenuHeading?: string;
+    subMenu?: NavLinkInterface[];
+    menu?: NavListItemMenuInterface;
+}
 export interface NavListAutoProps extends NavProps {
     children?: React.ReactNode;
     className?: string;
@@ -21,20 +32,17 @@ export interface NavListHeaderItemType {
     label?: string;
     title?: string;
     children?: React.ReactNode;
-    subMenu: NavListItemLinkInterface[];
+    menu: {
+        links: NavListItemLinkInterface[];
+    };
 }
 interface NavListItemInterface {
     name: string;
     label?: string;
-    title?: string;
-    children?: React.ReactNode;
 }
 interface NavListItemLinkInterface extends NavListItemInterface {
     href: string;
 }
-interface NavListItemMenuInterface extends NavListItemInterface {
-    links: NavListItemLinkInterface[];
-}
 export declare type NavListItemType = NavListItemLinkInterface | NavListItemMenuContainerInterface | NavListItemSubMenuInterface;
 export interface NavListItemMenuContainerInterface extends NavListItemInterface {
     menu: NavListItemMenuInterface[];
@@ -42,14 +50,4 @@ export interface NavListItemMenuContainerInterface extends NavListItemInterface
 export interface NavListItemSubMenuInterface extends NavListItemInterface {
     subMenu: NavListItemType[];
 }
-export declare const isNavListItemLinkInterface: (item: any) => item is NavListItemLinkInterface;
-export declare const isNavListItemSubMenuInterface: (item: any) => item is NavListItemSubMenuInterface;
-export interface NavListItemProps {
-    children?: React.ReactNode;
-    role?: string;
-    link?: NavListItemType;
-    active?: boolean;
-    setRegisterButton?: (name: string) => any;
-    setRegisterLink?: (name: string) => any;
-}
 export {};

package/navigation/NavList/types.js

@@ -2,17 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.isNavListItemSubMenuInterface = exports.isNavListItemLinkInterface = void 0;
-
-var isNavListItemLinkInterface = function isNavListItemLinkInterface(item) {
-  return item && 'href' in item;
-};
-
-exports.isNavListItemLinkInterface = isNavListItemLinkInterface;
-
-var isNavListItemSubMenuInterface = function isNavListItemSubMenuInterface(item) {
-  return item && 'subMenu' in item;
-};
-
-exports.isNavListItemSubMenuInterface = isNavListItemSubMenuInterface;
+});

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, {
-  active: false
-}, /*#__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, {
-  active: false
-}, /*#__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/index.mdx

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