@megafon/ui-core 5.14.1 → 5.16.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.16.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.15.0...@megafon/ui-core@5.16.0) (2024-06-26)
+
+
+### Bug Fixes
+
+* **carousel:** unsibscribe throttle ([c595b66](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/c595b66d2ecff5b071ffd69c7ffb22dd18b8e9ca))
+* **contentview:** add new props to component ContentView ([8780d37](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/8780d37b9699b336dd5575403f9e8e6aee95113e))
+* **radiobutton:** fix hover on touch devices ([fecbc40](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/fecbc4023a545835e4a3995feec1caac1c3e0253))
+
+
+### Features
+
+* **accordion:** add new prop titleTag for change title tag, add classes.title prop" ([6f265f5](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/6f265f53bbd552957454405d8c95cbe1549c72dd))
+
+
+
+
+
+# [5.15.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.14.1...@megafon/ui-core@5.15.0) (2024-06-17)
+
+
+### Features
+
+* **avatar:** create component Avatar ([d36574f](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/d36574f889a9eceb3a71b790670c2809a9c538aa))
+* **colors:** add gradient Scrim ([ee4f5c6](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/ee4f5c6ddeea024573f5064308b3d8d30d31d575))
+
+
+
+
+
 ## [5.14.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.14.0...@megafon/ui-core@5.14.1) (2024-06-10)
 
 

package/dist/es/colors/colorsData.js

@@ -110,6 +110,9 @@ var colors = {
         name: 'Exclusive',
         code: 'gradientExclusive',
         gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
+      }, {
+        name: 'Scrim',
+        code: 'gradientScrim'
       }]
     }
   },

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

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { IHeaderProps } from '../Header/Header';
 import './Accordion.less';
 export interface IAccordionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
