@pedidopago/ui 1.0.6

package/dist/components/Modal/modal.test.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+require("@testing-library/jest-dom");
+
+var _ = require(".");
+
+var _ThemeContext = require("../../shared/theme/contexts/ThemeContext");
+
+function setup(props) {
+  var componentRender = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_ThemeContext.PPUIThemeProvider, null, /*#__PURE__*/React.createElement(_.Modal, props)));
+  return {
+    overlay: componentRender.container.childNodes[0],
+    modal: componentRender.container.childNodes[1]
+  };
+}
+
+describe('Modal', function () {
+  it('should render modal correctly', function () {
+    var _setup = setup({
+      open: true,
+      onClose: function onClose() {},
+      children: /*#__PURE__*/React.createElement("div", null, "Modal")
+    }),
+        modal = _setup.modal;
+
+    expect(modal).toBeInTheDocument();
+  });
+  it('should display modal as open', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.overlay).toHaveStyle({
+      opacity: 0.1,
+      pointerEvents: 'auto'
+    });
+    expect(modal.modal).toHaveStyle({
+      opacity: 1,
+      pointerEvents: 'auto'
+    });
+  });
+  it('should display modal as closed', function () {
+    var modal = setup({
+      open: false,
+      onClose: function onClose() {},
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.overlay).toHaveStyle({
+      opacity: 0,
+      pointerEvents: 'none'
+    });
+    expect(modal.modal).toHaveStyle({
+      opacity: 0,
+      pointerEvents: 'none'
+    });
+  });
+  it('should display modal with custom position', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      left: '10px',
+      top: '10px',
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.modal).toHaveStyle({
+      left: 'calc(10px + 0px)',
+      top: 'calc(10px + 0px)'
+    });
+  });
+  it('should display modal with anchorX set to left', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      anchorX: 'left',
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.modal).toHaveStyle({
+      transform: 'translate(0%, -50%) scale(1)'
+    });
+  });
+  it('should display modal with anchorX set to right', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      anchorX: 'right',
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.modal).toHaveStyle({
+      transform: 'translate(-100%, -50%) scale(1)'
+    });
+  });
+  it('should display modal with anchorX set to center', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      anchorX: 'center',
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.modal).toHaveStyle({
+      transform: 'translate(-50%, -50%) scale(1)'
+    });
+  });
+  it('should display modal with anchorY set to top', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      anchorY: 'top',
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.modal).toHaveStyle({
+      transform: 'translate(-50%, 0%) scale(1)'
+    });
+  });
+  it('should display modal with anchorY set to bottom', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      anchorY: 'bottom',
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.modal).toHaveStyle({
+      transform: 'translate(-50%, -100%) scale(1)'
+    });
+  });
+  it('should display modal with anchorY set to center', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      anchorY: 'center',
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.modal).toHaveStyle({
+      transform: 'translate(-50%, -50%) scale(1)'
+    });
+  });
+  it('should display modal with maxWidth', function () {
+    var modal = setup({
+      open: true,
+      onClose: function onClose() {},
+      maxWidth: '200px',
+      children: /*#__PURE__*/React.createElement("p", null, "Hello world!")
+    });
+    expect(modal.modal).toHaveStyle({
+      maxWidth: '200px'
+    });
+  });
+});

