@megafon/ui-shared 5.11.0 → 5.12.0

package/dist/es/components/Instructions/Instructions.js

@@ -27,7 +27,9 @@ export var pictureMaskTypes = {
   BLACK_IPHONE: 'black-iphone',
   WHITE_IPHONE: 'white-iphone',
   LAPTOP: 'laptop',
+  LAPTOP_NEW: 'laptop-new',
   IPHONE_12: 'iphone-12',
+  IPHONE_15: 'iphone-15',
   IPHONE_CROPPED: 'iphone-cropped',
   NONE: 'none'
 };
@@ -38,6 +40,10 @@ export var arrowTheme = {
   PURPLE: 'purple',
   DARK: 'dark'
 };
+export var elementOrderTypes = {
+  DEFAULT: 'default',
+  REVERSED: 'reversed'
+};
 var testIdPrefix = 'Instructions';
 var cn = cnCreate('mfui-instructions');
 var swiperSlideCn = cn('slide');
@@ -72,6 +78,8 @@ var Instructions = function Instructions(_ref) {
       showArrows = _ref.showArrows,
       _ref$arrowsTheme = _ref.arrowsTheme,
       arrowsTheme = _ref$arrowsTheme === void 0 ? arrowTheme.DARK : _ref$arrowsTheme,
+      _ref$elementOrder = _ref.elementOrder,
+      elementOrder = _ref$elementOrder === void 0 ? 'default' : _ref$elementOrder,
       children = _ref.children;
 
   var _React$useState = React.useState(),
@@ -84,6 +92,7 @@ var Instructions = function Instructions(_ref) {
       slideIndex = _React$useState4[0],
       setSlideIndex = _React$useState4[1];
 
+  var isMobileReversed = elementOrder === 'reversed';
   var getSwiperInstance = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
     getSwiper && getSwiper(swiper);
@@ -133,6 +142,22 @@ var Instructions = function Instructions(_ref) {
       type: "video/mp4"
     }));
   }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
+  var renderMobileDots = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement("ul", {
+      className: cn('articles-dots', {
+        reversed: isMobileReversed
+      }),
+      "data-testid": "".concat(testIdPrefix, "-articles-dots-mobile")
+    }, instructionItems.map(function (_item, i) {
+      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+        key: i,
+        className: cn('articles-dot', {
+          active: slideIndex === i
+        }, [getActiveCustomClass(i, slideIndex), instructionItem, mobileInstructionItem]),
+        onClick: handleArticleClick(i)
+      }));
+    }));
+  }, [instructionItems, dataAttrs, slideIndex, instructionItem, mobileInstructionItem, getActiveCustomClass, handleArticleClick, isMobileReversed]);
   var renderSlider = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(Swiper, {
       noSwiping: false,
@@ -235,7 +260,9 @@ var Instructions = function Instructions(_ref) {
       }),
       "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
     }, /*#__PURE__*/React.createElement("div", {
-      className: cn('articles-title-block')
+      className: cn('articles-title-block', {
+        reversed: isMobileReversed
+      })
     }, instructionItems.map(function (_ref6, i) {
       var itemTitle = _ref6.title;
       return slideIndex === i && /*#__PURE__*/React.createElement("div", _extends({
@@ -244,23 +271,8 @@ var Instructions = function Instructions(_ref) {
       }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, i + 1), {
         className: cn('articles-title', [mobileItemTitle])
       }), itemTitle);
-    })), /*#__PURE__*/React.createElement("ul", {
-      className: cn('articles-dots', {
-        'text-after': !!text
-      }),
-      "data-testid": "".concat(testIdPrefix, "-articles-dots-mobile")
-    }, instructionItems.map(function (_item, i) {
-      return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
-        key: i,
-        className: cn('articles-dot', {
-          active: slideIndex === i
-        }, [getActiveCustomClass(i, slideIndex), instructionItem, mobileInstructionItem]),
-        onClick: handleArticleClick(i)
-      }), /*#__PURE__*/React.createElement("span", {
-        className: cn('articles-dot-number')
-      }, i + 1));
     })));
-  }, [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]);
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mobileItemText, instructionItems, mobileItemTitle, slideIndex, isMobileReversed]);
   var renderArrows = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
       dataAttrs: {
@@ -287,7 +299,8 @@ var Instructions = function Instructions(_ref) {
   }, [handlePrevClick, handleNextClick, arrowsTheme, arrowPrev, arrowNext, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext, slideIndex, instructionItems.length]);
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
-      mask: pictureMask
+      mask: pictureMask,
+      reversed: isMobileReversed
     }),
     ref: rootRef
   }), /*#__PURE__*/React.createElement(Grid, {
@@ -304,11 +317,11 @@ var Instructions = function Instructions(_ref) {
       background: pictureBackgroundColor
     }),
     "data-testid": "".concat(testIdPrefix, "-picture")
-  }, renderPicture(), !!showArrows && renderArrows(), renderQrCode()), /*#__PURE__*/React.createElement("div", {
+  }, isMobileReversed && renderMobileArticles(), renderPicture(), !!showArrows && renderArrows(), renderQrCode()), renderMobileDots(), /*#__PURE__*/React.createElement("div", {
     className: cn('articles', {
       align: pictureAlign
     })
-  }, !!title && renderTitle('desktop'), renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
+  }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
 };
 
 Instructions.propTypes = {
@@ -345,10 +358,11 @@ Instructions.propTypes = {
   }).isRequired).isRequired,
   pictureAlign: PropTypes.oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
   pictureVerticalAlign: PropTypes.oneOf([pictureVerticalAlignTypes.CENTER, pictureVerticalAlignTypes.TOP, pictureVerticalAlignTypes.UNSET]),
