@megafon/ui-shared 5.11.0 → 5.13.0

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/ButtonBanner/ButtonBanner.d.ts

@@ -5,6 +5,11 @@ export declare const ButtonColor: {
     readonly PURPLE: "purple";
 };
 declare type ButtonColorType = typeof ButtonColor[keyof typeof ButtonColor];
+export declare const ButtonTypes: {
+    readonly PRIMARY: "primary";
+    readonly OUTLINE: "outline";
+};
+declare type ButtonTypesType = typeof ButtonTypes[keyof typeof ButtonTypes];
 export declare const ButtonTarget: {
     readonly SELF: "_self";
     readonly BLANK: "_blank";
@@ -46,6 +51,8 @@ export interface IButtonBannerProps {
     buttonTarget?: ButtonTargetType;
     /** Цвет кнопки */
     buttonColor?: ButtonColorType;
+    /** Тип кнопки */
+    buttonType?: ButtonTypesType;
     /** Rel - атрибут тега <a> */
     buttonRel?: string;
     /** Масштабирование изображения */

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ImageScaling = exports.ButtonTarget = exports.ButtonColor = void 0;
+exports["default"] = exports.ImageScaling = exports.ButtonTarget = exports.ButtonTypes = exports.ButtonColor = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -30,6 +30,11 @@ var ButtonColor = {
   PURPLE: 'purple'
 };
 exports.ButtonColor = ButtonColor;
+var ButtonTypes = {
+  PRIMARY: 'primary',
+  OUTLINE: 'outline'
+};
+exports.ButtonTypes = ButtonTypes;
 var ButtonTarget = {
   SELF: '_self',
   BLANK: '_blank'
@@ -67,6 +72,8 @@ var ButtonBanner = function ButtonBanner(_ref) {
       buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
       _ref$buttonColor = _ref.buttonColor,
       buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
+      _ref$buttonType = _ref.buttonType,
+      buttonType = _ref$buttonType === void 0 ? 'primary' : _ref$buttonType,
       buttonRel = _ref.buttonRel,
       _ref$imageScaling = _ref.imageScaling,
       imageScaling = _ref$imageScaling === void 0 ? 'cover' : _ref$imageScaling,
@@ -81,6 +88,7 @@ var ButtonBanner = function ButtonBanner(_ref) {
     rel: buttonRel,
     target: buttonTarget,
     theme: buttonColor,
+    type: buttonType,
     onClick: onButtonClick,
     download: buttonDownload
   }, buttonText);
@@ -138,6 +146,7 @@ ButtonBanner.propTypes = {
   buttonDownload: PropTypes.bool,
   buttonTarget: PropTypes.oneOf(Object.values(ButtonTarget)),
   buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
+  buttonType: PropTypes.oneOf(Object.values(ButtonTypes)),
   buttonRel: PropTypes.string,
   onButtonClick: PropTypes.func
 };

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

package/dist/lib/components/Instructions/Instructions.css

@@ -11,7 +11,7 @@ h5 {
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-instructions__title_resolution_mobile {
-    margin-bottom: 56px;
+    margin-bottom: 40px;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -59,6 +59,9 @@ h5 {
             align-items: unset;
   }
 }
+.mfui-instructions__text {
+  margin-top: 48px;
+}
 @media screen and (max-width: 1023px) {
   .mfui-instructions__text {
     text-align: center;
@@ -72,12 +75,7 @@ h5 {
 }
 @media screen and (max-width: 1023px) {
   .mfui-instructions__picture {
-    margin: 0 auto 32px;
-  }
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-instructions__picture {
-    margin: 0 auto 48px;
+    margin: 0 auto;
   }
 }
 @media screen and (min-width: 1024px) {
@@ -235,6 +233,35 @@ h5 {
   border-radius: 20px;
   overflow: hidden;
 }
+.mfui-instructions_mask_iphone-15 .mfui-instructions__img-wrapper {
+  height: 487px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-instructions_mask_iphone-15 .mfui-instructions__img-wrapper:before {
+    display: none;
+  }
+}
+.mfui-instructions_mask_iphone-15 .mfui-instructions__device-screen {
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 486px;
+  margin: auto;
+  background: url('./img/iphone15.png') 50% no-repeat;
+  background-size: contain;
+}
+.mfui-instructions_mask_iphone-15 .mfui-instructions__swiper {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  width: 217px;
+  height: 468px;
+  margin: auto;
+  border-radius: 20px;
+  overflow: hidden;
+}
 .mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper {
   height: 420px;
   min-height: 420px;
@@ -324,7 +351,10 @@ h5 {
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-instructions_mask_laptop .mfui-instructions__img-wrapper {
-    height: 283px;
+    height: 0;
+    padding-bottom: 53.4%;
+    background: url('./img/laptop.png') 50% 0% no-repeat;
+    background-size: 100%;
   }
 }
 @media screen and (min-width: 480px) and (max-width: 767px) {
@@ -410,11 +440,95 @@ h5 {
             transform: translate(-50%, -53%);
   }
 }
+@media screen and (max-width: 1023px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__img-wrapper {
+    height: 0;
+    padding-bottom: 58.9%;
+    background: url('./img/laptop-new.png') 50% 0% no-repeat;
+    background-size: 100%;
+  }
+}
+.mfui-instructions_mask_laptop-new .mfui-instructions__img-wrapper:before {
+  display: none;
+}
+.mfui-instructions_mask_laptop-new .mfui-instructions__device-screen {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  background: url('./img/laptop-new.png') 50% 0% no-repeat;
+  background-size: 100%;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__device-screen {
+    width: 530px;
+  }
+}
+@media screen and (min-width: 480px) and (max-width: 767px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__device-screen {
+    width: 450px;
+  }
+}
+@media screen and (max-width: 479px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__device-screen {
+    width: 270px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__device-screen {
+    background: url('./img/laptop-new.png') 50% no-repeat;
+    background-size: contain;
+  }
+}
+.mfui-instructions_mask_laptop-new .mfui-instructions__swiper {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  left: 50%;
+  width: 78%;
+  margin: auto;
+  overflow: hidden;
+  -webkit-transform: translate(-49.5%, 0);
+          transform: translate(-49.5%, 0);
+}
+@media screen and (min-width: 480px) and (max-width: 767px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__swiper {
+    top: 7px;
+    max-width: 415px;
+  }
+}
+@media screen and (max-width: 479px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__swiper {
+    max-width: 302px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__swiper {
+    top: 12px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions_mask_laptop-new .mfui-instructions__swiper {
+    top: 50%;
+    -webkit-transform: translate(-49.5%, -55%);
+            transform: translate(-49.5%, -55%);
+  }
+}
 .mfui-instructions__slide {
   -ms-flex-negative: 0;
       flex-shrink: 0;
   height: 100%;
 }
+@media screen and (max-width: 767px) {
+  .mfui-instructions__articles {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-instructions__articles {
+    margin-top: 32px;
+  }
+}
 @media screen and (min-width: 1024px) {
   .mfui-instructions__articles {
     -webkit-box-ordinal-group: 2;
@@ -433,9 +547,6 @@ h5 {
   padding: 0;
   list-style-type: none;
 }
-.mfui-instructions__articles-list_text-after {
-  margin-bottom: 48px;
-}
 @media screen and (min-width: 1024px) {
   .mfui-instructions__articles-list_mobile {
     display: none;
@@ -476,8 +587,7 @@ h5 {
     margin-bottom: 0;
   }
 }
-.mfui-instructions__articles-item-dot,
-.mfui-instructions__articles-dot {
+.mfui-instructions__articles-item-dot {
   position: absolute;
   display: inline-block;
   width: 40px;
@@ -492,13 +602,11 @@ h5 {
   cursor: pointer;
 }
 @media screen and (max-width: 479px) {
-  .mfui-instructions__articles-item-dot,
-  .mfui-instructions__articles-dot {
+  .mfui-instructions__articles-item-dot {
     min-width: 40px;
   }
 }
-.mfui-instructions__articles-item-dot:before,
-.mfui-instructions__articles-dot:before {
+.mfui-instructions__articles-item-dot:before {
   content: '';
   position: absolute;
   top: 50%;
@@ -509,8 +617,7 @@ h5 {
   -webkit-transition: all 0.3s ease;
   transition: all 0.3s ease;
 }
-.mfui-instructions__articles-item-dot-number,
-.mfui-instructions__articles-dot-number {
+.mfui-instructions__articles-item-dot-number {
   position: relative;
 }
 .mfui-instructions__articles-item-title {
@@ -537,44 +644,51 @@ h5 {
   padding: 0;
   list-style-type: none;
 }
-.mfui-instructions__articles-dots_text-after {
-  margin-bottom: 48px;
-}
-.mfui-instructions__articles-dot {
-  position: relative;
-}
 @media screen and (max-width: 767px) {
-  .mfui-instructions__articles-dot {
-    margin-right: 20px;
+  .mfui-instructions__articles-dots {
+    margin-top: 16px;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-instructions__articles-dot {
-    margin-right: 40px;
+  .mfui-instructions__articles-dots {
+    margin-top: 24px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__articles-dots {
+    display: none;
   }
 }
+.mfui-instructions__articles-dots_text-after {
+  margin-bottom: 48px;
+}
+.mfui-instructions__articles-dot {
+  position: relative;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 12px;
+  border-radius: 4px;
+  background: var(--spbSky2);
+  cursor: pointer;
+}
 .mfui-instructions__articles-dot:hover,
 .mfui-instructions__articles-dot_active {
-  color: var(--stcWhite);
-}
-.mfui-instructions__articles-dot:hover:before,
-.mfui-instructions__articles-dot_active:before {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   background: var(--brandGreen);
 }
+.mfui-instructions__articles-dot_active {
+  width: 20px;
+}
 .mfui-instructions__articles-dot:last-child {
   margin-right: 0;
 }
 .mfui-instructions__articles-title-block {
+  margin: 0 auto;
   text-align: center;
 }
 @media screen and (max-width: 767px) {
   .mfui-instructions__articles-title-block {
     width: 55%;
-    margin: 0 auto 24px;
   }
 }
 @media screen and (max-width: 479px) {
@@ -585,7 +699,6 @@ h5 {
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-instructions__articles-title-block {
     width: 55%;
-    margin: 0 auto 32px;
   }
 }
 .mfui-instructions__articles-title {
@@ -651,3 +764,27 @@ h5 {
   line-height: 12px;
   text-align: center;
 }
+.mfui-instructions_reversed .mfui-instructions__title_resolution_mobile {
+  margin-bottom: 16px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-instructions_reversed .mfui-instructions__picture {
+    max-height: 100%;
+    margin-bottom: 0;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .mfui-instructions_reversed .mfui-instructions__articles {
+    display: none;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-instructions_reversed .mfui-instructions__articles-title-block {
+    margin-bottom: 32px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-instructions_reversed .mfui-instructions__articles-title-block {
+    margin-bottom: 40px;
+  }
+}

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

@@ -17,7 +17,9 @@ export declare const pictureMaskTypes: {
     readonly BLACK_IPHONE: "black-iphone";
     readonly WHITE_IPHONE: "white-iphone";
     readonly LAPTOP: "laptop";
+    readonly LAPTOP_NEW: "laptop-new";
     readonly IPHONE_12: "iphone-12";
+    readonly IPHONE_15: "iphone-15";
     readonly IPHONE_CROPPED: "iphone-cropped";
     readonly NONE: "none";
 };
@@ -28,11 +30,16 @@ export declare const arrowTheme: {
     readonly PURPLE: "purple";
     readonly DARK: "dark";
 };
+export declare const elementOrderTypes: {
+    readonly DEFAULT: "default";
+    readonly REVERSED: "reversed";
+};
 declare type PictureAlignTypesType = typeof pictureAlignTypes[keyof typeof pictureAlignTypes];
 declare type PictureVerticalAlignTypesType = typeof pictureVerticalAlignTypes[keyof typeof pictureVerticalAlignTypes];
 declare type PictureMaskTypesType = typeof pictureMaskTypes[keyof typeof pictureMaskTypes];
 declare type PictureBackgroundColorsType = typeof pictureBackgroundColorTypes[keyof typeof pictureBackgroundColorTypes];
 declare type ArrowThemeType = typeof arrowTheme[keyof typeof arrowTheme];
+declare type ElementOrderType = typeof elementOrderTypes[keyof typeof elementOrderTypes];
 export declare type InstructionItemType = {
     title: string | React.ReactNode | React.ReactNode[];
     mediaUrl: string;
@@ -87,6 +94,8 @@ export interface IInstructionsProps {
     showArrows?: boolean;
     /** Цветовая тема стрелок навигации */
     arrowsTheme?: ArrowThemeType;
+    /** Вертикальный порядок элементов на мобильных устройствах и планшетах */
+    elementOrder?: ElementOrderType;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.arrowTheme = exports.pictureBackgroundColorTypes = exports.pictureMaskTypes = exports.pictureVerticalAlignTypes = exports.pictureAlignTypes = void 0;
+exports["default"] = exports.elementOrderTypes = exports.arrowTheme = exports.pictureBackgroundColorTypes = exports.pictureMaskTypes = exports.pictureVerticalAlignTypes = exports.pictureAlignTypes = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -44,7 +44,9 @@ 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'
 };
@@ -58,6 +60,11 @@ var arrowTheme = {
   DARK: 'dark'
 };
 exports.arrowTheme = arrowTheme;
+var elementOrderTypes = {
+  DEFAULT: 'default',
+  REVERSED: 'reversed'
+};
+exports.elementOrderTypes = elementOrderTypes;
 var testIdPrefix = 'Instructions';
 var cn = (0, _uiHelpers.cnCreate)('mfui-instructions');
 var swiperSlideCn = cn('slide');
@@ -92,6 +99,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["default"].useState(),
@@ -104,6 +113,8 @@ var Instructions = function Instructions(_ref) {
       slideIndex = _React$useState4[0],
       setSlideIndex = _React$useState4[1];
 
+  var isMobileReversed = elementOrder === 'reversed';
+
   var getSwiperInstance = _react["default"].useCallback(function (swiper) {
     setSwiperInstance(swiper);
     getSwiper && getSwiper(swiper);
@@ -160,6 +171,23 @@ var Instructions = function Instructions(_ref) {
     }));
   }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
 
+  var renderMobileDots = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement("ul", {
+      className: cn('articles-dots', {
+        reversed: isMobileReversed
+      }),
+      "data-testid": "".concat(testIdPrefix, "-articles-dots-mobile")
+    }, 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 === i
+        }, [getActiveCustomClass(i, slideIndex), instructionItem, mobileInstructionItem]),
+        onClick: handleArticleClick(i)
+      }));
+    }));
+  }, [instructionItems, dataAttrs, slideIndex, instructionItem, mobileInstructionItem, getActiveCustomClass, handleArticleClick, isMobileReversed]);
+
   var renderSlider = _react["default"].useCallback(function () {
     return /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
       noSwiping: false,
@@ -268,7 +296,9 @@ var Instructions = function Instructions(_ref) {
       }),
       "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
     }, /*#__PURE__*/_react["default"].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["default"].createElement("div", (0, _extends2["default"])({
@@ -277,23 +307,8 @@ var Instructions = function Instructions(_ref) {
       }, (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
-      }),
-      "data-testid": "".concat(testIdPrefix, "-articles-dots-mobile")
-    }, 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 === i
-        }, [getActiveCustomClass(i, slideIndex), instructionItem, mobileInstructionItem]),
-        onClick: handleArticleClick(i)
-      }), /*#__PURE__*/_react["default"].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["default"].useCallback(function () {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiCore.NavArrow, {
@@ -322,7 +337,8 @@ var Instructions = function Instructions(_ref) {
 
   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
+      mask: pictureMask,
+      reversed: isMobileReversed
     }),
     ref: rootRef
   }), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
@@ -339,11 +355,11 @@ var Instructions = function Instructions(_ref) {
       background: pictureBackgroundColor
     }),
     "data-testid": "".concat(testIdPrefix, "-picture")
-  }, renderPicture(), !!showArrows && renderArrows(), renderQrCode()), /*#__PURE__*/_react["default"].createElement("div", {
+  }, isMobileReversed && renderMobileArticles(), renderPicture(), !!showArrows && renderArrows(), renderQrCode()), renderMobileDots(), /*#__PURE__*/_react["default"].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 = {
@@ -380,10 +396,11 @@ Instructions.propTypes = {
   }).isRequired).isRequired,
   pictureAlign: _propTypes["default"].oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
   pictureVerticalAlign: _propTypes["default"].oneOf([pictureVerticalAlignTypes.CENTER, pictureVerticalAlignTypes.TOP, pictureVerticalAlignTypes.UNSET]),
-  pictureMask: _propTypes["default"].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["default"].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["default"].oneOf([pictureBackgroundColorTypes.SPB_SKY_0]),
   showArrows: _propTypes["default"].bool,
   arrowsTheme: _propTypes["default"].oneOf([arrowTheme.DARK, arrowTheme.PURPLE]),
+  elementOrder: _propTypes["default"].oneOf([elementOrderTypes.DEFAULT, elementOrderTypes.REVERSED]),
   getSwiper: _propTypes["default"].func
 };
 var _default = Instructions;

package/dist/lib/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">;