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

package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './TextWithIconItem.scss';
+import './TextWithIconItem.less';
 export interface ITextWithIconItem {
     /** Дополнительные классы для внутренних элементов */
     classes?: {

package/dist/es/components/TextWithIcon/TextWithIconItem.js

@@ -3,23 +3,26 @@ import "core-js/modules/es.array.is-array.js";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
 import { cnCreate, convert, filterDataAttrs, textConvertConfig } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./TextWithIconItem.css";
 var testIdPrefix = 'TextWithIconItem';
 var cn = cnCreate('mfui-text-with-icon-item');
+
 var TextWithIconItem = function TextWithIconItem(_ref) {
   var className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    text = _ref.text,
-    icon = _ref.icon,
-    rootRef = _ref.rootRef,
-    dataAttrs = _ref.dataAttrs;
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      text = _ref.text,
+      icon = _ref.icon,
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs;
   var renderText = React.useMemo(function () {
     if (Array.isArray(text)) {
       return text.map(function (item) {
         return convert(item, textConvertConfig);
       });
     }
+
     return convert(text, textConvertConfig);
   }, [text]);
   return /*#__PURE__*/React.createElement("div", _extends({
@@ -33,4 +36,16 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
     "data-testid": "".concat(testIdPrefix, "-text")
   }, renderText));
 };
+
+TextWithIconItem.propTypes = {
+  text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired)]).isRequired,
+  icon: PropTypes.node.isRequired,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string
+};
 export default TextWithIconItem;

package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css

@@ -1 +1,31 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-title-description-box{color:var(--content),.mfui-title-description-box __item_header;font-family:inherit;color-white-space:pre-wrap}.mfui-title-description-box__item:not(:last-child){margin-bottom:16px}.mfui-title-description-box_text-color_white{color:var(--stcWhite)}.mfui-title-description-box_h-align_center{text-align:center}.mfui-title-description-box__description{font-size:15px;font-weight:400;line-height:24px}.mfui-title-description-box__description :last-child{margin-bottom:0!important}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-title-description-box {
+  font-family: inherit;
+  color: var(--content);
+}
+.mfui-title-description-box__item_header {
+  white-space: pre-wrap;
+}
+.mfui-title-description-box__item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.mfui-title-description-box_text-color_white {
+  color: var(--stcWhite);
+}
+.mfui-title-description-box_h-align_center {
+  text-align: center;
+}
+.mfui-title-description-box__description {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-title-description-box__description :last-child {
+  margin-bottom: 0 !important;
+}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './TitleDescriptionBox.scss';
+import './TitleDescriptionBox.less';
 export interface ITitleDescriptionBoxProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {

package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js

@@ -4,17 +4,19 @@ import "core-js/modules/es.symbol.description.js";
 import * as React from 'react';
 import { Header, Paragraph, Grid, GridColumn } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./TitleDescriptionBox.css";
 var testIdPrefix = 'TitleDescriptionBox';
 var cn = cnCreate('mfui-title-description-box');
+
 var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
   var dataAttrs = _ref.dataAttrs,
-    title = _ref.title,
-    description = _ref.description,
-    textColor = _ref.textColor,
-    align = _ref.align,
-    rootRef = _ref.rootRef,
-    className = _ref.className;
+      title = _ref.title,
+      description = _ref.description,
+      textColor = _ref.textColor,
+      align = _ref.align,
+      rootRef = _ref.rootRef,
+      className = _ref.className;
   var renderDescription = React.useCallback(function () {
     if (typeof description === 'string') {
       return /*#__PURE__*/React.createElement(Paragraph, {
@@ -28,6 +30,7 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
         }
       }, description);
     }
+
     return /*#__PURE__*/React.createElement("div", {
       className: cn('description'),
       "data-testid": "".concat(testIdPrefix, "-description-node")
@@ -57,4 +60,18 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
     color: "inherit"
   }, title), description && renderDescription())));
 };
+
+TitleDescriptionBox.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  className: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]),
+  align: PropTypes.oneOf(['center']),
+  textColor: PropTypes.oneOf(['white'])
+};
 export default TitleDescriptionBox;

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

