@megafon/ui-core 3.0.0-beta.3 → 3.0.0-beta.7

package/dist/lib/components/Header/Header.js

@@ -7,26 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-require("core-js/modules/es.date.to-string");
-
-require("core-js/modules/es.object.to-string");
-
-require("core-js/modules/es.reflect.construct");
-
-require("core-js/modules/es.regexp.to-string");
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -39,79 +21,34 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _createSuper(Derived) {
-  return function () {
-    var Super = (0, _getPrototypeOf2["default"])(Derived),
-        result;
-
-    if (_isNativeReflectConstruct()) {
-      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return (0, _possibleConstructorReturn2["default"])(this, result);
-  };
-}
-
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
-
-  try {
-    Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
 var cn = (0, _uiHelpers.cnCreate)('mfui-header');
 
-var Header = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Header, _React$Component);
-
-  var _super = _createSuper(Header);
-
-  function Header() {
-    (0, _classCallCheck2["default"])(this, Header);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(Header, [{
-    key: "renderAddition",
-    value: function renderAddition() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn('addition')
-      }, this.props.addition);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          color = _this$props.color,
-          margin = _this$props.margin,
-          level = _this$props.as,
-          hAlign = _this$props.hAlign,
-          onClick = _this$props.onClick,
-          dataAttrs = _this$props.dataAttrs,
-          className = _this$props.className;
-      var ElementType = level;
-      return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
-        className: cn({
-          color: color,
-          margin: margin,
-          level: level,
-          'h-align': hAlign
-        }, className),
-        onClick: onClick
-      }), this.props.children, this.props.addition && this.renderAddition());
-    }
-  }]);
-  return Header;
-}(React.Component);
+var Header = function Header(_ref) {
+  var addition = _ref.addition,
+      _ref$as = _ref.as,
+      level = _ref$as === void 0 ? 'h1' : _ref$as,
+      children = _ref.children,
+      className = _ref.className,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'default' : _ref$color,
+      dataAttrs = _ref.dataAttrs,
+      _ref$hAlign = _ref.hAlign,
+      hAlign = _ref$hAlign === void 0 ? 'inherit' : _ref$hAlign,
+      margin = _ref.margin,
+      onClick = _ref.onClick;
+  var ElementType = level;
+  return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      color: color,
+      margin: margin,
+      level: level,
+      'h-align': hAlign
+    }, className),
+    onClick: onClick
+  }), children, addition && /*#__PURE__*/React.createElement("div", {
+    className: cn('addition')
+  }, addition));
+};
 
 Header.propTypes = {
   as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
@@ -119,14 +56,10 @@ Header.propTypes = {
   margin: PropTypes.bool,
   addition: PropTypes.element,
   hAlign: PropTypes.oneOf(['inherit', 'left', 'center', 'right']),
-  dataAttrs: PropTypes.objectOf(PropTypes.string),
-  onClick: PropTypes.func,
-  children: PropTypes.node
-};
-Header.defaultProps = {
-  as: 'h1',
-  color: 'default',
-  hAlign: 'inherit'
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  onClick: PropTypes.func
 };
 var _default = Header;
 exports["default"] = _default;

package/dist/lib/components/InputLabel/InputLabel.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import './InputLabel.less';
 export interface IInputLabelProps {
     htmlFor?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const InputLabel: React.FC<IInputLabelProps>;
 export default InputLabel;

package/dist/lib/components/InputLabel/InputLabel.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -17,19 +19,25 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-input-label');
 
 var InputLabel = function InputLabel(_ref) {
   var htmlFor = _ref.htmlFor,
+      dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     htmlFor: htmlFor,
     className: cn()
-  }, children);
+  }), children);
 };
 
 InputLabel.propTypes = {
-  htmlFor: PropTypes.string
+  htmlFor: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 var _default = InputLabel;
 exports["default"] = _default;

package/dist/lib/components/Link/Link.d.ts

@@ -8,11 +8,15 @@ export interface ILinkProps {
     target?: '_self' | '_blank' | '_parent' | '_top';
     /** rel - аргумент тега <a> */
     rel?: string;
-    /** Обработчик клика */
-    onClick?: (e: React.MouseEvent<EventTarget>) => void;
     /** Добавление атрибута download */
     download?: boolean;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     children?: JSX.Element[] | Element[] | JSX.Element | string | Element | React.ReactNode;
+    /** Обработчик клика */
+    onClick?: (e: React.MouseEvent<EventTarget>) => void;
 }
 declare const Link: React.FC<ILinkProps>;
 export default Link;

package/dist/lib/components/Link/Link.js

@@ -7,19 +7,45 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.array.index-of");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
-var Link = function Link(props) {
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var Link = function Link(_a) {
+  var dataAttrs = _a.dataAttrs,
+      props = __rest(_a, ["dataAttrs"]);
+
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/anchor-has-content
-    React.createElement("a", props)
+    React.createElement("a", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), props))
   );
 };
 
