@megafon/ui-shared 5.5.1 → 5.6.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.6.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.5.1...@megafon/ui-shared@5.6.0) (2024-02-07)
+
+
+### Features
+
+* **instructions:** add background, arrows, qr-code to Instructions component ([6f9d5ca](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/6f9d5ca210d3f5f9aae2f8d2528ce1910c88017c))
+* **instructions:** review fixes ([d036717](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/d0367176329a4e9f875914b6860056c2c8fecd0c))
+
+
+
+
+
 ## [5.5.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.5.0...@megafon/ui-shared@5.5.1) (2024-02-05)
 
 

package/dist/es/components/Instructions/Instructions.css

@@ -45,12 +45,27 @@ h5 {
             justify-content: center;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__wrapper_vertical-align_top {
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__wrapper_vertical-align_unset {
+    -webkit-box-align: unset;
+        -ms-flex-align: unset;
+            align-items: unset;
+  }
+}
 @media screen and (max-width: 1023px) {
   .mfui-instructions__text {
     text-align: center;
   }
 }
 .mfui-instructions__picture {
+  position: relative;
   max-width: 530px;
   max-height: 490px;
   overflow: hidden;
@@ -81,12 +96,6 @@ h5 {
     margin-right: 40px;
   }
 }
-@media screen and (min-width: 1024px) {
-  .mfui-instructions__picture_vertical-align_top {
-    -ms-flex-item-align: start;
-        align-self: flex-start;
-  }
-}
 .mfui-instructions_mask_none .mfui-instructions__slide {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -226,6 +235,93 @@ h5 {
   border-radius: 20px;
   overflow: hidden;
 }
+.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper {
+  height: 420px;
+  min-height: 420px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper {
+    height: 440px;
+    min-height: 440px;
+  }
+}
+.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  width: 324px;
+  height: 1px;
+  margin: 0 auto;
+  background: var(--spbSky2);
+}
+.mfui-instructions_mask_android-cropped .mfui-instructions__device-screen {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 510px;
+  margin-top: 24px;
+  background: url('./img/android-new.png') 50% no-repeat;
+  background-size: contain;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions_mask_android-cropped .mfui-instructions__device-screen {
+    height: 574px;
+  }
+}
+.mfui-instructions_mask_android-cropped .mfui-instructions__swiper {
+  position: absolute;
+  top: 54px;
+  right: 0;
+  left: 0;
+  width: 222px;
+  margin: auto;
+  overflow: hidden;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions_mask_android-cropped .mfui-instructions__swiper {
+    top: 58px;
+    width: 250px;
+  }
+}
+.mfui-instructions_mask_iphone-cropped .mfui-instructions__img-wrapper {
+  height: 420px;
+  min-height: 420px;
+}
+.mfui-instructions_mask_iphone-cropped .mfui-instructions__img-wrapper:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  width: 324px;
+  height: 1px;
+  margin: 0 auto;
+  background: var(--spbSky2);
+}
+.mfui-instructions_mask_iphone-cropped .mfui-instructions__device-screen {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 469px;
+  margin-top: 24px;
+  background: url('./img/iphone-new.png') 50% no-repeat;
+  background-size: contain;
+}
+.mfui-instructions_mask_iphone-cropped .mfui-instructions__swiper {
+  position: absolute;
+  top: 38px;
+  right: 0;
+  left: 0;
+  width: 205px;
+  margin: auto;
+  overflow: hidden;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-instructions_mask_laptop .mfui-instructions__img-wrapper {
     height: 283px;
@@ -497,3 +593,61 @@ h5 {
   line-height: 24px;
   font-weight: 400;
 }
+.mfui-instructions__picture_background_spbSky0 {
+  border-radius: 12px;
+  background-color: var(--spbSky0);
+}
+.mfui-instructions__picture_background_spbSky0 .mfui-instructions__img-wrapper:before {
+  display: none;
+}
+.mfui-instructions__arrow {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+@media screen and (max-width: 767px) {
+  .mfui-instructions__arrow {
+    display: none;
+  }
+}
+.mfui-instructions__arrow_prev {
+  left: 24px;
+}
+.mfui-instructions__arrow_next {
+  right: 24px;
+}
+.mfui-instructions__qr-code {
+  position: absolute;
+  top: 12px;
+  right: 64px;
+  z-index: 3;
+  display: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 126px;
+  padding: 12px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-instructions__qr-code {
+    display: block;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-instructions__qr-code {
+    right: 44px;
+  }
+}
+.mfui-instructions__qr-code-image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.mfui-instructions__qr-code-text {
+  margin-bottom: 12px;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 12px;
+  text-align: center;
+}

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

@@ -8,24 +8,40 @@ export declare const pictureAlignTypes: {
 export declare const pictureVerticalAlignTypes: {
     CENTER: string;
     TOP: string;
+    UNSET: string;
 };
 export declare const pictureMaskTypes: {
     readonly ANDROID: "android";
+    readonly ANDROID_CROPPED: "android-cropped";
     readonly NEW_IPHONE: "new-iphone";
     readonly BLACK_IPHONE: "black-iphone";
     readonly WHITE_IPHONE: "white-iphone";
     readonly LAPTOP: "laptop";
     readonly IPHONE_12: "iphone-12";
+    readonly IPHONE_CROPPED: "iphone-cropped";
     readonly NONE: "none";
 };
+export declare const pictureBackgroundColorTypes: {
+    readonly SPB_SKY_0: "spbSky0";
+};
+export declare const arrowTheme: {
+    readonly PURPLE: "purple";
+    readonly DARK: "dark";
+};
 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];
 export declare type InstructionItemType = {
     title: string | React.ReactNode | React.ReactNode[];
     mediaUrl: string;
     isVideo: boolean;
     imageAlt?: string;
+    /** Ссылка на изображение с QR-кодом */
+    qrCode?: string;
+    /** Текст для плашки с изображением QR-кода */
+    qrCodeText?: string | React.ReactNode | React.ReactNode[];
 };
 export interface IInstructionsProps {
     /** Дополнительные data атрибуты к внутренним элементам */
@@ -34,6 +50,9 @@ export interface IInstructionsProps {
         item?: Record<string, string>;
         image?: Record<string, string>;
         mobileItemText?: Record<string, string>;
+        wrapper?: Record<string, string>;
+        arrowPrev?: Record<string, string>;
+        arrowNext?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: Ref<HTMLDivElement>;
@@ -47,9 +66,11 @@ export interface IInstructionsProps {
         mobileItemTitle?: string;
         instructionItemImg?: string;
         additionalText?: string;
+        arrowPrev?: string;
+        arrowNext?: string;
     };
     /** Заголовок инструкции */
-    title: string;
+    title?: string;
     /** Пункты инструкции */
     instructionItems: InstructionItemType[];
     /** Описание после инструкции */
@@ -60,6 +81,12 @@ export interface IInstructionsProps {
     pictureVerticalAlign?: PictureVerticalAlignTypesType;
     /** Маска изображения */
     pictureMask?: PictureMaskTypesType;
+    /** Цвет фона изображения */
+    pictureBackgroundColor?: PictureBackgroundColorsType;
+    /** Показать стрелки для смены пунктов инструкции */
+    showArrows?: boolean;
+    /** Цветовая тема стрелок навигации */
+    arrowsTheme?: ArrowThemeType;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }

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

@@ -6,7 +6,7 @@ import "core-js/modules/es.array.map.js";
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
-import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
+import { Grid, GridColumn, Header, NavArrow, Paragraph, Tile } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs, titleConvertConfig, convert, textConvertConfig } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { Swiper, SwiperSlide } from 'swiper/react';
@@ -17,17 +17,27 @@ export var pictureAlignTypes = {
 };
 export var pictureVerticalAlignTypes = {
   CENTER: 'center',
-  TOP: 'top'
+  TOP: 'top',
+  UNSET: 'unset'
 };
 export var pictureMaskTypes = {
   ANDROID: 'android',
+  ANDROID_CROPPED: 'android-cropped',
   NEW_IPHONE: 'new-iphone',
   BLACK_IPHONE: 'black-iphone',
   WHITE_IPHONE: 'white-iphone',
   LAPTOP: 'laptop',
   IPHONE_12: 'iphone-12',
+  IPHONE_CROPPED: 'iphone-cropped',
   NONE: 'none'
 };
+export var pictureBackgroundColorTypes = {
+  SPB_SKY_0: 'spbSky0'
+};
+export var arrowTheme = {
+  PURPLE: 'purple',
+  DARK: 'dark'
+};
 var testIdPrefix = 'Instructions';
 var cn = cnCreate('mfui-instructions');
 var swiperSlideCn = cn('slide');
@@ -45,7 +55,10 @@ var Instructions = function Instructions(_ref) {
       mobileItemTitle = _ref$classes.mobileItemTitle,
       instructionItemImg = _ref$classes.instructionItemImg,
       additionalText = _ref$classes.additionalText,
-      title = _ref.title,
+      arrowPrev = _ref$classes.arrowPrev,
+      arrowNext = _ref$classes.arrowNext,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
       instructionItems = _ref.instructionItems,
       _ref$pictureAlign = _ref.pictureAlign,
       pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
@@ -53,8 +66,12 @@ var Instructions = function Instructions(_ref) {
       pictureVerticalAlign = _ref$pictureVerticalA === void 0 ? 'center' : _ref$pictureVerticalA,
       _ref$pictureMask = _ref.pictureMask,
       pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+      pictureBackgroundColor = _ref.pictureBackgroundColor,
       getSwiper = _ref.getSwiper,
       text = _ref.additionalText,
+      showArrows = _ref.showArrows,
+      _ref$arrowsTheme = _ref.arrowsTheme,
+      arrowsTheme = _ref$arrowsTheme === void 0 ? arrowTheme.DARK : _ref$arrowsTheme,
       children = _ref.children;
 
   var _React$useState = React.useState(),
@@ -88,6 +105,20 @@ var Instructions = function Instructions(_ref) {
     var activeIndex = _ref2.activeIndex;
     setSlideIndex(activeIndex);
   }, []);
+  var handlePrevClick = React.useCallback(function () {
+    if (!swiperInstance) {
+      return;
+    }
+
+    swiperInstance.slidePrev();
+  }, [swiperInstance]);
+  var handleNextClick = React.useCallback(function () {
+    if (!swiperInstance) {
+      return;
+    }
+
+    swiperInstance.slideNext();
+  }, [swiperInstance]);
   var renderVideo = React.useCallback(function (mediaUrl, index) {
     return /*#__PURE__*/React.createElement("video", _extends({
       loop: true,
@@ -132,6 +163,24 @@ var Instructions = function Instructions(_ref) {
       as: "h2"
     }, convert(title, titleConvertConfig));
   }, [title]);
+  var renderQrCode = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, instructionItems.map(function (_ref4, i) {
+      var qrCode = _ref4.qrCode,
+          qrCodeText = _ref4.qrCodeText;
+      return slideIndex === i && !!qrCode && /*#__PURE__*/React.createElement(Tile, {
+        className: cn('qr-code'),
+        radius: "rounded",
+        shadowLevel: "default",
+        key: qrCode
+      }, !!qrCodeText && /*#__PURE__*/React.createElement("div", {
+        className: cn('qr-code-text')
+      }, qrCodeText), /*#__PURE__*/React.createElement("img", {
+        src: qrCode,
+        className: cn('qr-code-image'),
+        alt: "QR-\u043A\u043E\u0434"
+      }));
+    }));
+  }, [instructionItems, slideIndex]);
   var renderText = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(Paragraph, {
       className: cn('text', [additionalText]),
@@ -157,8 +206,8 @@ var Instructions = function Instructions(_ref) {
         desktop: true
       }),
       "data-testid": "".concat(testIdPrefix, "-articles-list-desktop")
-    }, instructionItems.map(function (_ref4, i) {
-      var itemTitle = _ref4.title;
+    }, instructionItems.map(function (_ref5, i) {
+      var itemTitle = _ref5.title;
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -187,8 +236,8 @@ var Instructions = function Instructions(_ref) {
       "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('articles-title-block')
-    }, instructionItems.map(function (_ref5, i) {
-      var itemTitle = _ref5.title;
+    }, instructionItems.map(function (_ref6, i) {
+      var itemTitle = _ref6.title;
       return slideIndex === i && /*#__PURE__*/React.createElement("div", _extends({
         key: i,
         "data-index": i
@@ -212,6 +261,30 @@ var Instructions = function Instructions(_ref) {
       }, 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]);
+  var renderArrows = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
+      },
+      className: cn('arrow', {
+        prev: true
+      }, [arrowPrev]),
+      theme: arrowsTheme,
+      disabled: slideIndex === 0,
+      onClick: handlePrevClick
+    }), /*#__PURE__*/React.createElement(NavArrow, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
+      },
+      className: cn('arrow', {
+        next: true
+      }, [arrowNext]),
+      view: "next",
+      theme: arrowsTheme,
+      disabled: slideIndex === instructionItems.length - 1,
+      onClick: handleNextClick
+    }));
+  }, [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
@@ -221,19 +294,21 @@ var Instructions = function Instructions(_ref) {
     hAlign: "center"
   }, /*#__PURE__*/React.createElement(GridColumn, {
     all: "12"
-  }, renderTitle('mobile'), /*#__PURE__*/React.createElement("div", {
-    className: cn('wrapper')
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !!title && renderTitle('mobile'), /*#__PURE__*/React.createElement("div", _extends({
+    className: cn('wrapper', {
+      'vertical-align': pictureVerticalAlign
+    })
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper)), /*#__PURE__*/React.createElement("div", {
     className: cn('picture', {
       align: pictureAlign,
-      'vertical-align': pictureVerticalAlign
+      background: pictureBackgroundColor
     }),
     "data-testid": "".concat(testIdPrefix, "-picture")
-  }, renderPicture()), /*#__PURE__*/React.createElement("div", {
+  }, renderPicture(), !!showArrows && renderArrows(), renderQrCode()), /*#__PURE__*/React.createElement("div", {
     className: cn('articles', {
       align: pictureAlign
     })
-  }, renderTitle('desktop'), renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
+  }, !!title && renderTitle('desktop'), renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
 };
 
 Instructions.propTypes = {
@@ -241,7 +316,10 @@ Instructions.propTypes = {
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     item: PropTypes.objectOf(PropTypes.string.isRequired),
     image: PropTypes.objectOf(PropTypes.string.isRequired),
-    mobileItemText: PropTypes.objectOf(PropTypes.string.isRequired)
+    mobileItemText: PropTypes.objectOf(PropTypes.string.isRequired),
+    wrapper: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowPrev: PropTypes.objectOf(PropTypes.string.isRequired),
+    arrowNext: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
@@ -253,9 +331,11 @@ Instructions.propTypes = {
     activeInstructionItem: PropTypes.string,
     desktopItemTitle: PropTypes.string,
     mobileItemTitle: PropTypes.string,
-    instructionItemImg: PropTypes.string
+    instructionItemImg: PropTypes.string,
+    arrowPrev: PropTypes.string,
+    arrowNext: PropTypes.string
   }),
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   additionalText: PropTypes.string,
   instructionItems: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
@@ -264,7 +344,11 @@ Instructions.propTypes = {
     imageAlt: PropTypes.string
   }).isRequired).isRequired,
   pictureAlign: PropTypes.oneOf([pictureAlignTypes.LEFT, pictureAlignTypes.RIGHT]),
+  pictureVerticalAlign: PropTypes.oneOf([pictureVerticalAlignTypes.CENTER, pictureVerticalAlignTypes.TOP, pictureVerticalAlignTypes.UNSET]),
   pictureMask: PropTypes.oneOf([pictureMaskTypes.ANDROID, pictureMaskTypes.NEW_IPHONE, pictureMaskTypes.WHITE_IPHONE, pictureMaskTypes.BLACK_IPHONE, pictureMaskTypes.LAPTOP, pictureMaskTypes.IPHONE_12, pictureMaskTypes.NONE]),
+  pictureBackgroundColor: PropTypes.oneOf([pictureBackgroundColorTypes.SPB_SKY_0]),
+  showArrows: PropTypes.bool,
+  arrowsTheme: PropTypes.oneOf([arrowTheme.DARK, arrowTheme.PURPLE]),
   getSwiper: PropTypes.func
 };
 export default Instructions;

package/dist/es/components/StoreButton/StoreButton.js

@@ -79,11 +79,11 @@ StoreButton.propTypes = {
   onClick: PropTypes.func,
   className: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-  sizeAll: PropTypes.oneOf(Object.values(ButtonSizes)).isRequired,
-  sizeWide: PropTypes.oneOf(Object.values(ButtonSizes)).isRequired,
-  sizeDesktop: PropTypes.oneOf(Object.values(ButtonSizes)).isRequired,
-  sizeTablet: PropTypes.oneOf(Object.values(ButtonSizes)).isRequired,
-  sizeMobile: PropTypes.oneOf(Object.values(ButtonSizes)).isRequired,
+  sizeAll: PropTypes.oneOf(Object.values(ButtonSizes)),
+  sizeWide: PropTypes.oneOf(Object.values(ButtonSizes)),
+  sizeDesktop: PropTypes.oneOf(Object.values(ButtonSizes)),
+  sizeTablet: PropTypes.oneOf(Object.values(ButtonSizes)),
+  sizeMobile: PropTypes.oneOf(Object.values(ButtonSizes)),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired)
   })

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

@@ -45,12 +45,27 @@ h5 {
             justify-content: center;
   }
 }
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__wrapper_vertical-align_top {
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions__wrapper_vertical-align_unset {
+    -webkit-box-align: unset;
+        -ms-flex-align: unset;
+            align-items: unset;
+  }
+}
 @media screen and (max-width: 1023px) {
   .mfui-instructions__text {
     text-align: center;
   }
 }
 .mfui-instructions__picture {
+  position: relative;
   max-width: 530px;
   max-height: 490px;
   overflow: hidden;
@@ -81,12 +96,6 @@ h5 {
     margin-right: 40px;
   }
 }
-@media screen and (min-width: 1024px) {
-  .mfui-instructions__picture_vertical-align_top {
-    -ms-flex-item-align: start;
-        align-self: flex-start;
-  }
-}
 .mfui-instructions_mask_none .mfui-instructions__slide {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -226,6 +235,93 @@ h5 {
   border-radius: 20px;
   overflow: hidden;
 }
+.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper {
+  height: 420px;
+  min-height: 420px;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper {
+    height: 440px;
+    min-height: 440px;
+  }
+}
+.mfui-instructions_mask_android-cropped .mfui-instructions__img-wrapper:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  width: 324px;
+  height: 1px;
+  margin: 0 auto;
+  background: var(--spbSky2);
+}
+.mfui-instructions_mask_android-cropped .mfui-instructions__device-screen {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 510px;
+  margin-top: 24px;
+  background: url('./img/android-new.png') 50% no-repeat;
+  background-size: contain;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions_mask_android-cropped .mfui-instructions__device-screen {
+    height: 574px;
+  }
+}
+.mfui-instructions_mask_android-cropped .mfui-instructions__swiper {
+  position: absolute;
+  top: 54px;
+  right: 0;
+  left: 0;
+  width: 222px;
+  margin: auto;
+  overflow: hidden;
+}
+@media screen and (min-width: 1024px) {
+  .mfui-instructions_mask_android-cropped .mfui-instructions__swiper {
+    top: 58px;
+    width: 250px;
+  }
+}
+.mfui-instructions_mask_iphone-cropped .mfui-instructions__img-wrapper {
+  height: 420px;
+  min-height: 420px;
+}
+.mfui-instructions_mask_iphone-cropped .mfui-instructions__img-wrapper:before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+  width: 324px;
+  height: 1px;
+  margin: 0 auto;
+  background: var(--spbSky2);
+}
+.mfui-instructions_mask_iphone-cropped .mfui-instructions__device-screen {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 469px;
+  margin-top: 24px;
+  background: url('./img/iphone-new.png') 50% no-repeat;
+  background-size: contain;
+}
+.mfui-instructions_mask_iphone-cropped .mfui-instructions__swiper {
+  position: absolute;
+  top: 38px;
+  right: 0;
+  left: 0;
+  width: 205px;
+  margin: auto;
+  overflow: hidden;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-instructions_mask_laptop .mfui-instructions__img-wrapper {
     height: 283px;
@@ -497,3 +593,61 @@ h5 {
   line-height: 24px;
   font-weight: 400;
 }
+.mfui-instructions__picture_background_spbSky0 {
+  border-radius: 12px;
+  background-color: var(--spbSky0);
+}
+.mfui-instructions__picture_background_spbSky0 .mfui-instructions__img-wrapper:before {
+  display: none;
+}
+.mfui-instructions__arrow {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+@media screen and (max-width: 767px) {
+  .mfui-instructions__arrow {
+    display: none;
+  }
+}
+.mfui-instructions__arrow_prev {
+  left: 24px;
+}
+.mfui-instructions__arrow_next {
+  right: 24px;
+}
+.mfui-instructions__qr-code {
+  position: absolute;
+  top: 12px;
+  right: 64px;
+  z-index: 3;
+  display: none;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 126px;
+  padding: 12px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-instructions__qr-code {
+    display: block;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-instructions__qr-code {
+    right: 44px;
+  }
+}
+.mfui-instructions__qr-code-image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.mfui-instructions__qr-code-text {
+  margin-bottom: 12px;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 12px;
+  text-align: center;
+}

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

@@ -8,24 +8,40 @@ export declare const pictureAlignTypes: {
 export declare const pictureVerticalAlignTypes: {
     CENTER: string;
     TOP: string;
+    UNSET: string;
 };
 export declare const pictureMaskTypes: {
     readonly ANDROID: "android";
+    readonly ANDROID_CROPPED: "android-cropped";
     readonly NEW_IPHONE: "new-iphone";
     readonly BLACK_IPHONE: "black-iphone";
     readonly WHITE_IPHONE: "white-iphone";
     readonly LAPTOP: "laptop";
     readonly IPHONE_12: "iphone-12";
+    readonly IPHONE_CROPPED: "iphone-cropped";
     readonly NONE: "none";
 };
+export declare const pictureBackgroundColorTypes: {
+    readonly SPB_SKY_0: "spbSky0";
+};
+export declare const arrowTheme: {
+    readonly PURPLE: "purple";
+    readonly DARK: "dark";
+};
 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];
 export declare type InstructionItemType = {
     title: string | React.ReactNode | React.ReactNode[];
     mediaUrl: string;
     isVideo: boolean;
     imageAlt?: string;
+    /** Ссылка на изображение с QR-кодом */
+    qrCode?: string;
+    /** Текст для плашки с изображением QR-кода */
+    qrCodeText?: string | React.ReactNode | React.ReactNode[];
 };
 export interface IInstructionsProps {
     /** Дополнительные data атрибуты к внутренним элементам */
@@ -34,6 +50,9 @@ export interface IInstructionsProps {
         item?: Record<string, string>;
         image?: Record<string, string>;
         mobileItemText?: Record<string, string>;
+        wrapper?: Record<string, string>;
+        arrowPrev?: Record<string, string>;
+        arrowNext?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: Ref<HTMLDivElement>;
@@ -47,9 +66,11 @@ export interface IInstructionsProps {
         mobileItemTitle?: string;
         instructionItemImg?: string;
         additionalText?: string;
+        arrowPrev?: string;
+        arrowNext?: string;
     };
     /** Заголовок инструкции */
-    title: string;
+    title?: string;
     /** Пункты инструкции */
     instructionItems: InstructionItemType[];
     /** Описание после инструкции */
@@ -60,6 +81,12 @@ export interface IInstructionsProps {
     pictureVerticalAlign?: PictureVerticalAlignTypesType;
     /** Маска изображения */
     pictureMask?: PictureMaskTypesType;
+    /** Цвет фона изображения */
+    pictureBackgroundColor?: PictureBackgroundColorsType;
+    /** Показать стрелки для смены пунктов инструкции */
+    showArrows?: boolean;
+    /** Цветовая тема стрелок навигации */
+    arrowsTheme?: ArrowThemeType;
     /** 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.pictureMaskTypes = exports.pictureVerticalAlignTypes = exports.pictureAlignTypes = void 0;
+exports["default"] = exports.arrowTheme = exports.pictureBackgroundColorTypes = exports.pictureMaskTypes = exports.pictureVerticalAlignTypes = exports.pictureAlignTypes = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -33,19 +33,31 @@ var pictureAlignTypes = {
 exports.pictureAlignTypes = pictureAlignTypes;
 var pictureVerticalAlignTypes = {
   CENTER: 'center',
-  TOP: 'top'
+  TOP: 'top',
+  UNSET: 'unset'
 };
 exports.pictureVerticalAlignTypes = pictureVerticalAlignTypes;
 var pictureMaskTypes = {
   ANDROID: 'android',
+  ANDROID_CROPPED: 'android-cropped',
   NEW_IPHONE: 'new-iphone',
   BLACK_IPHONE: 'black-iphone',
   WHITE_IPHONE: 'white-iphone',
   LAPTOP: 'laptop',
   IPHONE_12: 'iphone-12',
+  IPHONE_CROPPED: 'iphone-cropped',
   NONE: 'none'
 };
 exports.pictureMaskTypes = pictureMaskTypes;
+var pictureBackgroundColorTypes = {
+  SPB_SKY_0: 'spbSky0'
+};
+exports.pictureBackgroundColorTypes = pictureBackgroundColorTypes;
+var arrowTheme = {
+  PURPLE: 'purple',
+  DARK: 'dark'
+};
+exports.arrowTheme = arrowTheme;
 var testIdPrefix = 'Instructions';
 var cn = (0, _uiHelpers.cnCreate)('mfui-instructions');
 var swiperSlideCn = cn('slide');
@@ -63,7 +75,10 @@ var Instructions = function Instructions(_ref) {
       mobileItemTitle = _ref$classes.mobileItemTitle,
       instructionItemImg = _ref$classes.instructionItemImg,
       additionalText = _ref$classes.additionalText,
-      title = _ref.title,
+      arrowPrev = _ref$classes.arrowPrev,
+      arrowNext = _ref$classes.arrowNext,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
       instructionItems = _ref.instructionItems,
       _ref$pictureAlign = _ref.pictureAlign,
       pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
@@ -71,8 +86,12 @@ var Instructions = function Instructions(_ref) {
       pictureVerticalAlign = _ref$pictureVerticalA === void 0 ? 'center' : _ref$pictureVerticalA,
       _ref$pictureMask = _ref.pictureMask,
       pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+      pictureBackgroundColor = _ref.pictureBackgroundColor,
       getSwiper = _ref.getSwiper,
       text = _ref.additionalText,
+      showArrows = _ref.showArrows,
+      _ref$arrowsTheme = _ref.arrowsTheme,
+      arrowsTheme = _ref$arrowsTheme === void 0 ? arrowTheme.DARK : _ref$arrowsTheme,
       children = _ref.children;
 
   var _React$useState = _react["default"].useState(),
@@ -110,6 +129,22 @@ var Instructions = function Instructions(_ref) {
     setSlideIndex(activeIndex);
   }, []);
 
+  var handlePrevClick = _react["default"].useCallback(function () {
+    if (!swiperInstance) {
+      return;
+    }
+
+    swiperInstance.slidePrev();
+  }, [swiperInstance]);
+
+  var handleNextClick = _react["default"].useCallback(function () {
+    if (!swiperInstance) {
+      return;
+    }
+
+    swiperInstance.slideNext();
+  }, [swiperInstance]);
+
   var renderVideo = _react["default"].useCallback(function (mediaUrl, index) {
     return /*#__PURE__*/_react["default"].createElement("video", (0, _extends2["default"])({
       loop: true,
@@ -157,6 +192,25 @@ var Instructions = function Instructions(_ref) {
     }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig));
   }, [title]);
 
+  var renderQrCode = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, instructionItems.map(function (_ref4, i) {
+      var qrCode = _ref4.qrCode,
+          qrCodeText = _ref4.qrCodeText;
+      return slideIndex === i && !!qrCode && /*#__PURE__*/_react["default"].createElement(_uiCore.Tile, {
+        className: cn('qr-code'),
+        radius: "rounded",
+        shadowLevel: "default",
+        key: qrCode
+      }, !!qrCodeText && /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('qr-code-text')
+      }, qrCodeText), /*#__PURE__*/_react["default"].createElement("img", {
+        src: qrCode,
+        className: cn('qr-code-image'),
+        alt: "QR-\u043A\u043E\u0434"
+      }));
+    }));
+  }, [instructionItems, slideIndex]);
+
   var renderText = _react["default"].useCallback(function () {
     return /*#__PURE__*/_react["default"].createElement(_uiCore.Paragraph, {
       className: cn('text', [additionalText]),
@@ -184,8 +238,8 @@ var Instructions = function Instructions(_ref) {
         desktop: true
       }),
       "data-testid": "".concat(testIdPrefix, "-articles-list-desktop")
-    }, instructionItems.map(function (_ref4, i) {
-      var itemTitle = _ref4.title;
+    }, instructionItems.map(function (_ref5, i) {
+      var itemTitle = _ref5.title;
       return (
         /*#__PURE__*/
         // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -215,8 +269,8 @@ var Instructions = function Instructions(_ref) {
       "data-testid": "".concat(testIdPrefix, "-articles-list-mobile")
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('articles-title-block')
-    }, instructionItems.map(function (_ref5, i) {
-      var itemTitle = _ref5.title;
+    }, instructionItems.map(function (_ref6, i) {
+      var itemTitle = _ref6.title;
       return slideIndex === i && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
         key: i,
         "data-index": i
@@ -241,6 +295,31 @@ var Instructions = function Instructions(_ref) {
     })));
   }, [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]);
 
+  var renderArrows = _react["default"].useCallback(function () {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_uiCore.NavArrow, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev
+      },
+      className: cn('arrow', {
+        prev: true
+      }, [arrowPrev]),
+      theme: arrowsTheme,
+      disabled: slideIndex === 0,
+      onClick: handlePrevClick
+    }), /*#__PURE__*/_react["default"].createElement(_uiCore.NavArrow, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext
+      },
+      className: cn('arrow', {
+        next: true
+      }, [arrowNext]),
+      view: "next",
+      theme: arrowsTheme,
+      disabled: slideIndex === instructionItems.length - 1,
+      onClick: handleNextClick
+    }));
+  }, [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["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       mask: pictureMask
@@ -250,19 +329,21 @@ var Instructions = function Instructions(_ref) {
     hAlign: "center"
   }, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
     all: "12"
-  }, renderTitle('mobile'), /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('wrapper')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, !!title && renderTitle('mobile'), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn('wrapper', {
+      'vertical-align': pictureVerticalAlign
+    })
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.wrapper)), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('picture', {
       align: pictureAlign,
-      'vertical-align': pictureVerticalAlign
+      background: pictureBackgroundColor
     }),
     "data-testid": "".concat(testIdPrefix, "-picture")
-  }, renderPicture()), /*#__PURE__*/_react["default"].createElement("div", {
+  }, renderPicture(), !!showArrows && renderArrows(), renderQrCode()), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('articles', {
       align: pictureAlign
     })