+    /** Заголовок */
+    titleTag?: IHeaderProps['as'];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Включить микроразметку */
@@ -17,6 +20,7 @@ export interface IAccordionProps {
         openedClass?: string;
         collapse?: string;
         titleWrap?: string;
+        title?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/Accordion/Accordion.js

@@ -22,6 +22,8 @@ var cn = cnCreate('mfui-accordion');
 var Accordion = function Accordion(_ref) {
   var rootRef = _ref.rootRef,
       title = _ref.title,
+      _ref$titleTag = _ref.titleTag,
+      titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       _ref$hasMicrodata = _ref.hasMicrodata,
@@ -33,6 +35,7 @@ var Accordion = function Accordion(_ref) {
       rootPropsClasses = _ref$classes.root,
       collapsePropsClasses = _ref$classes.collapse,
       titleWrapPropsClasses = _ref$classes.titleWrap,
+      titlePropsClasses = _ref$classes.title,
       dataAttrs = _ref.dataAttrs,
       onClickAccordion = _ref.onClickAccordion,
       children = _ref.children;
@@ -88,8 +91,9 @@ var Accordion = function Accordion(_ref) {
   }, hasMicrodata && {
     itemProp: 'name'
   }), /*#__PURE__*/React.createElement(Header, {
-    as: "h5",
-    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
+    as: titleTag,
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
+    className: titlePropsClasses
   }, title), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-box')
   }, /*#__PURE__*/React.createElement(ArrowDown, _extends({
@@ -107,6 +111,7 @@ Accordion.propTypes = {
     current: PropTypes.elementType
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
   isOpened: PropTypes.bool,
   hasMicrodata: PropTypes.bool,
   className: PropTypes.string,
@@ -114,7 +119,8 @@ Accordion.propTypes = {
     openedClass: PropTypes.string,
     root: PropTypes.string,
     collapse: PropTypes.string,
-    titleWrap: PropTypes.string
+    titleWrap: PropTypes.string,
+    title: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),

package/dist/es/components/Avatar/Avatar.css

@@ -0,0 +1,52 @@
+.mfui-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-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: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: 15px;
+}
+.mfui-avatar__text {
+  display: block;
+}
+.mfui-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  background-color: var(--base);
+}
+.mfui-avatar__placeholder {
+  opacity: 0.3;
+}
+.mfui-avatar_color_green {
+  color: var(--brandGreen);
+  background-color: var(--brandGreen20);
+}
+.mfui-avatar_color_green .mfui-avatar__placeholder {
+  fill: var(--brandGreen);
+}
+.mfui-avatar_color_gray {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+}
+.mfui-avatar_color_gray .mfui-avatar__placeholder {
+  fill: var(--spbSky3);
+}
+.mfui-avatar_size_auto {
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './Avatar.less';
+export interface IAvatarProps {
+    /** Ссылка на изображение. Имеет приоритет над текстом */
+    src?: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Текстовое отображение */
+    letters?: string;
+    /** Цвет заливки */
+    color?: 'green' | 'gray';
+    /** Размер (по умолчанию 40х40 пикселей). */
+    size?: 'default' | 'auto';
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Avatar: React.FC<IAvatarProps>;
+export default Avatar;

package/dist/es/components/Avatar/Avatar.js

@@ -0,0 +1,68 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.slice.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./Avatar.css";
+
+var PlaceholderIcon = function PlaceholderIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"
+  }));
+};
+
+var cn = cnCreate('mfui-avatar');
+
+var Avatar = function Avatar(_ref) {
+  var src = _ref.src,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? 'avatar' : _ref$alt,
+      letters = _ref.letters,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'green' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+
+  var renderContent = function renderContent() {
+    if (src) {
+      return /*#__PURE__*/React.createElement("img", {
+        className: cn('image'),
+        src: src,
+        alt: alt
+      });
+    }
+
+    if (letters) {
+      var text = letters.slice(0, 2).toUpperCase();
+      return /*#__PURE__*/React.createElement("span", {
+        className: cn('text')
+      }, text);
+    }
+
+    return /*#__PURE__*/React.createElement(PlaceholderIcon, {
+      className: cn('placeholder')
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      color: color,
+      size: size
+    }, [className])
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderContent());
+};
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  letters: PropTypes.string,
+  color: PropTypes.oneOf(['green', 'gray']),
+  size: PropTypes.oneOf(['default', 'auto']),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+export default Avatar;

package/dist/es/components/Avatar/i/placeholder.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"/></svg>

package/dist/es/components/Carousel/Carousel.js

@@ -261,6 +261,7 @@ var Carousel = function Carousel(_ref) {
     var windowResizeHandlerThrottled = throttle(windowResizeHandler, throttleTime.resize);
     window.addEventListener('resize', windowResizeHandlerThrottled);
     return function () {
+      windowResizeHandlerThrottled.cancel();
       window.removeEventListener('resize', windowResizeHandlerThrottled);
     };
   }, [slidesSettings, swiperInstance]);

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

@@ -7,6 +7,10 @@ declare type ElementType = {
     href?: string;
     /** Атрибут target */
     target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Отключение кнопки */
+    disabled?: boolean;
+    /** Показать загрузку */
+    showLoader?: boolean;
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 };

package/dist/es/components/ContentView/ContentView.js

@@ -46,6 +46,8 @@ var ContentView = function ContentView(_ref) {
     className: cn('button', [classes.button]),
     href: buttonParams.href,
     target: buttonParams.target,
+    disabled: buttonParams.disabled,
+    showLoader: buttonParams.showLoader,
     onClick: buttonParams.onClick,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
@@ -55,6 +57,8 @@ var ContentView = function ContentView(_ref) {
     type: "text",
     href: linkParams.href,
     target: linkParams.target,
+    disabled: linkParams.disabled,
+    showLoader: linkParams.showLoader,
     onClick: linkParams.onClick,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link

package/dist/es/components/RadioButton/RadioButton.css

@@ -54,8 +54,10 @@
 .mfui-radio-button__input_dark:checked + .mfui-radio-button__custom-input:before {
   border: 7px solid var(--brandGreen);
 }
-.mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
-  border-color: var(--buttonHoverGreen);
+@media (hover: hover) {
+  .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
+    border-color: var(--buttonHoverGreen);
+  }
 }
 .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
   border-color: var(--buttonDown);
@@ -80,12 +82,16 @@
   border: 7px solid var(--stcWhite);
   background-color: var(--stcBlack);
 }