@@ -28,9 +54,12 @@ Link.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string, PropTypes.node]),
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rel: PropTypes.string,
-  onClick: PropTypes.func,
-  download: PropTypes.bool
+  download: PropTypes.bool,
+  onClick: PropTypes.func
 };
 var _default = Link;
 exports["default"] = _default;

package/dist/lib/components/Notification/Notification.css

@@ -1,50 +1,3 @@
-:root {
-  --green: #00B956;
-  --purple: #731982;
-  --base: #FFFFFF;
-  --content: #333333;
-  --spbSky0: #F6F6F6;
-  --spbSky1: #EDEDED;
-  --spbSky2: #D8D8D8;
-  --spbSky3: #999999;
-  --warmRedC: #EB5A40;
-  --137C: #FFA717;
-  --311C: #5BD9E5;
-  --reflexBlue: #444189;
-  --fury: #F62434;
-  --systemBlue: #34AAF2;
-  --background: #FFFFFF;
-  --buttonHoverGreen: #10E272;
-  --buttonhoverPurple: #534455;
-  --buttonDown: #404D46;
-  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
-  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
-  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
-  --STCWhite: #FFFFFF;
-  --STCBlack: #333333;
-  --STCWhite5: #FFFFFF0D;
-  --STCWhite10: #FFFFFF1A;
-  --STCWhite20: #FFFFFF33;
-  --STCWhite50: #FFFFFF80;
-  --STCBlack5: #3333330D;
-  --STCBlack10: #3333331A;
-  --STCBlack20: #33333333;
-  --STCBlack50: #33333380;
-  --green80: #0CDC78;
-  --green20: #DDFFEC;
-  --purple80: #AA67C1;
-  --purple20: #FFEEFF;
-  --warmRedC80: #FF765D;
-  --warmRedC20: #FFCFC7;
-  --137C80: #FFB945;
-  --137C20: #FFEDD1;
-  --311C80: #62E3FF;
-  --311C20: #E1FAFF;
-  --reflexBlue80: #554FC9;
-  --reflexBlue20: #EBEAFF;
-  --fury80: #F8505D;
-  --fury20: #FFC5C9;
-}
 h1,
 h2,
 h3,

package/dist/lib/components/Notification/Notification.d.ts

@@ -37,6 +37,14 @@ export interface INotificationProps {
     target?: '_self' | '_blank' | '_parent' | '_top';
     /** Иконка */
     icon?: JSX.Element;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        title?: Record<string, string>;
+        text?: Record<string, string>;
+        link?: Record<string, string>;
+        close?: Record<string, string>;
+    };
     /** Обработчик на закрытие */
     onClose?: () => void;
     /** Обработчик клика по ссылке */

package/dist/lib/components/Notification/Notification.js

