@megafon/ui-core 5.2.3 → 5.4.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.4.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.3.0...@megafon/ui-core@5.4.0) (2023-11-22)
+
+
+### Bug Fixes
+
+* **snackbar:** fix swipe ([ce8b5eb](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/ce8b5ebd8bae725befab8adc08dbaa879f430bd4))
+* **snackbar:** fix transform ([286e976](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/286e976a6bf395de41392efcd3cbf66ecc949a1a))
+* **snackbar:** refactoring ([6f49ad1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/6f49ad130d8ce2e810660ae0bbb7a270269d29e0))
+* **snackbar:** refactoring ([b58f943](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/b58f943f364995da610374140287b64a229b7aed))
+* **tabs:** fix text color in not active tab ([d0bd99b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/d0bd99b710ce97813df671eeeb4edf6f8ae5be44))
+
+
+### Features
+
+* **pricebadge:** add new iconType profile ([0259dd8](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/0259dd8c3989e4041bb0a4d9100e0a76352c1377))
+
+
+
+
+
+# [5.3.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.2.3...@megafon/ui-core@5.3.0) (2023-11-08)
+
+
+### Features
+
+* **selector:** create component Selector ([73d6aec](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/73d6aec573fe500471f0b557f0cbe0a9485b1fa3))
+
+
+
+
+
 ## [5.2.3](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.2.2...@megafon/ui-core@5.2.3) (2023-10-17)
 
 

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -12,6 +12,7 @@ export declare const PriceBadgeIcon: {
     readonly CHECK: "check";
     readonly ATTENTION: "attention";
     readonly INFO: "info";
+    readonly PROFILE: "profile";
 };
 export declare const PriseBadgeSize: {
     readonly SMALL: "small";

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.js

@@ -5,6 +5,22 @@ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./PriceBadge.css";
 
+var ProfileIcon = function ProfileIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+  }));
+};
+
+var ProfileIconBig = function ProfileIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M23 28l2-7.43-.32-.31A12.67 12.67 0 0016 17a12.68 12.68 0 00-8.68 3.27l-.32.3L9 28h14zM10 9a6 6 0 1012 0 6 6 0 00-12 0z"
+  }));
+};
+
 var AttentionIcon = function AttentionIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -108,7 +124,8 @@ export var PriceBadgeIcon = {
   PRICE: 'price',
   CHECK: 'check',
   ATTENTION: 'attention',
-  INFO: 'info'
+  INFO: 'info',
+  PROFILE: 'profile'
 };
 export var PriseBadgeSize = {
   SMALL: 'small',
@@ -134,6 +151,9 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
     case iconType === PriceBadgeIcon.INFO && isBigIcon:
       return InfoIconBig;
 
+    case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
+      return ProfileIconBig;
+
     case iconType === PriceBadgeIcon.PRICE:
       return PriceIcon;
 
@@ -146,6 +166,9 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
     case iconType === PriceBadgeIcon.INFO:
       return InfoIcon;
 
+    case iconType === PriceBadgeIcon.PROFILE:
+      return ProfileIcon;
+
     default:
       return TimerIcon;
   }

package/dist/es/components/Selector/Selector.css