-  pictureMask: PropTypes.oneOf([pictureMaskTypes.ANDROID, pictureMaskTypes.ANDROID_CROPPED, pictureMaskTypes.NEW_IPHONE, pictureMaskTypes.WHITE_IPHONE, pictureMaskTypes.BLACK_IPHONE, pictureMaskTypes.LAPTOP, pictureMaskTypes.IPHONE_12, pictureMaskTypes.IPHONE_CROPPED, pictureMaskTypes.NONE]),
+  pictureMask: PropTypes.oneOf([pictureMaskTypes.ANDROID, pictureMaskTypes.ANDROID_CROPPED, pictureMaskTypes.NEW_IPHONE, pictureMaskTypes.WHITE_IPHONE, pictureMaskTypes.BLACK_IPHONE, pictureMaskTypes.LAPTOP, pictureMaskTypes.LAPTOP_NEW, pictureMaskTypes.IPHONE_12, pictureMaskTypes.IPHONE_15, pictureMaskTypes.IPHONE_CROPPED, pictureMaskTypes.NONE]),
   pictureBackgroundColor: PropTypes.oneOf([pictureBackgroundColorTypes.SPB_SKY_0]),
   showArrows: PropTypes.bool,
   arrowsTheme: PropTypes.oneOf([arrowTheme.DARK, arrowTheme.PURPLE]),
+  elementOrder: PropTypes.oneOf([elementOrderTypes.DEFAULT, elementOrderTypes.REVERSED]),
   getSwiper: PropTypes.func
 };
 export default Instructions;

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

@@ -1,2 +1,2 @@
 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">;
+export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;

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

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { IconPosition, IBenefit, BackgroundType } from './types';
 import './style/BenefitsIcons.less';
 export interface IBenefitsIcons {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
     /** Позиция иконки */

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

@@ -43,7 +43,8 @@ var testIdPrefix = 'BenefitsIcons';
 var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-icons');
 
 var BenefitsIcons = function BenefitsIcons(_ref) {
-  var rootRef = _ref.rootRef,
+  var dataAttrs = _ref.dataAttrs,
+      rootRef = _ref.rootRef,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _ref$iconPosition,
       _ref$background = _ref.background,
@@ -86,13 +87,13 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
   }, [iconPosition, inOneColumn, resizeHandler]);
-  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({
       'one-column': inOneColumn,
       background: background
     }, [className, classes.root]),
     ref: rootRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
     className: classes.grid,
@@ -110,7 +111,9 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
     var title = _ref2.title,
         text = _ref2.text,
         icon = _ref2.icon,
-        alt = _ref2.alt;
+        alt = _ref2.alt,
+        itemClasses = _ref2.classes,
+        itemDataAttrs = _ref2.dataAttrs;
     var columnConfig = inOneColumn ? (0, _helpers.getOneColumnConfig)(iconPosition) : (0, _helpers["default"])(iconPosition, items.length, i);
     return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({
       className: cn('column', [classes.gridColumn]),
@@ -122,6 +125,8 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
       }
     }, columnConfig), /*#__PURE__*/React.createElement(_BenefitsIconsTile["default"], {
       className: cn('tile', [classes.item]),
+      classes: itemClasses,
+      dataAttrs: itemDataAttrs,
       title: title,
       text: text,
       icon: icon,
@@ -133,6 +138,9 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
 };
 
 BenefitsIcons.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _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])]),