-  }, renderTitle('desktop'), renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
+  }, !!title && renderTitle('desktop'), renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
 };
 
 Instructions.propTypes = {
@@ -270,7 +351,10 @@ Instructions.propTypes = {
     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)
+    mobileItemText: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    wrapper: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrowPrev: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    arrowNext: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   }),
   rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
     current: _propTypes["default"].elementType
@@ -282,9 +366,11 @@ Instructions.propTypes = {
     activeInstructionItem: _propTypes["default"].string,
     desktopItemTitle: _propTypes["default"].string,
     mobileItemTitle: _propTypes["default"].string,
-    instructionItemImg: _propTypes["default"].string
+    instructionItemImg: _propTypes["default"].string,
+    arrowPrev: _propTypes["default"].string,
+    arrowNext: _propTypes["default"].string
   }),
-  title: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string,
   additionalText: _propTypes["default"].string,
   instructionItems: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
@@ -293,7 +379,11 @@ Instructions.propTypes = {
     imageAlt: _propTypes["default"].string
   }).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.NEW_IPHONE, pictureMaskTypes.WHITE_IPHONE, pictureMaskTypes.BLACK_IPHONE, pictureMaskTypes.LAPTOP, pictureMaskTypes.IPHONE_12, pictureMaskTypes.NONE]),
