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

package/dist/lib/components/Checkbox/Checkbox.js

@@ -7,29 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-require("core-js/modules/es.date.to-string");
-
 require("core-js/modules/es.function.name");
 
-require("core-js/modules/es.object.to-string");
-
-require("core-js/modules/es.reflect.construct");
-
-require("core-js/modules/es.regexp.to-string");
-
-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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
@@ -41,114 +25,87 @@ 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 CheckedIcon = function CheckedIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
-  }, props), /*#__PURE__*/React.createElement("path", {
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
   }));
 };
 
+var CHANGE_KEY = 'change';
 var cn = (0, _uiHelpers.cnCreate)('mfui-checkbox');
 
-var Checkbox = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Checkbox, _React$Component);
-
-  var _super = _createSuper(Checkbox);
-
-  function Checkbox() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Checkbox);
-    _this = _super.apply(this, arguments);
-    _this.isTouch = (0, _uiHelpers.detectTouch)();
-
-    _this.handleChange = function (e) {
-      var onChange = _this.props.onChange;
-      onChange && onChange(e);
-    };
-
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Checkbox, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          className = _this$props.className,
-          fontSize = _this$props.fontSize,
-          name = _this$props.name,
-          color = _this$props.color,
-          value = _this$props.value,
-          checked = _this$props.checked,
-          disabled = _this$props.disabled,
-          error = _this$props.error,
-          children = _this$props.children,
-          extraContent = _this$props.extraContent,
-          dataAttrs = _this$props.dataAttrs,
-          classes = _this$props.classes;
-      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-        className: cn('', {
-          'font-size': fontSize,
-          color: color,
-          checked: checked,
-          disabled: disabled,
-          error: error
-        }, className)
-      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/React.createElement("div", {
-        className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
-      }, /*#__PURE__*/React.createElement("label", {
-        className: cn('label', {
-          'no-touch': !this.isTouch
-        })
-      }, /*#__PURE__*/React.createElement("input", {
-        className: cn('input'),
-        type: "checkbox",
-        name: name,
-        value: value,
-        checked: checked,
-        onChange: this.handleChange,
-        disabled: disabled
-      }), /*#__PURE__*/React.createElement("div", {
-        className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon])
-      }, /*#__PURE__*/React.createElement(CheckedIcon, {
-        className: cn('icon')
-      })), children), extraContent && /*#__PURE__*/React.createElement("span", {
-        className: cn('extra-content')
-      }, extraContent)));
+var Checkbox = function Checkbox(_ref) {
+  var className = _ref.className,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? 'regular' : _ref$fontSize,
+      name = _ref.name,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'dark' : _ref$color,
+      value = _ref.value,
+      _ref$checked = _ref.checked,
+      checked = _ref$checked === void 0 ? false : _ref$checked,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      children = _ref.children,
+      extraContent = _ref.extraContent,
+      dataAttrs = _ref.dataAttrs,
+      classes = _ref.classes,
+      onChange = _ref.onChange;
+  var isTouch = (0, _uiHelpers.detectTouch)();
+
+  var _useState = (0, _react.useState)(checked),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isChecked = _useState2[0],
+      setIsChecked = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setIsChecked(checked);
+  }, [checked]);
+
+  var handleChange = function handleChange(e) {
+    if ((0, _uiHelpers.checkEventIsClickOrEnterPress)(e) || e.type === CHANGE_KEY) {
+      setIsChecked(!isChecked);
+      onChange && onChange(!isChecked);
     }
-  }]);
-  return Checkbox;
-}(React.Component);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn('', {
+      'font-size': fontSize,
+      color: color,
+      checked: isChecked,
+      disabled: disabled,
+      error: error
+    }, className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('inner', [classes === null || classes === void 0 ? void 0 : classes.inner])
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    className: cn('label', {
+      'no-touch': !isTouch
+    })
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    className: cn('input'),
+    type: "checkbox",
+    tabIndex: -1,
+    name: name,
+    value: value,
+    checked: isChecked,
+    onChange: handleChange,
+    disabled: disabled
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    tabIndex: 0,
+    role: "checkbox",
+    "aria-checked": isChecked,
+    className: cn('custom-input', [classes === null || classes === void 0 ? void 0 : classes.icon]),
+    onKeyDown: handleChange
+  }, /*#__PURE__*/_react["default"].createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children), extraContent && /*#__PURE__*/_react["default"].createElement("span", {
+    className: cn('extra-content')
+  }, extraContent)));
+};
 
 Checkbox.propTypes = {
   className: PropTypes.string,
@@ -159,15 +116,10 @@ Checkbox.propTypes = {
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
   error: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string]),
