@megafon/ui-shared 6.0.0-beta.3 → 6.0.0

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

@@ -1,37 +1,62 @@
 "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); }
+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.testIdPrefix = exports["default"] = exports.VideoType = exports.TextColor = exports.ClassName = exports.ButtonColor = void 0;
+exports["default"] = exports.TextColor = exports.ButtonColor = exports.VideoType = exports.ClassName = exports.testIdPrefix = 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"));
+
+require("core-js/modules/es.array.concat.js");
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireDefault(require("react"));
+
 var _uiCore = require("@megafon/ui-core");
+
 var _uiHelpers = require("@megafon/ui-helpers");
+
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
 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 && Object.prototype.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 _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 testIdPrefix = exports.testIdPrefix = 'VideoBanner';
+
+var testIdPrefix = 'VideoBanner';
+exports.testIdPrefix = testIdPrefix;
 var cn = (0, _uiHelpers.cnCreate)('mfui-video-banner');
 var ClassName;
+exports.ClassName = 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, {
+      return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
         className: cn('value'),
         as: "h3",
         color: "inherit"
@@ -39,99 +64,106 @@ var typographyConfig = {
     }
   }
 };
-var VideoType = exports.VideoType = {
+var VideoType = {
   YOUTUBE: 'youtube',
   VIDEO: 'video'
 };
-var ButtonColor = exports.ButtonColor = {
+exports.VideoType = VideoType;
+var ButtonColor = {
   GREEN: 'green',
   PURPLE: 'purple'
 };
-var TextColor = exports.TextColor = {
+exports.ButtonColor = ButtonColor;
+var TextColor = {
   BLACK: 'black',
   WHITE: 'white'
 };
+exports.TextColor = TextColor;
+
 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];
+      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["default"].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 renderContent = _react["default"].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, {
+        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["default"].createElement(_uiCore.Grid, {
       className: cn('grid'),
       guttersLeft: "medium"
-    }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
       mobile: "12",
       tablet: "7",
       desktop: "7",
       wide: "6"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('content', {
         'text-color': textColor,
         'text-color-mobile': textColorMobile
       }),
       "data-testid": "".concat(testIdPrefix, "-content")
-    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
       className: cn('title'),
       as: "h1",
       color: "inherit"
-    }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
+    }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('text')
-    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
       as: "h5",
       color: "inherit",
       className: cn('description')
-    }, (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig)), cost && /*#__PURE__*/React.createElement("div", {
+    }, (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig)), cost && /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('cost')
-    }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
+    }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('btns-wrapper')
-    }, buttonTitle && /*#__PURE__*/React.createElement(_uiCore.Button, {
+    }, buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
       },
@@ -142,7 +174,7 @@ var VideoBanner = function VideoBanner(_ref2) {
       onClick: onButtonClick,
       download: buttonDownload,
       rel: buttonRel
-    }, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(_uiCore.TextLink, {
+    }, buttonTitle), linkTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
       },
