@occmundial/occ-atomic 3.0.0-beta.30 → 3.0.0-beta.31

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.0.0-beta.31](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.30...v3.0.0-beta.31) (2024-07-16)
+
+
+### Bug Fixes
+
+* Change styles and behavior of the Pager component ([5e65e50](https://github.com/occmundial/occ-atomic/commit/5e65e505f31f77425d5de127ae4c83b007a88d5a))
+* Fix styles of button with only an icon on the right ([f77f44e](https://github.com/occmundial/occ-atomic/commit/f77f44e7d0b7c40ec0bd388712acfdcde1a45489))
+
+
+### BREAKING CHANGES
+
+* Rename Pager's prop names.
+The logic and behavior of the Pager has changed too, now is the parent component the responsible for handling the page number, the Pager is only a modifier and no longer has an internal state and management of the current page.
+
 # [3.0.0-beta.30](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.29...v3.0.0-beta.30) (2024-07-16)
 
 

package/build/Button/Button.js

@@ -89,7 +89,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
       if (block) classNames += " ".concat(classes.block);
       if (className) classNames += " ".concat(className);
 
-      if (!children && icon) {
+      if (!children && (icon || iconRight)) {
         classNames += " ".concat(classes.iconOnly);
         if (round) classNames += " ".concat(classes.round);
       }

package/build/Button/__snapshots__/Button.test.js.snap

@@ -136,6 +136,7 @@ Object {
   },
   "iconOnly": Object {
     "& span span, & svg": Object {
+      "marginLeft": 0,
       "marginRight": 0,
     },
     "padding": Array [

package/build/Button/styles.js

@@ -353,7 +353,8 @@ var _default = {
   iconOnly: {
     padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']],
     '& span span, & svg': {
-      marginRight: 0
+      marginRight: 0,
+      marginLeft: 0
     }
   },
   loadIcon: {

package/build/Pager/Page/Page.js

@@ -15,10 +15,12 @@ var Page = function Page(_ref) {
   var classes = _ref.classes,
       onClick = _ref.onClick,
       selected = _ref.selected,
-      page = _ref.page;
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    className: "".concat(classes.li).concat(selected ? " ".concat(classes.active) : ''),
-    tabIndex: "0",
+      page = _ref.page,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/_react["default"].createElement("button", {
+    className: "".concat(classes.page).concat(selected ? " ".concat(classes.active) : '').concat(disabled ? " ".concat(classes.disabled) : '').concat(!onClick ? " ".concat(classes["static"]) : ''),
+    disabled: disabled,
+    tabIndex: onClick ? 0 : -1,
     onClick: onClick
   }, page);
 };
@@ -27,7 +29,8 @@ Page.propTypes = {
   classes: _propTypes["default"].object,
   onClick: _propTypes["default"].func,
   selected: _propTypes["default"].bool,
-  page: _propTypes["default"].number
+  page: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  disabled: _propTypes["default"].bool
 };
 var _default = Page;
 exports["default"] = _default;

package/build/Pager/Page/Page.test.js

@@ -22,31 +22,35 @@ var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Page", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
     expect(wrapper).toMatchSnapshot();
   });
-  it('renders the li', function () {
+  it('renders the page element', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
-    expect(wrapper.find('.li').length).toBe(1);
+    expect(wrapper.find('.page').length).toBe(1);
   });
-  it('shows the li as active', function () {
+  it('shows the page element as active', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-      classes: classes
+      classes: classes,
+      page: 1
     }));
-    expect(wrapper.find('.li').hasClass('active')).toBe(false);
+    expect(wrapper.find('.page').hasClass('active')).toBe(false);
     wrapper.setProps({
       selected: true
     });
-    expect(wrapper.find('.li').hasClass('active')).toBe(true);
+    expect(wrapper.find('.page').hasClass('active')).toBe(true);
   });
   it('calls the onClick function', function () {
     var onClick = jest.fn();
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Page["default"], {
       onClick: onClick,
-      classes: classes
+      classes: classes,
+      page: 1
     }));
     wrapper.simulate('click');
     expect(onClick.mock.calls.length).toBe(1);

package/build/Pager/Page/__snapshots__/Page.test.js.snap

@@ -5,22 +5,46 @@ exports[`Page matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Page styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "background": "#1476fb !important",
-    "color": "#ffffff",
+    "background": "#0059CD !important",
+    "color": "#fff !important",
+    "zIndex": 1,
   },
-  "li": Object {
+  "disabled": Object {
+    "background": "transparent",
+    "color": "#878A9F",
+    "pointerEvents": "none",
+  },
+  "page": Object {
+    "&:active": Object {
+      "background": "hsl(234 75.4% 12.7% / 0.1)",
+    },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    },
     "&:hover": Object {
-      "background": "#ECECEE",
+      "background": "hsl(234 75.4% 12.7% / 0.05)",
     },
-    "borderRadius": "13px",
+    "alignItems": "center",
+    "background": "transparent",
+    "border": "none",
+    "borderRadius": "4px",
+    "color": "#5A5D7B",
     "cursor": "pointer",
-    "display": "inline-block",
-    "marginLeft": "4px",
-    "marginRight": "4px",
-    "outline": "0",
-    "padding": "2px 11px",
+    "display": "flex",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+    "gap": "8px",
+    "justifyContent": "center",
+    "minWidth": 45,
+    "outline": "none",
+    "padding": Array [
+      "12px",
+      "8px",
+    ],
     "transition": "0.3s all",
   },
+  "static": Object {
+    "pointerEvents": "none",
+  },
 }
 `;
 

package/build/Pager/Page/styles.js

@@ -5,28 +5,62 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../../tokens/colors.json"));
 
-var _li;
+var _fonts = _interopRequireDefault(require("../../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _borderRadius = _interopRequireDefault(require("../../tokens/borderRadius.json"));
+
+var _shadows = _interopRequireDefault(require("../../tokens/shadows.json"));
+
+var _fonts2 = _interopRequireDefault(require("../../subatomic/fonts"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var objectToFontValue = function objectToFontValue(font) {
+  return "".concat(font.fontWeight, " ").concat(font.fontSize, "/").concat(font.lineHeight, " ").concat(_fonts2["default"].body);
+};
 
 var _default = {
-  li: (_li = {
-    display: 'inline-block',
+  page: {
+    display: 'flex',
     cursor: 'pointer',
-    padding: '2px 11px',
-    marginLeft: '4px',
-    marginRight: '4px',
-    borderRadius: '13px'
-  }, _defineProperty(_li, "cursor", 'pointer'), _defineProperty(_li, "transition", '0.3s all'), _defineProperty(_li, "outline", '0'), _defineProperty(_li, '&:hover', {
-    background: '#ECECEE'
-  }), _li),
+    minWidth: 45,
+    padding: [_spacing["default"]['size-3'], _spacing["default"]['size-2']],
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: _spacing["default"]['size-2'],
+    borderRadius: _borderRadius["default"]['br-xs'],
+    background: 'transparent',
+    font: objectToFontValue(_fonts["default"]['button-small']),
+    color: _colors["default"].text.corp.secondary,
+    transition: '0.3s all',
+    '&:focus-visible': {
+      boxShadow: _shadows["default"]['focus-corp']
+    },
+    outline: 'none',
+    border: 'none',
+    '&:hover': {
+      background: _colors["default"].bg.action.ghost.hover
+    },
+    '&:active': {
+      background: _colors["default"].bg.action.ghost.active
+    }
+  },
+  "static": {
+    pointerEvents: 'none'
+  },
   active: {
-    background: "".concat(_colors["default"].blue, " !important"),
-    color: _colors["default"].white
+    background: "".concat(_colors["default"].bg.action.brand["default"], " !important"),
+    color: "".concat(_colors["default"].text.white.primary, " !important"),
+    zIndex: 1
+  },
+  disabled: {
+    pointerEvents: 'none',
+    background: 'transparent',
+    color: _colors["default"].text.corp.disabled
   }
 };
 exports["default"] = _default;

package/build/Pager/Pager.js

@@ -5,258 +5,180 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = Pager;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _Button = _interopRequireDefault(require("../Button"));
 
 var _Page = _interopRequireDefault(require("./Page"));
 
-var _Break = _interopRequireDefault(require("./Break"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+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 _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/** This pager allows the user to navigate between pages with 'Next' and 'Previous' buttons and numerical buttons. */
+function Pager(_ref) {
+  var classes = _ref.classes,
+      currentPage = _ref.currentPage,
+      onPageChange = _ref.onPageChange,
+      _ref$pageCount = _ref.pageCount,
+      pageCount = _ref$pageCount === void 0 ? 10 : _ref$pageCount,
+      _ref$centerPages = _ref.centerPages,
+      centerPages = _ref$centerPages === void 0 ? 3 : _ref$centerPages,
+      _ref$marginPages = _ref.marginPages,
+      marginPages = _ref$marginPages === void 0 ? 2 : _ref$marginPages,
+      _ref$previousLabel = _ref.previousLabel,
+      previousLabel = _ref$previousLabel === void 0 ? 'Previous' : _ref$previousLabel,
+      _ref$nextLabel = _ref.nextLabel,
+      nextLabel = _ref$nextLabel === void 0 ? 'Next' : _ref$nextLabel,
+      _ref$breakSymbol = _ref.breakSymbol,
+      breakSymbol = _ref$breakSymbol === void 0 ? '...' : _ref$breakSymbol,
+      hideNumbers = _ref.hideNumbers,
+      disabled = _ref.disabled,
+      className = _ref.className;
+  var handlePageSelected = (0, _react.useCallback)(function (newPage) {
+    if (currentPage === newPage) return;
+    if (onPageChange) onPageChange(newPage);
+  }, [currentPage, onPageChange]);
+  (0, _react.useEffect)(function () {
+    if (currentPage > pageCount || currentPage < 1) {
+      handlePageSelected(1);
+    }
+  }, [currentPage, pageCount, handlePageSelected]);
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+  var handlePrevPage = function handlePrevPage() {
+    if (currentPage > 1) handlePageSelected(currentPage - 1);
+  };
 
-/** This pager allows the user to navigate between pages with 'Next' and 'Previous' buttons and numerical buttons. */
-var Pager = /*#__PURE__*/function (_React$Component) {
-  _inherits(Pager, _React$Component);
+  var handleNextPage = function handleNextPage() {
+    if (currentPage < pageCount) handlePageSelected(currentPage + 1);
+  };
 
-  var _super = _createSuper(Pager);
+  var addPage = function addPage(page) {
+    var pageData = {
+      key: page.toString(),
+      type: 'page',
+      selected: currentPage === page
+    };
+    return pageData;
+  };
 
-  function Pager(props) {
-    var _this;
+  var getStartAndEndPages = function getStartAndEndPages() {
+    var startPage = Math.max(currentPage - Math.floor(centerPages / 2), marginPages + 1);
+    var endPage = Math.min(startPage + centerPages - 1, pageCount - marginPages);
 
-    _classCallCheck(this, Pager);
+    if (endPage === pageCount - marginPages) {
+      startPage = Math.max(endPage - centerPages + 1, marginPages + 1);
+    }
 
-    _this = _super.call(this, props);
-    _this.state = {
-      selected: props.initialPage ? props.initialPage : props.forcePage ? props.forcePage : 1
+    return {
+      startPage: startPage,
+      endPage: endPage
     };
-    _this.callCallback = _this.callCallback.bind(_assertThisInitialized(_this));
-    _this.handlePrevPage = _this.handlePrevPage.bind(_assertThisInitialized(_this));
-    _this.handleNextPage = _this.handleNextPage.bind(_assertThisInitialized(_this));
-    _this.handlePageSelected = _this.handlePageSelected.bind(_assertThisInitialized(_this));
-    _this.getPageElement = _this.getPageElement.bind(_assertThisInitialized(_this));
-    _this.pagination = _this.pagination.bind(_assertThisInitialized(_this));
-    return _this;
-  }
+  };
 
-  _createClass(Pager, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props = this.props,
-          initialPage = _this$props.initialPage,
-          disableInitialCallback = _this$props.disableInitialCallback;
+  function getPagination() {
+    var elements = [];
 
-      if (typeof initialPage != 'undefined' && !disableInitialCallback) {
-        this.callCallback(initialPage);
+    if (pageCount <= centerPages + marginPages * 2) {
+      for (var i = 1; i <= pageCount; i++) {
+        elements.push(addPage(i));
       }
-    }
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(props) {
-      if (typeof props.forcePage != 'undefined' && this.props.forcePage != props.forcePage) {
-        this.setState({
-          selected: props.forcePage
-        });
+    } else {
+      for (var _i = 1; _i <= marginPages; _i++) {
+        elements.push(addPage(_i));
       }
-    }
-  }, {
-    key: "callCallback",
-    value: function callCallback(selectedItem) {
-      var onPageChange = this.props.onPageChange;
-
-      if (typeof onPageChange != 'undefined' && typeof onPageChange == 'function') {
-        onPageChange({
-          selected: selectedItem
+
+      var _getStartAndEndPages = getStartAndEndPages(),
+          startPage = _getStartAndEndPages.startPage,
+          endPage = _getStartAndEndPages.endPage;
+
+      if (currentPage > marginPages + 1 && startPage > marginPages + 1) {
+        elements.push({
+          key: 'left-break',
+          type: 'break'
         });
       }
-    }
-  }, {
-    key: "handlePrevPage",
-    value: function handlePrevPage(e) {
-      var selected = this.state.selected;
-      e.preventDefault ? e.preventDefault() : e.returnValue = false;
-
-      if (selected > 1) {
-        this.handlePageSelected(selected - 1, e);
+
+      for (var _i2 = startPage; _i2 <= endPage; _i2++) {
+        elements.push(addPage(_i2));
       }
-    }
-  }, {
-    key: "handleNextPage",
-    value: function handleNextPage(e) {
-      var selected = this.state.selected;
-      var pageCount = this.props.pageCount;
-      e.preventDefault ? e.preventDefault() : e.returnValue = false;
-
-      if (selected < pageCount) {
-        this.handlePageSelected(selected + 1, e);
+
+      if (currentPage < pageCount - marginPages - 1) {
+        elements.push({
+          key: 'right-break',
+          type: 'break'
+        });
+      }
+
+      for (var _i3 = pageCount - marginPages + 1; _i3 <= pageCount; _i3++) {
+        elements.push(addPage(_i3));
       }
     }
-  }, {
-    key: "handlePageSelected",
-    value: function handlePageSelected(selected, e) {
-      e.preventDefault ? e.preventDefault() : e.returnValue = false;
-      if (this.state.selected == selected) return;
-      this.setState({
-        selected: selected
-      });
-      this.callCallback(selected);
-    }
-  }, {
-    key: "getPageElement",
-    value: function getPageElement(index) {
-      var selected = this.state.selected;
+
+    return elements;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("ul", {
+    className: "".concat(classes.pager).concat(className ? " ".concat(className) : '')
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    className: classes.prev,
+    disabled: currentPage === 1 || disabled,
+    theme: "secondary",
+    onClick: handlePrevPage,
+    iconLeft: "chevron-left",
+    size: !previousLabel ? 'lg' : 'sm'
+  }, previousLabel), !hideNumbers && getPagination().map(function (_ref2) {
+    var key = _ref2.key,
+        type = _ref2.type,
+        selected = _ref2.selected;
+
+    if (type === 'page') {
       return /*#__PURE__*/_react["default"].createElement(_Page["default"], {
-        key: index,
-        onClick: this.handlePageSelected.bind(null, index),
-        selected: selected == index,
-        page: index
+        key: key,
+        onClick: function onClick() {
+          return handlePageSelected(Number(key));
+        },
+        selected: selected,
+        page: Number(key),
+        disabled: disabled
       });
     }
-  }, {
-    key: "pagination",
-    value: function pagination() {
-      var _this2 = this;
-
-      var items = [];
-      var selected = this.state.selected;
-      var _this$props2 = this.props,
-          pageRangeDisplayed = _this$props2.pageRangeDisplayed,
-          pageCount = _this$props2.pageCount,
-          marginPagesDisplayed = _this$props2.marginPagesDisplayed,
-          breakLabel = _this$props2.breakLabel;
-
-      if (pageCount <= pageRangeDisplayed) {
-        for (var index = 1; index <= pageCount; index++) {
-          items.push(this.getPageElement(index));
-        }
-      } else {
-        var leftSide = pageRangeDisplayed / 2;
-        var rightSide = pageRangeDisplayed - leftSide;
-
-        if (selected > pageCount - pageRangeDisplayed / 2) {
-          rightSide = pageCount - selected;
-          leftSide = pageRangeDisplayed - rightSide;
-        } else if (selected < pageRangeDisplayed / 2) {
-          leftSide = selected;
-          rightSide = pageRangeDisplayed - leftSide;
-        }
-
-        var _index;
-
-        var page;
-        var breakView;
-
-        var createPage = function createPage(index) {
-          return _this2.getPageElement(index);
-        };
-
-        for (_index = 1; _index <= pageCount; _index++) {
-          page = _index;
-
-          if (page <= marginPagesDisplayed) {
-            items.push(createPage(_index));
-            continue;
-          }
-
-          if (page > pageCount - marginPagesDisplayed) {
-            items.push(createPage(_index));
-            continue;
-          }
-
-          if (_index >= selected - leftSide && _index <= selected + rightSide) {
-            items.push(createPage(_index));
-            continue;
-          }
-
-          if (breakLabel && items[items.length - 1] != breakView) {
-            breakView = /*#__PURE__*/_react["default"].createElement(_Break["default"], {
-              key: _index,
-              label: breakLabel
-            });
-            items.push(breakView);
-          }
-        }
-      }
 
-      return items;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var selected = this.state.selected;
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          pageCount = _this$props3.pageCount,
-          previousLabel = _this$props3.previousLabel,
-          nextLabel = _this$props3.nextLabel,
-          hideNumbers = _this$props3.hideNumbers,
-          className = _this$props3.className;
-      return /*#__PURE__*/_react["default"].createElement("ul", {
-        className: "".concat(classes.pager).concat(className ? " ".concat(className) : '')
-      }, /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.listItemPrevious).concat(selected == 1 ? " ".concat(classes.disabled) : ''),
-        tabIndex: "0",
-        onClick: this.handlePrevPage
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.prev
-      }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "chevron-left",
-        width: 14,
-        height: 14,
-        colors: ['#adb4bb']
-      }), previousLabel)), !hideNumbers && this.pagination(), /*#__PURE__*/_react["default"].createElement("li", {
-        className: "".concat(classes.btn, " ").concat(classes.listItemNext).concat(selected == pageCount ? " ".concat(classes.disabled) : ''),
-        tabIndex: "0",
-        onClick: this.handleNextPage
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.next
-      }, nextLabel, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-        iconName: "chevron-right",
-        width: 14,
-        height: 14,
-        colors: ['#adb4bb']
-      }))));
-    }
-  }]);
-
-  return Pager;
-}(_react["default"].Component);
+    return /*#__PURE__*/_react["default"].createElement(_Page["default"], {
+      key: key,
+      page: breakSymbol,
+      disabled: disabled
+    });
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    className: classes.next,
+    disabled: currentPage === pageCount || disabled,
+    theme: "secondary",
+    onClick: handleNextPage,
+    iconRight: "chevron-right",
+    size: !nextLabel ? 'lg' : 'sm'
+  }, nextLabel));
+}
 
 Pager.propTypes = {
   classes: _propTypes["default"].object,
 
+  /** The current page number. */
+  currentPage: _propTypes["default"].number.isRequired,
+
   /** The total number of pages. */
-  pageCount: _propTypes["default"].number.isRequired,
+  pageCount: _propTypes["default"].number,
 
   /** The number of page numbers displayed at the center, between the '...' separators. */
-  pageRangeDisplayed: _propTypes["default"].number.isRequired,
+  centerPages: _propTypes["default"].number,
 
   /** The number of page numbers displayed on the sides of the pager. */
-  marginPagesDisplayed: _propTypes["default"].number.isRequired,
+  marginPages: _propTypes["default"].number,
 
   /** The label for the 'Previous' button. */
   previousLabel: _propTypes["default"].node,
@@ -267,31 +189,13 @@ Pager.propTypes = {
   /** Function to call after clicking a button to change the page. */
   onPageChange: _propTypes["default"].func,
 
-  /** Default page to start the Pager. */
-  initialPage: _propTypes["default"].number,
-
-  /** Force a page change externally. */
-  forcePage: _propTypes["default"].number,
-
-  /** By default, a callback triggers after mounting, calling the onPageChange function. Set this to false if you don't want that to happen. */
-  disableInitialCallback: _propTypes["default"].bool,
-
   /** Hide the numerical buttons, leaving just the 'Next' and 'Previous' buttons to interact with. */
   hideNumbers: _propTypes["default"].bool,
 
   /** Label for the separators. */
-  breakLabel: _propTypes["default"].string,
+  breakSymbol: _propTypes["default"].string,
+
+  /** Disable the pager */
+  disabled: _propTypes["default"].bool,
   className: _propTypes["default"].string
-};
-Pager.defaultProps = {
-  pageCount: 10,
-  pageRangeDisplayed: 2,
-  marginPagesDisplayed: 3,
-  previousLabel: 'Previous',
-  nextLabel: 'Next',
-  breakLabel: '...',
-  disableInitialCallback: false,
-  hideNumbers: false
-};
-var _default = Pager;
-exports["default"] = _default;
+};

package/build/Pager/Pager.test.js

@@ -22,93 +22,138 @@ var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
 describe("Pager", function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      classes: classes
+      classes: classes,
+      currentPage: 1
     }));
     expect(wrapper).toMatchSnapshot();
   });
   it('renders the prev and next buttons', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      classes: classes
+      classes: classes,
+      currentPage: 1
     }));
-    expect(wrapper.find('.listItemPrevious').length).toBe(1);
-    expect(wrapper.find('.listItemPrevious').text()).toEqual('<Jss(Icon) />Previous');
-    expect(wrapper.find('.listItemNext').length).toBe(1);
-    expect(wrapper.find('.listItemNext').text()).toEqual('Next<Jss(Icon) />');
+    expect(wrapper.find('.prev').length).toBe(1);
+    expect(wrapper.find('.prev').text()).toEqual('<Jss(Button) />');
+    expect(wrapper.find('.next').length).toBe(1);
+    expect(wrapper.find('.next').text()).toEqual('<Jss(Button) />');
   });
   it('changes to previous page', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      initialPage: 3,
-      classes: classes
+    var onPageChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 3,
+      pageCount: 4,
+      classes: classes,
+      onPageChange: onPageChange
     }));
-    expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.listItemPrevious').simulate('click', {
+    expect(onPageChange.mock.calls.length).toBe(0);
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(false);
+    expect(wrapper.find('Page').at(2).prop('selected')).toBe(true);
+    wrapper.find('.prev button').simulate('click', {
       target: {}
     });
-    expect(wrapper.state('selected')).toEqual(2);
+    expect(onPageChange.mock.calls.length).toBe(1);
+    expect(onPageChange.mock.calls[0][0]).toBe(2);
+    wrapper.setProps({
+      currentPage: 2
+    });
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(true);
+    expect(wrapper.find('Page').at(2).prop('selected')).toBe(false);
   });
   it('changes to next page', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      initialPage: 3,
-      classes: classes
+    var onPageChange = jest.fn();
+    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 2,
+      pageCount: 4,
+      classes: classes,
+      onPageChange: onPageChange
     }));
