@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js

@@ -0,0 +1,69 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var testIdPrefix = 'TitleDescriptionBox';
+var cn = (0, _uiHelpers.cnCreate)('mfui-title-description-box');
+var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    title = _ref.title,
+    description = _ref.description,
+    textColor = _ref.textColor,
+    align = _ref.align,
+    rootRef = _ref.rootRef,
+    className = _ref.className;
+  var renderDescription = React.useCallback(function () {
+    if (typeof description === 'string') {
+      return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+        className: cn('item'),
+        hasMargin: false,
+        color: "inherit",
+        dataAttrs: {
+          root: {
+            'data-testid': "".concat(testIdPrefix, "-description-text")
+          }
+        }
+      }, description);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('description'),
+      "data-testid": "".concat(testIdPrefix, "-description-node")
+    }, description);
+  }, [description]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'h-align': align,
+      'text-color': textColor
+    }, className),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    hAlign: align,
+    dataAttrs: {
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid")
+      }
+    }
+  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    wide: "8",
+    desktop: "10"
+  }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
+    className: cn('item', {
+      header: true
+    }),
+    as: "h2",
+    color: "inherit"
+  }, title), description && renderDescription())));
+};
+var _default = exports["default"] = TitleDescriptionBox;

package/dist/lib/components/VideoBanner/VideoBanner.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-video-banner{overflow:hidden;position:relative}@media screen and (min-width:1280px){.mfui-video-banner{margin-left:-80px;margin-right:-80px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner{margin-left:-64px;margin-right:-64px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner{margin-left:-48px;margin-right:-48px}}@media screen and (max-width:767px){.mfui-video-banner{margin-left:-16px;margin-right:-16px}}.mfui-video-banner_bottom-shadow:after{background:-webkit-gradient(linear,left top,left bottom,color-stop(95.25%,hsla(0,0%,100%,0)),to(rgba(0,0,0,.024)));background:linear-gradient(180deg,hsla(0,0%,100%,0) 95.25%,rgba(0,0,0,.024));bottom:0;content:"";height:100%;position:absolute;right:0;width:100%}.mfui-video-banner__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:400px}@media screen and (min-width:1440px){.mfui-video-banner__wrapper{height:562px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__wrapper{height:500px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:52px;padding-top:52px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:64px;padding-top:64px}}@media screen and (max-width:767px){.mfui-video-banner__wrapper{max-height:488px;padding-bottom:42px;padding-top:42px}}.mfui-video-banner__background-image,.mfui-video-banner__video{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mfui-video-banner__background-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-video-banner__content{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}@media screen and (min-width:1440px){.mfui-video-banner__content{max-height:422px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__content{max-height:360px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__content{max-height:336px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__content{max-height:312px}}@media screen and (max-width:767px){.mfui-video-banner__content{max-height:404px}}.mfui-video-banner__content_text-color_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color_white{color:var(--stcWhite)}@media screen and (max-width:767px){.mfui-video-banner__content_text-color-mobile_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color-mobile_white{color:var(--stcWhite)}}.mfui-video-banner__description{margin-bottom:32px;white-space:pre-wrap}.mfui-video-banner__title{margin-bottom:24px}@media screen and (max-width:767px){.mfui-video-banner__title{margin-bottom:20px}}.mfui-video-banner__text,.mfui-video-banner__title{white-space:pre-wrap}@media screen and (max-width:767px){.mfui-video-banner__text,.mfui-video-banner__title{text-align:center}}.mfui-video-banner__btns-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:-24px -10px 0}@media screen and (max-width:767px){.mfui-video-banner__btns-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media screen and (max-width:479px){.mfui-video-banner__btns-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.mfui-video-banner__button,.mfui-video-banner__link{margin:24px 10px 0}.mfui-video-banner__cost{font-size:12px;line-height:18px;margin-bottom:18px}.mfui-video-banner__value{display:inline;margin:0 3px}.mfui-video-banner__breadcrumbs,.mfui-video-banner__content{z-index:1}.mfui-video-banner__breadcrumbs{position:absolute;top:32px}.mfui-video-banner__grid{width:100%}

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

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Props as BreadcrumbsPropsType } from '../Breadcrumbs/Breadcrumbs';
+import './VideoBanner.scss';
+export type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+export declare const testIdPrefix = "VideoBanner";
+export declare enum ClassName {
+    BUTTON = "button",
+    LINK = "link"
+}
+export declare const VideoType: {
+    readonly YOUTUBE: "youtube";
+    readonly VIDEO: "video";
+};
+type VideoType = (typeof VideoType)[keyof typeof VideoType];
+export declare const ButtonColor: {
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+};
+export type ButtonColorType = (typeof ButtonColor)[keyof typeof ButtonColor];
+export declare const TextColor: {
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+};
+type TextColorType = (typeof TextColor)[keyof typeof TextColor];
+export interface IContent {
+    /** Заголовок */
+    title: string;
+    /** Текст-описание */
+    description: string;
+    /** Текст кнопки */
+    buttonTitle?: string;
+    /** Ссылка на кнопке */
+    buttonHref?: string;
+    /** Target свойство кнопки */
+    buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
+    /** Добавляет атрибут rel для тега <a> компонента Button */
+    buttonRel?: string;
+    /** Цвет кнопки */
+    buttonColor?: ButtonColorType;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Обработчик клика по ссылке */
+    onLinkClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+    /** Цвет текста */
+    textColor?: TextColorType;
+    /** Цвет текста на мобильном разрешении */
+    textColorMobile?: TextColorType;
+    /** Текст ссылки */
+    linkTitle?: string;
+    /** Адрес ссылки */
+    linkUrl?: string;
+    /** Target свойство ссылки */
+    linkTarget?: '_self' | '_blank' | '_parent' | '_top';
+    /** Добавляет атрибут download для тега <a> компонента TextLink */
+    linkDownload?: boolean;
+    /** Добавляет атрибут rel для тега <a> компонента TextLink */
+    linkRel?: string;
+    /** Строка со стоимостью услуги */
+    cost?: string;
+}
+export interface IVideoBannerProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        breadcrumbs?: Record<string, string>;
+        breadcrumbsLink?: Record<string, string>;
+        button?: Record<string, string>;
+        link?: Record<string, string>;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+        breadcrumbs?: string;
+        video?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Данные для блока с контентом */
+    content?: IContent;
+    /** Источник видео. */
+    videoSrc?: string;
+    /** Тип видео */
+    videoType?: VideoType;
+    /** Разрешить проигрывать видео на мобильном разрешении */
+    videoMobile?: boolean;
+    /** Наличие звука в видео */
+    isMuted?: boolean;
+    /** Изображение для мобильного разрешения */
+    imageMobile: string;
+    /** Изображение для планшетного разрешения */
+    imageTablet: string;
+    /** Изображение для компьютерного разрешения */
+    imageDesktop?: string;
+    /** Изображение для большого компьютерного разрешения */
+    imageDesktopWide?: string;
+    /** Значение тега alt для изображения */
+    imageAlt?: string;
+    /** Хлебные крошки */
+    breadcrumbs?: BreadCrumbsItemsType;
+    /** Включить микроразметку хлебных крошек */
+    hasBreadcrumbsMicrodata?: boolean;
+    /** Включить тень в нижней части компонента */
+    bottomShadow?: boolean;
+}
+declare const VideoBanner: React.FC<IVideoBannerProps>;
+export default VideoBanner;

package/dist/lib/components/VideoBanner/VideoBanner.js

@@ -0,0 +1,253 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.testIdPrefix = exports["default"] = exports.VideoType = exports.TextColor = exports.ClassName = exports.ButtonColor = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.string.link.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs/Breadcrumbs"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var testIdPrefix = exports.testIdPrefix = 'VideoBanner';
+var cn = (0, _uiHelpers.cnCreate)('mfui-video-banner');
+var ClassName;
+(function (ClassName) {
+  ClassName["BUTTON"] = "button";
+  ClassName["LINK"] = "link";
+})(ClassName || (exports.ClassName = ClassName = {}));
+var typographyConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(_uiCore.Header, {
+        className: cn('value'),
+        as: "h3",
+        color: "inherit"
+      }, children);
+    }
+  }
+};
+var VideoType = exports.VideoType = {
+  YOUTUBE: 'youtube',
+  VIDEO: 'video'
+};
+var ButtonColor = exports.ButtonColor = {
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+var TextColor = exports.TextColor = {
+  BLACK: 'black',
+  WHITE: 'white'
+};
+var VideoBanner = function VideoBanner(_ref2) {
+  var dataAttrs = _ref2.dataAttrs,
+    className = _ref2.className,
+    _ref2$classes = _ref2.classes,
+    classes = _ref2$classes === void 0 ? {} : _ref2$classes,
+    rootRef = _ref2.rootRef,
+    videoSrc = _ref2.videoSrc,
+    videoType = _ref2.videoType,
+    imageMobile = _ref2.imageMobile,
+    imageTablet = _ref2.imageTablet,
+    _ref2$imageDesktop = _ref2.imageDesktop,
+    imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
+    _ref2$imageDesktopWid = _ref2.imageDesktopWide,
+    imageDesktopWide = _ref2$imageDesktopWid === void 0 ? '' : _ref2$imageDesktopWid,
+    imageAlt = _ref2.imageAlt,
+    content = _ref2.content,
+    _ref2$isMuted = _ref2.isMuted,
+    isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
+    breadcrumbs = _ref2.breadcrumbs,
+    _ref2$videoMobile = _ref2.videoMobile,
+    videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile,
+    _ref2$hasBreadcrumbsM = _ref2.hasBreadcrumbsMicrodata,
+    hasBreadcrumbsMicrodata = _ref2$hasBreadcrumbsM === void 0 ? false : _ref2$hasBreadcrumbsM,
+    _ref2$bottomShadow = _ref2.bottomShadow,
+    bottomShadow = _ref2$bottomShadow === void 0 ? false : _ref2$bottomShadow;
+  var _React$useState = React.useState(true),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    isMobile = _React$useState2[0],
+    setIsMobile = _React$useState2[1];
+  var isVideoData = !!videoSrc && !!videoType;
+  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
+  var renderContent = React.useCallback(function (_ref3) {
+    var title = _ref3.title,
+      description = _ref3.description,
+      buttonTitle = _ref3.buttonTitle,
+      buttonHref = _ref3.buttonHref,
+      buttonTarget = _ref3.buttonTarget,
+      buttonDownload = _ref3.buttonDownload,
+      _ref3$buttonColor = _ref3.buttonColor,
+      buttonColor = _ref3$buttonColor === void 0 ? ButtonColor.GREEN : _ref3$buttonColor,
+      buttonRel = _ref3.buttonRel,
+      onButtonClick = _ref3.onButtonClick,
+      onLinkClick = _ref3.onLinkClick,
+      _ref3$textColor = _ref3.textColor,
+      textColor = _ref3$textColor === void 0 ? TextColor.BLACK : _ref3$textColor,
+      textColorMobile = _ref3.textColorMobile,
+      linkTitle = _ref3.linkTitle,
+      linkUrl = _ref3.linkUrl,
+      linkTarget = _ref3.linkTarget,
+      linkDownload = _ref3.linkDownload,
+      linkRel = _ref3.linkRel,
+      cost = _ref3.cost;
+    return /*#__PURE__*/React.createElement(_uiCore.Grid, {
+      className: cn('grid'),
+      guttersLeft: "medium"
+    }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+      mobile: "12",
+      tablet: "7",
+      desktop: "7",
+      wide: "6"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('content', {
+        'text-color': textColor,
+        'text-color-mobile': textColorMobile
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
+    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+      className: cn('title'),
+      as: "h1",
+      color: "inherit"
+    }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
+      className: cn('text')
+    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+      as: "h5",
+      color: "inherit",
+      className: cn('description')
+    }, (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig)), cost && /*#__PURE__*/React.createElement("div", {
+      className: cn('cost')
+    }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
+      className: cn('btns-wrapper')
+    }, buttonTitle && /*#__PURE__*/React.createElement(_uiCore.Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      className: cn(ClassName.BUTTON, [classes.button]),
+      theme: buttonColor,
+      href: buttonHref,
+      target: buttonTarget,
+      onClick: onButtonClick,
+      download: buttonDownload,
+      rel: buttonRel
+    }, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(_uiCore.TextLink, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+      },
+      className: cn(ClassName.LINK, [classes.link]),
+      href: linkUrl,
+      download: linkDownload,
+      target: linkTarget,
+      onClick: onLinkClick,
+      rel: linkRel
+    }, linkTitle)))));
+  }, [classes.button, classes.link, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link]);
+  var renderVideo = React.useCallback(function () {
+    switch (videoType) {
+      case VideoType.YOUTUBE:
+        {
+          var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
+          var autoplay = '&autoplay=1';
+          var mute = "&mute=".concat(isMuted ? 1 : 0);
+          var loop = '&loop=1';
+          var rel = '&rel=0';
+          var controls = '&controls=0';
+          var info = '&showinfo=0e';
+          var policy = '&iv_load_policy=3';
+          var playlist = "&playlist=".concat(videoSrc);
+          var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(info).concat(policy).concat(playlist);
+          return /*#__PURE__*/React.createElement("iframe", {
+            title: "iframe",
+            className: cn('video'),
+            src: src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          });
+        }
+      case VideoType.VIDEO:
+        {
+          return /*#__PURE__*/(
+            // eslint-disable-next-line jsx-a11y/media-has-caption
+            React.createElement("video", {
+              className: cn('video', [classes.video]),
+              autoPlay: true,
+              loop: true,
+              muted: isMuted,
+              "data-testid": "".concat(testIdPrefix, "-video")
+            }, /*#__PURE__*/React.createElement("source", {
+              src: videoSrc,
+              type: "video/mp4"
+            }))
+          );
+        }
+      default:
+        {
+          return null;
+        }
+    }
+  }, [videoType, videoSrc, isMuted, classes.video]);
+  React.useEffect(function () {
+    var resizeHandler = function resizeHandler() {
+      setIsMobile(window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START);
+    };
+    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
+    resizeHandler();
+    window.addEventListener('resize', resizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, [setIsMobile]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    ref: rootRef
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'bottom-shadow': bottomShadow
+    }, [className, classes.root])
+  }), /*#__PURE__*/React.createElement(_uiCore.ContentArea, null, /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+    disabledOnMobile: true,
+    hasMicrodata: hasBreadcrumbsMicrodata,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
+      link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
+    },
+    className: cn('breadcrumbs'),
+    items: breadcrumbs,
+    color: content === null || content === void 0 ? void 0 : content.textColor,
+    classes: {
+      item: classes.breadcrumbs
+    }
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", {
+    "data-testid": "".concat(testIdPrefix, "-picture")
+  }, /*#__PURE__*/React.createElement("source", {
+    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
+    srcSet: imageDesktopWide
+  }), /*#__PURE__*/React.createElement("source", {
+    media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
+    srcSet: imageDesktop
+  }), /*#__PURE__*/React.createElement("source", {
+    media: "(min-width: ".concat(_uiHelpers.breakpoints.MOBILE_BIG_START, "px)"),
+    srcSet: imageTablet
+  }), /*#__PURE__*/React.createElement("img", {
+    className: cn('background-image'),
+    src: imageMobile,
+    alt: imageAlt
+  })))));
+};
+var _default = exports["default"] = VideoBanner;

