@megafon/ui-shared 3.0.0-beta.9 → 3.1.0

package/dist/es/components/Property/PropertyDescription.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -5,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import * as React from 'react';
 import { Collapse } from '@megafon/ui-core';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./PropertyDescription.css";
 var cn = cnCreate('mfui-property-description');
@@ -15,7 +16,8 @@ var PropertyDescription = function PropertyDescription(_ref) {
       _ref$isCollapsible = _ref.isCollapsible,
       isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible,
       _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes;
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -29,10 +31,11 @@ var PropertyDescription = function PropertyDescription(_ref) {
   if (isCollapsible) {
     return /*#__PURE__*/React.createElement("div", {
       className: cn([isOpened ? classes.open : undefined])
-    }, /*#__PURE__*/React.createElement("span", {
-      className: cn('collapse', classes.toggle),
+    }, /*#__PURE__*/React.createElement("span", _extends({
       onClick: handleClickDesc
-    }, isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(Collapse, {
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
+      className: cn('collapse', classes.toggle)
+    }), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(Collapse, {
       className: cn('content'),
       classNameContainer: cn('content-inner'),
       isOpened: isOpened
@@ -50,6 +53,9 @@ PropertyDescription.propTypes = {
   classes: PropTypes.shape({
     open: PropTypes.string,
     toggle: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    moreLink: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 export default PropertyDescription;

package/dist/es/components/Property/types.d.ts

@@ -6,6 +6,9 @@ export declare type Desc = {
         toggle?: string;
         open?: string;
     };
+    dataAttrs?: {
+        moreLink?: Record<string, string>;
+    };
 };
 export declare type Item = {
     title?: string[] | React.ReactNode[];

package/dist/es/components/StoreBanner/StoreBanner.css

@@ -159,7 +159,16 @@ h5 {
   display: flex;
 }
 .mfui-store-banner__qr-code {
+  -ms-flex-item-align: center;
+      align-self: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 90px;
+  height: 90px;
   margin-right: 16px;
+  border: 1px solid var(--spbSky1);
+  border-radius: 8px;
+  background-color: var(--base);
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__qr-code {
@@ -180,6 +189,9 @@ h5 {
 .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
+  margin-right: 8px;
+  margin-bottom: 10px;
+  margin-left: 8px;
 }
 @media screen and (max-width: 767px) {
   .mfui-store-banner__store-link {
@@ -187,9 +199,8 @@ h5 {
     height: 35px;
   }
 }
-.mfui-store-banner__store-link:not(:last-child) {
-  margin-right: 16px;
-  margin-bottom: 10px;
+.mfui-store-banner__store-link:last-child {
+  margin-bottom: 0;
 }
 .mfui-store-banner__stores {
   display: -webkit-box;
@@ -208,6 +219,11 @@ h5 {
             justify-content: center;
   }
 }
+@media screen and (min-width: 768px) {
+  .mfui-store-banner__stores {
+    margin-left: -8px;
+  }
+}
 .mfui-store-banner__text {
   margin-bottom: 32px;
 }
@@ -229,16 +245,10 @@ h5 {
   -o-object-fit: contain;
      object-fit: contain;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    width: 120px;
-    height: 120px;
-  }
-}
 @media screen and (min-width: 1280px) {
   .mfui-store-banner__links_three .mfui-store-banner__qr-code {
-    max-width: 88px;
-    max-height: 88px;
+    max-width: 90px;
+    max-height: 90px;
   }
 }
 .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
@@ -260,12 +270,6 @@ h5 {
     margin: 0 auto;
   }
 }
-.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
-  margin-right: 16px;
-}
-.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
-  margin-right: 0;
-}
 .mfui-store-banner__links_three .mfui-store-banner__store-link {
   width: 136px;
   height: 40px;
@@ -284,8 +288,3 @@ h5 {
     margin-bottom: 16px;
   }
 }
-@media screen and (max-width: 1023px) {
-  .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
-    margin-right: 0;
-  }
-}

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

@@ -59,6 +59,10 @@ export interface IStoreBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        button?: Record<string, string>;
+        linkApple?: Record<string, string>;
+        linkGoogle?: Record<string, string>;
+        linkHuawei?: Record<string, string>;
     };
 }
 declare const StoreBanner: React.FC<IStoreBannerProps>;

package/dist/es/components/StoreBanner/StoreBanner.js

@@ -17,7 +17,6 @@ export var DeviceMask = {
   BLACK_IPHONE: 'black-iphone',
   WHITE_IPHONE: 'white-iphone'
 };
-var DEFAULT_TEXT_BUTTON = 'Установите приложение';
 var cn = cnCreate('mfui-store-banner');
 
 var StoreBanner = function StoreBanner(_ref) {
@@ -35,11 +34,11 @@ var StoreBanner = function StoreBanner(_ref) {
       linkHuawei = _ref.linkHuawei,
       linkButton = _ref.linkButton,
       _ref$textButton = _ref.textButton,
-      textButton = _ref$textButton === void 0 ? DEFAULT_TEXT_BUTTON : _ref$textButton,
+      textButton = _ref$textButton === void 0 ? 'Установите приложение' : _ref$textButton,
       qrCode = _ref.qrCode,
       imageSrc = _ref.imageSrc,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? Theme.DEFAULT : _ref$theme,
+      theme = _ref$theme === void 0 ? 'default' : _ref$theme,
       deviceMask = _ref.deviceMask,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
@@ -81,6 +80,9 @@ var StoreBanner = function StoreBanner(_ref) {
   }), !linkButton && /*#__PURE__*/React.createElement("div", {
     className: cn('stores')
   }, linkApple && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkApple
+    },
     theme: StoreButtonTheme.APP_STORE,
     href: linkApple,
     onClick: onClickApple,
@@ -88,6 +90,9 @@ var StoreBanner = function StoreBanner(_ref) {
       'app-store': true
     }, appleLinkClassName)
   }), linkGoogle && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGoogle
+    },
     theme: StoreButtonTheme.GOOGLE_PLAY,
     href: linkGoogle,
     className: cn('store-link', {
@@ -95,6 +100,9 @@ var StoreBanner = function StoreBanner(_ref) {
     }, googleLinkClassName),
     onClick: onClickGoogle
   }), linkHuawei && /*#__PURE__*/React.createElement(StoreButton, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkHuawei
+    },
     theme: StoreButtonTheme.HUAWEI_STORE,
     href: linkHuawei,
     className: cn('store-link', {
@@ -102,6 +110,9 @@ var StoreBanner = function StoreBanner(_ref) {
     }, huaweiLinkClassName),
     onClick: onClickHuawei
   })), linkButton && /*#__PURE__*/React.createElement(Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
     className: cn('button'),
     href: linkButton,
     theme: theme === 'green' ? 'purple' : 'green'
@@ -141,7 +152,11 @@ StoreBanner.propTypes = {
   }), PropTypes.any])]),
   theme: PropTypes.oneOf(Object.values(Theme)),
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired),
+    linkApple: PropTypes.objectOf(PropTypes.string.isRequired),
+    linkGoogle: PropTypes.objectOf(PropTypes.string.isRequired),
+    linkHuawei: PropTypes.objectOf(PropTypes.string.isRequired)
   })
 };
 export default StoreBanner;

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

