@salutejs/sdds-cs 0.319.0-canary.1741.15775036215.0 → 0.319.0-canary.1973.15677961605.0

package/emotion/cjs/components/Pagination/Pagination.component-test.js

@@ -0,0 +1,298 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _plasmaCyUtils = /*#__PURE__*/require("@salutejs/plasma-cy-utils");
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _plasmaTypo = /*#__PURE__*/require("@salutejs/plasma-typo");
+var _StandardTypoStyle, _SpaceMe, _SpaceMe2, _SpaceMe3, _SpaceMe4, _SpaceMe5, _SpaceMe6, _SpaceMe7, _SpaceMe8, _SpaceMe9, _SpaceMe10, _SpaceMe11, _SpaceMe12, _SpaceMe13, _SpaceMe14, _StandardTypoStyle2, _SpaceMe15, _SpaceMe16, _SpaceMe17, _SpaceMe18, _SpaceMe19, _SpaceMe20, _StandardTypoStyle3;
+/* eslint-disable */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var id = 'test-pagination';
+var slots = [7, 9, 13];
+var values = [1, 10, 20];
+var count = 20;
+var views = ['clear', 'secondary', 'default'];
+var StandardTypoStyle = /*#__PURE__*/(0, _styledComponents.createGlobalStyle)(_plasmaTypo.standard);
+describe('plasma-new-hope: Pagination Styled', function () {
+  var _CypressTestDecorator;
+  var Pagination = (0, _plasmaCyUtils.getComponent)('Pagination');
+  var CypressTestDecoratorWithTypo = function CypressTestDecoratorWithTypo(_ref) {
+    var children = _ref.children;
+    return /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.CypressTestDecorator, null, _StandardTypoStyle || (_StandardTypoStyle = /*#__PURE__*/_react["default"].createElement(StandardTypoStyle, null)), children);
+  };
+  var ControlledPagination = function ControlledPagination() {
+    var _useState = (0, _react.useState)(values[1]),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/_react["default"].createElement(Pagination, {
+      id: id,
+      value: value,
+      count: count,
+      slots: slots[1],
+      onChange: function onChange(v) {
+        return setValue(v);
+      }
+    });
+  };
+  it('default', function () {
+    (0, _plasmaCyUtils.mount)(_CypressTestDecorator || (_CypressTestDecorator = /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(ControlledPagination, null))));
+    cy.matchImageSnapshot();
+  });
+  it('_size', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      size: "xs",
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe || (_SpaceMe = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      size: "s",
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe2 || (_SpaceMe2 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      size: "m",
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe3 || (_SpaceMe3 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      size: "l",
+      value: values[1],
+      slots: slots[1],
+      count: count
+    })));
+    cy.matchImageSnapshot();
+  });
+  it('_view', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      view: views[0],
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe4 || (_SpaceMe4 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      view: views[1],
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe5 || (_SpaceMe5 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      view: views[2],
+      value: values[1],
+      slots: slots[1],
+      count: count
+    })));
+    cy.matchImageSnapshot();
+  });
+  it('_viewCurrentPage', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      viewCurrentPage: views[0],
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe6 || (_SpaceMe6 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      viewCurrentPage: views[1],
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe7 || (_SpaceMe7 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      viewCurrentPage: views[2],
+      value: values[1],
+      slots: slots[1],
+      count: count
+    })));
+    cy.matchImageSnapshot();
+  });
+  it('type', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      type: "default",
+      hasQuickJump: true,
+      hasPerPage: true,
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe8 || (_SpaceMe8 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      type: "default",
+      hasQuickJump: true,
+      hasPerPage: false,
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe9 || (_SpaceMe9 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      type: "default",
+      hasQuickJump: false,
+      hasPerPage: true,
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe10 || (_SpaceMe10 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      type: "default",
+      hasQuickJump: false,
+      hasPerPage: false,
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe11 || (_SpaceMe11 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      type: "compact",
+      hasQuickJump: true,
+      hasPerPage: true,
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe12 || (_SpaceMe12 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      type: "compact",
+      hasQuickJump: true,
+      hasPerPage: false,
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe13 || (_SpaceMe13 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      type: "compact",
+      hasQuickJump: false,
+      hasPerPage: true,
+      value: values[1],
+      slots: slots[1],
+      count: count
+    }), _SpaceMe14 || (_SpaceMe14 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      type: "compact",
+      hasQuickJump: false,
+      hasPerPage: false,
+      value: values[1],
+      slots: slots[1],
+      count: count
+    })));
+    cy.matchImageSnapshot();
+  });
+});
+describe('plasma-new-hope: Pagination Slots', function () {
+  var Pagination = (0, _plasmaCyUtils.getComponent)('Pagination');
+  var CypressTestDecoratorWithTypo = function CypressTestDecoratorWithTypo(_ref2) {
+    var children = _ref2.children;
+    return /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.CypressTestDecorator, null, _StandardTypoStyle2 || (_StandardTypoStyle2 = /*#__PURE__*/_react["default"].createElement(StandardTypoStyle, null)), children);
+  };
+  it('minSlots', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[0],
+      value: values[0],
+      count: count
+    }), _SpaceMe15 || (_SpaceMe15 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[0],
+      value: values[1],
+      count: count
+    }), _SpaceMe16 || (_SpaceMe16 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[0],
+      value: values[2],
+      count: count
+    })));
+    cy.matchImageSnapshot();
+  });
+  it('avrSlots', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[1],
+      value: values[0],
+      count: count
+    }), _SpaceMe17 || (_SpaceMe17 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[1],
+      value: values[1],
+      count: count
+    }), _SpaceMe18 || (_SpaceMe18 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[1],
+      value: values[2],
+      count: count
+    })));
+    cy.matchImageSnapshot();
+  });
+  it('maxSlots', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[2],
+      value: values[0],
+      count: count
+    }), _SpaceMe19 || (_SpaceMe19 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[2],
+      value: values[1],
+      count: count
+    }), _SpaceMe20 || (_SpaceMe20 = /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.SpaceMe, null)), /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[2],
+      value: values[2],
+      count: count
+    })));
+    cy.matchImageSnapshot();
+  });
+});
+describe('plasma-new-hope: Pagination Content', function () {
+  var Pagination = (0, _plasmaCyUtils.getComponent)('Pagination');
+  var Button = (0, _plasmaCyUtils.getComponent)('Button');
+  var CypressTestDecoratorWithTypo = function CypressTestDecoratorWithTypo(_ref3) {
+    var children = _ref3.children;
+    return /*#__PURE__*/_react["default"].createElement(_plasmaCyUtils.CypressTestDecorator, null, _StandardTypoStyle3 || (_StandardTypoStyle3 = /*#__PURE__*/_react["default"].createElement(StandardTypoStyle, null)), children);
+  };
+  var PaginationContent = function PaginationContent(args) {
+    var _useState3 = (0, _react.useState)(args.value),
+      _useState4 = _slicedToArray(_useState3, 2),
+      pageValue = _useState4[0],
+      setPageValue = _useState4[1];
+    var _useState5 = (0, _react.useState)(args.perPage),
+      _useState6 = _slicedToArray(_useState5, 2),
+      perPageValue = _useState6[0],
+      setPerPageValue = _useState6[1];
+    var handleChangePerpage = (0, _react.useCallback)(function (perPage) {
+      setPerPageValue(perPage);
+    }, [perPageValue, setPerPageValue]);
+    var handleChangePage = (0, _react.useCallback)(function (page) {
+      setPageValue(page);
+    }, [pageValue, setPageValue]);
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Pagination, _extends({}, args, {
+      value: pageValue,
+      perPage: perPageValue,
+      leftContent: /*#__PURE__*/_react["default"].createElement(Button, {
+        id: "pagination-button-prev",
+        onClick: function onClick() {
+          handleChangePage(pageValue - 1);
+        }
+      }, "Prev"),
+      rightContent: /*#__PURE__*/_react["default"].createElement(Button, {
+        id: "pagination-button-next",
+        onClick: function onClick() {
+          handleChangePage(pageValue + 1);
+        }
+      }, "Next"),
+      onChangePageValue: handleChangePage,
+      onChangePerageValue: handleChangePerpage
+    })));
+  };
+  it('clickOnContent', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(PaginationContent, {
+      value: values[0],
+      count: count
+    })));
+    cy.get('button[id="pagination-button-next"]').click();
+    cy.get('button[id="pagination-button-next"]').click();
+    cy.get('button[id="pagination-button-prev"]').click();
+    cy.matchImageSnapshot();
+  });
+  it('setInput', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[1],
+      value: values[0],
+      count: count
+    })));
+    cy.get('input:first').focus().type('10').type('{enter}');
+    cy.matchImageSnapshot();
+  });
+  it('setSelect', function () {
+    (0, _plasmaCyUtils.mount)( /*#__PURE__*/_react["default"].createElement(CypressTestDecoratorWithTypo, null, /*#__PURE__*/_react["default"].createElement(Pagination, {
+      slots: slots[2],
+      value: values[0],
+      count: count
+    })));
+    cy.get('button').last().click();
+    cy.matchImageSnapshot();
+  });
+});

