@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-a131264d

package/es/navigation/Pagination/Pagination.stories.js

@@ -1,4 +1,4 @@
-import Pagination from '@digigov/ui/navigation/Pagination';
+import Pagination from "./";
 export default {
   title: 'Digigov UI/navigation/Pagination',
   description: 'Use the pagination component to let users browse through a long list.',
@@ -6,8 +6,10 @@ export default {
   component: Pagination,
   displayName: 'Pagination'
 };
-export * from '@digigov/ui/navigation/Pagination/__stories__/Default';
-export * from '@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues';
-export * from '@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage';
-export * from '@digigov/ui/navigation/Pagination/__stories__/PaginationSmall';
-export * from '@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont';
+export * from "./__stories__/Default";
+export * from "./__stories__/WithInactiveValues";
+export * from "./__stories__/WithResultsPerPage";
+export * from "./__stories__/PaginationSmall";
+export * from "./__stories__/PaginationWithSmallFont";
+export * from "./__stories__/WithHook";
+export * from "./__stories__/Auto";

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Pagination, PaginationContextAuto, PaginationLabelAuto, PaginationListAuto, PaginationResultsPerPageSelectAuto, usePaginationContext } from "./..";
+import Container from "../../../layouts/Basic";
+import Main from "../../../layouts/Basic";
+import Grid from "../../../layouts/Grid";
+import Card from "../../../content/Card";
+var fetchedData = [];
+
+for (var i = 0; i < 78; i++) {
+  fetchedData.push({
+    id: i
+  });
+}
+
+var MyContainer = function MyContainer(_ref) {
+  var data = _ref.data;
+
+  var _usePaginationContext = usePaginationContext(),
+      offset = _usePaginationContext.offset,
+      limit = _usePaginationContext.limit;
+
+  return data.filter(function (item, index) {
+    index > offset && index < offset + limit;
+    console.log(item);
+  }).map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 4,
+      md: 2,
+      key: index
+    }, /*#__PURE__*/React.createElement(Card, {
+      variant: "border"
+    }, " ", item.id));
+  });
+};
+
+var _ref2 = /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Grid, {
+  container: true,
+  spacing: 4
+}, /*#__PURE__*/React.createElement(MyContainer, {
+  data: fetchedData
+})), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabelAuto, null), /*#__PURE__*/React.createElement(PaginationResultsPerPageSelectAuto, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1"), /*#__PURE__*/React.createElement(PaginationListAuto, null))));
+
+export var Auto = function Auto() {
+  return /*#__PURE__*/React.createElement(PaginationContextAuto, {
+    total: fetchedData.length,
+    resultsPerPageOptions: [15, 25],
+    previousLabel: "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03B7",
+    nextLabel: "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03B7"
+  }, _ref2);
+};
+export default Auto;

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

@@ -1,15 +1,15 @@
 import React from 'react';
-import { I18NProvider } from '@digigov/ui/i18n';
-import { ArrowIcon } from '@digigov/ui/icons';
-import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-import { Link } from '@digigov/ui/navigation/Link';
-import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/navigation/Pagination';
+import { I18NProvider } from "../../../i18n";
+import { ChevronIcon } from "../../../icons";
+import { SectionBreak } from "../../../layouts/SectionBreak";
+import { Link } from "../../Link";
+import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from "./..";
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
   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, {
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "#page1"
@@ -25,7 +25,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   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, {
+}, "9")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "right"
 })))));
 
@@ -37,7 +37,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
   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, {
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "#page1"
@@ -53,7 +53,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
   variant: "dots"
 }), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "#page20"
-}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
+}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "right"
 })))));
 

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { I18NProvider } from '@digigov/ui/i18n';
-import { ArrowIcon } from '@digigov/ui/icons';
-import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-import { Link } from '@digigov/ui/navigation/Link';
-import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/navigation/Pagination';
+import { I18NProvider } from "../../../i18n";
+import { ChevronIcon } from "../../../icons";
+import { SectionBreak } from "../../../layouts/SectionBreak";
+import { Link } from "../../Link";
+import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from "./..";
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
   start: 1,
@@ -11,13 +11,13 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   total: 15
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
   active: false