package/dist/components/Modal/styles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Theme } from '@emotion/react';
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    maxWidth?: string | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Overlay: import("@emotion/styled").StyledComponent<{
+    theme?: Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

package/dist/components/Modal/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAO,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE5C,eAAO,MAAM,SAAS;;;;;yGA6BpB,CAAC;AAEH,eAAO,MAAM,OAAO;;;yGAelB,CAAC"}

package/dist/components/Modal/styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overlay = exports.Container = void 0;
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = require("@emotion/react");
+
+var _templateObject, _templateObject2;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Container = _styled.default.div(function (props) {
+  var theme = props.theme;
+  return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: ", ";\n\n    width: calc(100% - 32px);\n\n    max-width: ", ";\n\n    position: fixed;\n\n    background: ", ";\n    box-shadow: ", ";\n\n    transition: transform ease ", ", opacity linear ", ";\n\n    z-index: ", ";\n\n    &:focus {\n      outline: 3px solid black;\n    }\n  "])), theme.borderRadius.default, props.maxWidth, theme.colorMode === 'light' ? theme.colors.background.light : theme.colors.neutral.black, theme.colorMode === 'light' ? theme.shadow.level1 : "0 4px 8px ".concat(theme.colors.neutral.black), theme.transition.speed, theme.transition.speed, theme.zIndex.level24);
+});
+
+exports.Container = Container;
+
+var Overlay = _styled.default.div(function (props) {
+  var theme = props.theme;
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n    left: 0px;\n    right: 0px;\n    top: 0px;\n    bottom: 0px;\n\n    background: ", ";\n    opacity: 0;\n\n    transition: opacity linear ", ";\n  "])), theme.colors.neutral.neutral5, theme.transition.speed);
+});
+
+exports.Overlay = Overlay;

package/dist/components/Modal/types.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export declare type AnchorX = 'left' | 'center' | 'right' | number;
+export declare type AnchorY = 'top' | 'center' | 'bottom' | number;
+export interface IModalProps {
+    /** If the modal is open or not. */
+    open: boolean;
+    /** Optional. Sets the left position where the modal will be shown. */
+    left?: string;
+    /** Optional. Sets the top position where the modal will be shown. */
+    top?: string;
+    /** Optional. The Modal horizontal anchor.
+     * 0 is the left most side.
+     * 100 is the right most size. */
+    anchorX?: AnchorX;
+    /** Optional. The Modal vertical anchor.
+     * 0 is the left most side.
+     * 100 is the right most size. */
+    anchorY?: AnchorY;
+    /** Optional. Offsets the Modal horizontally. */
+    offsetX?: string;
+    /** Optional. Offsets the Modal vertically. */
+    offsetY?: string;
+    /** The max width of the Modal. */
+    maxWidth?: string;
+    /** Handler called once the Modal is triggered to close. */
+    onClose: () => void;
+    children: ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/Modal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,oBAAY,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAC3D,oBAAY,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,WAAW;IAC1B,mCAAmC;IACnC,IAAI,EAAE,OAAO,CAAC;IAEd,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;qCAEiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,2DAA2D;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,QAAQ,EAAE,SAAS,CAAC;CACrB"}

package/dist/components/Modal/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/Pagination/hooks/usePagination.d.ts

@@ -0,0 +1,4 @@
+import { IPaginationHook } from '../types';
+export declare const DOTS = "...";
+export declare const usePagination: ({ count, activePage }: IPaginationHook) => (string | number)[] | undefined;
+//# sourceMappingURL=usePagination.d.ts.map

package/dist/components/Pagination/hooks/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../../src/components/Pagination/hooks/usePagination.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C,eAAO,MAAM,IAAI,QAAQ,CAAC;AAO1B,eAAO,MAAM,aAAa,0BAA2B,eAAe,oCAwCnE,CAAC"}

package/dist/components/Pagination/hooks/usePagination.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePagination = exports.DOTS = void 0;
+
+var _react = require("react");
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var DOTS = '...';
+exports.DOTS = DOTS;
+
+var range = function range(start, end) {
+  var length = end - start + 1;
+  return Array.from({
+    length: length
+  }, function (_, idx) {
+    return idx + start;
+  });
+};
+
+var usePagination = function usePagination(_ref) {
+  var count = _ref.count,
+      activePage = _ref.activePage;
+  var paginationRange = (0, _react.useMemo)(function () {
+    var totalPageCount = count;
+    var siblingCount = 1;
+    var totalPageNumbers = siblingCount + 5;
+
+    if (totalPageNumbers >= totalPageCount) {
+      return range(1, totalPageCount);
+    }
+
+    var leftSiblingIndex = Math.max(activePage - siblingCount, 1);
+    var rightSiblingIndex = Math.min(activePage + siblingCount, totalPageCount);
+    var shouldShowLeftDots = leftSiblingIndex > 2;
+    var shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+    var firstPageIndex = 1;
+    var lastPageIndex = totalPageCount;
+
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      var leftItemCount = 3 + 2 * siblingCount;
+      var leftRange = range(1, leftItemCount);
+      return [].concat(_toConsumableArray(leftRange), [DOTS, totalPageCount]);
+    }
+
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      var rightItemCount = 3 + 2 * siblingCount;
+      var rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
+      return [firstPageIndex, DOTS].concat(_toConsumableArray(rightRange));
+    }
+
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      var middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, DOTS].concat(_toConsumableArray(middleRange), [DOTS, lastPageIndex]);
+    }
+  }, [activePage, count]);
+  return paginationRange;
+};
+
+exports.usePagination = usePagination;

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IPaginationProps } from './types';
+export declare function Pagination({ count, onChange, previousButtonIcon, nextButtonIcon, isDisabled, defaultPage, size, shape, variant, color, }: IPaginationProps): JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,kBAAmC,EACnC,cAAgC,EAChC,UAAU,EACV,WAAW,EACX,IAAc,EACd,KAAiB,EACjB,OAAoB,EACpB,KAAK,GACN,EAAE,gBAAgB,sBAyHlB"}