@@ -7,7 +7,7 @@ export declare enum Theme {
     HUAWEI_STORE = "huawei-store"
 }
 declare type LinkPropTypes = React.ComponentProps<typeof Link>;
-export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick'> & {
+export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick' | 'dataAttrs'> & {
     /** Тема кнопки */
     theme: Theme;
     /** Дополнительный класс */

package/dist/es/components/StoreButton/StoreButton.js

@@ -1,4 +1,21 @@
+import "core-js/modules/es.symbol";
+import "core-js/modules/es.array.index-of";
 import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 import * as React from 'react';
 import { Link } from '@megafon/ui-core';
 import { cnCreate } from '@megafon/ui-helpers';
@@ -14,18 +31,20 @@ export var Theme;
 
 var cn = cnCreate('mfui-store-button');
 
-var StoreButton = function StoreButton(_ref) {
-  var href = _ref.href,
-      onClick = _ref.onClick,
-      theme = _ref.theme,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement(Link, {
+var StoreButton = function StoreButton(_a) {
+  var href = _a.href,
+      onClick = _a.onClick,
+      theme = _a.theme,
+      className = _a.className,
+      rest = __rest(_a, ["href", "onClick", "theme", "className"]);
+
+  return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
     href: href,
     onClick: onClick,
     className: cn({
       theme: theme
     }, className)
-  });
+  }));
 };
 
 StoreButton.propTypes = {

package/dist/es/components/Table/Table.css

@@ -128,7 +128,7 @@ h5 {
   line-height: 16px;
   height: 72px;
   padding-bottom: 12px;
-  color: var(--stcBlack5);
+  color: var(--spbSky3);
   vertical-align: bottom;
   background-color: var(--spbSky0);
 }

package/dist/es/components/TextBox/TextBox.css

@@ -14,3 +14,12 @@ h5 {
 .mfui-text-box_text-center {
   text-align: center;
 }
+.mfui-text-box .mfui-text-with-icon {
+  margin: 24px 0;
+}
+.mfui-text-box .mfui-text-with-icon + .mfui-header {
+  margin-top: 32px;
+}
+.mfui-text-box .mfui-text-box-picture + .mfui-text-with-icon {
+  margin: 32px 0 24px;
+}

package/dist/es/components/TextWithIcon/TextWithIcon.css

@@ -0,0 +1,15 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-with-icon__header {
+  margin-bottom: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon__header {
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ITextWithIconItem } from './TextWithIconItem';
+import './TextWithIcon.less';
+export interface ITextWithIconProps {
+    /** Заголовок */
+    title?: string;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Допустимый дочерний компонент */
+    children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
+}
+declare const TextWithIcon: React.FC<ITextWithIconProps>;
+export default TextWithIcon;

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

@@ -0,0 +1,40 @@
+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 cn = cnCreate('mfui-text-with-icon');
+
+var TextWithIcon = function TextWithIcon(_ref) {
+  var title = _ref.title,
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn([className]),
+    ref: rootRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
+    mobile: '12',
+    tablet: '7',
+    desktop: '6',
+    wide: '6'
+  }, title && /*#__PURE__*/React.createElement(Header, {
+    className: cn('header'),
+    as: "h5"
+  }, title), children)));
+};
+
+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,
+  className: PropTypes.string
+};
+export default TextWithIcon;

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