-}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "left"
 }))), /*#__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, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+}, "2")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "right"
 })))));
 

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { LabelContainer } from '@digigov/react-core';
-import { SelectContainer, SelectOption } from '@digigov/ui/form/SelectContainer';
-import { I18NProvider } from '@digigov/ui/i18n';
-import { Link } from '@digigov/ui/navigation/Link';
-import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/navigation/Pagination';
-import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
+import { SelectContainer, SelectOption } from "../../../form/SelectContainer";
+import { I18NProvider } from "../../../i18n";
+import { Link } from "../../Link";
+import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from "./..";
+import { ChevronIcon } from "../../../utils/SvgIcon";
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, {
   size: "sm"
@@ -12,7 +12,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, {
   start: 1,
   end: 10,
   total: 15
-}), /*#__PURE__*/React.createElement(LabelContainer, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1", /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(SelectOption, null, "5"), /*#__PURE__*/React.createElement(SelectOption, null, "10"), /*#__PURE__*/React.createElement(SelectOption, null, "15"))), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+}), /*#__PURE__*/React.createElement(LabelContainer, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1", /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(SelectOption, null, "5"), /*#__PURE__*/React.createElement(SelectOption, null, "10"), /*#__PURE__*/React.createElement(SelectOption, null, "15"))), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "#page1"
@@ -28,7 +28,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, {
   variant: "dots"
 }), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "#page20"
-}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
+}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "right"
 })))));
 

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

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Pagination, PaginationList, PaginationLabel, PaginationResultsPerPageSelect, PaginationListItemButton } from "./..";
+import usePagination from "../hooks";
+import Grid from "../../../layouts/Grid";
+import Card from "../../../content/Card";
+var data = [];
+var dataLength = 245;
+
+for (var i = 0; i < dataLength; i++) {
+  data.push({
+    id: i
+  });
+}
+
+export var WithHook = function WithHook() {
+  var resultsPerPageOptions = [10, 25, 40];
+  var previousLabel = 'Προηγούμενη';
+  var nextLabel = 'Επόμενη';
+
+  var _usePagination = usePagination({
+    total: data.length,
+    resultsPerPageOptions: resultsPerPageOptions,
+    // limitOptions
+    previousLabel: previousLabel,
+    nextLabel: nextLabel
+  }),
+      registerPaginationLabel = _usePagination.registerPaginationLabel,
+      registerPaginationResultsPerPageSelect = _usePagination.registerPaginationResultsPerPageSelect,
+      items = _usePagination.items,
+      offset = _usePagination.offset,
+      limit = _usePagination.limit;
+
+  var filteredData = data.filter(function (item, index) {
+    console.log(item);
+    return index > offset && index < offset + limit;
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+    container: true,
+    spacing: 4,
+    marginBottom: 8
+  }, filteredData.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(Grid, {
+      item: true,
+      xs: 4,
+      md: 2,
+      key: index
+    }, /*#__PURE__*/React.createElement(Card, {
+      variant: "border"
+    }, " ", item.id));
+  })), /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, registerPaginationLabel()), /*#__PURE__*/React.createElement(PaginationResultsPerPageSelect, registerPaginationResultsPerPageSelect(), "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1", ' '), /*#__PURE__*/React.createElement(PaginationList, null, items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(PaginationListItemButton, _extends({}, item, {
+      key: index
+    }));
+  }))));
+};
+export default WithHook;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { I18NProvider } from '@digigov/ui/i18n';
-import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-import { Link } from '@digigov/ui/navigation/Link';
-import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/navigation/Pagination';
-import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
+import { I18NProvider } from "../../../i18n";
+import { SectionBreak } from "../../../layouts/SectionBreak";
+import { Link } from "../../Link";
+import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from "./..";
+import { ChevronIcon } from "../../../utils/SvgIcon";
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
   start: 10,
@@ -11,7 +11,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   total: 10000
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
   active: false
-}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+}, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
   currentPage: true
@@ -27,7 +27,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   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, {
+}, "9")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "right"
 })))));
 
@@ -39,7 +39,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
   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, {
+}), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "#page1"
@@ -55,7 +55,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
   currentPage: true
 }, "9"), /*#__PURE__*/React.createElement(PaginationListItem, {
   active: false
-}, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
+}, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "right"
 })))));
 

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

@@ -1,16 +1,16 @@
 import React from 'react';
 import { LabelContainer } from '@digigov/react-core';