@@ -154,7 +186,8 @@ var VideoBanner = function VideoBanner(_ref2) {
       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 () {
+
+  var renderVideo = _react["default"].useCallback(function () {
     switch (videoType) {
       case VideoType.YOUTUBE:
         {
@@ -168,7 +201,7 @@ var VideoBanner = function VideoBanner(_ref2) {
           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", {
+          return /*#__PURE__*/_react["default"].createElement("iframe", {
             title: "iframe",
             className: cn('video'),
             src: src,
@@ -179,32 +212,37 @@ var VideoBanner = function VideoBanner(_ref2) {
             "data-testid": "".concat(testIdPrefix, "-iframe-video")
           });
         }
+
       case VideoType.VIDEO:
         {
-          return /*#__PURE__*/(
+          return (
+            /*#__PURE__*/
             // eslint-disable-next-line jsx-a11y/media-has-caption
-            React.createElement("video", {
+            _react["default"].createElement("video", {
               className: cn('video', [classes.video]),
               autoPlay: true,
               loop: true,
               muted: isMuted,
               "data-testid": "".concat(testIdPrefix, "-video")
-            }, /*#__PURE__*/React.createElement("source", {
+            }, /*#__PURE__*/_react["default"].createElement("source", {
               src: videoSrc,
               type: "video/mp4"
             }))
           );
         }
+
       default:
         {
           return null;
         }
     }
   }, [videoType, videoSrc, isMuted, classes.video]);
-  React.useEffect(function () {
+
+  _react["default"].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);
@@ -212,15 +250,16 @@ var VideoBanner = function VideoBanner(_ref2) {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
   }, [setIsMobile]);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+
+  return /*#__PURE__*/_react["default"].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", {
+  }), /*#__PURE__*/_react["default"].createElement(_uiCore.ContentArea, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('wrapper')
-  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {
     hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
@@ -232,21 +271,75 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", {
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("picture", {
     "data-testid": "".concat(testIdPrefix, "-picture")
-  }, /*#__PURE__*/React.createElement("source", {
+  }, /*#__PURE__*/_react["default"].createElement("source", {
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
     srcSet: imageDesktopWide
-  }), /*#__PURE__*/React.createElement("source", {
+  }), /*#__PURE__*/_react["default"].createElement("source", {
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
     srcSet: imageDesktop
-  }), /*#__PURE__*/React.createElement("source", {
+  }), /*#__PURE__*/_react["default"].createElement("source", {
     media: "(min-width: ".concat(_uiHelpers.breakpoints.MOBILE_BIG_START, "px)"),
     srcSet: imageTablet
-  }), /*#__PURE__*/React.createElement("img", {
+  }), /*#__PURE__*/_react["default"].createElement("img", {
     className: cn('background-image'),
     src: imageMobile,
     alt: imageAlt
   })))));
 };
-var _default = exports["default"] = VideoBanner;
+
+VideoBanner.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    breadcrumbs: PropTypes.objectOf(PropTypes.string.isRequired),
+    breadcrumbsLink: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string,
+    breadcrumbs: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  videoSrc: PropTypes.string,
+  videoType: PropTypes.oneOf(Object.values(VideoType)),
+  videoMobile: PropTypes.bool,
+  content: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    buttonTitle: PropTypes.string,
+    buttonHref: PropTypes.string,
+    buttonDownload: PropTypes.bool,
+    buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
+    buttonRel: PropTypes.string,
+    onButtonClick: PropTypes.func,
+    onLinkClick: PropTypes.func,
+    textColor: PropTypes.oneOf(Object.values(TextColor)),
+    textColorMobile: PropTypes.oneOf(Object.values(TextColor)),
+    linkTitle: PropTypes.string,
+    linkUrl: PropTypes.string,
+    linkDownload: PropTypes.bool,
+    linkRel: PropTypes.string,
+    cost: PropTypes.string
+  }),
+  isMuted: PropTypes.bool,
+  imageMobile: PropTypes.string.isRequired,
+  imageTablet: PropTypes.string.isRequired,
+  imageDesktop: PropTypes.string,
+  imageDesktopWide: PropTypes.string,
+  imageAlt: PropTypes.string,
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string
+  }).isRequired),
+  hasBreadcrumbsMicrodata: PropTypes.bool,
+  bottomShadow: PropTypes.bool
+};
+var _default = VideoBanner;
+exports["default"] = _default;

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

@@ -1 +1,106 @@
-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__youtube{padding-bottom:56.25%;position:relative}.mfui-video-block__iframe{left:0;position:absolute;top:0}.mfui-video-block__grid{width:100%}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-video-block {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-video-block__content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -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;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .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;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-video-block__button {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  max-width: 100%;
+  margin-top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-block__button {
+    -ms-flex-item-align: center;
+        align-self: center;
+  }
+}
+.mfui-video-block__video {
+  width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+.mfui-video-block__video_fix-background {
+  -webkit-filter: brightness(108.5%);
+          filter: brightness(108.5%);
+}
+.mfui-video-block__youtube {
+  position: relative;
+  padding-bottom: 56.25%;
+}
+.mfui-video-block__iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.mfui-video-block__grid {
+  width: 100%;
+}
+.mfui-video-block__content-column_position-right {
+  -webkit-box-ordinal-group: 3;
+      -ms-flex-order: 2;
+          order: 2;
+}
+.mfui-video-block__video-column_position-left {
+  -webkit-box-ordinal-group: 2;
+      -ms-flex-order: 1;
+          order: 1;
+}

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import './VideoBlock.scss';
+import React, { Ref } from 'react';
+import './VideoBlock.less';
 export interface IContent {
     /** Заголовок */
     title: string;
@@ -20,7 +20,7 @@ export declare const VideoTypes: {
     readonly YOUTUBE: "youtube";
     readonly VIDEO: "video";
 };
-type VideoType = (typeof VideoTypes)[keyof typeof VideoTypes];
+declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
 export interface IVideoBlockProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -36,7 +36,7 @@ export interface IVideoBlockProps {
         description?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Данные для блока с контентом */
     content?: IContent;
     /** Тип видео */