@tds/community-pagination - npm Package Compare versions

Comparing version 1.0.3 to 2.0.0

__tests__/Pagination.spec.jsx

@@ -8,3 +8,3 @@ import React from 'react'
   const children = (
-    <Pagination>
+    <Pagination copy="en">
       <Pagination.Panel>Content 1</Pagination.Panel>
@@ -11,0 +11,0 @@ <Pagination.Panel>Content 2</Pagination.Panel>

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+# [2.0.0](https://github.com/telus/tds-community/compare/@tds/community-pagination@1.0.3...@tds/community-pagination@2.0.0) (2019-10-10)
+
+
+### Bug Fixes
+
+* **community-pagination:** design changes ([c648bc3](https://github.com/telus/tds-community/commit/c648bc3))
+* **packages:** adding styled-components ([cf613ba](https://github.com/telus/tds-community/commit/cf613ba))
+
+
+### Features
+
+* **community-pagination:** design changes ([4d0d662](https://github.com/telus/tds-community/commit/4d0d662))
+
+
+### BREAKING CHANGES
+
+* **packages:** add styled-components to peerDependencies of Pagination
+* **community-pagination:** Default visual designs have changed
+
+
+
+
+
 ## [1.0.3](https://github.com/telus/tds-community/compare/@tds/community-pagination@1.0.2...@tds/community-pagination@1.0.3) (2019-09-17)
@@ -8,0 +31,0 @@

dist/index.cjs.js

@@ -10,32 +10,9 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
-var utilHelpers = require('@tds/util-helpers');
 var DecorativeIcon = _interopDefault(require('@tds/core-decorative-icon'));
 var A11yContent = _interopDefault(require('@tds/core-a11y-content'));
+var utilHelpers = require('@tds/util-helpers');
+var styled = _interopDefault(require('styled-components'));
+var coreResponsive = require('@tds/core-responsive');
+var coreColours = require('@tds/core-colours');
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var _extends_1 = createCommonjsModule(function (module) {
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-});
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -105,2 +82,6 @@ if (source == null) return {};
 
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
 var _typeof_1 = createCommonjsModule(function (module) {
@@ -224,4 +205,195 @@ function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
 
-var styles = {"container":"TDS_Pagination__container___yg8-G","controls":"TDS_Pagination__controls___25vtO","next":"TDS_Pagination__next___1hrJR","nextHidden":"TDS_Pagination__nextHidden___3rWrz","previous":"TDS_Pagination__previous___DubsR","previousHidden":"TDS_Pagination__previousHidden___mD4nI","buttonLabel":"TDS_Pagination__buttonLabel___1y_Fb","pagination":"TDS_Pagination__pagination___1NF8g","ellipsis":"TDS_Pagination__ellipsis___FcIy6","current":"TDS_Pagination__current___3qFyu"};
+var _extends_1 = createCommonjsModule(function (module) {
+function _extends() {
+  module.exports = _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+});
+
+var PaginationContainer = styled.div.withConfig({
+  displayName: "styles__PaginationContainer",
+  componentId: "sc-1afeh49-0"
+})({
+  opacity: '1'
+});
+var Controls = styled.div.withConfig({
+  displayName: "styles__Controls",
+  componentId: "sc-1afeh49-1"
+})(_extends_1({
+  clear: 'both',
+  display: 'flex',
+  marginTop: '20px',
+  position: 'relative',
+  justifyContent: 'center'
+}, coreResponsive.media.from('md').css({
+  justifyContent: 'flex-start'
+}), {
+  width: '100%'
+}));
+var BasePaginationContainer = styled.p.withConfig({
+  displayName: "styles__BasePaginationContainer",
+  componentId: "sc-1afeh49-2"
+})(_extends_1({
+  color: coreColours.colorTelusPurple,
+  fontSize: '1rem',
+  lineHeight: '42px'
+}, coreResponsive.media.from('md').css({
+  lineHeight: '42px',
+  padding: '0 8px 0 4px'
+})));
+var PrevPaginationContainer = styled(BasePaginationContainer).withConfig({
+  displayName: "styles__PrevPaginationContainer",
+  componentId: "sc-1afeh49-3"
+})(function (props) {
+  return {
+    display: !props.showPrevious && 'none'
+  };
+});
+var NextPaginationContainer = styled(BasePaginationContainer).withConfig({
+  displayName: "styles__NextPaginationContainer",
+  componentId: "sc-1afeh49-4"
+})(function (props) {
+  return {
+    display: !props.showNext && 'none'
+  };
+});
+var PaginationButtonStyle = styled.button.withConfig({
+  displayName: "styles__PaginationButtonStyle",
+  componentId: "sc-1afeh49-5"
+})(_extends_1({
+  color: coreColours.colorTelusPurple,
+  backgroundColor: coreColours.colorWhiteLilac,
+  border: 'none',
+  width: '44px',
+  height: '44px',
+  margin: '0',
+  textAlign: 'center',
+  padding: '0',
+  borderRadius: '4px'
+}, coreResponsive.media.from('md').css({
+  background: 'none',
+  width: 'auto',
+  height: 'auto'
+})));
+var ButtonLabel = styled.span.withConfig({
+  displayName: "styles__ButtonLabel",
+  componentId: "sc-1afeh49-6"
+})(_extends_1({
+  display: 'none'
+}, coreResponsive.media.from('md').css({
+  display: 'inline-block'
+})));
+var PaginationList = styled.ul.withConfig({
+  displayName: "styles__PaginationList",
+  componentId: "sc-1afeh49-7"
+})(_extends_1({}, coreResponsive.media.until('md').css({
+  display: 'none'
+}), {
+  display: 'flex'
+}));
+var PaginationListMobile = styled.ul.withConfig({
+  displayName: "styles__PaginationListMobile",
+  componentId: "sc-1afeh49-8"
+})(_extends_1({}, coreResponsive.media.from('md').css({
+  display: 'none'
+})));
+var GeneralPaginationButton = styled.button.withConfig({
+  displayName: "styles__GeneralPaginationButton",
+  componentId: "sc-1afeh49-9"
+})({
+  background: 'none',
+  border: 'none',
+  color: coreColours.colorTelusPurple,
+  padding: '0 5px',
+  minWidth: '32px',
+  margin: '0',
+  width: '100%',
+  height: '100%'
+});
+var GeneralPagination = styled.li.withConfig({
+  displayName: "styles__GeneralPagination",
+  componentId: "sc-1afeh49-10"
+})(_extends_1({
+  display: 'inline-block',
+  color: coreColours.colorTelusPurple,
+  backgroundColor: coreColours.colorWhiteLilac,
+  height: '44px',
+  lineHeight: '41px',
+  width: '44px',
+  minWidth: '32px',
+  '&:hover': {
+    border: "1px solid ".concat(coreColours.colorTelusPurple)
+  },
+  listStyle: 'none',
+  marginRight: '0.5rem',
+  textAlign: 'center',
+  borderRadius: '4px',
+  '&:first-child': {
+    marginLeft: '0.5rem'
+  }
+}, coreResponsive.media.from('md').css({
+  display: 'inline-block',
+  lineHeight: '44px',
+  border: "1px solid ".concat(coreColours.colorWhiteLilac),
+  minWidth: '22px'
+})));
+var PaginationEllipsis = styled(GeneralPagination).withConfig({
+  displayName: "styles__PaginationEllipsis",
+  componentId: "sc-1afeh49-11"
+})(_extends_1({
+  display: 'inline-block',
+  width: '16px',
+  height: '32px',
+  minWidth: '16px',
+  backgroundColor: 'inherit',
+  lineHeight: '28px',
+  marginRight: '0.25rem',
+  marginLeft: '-0.25rem',
+  border: 'none'
+}, coreResponsive.media.from('md').css({
+  border: 'none',
+  '&:hover': {
+    border: 'none'
+  }
+})));
+var PaginationCurrent = styled(GeneralPagination).withConfig({
+  displayName: "styles__PaginationCurrent",
+  componentId: "sc-1afeh49-12"
+})(_extends_1({
+  color: coreColours.colorWhiteLilac,
+  lineHeight: '46px',
+  verticalAlign: 'bottom',
+  padding: '0 5px',
+  border: 'none',
+  '&:hover': {
+    border: 'none'
+  },
+  backgroundColor: coreColours.colorTelusPurple
+}, coreResponsive.media.from('md').css({
+  border: "1px solid ".concat(coreColours.colorTelusPurple),
+  minWidth: '24px'
+})));
+var PanelContainer = styled.div.withConfig({
+  displayName: "styles__PanelContainer",
+  componentId: "sc-1afeh49-13"
+})({
+  display: 'flex',
+  justifyContent: 'center'
+});
+
 function hash(str) {
@@ -269,2 +441,21 @@ var hash = 5381,
 
+var copyDictionary = {
+  en: {
+    goToText: 'Go to panel number',
+    currentText: '(current)',
+    previousLabel: 'Go to previous panel',
+    previousText: 'Previous',
+    nextLabel: 'Go to next panel',
+    nextText: 'Next'
+  },
+  fr: {
+    goToText: 'Aller au panneau n°',
+    currentText: '(page actuelle)',
+    previousLabel: 'Aller au panneau précédent',
+    previousText: 'Précédent',
+    nextLabel: 'Aller au prochain panneau',
+    nextText: 'Suivant'
+  }
+};
+
 /**
@@ -286,3 +477,3 @@ * @version ./package.json
 
-    defineProperty(assertThisInitialized(_this), "checkForRegularTabs", function (index) {
+    defineProperty(assertThisInitialized(_this), "checkForRegularTabs", function (index, isMobile) {
       var _this$state = _this.state,
@@ -296,6 +487,10 @@ current = _this$state.current,
 
+      if (isMobile) {
+        return panels < 5 || index === 1 || index === panels || current < 2 && index < 3 || current > panels - 1 && index > panels - 2;
+      }
+
       return panels < 7 || index === 1 || index === panels || index === current + 1 || index === current - 1 || current < 3 && index < 5 || current > panels - 2 && index > panels - 4;
     });
 
-    defineProperty(assertThisInitialized(_this), "checkForEllipsis", function (index) {
+    defineProperty(assertThisInitialized(_this), "checkForEllipsis", function (index, isMobile) {
       var _this$state2 = _this.state,
@@ -308,9 +503,14 @@ current = _this$state2.current,
 
+      if (isMobile) {
+        return index === current - 1 || index === current + 1 || current < 2 && index === 2 || current > panels - 1 && index === panels - 5 || current === 1 && index === 3 && panels > 3;
+      }
+
       return index === current - 2 || index === current + 2 || current < 3 && index === 5 || current > panels - 2 && index === panels - 5;
     });
 
-    defineProperty(assertThisInitialized(_this), "mapTabs", function () {
-      var goToText = _this.props.copy === 'fr' ? 'Aller au panneau n°' : 'Go to panel number';
-      var currentText = _this.props.copy === 'fr' ? '(page actuelle)' : '(current)';
-      var current = _this.state.current;
+    defineProperty(assertThisInitialized(_this), "mapTabs", function (isMobile) {
+      var copy = _this.props.copy;
+      var current = _this.state.current; // new set of rules, under mobile view , right before Tablet,
+      // only show first, current, last, else, in between show ellipsis, only apply these rules under mobile view
+
       current = parseInt(current, 10) || 0;
@@ -321,13 +521,11 @@ return _this.props.children.map(function (item, i) {
         if (current === index) {
-          return React__default.createElement("li", {
-            key: hash$1("".concat(i, "-1")),
-            className: styles.current
-          }, index, React__default.createElement(A11yContent, null, currentText));
+          return React__default.createElement(PaginationCurrent, {
+            key: hash$1("".concat(i, "-1"))
+          }, index, React__default.createElement(A11yContent, null, utilHelpers.getCopy(copyDictionary, copy).currentText));
         }
 
-        if (_this.checkForRegularTabs(index)) {
-          return React__default.createElement("li", {
-            key: hash$1("".concat(i, "-3")),
-            className: styles.regular
-          }, React__default.createElement("button", {
+        if (_this.checkForRegularTabs(index, isMobile)) {
+          return React__default.createElement(GeneralPagination, {
+            key: hash$1("".concat(i, "-3"))
+          }, React__default.createElement(GeneralPaginationButton, {
             value: index,
@@ -337,10 +535,9 @@ onClick: function onClick(e) {
             },
-            "aria-label": "".concat(goToText, " ").concat(index)
+            "aria-label": "".concat(utilHelpers.getCopy(copyDictionary, copy).goToText, " ").concat(index)
           }, index));
         }
 
-        if (_this.checkForEllipsis(index)) {
-          return React__default.createElement("li", {
-            key: hash$1("".concat(i, "-4")),
-            className: styles.ellipsis
+        if (_this.checkForEllipsis(index, isMobile)) {
+          return React__default.createElement(PaginationEllipsis, {
+            key: hash$1("".concat(i, "-4"))
           }, "...");
@@ -367,21 +564,6 @@ }
     defineProperty(assertThisInitialized(_this), "handleButtonState", function () {
-      if (_this.state.current !== 1) {
-        _this.setState({
-          showPrevious: true
-        });
-      } else {
-        _this.setState({
-          showPrevious: false
-        });
-      }
-
-      if (_this.state.current !== _this.state.panels) {
-        _this.setState({
-          showNext: true
-        });
-      } else {
-        _this.setState({
-          showNext: false
-        });
-      }
+      _this.setState({
+        showPrevious: _this.state.current !== 1,
+        showNext: _this.state.current !== _this.state.panels
+      });
     });
@@ -413,2 +595,7 @@
 
+      if (!Array.isArray(children) || children.length <= 1) {
+        // Pagination should not display the Controls when there is only one panel
+        return React__default.createElement(Panel, rest, children);
+      }
+
       var current = this.state.current;
@@ -421,9 +608,5 @@ var increaseNumber = parseInt(current + 1, 10);
       var NextLabel = copy !== 'fr' ? 'Go to next panel' : 'Aller au prochain panneau';
-      return React__default.createElement("div", _extends_1({}, utilHelpers.safeRest(rest), {
-        className: styles.container
-      }), React__default.createElement(Panel, rest, children[current - 1]), React__default.createElement("div", {
-        className: styles.controls
-      }, React__default.createElement("p", {
-        className: this.state.showPrevious ? styles.previous : styles.previousHidden
-      }, React__default.createElement("button", {
+      return React__default.createElement(PaginationContainer, utilHelpers.safeRest(rest), React__default.createElement(Panel, rest, children[current - 1]), React__default.createElement(Controls, null, React__default.createElement(PrevPaginationContainer, {
+        showPrevious: this.state.showPrevious
+      }, React__default.createElement(PaginationButtonStyle, {
         value: decreaseNumber,
@@ -437,9 +620,5 @@ onClick: function onClick(e) {
         size: 16
-      }), ' ', React__default.createElement("span", {
-        className: styles.buttonLabel
-      }, previousText))), React__default.createElement("ul", {
-        className: styles.pagination
-      }, this.mapTabs()), React__default.createElement("p", {
-        className: this.state.showNext ? styles.next : styles.nextHidden
-      }, React__default.createElement("button", {
+      }), ' ', React__default.createElement(ButtonLabel, null, previousText))), React__default.createElement(PaginationList, null, this.mapTabs(false)), React__default.createElement(PaginationListMobile, null, this.mapTabs(true)), React__default.createElement(NextPaginationContainer, {
+        showNext: this.state.showNext
+      }, React__default.createElement(PaginationButtonStyle, {
         value: increaseNumber,
@@ -450,5 +629,3 @@ onClick: function onClick(e) {
         "aria-label": NextLabel
-      }, React__default.createElement("span", {
-        className: styles.buttonLabel
-      }, nextText), ' ', React__default.createElement(DecorativeIcon, {
+      }, React__default.createElement(ButtonLabel, null, nextText), " ", React__default.createElement(DecorativeIcon, {
         symbol: "chevron",
@@ -465,3 +642,3 @@ size: 16
   /**
-   * The pagination panels. Must be at least one Pagination.Panel.
+   * The pagination panels. Must be at least one `<Pagination.Panel />`.
    */
@@ -473,9 +650,6 @@ children: PropTypes.node.isRequired,
    */
-  copy: PropTypes.oneOf(['en', 'fr'])
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired
 };
-Pagination.defaultProps = {
-  copy: 'en'
-};
 Pagination.Panel = Panel;
 
 exports.default = Pagination;

dist/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { safeRest } from '@tds/util-helpers';
 import DecorativeIcon from '@tds/core-decorative-icon';
 import A11yContent from '@tds/core-a11y-content';
+import { safeRest, getCopy } from '@tds/util-helpers';
+import styled from 'styled-components';
+import { media } from '@tds/core-responsive';
+import { colorTelusPurple, colorWhiteLilac } from '@tds/core-colours';
 
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var _extends_1 = createCommonjsModule(function (module) {
-function _extends() {
-  module.exports = _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-module.exports = _extends;
-});
-
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -97,2 +74,6 @@ if (source == null) return {};
 
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
+
 var _typeof_1 = createCommonjsModule(function (module) {
@@ -216,4 +197,195 @@ function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
 
-var styles = {"container":"TDS_Pagination__container___yg8-G","controls":"TDS_Pagination__controls___25vtO","next":"TDS_Pagination__next___1hrJR","nextHidden":"TDS_Pagination__nextHidden___3rWrz","previous":"TDS_Pagination__previous___DubsR","previousHidden":"TDS_Pagination__previousHidden___mD4nI","buttonLabel":"TDS_Pagination__buttonLabel___1y_Fb","pagination":"TDS_Pagination__pagination___1NF8g","ellipsis":"TDS_Pagination__ellipsis___FcIy6","current":"TDS_Pagination__current___3qFyu"};
+var _extends_1 = createCommonjsModule(function (module) {
+function _extends() {
+  module.exports = _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+});
+
+var PaginationContainer = styled.div.withConfig({
+  displayName: "styles__PaginationContainer",
+  componentId: "sc-1afeh49-0"
+})({
+  opacity: '1'
+});
+var Controls = styled.div.withConfig({
+  displayName: "styles__Controls",
+  componentId: "sc-1afeh49-1"
+})(_extends_1({
+  clear: 'both',
+  display: 'flex',
+  marginTop: '20px',
+  position: 'relative',
+  justifyContent: 'center'
+}, media.from('md').css({
+  justifyContent: 'flex-start'
+}), {
+  width: '100%'
+}));
+var BasePaginationContainer = styled.p.withConfig({
+  displayName: "styles__BasePaginationContainer",
+  componentId: "sc-1afeh49-2"
+})(_extends_1({
+  color: colorTelusPurple,
+  fontSize: '1rem',
+  lineHeight: '42px'
+}, media.from('md').css({
+  lineHeight: '42px',
+  padding: '0 8px 0 4px'
+})));
+var PrevPaginationContainer = styled(BasePaginationContainer).withConfig({
+  displayName: "styles__PrevPaginationContainer",
+  componentId: "sc-1afeh49-3"
+})(function (props) {
+  return {
+    display: !props.showPrevious && 'none'
+  };
+});
+var NextPaginationContainer = styled(BasePaginationContainer).withConfig({
+  displayName: "styles__NextPaginationContainer",
+  componentId: "sc-1afeh49-4"
+})(function (props) {
+  return {
+    display: !props.showNext && 'none'
+  };
+});
+var PaginationButtonStyle = styled.button.withConfig({
+  displayName: "styles__PaginationButtonStyle",
+  componentId: "sc-1afeh49-5"
+})(_extends_1({
+  color: colorTelusPurple,
+  backgroundColor: colorWhiteLilac,
+  border: 'none',
+  width: '44px',
+  height: '44px',
+  margin: '0',
+  textAlign: 'center',
+  padding: '0',
+  borderRadius: '4px'
+}, media.from('md').css({
+  background: 'none',
+  width: 'auto',
+  height: 'auto'
+})));
+var ButtonLabel = styled.span.withConfig({
+  displayName: "styles__ButtonLabel",
+  componentId: "sc-1afeh49-6"
+})(_extends_1({
+  display: 'none'
+}, media.from('md').css({
+  display: 'inline-block'
+})));
+var PaginationList = styled.ul.withConfig({
+  displayName: "styles__PaginationList",
+  componentId: "sc-1afeh49-7"
+})(_extends_1({}, media.until('md').css({
+  display: 'none'
+}), {
+  display: 'flex'
+}));
+var PaginationListMobile = styled.ul.withConfig({
+  displayName: "styles__PaginationListMobile",
+  componentId: "sc-1afeh49-8"
+})(_extends_1({}, media.from('md').css({
+  display: 'none'
+})));
+var GeneralPaginationButton = styled.button.withConfig({
+  displayName: "styles__GeneralPaginationButton",
+  componentId: "sc-1afeh49-9"
+})({
+  background: 'none',
+  border: 'none',
+  color: colorTelusPurple,
+  padding: '0 5px',
+  minWidth: '32px',
+  margin: '0',
+  width: '100%',
+  height: '100%'
+});
+var GeneralPagination = styled.li.withConfig({
+  displayName: "styles__GeneralPagination",
+  componentId: "sc-1afeh49-10"
+})(_extends_1({
+  display: 'inline-block',
+  color: colorTelusPurple,
+  backgroundColor: colorWhiteLilac,
+  height: '44px',
+  lineHeight: '41px',
+  width: '44px',
+  minWidth: '32px',
+  '&:hover': {
+    border: "1px solid ".concat(colorTelusPurple)
+  },
+  listStyle: 'none',
+  marginRight: '0.5rem',
+  textAlign: 'center',
+  borderRadius: '4px',
+  '&:first-child': {
+    marginLeft: '0.5rem'
+  }
+}, media.from('md').css({
+  display: 'inline-block',
+  lineHeight: '44px',
+  border: "1px solid ".concat(colorWhiteLilac),
+  minWidth: '22px'
+})));
+var PaginationEllipsis = styled(GeneralPagination).withConfig({
+  displayName: "styles__PaginationEllipsis",
+  componentId: "sc-1afeh49-11"
+})(_extends_1({
+  display: 'inline-block',
+  width: '16px',
+  height: '32px',
+  minWidth: '16px',
+  backgroundColor: 'inherit',
+  lineHeight: '28px',
+  marginRight: '0.25rem',
+  marginLeft: '-0.25rem',
+  border: 'none'
+}, media.from('md').css({
+  border: 'none',
+  '&:hover': {
+    border: 'none'
+  }
+})));
+var PaginationCurrent = styled(GeneralPagination).withConfig({
+  displayName: "styles__PaginationCurrent",
+  componentId: "sc-1afeh49-12"
+})(_extends_1({
+  color: colorWhiteLilac,
+  lineHeight: '46px',
+  verticalAlign: 'bottom',
+  padding: '0 5px',
+  border: 'none',
+  '&:hover': {
+    border: 'none'
+  },
+  backgroundColor: colorTelusPurple
+}, media.from('md').css({
+  border: "1px solid ".concat(colorTelusPurple),
+  minWidth: '24px'
+})));
+var PanelContainer = styled.div.withConfig({
+  displayName: "styles__PanelContainer",
+  componentId: "sc-1afeh49-13"
+})({
+  display: 'flex',
+  justifyContent: 'center'
+});
+
 function hash(str) {
@@ -261,2 +433,21 @@ var hash = 5381,
 
+var copyDictionary = {
+  en: {
+    goToText: 'Go to panel number',
+    currentText: '(current)',
+    previousLabel: 'Go to previous panel',
+    previousText: 'Previous',
+    nextLabel: 'Go to next panel',
+    nextText: 'Next'
+  },
+  fr: {
+    goToText: 'Aller au panneau n°',
+    currentText: '(page actuelle)',
+    previousLabel: 'Aller au panneau précédent',
+    previousText: 'Précédent',
+    nextLabel: 'Aller au prochain panneau',
+    nextText: 'Suivant'
+  }
+};
+
 /**
@@ -278,3 +469,3 @@ * @version ./package.json
 
-    defineProperty(assertThisInitialized(_this), "checkForRegularTabs", function (index) {
+    defineProperty(assertThisInitialized(_this), "checkForRegularTabs", function (index, isMobile) {
       var _this$state = _this.state,
@@ -288,6 +479,10 @@ current = _this$state.current,
 
+      if (isMobile) {
+        return panels < 5 || index === 1 || index === panels || current < 2 && index < 3 || current > panels - 1 && index > panels - 2;
+      }
+
       return panels < 7 || index === 1 || index === panels || index === current + 1 || index === current - 1 || current < 3 && index < 5 || current > panels - 2 && index > panels - 4;
     });
 
-    defineProperty(assertThisInitialized(_this), "checkForEllipsis", function (index) {
+    defineProperty(assertThisInitialized(_this), "checkForEllipsis", function (index, isMobile) {
       var _this$state2 = _this.state,
@@ -300,9 +495,14 @@ current = _this$state2.current,
 
+      if (isMobile) {
+        return index === current - 1 || index === current + 1 || current < 2 && index === 2 || current > panels - 1 && index === panels - 5 || current === 1 && index === 3 && panels > 3;
+      }
+
       return index === current - 2 || index === current + 2 || current < 3 && index === 5 || current > panels - 2 && index === panels - 5;
     });
 
-    defineProperty(assertThisInitialized(_this), "mapTabs", function () {
-      var goToText = _this.props.copy === 'fr' ? 'Aller au panneau n°' : 'Go to panel number';
-      var currentText = _this.props.copy === 'fr' ? '(page actuelle)' : '(current)';
-      var current = _this.state.current;
+    defineProperty(assertThisInitialized(_this), "mapTabs", function (isMobile) {
+      var copy = _this.props.copy;
+      var current = _this.state.current; // new set of rules, under mobile view , right before Tablet,
+      // only show first, current, last, else, in between show ellipsis, only apply these rules under mobile view
+
       current = parseInt(current, 10) || 0;
@@ -313,13 +513,11 @@ return _this.props.children.map(function (item, i) {
         if (current === index) {
-          return React.createElement("li", {
-            key: hash$1("".concat(i, "-1")),
-            className: styles.current
-          }, index, React.createElement(A11yContent, null, currentText));
+          return React.createElement(PaginationCurrent, {
+            key: hash$1("".concat(i, "-1"))
+          }, index, React.createElement(A11yContent, null, getCopy(copyDictionary, copy).currentText));
         }
 
-        if (_this.checkForRegularTabs(index)) {
-          return React.createElement("li", {
-            key: hash$1("".concat(i, "-3")),
-            className: styles.regular
-          }, React.createElement("button", {
+        if (_this.checkForRegularTabs(index, isMobile)) {
+          return React.createElement(GeneralPagination, {
+            key: hash$1("".concat(i, "-3"))
+          }, React.createElement(GeneralPaginationButton, {
             value: index,
@@ -329,10 +527,9 @@ onClick: function onClick(e) {
             },
-            "aria-label": "".concat(goToText, " ").concat(index)
+            "aria-label": "".concat(getCopy(copyDictionary, copy).goToText, " ").concat(index)
           }, index));
         }
 
-        if (_this.checkForEllipsis(index)) {
-          return React.createElement("li", {
-            key: hash$1("".concat(i, "-4")),
-            className: styles.ellipsis
+        if (_this.checkForEllipsis(index, isMobile)) {
+          return React.createElement(PaginationEllipsis, {
+            key: hash$1("".concat(i, "-4"))
           }, "...");
@@ -359,21 +556,6 @@ }
     defineProperty(assertThisInitialized(_this), "handleButtonState", function () {
-      if (_this.state.current !== 1) {
-        _this.setState({
-          showPrevious: true
-        });
-      } else {
-        _this.setState({
-          showPrevious: false
-        });
-      }
-
-      if (_this.state.current !== _this.state.panels) {
-        _this.setState({
-          showNext: true
-        });
-      } else {
-        _this.setState({
-          showNext: false
-        });
-      }
+      _this.setState({
+        showPrevious: _this.state.current !== 1,
+        showNext: _this.state.current !== _this.state.panels
+      });
     });
@@ -405,2 +587,7 @@
 
+      if (!Array.isArray(children) || children.length <= 1) {
+        // Pagination should not display the Controls when there is only one panel
+        return React.createElement(Panel, rest, children);
+      }
+
       var current = this.state.current;
@@ -413,9 +600,5 @@ var increaseNumber = parseInt(current + 1, 10);
       var NextLabel = copy !== 'fr' ? 'Go to next panel' : 'Aller au prochain panneau';
-      return React.createElement("div", _extends_1({}, safeRest(rest), {
-        className: styles.container
-      }), React.createElement(Panel, rest, children[current - 1]), React.createElement("div", {
-        className: styles.controls
-      }, React.createElement("p", {
-        className: this.state.showPrevious ? styles.previous : styles.previousHidden
-      }, React.createElement("button", {
+      return React.createElement(PaginationContainer, safeRest(rest), React.createElement(Panel, rest, children[current - 1]), React.createElement(Controls, null, React.createElement(PrevPaginationContainer, {
+        showPrevious: this.state.showPrevious
+      }, React.createElement(PaginationButtonStyle, {
         value: decreaseNumber,
@@ -429,9 +612,5 @@ onClick: function onClick(e) {
         size: 16
-      }), ' ', React.createElement("span", {
-        className: styles.buttonLabel
-      }, previousText))), React.createElement("ul", {
-        className: styles.pagination
-      }, this.mapTabs()), React.createElement("p", {
-        className: this.state.showNext ? styles.next : styles.nextHidden
-      }, React.createElement("button", {
+      }), ' ', React.createElement(ButtonLabel, null, previousText))), React.createElement(PaginationList, null, this.mapTabs(false)), React.createElement(PaginationListMobile, null, this.mapTabs(true)), React.createElement(NextPaginationContainer, {
+        showNext: this.state.showNext
+      }, React.createElement(PaginationButtonStyle, {
         value: increaseNumber,
@@ -442,5 +621,3 @@ onClick: function onClick(e) {
         "aria-label": NextLabel
-      }, React.createElement("span", {
-        className: styles.buttonLabel
-      }, nextText), ' ', React.createElement(DecorativeIcon, {
+      }, React.createElement(ButtonLabel, null, nextText), " ", React.createElement(DecorativeIcon, {
         symbol: "chevron",
@@ -457,3 +634,3 @@ size: 16
   /**
-   * The pagination panels. Must be at least one Pagination.Panel.
+   * The pagination panels. Must be at least one `<Pagination.Panel />`.
    */
@@ -465,9 +642,6 @@ children: PropTypes.node.isRequired,
    */
-  copy: PropTypes.oneOf(['en', 'fr'])
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired
 };
-Pagination.defaultProps = {
-  copy: 'en'
-};
 Pagination.Panel = Panel;
 
 export default Pagination;

index.cjs.js

@@ -1,4 +0,3 @@
-require('./dist/index.css')
 const Pagination = require('./dist/index.cjs')
 
 module.exports = Pagination

index.es.js

@@ -1,4 +0,3 @@
-import './dist/index.css'
 import Pagination from './dist/index.es'
 
 export default Pagination

package.json

 {
   "name": "@tds/community-pagination",
-  "version": "1.0.3",
+  "version": "2.0.0",
   "description": "",
@@ -25,8 +25,10 @@ "main": "index.cjs.js",
     "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "react-dom": "^16.8.2",
+    "styled-components": "^4.1.3"
   },
   "dependencies": {
     "@tds/core-a11y-content": "^2.0.3",
-    "@tds/core-colours": "^1.1.2",
+    "@tds/core-colours": "^2.1.0",
     "@tds/core-decorative-icon": "^1.2.0",
+    "@tds/core-responsive": "^1.1.0",
     "@tds/util-helpers": "^1.2.0",
@@ -36,3 +38,3 @@ "prop-types": "^15.6.2",
   },
-  "gitHead": "1b83642ae253da64e416639657619eb3a07d129a"
+  "gitHead": "e5d825b609a1c767ab298e972c5bfa984963edcf"
 }

Pagination.jsx

 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import { safeRest } from '@tds/util-helpers'
 import DecorativeIcon from '@tds/core-decorative-icon'
 import A11yContent from '@tds/core-a11y-content'
+import { getCopy, safeRest } from '@tds/util-helpers'
+
 import Panel from './Panel/Panel'
-import styles from './Pagination.scss'
+import {
+  PaginationContainer,
+  Controls,
+  PaginationButtonStyle,
+  ButtonLabel,
+  PaginationList,
+  PaginationListMobile,
+  GeneralPagination,
+  GeneralPaginationButton,
+  PaginationCurrent,
+  PaginationEllipsis,
+  PrevPaginationContainer,
+  NextPaginationContainer,
+} from './styles'
 import hash from './hash'
+import copyDictionary from './paginationText'
 
@@ -29,3 +44,3 @@ /**
 
-  checkForRegularTabs = index => {
+  checkForRegularTabs = (index, isMobile) => {
     const { current, panels } = this.state
@@ -37,2 +52,12 @@ // Check if there are less than 7 panels,
     // and the inverse if current within two of total and index is greater than minus 4 of total
+    if (isMobile) {
+      return (
+        panels < 5 ||
+        index === 1 ||
+        index === panels ||
+        (current < 2 && index < 3) ||
+        (current > panels - 1 && index > panels - 2)
+      )
+    }
+
     return (
@@ -49,3 +74,3 @@ panels < 7 ||
 
-  checkForEllipsis = index => {
+  checkForEllipsis = (index, isMobile) => {
     const { current, panels } = this.state
@@ -56,2 +81,11 @@ // Check if we should render an ellipsis
     // and the inverse if current is within two of total and index is total minus 5
+    if (isMobile) {
+      return (
+        index === current - 1 ||
+        index === current + 1 ||
+        (current < 2 && index === 2) ||
+        (current > panels - 1 && index === panels - 5) ||
+        (current === 1 && index === 3 && panels > 3)
+      )
+    }
     return (
@@ -65,6 +99,7 @@ index === current - 2 ||
 
-  mapTabs = () => {
-    const goToText = this.props.copy === 'fr' ? 'Aller au panneau n°' : 'Go to panel number'
-    const currentText = this.props.copy === 'fr' ? '(page actuelle)' : '(current)'
+  mapTabs = isMobile => {
+    const { copy } = this.props
     let { current } = this.state
+    // new set of rules, under mobile view , right before Tablet,
+    // only show first, current, last, else, in between show ellipsis, only apply these rules under mobile view
     current = parseInt(current, 10) || 0
@@ -75,27 +110,23 @@ return this.props.children.map((item, i) => {
         return (
-          <li key={hash(`${i}-1`)} className={styles.current}>
+          <PaginationCurrent key={hash(`${i}-1`)}>
             {index}
-            <A11yContent>{currentText}</A11yContent>
-          </li>
+            <A11yContent>{getCopy(copyDictionary, copy).currentText}</A11yContent>
+          </PaginationCurrent>
         )
       }
-      if (this.checkForRegularTabs(index)) {
+      if (this.checkForRegularTabs(index, isMobile)) {
         return (
-          <li key={hash(`${i}-3`)} className={styles.regular}>
-            <button
+          <GeneralPagination key={hash(`${i}-3`)}>
+            <GeneralPaginationButton
               value={index}
               onClick={e => this.handleClick(e)}
-              aria-label={`${goToText} ${index}`}
+              aria-label={`${getCopy(copyDictionary, copy).goToText} ${index}`}
             >
               {index}
-            </button>
-          </li>
+            </GeneralPaginationButton>
+          </GeneralPagination>
         )
       }
-      if (this.checkForEllipsis(index)) {
-        return (
-          <li key={hash(`${i}-4`)} className={styles.ellipsis}>
-            ...
-          </li>
-        )
+      if (this.checkForEllipsis(index, isMobile)) {
+        return <PaginationEllipsis key={hash(`${i}-4`)}>...</PaginationEllipsis>
       }
@@ -117,12 +148,6 @@
   handleButtonState = () => {
-    if (this.state.current !== 1) {
-      this.setState({ showPrevious: true })
-    } else {
-      this.setState({ showPrevious: false })
-    }
-    if (this.state.current !== this.state.panels) {
-      this.setState({ showNext: true })
-    } else {
-      this.setState({ showNext: false })
-    }
+    this.setState({
+      showPrevious: this.state.current !== 1,
+      showNext: this.state.current !== this.state.panels,
+    })
   }
@@ -132,2 +157,8 @@
     const { children, copy, ...rest } = this.props
+
+    if (!Array.isArray(children) || children.length <= 1) {
+      // Pagination should not display the Controls when there is only one panel
+      return <Panel {...rest}>{children}</Panel>
+    }
+
     const { current } = this.state
@@ -141,7 +172,7 @@ const increaseNumber = parseInt(current + 1, 10)
     return (
-      <div {...safeRest(rest)} className={styles.container}>
+      <PaginationContainer {...safeRest(rest)}>
         <Panel {...rest}>{children[current - 1]}</Panel>
-        <div className={styles.controls}>
-          <p className={this.state.showPrevious ? styles.previous : styles.previousHidden}>
-            <button
+        <Controls>
+          <PrevPaginationContainer showPrevious={this.state.showPrevious}>
+            <PaginationButtonStyle
               value={decreaseNumber}
@@ -152,8 +183,9 @@ onClick={e => this.handleClick(e)}
               <DecorativeIcon symbol="leftChevron" size={16} />{' '}
-              <span className={styles.buttonLabel}>{previousText}</span>
-            </button>
-          </p>
-          <ul className={styles.pagination}>{this.mapTabs()}</ul>
-          <p className={this.state.showNext ? styles.next : styles.nextHidden}>
-            <button
+              <ButtonLabel>{previousText}</ButtonLabel>
+            </PaginationButtonStyle>
+          </PrevPaginationContainer>
+          <PaginationList>{this.mapTabs(false)}</PaginationList>
+          <PaginationListMobile>{this.mapTabs(true)}</PaginationListMobile>
+          <NextPaginationContainer showNext={this.state.showNext}>
+            <PaginationButtonStyle
               value={increaseNumber}
@@ -163,8 +195,7 @@ onClick={e => this.handleClick(e)}
             >
-              <span className={styles.buttonLabel}>{nextText}</span>{' '}
-              <DecorativeIcon symbol="chevron" size={16} />
-            </button>
-          </p>
-        </div>
-      </div>
+              <ButtonLabel>{nextText}</ButtonLabel> <DecorativeIcon symbol="chevron" size={16} />
+            </PaginationButtonStyle>
+          </NextPaginationContainer>
+        </Controls>
+      </PaginationContainer>
     )
@@ -176,3 +207,3 @@ }
   /**
-   * The pagination panels. Must be at least one Pagination.Panel.
+   * The pagination panels. Must be at least one `<Pagination.Panel />`.
    */
@@ -183,11 +214,7 @@ children: PropTypes.node.isRequired,
    */
-  copy: PropTypes.oneOf(['en', 'fr']),
+  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
 }
 
-Pagination.defaultProps = {
-  copy: 'en',
-}
-
 Pagination.Panel = Panel
 
 export default Pagination

Pagination.md

@@ -7,4 +7,9 @@ ### Usage Criteria
 - Style your content within Panel however you wish
-- copy can be passed in as a prop, en is set as default
 
+### Pagination usage and length
+
+Depending on the viewport and the amount of panels, the `Pagination` component may render elipsis if there are many pages. The below two examples demonstrate this on both desktop and mobile.
+
+Note that the `copy` prop must be provided at all times for the correct accessible text.
+
 ```jsx
@@ -15,2 +20,11 @@ <Pagination copy="en">
   <Pagination.Panel>Content 3: Pagination Panels take &lt;div /&gt; tags, image tags, heading tags and so on.</Pagination.Panel>
+</Pagination>
+<Box inset={4}> </Box>
+```
+
+```jsx
+<Pagination copy="en">
+  <Pagination.Panel>Content 1: any type of content can be used here.</Pagination.Panel>
+  <Pagination.Panel>Content 2: use responsibly.</Pagination.Panel>
+  <Pagination.Panel>Content 3: Pagination Panels take &lt;div /&gt; tags, image tags, heading tags and so on.</Pagination.Panel>
   <Pagination.Panel>Content 4: <div><Heading level="h2">This is an h2 heading</Heading></div></Pagination.Panel>
@@ -17,0 +31,0 @@ <Pagination.Panel>Content 5: `copy` can be passed in as a prop, "en" is the default, "fr" is the other option.</Pagination.Panel>

Panel/Panel.jsx

@@ -1,3 +0,1 @@
-/* eslint-disable react/no-unused-prop-types */
-
 import React from 'react'
@@ -4,0 +2,0 @@ import PropTypes from 'prop-types'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

119227

increased by122.51%

Lines of code

1521

increased by35.8%

Worsened metrics

Dependency count

10

increased by25%

Dependency changes

• + Added@tds/core-responsive@^1.1.0

• + Added@emotion/is-prop-valid@0.8.8(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@tds/core-colours@2.2.4(transitive)

• + Addedcss-to-react-native@2.3.2(transitive)

• + Addedis-what@3.14.1(transitive)

• + Addedmemoize-one@5.2.1(transitive)

• + Addedmerge-anything@2.4.4(transitive)

• + Addedpostcss-value-parser@3.3.1(transitive)

• + Addedstyled-components@4.4.1(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• - Removed@emotion/is-prop-valid@1.3.1(transitive)

• - Removed@emotion/memoize@0.9.0(transitive)

• - Removed@emotion/stylis@0.8.5(transitive)

• - Removed@tds/core-colours@1.1.2(transitive)

• - Removedcss-to-react-native@3.2.0(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedpostcss-value-parser@4.2.0(transitive)

• - Removedshallowequal@1.1.0(transitive)

• - Removedstyled-components@5.3.11(transitive)

• Updated@tds/core-colours@^2.1.0