@@ -0,0 +1,98 @@
+.mfui-selector__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.mfui-selector__label {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  outline: none;
+  cursor: pointer;
+}
+.mfui-selector__custom-input {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-color: var(--spbSky2);
+  border-radius: 50%;
+  background-color: var(--base);
+  -webkit-transition: background-color, border-color;
+  transition: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-selector__icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+  -webkit-transition: fill, opacity;
+  transition: fill, opacity;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  fill: var(--stcWhite);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+}
+.mfui-selector__label_disabled {
+  cursor: default;
+}
+.mfui-selector__label_disabled .mfui-selector__custom-input {
+  border-color: var(--spbSky2);
+  background-color: var(--spbSky1);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+  background-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--brandGreen);
+  background-color: var(--brandGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label_error .mfui-selector__custom-input {
+  border-color: var(--fury);
+}

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import './Selector.less';
+export interface ISelectorProps {
+    /** Базовый тип компонента */
+    type?: 'radio' | 'checkbox';
+    /** Значение */
+    value: string;
+    /** Имя для тега form */
+    name?: string;
+    /** Управление состоянием вкл/выкл компонента */
+    checked?: boolean;
+    /** Управление состоянием компонента при типе checkbox */
+    checkedOptions?: string[];
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Отобразить компонент в состоянии ошибки */
+    error?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        label?: string;
+        customInput?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        label?: Record<string, string>;
+        input?: Record<string, string>;
+        customInput?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+    /** Обработчик изменения значения 'value' */
+    onChange?: (value: string | string[]) => void;
+    /** Ссылка на input */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+declare const Selector: React.FC<ISelectorProps>;
+export default Selector;

package/dist/es/components/Selector/Selector.js

@@ -0,0 +1,94 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./Selector.css";
+
+var CheckedIcon = function CheckedIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.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 cn = cnCreate('mfui-selector');
+
+var Selector = function Selector(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'radio' : _ref$type,
+      value = _ref.value,
+      name = _ref.name,
+      checked = _ref.checked,
+      _ref$checkedOptions = _ref.checkedOptions,
+      checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      error = _ref.error,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      inputRef = _ref.inputRef;
+
+  var handleChange = function handleChange() {
+    if (type === 'radio') {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+
+    var isChecked = checkedOptions.includes(value);
+    var newCheckedOptions = isChecked ? checkedOptions.filter(function (option) {
+      return option !== value;
+    }) : [].concat(_toConsumableArray(checkedOptions), [value]);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(newCheckedOptions);
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('', className)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", _extends({
+    className: cn('label', {
+      disabled: disabled,
+      error: error
+    }, classes.label)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", _extends({
+    className: cn('input'),
+    type: type,
+    name: name,
+    value: value,
+    checked: type === 'radio' ? checked : checkedOptions.includes(value),
+    disabled: disabled,
+    onChange: handleChange,
+    ref: inputRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input))), /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('custom-input', classes.customInput)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput)), /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children));
+};
+
+Selector.propTypes = {
+  type: PropTypes.oneOf(['radio', 'checkbox']),
+  value: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  checkedOptions: PropTypes.arrayOf(PropTypes.string.isRequired),
+  error: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  children: PropTypes.node,
+  onChange: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+export default Selector;

package/dist/es/components/Selector/doc/Selector.example.css

@@ -0,0 +1,14 @@
+.top-right {
+  top: 10px;
+  right: 10px;
+}
+.center {
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+}
+.bottom-left {
+  bottom: 10px;
+  left: 10px;
+}

package/dist/es/components/Tabs/Tabs.css

@@ -146,24 +146,30 @@
           box-sizing: border-box;
   height: 36px;
   padding: 2px 12px;
-  color: var(--spbSky3);
+  color: var(--content);
   white-space: nowrap;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   -webkit-transition: color 0.3s, fill 0.3s;
   transition: color 0.3s, fill 0.3s;
-  fill: var(--spbSky3);
+  fill: var(--content);
 }
 .mfui-tabs__tab-inner:hover {
   text-decoration: none;
 }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current) {
+  opacity: 0.8;
+}
 @media screen and (min-width: 1024px) {
   .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
     color: var(--content);
     fill: var(--content);
   }
 }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
+  opacity: 1;
+}
 .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):active {
   color: var(--buttonDown);
   fill: var(--buttonDown);
@@ -255,11 +261,13 @@
   background-color: var(--stcBlack20);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current) {
-  color: #ffffffb2;
-  fill: #ffffffb2;
+  color: var(--stcWhite);
+  opacity: 0.8;
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover {
   color: var(--stcWhite);
+  opacity: 1;
   fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {

package/dist/es/index.d.ts

@@ -35,6 +35,7 @@ export { default as PromoBadge } from './components/Badges/components/PromoBadge
 export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';
+export { default as Selector } from './components/Selector/Selector';
 export { default as selectReducer } from './components/Select/reducer/selectReducer';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';

package/dist/es/index.js

@@ -35,6 +35,7 @@ export { default as PromoBadge } from "./components/Badges/components/PromoBadge
 export { default as RadioButton } from "./components/RadioButton/RadioButton";
 export { default as Search } from "./components/Search/Search";
 export { default as Select } from "./components/Select/Select";
+export { default as Selector } from "./components/Selector/Selector";
 export { default as selectReducer } from "./components/Select/reducer/selectReducer";
 export { default as Snackbar } from "./components/Snackbar/Snackbar";
 export { default as SnackbarTimer } from "./components/Snackbar/SnackbarTimer/SnackbarTimer";

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -12,6 +12,7 @@ export declare const PriceBadgeIcon: {
     readonly CHECK: "check";
     readonly ATTENTION: "attention";
     readonly INFO: "info";
+    readonly PROFILE: "profile";
 };
 export declare const PriseBadgeSize: {
     readonly SMALL: "small";

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.js

@@ -23,6 +23,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var ProfileIcon = function ProfileIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+  }));
+};
+
+var ProfileIconBig = function ProfileIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M23 28l2-7.43-.32-.31A12.67 12.67 0 0016 17a12.68 12.68 0 00-8.68 3.27l-.32.3L9 28h14zM10 9a6 6 0 1012 0 6 6 0 00-12 0z"
+  }));
+};
+
 var AttentionIcon = function AttentionIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