@@ -113,11 +113,15 @@ var Notification = function Notification(_ref) {
       href = _ref.href,
       target = _ref.target,
       icon = _ref.icon,
+      dataAttrs = _ref.dataAttrs,
       onClose = _ref.onClose,
       onLinkClick = _ref.onLinkClick;
 
   var renderLink = function renderLink() {
     return /*#__PURE__*/_react["default"].createElement(_TextLink["default"], {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+      },
       className: cn('link'),
       onClick: onLinkClick,
       rel: rel,
@@ -153,6 +157,9 @@ var Notification = function Notification(_ref) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
+    },
     radius: "rounded",
     shadowLevel: shadowLevel,
     className: cn({
@@ -166,19 +173,22 @@ var Notification = function Notification(_ref) {
   }, renderIcon()), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('content')
   }, title && /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    },
     as: "h5",
     className: cn('title', {
       'close-padding': hasCloseButton
     })
-  }, title), /*#__PURE__*/_react["default"].createElement("p", {
+  }, title), /*#__PURE__*/_react["default"].createElement("p", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
       'close-padding': hasCloseButton && !title
     })
-  }, children), link && renderLink())), hasCloseButton && /*#__PURE__*/_react["default"].createElement("button", {
+  }), children), link && renderLink())), hasCloseButton && /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
     className: cn('close'),
     type: "button",
     onClick: onClose
-  }, /*#__PURE__*/_react["default"].createElement(CancelIcon, {
+  }), /*#__PURE__*/_react["default"].createElement(CancelIcon, {
     className: cn('close-icon')
   })));
 };
@@ -195,6 +205,13 @@ Notification.propTypes = {
   href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   icon: PropTypes.element,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    title: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired),
+    close: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClose: PropTypes.func,
   onLinkClick: PropTypes.func
 };

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

@@ -1,6 +1,13 @@
 import React from 'react';
 import './Pagination.less';
-interface IPagination {
+interface IPaginationProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        prev?: Record<string, string>;
+        next?: Record<string, string>;
+        button?: Record<string, string>;
+    };
     /** Общее количество страниц */
     totalPages: number;
     /** Номер текущей страницы */
@@ -10,5 +17,5 @@ interface IPagination {
     /** Обработчик изменения активной страницы */
     onChange: (value: number) => void;
 }
-declare const Pagination: React.FC<IPagination>;
+declare const Pagination: React.FC<IPaginationProps>;
 export default Pagination;