package/dist/lib/components/VideoBlock/VideoBlock.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-video-block{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-video-block,.mfui-video-block__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-video-block__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}@media screen and (max-width:767px){.mfui-video-block__content{margin-top:24px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-block__content{margin-top:32px}}@media screen and (min-width:1024px){.mfui-video-block__content{height:100%;margin-right:20px;padding-right:20px}.mfui-video-block__content_position-right{margin:0 0 0 20px;padding:0 0 0 20px}}.mfui-video-block__header{margin-bottom:24px}@media screen and (max-width:1023px){.mfui-video-block__header{margin-bottom:16px}}.mfui-video-block__description{font-size:15px;font-weight:400;line-height:24px}.mfui-video-block__button{-ms-flex-item-align:start;align-self:flex-start;margin-top:32px;max-width:100%}@media screen and (max-width:767px){.mfui-video-block__button{-ms-flex-item-align:center;align-self:center}}.mfui-video-block__video{-o-object-fit:contain;object-fit:contain;width:100%}.mfui-video-block__video_fix-background{-webkit-filter:brightness(108.5%);filter:brightness(108.5%)}.mfui-video-block__rutube,.mfui-video-block__vk,.mfui-video-block__youtube{padding-bottom:56.25%;position:relative}.mfui-video-block__iframe{left:0;position:absolute;top:0}.mfui-video-block__grid{width:100%}

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import './VideoBlock.scss';
+export interface IContent {
+    /** Заголовок */
+    title: string;
+    /** Текст-описание */
+    description: string | React.ReactNode[] | React.ReactNode;
+    /** Текст кнопки */
+    buttonTitle?: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
+    /** Добавляет атрибут rel для тега <a> компонента Button */
+    buttonRel?: string;
+    /** Ссылка на кнопке */
+    href?: string;
+    /** Обработчик клика по кнопке */
+    onButtonClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+export declare const VideoTypes: {
+    readonly YOUTUBE: "youtube";
+    readonly RUTUBE: "rutube";
+    readonly VK: "vk";
+    readonly VIDEO: "video";
+};
+type VideoType = (typeof VideoTypes)[keyof typeof VideoTypes];
+export interface IVideoBlockProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        description?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Данные для блока с контентом */
+    content?: IContent;
+    /** Тип видео */
+    videoType?: VideoType;
+    /** Источник видео. Если видео с youtube или rutube, то необходимо указать id. Для видео из VK необходимо указать полный id вместе с _ (например: 22822305_456241864) */
+    videoSrc: string;
+    /** Наличие звука в видео */
+    isMuted?: boolean;
+    /** Автоматическое проигрывание видео */
+    isAutoplay?: boolean;
+    /** Ссылка на изображение для превью к HTML5 видео */
+    poster?: string;
+    /** Расположение контента справа от видео. Только для десктопа */
+    contentPositionRight?: boolean;
+    /** Воспроизводит видео на iOS устройствах без перехода в полноэкранный режим */
+    playsinline?: boolean;
+    /** Фикс для белого фона */
+    fixWhiteVideoBackground?: boolean;
+}
+export declare const testIdPrefix = "VideoBlock";
+declare const VideoBlock: React.FC<IVideoBlockProps>;
+export default VideoBlock;