@megafon/ui-core 2.0.0 → 2.1.3

package/dist/lib/components/Notification/Notification.css

@@ -149,28 +149,28 @@ h5 {
   }
 }
 .mfui-notification_type_error .mfui-notification__icon-container {
-  background-color: rgba(235, 90, 64, 0.2);
+  background-color: #FFC4C9;
 }
 .mfui-notification_type_error .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
-  fill: #EB5A40;
+  fill: #F62434;
 }
 .mfui-notification_type_success .mfui-notification__icon-container {
-  background-color: rgba(0, 185, 86, 0.2);
+  background-color: #DDFFEC;
 }
 .mfui-notification_type_success .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
   fill: #00B956;
 }
 .mfui-notification_type_warning .mfui-notification__icon-container {
-  background-color: rgba(255, 167, 23, 0.2);
+  background-color: #FFEDD1;
 }
 .mfui-notification_type_warning .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
   fill: #FFA717;
 }
 .mfui-notification_type_info .mfui-notification__icon-container {
-  background-color: rgba(91, 217, 229, 0.2);
+  background-color: #E1FAFF;
 }
 .mfui-notification_type_info .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
@@ -180,10 +180,10 @@ h5 {
   background-color: #FFFFFF;
 }
 .mfui-notification_colored .mfui-notification__close:hover {
-  background-color: rgba(255, 255, 255, 0.6);
+  background-color: rgba(255, 255, 255, 0.3);
 }
 .mfui-notification_colored.mfui-notification_type_error {
-  background-color: #F1515D;
+  background-color: #F8505D;
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__title,
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__text,
@@ -194,27 +194,18 @@ h5 {
   fill: #FFFFFF;
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: #FFFFFF33;
 }
 .mfui-notification_colored.mfui-notification_type_error .mfui-notification__icon-container svg {
   /* stylelint-disable-line max-nesting-depth */
   fill: #FFFFFF;
 }
 .mfui-notification_colored.mfui-notification_type_success {
-  background-color: rgba(0, 185, 86, 0.1);
-}
-.mfui-notification_colored.mfui-notification_type_success .mfui-notification__icon-container svg {
-  fill: #00B956;
+  background-color: #DDFFEC;
 }
 .mfui-notification_colored.mfui-notification_type_warning {
   background-color: #FFEDD1;
 }
-.mfui-notification_colored.mfui-notification_type_warning .mfui-notification__icon-container svg {
-  fill: #FFA717;
-}
 .mfui-notification_colored.mfui-notification_type_info {
-  background-color: #DEF7FA;
-}
-.mfui-notification_colored.mfui-notification_type_info .mfui-notification__icon-container svg {
-  fill: #5BD9E5;
+  background-color: #E1FAFF;
 }

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

@@ -36,6 +36,7 @@ h5 {
 .mfui-paragraph_color_purple {
   color: #731982;
 }
+.mfui-paragraph_color_base,
 .mfui-paragraph_color_clearWhite {
   color: #FFFFFF;
 }
@@ -48,6 +49,7 @@ h5 {
 .mfui-paragraph_color_spbSky2 {
   color: #D8D8D8;
 }
+.mfui-paragraph_color_content,
 .mfui-paragraph_color_freshAsphalt {
   color: #333333;
 }

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

@@ -1,5 +1,21 @@
 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;
+};
+declare type ColorType = typeof COLORS[keyof typeof COLORS];
 export interface IParagraphProps {
     /** Выравнивание по горизонтали */
     align?: 'left' | 'center' | 'right';
@@ -8,7 +24,7 @@ export interface IParagraphProps {
     /** Вертикальный отступ (включен по умолчанию) */
     hasMargin?: boolean;
     /** Цвет текста */
-    color?: 'green' | 'purple' | 'clearWhite' | 'spbSky0' | 'spbSky1' | 'spbSky2' | 'freshAsphalt' | 'fullBlack' | 'inherit';
+    color?: ColorType;
     /** Дополнительный класс корневого элемента */
     className?: string;
 }

package/dist/lib/components/Paragraph/Paragraph.js

@@ -7,6 +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");
@@ -17,6 +25,23 @@ 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 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'
+};
 var cn = (0, _uiHelpers.cnCreate)('mfui-paragraph');
 
 var Paragraph = function Paragraph(_ref) {
@@ -43,7 +68,25 @@ Paragraph.propTypes = {
   align: PropTypes.oneOf(['left', 'center', 'right']),
   size: PropTypes.oneOf(['regular', 'small']),
   hasMargin: PropTypes.bool,
-  color: PropTypes.oneOf(['green', 'purple', 'clearWhite', 'spbSky0', 'spbSky1', 'spbSky2', 'freshAsphalt', 'fullBlack', 'inherit'])
+  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;
+  }
 };
 var _default = Paragraph;
 exports["default"] = _default;

package/dist/lib/components/Tabs/Tab.d.ts

@@ -7,6 +7,8 @@ export interface ITabProps extends IFilterDataAttrs {
     icon?: React.ReactNode;
     /** Ссылка */
     href?: string;
+    /** Дочерние элементы */
+    children?: React.ReactNode;
     /** Функция рендера компонента-обертки для заголовка и иконки */
     renderTabWrapper?: (tab: React.ReactNode) => React.ReactNode;
 }

package/dist/lib/components/Tabs/Tabs.css

@@ -254,8 +254,8 @@ h5 {
   border-color: rgba(237, 237, 237, 0.5);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner {
-  color: rgba(255, 255, 255, 0.5);
-  fill: rgba(255, 255, 255, 0.5);
+  color: #FFFFFF80;
+  fill: #FFFFFF80;
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:hover {
   color: #FFFFFF;

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

@@ -39,6 +39,8 @@ export interface ITabsProps {
     currentIndex?: number;
     /** Индекс активного таба по умолчанию (не работает в режиме управления табами снаружи) */
     defaultIndex?: number;
+    /** Рендер содержимого только для текущего таба */
+    renderOnlyCurrentPanel?: boolean;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

package/dist/lib/components/Tabs/Tabs.js

@@ -94,6 +94,8 @@ var Tabs = function Tabs(_ref) {
       _ref$defaultIndex = _ref.defaultIndex,
       defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
       outerIndex = _ref.currentIndex,
+      _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
+      renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
       onTabClick = _ref.onTabClick;
   var tabsRef = React.useRef([]);
@@ -248,11 +250,18 @@ var Tabs = function Tabs(_ref) {
   }, [renderTab, children]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
+      var panel = child.props.children;
+      var isCurrentPanel = currentIndex === i;
+
+      if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+        return null;
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         className: cn('panel', {
-          current: currentIndex === i
+          current: isCurrentPanel
         })
-      }, child);
+      }, panel);
     });
   }, [children, currentIndex]);
   var handleReachBeginning = React.useCallback(function (swiper) {
@@ -400,6 +409,7 @@ Tabs.propTypes = {
   sticky: _propTypes["default"].bool,
   currentIndex: _propTypes["default"].number,
   defaultIndex: _propTypes["default"].number,
+  renderOnlyCurrentPanel: _propTypes["default"].bool,
   onTabClick: _propTypes["default"].func
 };
 var _default = Tabs;

package/dist/lib/components/TextField/TextField.js

@@ -150,6 +150,11 @@ var TextField = function TextField(_ref) {
       isMaxLimitExceeded = _useState10[0],
       setIsMaxLimitExceeded = _useState10[1];
 
+  var _useState11 = (0, React.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isTouch = _useState12[0],
+      setTouch = _useState12[1];
+
   var fieldNode = (0, React.useRef)();
   var isPasswordType = (0, React.useMemo)(function () {
     return type === 'password';
@@ -157,9 +162,6 @@ var TextField = function TextField(_ref) {
   var isVisiblePassword = (0, React.useMemo)(function () {
     return isPasswordType && !isPasswordHidden;
   }, [isPasswordHidden, isPasswordType]);
-  var isTouch = (0, React.useMemo)(function () {
-    return (0, _uiHelpers.detectTouch)();
-  }, []);
   var checkSymbolMaxLimit = (0, React.useCallback)(function () {
     var textareaValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
 
@@ -173,6 +175,9 @@ var TextField = function TextField(_ref) {
     !isControlled && setInputValue(value);
     checkSymbolMaxLimit(value);
   }, [value, checkSymbolMaxLimit]);
+  (0, React.useEffect)(function () {
+    setTouch((0, _uiHelpers.detectTouch)());
+  }, []);
   var togglePasswordHiding = (0, React.useCallback)(function () {
     return setPasswordHidden(function (prevPassState) {
       return !prevPassState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "2.0.0",
+  "version": "2.1.3",
   "files": [
     "dist",
     "styles"
@@ -28,6 +28,7 @@
     "lint": "yarn lint:ts && yarn lint:less",
     "lint:ts": "eslint --ext .js,.jsx,.ts,.tsx src --max-warnings=0",
     "lint:less": "stylelint --syntax less src/**/*.less src/**/**/*.less",
+    "lint:less:fix": "yarn lint:less --fix",
     "test": "yarn test:unit",
     "test:unit": "jest",
     "test:update": "jest --updateSnapshot"
@@ -52,7 +53,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^0.1.0",
+    "@megafon/ui-icons": "^0.1.1",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -95,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "7f552b59c6bfc912d14a39c4564995685c18d4f5"
+  "gitHead": "884922566102445160ff8cbc20f6d54142b621e5"
 }

package/styles/base.less

@@ -1,49 +1,77 @@
-@class-prefix: 'mfui';
-
 // Basic Colors
 @green: #00B956;
 @purple: #731982;
-@clearWhite: #FFFFFF;
+@base: #FFFFFF;
 @spbSky0: #F6F6F6;
 @spbSky1: #EDEDED;
 @spbSky2: #D8D8D8;
-@freshAsphalt: #333333;
+@spbSky3: #999999;
+@content: #333333;
 @fullBlack: #000000;
 
 // Secondary Colors
 @warmRedC: #EB5A40;
-@mandarin: #FFA717;
+@Pantone137C: #FFA717;
 @Pantone311C: #5BD9E5;
 @reflexBlue: #444189;
 
 // System Colors
 @fury: #F62434;
-@link: #34AAF2;
+@systemBlue: #34AAF2;
+@background: #FFFFFF;
+
+// Gradients
+@basic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+@vip: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+@exclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+
+// Static
+@STCBlack: #333333;
+@STCWhite: #FFFFFF;
+
+// Static Opacity
+
+@STCWhite5: #FFFFFF0D;
+@STCWhite10: #FFFFFF1A;
+@STCWhite20: #FFFFFF33;
+@STCWhite50: #FFFFFF80;
+@STCBlack5: #3333330D;
+@STCBlack10: #3333331A;
+@STCBlack20: #33333333;
+@STCBlack50: #33333380;
+
+// Soft (new)
+@green80: #0CDC78;
+@green20: #DDFFEC;
+@purple80: #AA67C1;
+@purple20: #FFEEFF;
+@warmRedC80: #FF765D;
+@warmRedC20: #FFCFC7;
+@Pantone137C80: #FFB945;
+@Pantone137C20: #FFEDD1;
+@Pantone311C80: #62E3FF;
+@Pantone311C20: #E1FAFF;
+@reflexBlue80: #554FC9;
+@reflexBlue20: #EBEAFF;
+@fury80: #F8505D;
+@fury20: #FFC5C9;
+
+// old colors
 @buttonHoverGreen: #10E272;
-@buttonhoverPurple: #A500BF;
+@buttonhoverPurple: #534455;
 @buttonDown: #404D46;
 
 // Notification Colors
-// TODO: будут отрефакторены после доработки палитры со стороны дизайна
-@error: #F1515D;
-@success: rgba(0, 185, 86, 0.1);
-@info: #DEF7FA;
-@warning: #FFEDD1;
-@green20: fade(@green, 20);
-@warmRedC20: fade(@warmRedC, 20);
-@mandarin20: fade(@mandarin, 20);
-@Pantone311C20: fade(@Pantone311C, 20);
+// TODO: будут отрефакторены после обновления дизайном Notification по новой палитре
+@error: #FFC4C9;
 @spbSky160: fade(@spbSky1, 60);
-@clearWhite60: fade(@clearWhite, 60);
-@clearWhite20: fade(@clearWhite, 20);
+@base30: fade(@base, 30);
 
 // Additional Colors Variants
-@clearWhite50: fade(@clearWhite, 50);
-@freshAsphalt25: fade(@freshAsphalt, 25);
-@freshAsphalt50: fade(@freshAsphalt, 50);
+@content25: fade(@content, 25);
 @fullBlack25: fade(@fullBlack, 25);
 @fullBlack50: fade(@fullBlack, 50);
-@freshAsphaltLighten50: lighten(@freshAsphalt, 50);
+@contentLighten50: lighten(@content, 50);
 
 // BREAKPOINTS
 @mobileSmallEnd:      479px;
@@ -107,6 +135,20 @@
     font-family: Graphik, Arial, sans-serif;
 }
 
+.fontFamily() {
+    font-family: inherit;
+}
+
+.commonFont() {
+    font-size: 15px;
+    line-height: 24px;
+}
+
+.smallFont() {
+    font-size: 12px;
+    line-height: 16px;
+}
+
 h1,
 h2,
 h3,
@@ -115,6 +157,26 @@ h5 {
     margin: 0;
 }
 
+.h1() {
+    font-weight: 600;
+    font-size: 36px;
+    line-height: 30px;
+    letter-spacing: 0.5px;
+
+    @media @mobileB {
+        font-size: 36px;
+        line-height: 40px;
+    }
+    @media @desktop {
+        font-size: 44px;
+        line-height: 48px;
+    }
+    @media @desktopMU {
+        font-size: 52px;
+        line-height: 56px;
+    }
+}
+
 .h2() {
     font-weight: 600;
     font-size: 22px;
@@ -157,7 +219,7 @@ h5 {
     font-weight: 400;
 }
 
-.p-indents() {
+.pIndents() {
     margin-top: 0;
     margin-bottom: 16px;
 
@@ -166,25 +228,11 @@ h5 {
     }
 }
 
-.default-link() {
-    color: @link;
+.link() {
+    color: @systemBlue;
     text-decoration: none;
 
     &:hover {
         text-decoration: underline;
     }
 }
-
-.fontFamily() {
-    font-family: inherit;
-}
-
-.commonFont() {
-    font-size: 15px;
-    line-height: 24px;
-}
-
-.smallFont() {
-    font-size: 12px;
-    line-height: 16px;
-}