@megafon/ui-core 2.1.4 → 3.0.0-beta.2

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

@@ -1,3 +1,50 @@
+: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,
@@ -33,30 +80,30 @@ h5 {
   pointer-events: none;
 }
 .mfui-pagination-button_active {
-  border-color: #00B956;
+  border-color: var(--brandGreen);
   pointer-events: none;
 }
 .mfui-pagination-button_theme_default {
-  color: #333333;
+  color: var(--content);
 }
 .mfui-pagination-button_theme_default svg {
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-pagination-button_theme_default:hover {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-pagination-button_theme_default.mfui-pagination-button_active {
-  border-color: #00B956;
+  border-color: var(--brandGreen);
 }
 .mfui-pagination-button_theme_light {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-pagination-button_theme_light svg {
-  fill: #FFFFFF;
+  fill: var(--stcWhite);
 }
 .mfui-pagination-button_theme_light:hover {
-  background-color: rgba(255, 255, 255, 0.25);
+  background-color: var(--stcWhite20);
 }
 .mfui-pagination-button_theme_light.mfui-pagination-button_active {
-  border-color: #FFFFFF;
+  border-color: var(--stcWhite);
 }

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

@@ -1,3 +1,50 @@
+: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/Paragraph/Paragraph.css

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

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

@@ -8,7 +8,6 @@ declare const COLORS: {
     SPB_SKY_1: string;
     SPB_SKY_2: string;
     CONTENT: string;
-    FULL_BLACK: string;
     INHERIT: string;
     /** @deprecated */
     CLEAR_WHITE: string;

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

@@ -14,7 +14,6 @@ var COLORS = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2',
   CONTENT: 'content',
-  FULL_BLACK: 'fullBlack',
   INHERIT: 'inherit',
 
   /** @deprecated */
@@ -55,7 +54,7 @@ Paragraph.propTypes = {
     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), "]"));
+      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) {

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import './RadioButton.less';
-export interface IRadioButtonProps {
+export interface IRadioButtonProps extends IFilterDataAttrs {
     /** Значение */
     value: string;
     /** Имя для тега form */
@@ -44,6 +45,9 @@ declare class RadioButton extends React.Component<IRadioButtonProps> {
         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;

package/dist/es/components/RadioButton/RadioButton.js

@@ -18,7 +18,7 @@ function _createSuper(Derived) { return function () { var Super = _getPrototypeO
 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; } }
 
 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 "./RadioButton.css";
 var cn = cnCreate('mfui-radio-button');
@@ -58,14 +58,15 @@ var RadioButton = /*#__PURE__*/function (_React$Component) {
           inputRef = _this$props2.inputRef,
           className = _this$props2.className,
           _this$props2$classes = _this$props2.classes,
-          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes;
+          classes = _this$props2$classes === void 0 ? {} : _this$props2$classes,
+          dataAttrs = _this$props2.dataAttrs;
       var checkedProp = isChecked !== undefined ? {
         checked: isChecked
       } : {};
       var rootClassNames = Array.isArray(className) ? [].concat(_toConsumableArray(className), [classes.root]) : [className, classes.root];
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("div", _extends({
         className: cn(rootClassNames)
-      }, /*#__PURE__*/React.createElement("label", {
+      }, filterDataAttrs(dataAttrs)), /*#__PURE__*/React.createElement("label", {
         className: cn('label', {
           disabled: disabled
         }, classes.label)
@@ -107,7 +108,8 @@ RadioButton.propTypes = {
   onChange: PropTypes.func,
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
-  }), PropTypes.any])])
+  }), PropTypes.any])]),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired)
 };
 RadioButton.defaultProps = {
   textSize: 'medium',

package/dist/es/components/Search/Search.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-search {
   font-family: inherit;
   font-size: 15px;
@@ -12,11 +5,11 @@ h5 {
   position: relative;
   z-index: auto;
   min-height: 40px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-search__require-mark {
   margin-left: 1px;
-  color: #F62434;
+  color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
@@ -31,8 +24,8 @@ h5 {
   width: 100%;
   height: 48px;
   padding: 0 16px 0 20px;
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
+  border: 1px solid var(--spbSky2);
+  background-color: var(--base);
   outline: none;
   cursor: pointer;
   -webkit-user-select: none;
@@ -41,7 +34,7 @@ h5 {
           user-select: none;
 }
 .mfui-search__control_error {
-  border-color: #F62434;
+  border-color: var(--fury);
 }
 .mfui-search__search-field {
   position: relative;
@@ -56,6 +49,7 @@ h5 {
   border: none;
   border-radius: 0;
   overflow: auto;
+  color: var(--content);
   font-family: inherit;
   line-height: 25px;
   background-color: transparent;
@@ -79,7 +73,7 @@ h5 {
   left: -1px;
   z-index: 0;
   display: none;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
 }
@@ -91,7 +85,7 @@ h5 {
      -moz-user-select: none;
       -ms-user-select: none;
           user-select: none;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-search__icon-box {
   display: -webkit-box;
@@ -105,6 +99,7 @@ h5 {
           justify-content: center;
   height: 100%;
   text-align: center;
+  fill: var(--content);
 }
 .mfui-search__list-inner {
   -webkit-box-sizing: border-box;
@@ -116,11 +111,11 @@ h5 {
 .mfui-search__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   cursor: pointer;
 }
 .mfui-search__list-item_active {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-search__item-title {
   position: relative;
@@ -137,23 +132,23 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-search__list-item_active .mfui-search__item-title:after {
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#F6F6F6));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #F6F6F6);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
 }
 .mfui-search_open .mfui-search__list {
   display: block;
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-search_open {
   z-index: 12;
 }
 .mfui-search_disabled .mfui-search__control {
-  border-color: #EDEDED;
-  background-color: #EDEDED;
+  border-color: var(--spbSky1);
+  background-color: var(--spbSky1);
   cursor: default;
   pointer-events: none;
 }
@@ -169,8 +164,8 @@ h5 {
   line-height: 16px;
 }
 .mfui-search__notice_error {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-search__notice_success {
-  color: #00B956;
+  color: var(--brandGreen);
 }

package/dist/es/components/Select/Select.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-select {
   font-family: inherit;
   font-size: 15px;
@@ -13,7 +6,7 @@ h5 {
   position: relative;
   z-index: 1;
   min-height: 40px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-select__inner {
   position: relative;
@@ -25,8 +18,8 @@ h5 {
           box-sizing: border-box;
   width: 100%;
   height: 48px;
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
+  border: 1px solid var(--spbSky2);
+  background-color: var(--base);
   outline: none;
   cursor: pointer;
 }
@@ -40,7 +33,7 @@ h5 {
   border-right: 5px solid transparent;
   border-bottom: none;
   border-left: 5px solid transparent;
-  color: #333333;
+  color: var(--content);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
@@ -59,6 +52,7 @@ h5 {
   border: none;
   border-radius: 0;
   overflow: auto;
+  color: var(--content);
   background-color: transparent;
   outline: none;
   -webkit-box-shadow: none;
@@ -70,7 +64,7 @@ h5 {
           appearance: none;
 }
 .mfui-select_no-touch .mfui-select__control:hover {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select__title {
   position: relative;
@@ -86,7 +80,7 @@ h5 {
   outline: none;
 }
 .mfui-select__title_placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select__title-inner {
   position: relative;
@@ -111,26 +105,26 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-select__require-mark {
   margin-left: 1px;
-  color: #F62434;
+  color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
 .mfui-select input::-webkit-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input::-moz-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input:-moz-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input:-ms-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select__list {
   position: absolute;
@@ -139,7 +133,7 @@ h5 {
   left: 0;
   z-index: 10;
   display: none;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
 }
@@ -153,11 +147,11 @@ h5 {
 .mfui-select__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   cursor: pointer;
 }
 .mfui-select__list-item_active {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-select__item-title {
   position: relative;
@@ -180,12 +174,12 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-select__list-item_active .mfui-select__item-title:after {
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#F6F6F6));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #F6F6F6);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
 }
 .mfui-select__not-found {
   padding: 8px 32px;
@@ -208,26 +202,26 @@ h5 {
 }
 .mfui-select_open .mfui-select__list {
   display: block;
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select_open .mfui-select__control {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select_valid .mfui-select__control {
-  border-color: #00B956 !important;
+  border-color: var(--brandGreen) !important;
 }
 .mfui-select_valid .mfui-select__text {
-  color: #00B956;
+  color: var(--brandGreen);
 }
 .mfui-select_error .mfui-select__control {
-  border-color: #F62434 !important;
+  border-color: var(--fury) !important;
 }
 .mfui-select_error .mfui-select__text {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-select_disabled .mfui-select__control {
-  border-color: #EDEDED;
-  background-color: #EDEDED;
+  border-color: var(--spbSky1);
+  background-color: var(--spbSky1);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;