@dhis2-ui/pagination 9.10.3 → 9.11.1-beta.1

package/build/es/{pagination.stories.js → pagination.prod.stories.js}

@@ -3,16 +3,23 @@ import React from 'react';
 import * as pagers from './__fixtures__/index.js';
 import { Pagination } from './pagination.js';
 const subtitle = 'Allows navigation through data displayed over several pages';
-const description = "\nPagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used.\n\n**Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.**\n\n```js\nimport { Pagination } from '@dhis2/ui'\n```\n\n_**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._\n";
+const description = `
+Pagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used.
 
+**Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.**
+
+\`\`\`js
+import { Pagination } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._
+`;
 const logOnPageChange = page => {
-  console.log("Now navigate to page ".concat(page, "..."));
+  console.log(`Now navigate to page ${page}...`);
 };
-
 const logOnPageSizeChange = pageSize => {
-  console.log("Now change page size to ".concat(pageSize, "..."));
+  console.log(`Now change page size to ${pageSize}...`);
 };
-
 export default {
   title: 'Pagination',
   component: Pagination,
@@ -30,54 +37,63 @@ export default {
     onPageSizeChange: logOnPageSizeChange
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(Pagination, args);
-
 export const Default = Template.bind({});
-Default.args = { ...pagers.atTenthPage
+Default.args = {
+  ...pagers.atTenthPage
 };
 export const Disabled = Template.bind({});
-Disabled.args = { ...pagers.atTenthPage,
+Disabled.args = {
+  ...pagers.atTenthPage,
   disabled: true
 };
 export const PagerAtFirstPage = Template.bind({});
-PagerAtFirstPage.args = { ...pagers.atFirstPage
+PagerAtFirstPage.args = {
+  ...pagers.atFirstPage
 };
 export const PagerAtLastPage = Template.bind({});
-PagerAtLastPage.args = { ...pagers.atLastPage
+PagerAtLastPage.args = {
+  ...pagers.atLastPage
 };
 export const NoTotal = Template.bind({});
-NoTotal.args = { ...pagers.noTotal
+NoTotal.args = {
+  ...pagers.noTotal
 };
 export const NoTotalAtLastPage = Template.bind({});
-NoTotalAtLastPage.args = { ...pagers.noTotalAtLastPage,
+NoTotalAtLastPage.args = {
+  ...pagers.noTotalAtLastPage,
   pageLength: 26
 };
 export const NoTotalAtLastPageWithoutPageLength = Template.bind({});
-NoTotalAtLastPageWithoutPageLength.args = { ...pagers.noTotalAtLastPage
+NoTotalAtLastPageWithoutPageLength.args = {
+  ...pagers.noTotalAtLastPage
 };
 export const WithoutPageSizeSelect = Template.bind({});
-WithoutPageSizeSelect.args = { ...pagers.atTenthPage,
+WithoutPageSizeSelect.args = {
+  ...pagers.atTenthPage,
   hidePageSizeSelect: true
 };
 export const WithoutGoToPageSelect = Template.bind({});
-WithoutGoToPageSelect.args = { ...pagers.atTenthPage,
+WithoutGoToPageSelect.args = {
+  ...pagers.atTenthPage,
   hidePageSelect: true
 };
 export const WithoutPageSummary = Template.bind({});
-WithoutPageSummary.args = { ...pagers.atTenthPage,
+WithoutPageSummary.args = {
+  ...pagers.atTenthPage,
   hidePageSummary: true
 };
 export const WithCustomPageSummary = Template.bind({});
-WithCustomPageSummary.args = { ...pagers.atTenthPage,
+WithCustomPageSummary.args = {
+  ...pagers.atTenthPage,
   pageSummaryText: interpolationObject => i18n.t('You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items', interpolationObject)
 };
 export const WithoutAnySelect = Template.bind({});
-WithoutAnySelect.args = { ...pagers.atTenthPage,
+WithoutAnySelect.args = {
+  ...pagers.atTenthPage,
   ...WithoutGoToPageSelect.args,
   ...WithoutPageSizeSelect.args
 };
-
 const InBox = _ref => {
   let {
     boxWidth,
@@ -89,17 +105,19 @@ const InBox = _ref => {
     }
   }, /*#__PURE__*/React.createElement(Pagination, args));
 };
-
 export const MediumWidth = InBox.bind({});
-MediumWidth.args = { ...pagers.atTenthPage,
+MediumWidth.args = {
+  ...pagers.atTenthPage,
   boxWidth: 500
 };
 export const NarrowWidth = InBox.bind({});
-NarrowWidth.args = { ...pagers.atTenthPage,
+NarrowWidth.args = {
+  ...pagers.atTenthPage,
   boxWidth: 100
 };
 export const RTL = args => /*#__PURE__*/React.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/React.createElement(Pagination, args));
-RTL.args = { ...pagers.atTenthPage
+RTL.args = {
+  ...pagers.atTenthPage
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/pagination",
-    "version": "9.10.3",
+    "version": "9.11.1-beta.1",
     "description": "UI Pagination",
     "repository": {
         "type": "git",
@@ -22,22 +22,22 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
         "@dhis2/d2-i18n": "^1",
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.10.3",
-        "@dhis2-ui/select": "9.10.3",
-        "@dhis2/ui-constants": "9.10.3",
-        "@dhis2/ui-icons": "9.10.3",
+        "@dhis2-ui/button": "9.11.1-beta.1",
+        "@dhis2-ui/select": "9.11.1-beta.1",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
+        "@dhis2/ui-icons": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/pagination.stories.js

@@ -1,140 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.WithoutPageSummary = exports.WithoutPageSizeSelect = exports.WithoutGoToPageSelect = exports.WithoutAnySelect = exports.WithCustomPageSummary = exports.RTL = exports.PagerAtLastPage = exports.PagerAtFirstPage = exports.NoTotalAtLastPageWithoutPageLength = exports.NoTotalAtLastPage = exports.NoTotal = exports.NarrowWidth = exports.MediumWidth = exports.Disabled = exports.Default = void 0;
-
-var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var pagers = _interopRequireWildcard(require("./__fixtures__/index.js"));
-
-var _pagination = require("./pagination.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const subtitle = 'Allows navigation through data displayed over several pages';
-const description = "\nPagination allows data to be split in pages. Paging large amounts of data avoids overwhelming users and should always be used wherever a lot of data is displayed. Pagination controls allow a user to browse through a set of data or navigate to a specific page depending on the type of pagination used.\n\n**Do not rely on pagination for navigating datasets. A user should be able to search within, sort and filter datasets too, rather than needing to click through many pages looking for the right data item.**\n\n```js\nimport { Pagination } from '@dhis2/ui'\n```\n\n_**Note**: Dropdown menus may not display properly on this page. View these demos in the 'Canvas' tab._\n";
-
-const logOnPageChange = page => {
-  console.log("Now navigate to page ".concat(page, "..."));
-};
-
-const logOnPageSizeChange = pageSize => {
-  console.log("Now change page size to ".concat(pageSize, "..."));
-};
-
-var _default = {
-  title: 'Pagination',
-  component: _pagination.Pagination,
-  parameters: {
-    componentSubtitle: subtitle,
-    docs: {
-      description: {
-        component: description
-      }
-    }
-  },
-  // Default args for stories
-  args: {
-    onPageChange: logOnPageChange,
-    onPageSizeChange: logOnPageSizeChange
-  }
-};
-exports.default = _default;
-
-const Template = args => /*#__PURE__*/_react.default.createElement(_pagination.Pagination, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-Default.args = { ...pagers.atTenthPage
-};
-const Disabled = Template.bind({});
-exports.Disabled = Disabled;
-Disabled.args = { ...pagers.atTenthPage,
-  disabled: true
-};
-const PagerAtFirstPage = Template.bind({});
-exports.PagerAtFirstPage = PagerAtFirstPage;
-PagerAtFirstPage.args = { ...pagers.atFirstPage
-};
-const PagerAtLastPage = Template.bind({});
-exports.PagerAtLastPage = PagerAtLastPage;
-PagerAtLastPage.args = { ...pagers.atLastPage
-};
-const NoTotal = Template.bind({});
-exports.NoTotal = NoTotal;
-NoTotal.args = { ...pagers.noTotal
-};
-const NoTotalAtLastPage = Template.bind({});
-exports.NoTotalAtLastPage = NoTotalAtLastPage;
-NoTotalAtLastPage.args = { ...pagers.noTotalAtLastPage,
-  pageLength: 26
-};
-const NoTotalAtLastPageWithoutPageLength = Template.bind({});
-exports.NoTotalAtLastPageWithoutPageLength = NoTotalAtLastPageWithoutPageLength;
-NoTotalAtLastPageWithoutPageLength.args = { ...pagers.noTotalAtLastPage
-};
-const WithoutPageSizeSelect = Template.bind({});
-exports.WithoutPageSizeSelect = WithoutPageSizeSelect;
-WithoutPageSizeSelect.args = { ...pagers.atTenthPage,
-  hidePageSizeSelect: true
-};
-const WithoutGoToPageSelect = Template.bind({});
-exports.WithoutGoToPageSelect = WithoutGoToPageSelect;
-WithoutGoToPageSelect.args = { ...pagers.atTenthPage,
-  hidePageSelect: true
-};
-const WithoutPageSummary = Template.bind({});
-exports.WithoutPageSummary = WithoutPageSummary;
-WithoutPageSummary.args = { ...pagers.atTenthPage,
-  hidePageSummary: true
-};
-const WithCustomPageSummary = Template.bind({});
-exports.WithCustomPageSummary = WithCustomPageSummary;
-WithCustomPageSummary.args = { ...pagers.atTenthPage,
-  pageSummaryText: interpolationObject => _d2I18n.default.t('You are at page {{page}} showing items {{firstItem}}-{{lastItem}}, but there are {{pageCount}} pages and {{total}} items', interpolationObject)
-};
-const WithoutAnySelect = Template.bind({});
-exports.WithoutAnySelect = WithoutAnySelect;
-WithoutAnySelect.args = { ...pagers.atTenthPage,
-  ...WithoutGoToPageSelect.args,
-  ...WithoutPageSizeSelect.args
-};
-
-const InBox = _ref => {
-  let {
-    boxWidth,
-    ...args
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      width: boxWidth
-    }
-  }, /*#__PURE__*/_react.default.createElement(_pagination.Pagination, args));
-};
-
-const MediumWidth = InBox.bind({});
-exports.MediumWidth = MediumWidth;
-MediumWidth.args = { ...pagers.atTenthPage,
-  boxWidth: 500
-};
-const NarrowWidth = InBox.bind({});
-exports.NarrowWidth = NarrowWidth;
-NarrowWidth.args = { ...pagers.atTenthPage,
-  boxWidth: 100
-};
-
-const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
-  dir: "rtl"
-}, /*#__PURE__*/_react.default.createElement(_pagination.Pagination, args));
-
-exports.RTL = RTL;
-RTL.args = { ...pagers.atTenthPage
-};