-    expect(wrapper.state('selected')).toEqual(3);
-    wrapper.find('.listItemNext').simulate('click', {
+    expect(onPageChange.mock.calls.length).toBe(0);
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(true);
+    expect(wrapper.find('Page').at(2).prop('selected')).toBe(false);
+    wrapper.find('.next button').simulate('click', {
       target: {}
     });
-    expect(wrapper.state('selected')).toEqual(4);
+    expect(onPageChange.mock.calls.length).toBe(1);
+    expect(onPageChange.mock.calls[0][0]).toBe(3);
+    wrapper.setProps({
+      currentPage: 3
+    });
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(false);
+    expect(wrapper.find('Page').at(2).prop('selected')).toBe(true);
   });
   it('renders the pagination', function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 1,
       pageCount: 3,
-      pageRangeDisplayed: 1,
-      marginPagesDisplayed: 1,
+      centerPages: 1,
+      marginPages: 1,
       classes: classes
     }));
-    expect(wrapper.find('li').length).toBe(5);
+    expect(wrapper.find('Page').length).toBe(3);
+    wrapper.setProps({
+      pageCount: 10
+    });
+    expect(wrapper.find('Page').length).toBe(4);
+    wrapper.setProps({
+      currentPage: 3
+    });
+    expect(wrapper.find('Page').length).toBe(5);
   });
   it('changes to a specific page', function () {
+    var onPageChange = jest.fn();
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 1,
       pageCount: 5,
-      pageRangeDisplayed: 1,
-      marginPagesDisplayed: 1,
-      classes: classes
+      centerPages: 1,
+      marginPages: 1,
+      classes: classes,
+      onPageChange: onPageChange
     }));