package/dist/lib/components/Pagination/Pagination.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -30,6 +32,7 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-pagination');
 var Pagination = function Pagination(_ref) {
   var totalPages = _ref.totalPages,
       activePage = _ref.activePage,
+      dataAttrs = _ref.dataAttrs,
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'default' : _ref$theme,
       onChange = _ref.onChange;
@@ -47,21 +50,30 @@ var Pagination = function Pagination(_ref) {
     onChange(value);
   }, [onChange]);
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn()
-  }, /*#__PURE__*/_react["default"].createElement(_PaginationNavigation["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_PaginationNavigation["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
+    },
     direction: "left",
     disabled: activePage === _usePagination.Button.FIRST,
     onClick: handleBackClick,
     className: cn('button'),
     theme: theme
   }), /*#__PURE__*/_react["default"].createElement(_PaginationButtons["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
     items: paginationItems,
     activeButton: activePage,
     hiddenButton: _usePagination.Button.HIDDEN,
     theme: theme,
     onClick: handlePageButtonClick
   }), /*#__PURE__*/_react["default"].createElement(_PaginationNavigation["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
+    },
     disabled: activePage === totalPages,
     onClick: handleNextClick,
     className: cn('button'),
@@ -73,6 +85,12 @@ Pagination.propTypes = {
   totalPages: _propTypes["default"].number.isRequired,
   activePage: _propTypes["default"].number.isRequired,
   theme: _propTypes["default"].oneOf(['default', 'light']),
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    prev: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    next: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    button: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   onChange: _propTypes["default"].func.isRequired
 };
 var _default = Pagination;

package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.css

@@ -1,50 +1,3 @@
-:root {
-  --green: #00B956;
-  --purple: #731982;
-  --base: #FFFFFF;
-  --content: #333333;
-  --spbSky0: #F6F6F6;
-  --spbSky1: #EDEDED;
-  --spbSky2: #D8D8D8;
-  --spbSky3: #999999;
-  --warmRedC: #EB5A40;
-  --137C: #FFA717;
-  --311C: #5BD9E5;
-  --reflexBlue: #444189;
-  --fury: #F62434;
-  --systemBlue: #34AAF2;
-  --background: #FFFFFF;
-  --buttonHoverGreen: #10E272;
-  --buttonhoverPurple: #534455;
-  --buttonDown: #404D46;
-  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
-  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
-  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
-  --STCWhite: #FFFFFF;
-  --STCBlack: #333333;
-  --STCWhite5: #FFFFFF0D;
-  --STCWhite10: #FFFFFF1A;
-  --STCWhite20: #FFFFFF33;
-  --STCWhite50: #FFFFFF80;
-  --STCBlack5: #3333330D;
-  --STCBlack10: #3333331A;
-  --STCBlack20: #33333333;
-  --STCBlack50: #33333380;
-  --green80: #0CDC78;
-  --green20: #DDFFEC;
-  --purple80: #AA67C1;
-  --purple20: #FFEEFF;
-  --warmRedC80: #FF765D;
-  --warmRedC20: #FFCFC7;
-  --137C80: #FFB945;
-  --137C20: #FFEDD1;
-  --311C80: #62E3FF;
-  --311C20: #E1FAFF;
-  --reflexBlue80: #554FC9;
-  --reflexBlue20: #EBEAFF;
-  --fury80: #F8505D;
-  --fury20: #FFC5C9;
-}
 h1,
 h2,
 h3,

package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.d.ts

@@ -1,13 +1,16 @@
 import React from 'react';
 import './PaginationButton.less';
 declare type ValueType = string | number;
-export interface IPaginationButton {
+export interface IPaginationButtonProps {
     disabled?: boolean;
     isActive?: boolean;
     theme?: 'default' | 'light';
+    value?: ValueType;
     className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     onClick?: (value?: ValueType) => void;
-    value?: ValueType;
 }
-declare const PaginationButton: React.FC<IPaginationButton>;
+declare const PaginationButton: React.FC<IPaginationButtonProps>;
 export default PaginationButton;

package/dist/lib/components/Pagination/components/PaginationButton/PaginationButton.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -25,13 +27,14 @@ var PaginationButton = function PaginationButton(_ref) {
       className = _ref.className,
       children = _ref.children,
       onClick = _ref.onClick,
-      value = _ref.value;
+      value = _ref.value,
+      dataAttrs = _ref.dataAttrs;
 
   var handleClick = function handleClick() {
     onClick && onClick(value);
   };
 
-  return /*#__PURE__*/_react["default"].createElement("button", {
+  return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
       theme: theme
@@ -39,7 +42,7 @@ var PaginationButton = function PaginationButton(_ref) {
     disabled: disabled,
     onClick: handleClick,
     type: "button"
-  }, children);
+  }), children);
 };
 
 PaginationButton.propTypes = {
@@ -47,8 +50,11 @@ PaginationButton.propTypes = {
   isActive: _propTypes["default"].bool,
   theme: _propTypes["default"].oneOf(['default', 'light']),
   className: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string])
+  value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
+  onClick: _propTypes["default"].func
 };
 var _default = PaginationButton;
 exports["default"] = _default;

package/dist/lib/components/Pagination/components/PaginationButtons/PaginationButtons.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
 import './PaginationButtons.less';
-interface IPaginationButtons {
+interface IPaginationButtonsProps {
     items: Array<string | number>;
     theme?: 'default' | 'light';
     activeButton: number;
     hiddenButton: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     onClick: (value?: number | string) => void;
 }
-declare const PaginationButtons: React.FC<IPaginationButtons>;
+declare const PaginationButtons: React.FC<IPaginationButtonsProps>;
 export default PaginationButtons;