@megafon/ui-core 2.0.0 → 2.1.3

package/dist/lib/colors/colorsData.d.ts

@@ -1,8 +1,21 @@
-declare const _default: {
+declare type ColorType = {
+    name: string;
+    code: string;
+    border?: string;
+    parentColor?: string;
+    gradient?: string;
+};
+declare type ColorsListType = {
+    description: string;
+    colors: ColorType[];
+};
+export declare type ColorsItemType = {
     title: string;
-    items: {
-        name: string;
-        value: string;
-    }[];
-}[];
-export default _default;
+    colorsList?: ColorsListType;
+    colorsGroup?: ColorsListType[];
+};
+export declare type ColorsType = {
+    [key: string]: ColorsItemType;
+};
+declare const colors: ColorsType;
+export default colors;

package/dist/lib/colors/colorsData.js

@@ -4,65 +4,208 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _default = [{
-  title: 'Basic Colors',
-  items: [{
-    name: 'Green',
-    value: '#00B956'
-  }, {
-    name: 'Purple',
-    value: '#731982'
-  }, {
-    name: 'Clear White',
-    value: '#FFFFFF'
-  }, {
-    name: 'Spb Sky 0',
-    value: '#F6F6F6'
-  }, {
-    name: 'Spb Sky 1',
-    value: '#EDEDED'
-  }, {
-    name: 'Spb Sky 2',
-    value: '#D8D8D8'
-  }, {
-    name: 'Fresh Asphalt',
-    value: '#333333'
-  }, {
-    name: 'Full Black',
-    value: '#000000'
-  }]
-}, {
-  title: 'Secondary Colors',
-  items: [{
-    name: 'Warm RedC',
-    value: '#EB5A40'
-  }, {
-    name: '137C',
-    value: '#FFA717'
-  }, {
-    name: 'Pantone311C',
-    value: '#5BD9E5'
-  }, {
-    name: 'Reflex Blue',
-    value: '#444189'
-  }]
-}, {
-  title: 'System Colors',
-  items: [{
-    name: 'Fury',
-    value: '#F62434'
-  }, {
-    name: 'Link',
-    value: '#34AAF2'
-  }, {
-    name: 'Button Hover Green',
-    value: '#10E272'
-  }, {
-    name: 'Button hover Purple',
-    value: '#A500BF'
-  }, {
-    name: 'Button Down',
-    value: '#404D46'
-  }]
-}];
+var colors = {
+  basic: {
+    title: 'Basic',
+    colorsGroup: [{
+      description: 'Основные цвета бренда',
+      colors: [{
+        name: 'Green',
+        code: '#00B956'
+      }, {
+        name: 'Purple',
+        code: '#731982'
+      }]
+    }, {
+      description: 'Градация оттенков серого',
+      colors: [{
+        name: 'Base',
+        code: '#FFFFFF',
+        border: '1px solid #EDEDED'
+      }, {
+        name: 'Content',
+        code: '#333333'
+      }, {
+        name: 'Spb Sky 0',
+        code: '#F6F6F6',
+        border: '2px solid #EDEDED'
+      }, {
+        name: 'Spb Sky 1',
+        code: '#EDEDED'
+      }, {
+        name: 'Spb Sky 2',
+        code: '#D8D8D8'
+      }, {
+        name: 'Spb Sky 3',
+        code: '#999999'
+      }]
+    }]
+  },
+  secondary: {
+    title: 'Secondary',
+    colorsList: {
+      description: 'Акцентные цвета',
+      colors: [{
+        name: 'Warm Red C',
+        code: '#EB5A40'
+      }, {
+        name: '137C',
+        code: '#FFA717'
+      }, {
+        name: '311C',
+        code: '#5BD9E5'
+      }, {
+        name: 'Reflex Blue',
+        code: '#444189'
+      }]
+    }
+  },
+  system: {
+    title: 'System',
+    colorsList: {
+      description: 'Системные цвета, используемые для отображения состояний интерфейсов и ссылок',
+      colors: [{
+        name: 'Fury',
+        code: '#F62434'
+      }, {
+        name: 'System Blue',
+        code: '#34AAF2'
+      }, {
+        name: 'Background',
+        code: '#FFFFFF'
+      }]
+    }
+  },
+  gradientColors: {
+    title: 'Gradient',
+    colorsList: {
+      description: 'Градиентные заливки ',
+      colors: [{
+        name: 'Basic',
+        code: '#01873F #00B956 #14CD6A',
+        gradient: 'linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%)'
+      }, {
+        name: 'VIP',
+        code: '#5B1168 #731982 #821E93',
+        gradient: 'linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%)'
+      }, {
+        name: 'Exclusive',
+        code: '#2A2674 #444189 #504D93',
+        gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
+      }]
+    }
+  },
+  staticColors: {
+    title: 'Static',
+    colorsList: {
+      description: 'Цвета не зависящие от темы',
+      colors: [{
+        name: 'STC White',
+        code: '#FFFFFFF',
+        border: '1px solid #EDEDED'
+      }, {
+        name: 'STC Black',
+        code: '#333333'
+      }]
+    }
+  },
+  staticOpacity: {
+    title: 'Static Opacity',
+    colorsList: {
+      description: 'Цвета c прозрачностью не зависящие от темы',
+      colors: [{
+        name: 'STC White 5%',
+        code: '#FFFFFF0D',
+        border: '1px solid #EDEDED'
+      }, {
+        name: 'STC White 10%',
+        code: '#FFFFFF1A',
+        border: '1px solid #EDEDED'
+      }, {
+        name: 'STC White 20%',
+        code: '#FFFFFF33',
+        border: '1px solid #EDEDED'
+      }, {
+        name: 'STC White 50%',
+        code: '#FFFFFF80'
+      }, {
+        name: 'STC Black 5%',
+        code: '#3333330D'
+      }, {
+        name: 'STC Black 10%',
+        code: '#3333331A'
+      }, {
+        name: 'STC Black 20%',
+        code: '#33333333'
+      }, {
+        name: 'STC Black 50%',
+        code: '#33333380'
+      }]
+    }
+  },
+  soft: {
+    title: 'Soft',
+    colorsList: {
+      description: 'Дополнительная (вспомогательная) палитра, образованная от Basic, Secondary и System цветов. Каждый цвет из Soft палитры работает в паре с его родительским цветом.',
+      colors: [{
+        name: 'Green 80',
+        code: '#0CDC78',
+        parentColor: '#00B956'
+      }, {
+        name: 'Purple 80',
+        code: '#AA67C1',
+        parentColor: '#731982'
+      }, {
+        name: 'Warm Red C 80',
+        code: '#FF765D',
+        parentColor: '#EB5A40'
+      }, {
+        name: '137C 80',
+        code: '#FFB945',
+        parentColor: '#FFB945'
+      }, {
+        name: '311C 80',
+        code: '#62E3FF',
+        parentColor: '#5BD9E5'
+      }, {
+        name: 'Reflex Blue 80',
+        code: '#554FC9',
+        parentColor: '#444189'
+      }, {
+        name: 'Fury 80',
+        code: '#F8505D',
+        parentColor: '#F62434'
+      }, {
+        name: 'Green 20',
+        code: '#DDFFEC',
+        parentColor: '#00B956'
+      }, {
+        name: 'Purple 20',
+        code: '#FFEEFF',
+        parentColor: '#731982'
+      }, {
+        name: 'Warm Red C 20',
+        code: '#FFCFC7',
+        parentColor: '#EB5A40'
+      }, {
+        name: '137C 20',
+        code: '#FFEDD1',
+        parentColor: '#FFB945'
+      }, {
+        name: '311C 20',
+        code: '#E1FAFF',
+        parentColor: '#5BD9E5'
+      }, {
+        name: 'Reflex Blue 20',
+        code: '#EBEAFF',
+        parentColor: '#444189'
+      }, {
+        name: 'Fury 20',
+        code: '#FFC5C9',
+        parentColor: '#F62434'
+      }]
+    }
+  }
+};
+var _default = colors;
 exports["default"] = _default;

