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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ITextWithIconItem } from './TextWithIconItem';
-import './TextWithIcon.less';
+import './TextWithIcon.scss';
 export interface ITextWithIconProps {
     /** Заголовок */
     title?: string;

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

@@ -2,27 +2,23 @@ import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { Header, Grid, GridColumn } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./TextWithIcon.css";
 var testIdPrefix = 'TextWithIcon';
 var cn = cnCreate('mfui-text-with-icon');
-
 var TextWithIcon = function TextWithIcon(_ref) {
   var title = _ref.title,
-      rootRef = _ref.rootRef,
-      dataAttrs = _ref.dataAttrs,
-      className = _ref.className,
-      _ref$isFullWidth = _ref.isFullWidth,
-      isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
-      children = _ref.children;
-
+    rootRef = _ref.rootRef,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    _ref$isFullWidth = _ref.isFullWidth,
+    isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
+    children = _ref.children;
   var renderContent = function renderContent() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(Header, {
       className: cn('header'),
       as: "h5"
     }, title), children);
   };
-
   var renderContentWithGrid = function renderContentWithGrid() {
     return /*#__PURE__*/React.createElement(Grid, {
       dataAttrs: {
@@ -37,23 +33,9 @@ var TextWithIcon = function TextWithIcon(_ref) {
       wide: '6'
     }, renderContent()));
   };
-
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn([className]),
     ref: rootRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isFullWidth ? renderContent() : renderContentWithGrid());
 };
-
-TextWithIcon.propTypes = {
-  title: PropTypes.string,
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
-  isFullWidth: PropTypes.bool,
-  className: PropTypes.string
-};
 export default TextWithIcon;

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

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

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

@@ -3,26 +3,23 @@ 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({
@@ -36,16 +33,4 @@ 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.d.ts

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

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

@@ -4,19 +4,17 @@ 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, {
@@ -30,7 +28,6 @@ var TitleDescriptionBox = function TitleDescriptionBox(_ref) {
         }
       }, description);
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: cn('description'),
       "data-testid": "".concat(testIdPrefix, "-description-node")
@@ -60,18 +57,4 @@ 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.d.ts

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

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

@@ -2,26 +2,22 @@ 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.string.link.js";
 import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.object.values.js";
-import React from 'react';
+import "core-js/modules/es.string.link.js";
+import * as 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) {
@@ -46,61 +42,58 @@ 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"
@@ -177,7 +170,6 @@ var VideoBanner = function VideoBanner(_ref2) {
             "data-testid": "".concat(testIdPrefix, "-iframe-video")
           });
         }
-
       case VideoType.VIDEO:
         {
           return (
@@ -195,7 +187,6 @@ var VideoBanner = function VideoBanner(_ref2) {
             }))
           );
         }
-
       default:
         {
           return null;
@@ -206,7 +197,6 @@ 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);
@@ -251,57 +241,4 @@ 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;

package/dist/es/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;
     /** Тип видео */

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

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
-import "core-js/modules/es.object.values.js";
-import React from 'react';
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
 import { Header, Button, Grid, GridColumn } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
-import PropTypes from 'prop-types';
 import "./VideoBlock.css";
 export var VideoTypes = {
   YOUTUBE: 'youtube',
@@ -14,28 +12,27 @@ export var VideoTypes = {
 };
 export var testIdPrefix = 'VideoBlock';
 var cn = cnCreate('mfui-video-block');
-
 var VideoBlock = function VideoBlock(_ref) {
   var dataAttrs = _ref.dataAttrs,
-      className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      rootRef = _ref.rootRef,
-      content = _ref.content,
-      _ref$videoType = _ref.videoType,
-      videoType = _ref$videoType === void 0 ? 'video' : _ref$videoType,
-      videoSrc = _ref.videoSrc,
-      _ref$isMuted = _ref.isMuted,
-      isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
-      _ref$isAutoplay = _ref.isAutoplay,
-      isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
-      _ref$contentPositionR = _ref.contentPositionRight,
-      contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
-      poster = _ref.poster,
-      _ref$playsinline = _ref.playsinline,
-      playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
-      _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
-      fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    rootRef = _ref.rootRef,
+    content = _ref.content,
+    _ref$videoType = _ref.videoType,
+    videoType = _ref$videoType === void 0 ? 'video' : _ref$videoType,
+    videoSrc = _ref.videoSrc,
+    _ref$isMuted = _ref.isMuted,
+    isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
+    _ref$isAutoplay = _ref.isAutoplay,
+    isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
+    _ref$contentPositionR = _ref.contentPositionRight,
+    contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
+    poster = _ref.poster,
+    _ref$playsinline = _ref.playsinline,
+    playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
+    _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
+    fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -65,7 +62,6 @@ var VideoBlock = function VideoBlock(_ref) {
             "data-testid": "".concat(testIdPrefix, "-iframe-video")
           }));
         }
