@megafon/ui-core 3.4.0 → 3.5.2

package/dist/lib/components/Switcher/Switcher.css

@@ -1,48 +1,121 @@
 .mfui-switcher {
-  top: 22px;
-  right: 28px;
-  width: 48px;
-  height: 28px;
-  border: 1px solid var(--stcBlack20);
-  border-radius: 15.5px;
-  background-color: var(--base);
-  cursor: pointer;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-switcher__content {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+  -ms-flex-item-align: center;
+      align-self: center;
+  margin-left: 12px;
+}
+.mfui-switcher__content_size_small {
+  font-size: 12px;
+  line-height: 16px;
+}
+.mfui-switcher__content_left {
+  margin-right: 12px;
+  margin-left: 0;
+}
+.mfui-switcher__content_left + .mfui-switcher__input {
+  margin-left: auto;
 }
 .mfui-switcher__pointer {
   position: relative;
-  top: 1px;
-  left: 1px;
+  top: 2px;
+  left: 2px;
   width: 24px;
   height: 24px;
-  border: 1px solid var(--stcBlack20);
   border-radius: 50%;
-  background-color: var(--base);
-  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05), 0 3px 1px rgba(0, 0, 0, 0.05);
+  background-color: var(--stcWhite);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
-.mfui-switcher_no-touch:hover:not(.mfui-switcher_disabled) {
+.mfui-switcher__loader {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: hidden;
+}
+.mfui-switcher__loader:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 300%;
+  height: 100%;
+  background: -webkit-gradient(linear, left top, right top, from(var(--spbSky1)), color-stop(16%, var(--spbSky2)), color-stop(33%, var(--spbSky1)), color-stop(50%, var(--spbSky2)), color-stop(66%, var(--spbSky1)), color-stop(82%, var(--spbSky2)), to(var(--spbSky1)));
+  background: linear-gradient(90deg, var(--spbSky1) 0%, var(--spbSky2) 16%, var(--spbSky1) 33%, var(--spbSky2) 50%, var(--spbSky1) 66%, var(--spbSky2) 82%, var(--spbSky1) 100%);
+  -webkit-animation: shining 0.8s linear infinite;
+          animation: shining 0.8s linear infinite;
+}
+@-webkit-keyframes shining {
+  0% {
+    -webkit-transform: translateX(-33%);
+            transform: translateX(-33%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+@keyframes shining {
+  0% {
+    -webkit-transform: translateX(-33%);
+            transform: translateX(-33%);
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+  }
+}
+.mfui-switcher__input {
+  position: relative;
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  width: 48px;
+  min-width: 48px;
+  height: 28px;
+  border-radius: 15.5px;
+  overflow: hidden;
+  background-color: var(--spbSky1);
+  cursor: pointer;
+  -webkit-transition: background-color 0.3s;
+  transition: background-color 0.3s;
+}
+.mfui-switcher__input_disabled {
   background-color: var(--spbSky1);
 }
-.mfui-switcher_checked {
+.mfui-switcher__input_disabled,
+.mfui-switcher__input_loaded {
+  cursor: default;
+}
+.mfui-switcher__input:hover:not(.mfui-switcher__input_disabled) {
+  background-color: var(--spbSky2);
+}
+.mfui-switcher__input_checked:not(.mfui-switcher__input_disabled) {
   border-color: var(--brandGreen);
   background-color: var(--brandGreen);
 }
-.mfui-switcher_checked .mfui-switcher__pointer {
-  left: 21px;
-}
-.mfui-switcher_checked.mfui-switcher_no-touch:hover {
+.mfui-switcher__input_checked:hover:not(.mfui-switcher__input_disabled) {
   border-color: var(--buttonHoverGreen);
   background-color: var(--buttonHoverGreen);
 }
-.mfui-switcher_disabled {
-  background-color: var(--spbSky1);
-  cursor: default;
-}
-.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch {
-  border-color: var(--spbSky2);
+.mfui-switcher__input_disabled .mfui-switcher__pointer {
   background-color: var(--spbSky2);
 }
+.mfui-switcher__input_checked .mfui-switcher__pointer {
+  left: 22px;
+}
+.mfui-switcher__input_checked .mfui-switcher__loader:before {
+  background: -webkit-gradient(linear, left top, right top, from(var(--brandGreen)), color-stop(16%, var(--buttonHoverGreen)), color-stop(33%, var(--brandGreen)), color-stop(50%, var(--buttonHoverGreen)), color-stop(66%, var(--brandGreen)), color-stop(82%, var(--buttonHoverGreen)), to(var(--brandGreen)));
+  background: linear-gradient(90deg, var(--brandGreen) 0%, var(--buttonHoverGreen) 16%, var(--brandGreen) 33%, var(--buttonHoverGreen) 50%, var(--brandGreen) 66%, var(--buttonHoverGreen) 82%, var(--brandGreen) 100%);
+}
+.mfui-switcher_disabled .mfui-switcher__content {
+  color: var(--spbSky3);
+}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { AccessibilityEventType } from '@megafon/ui-helpers';
 import './Switcher.less';
 export interface ISwitcherProps {
     /** Дополнительные data атрибуты к внутренним элементам */
@@ -11,8 +12,14 @@ export interface ISwitcherProps {
     checked?: boolean;
     /** Отключение переключателя */
     disabled?: boolean;
+    /** Cостояние загрузки */
+    showLoader?: boolean;
+    /** Размер текста лейбла */
+    textSize?: 'small' | 'medium';
+    /** Позиция лейбла относительно свитчера */
+    textPosition?: 'left' | 'right';
     /** Обработчик изменения элемента */
-    onChange?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onChange?: (e: AccessibilityEventType) => void;
 }
 declare const Switcher: React.FC<ISwitcherProps>;
 export default Switcher;

package/dist/lib/components/Switcher/Switcher.js

@@ -30,27 +30,53 @@ var Switcher = function Switcher(_ref) {
       checked = _ref$checked === void 0 ? false : _ref$checked,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$showLoader = _ref.showLoader,
+      showLoader = _ref$showLoader === void 0 ? false : _ref$showLoader,
+      children = _ref.children,
+      _ref$textSize = _ref.textSize,
+      textSize = _ref$textSize === void 0 ? 'medium' : _ref$textSize,
+      _ref$textPosition = _ref.textPosition,
+      textPosition = _ref$textPosition === void 0 ? 'right' : _ref$textPosition,
       onChange = _ref.onChange;
   var isTouch = (0, _uiHelpers.detectTouch)();
-
-  var handleChange = function handleChange(e) {
-    if (disabled) {
+  var isLeftContent = !!children && textPosition === 'left';
+  var isRightContent = !!children && textPosition === 'right';
+  var isInteractiveDisabled = showLoader || disabled;
+  var handleChange = React.useCallback(function (e) {
+    if (isInteractiveDisabled || !(0, _uiHelpers.checkEventIsClickOrEnterPress)(e)) {
       return;
     }
 
     onChange === null || onChange === void 0 ? void 0 : onChange(e);
-  };
-
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+  }, [isInteractiveDisabled, onChange]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
+      disabled: disabled
+    }, className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isLeftContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('content', {
+      size: textSize,
+      left: true
+    })
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: cn('input', {
       checked: checked,
       disabled: disabled,
+      loaded: showLoader,
       'no-touch': !isTouch
-    }, className),
-    onClick: handleChange
+    }),
+    onClick: handleChange,
+    onKeyDown: handleChange,
+    tabIndex: isInteractiveDisabled ? undefined : 0
+  }, showLoader && !disabled && /*#__PURE__*/React.createElement("div", {
+    className: cn('loader')
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('pointer')
-  }));
+  })), isRightContent && /*#__PURE__*/React.createElement("div", {
+    className: cn('content', {
+      size: textSize
+    })
+  }, children));
 };
 
 Switcher.propTypes = {
@@ -58,8 +84,11 @@ Switcher.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
+  textSize: PropTypes.oneOf(['small', 'medium']),
+  textPosition: PropTypes.oneOf(['left', 'right']),
   checked: PropTypes.bool,
   disabled: PropTypes.bool,
+  showLoader: PropTypes.bool,
   onChange: PropTypes.func
 };
 var _default = Switcher;

package/dist/lib/components/Tile/Tile.css

@@ -1,6 +1,6 @@
 .mfui-tile {
   color: var(--content);
-  background-color: var(--background);
+  background-color: var(--base);
 }
 .mfui-tile_radius_rounded {
   border-radius: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "3.4.0",
+  "version": "3.5.2",
   "files": [
     "dist",
     "styles"
@@ -54,7 +54,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^1.1.1",
+    "@megafon/ui-icons": "^1.2.1",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -86,7 +86,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.1.1",
+    "@megafon/ui-helpers": "^2.1.2",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -97,5 +97,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "41f248304dfc4d0e060bf47b12b663077f215d5b"
+  "gitHead": "96b6862cd6294fa5fb9d630b2194a1dd74d969fe"
 }

package/styles/colorsDark.css

@@ -44,19 +44,19 @@
         --stcBlack50: #33333380;
 
         /* Soft (new) */
-        --brandGreen80: #0CDC78;
-        --brandGreen20: #DDFFEC;
-        --brandPurple80: #AA67C1;
-        --brandPurple20: #FFEEFF;
-        --warmRedC80: #FF765D;
-        --warmRedC20: #FFCFC7;
-        --137C80: #FFB945;
-        --137C20: #FFEDD1;
-        --311C80: #62E3FF;
-        --311C20: #E1FAFF;
-        --reflexBlue80: #554FC9;
-        --reflexBlue20: #EBEAFF;
-        --fury80: #F8505D;
-        --fury20: #FFC5C9;
+        --brandGreen80: #24804E;
+        --brandGreen20: #314138;
+        --brandPurple80: #5C2C64;
+        --brandPurple20: #38273C;
+        --warmRedC80: #B85B4A;
+        --warmRedC20: #422A26;
+        --137C80: #BC862E;
+        --137C20: #4A3D27;
+        --311C80: #5B9DA3;
+        --311C20: #35484A;
+        --reflexBlue80: #4B497C;
+        --reflexBlue20: #2F2F3C;
+        --fury80: #CA3A43;
+        --fury20: #442B2D;
     }
 }