@@ -127,7 +143,8 @@ var PriceBadgeIcon = {
   PRICE: 'price',
   CHECK: 'check',
   ATTENTION: 'attention',
-  INFO: 'info'
+  INFO: 'info',
+  PROFILE: 'profile'
 };
 exports.PriceBadgeIcon = PriceBadgeIcon;
 var PriseBadgeSize = {
@@ -155,6 +172,9 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
     case iconType === PriceBadgeIcon.INFO && isBigIcon:
       return InfoIconBig;
 
+    case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
+      return ProfileIconBig;
+
     case iconType === PriceBadgeIcon.PRICE:
       return PriceIcon;
 
@@ -167,6 +187,9 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
     case iconType === PriceBadgeIcon.INFO:
       return InfoIcon;
 
+    case iconType === PriceBadgeIcon.PROFILE:
+      return ProfileIcon;
+
     default:
       return TimerIcon;
   }

package/dist/lib/components/Selector/Selector.css

@@ -0,0 +1,98 @@
+.mfui-selector__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+.mfui-selector__label {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  outline: none;
+  cursor: pointer;
+}
+.mfui-selector__custom-input {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border: 2px solid;
+  border-color: var(--spbSky2);
+  border-radius: 50%;
+  background-color: var(--base);
+  -webkit-transition: background-color, border-color;
+  transition: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+}
+.mfui-selector__icon {
+  display: block;
+  width: 20px;
+  height: 20px;
+  opacity: 0;
+  -webkit-transition: fill, opacity;
+  transition: fill, opacity;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  fill: var(--stcWhite);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+}
+.mfui-selector__label_disabled {
+  cursor: default;
+}
+.mfui-selector__label_disabled .mfui-selector__custom-input {
+  border-color: var(--spbSky2);
+  background-color: var(--spbSky1);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input {
+  background-color: var(--spbSky2);
+}
+.mfui-selector__label_disabled .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonHoverGreen);
+  background-color: var(--buttonHoverGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):hover .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--buttonDown);
+  background-color: var(--buttonDown);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled):active .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input {
+  border-color: var(--brandGreen);
+  background-color: var(--brandGreen);
+}
+.mfui-selector__label:not(.mfui-selector__label_disabled) .mfui-selector__input:checked + .mfui-selector__custom-input .mfui-selector__icon {
+  opacity: 1;
+}
+.mfui-selector__label_error .mfui-selector__custom-input {
+  border-color: var(--fury);
+}

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import './Selector.less';
+export interface ISelectorProps {
+    /** Базовый тип компонента */
+    type?: 'radio' | 'checkbox';
+    /** Значение */
+    value: string;
+    /** Имя для тега form */
+    name?: string;
+    /** Управление состоянием вкл/выкл компонента */
+    checked?: boolean;
+    /** Управление состоянием компонента при типе checkbox */
+    checkedOptions?: string[];
+    /** Отключение компонента */
+    disabled?: boolean;
+    /** Отобразить компонент в состоянии ошибки */
+    error?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        label?: string;
+        customInput?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        label?: Record<string, string>;
+        input?: Record<string, string>;
+        customInput?: Record<string, string>;
+    };
+    children?: React.ReactNode;
+    /** Обработчик изменения значения 'value' */
+    onChange?: (value: string | string[]) => void;
+    /** Ссылка на input */
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+declare const Selector: React.FC<ISelectorProps>;
+export default Selector;

package/dist/lib/components/Selector/Selector.js