package/dist/components/Pagination/index.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pagination = Pagination;
+
+var _react = require("react");
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colorToGray = require("../../utils/colorToGray");
+
+var _usePagination = require("./hooks/usePagination");
+
+var _styles = require("./styles");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function Pagination(_ref) {
+  var count = _ref.count,
+      onChange = _ref.onChange,
+      _ref$previousButtonIc = _ref.previousButtonIcon,
+      previousButtonIcon = _ref$previousButtonIc === void 0 ? 'chevron-left' : _ref$previousButtonIc,
+      _ref$nextButtonIcon = _ref.nextButtonIcon,
+      nextButtonIcon = _ref$nextButtonIcon === void 0 ? 'chevron-right' : _ref$nextButtonIcon,
+      isDisabled = _ref.isDisabled,
+      defaultPage = _ref.defaultPage,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size,
+      _ref$shape = _ref.shape,
+      shape = _ref$shape === void 0 ? 'rounded' : _ref$shape,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+      color = _ref.color;
+
+  var _useState = (0, _react.useState)(defaultPage || 1),
+      _useState2 = _slicedToArray(_useState, 2),
+      activePage = _useState2[0],
+      setActivePage = _useState2[1];
+
+  var pagination = (0, _usePagination.usePagination)({
+    activePage: activePage,
+    count: count
+  });
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      previousButtonDisabled = _useState4[0],
+      setPreviousButtonDisabled = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      nextButtonDisabled = _useState6[0],
+      setNextButtonDisabled = _useState6[1];
+
+  var theme = (0, _react2.useTheme)();
+  (0, _react.useEffect)(function () {
+    if (activePage !== count) {
+      setNextButtonDisabled(false);
+    } else {
+      setNextButtonDisabled(true);
+    }
+
+    if (activePage === 1) {
+      setPreviousButtonDisabled(true);
+    } else {
+      setPreviousButtonDisabled(false);
+    }
+  }, [activePage, count]);
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var themeColor = theme.colors.primary.default;
+
+    var _convertColor = (0, _colorToGray.convertColor)(color || themeColor),
+        neutral1 = _convertColor.neutral1;
+
+    var _neutral = _slicedToArray(neutral1, 3),
+        h = _neutral[0],
+        s = _neutral[1],
+        l = _neutral[2];
+
+    var grayColor = "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)");
+    var saturationColor = "hsl(".concat(h, ", ", 12, "%, ", 39, "%)");
+    var numberOfPageColor = "hsl(".concat(h, ", ", 13, "%, ", 82, "%)");
+    return {
+      grayColor: grayColor,
+      saturationColor: saturationColor,
+      numberOfPageColor: numberOfPageColor,
+      themeColor: themeColor
+    };
+  }, [color]),
+      grayColor = _useMemo.grayColor,
+      numberOfPageColor = _useMemo.numberOfPageColor,
+      saturationColor = _useMemo.saturationColor,
+      themeColor = _useMemo.themeColor;
+
+  function handleClick(event) {
+    setActivePage(Number(event.currentTarget.innerHTML));
+
+    if (Number.isInteger(Number(event.currentTarget.innerHTML))) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(Number(event.currentTarget.innerHTML));
+    }
+  }
+
+  function handlePreviousNavigate() {
+    setActivePage(function (v) {
+      return v === 1 ? v : v - 1;
+    });
+  }
+
+  function handleNextNavigate() {
+    setActivePage(function (v) {
+      return v === count ? v : v + 1;
+    });
+  }
+
+  function LargeView() {
+    var paginationSequence = pagination === null || pagination === void 0 ? void 0 : pagination.map(function (number, index) {
+      return /*#__PURE__*/React.createElement(_styles.LargeViewWrap, {
+        key: "pagination-list".concat(index)
+      }, number === _usePagination.DOTS ? /*#__PURE__*/React.createElement(_styles.PageWrap, {
+        variant: variant,
+        shape: shape,
+        grayColor: grayColor,
+        numberOfPageColor: numberOfPageColor
+      }, number) : /*#__PURE__*/React.createElement(_styles.PaginationItem, {
+        shape: shape
+      }, /*#__PURE__*/React.createElement(_styles.PaginationButton, {
+        shape: shape,
+        numberOfPageColor: numberOfPageColor,
+        variant: variant,
+        color: color || themeColor,
+        grayColor: grayColor,
+        disabled: isDisabled,
+        onClick: handleClick,
+        isActivePage: activePage === number
+      }, number)));
+    });
+    return paginationSequence;
+  }
+
+  function SmallView() {
+    return /*#__PURE__*/React.createElement(_styles.SmallPageInfo, {
+      saturationColor: saturationColor
+    }, activePage, " de ", count);
+  }
+
+  if (!count) return null;
+  return /*#__PURE__*/React.createElement(_styles.PaginationList, {
+    shape: shape,
+    size: size
+  }, /*#__PURE__*/React.createElement(_styles.PreviousNavigationButton, {
+    shape: shape,
+    saturationColor: saturationColor,
+    onClick: handlePreviousNavigate,
+    color: color || themeColor,
+    grayColor: grayColor,
+    disabled: previousButtonDisabled || isDisabled
+  }, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: previousButtonIcon,
+    size: 16
+  })), size === 'large' && LargeView(), size === 'small' && SmallView(), /*#__PURE__*/React.createElement(_styles.NextNavigationButton, {
+    shape: shape,
+    grayColor: grayColor,
+    saturationColor: saturationColor,
+    onClick: handleNextNavigate,
+    color: color || themeColor,
+    disabled: nextButtonDisabled || isDisabled
+  }, /*#__PURE__*/React.createElement(_Icon.default, {
+    name: nextButtonIcon,
+    size: 16
+  })));
+}