package/dist/lib/components/Banner/BannerDot.css

@@ -27,7 +27,7 @@ h5 {
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: #FFFFFF80;
 }
 .mfui-banner-dot_active {
   padding: 0;
@@ -54,7 +54,7 @@ h5 {
           transform-origin: center;
   -webkit-animation: timer linear;
           animation: timer linear;
-  fill: rgba(255, 255, 255, 0.5);
+  fill: #FFFFFF80;
   stroke: #FFFFFF;
   stroke-width: 100;
   stroke-dasharray: 1000;

package/dist/lib/components/Button/Button.css

@@ -231,9 +231,9 @@ h5 {
   fill: #FFFFFF;
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):hover {
-  background-color: #A500BF;
-  -webkit-box-shadow: inset 0 0 0 1px #A500BF;
-          box-shadow: inset 0 0 0 1px #A500BF;
+  background-color: #534455;
+  -webkit-box-shadow: inset 0 0 0 1px #534455;
+          box-shadow: inset 0 0 0 1px #534455;
 }
 .mfui-button_no-touch.mfui-button_type_primary.mfui-button_theme_purple:not(.mfui-button_loading):active {
   background-color: #404D46;
@@ -332,7 +332,7 @@ h5 {
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active {
-  color: rgba(51, 51, 51, 0.5);
+  color: #33333380;
   background-color: #EDEDED;
   -webkit-box-shadow: inset 0 0 0 1px #D8D8D8;
           box-shadow: inset 0 0 0 1px #D8D8D8;
@@ -341,28 +341,28 @@ h5 {
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_primary.mfui-button_disabled:active svg {
-  fill: rgba(51, 51, 51, 0.5);
+  fill: #33333380;
 }
 .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active {
-  color: rgba(255, 255, 255, 0.5);
+  color: #FFFFFF80;
   background-color: transparent;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
-          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  -webkit-box-shadow: inset 0 0 0 1px #FFFFFF80;
+          box-shadow: inset 0 0 0 1px #FFFFFF80;
 }
 .mfui-button.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_theme_white.mfui-button_disabled:active svg {
-  fill: rgba(255, 255, 255, 0.5);
+  fill: #FFFFFF80;
 }
 .mfui-button.mfui-button_type_outline.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active {
-  color: rgba(51, 51, 51, 0.5);
+  color: #33333380;
   background-color: transparent;
   -webkit-box-shadow: inset 0 0 0 1px #D8D8D8;
           box-shadow: inset 0 0 0 1px #D8D8D8;
@@ -371,5 +371,5 @@ h5 {
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:hover svg,
 .mfui-button.mfui-button_no-touch.mfui-button_type_outline.mfui-button_disabled:active svg {
-  fill: rgba(51, 51, 51, 0.5);
+  fill: #33333380;
 }

package/dist/lib/components/Button/Button.js

@@ -15,6 +15,8 @@ require("core-js/modules/es.object.values");
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -108,9 +110,10 @@ var Button = function Button(_ref) {
       dataAttrs = _ref.dataAttrs,
       buttonRef = _ref.buttonRef;
 
-  var isTouch = _react["default"].useMemo(function () {
-    return (0, _uiHelpers.detectTouch)();
-  }, []);
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isTouch = _React$useState2[0],
+      setTouch = _React$useState2[1];
 
   var ElementType = href ? 'a' : 'button';
 
@@ -201,6 +204,11 @@ var Button = function Button(_ref) {
   };
 
   var classNameValue = Array.isArray(className) ? [].concat((0, _toConsumableArray2["default"])(className), [rootClassName]) : [className, rootClassName];
+
+  _react["default"].useEffect(function () {
+    setTouch((0, _uiHelpers.detectTouch)());
+  }, []);
+
   return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
     className: cn({
       type: type,
@@ -217,7 +225,7 @@ var Button = function Button(_ref) {
       'content-type': contentType
     }, classNameValue),
     href: href,
-    download: href && download,
+    download: !!href && download,
     target: href ? target : undefined,
     rel: setRelAttribute(),
     type: href ? undefined : actionType,

package/dist/lib/components/Carousel/Carousel.css

@@ -158,7 +158,7 @@ h5 {
   margin-right: 8px;
 }
 .mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
-  background-color: rgba(255, 255, 255, 0.5);
+  background-color: #FFFFFF80;
 }
 .mfui-carousel_nav-theme_light .swiper-pagination-bullet:before {
   background-color: rgba(51, 51, 51, 0.25);

package/dist/lib/components/Carousel/Carousel.js

@@ -241,6 +241,10 @@ var Carousel = function Carousel(_ref) {
     };
   };
 
+  var disableFocusOnSlideClick = function disableFocusOnSlideClick(e) {
+    e.nativeEvent.preventDefault();
+  };
+
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
     ref: rootRef,
     className: cn({
@@ -282,7 +286,8 @@ var Carousel = function Carousel(_ref) {
     return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
       key: i,
       className: cn('slide', slideClass),
-      onFocus: handleSlideFocus(i)
+      onFocus: handleSlideFocus(i),
+      onMouseDown: disableFocusOnSlideClick
     }, child);
   })), /*#__PURE__*/React.createElement(_NavArrow["default"], {
     className: cn('arrow', {

package/dist/lib/components/ContentArea/ContentArea.css

@@ -5,6 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
+.mfui-content-area_color_base,
 .mfui-content-area_color_white {
   background-color: #FFFFFF;
 }
@@ -26,6 +27,7 @@ h5 {
 .mfui-content-area_color_spbSky2 {
   background-color: #D8D8D8;
 }
+.mfui-content-area_color_content,
 .mfui-content-area_color_freshAsphalt {
   background-color: #333333;
 }
@@ -80,6 +82,7 @@ h5 {
   padding-right: 0;
   padding-left: 0;
 }
+.mfui-content-area__inner_color_base,
 .mfui-content-area__inner_color_white {
   background-color: #FFFFFF;
 }
@@ -101,6 +104,7 @@ h5 {
 .mfui-content-area__inner_color_spbSky2 {
   background-color: #D8D8D8;
 }
+.mfui-content-area__inner_color_content,
 .mfui-content-area__inner_color_freshAsphalt {
   background-color: #333333;
 }

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

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import './ContentArea.less';
 declare const BACKGROUND_COLORS: {
-    WHITE: string;
-    TRANSPARENT: string;
-    GREEN: string;
-    PURPLE: string;
-    SPB_SKY_0: string;
-    SPB_SKY_1: string;
-    SPB_SKY_2: string;
-    FRESH_ASPHALT: string;
-    FULL_BLACK: string;
+    readonly BASE: "base";
+    readonly TRANSPARENT: "transparent";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly SPB_SKY_0: "spbSky0";
+    readonly SPB_SKY_1: "spbSky1";
+    readonly SPB_SKY_2: "spbSky2";
+    readonly CONTENT: "content";
+    readonly FULL_BLACK: "fullBlack";
+    /** @deprecated */
+    readonly WHITE: "white";
+    /** @deprecated */
+    readonly FRESH_ASPHALT: "freshAsphalt";
 };
 export declare type BackgroundColorType = typeof BACKGROUND_COLORS[keyof typeof BACKGROUND_COLORS];
 declare const DisableIndents: {

package/dist/lib/components/ContentArea/ContentArea.js

@@ -7,8 +7,14 @@ 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 React = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
@@ -20,15 +26,21 @@ 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; }
 
 var BACKGROUND_COLORS = {
-  WHITE: 'white',
+  BASE: 'base',
   TRANSPARENT: 'transparent',
   GREEN: 'green',
   PURPLE: 'purple',
   SPB_SKY_0: 'spbSky0',
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2',
-  FRESH_ASPHALT: 'freshAsphalt',
-  FULL_BLACK: 'fullBlack'
+  CONTENT: 'content',
+  FULL_BLACK: 'fullBlack',
+
+  /** @deprecated */
+  WHITE: 'white',
+
+  /** @deprecated */
+  FRESH_ASPHALT: 'freshAsphalt'
 };
 var DisableIndents = {
   MOBILE: 'mobile',
@@ -57,15 +69,39 @@ var ContentArea = function ContentArea(_ref) {
   }, children));
 };
 
+var colorsCustomPropTypes = function colorsCustomPropTypes(props, propName, componentName) {
+  var deprecatedBlackValue = BACKGROUND_COLORS.FRESH_ASPHALT;
+  var deprecatedWhiteValue = BACKGROUND_COLORS.WHITE;
+  var propValue = props[propName];
+
+  if (propValue && !Object.values(BACKGROUND_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(BACKGROUND_COLORS), "]"));
+  }
+
+  if (propValue && propValue === 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(BACKGROUND_COLORS.CONTENT, "'"));
+  }
+
+  if (propValue && propValue === 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(BACKGROUND_COLORS.BASE, "'"));
+  }
+
+  return null;
+};
+
 ContentArea.propTypes = {
-  outerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
-  innerBackgroundColor: PropTypes.oneOf(Object.values(BACKGROUND_COLORS)),
   disableIndents: PropTypes.oneOf(Object.values(DisableIndents)),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,
     inner: PropTypes.string
-  })
+  }),
+  outerBackgroundColor: function outerBackgroundColor(props, propName, componentName) {
+    return colorsCustomPropTypes(props, propName, componentName);
+  },
+  innerBackgroundColor: function innerBackgroundColor(props, propName, componentName) {
+    return colorsCustomPropTypes(props, propName, componentName);
+  }
 };
 ContentArea.defaultProps = {
   outerBackgroundColor: 'transparent',

package/dist/lib/components/Counter/Counter.css

@@ -59,7 +59,7 @@ h5 {
   cursor: default;
 }
 .mfui-counter__btn:disabled .mfui-counter__icon {
-  fill: rgba(51, 51, 51, 0.5);
+  fill: #33333380;
 }
 .mfui-counter__btn_left {
   border-top-left-radius: 50px;
@@ -113,8 +113,8 @@ h5 {
 .mfui-counter_disabled .mfui-counter__input {
   background-color: #EDEDED;
   cursor: default;
-  color: rgba(51, 51, 51, 0.5);
+  color: #33333380;
 }
 .mfui-counter_disabled .mfui-counter__icon {
-  fill: rgba(51, 51, 51, 0.5);
+  fill: #33333380;
 }

package/dist/lib/components/NavArrow/NavArrow.css

@@ -35,7 +35,7 @@ h5 {
   background-color: #731982;
 }
 .mfui-nav-arrow_theme_purple:hover:not(:disabled) {
-  background-color: #A500BF;
+  background-color: #534455;
 }
 .mfui-nav-arrow_theme_dark {
   background-color: rgba(0, 0, 0, 0.25);