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

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

@@ -81,13 +81,16 @@ var VideoBlock = function VideoBlock(_ref) {
       className: cn('header')
     }, title), /*#__PURE__*/React.createElement("div", {
       className: cn('description', [classes.description])
-    }, description), /*#__PURE__*/React.createElement(Button, {
+    }, description), buttonTitle && /*#__PURE__*/React.createElement(Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
       className: cn('button', [classes.button]),
       href: href,
       onClick: onButtonClick,
       download: buttonDownload
     }, buttonTitle));
-  }, [classes.button, classes.description]);
+  }, [classes.button, classes.description, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
   var renderGridColumns = React.useCallback(function () {
     var columns = [];
     var columnWidth = content ? '7' : '10';
@@ -100,7 +103,7 @@ var VideoBlock = function VideoBlock(_ref) {
         orderTablet: "2",
         orderMobile: "2",
         key: "column-content"
-      }, renderContent && renderContent(content)));
+      }, renderContent(content)));
     }
 
     columns.push( /*#__PURE__*/React.createElement(GridColumn, {
@@ -115,7 +118,7 @@ var VideoBlock = function VideoBlock(_ref) {
     }, renderVideo())));
     return columns;
   }, [renderContent, renderVideo, content]);
-  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(Grid, {
@@ -125,7 +128,10 @@ var VideoBlock = function VideoBlock(_ref) {
 };
 
 VideoBlock.propTypes = {
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,
@@ -139,7 +145,7 @@ VideoBlock.propTypes = {
     title: PropTypes.string.isRequired,
     description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     href: PropTypes.string,
-    buttonTitle: PropTypes.string.isRequired,
+    buttonTitle: PropTypes.string,
     buttonDownload: PropTypes.bool,
     onButtonClick: PropTypes.func
   }),

package/dist/es/index.d.ts

@@ -29,6 +29,8 @@ export { default as TableRow } from './components/Table/TableRow';
 export { default as TabsBox } from './components/TabsBox/TabsBox';
 export { default as TextBox } from './components/TextBox/TextBox';
 export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
+export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon';
+export { default as TextWithIconItem } from './components/TextWithIcon/TextWithIconItem';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/es/index.js

@@ -29,6 +29,8 @@ export { default as TableRow } from "./components/Table/TableRow";
 export { default as TabsBox } from "./components/TabsBox/TabsBox";
 export { default as TextBox } from "./components/TextBox/TextBox";
 export { default as TextBoxPicture } from "./components/TextBox/TextBoxPicture";
+export { default as TextWithIcon } from "./components/TextWithIcon/TextWithIcon";
+export { default as TextWithIconItem } from "./components/TextWithIcon/TextWithIconItem";
 export { default as TitleDescriptionBox } from "./components/TitleDescriptionBox/TitleDescriptionBox";
 export { default as VideoBanner } from "./components/VideoBanner/VideoBanner";
 export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";

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

@@ -4,6 +4,11 @@ export interface IAccordionBox {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        header?: Record<string, string>;
+        collapse?: Record<string, string>;
+        titleWrap?: Record<string, string>;
+        arrowUp?: Record<string, string>;
+        arrowDown?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;

package/dist/lib/components/AccordionBox/AccordionBox.js

@@ -59,7 +59,12 @@ var AccordionBox = function AccordionBox(_a) {
 
 AccordionBox.propTypes = {
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    header: PropTypes.objectOf(PropTypes.string.isRequired),
+    collapse: PropTypes.objectOf(PropTypes.string.isRequired),
+    titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType

package/dist/lib/components/BenefitsIcons/BenefitsIcons.js

@@ -153,7 +153,7 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-icons');
 var BenefitsIcons = function BenefitsIcons(_ref) {
   var rootRef = _ref.rootRef,
       _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? _types.IconPositionEnum.LEFT_TOP : _ref$iconPosition,
+      iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _ref$iconPosition,
       _ref$inOneColumn = _ref.inOneColumn,
       inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
       items = _ref.items,

package/dist/lib/components/Breadcrumbs/Breadcrumbs.css

@@ -30,12 +30,12 @@ h5 {
 .mfui-breadcrumbs__item {
   position: relative;
   margin-right: 10px;
-  padding-left: 22px;
+  padding-left: 26px;
 }
 .mfui-breadcrumbs__item:before {
   content: '→';
   position: absolute;
-  top: -2px;
+  top: -1px;
   left: 0;
 }
 .mfui-breadcrumbs__item:first-child {

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import './Breadcrumbs.less';
-declare type ItemType = {
-    component?: React.ReactElement;
+declare type ItemObjectType = {
     title?: string;
     href?: string;
+    component?: React.ReactElement;
 };
+declare type ItemType = JSX.Element | ItemObjectType;
 export declare const TextColor: {
     readonly DEFAULT: "default";
     readonly BLACK: "black";
@@ -12,6 +13,10 @@ export declare const TextColor: {
 };
 declare type TextColorType = typeof TextColor[keyof typeof TextColor];
 export declare type Props = {
+    dataAttrs?: {
+        root?: Record<string, string>;
+        link?: Record<string, string>;
+    };
     className?: string;
     classes?: {
         item?: string;

package/dist/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -9,6 +9,10 @@ require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.object.values");
 
+require("core-js/modules/es.string.link");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
@@ -25,6 +29,15 @@ var TextColor = {
   WHITE: 'white'
 };
 exports.TextColor = TextColor;
+
+function isObjectElement(item) {
+  return !_react["default"].isValidElement(item);
+}
+
+function isJSXElement(item) {
+  return _react["default"].isValidElement(item);
+}
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-breadcrumbs');
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -33,34 +46,53 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       color = _ref$color === void 0 ? 'black' : _ref$color,
       className = _ref.className,
       _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       color: color
     }, className)
-  }, items.map(function (_ref2) {
-    var component = _ref2.component,
-        title = _ref2.title,
-        href = _ref2.href;
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: cn('item', classes.item),
-      key: title
-    }, component, !component && /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
-      href: href,
-      color: color
-    }, component || title));
+  }), items.map(function (item, i) {
+    if (isJSXElement(item)) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('item', classes.item),
+        key: i
+      }, item);
+    }
+
+    if (isObjectElement(item)) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('item', classes.item),
+        key: item.component ? i : item.title
+      }, item.component || /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+        href: item.href,
+        color: color,
+        dataAttrs: {
+          root: (dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link) ? (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link, i + 1)) : undefined
+        }
+      }, item.title));
+    }
+
+    return null;
   }));
 };
 
 Breadcrumbs.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    link: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     item: _propTypes["default"].string
   }),