@@ -1 +1,225 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-video-banner{overflow:hidden;position:relative}@media screen and (min-width:1280px){.mfui-video-banner{margin-left:-80px;margin-right:-80px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner{margin-left:-64px;margin-right:-64px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner{margin-left:-48px;margin-right:-48px}}@media screen and (max-width:767px){.mfui-video-banner{margin-left:-16px;margin-right:-16px}}.mfui-video-banner_bottom-shadow:after{background:-webkit-gradient(linear,left top,left bottom,color-stop(95.25%,hsla(0,0%,100%,0)),to(rgba(0,0,0,.024)));background:linear-gradient(180deg,hsla(0,0%,100%,0) 95.25%,rgba(0,0,0,.024));bottom:0;content:"";height:100%;position:absolute;right:0;width:100%}.mfui-video-banner__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:400px}@media screen and (min-width:1440px){.mfui-video-banner__wrapper{height:562px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__wrapper{height:500px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:52px;padding-top:52px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__wrapper{max-height:440px;padding-bottom:64px;padding-top:64px}}@media screen and (max-width:767px){.mfui-video-banner__wrapper{max-height:488px;padding-bottom:42px;padding-top:42px}}.mfui-video-banner__background-image,.mfui-video-banner__video{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.mfui-video-banner__background-image{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.mfui-video-banner__content{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}@media screen and (min-width:1440px){.mfui-video-banner__content{max-height:422px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-video-banner__content{max-height:360px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-video-banner__content{max-height:336px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-video-banner__content{max-height:312px}}@media screen and (max-width:767px){.mfui-video-banner__content{max-height:404px}}.mfui-video-banner__content_text-color_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color_white{color:var(--stcWhite)}@media screen and (max-width:767px){.mfui-video-banner__content_text-color-mobile_black{color:var(--stcBlack)}.mfui-video-banner__content_text-color-mobile_white{color:var(--stcWhite)}}.mfui-video-banner__description{margin-bottom:32px;white-space:pre-wrap}.mfui-video-banner__title{margin-bottom:24px}@media screen and (max-width:767px){.mfui-video-banner__title{margin-bottom:20px}}.mfui-video-banner__text,.mfui-video-banner__title{white-space:pre-wrap}@media screen and (max-width:767px){.mfui-video-banner__text,.mfui-video-banner__title{text-align:center}}.mfui-video-banner__btns-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;margin:-24px -10px 0}@media screen and (max-width:767px){.mfui-video-banner__btns-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}@media screen and (max-width:479px){.mfui-video-banner__btns-wrapper{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.mfui-video-banner__button,.mfui-video-banner__link{margin:24px 10px 0}.mfui-video-banner__cost{font-size:12px;line-height:18px;margin-bottom:18px}.mfui-video-banner__value{display:inline;margin:0 3px}.mfui-video-banner__breadcrumbs,.mfui-video-banner__content{z-index:1}.mfui-video-banner__breadcrumbs{position:absolute;top:32px}@media screen and (max-width:767px){.mfui-video-banner__breadcrumbs{display:none}}.mfui-video-banner__grid{width:100%}
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-video-banner {
+  position: relative;
+  overflow: hidden;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-video-banner {
+    margin-right: -80px;
+    margin-left: -80px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-video-banner {
+    margin-right: -64px;
+    margin-left: -64px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-video-banner {
+    margin-right: -48px;
+    margin-left: -48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner {
+    margin-right: -16px;
+    margin-left: -16px;
+  }
+}
+.mfui-video-banner_bottom-shadow:after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
+}
+.mfui-video-banner__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 400px;
+}
+@media screen and (min-width: 1440px) {
+  .mfui-video-banner__wrapper {
+    height: 562px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-video-banner__wrapper {
+    height: 500px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-video-banner__wrapper {
+    max-height: 440px;
+    padding-top: 52px;
+    padding-bottom: 52px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-video-banner__wrapper {
+    max-height: 440px;
+    padding-top: 64px;
+    padding-bottom: 64px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__wrapper {
+    max-height: 488px;
+    padding-top: 42px;
+    padding-bottom: 42px;
+  }
+}
+.mfui-video-banner__background-image,
+.mfui-video-banner__video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.mfui-video-banner__background-image {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+.mfui-video-banner__content {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+}
+@media screen and (min-width: 1440px) {
+  .mfui-video-banner__content {
+    max-height: calc(562px - 2 * 70px);
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-video-banner__content {
+    max-height: calc(500px - 2 * 70px);
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-video-banner__content {
+    max-height: calc(440px - 2 * 52px);
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-video-banner__content {
+    max-height: calc(440px - 2 * 64px);
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__content {
+    max-height: calc(488px - 2 * 42px);
+  }
+}
+.mfui-video-banner__content_text-color_black {
+  color: var(--stcBlack);
+}
+.mfui-video-banner__content_text-color_white {
+  color: var(--stcWhite);
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__content_text-color-mobile_black {
+    color: var(--stcBlack);
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__content_text-color-mobile_white {
+    color: var(--stcWhite);
+  }
+}
+.mfui-video-banner__description {
+  margin-bottom: 32px;
+  white-space: pre-wrap;
+}
+.mfui-video-banner__title {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__title {
+    margin-bottom: 20px;
+  }
+}
+.mfui-video-banner__title,
+.mfui-video-banner__text {
+  white-space: pre-wrap;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__title,
+  .mfui-video-banner__text {
+    text-align: center;
+  }
+}
+.mfui-video-banner__btns-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: start;
+      -ms-flex-pack: start;
+          justify-content: flex-start;
+  margin: -24px -10px 0;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__btns-wrapper {
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
+}
+@media screen and (max-width: 479px) {
+  .mfui-video-banner__btns-wrapper {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.mfui-video-banner__link,
+.mfui-video-banner__button {
+  margin: 24px 10px 0;
+}
+.mfui-video-banner__cost {
+  font-size: 12px;
+  line-height: 18px;
+  margin-bottom: 18px;
+}
+.mfui-video-banner__value {
+  display: inline;
+  margin: 0 3px;
+}
+.mfui-video-banner__content,
+.mfui-video-banner__breadcrumbs {
+  z-index: 1;
+}
+.mfui-video-banner__breadcrumbs {
+  position: absolute;
+  top: 32px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-video-banner__breadcrumbs {
+    display: none;
+  }
+}
+.mfui-video-banner__grid {
+  width: 100%;
+}

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import { Props as BreadcrumbsPropsType } from '../Breadcrumbs/Breadcrumbs';
-import './VideoBanner.scss';
-export type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
+import './VideoBanner.less';
+export declare type BreadCrumbsItemsType = BreadcrumbsPropsType['items'];
 export declare const testIdPrefix = "VideoBanner";
 export declare enum ClassName {
     BUTTON = "button",
@@ -11,17 +11,17 @@ export declare const VideoType: {
     readonly YOUTUBE: "youtube";
     readonly VIDEO: "video";
 };
-type VideoType = (typeof VideoType)[keyof typeof VideoType];
+declare type VideoType = typeof VideoType[keyof typeof VideoType];
 export declare const ButtonColor: {
     readonly GREEN: "green";
     readonly PURPLE: "purple";
 };
-export type ButtonColorType = (typeof ButtonColor)[keyof typeof ButtonColor];
+export declare type ButtonColorType = typeof ButtonColor[keyof typeof ButtonColor];
 export declare const TextColor: {
     readonly BLACK: "black";
     readonly WHITE: "white";
 };
-type TextColorType = (typeof TextColor)[keyof typeof TextColor];
+declare type TextColorType = typeof TextColor[keyof typeof TextColor];
 export interface IContent {
     /** Заголовок */
     title: string;
@@ -80,7 +80,7 @@ export interface IVideoBannerProps {
         video?: string;
     };
     /** Ссылка на корневой элемент */
-    rootRef?: React.Ref<HTMLDivElement>;
+    rootRef?: Ref<HTMLDivElement>;
     /** Данные для блока с контентом */
     content?: IContent;
     /** Источник видео. */

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

@@ -2,22 +2,26 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.string.link.js";
-import * as React from 'react';
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.values.js";
+import React from 'react';
 import { Button, Header, ContentArea, TextLink, Grid, GridColumn } from '@megafon/ui-core';
 import { breakpoints, cnCreate, filterDataAttrs, convert, titleConvertConfig } 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";
 export var testIdPrefix = 'VideoBanner';
 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) {
@@ -42,58 +46,61 @@ export var TextColor = {
   BLACK: 'black',
   WHITE: 'white'
 };
+
 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;
+      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 = _slicedToArray(_React$useState, 2),
-    isMobile = _React$useState2[0],
-    setIsMobile = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_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 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;
+        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(Grid, {
       className: cn('grid'),
       guttersLeft: "medium"
@@ -170,6 +177,7 @@ var VideoBanner = function VideoBanner(_ref2) {
             "data-testid": "".concat(testIdPrefix, "-iframe-video")
           });
         }
+
       case VideoType.VIDEO:
         {
           return (
@@ -187,6 +195,7 @@ var VideoBanner = function VideoBanner(_ref2) {
             }))
           );
         }
+
       default:
         {
           return null;
@@ -197,6 +206,7 @@ var VideoBanner = function VideoBanner(_ref2) {
     var resizeHandler = function resizeHandler() {
       setIsMobile(window.innerWidth < breakpoints.DESKTOP_SMALL_START);
     };
+
     var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
     resizeHandler();
     window.addEventListener('resize', resizeHandlerThrottled);
@@ -241,4 +251,57 @@ var VideoBanner = function VideoBanner(_ref2) {
     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
+};
 export default VideoBanner;