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

package/dist/lib/components/Instructions/Instructions.js

@@ -7,6 +7,8 @@ exports["default"] = exports.pictureMaskTypes = exports.pictureAlignTypes = void
 
 require("core-js/modules/es.array.map");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -45,7 +47,8 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-instructions');
 var swiperSlideCn = cn('slide');
 
 var Instructions = function Instructions(_ref) {
-  var rootRef = _ref.rootRef,
+  var dataAttrs = _ref.dataAttrs,
+      rootRef = _ref.rootRef,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
   var instructionItem = _ref$classes.instructionItem,
@@ -95,37 +98,38 @@ var Instructions = function Instructions(_ref) {
     };
   }, [swiperInstance]);
 
-  var renderVideo = _react["default"].useCallback(function (mediaUrl) {
-    return /*#__PURE__*/_react["default"].createElement("video", {
-      className: cn('swiper-img'),
-      autoPlay: true,
-      muted: true,
+  var renderVideo = _react["default"].useCallback(function (mediaUrl, index) {
+    return /*#__PURE__*/_react["default"].createElement("video", (0, _extends2["default"])({
       loop: true,
-      playsInline: true
-    }, /*#__PURE__*/_react["default"].createElement("source", {
+      muted: true,
+      autoPlay: true,
+      playsInline: true,
+      className: cn('swiper-img')
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/_react["default"].createElement("source", {
       src: mediaUrl,
       type: "video/mp4"
     }));
-  }, []);
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
 
   var renderSlider = _react["default"].useCallback(function () {
     return /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
       className: cn('swiper'),
       onSwiper: getSwiperInstance,
       noSwipingClass: swiperSlideCn
-    }, instructionItems.map(function (_ref2, ind) {
+    }, instructionItems.map(function (_ref2, i) {
       var mediaUrl = _ref2.mediaUrl,
           isVideo = _ref2.isVideo;
       return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, {
         className: swiperSlideCn,
-        key: ind + mediaUrl
-      }, isVideo ? renderVideo(mediaUrl) : /*#__PURE__*/_react["default"].createElement("img", {
-        className: cn('swiper-img', [instructionItemImg]),
-        src: mediaUrl,
-        alt: ""
-      }));
+        key: i + mediaUrl
+      }, isVideo ? renderVideo(mediaUrl, i) : /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
+        alt: "",
+        src: mediaUrl
+      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, i + 1), {
+        className: cn('swiper-img', [instructionItemImg])
+      })));
     }));
-  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo]);
+  }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
 
   var renderTitle = _react["default"].useCallback(function (resolution) {
     return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
@@ -161,28 +165,28 @@ var Instructions = function Instructions(_ref) {
         'text-after': !!text,
         desktop: true
       })
-    }, instructionItems.map(function (_ref3, ind) {
+    }, instructionItems.map(function (_ref3, i) {
       var itemTitle = _ref3.title;
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-        _react["default"].createElement("li", {
+        _react["default"].createElement("li", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
           className: cn('articles-item', {
-            active: slideIndex === ind
-          }, [getActiveCustomClass(ind, slideIndex), instructionItem, desktopInstructionItem]),
-          "data-index": ind,
-          onClick: handleArticleClick(ind),
-          key: ind
-        }, /*#__PURE__*/_react["default"].createElement("div", {
+            active: slideIndex === i
+          }, [getActiveCustomClass(i, slideIndex), instructionItem, desktopInstructionItem]),
+          "data-index": i,
+          onClick: handleArticleClick(i),
+          key: i
+        }), /*#__PURE__*/_react["default"].createElement("div", {
           className: cn('articles-item-dot')
         }, /*#__PURE__*/_react["default"].createElement("span", {
           className: cn('articles-item-dot-number')
-        }, ind + 1)), /*#__PURE__*/_react["default"].createElement("div", {
+        }, i + 1)), /*#__PURE__*/_react["default"].createElement("div", {
           className: cn('articles-item-title', [desktopItemTitle])
         }, itemTitle))
       );
     }));
