@megafon/ui-shared 2.0.0-beta.99 → 2.0.0

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

@@ -2,18 +2,10 @@
 
 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); }
 
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.symbol.description");
-
-require("core-js/modules/es.array.concat");
-
-require("core-js/modules/es.object.values");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.VideoTypes = void 0;
+exports["default"] = exports.TextColor = exports.ButtonColor = exports.VideoType = exports.ClassName = void 0;
 
 require("core-js/modules/es.symbol");
 
@@ -23,15 +15,25 @@ require("core-js/modules/es.array.concat");
 
 require("core-js/modules/es.object.values");
 
+require("core-js/modules/es.string.link");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
 
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
-var _uiCore = require("@megafon/ui-core");
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
+var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs/Breadcrumbs"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -39,54 +41,136 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var VideoTypes = {
+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["default"].createElement(_uiCore.Header, {
+        className: cn('value'),
+        as: "h3",
+        color: "inherit"
+      }, children);
+    }
+  }
+};
+var VideoType = {
   YOUTUBE: 'youtube',
   VIDEO: 'video'
 };
-exports.VideoTypes = VideoTypes;
-var cn = (0, _uiCore.cnCreate)('mfui-beta-video-banner');
-
-var VideoBanner = function VideoBanner(_ref) {
-  var videoSrc = _ref.videoSrc,
-      videoType = _ref.videoType,
-      image = _ref.image,
-      content = _ref.content,
-      _ref$isMuted = _ref.isMuted,
-      isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted;
-
-  var _React$useState = React.useState(true),
+exports.VideoType = VideoType;
+var ButtonColor = {
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+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,
+      content = _ref2.content,
+      _ref2$isMuted = _ref2.isMuted,
+      isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
+      breadcrumbs = _ref2.breadcrumbs;
+
+  var _React$useState = _react["default"].useState(true),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
       isMobile = _React$useState2[0],
       setIsMobile = _React$useState2[1];
 
-  var isVideo = !!videoSrc && !!videoType;
-  var isRenderVideo = !isMobile && isVideo;
-  var renderContent = React.useCallback(function (_ref2) {
-    var title = _ref2.title,
-        description = _ref2.description,
-        buttonTitle = _ref2.buttonTitle,
-        href = _ref2.href,
-        onButtonClick = _ref2.onButtonClick;
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('content')
-    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+  var _React$useState3 = _react["default"].useState(imageMobile),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      imageSrc = _React$useState4[0],
+      setImageSrc = _React$useState4[1];
+
+  var isVideoData = !!videoSrc && !!videoType;
+  var isRenderVideo = !isMobile && isVideoData;
+
+  var renderContent = _react["default"].useCallback(function (_ref3) {
+    var title = _ref3.title,
+        description = _ref3.description,
+        buttonTitle = _ref3.buttonTitle,
+        buttonHref = _ref3.buttonHref,
+        buttonDownload = _ref3.buttonDownload,
+        _ref3$buttonColor = _ref3.buttonColor,
+        buttonColor = _ref3$buttonColor === void 0 ? ButtonColor.GREEN : _ref3$buttonColor,
+        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,
+        linkDownload = _ref3.linkDownload,
+        cost = _ref3.cost;
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
+      className: cn('grid'),
+      guttersLeft: "medium"
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
+      mobile: "12",
+      tablet: "7",
+      desktop: "7",
+      wide: "6"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('content', {
+        'text-color': textColor,
+        'text-color-mobile': textColorMobile
+      })
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
       className: cn('title'),
-      color: "white",
-      as: "h1"
-    }, title), /*#__PURE__*/React.createElement("div", {
+      as: "h1",
+      color: "inherit"
+    }, title), /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('text')
-    }, /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-      color: "clearWhite",
-      hasMargin: false
-    }, description)), /*#__PURE__*/React.createElement(_uiCore.Button, {
-      className: cn('button'),
-      href: href,
-      onClick: onButtonClick
-    }, buttonTitle));
-  }, []);
-  var renderVideo = React.useCallback(function () {
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+      as: "h5",
+      color: "inherit",
+      className: cn('description')
+    }, description), cost && /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('cost')
+    }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('btns-wrapper')
+    }, buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+      className: cn(ClassName.BUTTON, [classes.button]),
+      theme: buttonColor,
+      href: buttonHref,
+      onClick: onButtonClick,
+      download: buttonDownload
+    }, buttonTitle), linkTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+      className: cn(ClassName.LINK, [classes.link]),
+      href: linkUrl,
+      download: linkDownload,
+      onClick: onLinkClick
+    }, linkTitle)))));
+  }, [classes.button, classes.link]);
+
+  var renderVideo = _react["default"].useCallback(function () {
     switch (videoType) {
-      case VideoTypes.YOUTUBE:
+      case VideoType.YOUTUBE:
         {
           var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
           var autoplay = '&autoplay=1';
@@ -98,7 +182,8 @@ var VideoBanner = function VideoBanner(_ref) {
           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,
             width: "100%",
@@ -108,17 +193,21 @@ var VideoBanner = function VideoBanner(_ref) {
           });
         }
 
-      case VideoTypes.VIDEO:
+      case VideoType.VIDEO:
         {
-          return /*#__PURE__*/React.createElement("video", {
-            className: cn('video'),
-            autoPlay: true,
-            loop: true,
-            muted: isMuted
-          }, /*#__PURE__*/React.createElement("source", {
-            src: videoSrc,
-            type: "video/mp4"
-          }));
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line jsx-a11y/media-has-caption
+            _react["default"].createElement("video", {
+              className: cn('video'),
+              autoPlay: true,
+              loop: true,
+              muted: isMuted
+            }, /*#__PURE__*/_react["default"].createElement("source", {
+              src: videoSrc,
+              type: "video/mp4"
+            }))
+          );
         }
 
       default:
@@ -127,51 +216,98 @@ var VideoBanner = function VideoBanner(_ref) {
         }
     }
   }, [videoType, videoSrc, isMuted]);