@@ -140,9 +148,20 @@ BenefitsIcons.propTypes = {
   background: _propTypes["default"].oneOf(Object.values(_types.BackgroundEnum)),
   inOneColumn: _propTypes["default"].bool,
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    dataAttrs: _propTypes["default"].shape({
+      root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+    }),
+    classes: _propTypes["default"].shape({
+      root: _propTypes["default"].string,
+      icon: _propTypes["default"].string,
+      title: _propTypes["default"].string,
+      text: _propTypes["default"].string,
+      contentWrapper: _propTypes["default"].string
+    }),
     title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
     text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
-    icon: _propTypes["default"].node.isRequired
+    icon: _propTypes["default"].node.isRequired,
+    alt: _propTypes["default"].string
   }).isRequired).isRequired,
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({

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

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 require("core-js/modules/es.object.values.js");
 
 var React = _interopRequireWildcard(require("react"));
@@ -19,17 +21,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _types = require("./types");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 testIdPrefix = 'BenefitsIconsTile';
 var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-icons-tile');
 
 var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
-  var title = _ref.title,
+  var dataAttrs = _ref.dataAttrs,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      title = _ref.title,
       text = _ref.text,
       icon = _ref.icon,
       iconPosition = _ref.iconPosition,
@@ -40,7 +45,7 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
   var renderIcon = function renderIcon() {
     if (typeof icon === 'string') {
       return /*#__PURE__*/React.createElement("img", {
-        className: cn('img-icon'),
+        className: cn('img-icon', [classes.icon]),
         src: icon,
         alt: alt,
         "data-testid": "".concat(testIdPrefix, "-img")
@@ -48,32 +53,42 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
     }
 
     return /*#__PURE__*/React.createElement("div", {
-      className: cn('svg-icon'),
+      className: cn('svg-icon', [classes.icon]),
       "data-testid": "".concat(testIdPrefix, "-svg")
     }, icon);
   };
 
-  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({
       'icon-position': iconPosition,
       background: background,
       image: typeof icon === 'string'
-    }, [className]),
+    }, [className, classes.root]),
     "data-testid": "".concat(testIdPrefix, "-root")
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, renderIcon(), /*#__PURE__*/React.createElement("div", {
-    className: cn('content-wrapper')
+    className: cn('content-wrapper', [classes.contentWrapper])
   }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
-    className: cn('title'),
+    className: cn('title', [classes.title]),
     as: "h5"
   }, title), text && /*#__PURE__*/React.createElement("div", {
-    className: cn('content')
+    className: cn('content', [classes.text])
   }, text))));
 };
 
 BenefitsIconsTile.propTypes = {
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
   className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    icon: _propTypes["default"].string,
+    title: _propTypes["default"].string,
+    text: _propTypes["default"].string,
+    contentWrapper: _propTypes["default"].string
+  }),
   title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
   text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
   iconPosition: _propTypes["default"].oneOf(Object.values(_types.IconPositionEnum)),

package/dist/lib/components/BenefitsIcons/types.d.ts

@@ -1,6 +1,18 @@
 /// <reference types="react" />
 declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export interface IBenefit {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        icon?: string;
+        title?: string;
+        text?: string;
+        contentWrapper?: string;
+    };
     /** Заголовок бенефита */
     title?: string | React.ReactNode | React.ReactNode[];
     /** Основной текст в бенефите */

package/dist/lib/components/ImageBanner/ImageBanner.css

@@ -177,6 +177,9 @@ h5 {
   gap: 8px;
   margin-bottom: 16px;
 }
+.mfui-image-banner__ad-block {
+  margin: 0 0 16px auto;
+}
 @media screen and (min-width: 1024px) {
   .mfui-image-banner__ad-block {
     position: absolute;

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

@@ -43,6 +43,13 @@ export interface IImageBannerProps {
     classes?: {
         root?: string;
         image?: string;
+        title?: string;
+        description?: string;
+        cost?: string;
+        badgesContainer?: string;
+        badges?: string;
+        badge?: string;
+        adBlock?: string;
     };
     /** Ссылка на корневой элемент */
     rootRef?: Ref<HTMLDivElement>;

package/dist/lib/components/ImageBanner/ImageBanner.js

@@ -121,11 +121,12 @@ var ImageBanner = function ImageBanner(_ref2) {
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
 
   var renderBadges = !!badges.length && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('badges')
+    className: cn('badges', [classes.badges])
   }, badges.map(function (_ref3) {
     var text = _ref3.text,
         iconType = _ref3.iconType;
     return /*#__PURE__*/_react["default"].createElement(_uiCore.PriceBadge, {
+      className: classes.badge,
       theme: navTheme,
       iconType: iconType,
       key: text
@@ -133,22 +134,22 @@ var ImageBanner = function ImageBanner(_ref2) {
   }));
 
   var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('ad-block')
+    className: cn('ad-block', [classes.adBlock])
   }, adBlock);
 
   var renderContent = /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('content')
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('badges-container')
+    className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
-    className: cn('title'),
+    className: cn('title', [classes.title]),
     color: "inherit"
   }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
-    className: cn('description'),
+    className: cn('description', [classes.description]),
     as: "h5",
     color: "inherit"
   }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('cost')
+    className: cn('cost', [classes.cost])
   }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!_react["default"].Children.count(children) && /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('children')
   }, children));
@@ -191,7 +192,14 @@ ImageBanner.propTypes = {
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,
-    image: PropTypes.string
+    image: PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    cost: PropTypes.string,
+    badgesContainer: PropTypes.string,
+    badges: PropTypes.string,
+    badge: PropTypes.string,
+    adBlock: PropTypes.string
   }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType