@megafon/ui-shared 6.6.0 → 6.8.0

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -21,6 +21,9 @@ h5 {
 .mfui-v6-breadcrumbs_color_white .mfui-v6-breadcrumbs__item:before {
   color: var(--stcWhite);
 }
+.mfui-v6-breadcrumbs_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-breadcrumbs__item {
   position: relative;
   margin-right: 10px;

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

@@ -16,6 +16,10 @@ export declare type Props = {
     color?: TextColorType;
     /** Включить микроразметку */
     hasMicrodata?: boolean;
+    /** Отключить на разрешении < 768 px */
+    disabledOnMobile?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         item?: string;

package/dist/es/components/Breadcrumbs/Breadcrumbs.js

@@ -5,6 +5,7 @@ import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
+import useResolutions from "../../hooks/useResolutions";
 import BreadcrumbsItem, { TextColor } from "./components/BreadcrumbsItem";
 import "./Breadcrumbs.css";
 
@@ -23,10 +24,23 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs,
       _ref$hasMicrodata = _ref.hasMicrodata,
-      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+      _ref$disabledOnMobile = _ref.disabledOnMobile,
+      disabledOnMobile = _ref$disabledOnMobile === void 0 ? false : _ref$disabledOnMobile,
+      _ref$hasMarginTop = _ref.hasMarginTop,
+      hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop;
+
+  var _useResolutions = useResolutions(),
+      isMobile = _useResolutions.isMobile;
+
+  if (isMobile && disabledOnMobile) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
-      color: color
+      color: color,
+      'margin-top': hasMarginTop
     }, className)
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
     itemScope: true,
@@ -79,6 +93,7 @@ Breadcrumbs.propTypes = {
     href: PropTypes.string
   }).isRequired)]).isRequired,
   color: PropTypes.oneOf(Object.values(TextColor)),
-  hasMicrodata: PropTypes.bool
+  hasMicrodata: PropTypes.bool,
+  disabledOnMobile: PropTypes.bool
 };
 export default Breadcrumbs;

package/dist/es/components/ImageBanner/ImageBanner.css

@@ -193,6 +193,9 @@ h5 {
     right: 24px;
   }
 }
+.mfui-v6-image-banner_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-image-banner_radius_rounded {
   border-radius: 24px;
 }

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

@@ -84,6 +84,8 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -91,6 +91,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       isImageFullWidth = _ref2.isImageFullWidth,
       badges = _ref2.badges,
       adBlock = _ref2.adBlock,
+      _ref2$hasMarginTop = _ref2.hasMarginTop,
+      hasMarginTop = _ref2$hasMarginTop === void 0 ? false : _ref2$hasMarginTop,
       _ref2$children = _ref2.children,
       children = _ref2$children === void 0 ? [] : _ref2$children;
 
@@ -160,7 +162,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      radius: radius
+      radius: radius,
+      'margin-top': hasMarginTop
     }, [className, classes.root]),
     ref: rootRef
   }), renderContent, hasImage && renderImage);
@@ -205,6 +208,7 @@ ImageBanner.propTypes = {
   autoHeight: PropTypes.bool,
   isImageFullWidth: PropTypes.bool,
   badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
-  adBlock: PropTypes.element
+  adBlock: PropTypes.element,
+  hasMarginTop: PropTypes.bool
 };
 export default ImageBanner;

package/dist/es/components/PageTitle/PageTitle.css

@@ -9,14 +9,6 @@ h5 {
   display: inline-block;
   width: 100%;
 }
-.mfui-v6-page-title__breadcrumbs {
-  margin-top: 32px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-v6-page-title__breadcrumbs {
-    display: none;
-  }
-}
 .mfui-v6-page-title__title {
   margin-top: 110px;
 }

package/dist/es/components/PageTitle/PageTitle.js

@@ -52,6 +52,8 @@ var PageTitle = function PageTitle(_ref) {
     className: cn([className]),
     ref: rootRef
   }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    disabledOnMobile: true,
+    hasMarginTop: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     items: breadcrumbs,
     dataAttrs: {

package/dist/es/components/VideoBanner/VideoBanner.css

@@ -215,11 +215,6 @@ h5 {
   position: absolute;
   top: 32px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-v6-video-banner__breadcrumbs {
-    display: none;
-  }
-}
 .mfui-v6-video-banner__grid {
   width: 100%;
 }

package/dist/es/components/VideoBanner/VideoBanner.js

@@ -223,6 +223,7 @@ var VideoBanner = function VideoBanner(_ref2) {
   }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
   }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    disabledOnMobile: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,

package/dist/es/components/VideoBlock/VideoBlock.css

@@ -82,7 +82,9 @@ h5 {
   -webkit-filter: brightness(108.5%);
           filter: brightness(108.5%);
 }