package/dist/components/Pagination/pagination.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=pagination.test.d.ts.map

package/dist/components/Pagination/pagination.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.test.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/pagination.test.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAC"}

package/dist/components/Pagination/pagination.test.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _testUtils = require("../../shared/tests/test-utils");
+
+var _react = require("@testing-library/react");
+
+require("@testing-library/jest-dom");
+
+var _ = require(".");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+describe('Pagination', function () {
+  it('Should render pagination', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages
+    }));
+    expect(_react.screen.getByText('10')).toBeInTheDocument();
+  });
+  it('Should call change function', function () {
+    var fn = jest.fn();
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages,
+      onChange: fn
+    }));
+
+    _react.fireEvent.click(_react.screen.getByText('2'));
+
+    expect(fn).toBeCalled();
+  });
+  it('Should disable previous button when current page to be 1', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages
+    }));
+
+    var _screen$getAllByRole = _react.screen.getAllByRole('button'),
+        _screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 1),
+        previousButton = _screen$getAllByRole2[0];
+
+    expect(previousButton).toBeDisabled();
+  });
+  it('Should disable next button when current page to be last page', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages
+    }));
+
+    var buttons = _react.screen.getAllByRole('button');
+
+    var _buttons$reverse = buttons.reverse(),
+        _buttons$reverse2 = _slicedToArray(_buttons$reverse, 1),
+        nextButton = _buttons$reverse2[0];
+
+    _react.fireEvent.click(_react.screen.getByText('10'));
+
+    expect(nextButton).toBeDisabled();
+  });
+  it('Should change current page on Click', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages
+    }));
+
+    var pageButton = _react.screen.getByText('3');
+
+    _react.fireEvent.click(pageButton);
+
+    expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(34, 224, 161)');
+  });
+  it('Should set hightlight color if color prop is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages,
+      color: "#f6ca3f"
+    }));
+
+    var pageButton = _react.screen.getByText('1');
+
+    expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(246, 202, 63)');
+  });
+  it('Should set circular button if shape circular is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages,
+      shape: "circular"
+    }));
+
+    var _screen$getAllByRole3 = _react.screen.getAllByRole('button'),
+        _screen$getAllByRole4 = _slicedToArray(_screen$getAllByRole3, 1),
+        navigationButton = _screen$getAllByRole4[0];
+
+    expect(window.getComputedStyle(navigationButton).borderRadius).toBe('50%');
+  });
+  it('Should set roundend button if shape rounded is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages,
+      shape: "rounded"
+    }));
+
+    var _screen$getAllByRole5 = _react.screen.getAllByRole('button'),
+        _screen$getAllByRole6 = _slicedToArray(_screen$getAllByRole5, 1),
+        navigationButton = _screen$getAllByRole6[0];
+
+    expect(window.getComputedStyle(navigationButton).borderRadius).toBe('8px 0 0 8px');
+  });
+  it('Should render small pagination if size small is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages,
+      size: "small"
+    }));
+    expect(_react.screen.getAllByRole('button').length).toBe(2);
+  });
+  it('Should render default selected page if defaultPage is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages,
+      defaultPage: 5
+    }));
+
+    var pageButton = _react.screen.getByText('5');
+
+    expect(window.getComputedStyle(pageButton).backgroundColor).toBe('rgb(34, 224, 161)');
+  });
+  it('Should disabled if isDisabledProp is provided', function () {
+    var numberOfPages = 10;
+    (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.Pagination, {
+      count: numberOfPages,
+      isDisabled: true
+    }));
+
+    var pageButton = _react.screen.getByText('10');
+
+    expect(pageButton).toBeDisabled();
+  });
+});