-import { SelectContainer, SelectOption } from '@digigov/ui/form/SelectContainer';
-import { I18NProvider } from '@digigov/ui/i18n';
-import { Link } from '@digigov/ui/navigation/Link';
-import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/navigation/Pagination';
-import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
+import { SelectContainer, SelectOption } from "../../../form/SelectContainer";
+import { I18NProvider } from "../../../i18n";
+import { Link } from "../../Link";
+import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from "./..";
+import { ChevronIcon } from "../../../utils/SvgIcon";
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
   start: 1,
   end: 10,
   total: 15
-}), /*#__PURE__*/React.createElement(LabelContainer, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1", /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(SelectOption, null, "5"), /*#__PURE__*/React.createElement(SelectOption, null, "10"), /*#__PURE__*/React.createElement(SelectOption, null, "15"))), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
+}), /*#__PURE__*/React.createElement(LabelContainer, null, "\u0391\u03C0\u03BF\u03C4\u03B5\u03BB\u03AD\u03C3\u03BC\u03B1\u03C4\u03B1 \u03B1\u03BD\u03AC \u03C3\u03B5\u03BB\u03AF\u03B4\u03B1", /*#__PURE__*/React.createElement(SelectContainer, null, /*#__PURE__*/React.createElement(SelectOption, null, "5"), /*#__PURE__*/React.createElement(SelectOption, null, "10"), /*#__PURE__*/React.createElement(SelectOption, null, "15"))), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "#page1"
@@ -26,7 +26,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   variant: "dots"
 }), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, {
   href: "#page20"
-}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
+}, "20")), /*#__PURE__*/React.createElement(PaginationListItem, null, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ChevronIcon, {
   direction: "right"
 })))));
 

package/es/navigation/Pagination/auto.js

@@ -0,0 +1,87 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["total", "resultsPerPageOptions", "previousLabel", "nextLabel", "children"],
+    _excluded2 = ["children"];
+import React, { useContext } from 'react';
+import { Pagination, PaginationList, PaginationListItemButton, PaginationLabel, usePagination, PaginationResultsPerPageSelect } from "./";
+var PaginationContext = /*#__PURE__*/React.createContext(null);
+export var usePaginationContext = function usePaginationContext() {
+  var context = useContext(PaginationContext);
+
+  if (!context) {
+    throw new Error('usePaginationContext must be used within an PaginationProvider');
+  }
+
+  return context;
+};
+export var PaginationContextAuto = function PaginationContextAuto(_ref) {
+  var total = _ref.total,
+      resultsPerPageOptions = _ref.resultsPerPageOptions,
+      previousLabel = _ref.previousLabel,
+      nextLabel = _ref.nextLabel,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var pagination = usePagination({
+    total: total,
+    resultsPerPageOptions: resultsPerPageOptions,
+    previousLabel: previousLabel,
+    nextLabel: nextLabel
+  });
+  return /*#__PURE__*/React.createElement(PaginationContext.Provider, _extends({
+    value: pagination
+  }, props), children);
+};
+export var PaginationAuto = /*#__PURE__*/React.forwardRef(function PaginationAuto(_ref2, ref) {
+  var children = _ref2.children,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var context = usePaginationContext();
+
+  if (!context) {
+    throw new Error('PaginationAuto must be used within PaginationProvider');
+  }
+
+  return /*#__PURE__*/React.createElement(Pagination, _extends({}, props, {
+    ref: ref
+  }), children);
+});
+export var PaginationLabelAuto = /*#__PURE__*/React.forwardRef(function PaginationLabelAuto(_ref3, ref) {
+  var props = _extends({}, _ref3);
+
+  var context = usePaginationContext();
+
+  if (!context) {
+    throw new Error('PaginationLabelAuto must be used within PaginationProvider');
+  }
+
+  return /*#__PURE__*/React.createElement(PaginationLabel, _extends({}, context.registerPaginationLabel(), props, {
+    ref: ref
+  }));
+});
+export var PaginationResultsPerPageSelectAuto = /*#__PURE__*/React.forwardRef(function PaginationResultsPerPageSelectAuto(props, ref) {
+  var context = usePaginationContext();
+
+  if (!context) {
+    throw new Error('PaginationResultsPerPageSelectAuto must be used within PaginationProvider');
+  }
+
+  return /*#__PURE__*/React.createElement(PaginationResultsPerPageSelect, _extends({}, context.registerPaginationResultsPerPageSelect(), props, {
+    ref: ref
+  }));
+});
+export var PaginationListAuto = /*#__PURE__*/React.forwardRef(function PaginationListAuto(props, ref) {
+  var context = usePaginationContext();
+
+  if (!context) {
+    throw new Error('PaginationListAuto must be used within PaginationProvider');
+  }
+
+  return /*#__PURE__*/React.createElement(PaginationList, _extends({}, props, {
+    ref: ref
+  }), context.items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(PaginationListItemButton, _extends({}, item, {
+      key: index
+    }));
+  }));
+});