-.mfui-v6-video-block__youtube {
+.mfui-v6-video-block__youtube,
+.mfui-v6-video-block__rutube,
+.mfui-v6-video-block__vk {
   position: relative;
   padding-bottom: 56.25%;
 }

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

@@ -18,6 +18,8 @@ export interface IContent {
 }
 export declare const VideoTypes: {
     readonly YOUTUBE: "youtube";
+    readonly RUTUBE: "rutube";
+    readonly VK: "vk";
     readonly VIDEO: "video";
 };
 declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
@@ -41,7 +43,7 @@ export interface IVideoBlockProps {
     content?: IContent;
     /** Тип видео */
     videoType?: VideoType;
-    /** Источник видео. Если видео с youtube, то необходимо указать id */
+    /** Источник видео. Если видео с youtube или rutube, то необходимо указать id. Для видео из VK необходимо указать полный id вместе с _ (например: 22822305_456241864) */
     videoSrc: string;
     /** Наличие звука в видео */
     isMuted?: boolean;

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.split.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.object.values.js";
@@ -10,6 +13,8 @@ import PropTypes from 'prop-types';
 import "./VideoBlock.css";
 export var VideoTypes = {
   YOUTUBE: 'youtube',
+  RUTUBE: 'rutube',
+  VK: 'vk',
   VIDEO: 'video'
 };
 export var testIdPrefix = 'VideoBlock';
@@ -36,6 +41,40 @@ var VideoBlock = function VideoBlock(_ref) {
       playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
       _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
       fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
+  var rutubeRef = React.useRef(null);
+
+  var autoPlayRutube = function autoPlayRutube() {
+    var current = rutubeRef.current;
+
+    if (current == null) {
+      return;
+    }
+
+    window.IntersectionObserver && new window.IntersectionObserver(function (entries, obs) {
+      var _a;
+
+      var _entries = _slicedToArray(entries, 1),
+          entry = _entries[0];
+
+      if (entry && entry.isIntersecting) {
+        (_a = current.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
+          type: 'player:play',
+          data: {}
+        }), '*');
+        obs.disconnect();
+      }
+    }, {
+      threshold: 0.5
+    }).observe(current);
+  };
+
+  React.useEffect(function () {
+    if (!isAutoplay || videoType !== VideoTypes.RUTUBE) {
+      return;
+    }
+
+    autoPlayRutube();
+  }, [isAutoplay, videoType]);
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -66,6 +105,54 @@ var VideoBlock = function VideoBlock(_ref) {
           }));
         }
 
+      case VideoTypes.RUTUBE:
+        {
+          var _src = "https://rutube.ru/play/embed/".concat(videoSrc, "?");
+
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('rutube')
+          }, /*#__PURE__*/React.createElement("iframe", {
+            className: cn('iframe'),
+            ref: rutubeRef,
+            src: _src,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
+
+      case VideoTypes.VK:
+        {
+          var _videoSrc$split = videoSrc.split('_'),
+              _videoSrc$split2 = _slicedToArray(_videoSrc$split, 2),
+              oid = _videoSrc$split2[0],
+              id = _videoSrc$split2[1];
+
+          var _url = "https://vk.com/video_ext.php?oid=-".concat(oid, "}&id=").concat(id, "&");
+
+          var _autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
+
+          var _src2 = "".concat(_url).concat(_autoplay);
+
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('vk')
+          }, /*#__PURE__*/React.createElement("iframe", {
+            className: cn('iframe'),
+            src: _src2,
+            width: "100%",
+            height: "100%",
+            frameBorder: "0",
+            allow: "autoplay",
+            title: "iframe",
+            allowFullScreen: true,
+            "data-testid": "".concat(testIdPrefix, "-iframe-video")
+          }));
+        }
+
       case VideoTypes.VIDEO:
         {
           return (

package/dist/lib/components/Breadcrumbs/Breadcrumbs.css

@@ -21,6 +21,9 @@ h5 {
 .mfui-v6-breadcrumbs_color_white .mfui-v6-breadcrumbs__item:before {
   color: var(--stcWhite);
 }
+.mfui-v6-breadcrumbs_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-breadcrumbs__item {
   position: relative;
   margin-right: 10px;

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

@@ -16,6 +16,10 @@ export declare type Props = {
     color?: TextColorType;
     /** Включить микроразметку */
     hasMicrodata?: boolean;
+    /** Отключить на разрешении < 768 px */
+    disabledOnMobile?: boolean;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         item?: string;

package/dist/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -21,6 +21,8 @@ var _uiHelpers = require("@megafon/ui-helpers");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _useResolutions2 = _interopRequireDefault(require("../../hooks/useResolutions"));
+
 var _BreadcrumbsItem = _interopRequireWildcard(require("./components/BreadcrumbsItem"));
 
 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); }
@@ -44,10 +46,23 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs,
       _ref$hasMicrodata = _ref.hasMicrodata,
-      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+      _ref$disabledOnMobile = _ref.disabledOnMobile,
+      disabledOnMobile = _ref$disabledOnMobile === void 0 ? false : _ref$disabledOnMobile,
+      _ref$hasMarginTop = _ref.hasMarginTop,
+      hasMarginTop = _ref$hasMarginTop === void 0 ? false : _ref$hasMarginTop;
+
+  var _useResolutions = (0, _useResolutions2["default"])(),
+      isMobile = _useResolutions.isMobile;
+
+  if (isMobile && disabledOnMobile) {
+    return null;
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn({
-      color: color
+      color: color,
+      'margin-top': hasMarginTop
     }, className)
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
     itemScope: true,
@@ -100,7 +115,8 @@ Breadcrumbs.propTypes = {
     href: _propTypes["default"].string
   }).isRequired)]).isRequired,
   color: _propTypes["default"].oneOf(Object.values(_BreadcrumbsItem.TextColor)),