-    expect(wrapper.state('selected')).toEqual(1);
-    wrapper.find('li').at(3).simulate('click', {
+    expect(onPageChange.mock.calls.length).toBe(0);
+    expect(wrapper.find('Page').at(0).prop('selected')).toBe(true);
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(false);
+    wrapper.find('Page').at(1).simulate('click', {
       target: {}
     });
-    expect(wrapper.state('selected')).toEqual(5);
+    expect(onPageChange.mock.calls.length).toBe(1);
+    expect(onPageChange.mock.calls[0][0]).toBe(2);
+    wrapper.setProps({
+      currentPage: 2
+    });
+    expect(wrapper.find('Page').at(0).prop('selected')).toBe(false);
+    expect(wrapper.find('Page').at(1).prop('selected')).toBe(true);
   });
   it('disables the previous page button', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
-      initialPage: 1,
+      currentPage: 1,
       classes: classes
     }));
-    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.prev').prop('disabled')).toEqual(true);
     wrapper.setProps({
-      forcePage: 5
+      currentPage: 5
     });
-    expect(wrapper.find('.listItemPrevious').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.prev').prop('disabled')).toEqual(false);
   });
   it('disables the next page button', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
       pageCount: 5,
-      initialPage: 5,
+      currentPage: 5,
       classes: classes
     }));