package/es/navigation/Pagination/hooks.js

@@ -0,0 +1,117 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useMemo, useRef, useState } from 'react';
+export var usePagination = function usePagination(_ref) {
+  var totalLength = _ref.total,
+      resultsPerPageOptions = _ref.resultsPerPageOptions,
+      previousLabel = _ref.previousLabel,
+      nextLabel = _ref.nextLabel;
+
+  var _useState = useState(totalLength),
+      _useState2 = _slicedToArray(_useState, 2),
+      total = _useState2[0],
+      setTotal = _useState2[1];
+
+  useEffect(function () {
+    setTotal(totalLength);
+  }, [totalLength]);
+
+  var _useState3 = useState(1),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentPage = _useState4[0],
+      setCurrentPage = _useState4[1];
+
+  var _useState5 = useState(resultsPerPageOptions[0]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      currentResultsPerPage = _useState6[0],
+      setCurrentResultsPerPage = _useState6[1];
+
+  var totalPages = Math.ceil(total / currentResultsPerPage) - 1;
+  var currentPageResultsStart = (currentPage - 1) * currentResultsPerPage + 1;
+  var currentPageResultsEnd = currentPage * currentResultsPerPage < total ? currentPage * currentResultsPerPage : total;
+  var labelRef = useRef();
+  var selectLabelRef = useRef();
+  useEffect(function () {
+    setCurrentPage(totalPages < currentPage ? totalPages : currentPage);
+  }, [currentPage, totalPages]);
+
+  var registerPaginationLabel = function registerPaginationLabel() {
+    return {
+      start: currentPageResultsStart,
+      end: currentPageResultsEnd,
+      total: total,
+      ref: labelRef.current
+    };
+  };
+
+  var registerPaginationResultsPerPageSelect = function registerPaginationResultsPerPageSelect() {
+    return {
+      resultsPerPageOptions: resultsPerPageOptions,
+      currentResultsPerPage: currentResultsPerPage,
+      handleOnChange: setCurrentResultsPerPage,
+      ref: selectLabelRef.current
+    };
+  };
+
+  var items = useMemo(function () {
+    var content = [];
+    var countingDots = false;
+    content.push({
+      children: previousLabel,
+      arrow: 'left',
+      onClick: function onClick() {
+        return currentPage !== 1 && setCurrentPage(currentPage - 1);
+      },
+      active: currentPage !== 1
+    });
+
+    var _loop = function _loop(_page) {
+      if (_page <= 1 || _page >= totalPages || _page <= currentPage + 1 && _page >= currentPage - 1) {
+        if (countingDots) {
+          countingDots = false;
+        }
+
+        console.log(_page, currentPage);
+        content.push({
+          children: _page,
+          variant: 'number',
+          onClick: function onClick() {
+            return setCurrentPage(_page);
+          },
+          isCurrentPage: currentPage === _page
+        });
+      } else {
+        if (!countingDots) {
+          countingDots = true;
+          content.push({
+            variant: 'dots'
+          });
+        }
+      }
+    };
+
+    for (var _page = 1; _page <= totalPages; _page++) {
+      _loop(_page);
+    }
+
+    content.push({
+      children: nextLabel,
+      arrow: 'right',
+      onClick: function onClick() {
+        return currentPage !== totalPages && setCurrentPage(currentPage + 1);
+      },
+      active: currentPage !== totalPages
+    });
+    return content;
+  }, [currentPage, totalPages]);
+  return {
+    registerPaginationLabel: registerPaginationLabel,
+    registerPaginationResultsPerPageSelect: registerPaginationResultsPerPageSelect,
+    items: items,
+    currentPage: currentPage,
+    setCurrentPage: setCurrentPage,
+    offset: (currentPage - 1) * currentResultsPerPage,
+    limit: currentResultsPerPage + 1,
+    setTotal: setTotal
+  };
+};
+export default usePagination;

package/es/navigation/Pagination/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PaginationLabelContainer from '@digigov/react-core/PaginationLabelContainer';
-import { I18nText } from '@digigov/ui/i18n/I18nText';
+import { I18nText } from "../../i18n/I18nText";
 
 /**
  * PaginationLabel component is used for placing the pagination results label.
@@ -15,9 +15,59 @@ export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLa
     i18nKey: "pagination.label"
   }, "Showing ", /*#__PURE__*/React.createElement("b", null, start), " to ", /*#__PURE__*/React.createElement("b", null, end), " of ", /*#__PURE__*/React.createElement("b", null, total), " results"));
 });