-  hasMicrodata: _propTypes["default"].bool
+  hasMicrodata: _propTypes["default"].bool,
+  disabledOnMobile: _propTypes["default"].bool
 };
 var _default = Breadcrumbs;
 exports["default"] = _default;

package/dist/lib/components/ImageBanner/ImageBanner.css

@@ -193,6 +193,9 @@ h5 {
     right: 24px;
   }
 }
+.mfui-v6-image-banner_margin-top {
+  margin-top: 24px;
+}
 .mfui-v6-image-banner_radius_rounded {
   border-radius: 24px;
 }

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

@@ -84,6 +84,8 @@ export interface IImageBannerProps {
     badges?: JSX.Element[] | JSX.Element;
     /** Элемент блока с рекламой */
     adBlock?: JSX.Element | null;
+    /** Отступ сверху */
+    hasMarginTop?: boolean;
 }
 declare const ImageBanner: React.FC<IImageBannerProps>;
 export default ImageBanner;

package/dist/lib/components/ImageBanner/ImageBanner.js

@@ -119,6 +119,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       isImageFullWidth = _ref2.isImageFullWidth,
       badges = _ref2.badges,
       adBlock = _ref2.adBlock,
+      _ref2$hasMarginTop = _ref2.hasMarginTop,
+      hasMarginTop = _ref2$hasMarginTop === void 0 ? false : _ref2$hasMarginTop,
       _ref2$children = _ref2.children,
       children = _ref2$children === void 0 ? [] : _ref2$children;
 
@@ -194,7 +196,8 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
-      radius: radius
+      radius: radius,
+      'margin-top': hasMarginTop
     }, [className, classes.root]),
     ref: rootRef
   }), renderContent, hasImage && renderImage);
@@ -239,7 +242,8 @@ ImageBanner.propTypes = {
   autoHeight: PropTypes.bool,
   isImageFullWidth: PropTypes.bool,
   badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
-  adBlock: PropTypes.element
+  adBlock: PropTypes.element,
+  hasMarginTop: PropTypes.bool
 };
 var _default = ImageBanner;
 exports["default"] = _default;

package/dist/lib/components/PageTitle/PageTitle.css

@@ -9,14 +9,6 @@ h5 {
   display: inline-block;
   width: 100%;
 }
-.mfui-v6-page-title__breadcrumbs {
-  margin-top: 32px;
-}
-@media screen and (max-width: 767px) {
-  .mfui-v6-page-title__breadcrumbs {
-    display: none;
-  }
-}
 .mfui-v6-page-title__title {
   margin-top: 110px;
 }

package/dist/lib/components/PageTitle/PageTitle.js

@@ -72,6 +72,8 @@ var PageTitle = function PageTitle(_ref) {
     className: cn([className]),
     ref: rootRef
   }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+    disabledOnMobile: true,
+    hasMarginTop: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     items: breadcrumbs,
     dataAttrs: {

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

@@ -215,11 +215,6 @@ h5 {
   position: absolute;
   top: 32px;
 }
-@media screen and (max-width: 767px) {
-  .mfui-v6-video-banner__breadcrumbs {
-    display: none;
-  }
-}
 .mfui-v6-video-banner__grid {
   width: 100%;
 }

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

@@ -260,6 +260,7 @@ var VideoBanner = function VideoBanner(_ref2) {
   }), /*#__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["default"].createElement(_Breadcrumbs["default"], {
+    disabledOnMobile: true,
     hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,

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

@@ -82,7 +82,9 @@ h5 {
   -webkit-filter: brightness(108.5%);
           filter: brightness(108.5%);
 }
-.mfui-v6-video-block__youtube {
+.mfui-v6-video-block__youtube,
+.mfui-v6-video-block__rutube,
+.mfui-v6-video-block__vk {
   position: relative;
   padding-bottom: 56.25%;
 }

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

@@ -18,6 +18,8 @@ export interface IContent {
 }
 export declare const VideoTypes: {
     readonly YOUTUBE: "youtube";
+    readonly RUTUBE: "rutube";
+    readonly VK: "vk";
     readonly VIDEO: "video";
 };
 declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
@@ -41,7 +43,7 @@ export interface IVideoBlockProps {
     content?: IContent;
     /** Тип видео */
     videoType?: VideoType;
-    /** Источник видео. Если видео с youtube, то необходимо указать id */
+    /** Источник видео. Если видео с youtube или rutube, то необходимо указать id. Для видео из VK необходимо указать полный id вместе с _ (например: 22822305_456241864) */
     videoSrc: string;
     /** Наличие звука в видео */
     isMuted?: boolean;