-    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(true);
+    expect(wrapper.find('.next').prop('disabled')).toEqual(true);
     wrapper.setProps({
-      forcePage: 1
+      currentPage: 1
     });
-    expect(wrapper.find('.listItemNext').hasClass('disabled')).toEqual(false);
+    expect(wrapper.find('.next').prop('disabled')).toEqual(false);
   });
   it('calls the onPageChange function', function () {
     var onPageChange = jest.fn();
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Pager["default"], {
+      currentPage: 1,
       onPageChange: onPageChange,
       classes: classes
     }));
-    wrapper.find('.listItemNext').simulate('click', {
+    wrapper.find('.next').simulate('click', {
       target: {}
     });
     expect(onPageChange.mock.calls.length).toBe(1);

package/build/Pager/__snapshots__/Pager.test.js.snap

@@ -4,48 +4,15 @@ exports[`Pager matches the snapshot 1`] = `ShallowWrapper {}`;
 
 exports[`Pager styles matches the snapshot 1`] = `
 Object {
-  "btn": Object {
-    "& span": Object {
-      "marginBottom": "-2px",
-    },
-    "&:hover": Object {
-      "background": "#ECECEE",
-      "borderColor": "#ECECEE",
-    },
-    "border": "1px solid #bfbfbf",
-    "borderRadius": "5px",
-    "cursor": "pointer",
-    "fontFamily": "'OccText', sans-serif",
-    "outline": "0",
-    "padding": "3px 13px",
-    "transition": "0.3s all",
-  },
-  "disabled": Object {
-    "opacity": "0.4",
-    "pointerEvents": "none",
-  },
-  "listItemNext": Object {
-    "marginLeft": "15px",
-  },
-  "listItemPrevious": Object {
-    "marginRight": "15px",
-  },
   "next": Object {
-    "alignItems": "center",
-    "display": "flex",
+    "marginLeft": "8px",
   },
   "pager": Object {
     "alignItems": "center",
-    "color": "#727272",
-    "display": "flex",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": "14px",
-    "listStyle": "none",
-    "paddingLeft": "0",
+    "display": "inline-flex",
   },
   "prev": Object {
-    "alignItems": "center",
-    "display": "flex",
+    "marginRight": "8px",
   },
 }
 `;

package/build/Pager/styles.js

@@ -5,55 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
-
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
   pager: {
-    listStyle: 'none',
-    paddingLeft: '0',
-    display: 'flex',
-    alignItems: 'center',
-    fontFamily: _fonts["default"].body,
-    color: _colors["default"].grey7,
-    fontSize: '14px'
-  },
-  btn: {
-    fontFamily: _fonts["default"].body,
-    border: "1px solid ".concat(_colors["default"].grey1),
-    borderRadius: '5px',
-    padding: '3px 13px',
-    transition: '0.3s all',
-    cursor: 'pointer',
-    outline: '0',
-    '& span': {
-      marginBottom: '-2px'
-    },
-    '&:hover': {
-      background: '#ECECEE',
-      borderColor: '#ECECEE'
-    }
-  },
-  prev: {
-    display: 'flex',
+    display: 'inline-flex',
     alignItems: 'center'
   },
-  listItemPrevious: {
-    marginRight: '15px'
+  prev: {
+    marginRight: _spacing["default"]['size-2']
   },
   next: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  listItemNext: {
-    marginLeft: '15px'
-  },
-  disabled: {
-    pointerEvents: 'none',
-    opacity: '0.4'
+    marginLeft: _spacing["default"]['size-2']
   }
 };
 exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@occmundial/occ-atomic",
-  "version": "3.0.0-beta.30",
+  "version": "3.0.0-beta.31",
   "description": "Collection of shareable styled React components for OCC applications.",
   "homepage": "http://occmundial.github.io/occ-atomic",
   "main": "build/index.js",

package/build/Pager/Break/Break.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var Break = function Break(_ref) {
-  var classes = _ref.classes,
-      label = _ref.label;
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    className: classes.li
-  }, label);
-};
-
-Break.propTypes = {
-  classes: _propTypes["default"].object,
-  label: _propTypes["default"].string
-};
-var _default = Break;
-exports["default"] = _default;