package/emotion/cjs/components/Pagination/Pagination.config.js

@@ -1,144 +1,31 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "config", {
-    enumerable: true,
-    get: function() {
-        return config;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-function _tagged_template_literal(strings, raw) {
-    if (!raw) {
-        raw = strings.slice(0);
-    }
-    return Object.freeze(Object.defineProperties(strings, {
-        raw: {
-            value: Object.freeze(raw)
-        }
-    }));
-}
-function _templateObject() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--surface-clear);\n                ",
-        ": var(--surface-clear);\n                ",
-        ": var(--surface-clear);\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-accent);\n                ",
-        ": var(--text-accent);\n\n                ",
-        ": var(--surface-solid-card);\n                ",
-        ": var(--surface-solid-card);\n                ",
-        ": var(--outline-solid-primary);\n\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-accent);\n                ",
-        ": var(--text-secondary);\n                ",
-        ": var(--surface-clear);\n            "
-    ]);
-    _templateObject = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject1() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-solid-primary);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-solid-primary);\n                ",
-        ": var(--text-primary);\n                ",
-        ": var(--surface-solid-primary);\n            "
-    ]);
-    _templateObject1 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject2() {
-    var data = _tagged_template_literal([
-        "\n                ",
-        ": var(--plasma-typo-body-m-font-family);\n                ",
-        ": var(--plasma-typo-body-m-font-size);\n                ",
-        ": var(--plasma-typo-body-m-font-style);\n                ",
-        ": var(--plasma-typo-body-m-font-weight);\n                ",
-        ": var(--plasma-typo-body-m-letter-spacing);\n                ",
-        ": var(--plasma-typo-body-m-line-height);\n\n                ",
-        ": 2.5rem;\n                ",
-        ": 2.5rem;\n                ",
-        ": 1.75rem;\n                ",
-        ": 3rem;\n                ",
-        ": 0.75rem;\n                ",
-        ": 0.9rem;\n                ",
-        ": 1.15rem;\n                ",
-        ": 0 -0.125rem 0 0.25rem;\n\n                ",
-        ": auto;\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.125rem;\n                ",
-        ": 0.125rem;\n\n                ",
-        ": 1.5rem;\n                ",
-        ": 0.5rem 0.75rem 0.5rem 0.75rem;\n                ",
-        ": 1.75rem;\n                ",
-        ": transparent;\n\n                ",
-        ": 0.75rem;\n                ",
-        ": 1rem 0 1rem;\n                ",
-        ": 0.5rem;\n                ",
-        ": 0.375rem;\n\n                ",
-        ": 0.625rem;\n                ",
-        ": 3rem;\n                ",
-        ": 2.5rem;\n                ",
-        ": 0 0.625rem;\n                ",
-        ": 0.125rem;\n            "
-    ]);
-    _templateObject2 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject3() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject3 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-function _templateObject4() {
-    var data = _tagged_template_literal([
-        ""
-    ]);
-    _templateObject4 = function _templateObject() {
-        return data;
-    };
-    return data;
-}
-var config = {
-    defaults: {
-        view: 'default',
-        viewCurrentPage: 'default',
-        size: 's'
+exports.config = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    viewCurrentPage: 'default',
+    size: 's'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-accent);\n                ", ": var(--text-accent);\n                ", ": var(--text-accent);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--surface-clear);\n                ", ": var(--text-accent);\n                ", ": var(--text-accent);\n                ", ": var(--text-accent);\n                ", ": var(--text-accent);\n                ", ": var(--text-accent);\n\n                ", ": var(--surface-solid-card);\n                ", ": var(--surface-solid-card);\n                ", ": var(--outline-solid-primary);\n\n                ", ": var(--text-primary);\n                ", ": var(--surface-accent);\n                ", ": var(--text-secondary);\n                ", ": var(--surface-clear);\n            "])), _emotion.paginationTokens.buttonColor, _emotion.paginationTokens.buttonColorHover, _emotion.paginationTokens.buttonColorActive, _emotion.paginationTokens.buttonBackgroundColor, _emotion.paginationTokens.buttonBackgroundColorHover, _emotion.paginationTokens.buttonBackgroundColorActive, _emotion.paginationTokens.buttonHoverColor, _emotion.paginationTokens.buttonActiveColor, _emotion.paginationTokens.buttonArrowColor, _emotion.paginationTokens.buttonArrowColorHover, _emotion.paginationTokens.buttonArrowColorActive, _emotion.paginationTokens.inputBackgroundColor, _emotion.paginationTokens.selectBackgroundColor, _emotion.paginationTokens.inputBorderColor, _emotion.paginationTokens.paginationColor, _emotion.paginationTokens.buttonFocusColor, _emotion.paginationTokens.paginationDisabledButtonColor, _emotion.paginationTokens.paginationDisabledButtonBackgroundColor)
+    },
+    viewCurrentPage: {
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--text-primary);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-primary);\n                ", ": var(--surface-solid-primary);\n                ", ": var(--text-primary);\n                ", ": var(--surface-solid-primary);\n            "])), _emotion.paginationTokens.paginationCurrentButtonColor, _emotion.paginationTokens.paginationCurrentButtonBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonHoverColor, _emotion.paginationTokens.paginationCurrentButtonHoverBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonActiveColor, _emotion.paginationTokens.paginationCurrentButtonActiveBackgroundColor)
+    },
+    size: {
+      s: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                ", ": var(--plasma-typo-body-m-font-family);\n                ", ": var(--plasma-typo-body-m-font-size);\n                ", ": var(--plasma-typo-body-m-font-style);\n                ", ": var(--plasma-typo-body-m-font-weight);\n                ", ": var(--plasma-typo-body-m-letter-spacing);\n                ", ": var(--plasma-typo-body-m-line-height);\n\n                ", ": 2.5rem;\n                ", ": 2.5rem;\n                ", ": 1.75rem;\n                ", ": 3rem;\n                ", ": 0.75rem;\n                ", ": 0.9rem;\n                ", ": 1.15rem;\n                ", ": 0 -0.125rem 0 0.25rem;\n\n                ", ": auto;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n                ", ": 0.125rem;\n\n                ", ": 1.5rem;\n                ", ": 0.5rem 0.75rem 0.5rem 0.75rem;\n                ", ": 1.75rem;\n                ", ": transparent;\n\n                ", ": 0.75rem;\n                ", ": 1rem 0 1rem;\n                ", ": 0.5rem;\n                ", ": 0.375rem;\n\n                ", ": 0.625rem;\n                ", ": 3rem;\n                ", ": 2.5rem;\n                ", ": 0 0.625rem;\n                ", ": 0.125rem;\n            "])), _emotion.paginationTokens.paginationFontFamily, _emotion.paginationTokens.paginationFontSize, _emotion.paginationTokens.paginationFontStyle, _emotion.paginationTokens.paginationFontWeight, _emotion.paginationTokens.paginationLetterSpacing, _emotion.paginationTokens.paginationLineHeight, _emotion.paginationTokens.buttonHeight, _emotion.paginationTokens.buttonWidth, _emotion.paginationTokens.buttonWidthShorter, _emotion.paginationTokens.paginationInputWidth, _emotion.paginationTokens.buttonRadius, _emotion.paginationTokens.paginationIconSize, _emotion.paginationTokens.paginationIconDoubleSize, _emotion.paginationTokens.buttonArrowMargin, _emotion.paginationTokens.selectHeight, _emotion.paginationTokens.selectPaddingTop, _emotion.paginationTokens.selectPaddingRight, _emotion.paginationTokens.selectPaddingBottom, _emotion.paginationTokens.selectPaddingLeft, _emotion.paginationTokens.selectItemHeight, _emotion.paginationTokens.selectItemPadding, _emotion.paginationTokens.selectItemContentLeftWidth, _emotion.paginationTokens.selectItemBackground, _emotion.paginationTokens.selectTargetArrowRight, _emotion.paginationTokens.selectTargetPadding, _emotion.paginationTokens.selectTargetInnerTop, _emotion.paginationTokens.selectTargetLabelInnerTop, _emotion.paginationTokens.inputBorderRadius, _emotion.paginationTokens.inputWidth, _emotion.paginationTokens.inputHeight, _emotion.paginationTokens.inputPadding, _emotion.paginationTokens.inputBorderWidth)
     },