-  extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element), PropTypes.element, PropTypes.string]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]).isRequired,
+  extraContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element, PropTypes.string]),
   dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   onChange: PropTypes.func
 };
-Checkbox.defaultProps = {
-  color: 'dark',
-  fontSize: 'regular',
-  checked: false
-};
 var _default = Checkbox;
 exports["default"] = _default;

package/dist/lib/components/ContentArea/ContentArea.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,
@@ -7,32 +54,29 @@ h5 {
 }
 .mfui-content-area_color_base,
 .mfui-content-area_color_white {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-content-area_color_transparent {
   background-color: transparent;
 }
 .mfui-content-area_color_green {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-content-area_color_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 .mfui-content-area_color_spbSky0 {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-content-area_color_spbSky1 {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-content-area_color_spbSky2 {
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-content-area_color_content,
 .mfui-content-area_color_freshAsphalt {
-  background-color: #333333;
-}
-.mfui-content-area_color_fullBlack {
-  background-color: #000000;
+  background-color: var(--content);
 }
 .mfui-content-area__inner {
   -webkit-box-sizing: content-box;
@@ -84,30 +128,27 @@ h5 {
 }
 .mfui-content-area__inner_color_base,
 .mfui-content-area__inner_color_white {
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-content-area__inner_color_transparent {
   background-color: transparent;
 }
 .mfui-content-area__inner_color_green {
-  background-color: #00B956;
+  background-color: var(--brandGreen);
 }
 .mfui-content-area__inner_color_purple {
-  background-color: #731982;
+  background-color: var(--brandPurple);
 }
 .mfui-content-area__inner_color_spbSky0 {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-content-area__inner_color_spbSky1 {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-content-area__inner_color_spbSky2 {
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 .mfui-content-area__inner_color_content,
 .mfui-content-area__inner_color_freshAsphalt {
-  background-color: #333333;
-}
-.mfui-content-area__inner_color_fullBlack {
-  background-color: #000000;
+  background-color: var(--content);
 }

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

@@ -9,7 +9,6 @@ declare const BACKGROUND_COLORS: {
     readonly SPB_SKY_1: "spbSky1";
     readonly SPB_SKY_2: "spbSky2";
     readonly CONTENT: "content";
-    readonly FULL_BLACK: "fullBlack";
     /** @deprecated */
     readonly WHITE: "white";
     /** @deprecated */

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

@@ -34,7 +34,6 @@ var BACKGROUND_COLORS = {
   SPB_SKY_1: 'spbSky1',
   SPB_SKY_2: 'spbSky2',
   CONTENT: 'content',
-  FULL_BLACK: 'fullBlack',
 
   /** @deprecated */
   WHITE: 'white',

package/dist/lib/components/Counter/Counter.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,
@@ -16,7 +63,7 @@ h5 {
           box-sizing: border-box;
   width: 120px;
   height: 32px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-counter__btn {
   display: -webkit-box;
@@ -40,7 +87,7 @@ h5 {
   height: 100%;
   margin: 0;
   padding: 0;
-  border: 1px solid #D8D8D8;
+  border: 1px solid var(--spbSky2);
   font-size: 20px;
   text-decoration: none;
   background-color: transparent;
@@ -49,17 +96,18 @@ h5 {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  fill: var(--content);
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .mfui-counter__btn:hover {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-counter__btn:disabled {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
 }
 .mfui-counter__btn:disabled .mfui-counter__icon {
-  fill: #33333380;
+  fill: var(--spbSky2);
 }
 .mfui-counter__btn_left {
   border-top-left-radius: 50px;
@@ -84,8 +132,8 @@ h5 {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   height: 100%;
-  border-top: 1px solid #D8D8D8;
-  border-bottom: 1px solid #D8D8D8;
+  border-top: 1px solid var(--spbSky2);
+  border-bottom: 1px solid var(--spbSky2);
   overflow: hidden;
 }
 .mfui-counter__input {
@@ -97,7 +145,9 @@ h5 {
   padding: 0;
   border: none;
   overflow: auto;
+  color: var(--content);
   text-align: center;
+  background: var(--base);
   outline: none;
   -webkit-box-shadow: none;
           box-shadow: none;
@@ -107,14 +157,14 @@ h5 {
           appearance: none;
 }
 .mfui-counter_disabled .mfui-counter__btn {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
 }
 .mfui-counter_disabled .mfui-counter__input {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
-  color: #33333380;
+  color: var(--spbSky3);
 }
 .mfui-counter_disabled .mfui-counter__icon {
-  fill: #33333380;
+  fill: var(--spbSky2);
 }

package/dist/lib/components/Grid/Grid.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/lib/components/Grid/GridColumn.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-grid-column {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;

package/dist/lib/components/Header/Header.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-header {
   font-family: inherit;
   font-weight: 400;
@@ -94,20 +87,23 @@ h5 {
 .mfui-header_margin.mfui-header_level_h5 {
   margin: 24px 0 16px 0;
 }
+.mfui-header_color_default {
+  color: var(--content);
+}
 .mfui-header_color_black {
-  color: #333333;
+  color: var(--stcBlack);
 }
 .mfui-header_color_green {
-  color: #00B956;
+  color: var(--brandGreen);
 }
 .mfui-header_color_purple {
-  color: #731982;
+  color: var(--brandPurple);
 }
 .mfui-header_color_white {
-  color: #FFFFFF;
+  color: var(--stcWhite);
 }
 .mfui-header_color_blue {
-  color: #34AAF2;
+  color: var(--systemBlue);
 }
 .mfui-header_color_inherit {
   color: inherit;

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

@@ -6,7 +6,7 @@ interface IHeaderProps extends IFilterDataAttrs {
     /** Тег */
     as?: 'h1' | 'h2' | 'h3' | 'h5';
     /** Цвет */
-    color?: 'black' | 'white' | 'green' | 'purple' | 'blue' | 'inherit';
+    color?: 'default' | 'black' | 'white' | 'green' | 'purple' | 'blue' | 'inherit';
     /** Включить отступ */
     margin?: boolean;
     /** Дополнительный элемент */

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

@@ -115,7 +115,7 @@ var Header = /*#__PURE__*/function (_React$Component) {
 
 Header.propTypes = {
   as: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
-  color: PropTypes.oneOf(['black', 'white', 'green', 'purple', 'blue', 'inherit']),
+  color: PropTypes.oneOf(['default', 'black', 'white', 'green', 'purple', 'blue', 'inherit']),
   margin: PropTypes.bool,
   addition: PropTypes.element,
   hAlign: PropTypes.oneOf(['inherit', 'left', 'center', 'right']),
@@ -125,7 +125,7 @@ Header.propTypes = {
 };
 Header.defaultProps = {
   as: 'h1',
-  color: 'black',
+  color: 'default',
   hAlign: 'inherit'
 };
 var _default = Header;

package/dist/lib/components/InputLabel/InputLabel.css

@@ -1,10 +1,3 @@
-h1,
-h2,
-h3,
-h4,
-h5 {
-  margin: 0;
-}
 .mfui-input-label {
   display: block;
   margin-bottom: 4px;