package/build/Pager/Break/Break.test.js

@@ -1,53 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _enzyme = require("enzyme");
-
-var _Break = _interopRequireDefault(require("./Break"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
-var _index = _interopRequireDefault(require("./index"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-var reduceClasses = function reduceClasses(prev, curr) {
-  return Object.assign({}, prev, _defineProperty({}, curr, curr));
-};
-
-var classes = Object.keys(_styles["default"]).reduce(reduceClasses, {});
-describe("Break", function () {
-  it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Break["default"], {
-      classes: classes
-    }));
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('renders the li', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Break["default"], {
-      classes: classes
-    }));
-    expect(wrapper.find('.li').length).toBe(1);
-  });
-  it('renders the label content', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Break["default"], {
-      label: "...",
-      classes: classes
-    }));
-    expect(wrapper.find('.li').text()).toEqual('...');
-  });
-});
-describe("BreakJSS", function () {
-  it('matches the snapshot', function () {
-    var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], null));
-    expect(wrapper).toMatchSnapshot();
-  });
-});
-describe("Break styles", function () {
-  it('matches the snapshot', function () {
-    expect(_styles["default"]).toMatchSnapshot();
-  });
-});

package/build/Pager/Break/__snapshots__/Break.test.js.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Break matches the snapshot 1`] = `ShallowWrapper {}`;
-
-exports[`Break styles matches the snapshot 1`] = `
-Object {
-  "li": Object {
-    "display": "inline-block",
-  },
-}
-`;
-
-exports[`BreakJSS matches the snapshot 1`] = `ShallowWrapper {}`;

package/build/Pager/Break/index.js

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _reactJss = _interopRequireDefault(require("react-jss"));
-
-var _Break = _interopRequireDefault(require("./Break"));
-
-var _styles = _interopRequireDefault(require("./styles"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var _default = (0, _reactJss["default"])(_styles["default"])(_Break["default"]);
-
-exports["default"] = _default;

package/build/Pager/Break/styles.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _default = {
-  li: {
-    display: 'inline-block'
-  }
-};
-exports["default"] = _default;