-    variations: {
-        view: {
-            default: (0, _emotion.css)(_templateObject(), _emotion.paginationTokens.buttonColor, _emotion.paginationTokens.buttonColorHover, _emotion.paginationTokens.buttonColorActive, _emotion.paginationTokens.buttonBackgroundColor, _emotion.paginationTokens.buttonBackgroundColorHover, _emotion.paginationTokens.buttonBackgroundColorActive, _emotion.paginationTokens.buttonHoverColor, _emotion.paginationTokens.buttonActiveColor, _emotion.paginationTokens.buttonArrowColor, _emotion.paginationTokens.buttonArrowColorHover, _emotion.paginationTokens.buttonArrowColorActive, _emotion.paginationTokens.inputBackgroundColor, _emotion.paginationTokens.selectBackgroundColor, _emotion.paginationTokens.inputBorderColor, _emotion.paginationTokens.paginationColor, _emotion.paginationTokens.buttonFocusColor, _emotion.paginationTokens.paginationDisabledButtonColor, _emotion.paginationTokens.paginationDisabledButtonBackgroundColor)
-        },
-        viewCurrentPage: {
-            default: (0, _emotion.css)(_templateObject1(), _emotion.paginationTokens.paginationCurrentButtonColor, _emotion.paginationTokens.paginationCurrentButtonBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonHoverColor, _emotion.paginationTokens.paginationCurrentButtonHoverBackgroundColor, _emotion.paginationTokens.paginationCurrentButtonActiveColor, _emotion.paginationTokens.paginationCurrentButtonActiveBackgroundColor)
-        },
-        size: {
-            s: (0, _emotion.css)(_templateObject2(), _emotion.paginationTokens.paginationFontFamily, _emotion.paginationTokens.paginationFontSize, _emotion.paginationTokens.paginationFontStyle, _emotion.paginationTokens.paginationFontWeight, _emotion.paginationTokens.paginationLetterSpacing, _emotion.paginationTokens.paginationLineHeight, _emotion.paginationTokens.buttonHeight, _emotion.paginationTokens.buttonWidth, _emotion.paginationTokens.buttonWidthShorter, _emotion.paginationTokens.paginationInputWidth, _emotion.paginationTokens.buttonRadius, _emotion.paginationTokens.paginationIconSize, _emotion.paginationTokens.paginationIconDoubleSize, _emotion.paginationTokens.buttonArrowMargin, _emotion.paginationTokens.selectHeight, _emotion.paginationTokens.selectPaddingTop, _emotion.paginationTokens.selectPaddingRight, _emotion.paginationTokens.selectPaddingBottom, _emotion.paginationTokens.selectPaddingLeft, _emotion.paginationTokens.selectItemHeight, _emotion.paginationTokens.selectItemPadding, _emotion.paginationTokens.selectItemContentLeftWidth, _emotion.paginationTokens.selectItemBackground, _emotion.paginationTokens.selectTargetArrowRight, _emotion.paginationTokens.selectTargetPadding, _emotion.paginationTokens.selectTargetInnerTop, _emotion.paginationTokens.selectTargetLabelInnerTop, _emotion.paginationTokens.inputBorderRadius, _emotion.paginationTokens.inputWidth, _emotion.paginationTokens.inputHeight, _emotion.paginationTokens.inputPadding, _emotion.paginationTokens.inputBorderWidth)
-        },
-        type: {
-            compact: (0, _emotion.css)(_templateObject3()),
-            default: (0, _emotion.css)(_templateObject4())
-        }
+    type: {
+      compact: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral([""]))),
+      "default": /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral([""])))
     }