-  }, [desktopInstructionItem, desktopItemTitle, getActiveCustomClass, handleArticleClick, instructionItem, instructionItems, slideIndex, text]);
+  }, [desktopInstructionItem, desktopItemTitle, getActiveCustomClass, handleArticleClick, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, instructionItem, instructionItems, slideIndex, text]);
 
   var renderMobileArticles = _react["default"].useCallback(function () {
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -191,36 +195,37 @@ var Instructions = function Instructions(_ref) {
       })
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('articles-title-block')
-    }, instructionItems.map(function (_ref4, ind) {
+    }, instructionItems.map(function (_ref4, i) {
       var itemTitle = _ref4.title;
-      return slideIndex === ind && /*#__PURE__*/_react["default"].createElement("div", {
-        className: cn('articles-title', [mobileItemTitle]),
-        "data-index": ind,
-        key: ind
-      }, itemTitle);
+      return slideIndex === i && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+        key: i,
+        "data-index": i
+      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
+        className: cn('articles-title', [mobileItemTitle])
+      }), itemTitle);
     })), /*#__PURE__*/_react["default"].createElement("ul", {
       className: cn('articles-dots', {
         'text-after': !!text
       })
-    }, instructionItems.map(function (_item, ind) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        key: ind,
+    }, instructionItems.map(function (_item, i) {
+      return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+        key: i,
         className: cn('articles-dot', {
-          active: slideIndex === ind
-        }, [getActiveCustomClass(ind, slideIndex), instructionItem, mobileInstructionItem]),
-        onClick: handleArticleClick(ind)
-      }, /*#__PURE__*/_react["default"].createElement("span", {
+          active: slideIndex === i
+        }, [getActiveCustomClass(i, slideIndex), instructionItem, mobileInstructionItem]),
+        onClick: handleArticleClick(i)
+      }), /*#__PURE__*/_react["default"].createElement("span", {
         className: cn('articles-dot-number')
-      }, ind + 1));
+      }, i + 1));
     })));
-  }, [getActiveCustomClass, handleArticleClick, instructionItem, instructionItems, mobileInstructionItem, mobileItemTitle, slideIndex, text]);
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, getActiveCustomClass, handleArticleClick, instructionItem, instructionItems, mobileInstructionItem, mobileItemTitle, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, slideIndex, text]);
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       mask: pictureMask
     }),
     ref: rootRef
-  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
+  }), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
     hAlign: "center"
   }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
     all: "12"
@@ -238,6 +243,12 @@ var Instructions = function Instructions(_ref) {
 };
 
 Instructions.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    item: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    image: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    mobileItemText: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
     current: _propTypes["default"].elementType
   }), _propTypes["default"].any])]),

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

@@ -2,6 +2,12 @@ import * as React from 'react';
 import './PageTitle.less';
 import { Props as BreadcrumbsType } from '../Breadcrumbs/Breadcrumbs';
 declare type Props = {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        breadcrumbs?: Record<string, string>;
+        breadcrumbsLink?: Record<string, string>;
+    };
     /** Текст заголовка */
     title: string | React.ReactNode | React.ReactNode[];
     /** Хлебные крошки */

package/dist/lib/components/PageTitle/PageTitle.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
@@ -17,16 +19,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Breadcrumbs = _interopRequireDefault(require("../Breadcrumbs/Breadcrumbs"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-page-title');
 
 var PageTitle = function PageTitle(_ref) {
-  var title = _ref.title,
+  var dataAttrs = _ref.dataAttrs,
+      title = _ref.title,
       breadcrumbs = _ref.breadcrumbs,
       badge = _ref.badge,
       _ref$isFullWidth = _ref.isFullWidth,
@@ -56,16 +59,25 @@ var PageTitle = function PageTitle(_ref) {
       mobile: "12"
     }, renderPageTitle()));
   }, [renderPageTitle]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn([className]),
     ref: rootRef