+export var PaginationResultsPerPageSelect = /*#__PURE__*/React.forwardRef(function PaginationResultsPerPageSelect(_ref2, ref) {
+  var resultsPerPageOptions = _ref2.resultsPerPageOptions,
+      currentResultsPerPage = _ref2.currentResultsPerPage,
+      handleOnChange = _ref2.handleOnChange,
+      children = _ref2.children;
+  return /*#__PURE__*/React.createElement(LabelContainer, {
+    ref: ref
+  }, children, /*#__PURE__*/React.createElement(SelectContainer, {
+    dense: true,
+    value: currentResultsPerPage,
+    onChange: function onChange(e) {
+      handleOnChange(Number(e.target.value));
+    }
+  }, resultsPerPageOptions.map(function (option) {
+    return /*#__PURE__*/React.createElement(SelectOption, {
+      key: option
+    }, option);
+  })));
+});
+export var PaginationListItemButton = /*#__PURE__*/React.forwardRef(function PaginationListItemButton(_ref3, ref) {
+  var onClick = _ref3.onClick,
+      arrow = _ref3.arrow,
+      children = _ref3.children,
+      variant = _ref3.variant,
+      active = _ref3.active,
+      isCurrentPage = _ref3.isCurrentPage,
+      tabIndex = _ref3.tabIndex;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PaginationListItem, {
+    tabIndex: tabIndex,
+    active: active //disabled
+    ,
+    currentPage: isCurrentPage,
+    ref: ref,
+    variant: variant
+  }, isCurrentPage ? children : /*#__PURE__*/React.createElement(Button, {
+    variant: "link",
+    onClick: onClick
+  }, arrow === 'left' && /*#__PURE__*/React.createElement(ChevronIcon, {
+    direction: arrow
+  }), children, arrow === 'right' && /*#__PURE__*/React.createElement(ChevronIcon, {
+    direction: arrow
+  }))));
+});
 export * from '@digigov/react-core/Pagination';
 export * from '@digigov/react-core/PaginationList';
 export * from '@digigov/react-core/PaginationListItem';
+export * from "./hooks";
+export * from "./auto";
 export { PaginationLabelContainer };
 import Pagination from '@digigov/react-core/Pagination';
+import LabelContainer from "../../form/LabelContainer";
+import SelectContainer, { SelectOption } from "../../form/SelectContainer";
+import PaginationListItem from '@digigov/react-core/PaginationListItem';
+import Button from "../../form/Button";
+import ChevronIcon from '@digigov/react-icons/ChevronIcon';
 export default Pagination;

package/es/navigation/SkipLink/SkipLink.stories.js

@@ -1,8 +1,8 @@
-import SkipLink from '@digigov/ui/navigation/SkipLink';
+import SkipLink from "./";
 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';
+export * from "./__stories__/Default";

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SkipLink } from '@digigov/ui/navigation/SkipLink';
-import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { SkipLink } from "./..";
+import { Paragraph } from "../../../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.");
 

package/es/navigation/Tabs/Tabs.stories.js

@@ -1,10 +1,12 @@
-import Tabs from '@digigov/ui/navigation/Tabs';
+import TabsBase from "./";
 export default {
   title: 'Digigov UI/navigation/Tabs',
   tags: ['Experimental'],
   description: 'The tabs component lets users navigate between related sections of content, displaying one section at a time.',
   link: 'https://guide.services.gov.gr/docs/components/tabs',
-  component: Tabs,
+  component: TabsBase,
   displayName: 'Tabs'
 };
-export * from '@digigov/ui/navigation/Tabs/__stories__/Default';
+export * from "./__stories__/Default";
+export * from "./__stories__/Dense";
+export * from "./__stories__/Auto";