-.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
-  border-color: var(--buttonHoverGrey);
-  background-color: var(--buttonHoverGrey);
+@media (hover: hover) {
+  .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
+    border-color: var(--buttonHoverGrey);
+    background-color: var(--buttonHoverGrey);
+  }
 }
-.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
-  background-color: var(--stcBlack);
+@media (hover: hover) {
+  .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
+    background-color: var(--stcBlack);
+  }
 }
 .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
   border-color: var(--buttonDown);

package/dist/es/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Accordion } from './components/Accordion/Accordion';
+export { default as Avatar } from './components/Avatar/Avatar';
 export { default as Banner } from './components/Banner/Banner';
 export { default as BannerDot } from './components/Banner/BannerDot';
 export { default as Button } from './components/Button/Button';

package/dist/es/index.js

@@ -1,4 +1,5 @@
 export { default as Accordion } from "./components/Accordion/Accordion";
+export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Banner } from "./components/Banner/Banner";
 export { default as BannerDot } from "./components/Banner/BannerDot";
 export { default as Button } from "./components/Button/Button";

package/dist/lib/colors/colorsData.js

@@ -116,6 +116,9 @@ var colors = {
         name: 'Exclusive',
         code: 'gradientExclusive',
         gradient: 'linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%)'
+      }, {
+        name: 'Scrim',
+        code: 'gradientScrim'
       }]
     }
   },

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

@@ -1,10 +1,13 @@
 import * as React from 'react';
+import { IHeaderProps } from '../Header/Header';
 import './Accordion.less';
 export interface IAccordionProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Заголовок */
     title: string | React.ReactNode | React.ReactNode[];
+    /** Заголовок */
+    titleTag?: IHeaderProps['as'];
     /** Состояние открытости */
     isOpened?: boolean;
     /** Включить микроразметку */
@@ -17,6 +20,7 @@ export interface IAccordionProps {
         openedClass?: string;
         collapse?: string;
         titleWrap?: string;
+        title?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/lib/components/Accordion/Accordion.js

@@ -42,6 +42,8 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-accordion');
 var Accordion = function Accordion(_ref) {
   var rootRef = _ref.rootRef,
       title = _ref.title,
+      _ref$titleTag = _ref.titleTag,
+      titleTag = _ref$titleTag === void 0 ? 'h5' : _ref$titleTag,
       _ref$isOpened = _ref.isOpened,
       isOpened = _ref$isOpened === void 0 ? false : _ref$isOpened,
       _ref$hasMicrodata = _ref.hasMicrodata,
@@ -53,6 +55,7 @@ var Accordion = function Accordion(_ref) {
       rootPropsClasses = _ref$classes.root,
       collapsePropsClasses = _ref$classes.collapse,
       titleWrapPropsClasses = _ref$classes.titleWrap,
+      titlePropsClasses = _ref$classes.title,
       dataAttrs = _ref.dataAttrs,
       onClickAccordion = _ref.onClickAccordion,
       children = _ref.children;
@@ -108,8 +111,9 @@ var Accordion = function Accordion(_ref) {
   }, hasMicrodata && {
     itemProp: 'name'
   }), /*#__PURE__*/React.createElement(_Header["default"], {
-    as: "h5",
-    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
+    as: titleTag,
+    dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header,
+    className: titlePropsClasses
   }, title), /*#__PURE__*/React.createElement("div", {
     className: cn('icon-box')
   }, /*#__PURE__*/React.createElement(ArrowDown, (0, _extends2["default"])({
@@ -127,6 +131,7 @@ Accordion.propTypes = {
     current: PropTypes.elementType
   }), PropTypes.any])]),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  titleTag: PropTypes.oneOf(['h1', 'h2', 'h3', 'h5']),
   isOpened: PropTypes.bool,
   hasMicrodata: PropTypes.bool,
   className: PropTypes.string,
@@ -134,7 +139,8 @@ Accordion.propTypes = {
     openedClass: PropTypes.string,
     root: PropTypes.string,
     collapse: PropTypes.string,
-    titleWrap: PropTypes.string
+    titleWrap: PropTypes.string,
+    title: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),

package/dist/lib/components/Avatar/Avatar.css

@@ -0,0 +1,52 @@
+.mfui-avatar {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-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: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  font-weight: 500;
+  font-size: 15px;
+}
+.mfui-avatar__text {
+  display: block;
+}
+.mfui-avatar__image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  background-color: var(--base);
+}
+.mfui-avatar__placeholder {
+  opacity: 0.3;
+}
+.mfui-avatar_color_green {
+  color: var(--brandGreen);
+  background-color: var(--brandGreen20);
+}
+.mfui-avatar_color_green .mfui-avatar__placeholder {
+  fill: var(--brandGreen);
+}
+.mfui-avatar_color_gray {
+  color: var(--spbSky3);
+  background-color: var(--spbSky0);
+}
+.mfui-avatar_color_gray .mfui-avatar__placeholder {
+  fill: var(--spbSky3);
+}
+.mfui-avatar_size_auto {
+  width: 100%;
+  height: 100%;
+  font-size: inherit;
+}

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

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import './Avatar.less';
+export interface IAvatarProps {
+    /** Ссылка на изображение. Имеет приоритет над текстом */
+    src?: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+    /** Текстовое отображение */
+    letters?: string;
+    /** Цвет заливки */
+    color?: 'green' | 'gray';
+    /** Размер (по умолчанию 40х40 пикселей). */
+    size?: 'default' | 'auto';
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+}
+declare const Avatar: React.FC<IAvatarProps>;
+export default Avatar;

