@megafon/ui-shared 2.0.0-beta.97 → 2.0.1

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

@@ -2,59 +2,141 @@ import "core-js/modules/es.symbol";
 import "core-js/modules/es.symbol.description";
 import "core-js/modules/es.array.concat";
 import "core-js/modules/es.object.values";
+import "core-js/modules/es.string.link";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import React from 'react';
+import { Button, Header, ContentArea, TextLink, Grid, GridColumn } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
+import * as PropTypes from 'prop-types';
+import throttleTime from "../../constants/throttleTime";
+import Breadcrumbs from "../Breadcrumbs/Breadcrumbs";
 import "./VideoBanner.css";
-import { Button, cnCreate, Header, Paragraph, breakpoints, throttleTime } from '@megafon/ui-core';
-export var VideoTypes = {
+var cn = cnCreate('mfui-video-banner');
+export var ClassName;
+
+(function (ClassName) {
+  ClassName["BUTTON"] = "button";
+  ClassName["LINK"] = "link";
+})(ClassName || (ClassName = {}));
+
+var typographyConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement(Header, {
+        className: cn('value'),
+        as: "h3",
+        color: "inherit"
+      }, children);
+    }
+  }
+};
+export var VideoType = {
   YOUTUBE: 'youtube',
   VIDEO: 'video'
 };
-var cn = cnCreate('mfui-beta-video-banner');
+export var ButtonColor = {
+  GREEN: 'green',
+  PURPLE: 'purple'
+};
+export var TextColor = {
+  BLACK: 'black',
+  WHITE: 'white'
+};
 
-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 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.useState(true),
       _React$useState2 = _slicedToArray(_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')
+  var _React$useState3 = React.useState(imageMobile),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      imageSrc = _React$useState4[0],
+      setImageSrc = _React$useState4[1];
+
+  var isVideoData = !!videoSrc && !!videoType;
+  var isRenderVideo = !isMobile && isVideoData;
+  var renderContent = React.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.createElement(Grid, {
+      className: cn('grid'),
+      guttersLeft: "medium"
+    }, /*#__PURE__*/React.createElement(GridColumn, {
+      mobile: "12",
+      tablet: "7",
+      desktop: "7",
+      wide: "6"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cn('content', {
+        'text-color': textColor,
+        'text-color-mobile': textColorMobile
+      })
     }, /*#__PURE__*/React.createElement(Header, {
       className: cn('title'),
-      color: "white",
-      as: "h1"
+      as: "h1",
+      color: "inherit"
     }, title), /*#__PURE__*/React.createElement("div", {
       className: cn('text')
-    }, /*#__PURE__*/React.createElement(Paragraph, {
-      color: "clearWhite",
-      hasMargin: false
-    }, description)), /*#__PURE__*/React.createElement(Button, {
-      className: cn('button'),
-      href: href,
-      onClick: onButtonClick
-    }, buttonTitle));
-  }, []);
+    }, /*#__PURE__*/React.createElement(Header, {
+      as: "h5",
+      color: "inherit",
+      className: cn('description')
+    }, description), cost && /*#__PURE__*/React.createElement("div", {
+      className: cn('cost')
+    }, convert(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
+      className: cn('btns-wrapper')
+    }, buttonTitle && /*#__PURE__*/React.createElement(Button, {
+      className: cn(ClassName.BUTTON, [classes.button]),
+      theme: buttonColor,
+      href: buttonHref,
+      onClick: onButtonClick,
+      download: buttonDownload
+    }, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(TextLink, {
+      className: cn(ClassName.LINK, [classes.link]),
+      href: linkUrl,
+      download: linkDownload,
+      onClick: onLinkClick
+    }, linkTitle)))));
+  }, [classes.button, classes.link]);
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
-      case VideoTypes.YOUTUBE:
+      case VideoType.YOUTUBE:
         {
           var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
           var autoplay = '&autoplay=1';
@@ -67,6 +149,7 @@ var VideoBanner = function VideoBanner(_ref) {
           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%",
@@ -76,17 +159,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.createElement("video", {
+              className: cn('video'),
+              autoPlay: true,
+              loop: true,
+              muted: isMuted
+            }, /*#__PURE__*/React.createElement("source", {
+              src: videoSrc,
+              type: "video/mp4"
+            }))
+          );
         }
 
       default:
@@ -95,20 +182,28 @@ 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 () {
+    var getImageSrc = function getImageSrc() {
+      var windowWidth = window.innerWidth;
+
+      switch (true) {
+        case windowWidth >= breakpoints.DESKTOP_MIDDLE_START:
+          return imageDesktopWide;
+
+        case windowWidth >= breakpoints.DESKTOP_SMALL_START && windowWidth <= breakpoints.DESKTOP_SMALL_END:
+          return imageDesktop;
+
+        case windowWidth >= breakpoints.MOBILE_BIG_START && windowWidth <= breakpoints.MOBILE_BIG_END:
+          return imageTablet;
+
+        default:
+          return imageMobile;
+      }
+    };
+
     var resizeHandler = function resizeHandler() {
-      return window.innerWidth <= breakpoints.mobileBigEnd ? setIsMobile(true) : setIsMobile(false);
+      setIsMobile(window.innerWidth < breakpoints.DESKTOP_SMALL_START);
+      setImageSrc(getImageSrc());
     };
 
     var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
@@ -117,28 +212,65 @@ var VideoBanner = function VideoBanner(_ref) {
     return function () {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
-  }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn()
-  }, /*#__PURE__*/React.createElement("div", {
+  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
-  }, renderImage(image), content && renderContent(content), isRenderVideo && renderVideo()));
+  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    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("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)
 };
 export default VideoBanner;

package/dist/es/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/es/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;