-
       case VideoTypes.VIDEO:
         {
           return (
@@ -88,7 +84,6 @@ var VideoBlock = function VideoBlock(_ref) {
             }))
           );
         }
-
       default:
         {
           return null;
@@ -97,12 +92,12 @@ var VideoBlock = function VideoBlock(_ref) {
   }, [videoType, videoSrc, isAutoplay, isMuted, poster, playsinline, fixWhiteVideoBackground]);
   var renderContent = React.useCallback(function (_ref2) {
     var title = _ref2.title,
-        description = _ref2.description,
-        href = _ref2.href,
-        buttonDownload = _ref2.buttonDownload,
-        buttonTitle = _ref2.buttonTitle,
-        buttonRel = _ref2.buttonRel,
-        onButtonClick = _ref2.onButtonClick;
+      description = _ref2.description,
+      href = _ref2.href,
+      buttonDownload = _ref2.buttonDownload,
+      buttonTitle = _ref2.buttonTitle,
+      buttonRel = _ref2.buttonRel,
+      onButtonClick = _ref2.onButtonClick;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('content', {
         'position-right': contentPositionRight
@@ -127,29 +122,27 @@ var VideoBlock = function VideoBlock(_ref) {
   var renderGridColumns = React.useCallback(function () {
     var columns = [];
     var columnWidth = content ? '7' : '10';
-
     if (content) {
       columns.push( /*#__PURE__*/React.createElement(GridColumn, {
         all: "5",
         tablet: "12",
         mobile: "12",
-        orderTablet: "2",
-        orderMobile: "2",
+        orderTablet: "1",
+        orderMobile: "1",
+        orderWide: contentPositionRight ? '1' : '0',
+        orderDesktop: contentPositionRight ? '1' : '0',
         key: "column-content",
-        className: cn('content-column', {
-          'position-right': contentPositionRight
-        })
+        className: cn('content-column')
       }, renderContent(content)));
     }
-
     columns.push( /*#__PURE__*/React.createElement(GridColumn, {
       all: columnWidth,
       tablet: "12",
       mobile: "12",
       key: "column-video",
-      className: cn('video-column', {
-        'position-left': contentPositionRight
-      })
+      orderDesktop: contentPositionRight ? '0' : '1',
+      orderWide: contentPositionRight ? '0' : '1',
+      className: cn('video-column')
     }, renderVideo()));
     return columns;
   }, [renderContent, renderVideo, content, contentPositionRight]);
@@ -161,37 +154,4 @@ var VideoBlock = function VideoBlock(_ref) {
     className: cn('grid')
   }, renderGridColumns()));
 };
-
-VideoBlock.propTypes = {
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    button: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    root: PropTypes.string,
-    button: PropTypes.string,
-    description: PropTypes.string
-  }),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
-  content: PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    href: PropTypes.string,
-    buttonTitle: PropTypes.string,
-    buttonDownload: PropTypes.bool,
-    buttonRel: PropTypes.string,
-    onButtonClick: PropTypes.func
-  }),
-  videoType: PropTypes.oneOf(Object.values(VideoTypes)),
-  videoSrc: PropTypes.string.isRequired,
-  isMuted: PropTypes.bool,
-  isAutoplay: PropTypes.bool,
-  poster: PropTypes.string,
-  playsinline: PropTypes.bool,
-  contentPositionRight: PropTypes.bool,
-  fixWhiteVideoBackground: PropTypes.bool
-};
 export default VideoBlock;

package/dist/es/helpers/getColumnConfig.d.ts

@@ -1,2 +1,6 @@
 import React from 'react';
-export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
+import { GridColumn } from '@megafon/ui-core';
+type GridColumnPropsType = React.ComponentProps<typeof GridColumn>;
+type GridColumnConfigType = Partial<Pick<GridColumnPropsType, 'all' | 'wide' | 'desktop' | 'tablet' | 'mobile'>>;
+export declare const getColumnConfig: (isFullWidth: boolean) => GridColumnConfigType;
+export {};