-};
+  }
+};

package/emotion/cjs/components/Pagination/Pagination.js

@@ -1,15 +1,15 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
-Object.defineProperty(exports, "Pagination", {
-    enumerable: true,
-    get: function() {
-        return Pagination;
-    }
-});
-var _emotion = require("@salutejs/plasma-new-hope/emotion");
-var _Paginationconfig = require("./Pagination.config");
-var mergedConfig = (0, _emotion.mergeConfig)(_emotion.paginationConfig, _Paginationconfig.config);
-var PaginationComponent = (0, _emotion.component)(mergedConfig);
-var Pagination = PaginationComponent;
+exports.Pagination = void 0;
+var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
+var _Pagination = /*#__PURE__*/require("./Pagination.config");
+var mergedConfig = /*#__PURE__*/(0, _emotion.mergeConfig)(_emotion.paginationConfig, _Pagination.config);
+var PaginationComponent = /*#__PURE__*/(0, _emotion.component)(mergedConfig);
+
+/**
+ * Пагинация
+ */
+var Pagination = exports.Pagination = PaginationComponent;

package/emotion/cjs/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useCallback } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+import { action } from '@storybook/addon-actions';
+
+import { Button } from '../Button';
+
+import { Pagination } from './Pagination';
+
+const meta: Meta<typeof Pagination> = {
+    title: 'Navigation/Pagination',
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        size: {
+            options: ['s'],
+            control: {
+                type: 'select',
+            },
+        },
+        type: {
+            options: ['default', 'compact'],
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: ['default'],
+            control: {
+                type: 'select',
+            },
+        },
+        slots: {
+            control: {
+                type: 'range',
+                min: 7,
+                max: 15,
+            },
+        },
+        viewCurrentPage: {
+            options: ['default'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['contentLeft', 'contentRight', 'size', 'view', 'viewCurrentPage']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Default: Story = {
+    args: {
+        count: 2000,
+        value: 1,
+        slots: 9,
+        perPage: 20,
+        type: 'default',
+        view: 'default',
+        viewCurrentPage: 'default',
+        size: 's',
+        hasQuickJump: true,
+        disabledPages: ['2'],
+        hasPerPage: true,
+        pilled: false,
+        square: true,
+    },
+    render: (args) => <Pagination {...args} />,
+};
+
+const PaginationContent = (args) => {
+    const [pageValue, setPageValue] = useState(args.value);
+    const [perPageValue, setPerPageValue] = useState(args.perPage);
+
+    const handleChangePage = useCallback(
+        (page: number) => {
+            setPageValue(page);
+            action('onChangePageValue')(page);
+        },
+        [pageValue, setPageValue],
+    );
+
+    const handleChangePerpage = useCallback(
+        (perPage: number) => {
+            setPerPageValue(perPage);
+            action('onChangePerPageValue')(perPage);
+        },
+        [perPageValue, setPerPageValue],
+    );
+
+    return (
+        <>
+            <Pagination
+                {...args}
+                value={pageValue}
+                perPage={perPageValue}
+                leftContent={
+                    <Button
+                        onClick={() => {
+                            setPageValue(pageValue - 1);
+                        }}
+                    >
+                        Prev
+                    </Button>
+                }
+                rightContent={
+                    <Button
+                        onClick={() => {
+                            setPageValue(pageValue + 1);
+                        }}
+                    >
+                        Next
+                    </Button>
+                }
+                onChangePageValue={handleChangePage}
+                onChangePerPageValue={handleChangePerpage}
+            />
+        </>
+    );
+};
+
+export const Content: Story = {
+    args: {
+        count: 2000,
+        value: 1,
+        slots: 9,
+        perPage: 20,
+        type: 'default',
+        view: 'default',
+        viewCurrentPage: 'default',
+        size: 's',
+        hasQuickJump: true,
+        hasPerPage: true,
+        pilled: false,
+        square: true,
+    },
+    render: (args) => <PaginationContent {...args} />,
+};