+  pictureBackgroundColor: _propTypes["default"].oneOf([pictureBackgroundColorTypes.SPB_SKY_0]),
+  showArrows: _propTypes["default"].bool,
+  arrowsTheme: _propTypes["default"].oneOf([arrowTheme.DARK, arrowTheme.PURPLE]),
   getSwiper: _propTypes["default"].func
 };
 var _default = Instructions;

package/dist/lib/components/StoreButton/StoreButton.js

@@ -102,11 +102,11 @@ StoreButton.propTypes = {
   onClick: _propTypes["default"].func,
   className: _propTypes["default"].string,
   target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
-  sizeAll: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
-  sizeWide: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
-  sizeDesktop: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
-  sizeTablet: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
-  sizeMobile: _propTypes["default"].oneOf(Object.values(ButtonSizes)).isRequired,
+  sizeAll: _propTypes["default"].oneOf(Object.values(ButtonSizes)),
+  sizeWide: _propTypes["default"].oneOf(Object.values(ButtonSizes)),
+  sizeDesktop: _propTypes["default"].oneOf(Object.values(ButtonSizes)),
+  sizeTablet: _propTypes["default"].oneOf(Object.values(ButtonSizes)),
+  sizeMobile: _propTypes["default"].oneOf(Object.values(ButtonSizes)),
   dataAttrs: _propTypes["default"].shape({
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "files": [
     "dist"
   ],
@@ -90,5 +90,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "45f465c02b46c8d9011f4dbb353341f861e6a612"
+  "gitHead": "0acf2a3cb7f34746afd45a17718da45ecd2bba28"
 }