-  var renderImage = React.useCallback(function (_ref3) {
-    var mobile = _ref3.mobile,
-        desktop = _ref3.desktop;
-    var src = desktop && !isMobile ? desktop : mobile;
-    return /*#__PURE__*/React.createElement("img", {
-      src: src,
-      className: cn('background-image', {
-        'mobile': !desktop
-      })
-    });
-  }, [isMobile]);
-  React.useEffect(function () {
+
+  _react["default"].useEffect(function () {
+    var getImageSrc = function getImageSrc() {
+      var windowWidth = window.innerWidth;
+
+      switch (true) {
+        case windowWidth >= _uiHelpers.breakpoints.DESKTOP_MIDDLE_START:
+          return imageDesktopWide;
+
+        case windowWidth >= _uiHelpers.breakpoints.DESKTOP_SMALL_START && windowWidth <= _uiHelpers.breakpoints.DESKTOP_SMALL_END:
+          return imageDesktop;
+
+        case windowWidth >= _uiHelpers.breakpoints.MOBILE_BIG_START && windowWidth <= _uiHelpers.breakpoints.MOBILE_BIG_END:
+          return imageTablet;
+
+        default:
+          return imageMobile;
+      }
+    };
+
     var resizeHandler = function resizeHandler() {
-      return window.innerWidth <= _uiCore.breakpoints.mobileBigEnd ? setIsMobile(true) : setIsMobile(false);
+      setIsMobile(window.innerWidth < _uiHelpers.breakpoints.DESKTOP_SMALL_START);
+      setImageSrc(getImageSrc());
     };
 
-    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _uiCore.throttleTime.resize);
+    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
     resizeHandler();
     window.addEventListener('resize', resizeHandlerThrottled);
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn()
-  }, /*#__PURE__*/React.createElement("div", {
+  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/_react["default"].createElement(_uiCore.ContentArea, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('wrapper')
-  }, renderImage(image), content && renderContent(content), isRenderVideo && renderVideo()));
+  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {
+    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["default"].createElement("div", {
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    },
+    className: cn('background-image')
+  }))));
 };
 
 VideoBanner.propTypes = {
+  dataAttrs: 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(VideoTypes)),
+  videoType: PropTypes.oneOf(Object.values(VideoType)),
   content: PropTypes.shape({
     title: PropTypes.string.isRequired,
     description: PropTypes.string.isRequired,
-    buttonTitle: PropTypes.string.isRequired,
-    href: PropTypes.string,
-    onButtonClick: PropTypes.func
+    buttonTitle: PropTypes.string,
+    buttonHref: PropTypes.string,
+    buttonDownload: PropTypes.bool,
+    buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
+    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,
+    cost: PropTypes.string
   }),
-  image: PropTypes.shape({
-    mobile: PropTypes.string.isRequired,
-    desktop: PropTypes.string
-  }).isRequired,
-  isMuted: PropTypes.bool
+  isMuted: PropTypes.bool,
+  imageMobile: PropTypes.string.isRequired,
+  imageTablet: PropTypes.string.isRequired,
+  imageDesktop: PropTypes.string,
+  imageDesktopWide: PropTypes.string,
+  breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string
+  }).isRequired)
 };
 var _default = VideoBanner;
 exports["default"] = _default;

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