package/dist/lib/components/Avatar/Avatar.js

@@ -0,0 +1,87 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.array.slice.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 PlaceholderIcon = function PlaceholderIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"
+  }));
+};
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-avatar');
+
+var Avatar = function Avatar(_ref) {
+  var src = _ref.src,
+      _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? 'avatar' : _ref$alt,
+      letters = _ref.letters,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'green' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+
+  var renderContent = function renderContent() {
+    if (src) {
+      return /*#__PURE__*/React.createElement("img", {
+        className: cn('image'),
+        src: src,
+        alt: alt
+      });
+    }
+
+    if (letters) {
+      var text = letters.slice(0, 2).toUpperCase();
+      return /*#__PURE__*/React.createElement("span", {
+        className: cn('text')
+      }, text);
+    }
+
+    return /*#__PURE__*/React.createElement(PlaceholderIcon, {
+      className: cn('placeholder')
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      color: color,
+      size: size
+    }, [className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), renderContent());
+};
+
+Avatar.propTypes = {
+  src: PropTypes.string,
+  alt: PropTypes.string,
+  letters: PropTypes.string,
+  color: PropTypes.oneOf(['green', 'gray']),
+  size: PropTypes.oneOf(['default', 'auto']),
+  className: PropTypes.string,
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+var _default = Avatar;
+exports["default"] = _default;

package/dist/lib/components/Avatar/i/placeholder.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M29.188 40.75l2.625-9.752-.42-.407A16.63 16.63 0 0020 26.312a16.642 16.642 0 00-11.393 4.292l-.42.394 2.626 9.752h18.374zM12.125 15.813a7.875 7.875 0 1015.75 0 7.875 7.875 0 00-15.75 0z"/></svg>

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

@@ -302,6 +302,7 @@ var Carousel = function Carousel(_ref) {
     var windowResizeHandlerThrottled = (0, _lodash["default"])(windowResizeHandler, _throttleTime["default"].resize);
     window.addEventListener('resize', windowResizeHandlerThrottled);
     return function () {
+      windowResizeHandlerThrottled.cancel();
       window.removeEventListener('resize', windowResizeHandlerThrottled);
     };
   }, [slidesSettings, swiperInstance]);

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

@@ -7,6 +7,10 @@ declare type ElementType = {
     href?: string;
     /** Атрибут target */
     target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Отключение кнопки */
+    disabled?: boolean;
+    /** Показать загрузку */
+    showLoader?: boolean;
     /** Обработчик клика */
     onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 };

package/dist/lib/components/ContentView/ContentView.js

@@ -66,6 +66,8 @@ var ContentView = function ContentView(_ref) {
     className: cn('button', [classes.button]),
     href: buttonParams.href,
     target: buttonParams.target,
+    disabled: buttonParams.disabled,
+    showLoader: buttonParams.showLoader,
     onClick: buttonParams.onClick,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
@@ -75,6 +77,8 @@ var ContentView = function ContentView(_ref) {
     type: "text",
     href: linkParams.href,
     target: linkParams.target,
+    disabled: linkParams.disabled,
+    showLoader: linkParams.showLoader,
     onClick: linkParams.onClick,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link

package/dist/lib/components/RadioButton/RadioButton.css

@@ -54,8 +54,10 @@
 .mfui-radio-button__input_dark:checked + .mfui-radio-button__custom-input:before {
   border: 7px solid var(--brandGreen);
 }
-.mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
-  border-color: var(--buttonHoverGreen);
+@media (hover: hover) {
+  .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
+    border-color: var(--buttonHoverGreen);
+  }
 }
 .mfui-radio-button__label_dark:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
   border-color: var(--buttonDown);
@@ -80,12 +82,16 @@
   border: 7px solid var(--stcWhite);
   background-color: var(--stcBlack);
 }
-.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
-  border-color: var(--buttonHoverGrey);
-  background-color: var(--buttonHoverGrey);
+@media (hover: hover) {
+  .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__custom-input:before {
+    border-color: var(--buttonHoverGrey);
+    background-color: var(--buttonHoverGrey);
+  }
 }
-.mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
-  background-color: var(--stcBlack);
+@media (hover: hover) {
+  .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):hover .mfui-radio-button__input:checked + .mfui-radio-button__custom-input:before {
+    background-color: var(--stcBlack);
+  }
 }
 .mfui-radio-button__label_light:not(.mfui-radio-button__label_disabled):active .mfui-radio-button__custom-input:before {
   border-color: var(--buttonDown);

package/dist/lib/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Accordion } from './components/Accordion/Accordion';
+export { default as Avatar } from './components/Avatar/Avatar';
 export { default as Banner } from './components/Banner/Banner';
 export { default as BannerDot } from './components/Banner/BannerDot';
 export { default as Button } from './components/Button/Button';