-  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    title: _propTypes["default"].string.isRequired,
-    href: _propTypes["default"].string
-  }).isRequired).isRequired,
+  items: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].element.isRequired), _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+
+    /* @deprecated */
+    component: _propTypes["default"].element
+  }).isRequired)]).isRequired,
   color: _propTypes["default"].oneOf(Object.values(TextColor))
 };
 var _default = Breadcrumbs;

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

@@ -19,6 +19,7 @@ export interface IButtonBannerProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        button?: Record<string, string>;
     };
     /** Дополнительный css класс для корневого элемента */
     className?: string;

package/dist/lib/components/ButtonBanner/ButtonBanner.js

@@ -71,6 +71,9 @@ var ButtonBanner = function ButtonBanner(_ref) {
       onButtonClick = _ref.onButtonClick;
 
   var buttonElem = /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
     className: cn('button', [classes.button]),
     href: buttonUrl,
     target: buttonTarget,
@@ -111,7 +114,8 @@ var ButtonBanner = function ButtonBanner(_ref) {
 
 ButtonBanner.propTypes = {
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   classes: PropTypes.shape({

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

@@ -4,6 +4,8 @@ export interface IButtonLinkBoxProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
         root?: Record<string, string>;
+        link?: Record<string, string>;
+        button?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js

@@ -54,6 +54,9 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
   }), buttonTitle && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('row')
   }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
     className: classes.button,
     href: buttonUrl,
     theme: buttonColor,
@@ -63,6 +66,9 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
   }, buttonTitle)), linkTitle && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('row')
   }, /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+    },
     className: classes.link,
     href: linkUrl,
     download: linkDownload,
@@ -74,7 +80,9 @@ var ButtonLinkBox = function ButtonLinkBox(_ref) {
 
 ButtonLinkBox.propTypes = {
   dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired)
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired),
+    button: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   classes: PropTypes.shape({

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

@@ -23,9 +23,11 @@ export declare const ObjectFit: {
 };
 declare type ObjectFitType = typeof ObjectFit[keyof typeof ObjectFit];
 export interface ICard {
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
+        link?: Record<string, string>;
+        button?: Record<string, string>;
     };
     /** Дополнительный класс корневого элемента */
     className?: string;

package/dist/lib/components/Card/Card.js

@@ -103,12 +103,15 @@ var Card = function Card(_ref) {
     }
 
     return /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
-      className: cn('link', [classes.link]),
       href: linkHref,
+      download: download,
       target: linkTarget,
-      download: download
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+      },
+      className: cn('link', [classes.link])
     }, linkTitle);