@@ -5,7 +5,7 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-video-block {
+.mfui-video-block {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -13,7 +13,7 @@ h5 {
       -ms-flex-align: center;
           align-items: center;
 }
-.mfui-beta-video-block__content {
+.mfui-video-block__content {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -21,103 +21,107 @@ h5 {
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
-  height: 100%;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  height: 100%;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-video-block__content {
+  .mfui-video-block__content {
     margin-top: 24px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-video-block__content {
+  .mfui-video-block__content {
     margin-top: 32px;
   }
 }
 @media screen and (min-width: 768px) {
-  .mfui-beta-video-block__content {
-    padding-right: 20px;
+  .mfui-video-block__content {
     margin-right: 20px;
+    padding-right: 20px;
   }
 }
-.mfui-beta-video-block__header {
+.mfui-video-block__header {
   margin-bottom: 24px;
 }
 @media screen and (max-width: 1023px) {
-  .mfui-beta-video-block__header {
+  .mfui-video-block__header {
     margin-bottom: 16px;
   }
 }
-.mfui-beta-video-block__text:not(:first-child) {
-  margin-top: 24px;
+.mfui-video-block__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
 }
-.mfui-beta-video-block__button {
+.mfui-video-block__button {
+  -ms-flex-item-align: start;
+      align-self: flex-start;
+  max-width: 100%;
   margin-top: 32px;
-  width: 171px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-video-block__button {
+  .mfui-video-block__button {
     -ms-flex-item-align: center;
         align-self: center;
   }
 }
-.mfui-beta-video-block__video {
+.mfui-video-block__video {
   width: 100%;
   height: 100%;
   -o-object-fit: contain;
      object-fit: contain;
 }
-.mfui-beta-video-block__video-wrapper {
+.mfui-video-block__video-wrapper {
   height: 674px;
   overflow: hidden;
 }
 @media screen and (min-width: 1440px) and (max-width: 1599px) {
-  .mfui-beta-video-block__video-wrapper {
+  .mfui-video-block__video-wrapper {
     height: 600px;
   }
 }
 @media screen and (min-width: 1280px) and (max-width: 1439px) {
-  .mfui-beta-video-block__video-wrapper {
+  .mfui-video-block__video-wrapper {
     height: 524px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-video-block__video-wrapper {
+  .mfui-video-block__video-wrapper {
     height: 505px;
   }
 }
-.mfui-beta-video-block__video-wrapper_with-content {
+.mfui-video-block__video-wrapper_with-content {
   height: 468px;
 }
 @media screen and (min-width: 1440px) and (max-width: 1599px) {
-  .mfui-beta-video-block__video-wrapper_with-content {
+  .mfui-video-block__video-wrapper_with-content {
     height: 415px;
   }
 }
 @media screen and (min-width: 1280px) and (max-width: 1439px) {
-  .mfui-beta-video-block__video-wrapper_with-content {
+  .mfui-video-block__video-wrapper_with-content {
     height: 363px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1279px) {
-  .mfui-beta-video-block__video-wrapper_with-content {
+  .mfui-video-block__video-wrapper_with-content {
     height: 328px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-video-block__video-wrapper,
-  .mfui-beta-video-block__video-wrapper_with-content {
+  .mfui-video-block__video-wrapper,
+  .mfui-video-block__video-wrapper_with-content {
     height: 379px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-video-block__video-wrapper,
-  .mfui-beta-video-block__video-wrapper_with-content {
+  .mfui-video-block__video-wrapper,
+  .mfui-video-block__video-wrapper_with-content {
     height: 162px;
   }
 }
-.mfui-beta-video-block__grid {
+.mfui-video-block__grid {
   width: 100%;
 }

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

@@ -1,12 +1,14 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import './VideoBlock.less';
 export interface IContent {
     /** Заголовок */
     title: string;
     /** Текст-описание */
-    description: string[];
+    description: string | React.ReactNode[] | React.ReactNode;
     /** Текст кнопки */
     buttonTitle: string;
+    /** Добавляет атрибут download для тега <a> компонента Button */
+    buttonDownload?: boolean;
     /** Ссылка на кнопке */
     href?: string;
     /** Обработчик клика по кнопке */
@@ -17,7 +19,21 @@ export declare const VideoTypes: {
     readonly VIDEO: "video";
 };
 declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
-export interface Props {
+export interface IVideoBlockProps {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        description?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
     /** Данные для блока с контентом */
     content?: IContent;
     /** Тип видео */
@@ -28,8 +44,6 @@ export interface Props {
     isMuted?: boolean;
     /** Автоматическое проигрывание видео */
     isAutoplay?: boolean;
-    /** Дополнительный класс корневого элемента */
-    className?: string;
 }
-declare const VideoBlock: React.FC<Props>;
+declare const VideoBlock: React.FC<IVideoBlockProps>;
 export default VideoBlock;