@megafon/ui-shared 5.10.2 → 5.12.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.12.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.11.0...@megafon/ui-shared@5.12.0) (2024-06-10)
+
+
+### Bug Fixes
+
+* **imagebanner:** fix ad block position ([6f958b4](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/6f958b477cc936bf969e244a07dc0ed63279484b))
+
+
+### Features
+
+* **benefitsicons:** add dataAttrs and classes ([815db75](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/815db75aece85803a0055a531bd92db49d514652))
+* **benefitsicons:** review fixes ([229c5f7](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/229c5f73fa9609495a146cfa562db2478752c3b4))
+* **imagebanner:** add classes props for ImageBanner ([42d2738](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/42d2738a6c77bf780b9a47fd27353083d0f7d7a0))
+* **insctructions:** add new views ([4470aec](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/4470aec0acaf59ae2d3b0979c59ec7760237221c))
+
+
+
+
+
+# [5.11.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.10.2...@megafon/ui-shared@5.11.0) (2024-06-03)
+
+
+### Features
+
+* **storebanner:** change device mask ([4d52954](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/4d52954459b944d100c6cd657808dd23ab7bb674))
+
+
+
+
+
 ## [5.10.2](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.10.1...@megafon/ui-shared@5.10.2) (2024-05-27)
 
 **Note:** Version bump only for package @megafon/ui-shared

package/dist/es/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/es/components/BenefitsIcons/BenefitsIcons.js

@@ -4,7 +4,7 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { Grid, GridColumn } from '@megafon/ui-core';
-import { cnCreate, breakpoints } from '@megafon/ui-helpers';
+import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
 import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
@@ -16,7 +16,8 @@ var testIdPrefix = 'BenefitsIcons';
 var cn = 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,
@@ -59,13 +60,13 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
       window.removeEventListener('resize', resizeHandlerThrottled);
     };
   }, [iconPosition, inOneColumn, resizeHandler]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", _extends({}, 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(Grid, {
     className: classes.grid,
@@ -83,7 +84,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 ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
     return /*#__PURE__*/React.createElement(GridColumn, _extends({
       className: cn('column', [classes.gridColumn]),
@@ -95,6 +98,8 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
       }
     }, columnConfig), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
       className: cn('tile', [classes.item]),
+      classes: itemClasses,
+      dataAttrs: itemDataAttrs,
       title: title,
       text: text,
       icon: icon,
@@ -106,6 +111,9 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
 };
 
 BenefitsIcons.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
@@ -113,9 +121,20 @@ BenefitsIcons.propTypes = {
   background: PropTypes.oneOf(Object.values(BackgroundEnum)),
   inOneColumn: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.shape({
+    dataAttrs: PropTypes.shape({
+      root: PropTypes.objectOf(PropTypes.string.isRequired)
+    }),
+    classes: PropTypes.shape({
+      root: PropTypes.string,
+      icon: PropTypes.string,
+      title: PropTypes.string,
+      text: PropTypes.string,
+      contentWrapper: PropTypes.string
+    }),
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-    icon: PropTypes.node.isRequired
+    icon: PropTypes.node.isRequired,
+    alt: PropTypes.string
   }).isRequired).isRequired,
   className: PropTypes.string,
   classes: PropTypes.shape({

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

@@ -1,7 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.object.values.js";
 import * as React from 'react';
 import { Header } from '@megafon/ui-core';
-import { cnCreate } from '@megafon/ui-helpers';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { IconPositionEnum, BackgroundEnum } from "./types";
 import "./style/BenefitsIconsTile.css";
@@ -9,7 +10,10 @@ var testIdPrefix = 'BenefitsIconsTile';
 var cn = 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,
@@ -20,7 +24,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")
@@ -28,32 +32,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", _extends({}, 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(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.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    icon: PropTypes.string,
+    title: PropTypes.string,
+    text: PropTypes.string,
+    contentWrapper: PropTypes.string
+  }),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),

package/dist/es/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/es/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/es/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/es/components/ImageBanner/ImageBanner.js

@@ -92,32 +92,33 @@ var ImageBanner = function ImageBanner(_ref2) {
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
   var renderBadges = !!badges.length && /*#__PURE__*/React.createElement("div", {
-    className: cn('badges')
+    className: cn('badges', [classes.badges])
   }, badges.map(function (_ref3) {
     var text = _ref3.text,
         iconType = _ref3.iconType;
     return /*#__PURE__*/React.createElement(PriceBadge, {
+      className: classes.badge,
       theme: navTheme,
       iconType: iconType,
       key: text
     }, text);
   }));
   var renderAdBlock = !!adBlock && /*#__PURE__*/React.createElement("div", {
-    className: cn('ad-block')
+    className: cn('ad-block', [classes.adBlock])
   }, adBlock);
   var renderContent = /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('badges-container')
+    className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(Header, {
-    className: cn('title'),
+    className: cn('title', [classes.title]),
     color: "inherit"
   }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(Header, {
-    className: cn('description'),
+    className: cn('description', [classes.description]),
     as: "h5",
     color: "inherit"
   }, typeof description === 'string' ? convert(description, titleConvertConfig) : description), !!cost && /*#__PURE__*/React.createElement("div", {
-    className: cn('cost')
+    className: cn('cost', [classes.cost])
   }, convert(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
     className: cn('children')
   }, children));
@@ -158,7 +159,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/es/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/es/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;
 }