@megafon/ui-core 2.4.0 → 3.0.0-beta.10

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 === null || onClick === void 0 ? void 0 : onClick(value);
+    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;

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

@@ -34,11 +34,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["default"].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["default"].createElement(_PaginationButton["default"], {
@@ -51,6 +53,9 @@ var PaginationButtons = function PaginationButtons(_ref) {
 
     var isActive = pageNumber === activeButton;
     return /*#__PURE__*/_react["default"].createElement(_PaginationButton["default"], {
+      dataAttrs: {
+        root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, dataIndex)
+      },
       isActive: isActive,
       key: index,
       className: cn('button'),
@@ -66,6 +71,9 @@ PaginationButtons.propTypes = {
   theme: _propTypes["default"].oneOf(['default', 'light']),
   activeButton: _propTypes["default"].number.isRequired,
   hiddenButton: _propTypes["default"].string.isRequired,
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   onClick: _propTypes["default"].func.isRequired
 };
 var _default = PaginationButtons;

package/dist/lib/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/lib/components/Pagination/components/PaginationNavigation/PaginationNavigation.js

@@ -34,8 +34,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["default"].createElement(_PaginationButton["default"], {
+    dataAttrs: dataAttrs,
     className: cn({
       direction: direction
     }, className),
@@ -54,6 +56,9 @@ PaginationNavigation.propTypes = {
   disabled: _propTypes["default"].bool,
   isActive: _propTypes["default"].bool,
   className: _propTypes["default"].string,
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   onClick: _propTypes["default"].func
 };
 var _default = PaginationNavigation;

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

@@ -1,2 +1,2 @@
-declare const getRange: (from: number, to: number, step?: number) => number[];
+declare const getRange: (from: any, to: any, step?: number) => number[];
 export default getRange;

package/dist/lib/components/Paragraph/Paragraph.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-paragraph {
   font-family: inherit;
   margin: 0;
@@ -30,32 +23,18 @@ h5 {
 .mfui-paragraph_has-margin {
   margin: 0 0 16px;
 }
-.mfui-paragraph_color_green {
-  color: #00B956;
-}
-.mfui-paragraph_color_purple {
-  color: #731982;
-}
-.mfui-paragraph_color_base,
-.mfui-paragraph_color_clearWhite {
-  color: #FFFFFF;
-}
-.mfui-paragraph_color_spbSky0 {
-  color: #F6F6F6;
-}
-.mfui-paragraph_color_spbSky1 {
-  color: #EDEDED;
+.mfui-paragraph_color_inherit {
+  color: inherit;
 }
-.mfui-paragraph_color_spbSky2 {
-  color: #D8D8D8;
+.mfui-paragraph_color_default {
+  color: var(--content);
 }
-.mfui-paragraph_color_content,
-.mfui-paragraph_color_freshAsphalt {
-  color: #333333;
+.mfui-paragraph_color_white {
+  color: var(--stcWhite);
 }
-.mfui-paragraph_color_fullBlack {
-  color: #000000;
+.mfui-paragraph_color_green {
+  color: var(--brandGreen);
 }
-.mfui-paragraph_color_inherit {
-  color: inherit;
+.mfui-paragraph_color_purple {
+  color: var(--brandPurple);
 }

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

@@ -1,19 +1,11 @@
 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;
-    FULL_BLACK: 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";
 };
 declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
@@ -27,6 +19,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/lib/components/Paragraph/Paragraph.js

@@ -7,13 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-require("core-js/modules/es.array.concat");
-
-require("core-js/modules/es.array.includes");
-
 require("core-js/modules/es.object.values");
 
-require("core-js/modules/es.string.includes");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -25,22 +21,14 @@ 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 COLORS = {
-  GREEN: 'green',
-  PURPLE: 'purple',
-  BASE: 'base',
-  SPB_SKY_0: 'spbSky0',
-  SPB_SKY_1: 'spbSky1',
-  SPB_SKY_2: 'spbSky2',
-  CONTENT: 'content',
-  FULL_BLACK: 'fullBlack',
   INHERIT: 'inherit',
-
-  /** @deprecated */
-  CLEAR_WHITE: 'clearWhite',
-
-  /** @deprecated */
-  FRESH_ASPHALT: 'freshAsphalt'
+  DEFAULT: 'default',
+  WHITE: 'white',
+  GREEN: 'green',
+  PURPLE: 'purple'
 };
 var cn = (0, _uiHelpers.cnCreate)('mfui-paragraph');
 
@@ -49,44 +37,30 @@ 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", (0, _extends2["default"])({}, (0, _uiHelpers.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))
 };
 var _default = Paragraph;
 exports["default"] = _default;

package/dist/lib/components/Preloader/Preloader.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-preloader {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -106,20 +99,20 @@ h5 {
           animation: scaling 1s linear infinite;
 }
 .mfui-preloader_color_default .mfui-preloader__item_first:before {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-preloader_color_default .mfui-preloader__item_second:before {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
   -webkit-animation-delay: 0.166s;
           animation-delay: 0.166s;
 }
 .mfui-preloader_color_default .mfui-preloader__item_third:before {
-  background-color: #731982;
+  background-color: var(--brandPurple);
   -webkit-animation-delay: 0.33s;
           animation-delay: 0.33s;
 }
 .mfui-preloader_color_black .mfui-preloader__item:before {
-  background-color: #000000;
+  background-color: var(--stcBlack);
   opacity: 0.35;
   -webkit-animation: opacityScaling 1s linear infinite;
           animation: opacityScaling 1s linear infinite;
@@ -133,7 +126,7 @@ h5 {
           animation-delay: 0.33s;
 }
 .mfui-preloader_color_white .mfui-preloader__item:before {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
   -webkit-animation: scaling 1s linear infinite;
           animation: scaling 1s linear infinite;
 }

package/dist/lib/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/lib/components/Preloader/Preloader.js

@@ -11,6 +11,8 @@ require("core-js/modules/es.object.values");
 
 require("core-js/modules/web.timers");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -47,7 +49,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 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -62,7 +65,7 @@ var Preloader = function Preloader(_ref) {
       clearTimeout(timerId);
     };
   }, []);
-  return isShowed ? /*#__PURE__*/React.createElement("div", {
+  return isShowed ? /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color,
       'size-all': sizeAll,
@@ -71,7 +74,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
     })
@@ -93,7 +96,10 @@ 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)
+  })
 };
 var _default = Preloader;
 exports["default"] = _default;

package/dist/lib/components/RadioButton/RadioButton.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-radio-button__input {
   position: absolute;
   top: 0;
@@ -48,22 +41,22 @@ h5 {
           box-sizing: border-box;
   width: 20px;
   height: 20px;
-  border: 2px solid #D8D8D8;
+  border: 2px solid var(--spbSky2);
   border-radius: 50%;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
-  border: 6px solid #00B956;
+  border: 6px solid var(--brandGreen);
 }
 .mfui-radio-button__label:hover .mfui-radio-button__custom-input:before {
-  border-color: #10E272;
+  border-color: var(--buttonHoverGreen);
 }
 .mfui-radio-button__label:active .mfui-radio-button__custom-input:before {
-  border-color: #404D46;
+  border-color: var(--buttonDown);
 }
 .mfui-radio-button__label_disabled .mfui-radio-button__custom-input:before {
-  border-color: #D8D8D8 !important;
-  background-color: #EDEDED !important;
+  border-color: var(--spbSky2) !important;
+  background-color: var(--spbSky1) !important;
 }
 .mfui-radio-button__text_size_small {
   font-size: 12px;

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { IFilterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import './RadioButton.less';
-export interface IRadioButtonProps extends IFilterDataAttrs {
+export interface IRadioButtonProps {
     /** Значение */
     value: string;
     /** Имя для тега form */
@@ -22,35 +20,17 @@ export interface IRadioButtonProps extends IFilterDataAttrs {
         customInput?: string;
         labelText?: string;
     };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        input?: Record<string, string>;
+        text?: Record<string, string>;
+    };
     children?: React.ReactNode;
     /** Обработчик изменения значения 'value' */
     onChange?: (value: string) => void;
     /** Ссылка на input */
     inputRef?: React.Ref<HTMLInputElement>;
 }
-declare class RadioButton extends React.Component<IRadioButtonProps> {
-    static propTypes: {
-        value: PropTypes.Validator<string>;
-        name: PropTypes.Requireable<string>;
-        textSize: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        isChecked: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        classes: PropTypes.Requireable<PropTypes.InferProps<{
-            root: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            customInput: PropTypes.Requireable<string>;
-            labelText: PropTypes.Requireable<string>;
-        }>>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        inputRef: PropTypes.Requireable<any>;
-        dataAttrs: PropTypes.Requireable<{
-            [x: string]: string;
-        }>;
-    };
-    static defaultProps: Partial<IRadioButtonProps>;
-    handleChange: () => void;
-    render(): JSX.Element;
-}
+declare const RadioButton: React.FC<IRadioButtonProps>;
 export default RadioButton;