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

package/dist/es/components/Notification/Notification.js

@@ -2,7 +2,7 @@ import "core-js/modules/es.object.values";
 import "core-js/modules/es.string.link";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Header from "../Header/Header";
 import TextLink from "../TextLink/TextLink";
@@ -89,11 +89,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.createElement(TextLink, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+      },
       className: cn('link'),
       onClick: onLinkClick,
       rel: rel,
@@ -129,6 +133,9 @@ var Notification = function Notification(_ref) {
   };
 
   return /*#__PURE__*/React.createElement(Tile, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root
+    },
     radius: "rounded",
     shadowLevel: shadowLevel,
     className: cn({
@@ -142,19 +149,22 @@ var Notification = function Notification(_ref) {
   }, renderIcon()), /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, title && /*#__PURE__*/React.createElement(Header, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    },
     as: "h5",
     className: cn('title', {
       'close-padding': hasCloseButton
     })
-  }, title), /*#__PURE__*/React.createElement("p", {
+  }, title), /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
     className: cn('text', {
       'close-padding': hasCloseButton && !title
     })
-  }, children), link && renderLink())), hasCloseButton && /*#__PURE__*/React.createElement("button", {
+  }), children), link && renderLink())), hasCloseButton && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.close), {
     className: cn('close'),
     type: "button",
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(CancelIcon, {
+  }), /*#__PURE__*/React.createElement(CancelIcon, {
     className: cn('close-icon')
   })));
 };
@@ -171,6 +181,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/es/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/es/components/Pagination/Pagination.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./Pagination.css";
 import PaginationButtons from "./components/PaginationButtons/PaginationButtons";
@@ -10,6 +11,7 @@ var cn = 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;
@@ -23,21 +25,30 @@ var Pagination = function Pagination(_ref) {
   var handlePageButtonClick = React.useCallback(function (value) {
     onChange(value);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn()
-  }, /*#__PURE__*/React.createElement(PaginationNavigation, {
+  }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.prev
+    },
     direction: "left",
     disabled: activePage === Button.FIRST,
     onClick: handleBackClick,
     className: cn('button'),
     theme: theme
   }), /*#__PURE__*/React.createElement(PaginationButtons, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
     items: paginationItems,
     activeButton: activePage,
     hiddenButton: Button.HIDDEN,
     theme: theme,
     onClick: handlePageButtonClick
   }), /*#__PURE__*/React.createElement(PaginationNavigation, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.next
+    },
     disabled: activePage === totalPages,
     onClick: handleNextClick,
     className: cn('button'),
@@ -49,6 +60,12 @@ Pagination.propTypes = {
   totalPages: PropTypes.number.isRequired,
   activePage: PropTypes.number.isRequired,
   theme: PropTypes.oneOf(['default', 'light']),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    prev: PropTypes.objectOf(PropTypes.string.isRequired),
+    next: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onChange: PropTypes.func.isRequired
 };
 export default Pagination;

package/dist/es/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/es/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/es/components/Pagination/components/PaginationButton/PaginationButton.js

@@ -1,5 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./PaginationButton.css";
 var cn = cnCreate('mfui-pagination-button');
