@megafon/ui-shared 5.17.0 → 6.0.0-beta.2

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

@@ -1,62 +1,37 @@
 "use strict";
 
-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); }
-
+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"] = exports.TextColor = exports.ButtonColor = exports.VideoType = exports.ClassName = exports.testIdPrefix = void 0;
-
+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.string.link.js");
-
 require("core-js/modules/es.array.concat.js");
-
-require("core-js/modules/es.object.values.js");
-
-var _react = _interopRequireDefault(require("react"));
-
+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 PropTypes = _interopRequireWildcard(require("prop-types"));
-
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
-
 var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs/Breadcrumbs"));
-
-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 _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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var testIdPrefix = 'VideoBanner';
-exports.testIdPrefix = testIdPrefix;
+var testIdPrefix = exports.testIdPrefix = 'VideoBanner';
 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, {
+      return /*#__PURE__*/React.createElement(_uiCore.Header, {
         className: cn('value'),
         as: "h3",
         color: "inherit"
@@ -64,106 +39,99 @@ var typographyConfig = {
     }
   }
 };
-var VideoType = {
+var VideoType = exports.VideoType = {
   YOUTUBE: 'youtube',
   VIDEO: 'video'
 };
-exports.VideoType = VideoType;
-var ButtonColor = {
+var ButtonColor = exports.ButtonColor = {
   GREEN: 'green',
   PURPLE: 'purple'
 };
-exports.ButtonColor = ButtonColor;
-var TextColor = {
+var TextColor = exports.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["default"].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.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["default"].useCallback(function (_ref3) {
+  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["default"].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.createElement(_uiCore.Grid, {
       className: cn('grid'),
       guttersLeft: "medium"
-    }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
+    }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
       mobile: "12",
       tablet: "7",
       desktop: "7",
       wide: "6"
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: cn('content', {
         'text-color': textColor,
         'text-color-mobile': textColorMobile
       }),
       "data-testid": "".concat(testIdPrefix, "-content")
-    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
       className: cn('title'),
       as: "h1",
       color: "inherit"
-    }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/_react["default"].createElement("div", {
+    }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
       className: cn('text')
-    }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
       as: "h5",
       color: "inherit",
       className: cn('description')
-    }, (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig)), cost && /*#__PURE__*/_react["default"].createElement("div", {
+    }, (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig)), cost && /*#__PURE__*/React.createElement("div", {
       className: cn('cost')
-    }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/_react["default"].createElement("div", {
+    }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
       className: cn('btns-wrapper')
-    }, buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    }, buttonTitle && /*#__PURE__*/React.createElement(_uiCore.Button, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
       },
@@ -174,7 +142,7 @@ var VideoBanner = function VideoBanner(_ref2) {
       onClick: onButtonClick,
       download: buttonDownload,
       rel: buttonRel
-    }, buttonTitle), linkTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+    }, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(_uiCore.TextLink, {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
       },
@@ -186,8 +154,7 @@ 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["default"].useCallback(function () {
+  var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoType.YOUTUBE:
         {
@@ -201,7 +168,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["default"].createElement("iframe", {
+          return /*#__PURE__*/React.createElement("iframe", {
             title: "iframe",
             className: cn('video'),
             src: src,
@@ -212,37 +179,32 @@ 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["default"].createElement("video", {
+            React.createElement("video", {
               className: cn('video', [classes.video]),
               autoPlay: true,
               loop: true,
               muted: isMuted,
               "data-testid": "".concat(testIdPrefix, "-video")
-            }, /*#__PURE__*/_react["default"].createElement("source", {
+            }, /*#__PURE__*/React.createElement("source", {
               src: videoSrc,
               type: "video/mp4"
             }))
           );
         }
-
       default:
         {
           return null;
         }
     }
   }, [videoType, videoSrc, isMuted, classes.video]);
-
-  _react["default"].useEffect(function () {
+  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);
@@ -250,16 +212,15 @@ var VideoBanner = function VideoBanner(_ref2) {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
   }, [setIsMobile]);
-
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+  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["default"].createElement(_uiCore.ContentArea, null, /*#__PURE__*/_react["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement(_uiCore.ContentArea, null, /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
-  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {
+  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
     hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
@@ -271,75 +232,21 @@ var VideoBanner = function VideoBanner(_ref2) {
     classes: {
       item: classes.breadcrumbs
     }
-  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/_react["default"].createElement("picture", {
+  }), content && renderContent(content), isRenderVideo && renderVideo(), !isRenderVideo && /*#__PURE__*/React.createElement("picture", {
     "data-testid": "".concat(testIdPrefix, "-picture")
-  }, /*#__PURE__*/_react["default"].createElement("source", {
+  }, /*#__PURE__*/React.createElement("source", {
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
     srcSet: imageDesktopWide
-  }), /*#__PURE__*/_react["default"].createElement("source", {
+  }), /*#__PURE__*/React.createElement("source", {
     media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
     srcSet: imageDesktop
-  }), /*#__PURE__*/_react["default"].createElement("source", {
+  }), /*#__PURE__*/React.createElement("source", {
     media: "(min-width: ".concat(_uiHelpers.breakpoints.MOBILE_BIG_START, "px)"),
     srcSet: imageTablet
-  }), /*#__PURE__*/_react["default"].createElement("img", {
+  }), /*#__PURE__*/React.createElement("img", {
     className: cn('background-image'),
     src: imageMobile,
     alt: imageAlt
   })))));
 };
-
-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;
+var _default = exports["default"] = VideoBanner;

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

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