@@ -0,0 +1,118 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var CheckedIcon = function CheckedIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.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 cn = (0, _uiHelpers.cnCreate)('mfui-selector');
+
+var Selector = function Selector(_ref) {
+  var _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'radio' : _ref$type,
+      value = _ref.value,
+      name = _ref.name,
+      checked = _ref.checked,
+      _ref$checkedOptions = _ref.checkedOptions,
+      checkedOptions = _ref$checkedOptions === void 0 ? [] : _ref$checkedOptions,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      error = _ref.error,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      inputRef = _ref.inputRef;
+
+  var handleChange = function handleChange() {
+    if (type === 'radio') {
+      return onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    }
+
+    var isChecked = checkedOptions.includes(value);
+    var newCheckedOptions = isChecked ? checkedOptions.filter(function (option) {
+      return option !== value;
+    }) : [].concat((0, _toConsumableArray2["default"])(checkedOptions), [value]);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(newCheckedOptions);
+  };
+
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('', className)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("label", (0, _extends2["default"])({
+    className: cn('label', {
+      disabled: disabled,
+      error: error
+    }, classes.label)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.label)), /*#__PURE__*/React.createElement("input", (0, _extends2["default"])({
+    className: cn('input'),
+    type: type,
+    name: name,
+    value: value,
+    checked: type === 'radio' ? checked : checkedOptions.includes(value),
+    disabled: disabled,
+    onChange: handleChange,
+    ref: inputRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.input))), /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn('custom-input', classes.customInput)
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.customInput)), /*#__PURE__*/React.createElement(CheckedIcon, {
+    className: cn('icon')
+  })), children));
+};
+
+Selector.propTypes = {
+  type: PropTypes.oneOf(['radio', 'checkbox']),
+  value: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  disabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  checkedOptions: PropTypes.arrayOf(PropTypes.string.isRequired),
+  error: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  children: PropTypes.node,
+  onChange: PropTypes.func,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+var _default = Selector;
+exports["default"] = _default;

package/dist/lib/components/Selector/doc/Selector.example.css

@@ -0,0 +1,14 @@
+.top-right {
+  top: 10px;
+  right: 10px;
+}
+.center {
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+}
+.bottom-left {
+  bottom: 10px;
+  left: 10px;
+}

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

@@ -146,24 +146,30 @@
           box-sizing: border-box;
   height: 36px;
   padding: 2px 12px;
-  color: var(--spbSky3);
+  color: var(--content);
   white-space: nowrap;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   -webkit-transition: color 0.3s, fill 0.3s;
   transition: color 0.3s, fill 0.3s;
-  fill: var(--spbSky3);
+  fill: var(--content);
 }
 .mfui-tabs__tab-inner:hover {
   text-decoration: none;
 }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current) {
+  opacity: 0.8;
+}
 @media screen and (min-width: 1024px) {
   .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
     color: var(--content);
     fill: var(--content);
   }
 }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
+  opacity: 1;
+}
 .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):active {
   color: var(--buttonDown);
   fill: var(--buttonDown);
@@ -255,11 +261,13 @@
   background-color: var(--stcBlack20);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current) {
-  color: #ffffffb2;
-  fill: #ffffffb2;
+  color: var(--stcWhite);
+  opacity: 0.8;
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover {
   color: var(--stcWhite);
+  opacity: 1;
   fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {

package/dist/lib/index.d.ts

@@ -35,6 +35,7 @@ export { default as PromoBadge } from './components/Badges/components/PromoBadge
 export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';
+export { default as Selector } from './components/Selector/Selector';
 export { default as selectReducer } from './components/Select/reducer/selectReducer';
 export { default as Snackbar } from './components/Snackbar/Snackbar';
 export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';

package/dist/lib/index.js

@@ -225,6 +225,12 @@ Object.defineProperty(exports, "Select", {
     return _Select["default"];
   }
 });
+Object.defineProperty(exports, "Selector", {
+  enumerable: true,
+  get: function get() {
+    return _Selector["default"];
+  }
+});
 Object.defineProperty(exports, "selectReducer", {
   enumerable: true,
   get: function get() {
@@ -384,6 +390,8 @@ var _Search = _interopRequireDefault(require("./components/Search/Search"));
 
 var _Select = _interopRequireDefault(require("./components/Select/Select"));
 
+var _Selector = _interopRequireDefault(require("./components/Selector/Selector"));
+
 var _selectReducer = _interopRequireDefault(require("./components/Select/reducer/selectReducer"));
 
 var _Snackbar = _interopRequireDefault(require("./components/Snackbar/Snackbar"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.2.3",
+  "version": "5.4.0",
   "files": [
     "dist",
     "styles"
@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.14.1",
+    "@megafon/ui-icons": "^2.15.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "1bb6769da99d917f5dd4420892c57a7af5be3ab4"
+  "gitHead": "e78c7c397c514016ee74020939dc3807e09bf49a"
 }