-  }, [link, isCardLink, classes]);
+  }, [link, isCardLink, classes, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link]);
 
   var renderBtn = _react["default"].useCallback(function () {
     if (!button || isCardLink) {
@@ -120,12 +123,15 @@ var Card = function Card(_ref) {
         btnTarget = button.target,
         buttonDownload = button.download;
     return /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
       className: cn('button', [classes.button]),
       href: btnHref,
       target: btnTarget,
       download: buttonDownload
     }, btnTitle);
-  }, [button, isCardLink, classes]);
+  }, [button, isCardLink, classes, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
 
   var renderBtnsWrapper = _react["default"].useCallback(function () {
     var btnElem = renderBtn();
@@ -142,7 +148,7 @@ var Card = function Card(_ref) {
     }, btnElem, linkElem);
   }, [renderBtn, renderLink, isAlignAvailable, isLeftHAlign]);
 
-  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn('', {
       href: !!href,
       'full-height': isFullHeight,
@@ -162,7 +168,11 @@ var Card = function Card(_ref) {
 };
 
 Card.propTypes = {
-  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    link: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    button: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     root: _propTypes["default"].string,

package/dist/lib/components/Container/Container.css

@@ -344,6 +344,9 @@ h5 {
 .mfui-container .mfui-title-description-box + .mfui-download-links {
   margin-top: 32px;
 }
+.mfui-container .mfui-title-description-box + .mfui-text-with-icon {
+  margin-top: 24px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-title-description-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2230,6 +2233,9 @@ h5 {
 .mfui-container .mfui-text-box + .mfui-download-links {
   margin-top: 32px;
 }
+.mfui-container .mfui-text-box + .mfui-text-with-icon {
+  margin-top: 32px;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-container .mfui-text-box + .mfui-benefits-icons {
     margin-top: 48px;
@@ -2869,6 +2875,163 @@ h5 {
 .mfui-container .mfui-page-title + .mfui-button-link-box {
   margin-top: 0 !important;
 }
+.mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-cards-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-video-block {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-partners {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-instructions {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-property {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-table {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-download-links {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-text-box {
+  margin-top: 32px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-store-banner {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-button-banner {
+  margin-top: 40px;
+}
+.mfui-container .mfui-text-with-icon + .mfui-steps {
+  margin-top: 40px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-video-block {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-partners {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-instructions {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-property {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-table {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-download-links {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-text-box {
+    margin-top: 32px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-steps {
+    margin-top: 48px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-container .mfui-text-with-icon + .mfui-benefits-pictures {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-cards-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-carousel-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-video-block {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-tabs-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-partners {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-instructions {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-property {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-table {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-accordion-box {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-link-box {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-download-links {
+    margin-top: 48px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-text-box {
+    margin-top: 32px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-picture-with-description {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-store-banner {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-button-banner {
+    margin-top: 56px;
+  }
+  .mfui-container .mfui-text-with-icon + .mfui-steps {
+    margin-top: 56px;
+  }
+}
 .mfui-container_disable-padding-top {
   padding-top: 0 !important;
 }

package/dist/lib/components/DownloadLinks/DownloadLink.css

@@ -32,6 +32,6 @@ h5 {
   margin: 0;
   font-size: 12px;
   line-height: 16px;
-  color: var(--stcBlack5);
+  color: var(--spbSky3);
   text-transform: uppercase;
 }

package/dist/lib/components/DownloadLinks/DownloadLink.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import './DownloadLink.less';
 export interface IDownloadLink {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        link?: Record<string, string>;
+    };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Адресы ссылки */

package/dist/lib/components/DownloadLinks/DownloadLink.js

@@ -46,25 +46,33 @@ var DownloadLink = function DownloadLink(_ref) {
       className = _ref.className,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
-      rootRef = _ref.rootRef;
-  return /*#__PURE__*/React.createElement("div", {
+      rootRef = _ref.rootRef,
+      dataAttrs = _ref.dataAttrs;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className, classes.root]),
     ref: rootRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('icon')
   }, /*#__PURE__*/React.createElement(DownloadIcon, {
     className: cn('icon-svg')
   })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_uiCore.TextLink, {
-    className: cn('link', [classes.link]),
+    download: true,
     href: href,
     onClick: onClick,
-    download: true
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
+    },
+    className: cn('link', [classes.link])
   }, text), /*#__PURE__*/React.createElement("p", {
     className: cn('info')
   }, "".concat(extension).concat(extension && fileSize ? ',' : '', " ").concat(fileSize))));
 };
 
 DownloadLink.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    link: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),

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

@@ -22,6 +22,13 @@ export declare type InstructionItemType = {
     isVideo: boolean;
 };
 export interface IInstructionsProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+        image?: Record<string, string>;
+        mobileItemText?: Record<string, string>;
+    };
     /** Ссылка на корневой элемент */
     rootRef?: Ref<HTMLDivElement>;
     /** Дополнительные классы для внутренних элементов */