@@ -14,13 +15,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.createElement("button", {
+  return /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       active: isActive,
       theme: theme
@@ -28,7 +30,7 @@ var PaginationButton = function PaginationButton(_ref) {
     disabled: disabled,
     onClick: handleClick,
     type: "button"
-  }, children);
+  }), children);
 };
 
 PaginationButton.propTypes = {
@@ -36,7 +38,10 @@ PaginationButton.propTypes = {
   isActive: PropTypes.bool,
   theme: PropTypes.oneOf(['default', 'light']),
   className: PropTypes.string,
-  onClick: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  onClick: PropTypes.func
 };
 export default PaginationButton;

package/dist/es/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;

package/dist/es/components/Pagination/components/PaginationButtons/PaginationButtons.js

@@ -1,7 +1,7 @@
 import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import PaginationButton from "../PaginationButton/PaginationButton";
 import "./PaginationButtons.css";
@@ -21,11 +21,13 @@ var PaginationButtons = function PaginationButtons(_ref) {
       theme = _ref.theme,
       onClick = _ref.onClick,
       activeButton = _ref.activeButton,
-      hiddenButton = _ref.hiddenButton;
+      hiddenButton = _ref.hiddenButton,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
   }, items.map(function (pageNumber, index) {
     var isHiddenButton = hiddenButton === pageNumber;
+    var dataIndex = typeof pageNumber === 'number' ? pageNumber : undefined;
 
     if (isHiddenButton) {
       return /*#__PURE__*/React.createElement(PaginationButton, {
@@ -38,6 +40,9 @@ var PaginationButtons = function PaginationButtons(_ref) {
 
     var isActive = pageNumber === activeButton;
     return /*#__PURE__*/React.createElement(PaginationButton, {
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, dataIndex)
+      },
       isActive: isActive,
       key: index,
       className: cn('button'),
@@ -53,6 +58,9 @@ PaginationButtons.propTypes = {
   theme: PropTypes.oneOf(['default', 'light']),
   activeButton: PropTypes.number.isRequired,
   hiddenButton: PropTypes.string.isRequired,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClick: PropTypes.func.isRequired
 };
 export default PaginationButtons;

package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.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/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
 import './PaginationNavigation.less';
-interface IPaginationNavigation {
+interface IPaginationNavigationProps {
     direction?: 'left' | 'right';
     theme?: 'default' | 'light';
     disabled?: boolean;
     isActive?: boolean;
     className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     onClick?: (value?: number | string) => void;
 }
-declare const PaginationNavigation: React.FC<IPaginationNavigation>;
+declare const PaginationNavigation: React.FC<IPaginationNavigationProps>;
 export default PaginationNavigation;

package/dist/es/components/Pagination/components/PaginationNavigation/PaginationNavigation.js

@@ -22,8 +22,10 @@ var PaginationNavigation = function PaginationNavigation(_ref) {
       disabled = _ref.disabled,
       isActive = _ref.isActive,
       onClick = _ref.onClick,
-      className = _ref.className;
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
   return /*#__PURE__*/React.createElement(PaginationButton, {
+    dataAttrs: dataAttrs,
     className: cn({
       direction: direction
     }, className),
@@ -42,6 +44,9 @@ PaginationNavigation.propTypes = {
   disabled: PropTypes.bool,
   isActive: PropTypes.bool,
   className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   onClick: PropTypes.func
 };
 export default PaginationNavigation;

package/dist/es/components/Paragraph/Paragraph.css

@@ -23,16 +23,21 @@
 .mfui-paragraph_has-margin {
   margin: 0 0 16px;
 }
+.mfui-paragraph_color_inherit {
+  color: inherit;
+}
+.mfui-paragraph_color_default {
+  color: var(--content);
+}
+.mfui-paragraph_color_white {
+  color: var(--stcWhite);
+}
 .mfui-paragraph_color_green {
   color: var(--brandGreen);
 }
 .mfui-paragraph_color_purple {
   color: var(--brandPurple);
 }
-.mfui-paragraph_color_base,
-.mfui-paragraph_color_clearWhite {
-  color: var(--stcWhite);
-}
 .mfui-paragraph_color_spbSky0 {
   color: var(--spbSky0);
 }
@@ -42,10 +47,3 @@
 .mfui-paragraph_color_spbSky2 {
   color: var(--spbSky2);
 }
-.mfui-paragraph_color_content,
-.mfui-paragraph_color_freshAsphalt {
-  color: var(--content);
-}
-.mfui-paragraph_color_inherit {
-  color: inherit;
-}

package/dist/es/components/Paragraph/Paragraph.d.ts

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import './Paragraph.less';
 declare const COLORS: {
-    GREEN: string;
-    PURPLE: string;
-    BASE: string;
-    SPB_SKY_0: string;
-    SPB_SKY_1: string;
-    SPB_SKY_2: string;
-    CONTENT: string;
-    INHERIT: string;
-    /** @deprecated */
-    CLEAR_WHITE: string;
-    /** @deprecated */
-    FRESH_ASPHALT: string;
+    readonly INHERIT: "inherit";
+    readonly DEFAULT: "default";
+    readonly WHITE: "white";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
 };
 declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
@@ -26,6 +22,10 @@ export interface IParagraphProps {
     color?: ColorType;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Paragraph: React.FC<IParagraphProps>;
 export default Paragraph;

package/dist/es/components/Paragraph/Paragraph.js

@@ -1,26 +1,18 @@
-import "core-js/modules/es.array.concat";
-import "core-js/modules/es.array.includes";
 import "core-js/modules/es.object.values";
-import "core-js/modules/es.string.includes";
+import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Paragraph.css";
 var COLORS = {
+  INHERIT: 'inherit',
+  DEFAULT: 'default',
+  WHITE: 'white',
   GREEN: 'green',
   PURPLE: 'purple',
-  BASE: 'base',
   SPB_SKY_0: 'spbSky0',
   SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2',
-  CONTENT: 'content',
-  INHERIT: 'inherit',
-
-  /** @deprecated */
-  CLEAR_WHITE: 'clearWhite',
-
-  /** @deprecated */
-  FRESH_ASPHALT: 'freshAsphalt'
+  SPB_SKY_2: 'spbSky2'
 };
 var cn = cnCreate('mfui-paragraph');
 
@@ -29,43 +21,29 @@ var Paragraph = function Paragraph(_ref) {
       size = _ref$size === void 0 ? 'regular' : _ref$size,
       align = _ref.align,
       _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'freshAsphalt' : _ref$color,
+      color = _ref$color === void 0 ? COLORS.DEFAULT : _ref$color,
       className = _ref.className,
       _ref$hasMargin = _ref.hasMargin,
       hasMargin = _ref$hasMargin === void 0 ? true : _ref$hasMargin,
+      dataAttrs = _ref.dataAttrs,
       children = _ref.children;
-  return /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React.createElement("p", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
       align: align,
       color: color,
       'has-margin': hasMargin
     }, className)
-  }, children);
+  }), children);
 };
 
 Paragraph.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   align: PropTypes.oneOf(['left', 'center', 'right']),
   size: PropTypes.oneOf(['regular', 'small']),
   hasMargin: PropTypes.bool,
-  color: function color(props, propName, componentName) {
-    var deprecatedBlackValue = COLORS.FRESH_ASPHALT;
-    var deprecatedWhiteValue = COLORS.CLEAR_WHITE;
-    var propValue = props[propName];
-
-    if (propValue && !Object.values(COLORS).includes(propValue)) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            expected one of [").concat(Object.values(COLORS), "]"));
-    }
-
-    if (propValue && props[propName] === deprecatedBlackValue) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedBlackValue, "' is deprecated, please use value '").concat(COLORS.CONTENT, "'"));
-    }
-
-    if (propValue && props[propName] === deprecatedWhiteValue) {
-      return new Error("Failed prop type: Invalid prop '".concat(propName, "' of value '").concat(propValue, "' supplied to '").concat(componentName, "',\n            value '").concat(deprecatedWhiteValue, "' is deprecated, please use value '").concat(COLORS.BASE, "'"));
-    }
-
-    return null;
-  }
+  color: PropTypes.oneOf(Object.values(COLORS))
 };
 export default Paragraph;

package/dist/es/components/Preloader/Preloader.d.ts

@@ -26,6 +26,10 @@ export interface IPreloaderProps {
     sizeMobile?: PreloaderSizesType;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
 }
 declare const Preloader: React.FC<IPreloaderProps>;
 export default Preloader;

package/dist/es/components/Preloader/Preloader.js

@@ -1,8 +1,9 @@
 import "core-js/modules/es.object.values";
 import "core-js/modules/web.timers";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./Preloader.css";
 export var PreloaderColors = {
@@ -25,7 +26,8 @@ var Preloader = function Preloader(_ref) {
       sizeDesktop = _ref.sizeDesktop,
       sizeTablet = _ref.sizeTablet,
       sizeMobile = _ref.sizeMobile,
-      className = _ref.className;
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -40,7 +42,7 @@ var Preloader = function Preloader(_ref) {
       clearTimeout(timerId);
     };
   }, []);
-  return isShowed ? /*#__PURE__*/React.createElement("div", {
+  return isShowed ? /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
       'size-all': sizeAll,
@@ -49,7 +51,7 @@ var Preloader = function Preloader(_ref) {
       'size-tablet': sizeTablet,
       'size-mobile': sizeMobile
     }, className)
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('item', {
       first: true
     })
@@ -71,6 +73,9 @@ Preloader.propTypes = {
   sizeDesktop: PropTypes.oneOf(Object.values(PreloaderSizes)),
   sizeTablet: PropTypes.oneOf(Object.values(PreloaderSizes)),
   sizeMobile: PropTypes.oneOf(Object.values(PreloaderSizes)),
-  className: PropTypes.string
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 export default Preloader;