package/dist/lib/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Accordion", {
     return _Accordion["default"];
   }
 });
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function get() {
+    return _Avatar["default"];
+  }
+});
 Object.defineProperty(exports, "Banner", {
   enumerable: true,
   get: function get() {
@@ -378,6 +384,8 @@ Object.defineProperty(exports, "usePagination", {
 
 var _Accordion = _interopRequireDefault(require("./components/Accordion/Accordion"));
 
+var _Avatar = _interopRequireDefault(require("./components/Avatar/Avatar"));
+
 var _Banner = _interopRequireDefault(require("./components/Banner/Banner"));
 
 var _BannerDot = _interopRequireDefault(require("./components/Banner/BannerDot"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.14.1",
+  "version": "5.16.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.24.0",
+    "@megafon/ui-icons": "^2.25.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -86,7 +86,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.5.5",
+    "@megafon/ui-helpers": "^2.6.0",
     "@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": "13dc2b2721607f600ddb332e78fc49b0698c9fe2"
+  "gitHead": "0d4f96ecbc805db6a1b2200dd9adbb707349d474"
 }

package/styles/colors.css

@@ -31,6 +31,7 @@
     --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%);
+    --gradientScrim: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 22.73%);
 
     /* Static */
     --stcWhite: #FFFFFF;

package/styles/colorsDark.css

@@ -32,6 +32,7 @@
         --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%);
+        --gradientScrim: linear-gradient(180deg, rgba(31, 31, 31, 0) 0%, #1F1F1F 22.73%);
 
         /* Static */
         --stcWhite: #FFFFFF;