@@ -0,0 +1,49 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-text-with-icon-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon-item {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+  }
+}
+.mfui-text-with-icon-item:not(:first-of-type) {
+  margin-top: 16px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon-item:not(:first-of-type) {
+    margin-top: 24px;
+  }
+}
+.mfui-text-with-icon-item__svg-icon {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  min-height: 40px;
+  overflow: hidden;
+}
+@media screen and (min-width: 768px) {
+  .mfui-text-with-icon-item__svg-icon {
+    margin-right: 16px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-text-with-icon-item__text {
+    margin-top: 12px;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import './TextWithIconItem.less';
+export interface ITextWithIconItem {
+    /** Текст */
+    text: string | string[];
+    /** Иконка */
+    icon: React.ReactNode;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+}
+declare const TextWithIconItem: React.FC<ITextWithIconItem>;
+export default TextWithIconItem;

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

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
+import "./TextWithIconItem.css";
+var cn = cnCreate('mfui-text-with-icon-item');
+
+var TextWithIconItem = function TextWithIconItem(_ref) {
+  var text = _ref.text,
+      icon = _ref.icon,
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn([className]),
+    ref: rootRef
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
+    className: cn('svg-icon')
+  }, icon), /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, text));
+};
+
+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/VideoBanner/VideoBanner.d.ts

@@ -52,9 +52,13 @@ export interface IContent {
     cost?: string;
 }
 interface IVideoBannerProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
+        breadcrumbs?: Record<string, string>;
+        breadcrumbsLink?: Record<string, string>;
+        button?: Record<string, string>;
+        link?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;
@@ -64,6 +68,7 @@ interface IVideoBannerProps {
         button?: string;
         link?: string;
         breadcrumbs?: string;
+        video?: string;
     };
     /** Ссылка на корневой элемент */
     rootRef?: Ref<HTMLDivElement>;

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

@@ -122,18 +122,24 @@ var VideoBanner = function VideoBanner(_ref2) {
     }, convert(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
       className: cn('btns-wrapper')
     }, buttonTitle && /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
       className: cn(ClassName.BUTTON, [classes.button]),
       theme: buttonColor,
       href: buttonHref,
       onClick: onButtonClick,
       download: buttonDownload
     }, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(TextLink, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+      },
       className: cn(ClassName.LINK, [classes.link]),
       href: linkUrl,
       download: linkDownload,
       onClick: onLinkClick
     }, linkTitle)))));
-  }, [classes.button, classes.link]);
+  }, [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.useCallback(function () {
     switch (videoType) {
       case VideoType.YOUTUBE:
@@ -165,7 +171,7 @@ var VideoBanner = function VideoBanner(_ref2) {
             /*#__PURE__*/
             // eslint-disable-next-line jsx-a11y/media-has-caption
             React.createElement("video", {
-              className: cn('video'),
+              className: cn('video', [classes.video]),
               autoPlay: true,
               loop: true,
               muted: isMuted
@@ -181,7 +187,7 @@ var VideoBanner = function VideoBanner(_ref2) {
           return null;
         }
     }
-  }, [videoType, videoSrc, isMuted]);
+  }, [videoType, videoSrc, isMuted, classes.video]);
   React.useEffect(function () {
     var getImageSrc = function getImageSrc() {
       var windowWidth = window.innerWidth;
@@ -213,12 +219,16 @@ var VideoBanner = function VideoBanner(_ref2) {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
   }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes.root]),
     ref: rootRef
   }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
   }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
+      link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
+    },
     className: cn('breadcrumbs'),
     items: breadcrumbs,
     color: content === null || content === void 0 ? void 0 : content.textColor,
@@ -234,7 +244,13 @@ var VideoBanner = function VideoBanner(_ref2) {
 };
 
 VideoBanner.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  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,

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

@@ -6,7 +6,7 @@ export interface IContent {
     /** Текст-описание */
     description: string | React.ReactNode[] | React.ReactNode;
     /** Текст кнопки */
-    buttonTitle: string;
+    buttonTitle?: string;
     /** Добавляет атрибут download для тега <a> компонента Button */
     buttonDownload?: boolean;
     /** Ссылка на кнопке */
@@ -20,9 +20,10 @@ export declare const VideoTypes: {
 };
 declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
 export interface IVideoBlockProps {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
+        button?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;