-  }, (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
+  }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(_Breadcrumbs["default"], {
     items: 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', [classes.breadcrumbs])
   }), isFullWidth ? renderPageTitle() : renderPageTitleWithGrid());
 };
 
 PageTitle.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    breadcrumbs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    breadcrumbsLink: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
   breadcrumbs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     title: _propTypes["default"].string.isRequired,

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

@@ -6,6 +6,11 @@ export declare type ItemType = {
     alt: string;
 };
 export interface IPartnersProps {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+    };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительные классы для корневого и внутренних элементов */
@@ -13,10 +18,6 @@ export interface IPartnersProps {
         root?: string;
         itemClass?: string;
     };
-    /** Дата атрибуты для корневого элемента */
-    dataAttrs?: {
-        [key: string]: string;
-    };
     /** Дополнительный класс корневого элемента */
     className?: string;
     /** Список логотипов */

package/dist/lib/components/Partners/Partners.js

@@ -57,6 +57,8 @@ var Partners = function Partners(_ref) {
       onNextClick = _ref.onNextClick,
       onPrevClick = _ref.onPrevClick;
   var renderItem = React.useCallback(function (item) {
+    var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+
     if (!item) {
       return null;
     }
@@ -65,10 +67,13 @@ var Partners = function Partners(_ref) {
         href = item.href,
         alt = item.alt;
     return /*#__PURE__*/React.createElement(_uiCore.Tile, {
-      className: cn('tile'),
       href: href,
       shadowLevel: "low",
-      isInteractive: !!href
+      isInteractive: !!href,
+      className: cn('tile'),
+      dataAttrs: {
+        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
+      }
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('tile-inner', [itemClass])
     }, /*#__PURE__*/React.createElement("div", {
@@ -78,7 +83,7 @@ var Partners = function Partners(_ref) {
       alt: alt,
       className: cn('tile-img')
     }))));
-  }, [itemClass]);
+  }, [itemClass, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item]);
   var renderGrid = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(_uiCore.Grid, {
       guttersLeft: "medium",
@@ -88,7 +93,7 @@ var Partners = function Partners(_ref) {
         key: i + item.src,
         all: "3",
         mobile: "6"
-      }, renderItem(item));
+      }, renderItem(item, i));
     }));
   }, [items, renderItem]);
   var renderCarousel = React.useCallback(function () {
@@ -104,13 +109,13 @@ var Partners = function Partners(_ref) {
       return /*#__PURE__*/React.createElement("div", {
         key: i + item.src,
         className: cn('slide')
-      }, renderItem(item), renderItem(bottomRow[i]));
+      }, renderItem(item, i), renderItem(bottomRow[i], i));
     }));
   }, [items, onChange, onNextClick, onPrevClick, renderItem]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     ref: rootRef,
     className: cn([root, className])
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
 };
 
 Partners.propTypes = {
@@ -121,7 +126,10 @@ Partners.propTypes = {
     root: PropTypes.string,
     itemClass: PropTypes.string
   }),
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    item: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
   items: PropTypes.arrayOf(PropTypes.shape({
     href: PropTypes.string,

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

@@ -18,9 +18,10 @@ export interface IProperty {
     icon?: React.ReactNode;
     /** Растягивание компонента на всю доступную ширину */
     fullWidth?: boolean;
-    /** Дата атрибуты для корневого элемента */
+    /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
-        [key: string]: string;
+        root?: Record<string, string>;
+        moreLink?: Record<string, string>;
     };
     /** Дополнительные классы для внутренних элементов */
     classes?: {

package/dist/lib/components/Property/Property.js

@@ -66,13 +66,16 @@ var Property = function Property(_ref) {
       }, /*#__PURE__*/_react["default"].createElement(_PropertyDescription["default"], {
         value: value,
         isCollapsible: isCollapsible,
+        dataAttrs: {
+          moreLink: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink
+        },
         classes: {
           open: classes.openedDescription,
           toggle: classes.toggleDescription
         }
       }));
     });
-  }, [classes.openedDescription, classes.toggleDescription]);
+  }, [classes.openedDescription, classes.toggleDescription, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink]);
 
   var getColumnConfig = _react["default"].useCallback(function () {
     return fullWidth ? {
@@ -90,7 +93,7 @@ var Property = function Property(_ref) {
       'border-bottom': borderBottom
     }, [className]),
     ref: rootRef
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, null, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, getColumnConfig(), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, null, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, getColumnConfig(), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('wrapper')
   }, badge && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('badge-wrapper')
@@ -141,7 +144,10 @@ Property.propTypes = {
   mergedValue: _propTypes["default"].string,
   icon: _propTypes["default"].node,
   fullWidth: _propTypes["default"].bool,
-  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    moreLink: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   classes: _propTypes["default"].shape({
     title: _propTypes["default"].string,
     openedDescription: _propTypes["default"].string,

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -33,7 +35,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 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -47,10 +50,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", (0, _extends2["default"])({
       onClick: handleClickDesc
-    }, isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(_uiCore.Collapse, {
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
+      className: cn('collapse', classes.toggle)
+    }), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(_uiCore.Collapse, {
       className: cn('content'),
       classNameContainer: cn('content-inner'),
       isOpened: isOpened
@@ -68,6 +72,9 @@ PropertyDescription.propTypes = {
   classes: _propTypes["default"].shape({
     open: _propTypes["default"].string,
     toggle: _propTypes["default"].string
+  }),
+  dataAttrs: _propTypes["default"].shape({
+    moreLink: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   })
 };
 var _default = PropertyDescription;

package/dist/lib/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/lib/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/lib/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/lib/components/StoreBanner/StoreBanner.js

@@ -40,7 +40,6 @@ var DeviceMask = {
   WHITE_IPHONE: 'white-iphone'
 };
 exports.DeviceMask = DeviceMask;
-var DEFAULT_TEXT_BUTTON = 'Установите приложение';
 var cn = (0, _uiHelpers.cnCreate)('mfui-store-banner');
 
 var StoreBanner = function StoreBanner(_ref) {
@@ -58,11 +57,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,
@@ -104,6 +103,9 @@ var StoreBanner = function StoreBanner(_ref) {
   }), !linkButton && /*#__PURE__*/React.createElement("div", {
     className: cn('stores')
   }, linkApple && /*#__PURE__*/React.createElement(_StoreButton["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkApple
+    },
     theme: _StoreButton.Theme.APP_STORE,
     href: linkApple,
     onClick: onClickApple,
@@ -111,6 +113,9 @@ var StoreBanner = function StoreBanner(_ref) {
       'app-store': true
     }, appleLinkClassName)
   }), linkGoogle && /*#__PURE__*/React.createElement(_StoreButton["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGoogle
+    },
     theme: _StoreButton.Theme.GOOGLE_PLAY,
     href: linkGoogle,
     className: cn('store-link', {
@@ -118,6 +123,9 @@ var StoreBanner = function StoreBanner(_ref) {
     }, googleLinkClassName),
     onClick: onClickGoogle
   }), linkHuawei && /*#__PURE__*/React.createElement(_StoreButton["default"], {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkHuawei
+    },
     theme: _StoreButton.Theme.HUAWEI_STORE,
     href: linkHuawei,
     className: cn('store-link', {
@@ -125,6 +133,9 @@ var StoreBanner = function StoreBanner(_ref) {
     }, huaweiLinkClassName),
     onClick: onClickHuawei
   })), linkButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+    },
     className: cn('button'),
     href: linkButton,
     theme: theme === 'green' ? 'purple' : 'green'
@@ -164,7 +175,11 @@ StoreBanner.propTypes = {
   }), _propTypes["default"].any])]),
   theme: _propTypes["default"].oneOf(Object.values(Theme)),
   dataAttrs: _propTypes["default"].shape({
-    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    button: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    linkApple: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    linkGoogle: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    linkHuawei: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   })
 };
 var _default = StoreBanner;

package/dist/lib/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;
     /** Дополнительный класс */