@megafon/ui-shared 8.1.0 → 8.2.0

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

@@ -50,6 +50,15 @@ export type InstructionItemType = {
     /** Текст для плашки с изображением QR-кода */
     qrCodeText?: string | React.ReactNode | React.ReactNode[];
 };
+export type ButtonType = {
+    title: string;
+    type?: 'primary' | 'outline';
+    icon?: React.JSX.Element;
+    href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    rel?: string;
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
 export interface IInstructionsProps {
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -60,6 +69,7 @@ export interface IInstructionsProps {
         wrapper?: Record<string, string>;
         arrowPrev?: Record<string, string>;
         arrowNext?: Record<string, string>;
+        button?: Record<string, string>;
     };
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;
@@ -75,11 +85,14 @@ export interface IInstructionsProps {
         additionalText?: string;
         arrowPrev?: string;
         arrowNext?: string;
+        button?: string;
     };
     /** Заголовок инструкции */
     title?: string;
     /** Пункты инструкции */
     instructionItems: InstructionItemType[];
+    /** Отступ между пунктами инструкции. DEPRECATED: 'large'  */
+    itemsGap?: 'medium' | 'large';
     /** Описание после инструкции */
     additionalText?: string;
     /** Расположение изображения по горизонтали */
@@ -98,6 +111,8 @@ export interface IInstructionsProps {
     elementOrder?: ElementOrderType;
     /** Показать нумерацию пунктов инструкции на мобильных устройствах */
     showMobileNumeration?: boolean;
+    /** Кнопка */
+    button?: ButtonType;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
 }

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

@@ -11,6 +11,7 @@ require("core-js/modules/es.array.map.js");
 var React = _interopRequireWildcard(require("react"));
 var _uiCore = require("@megafon/ui-core");
 var _uiHelpers = require("@megafon/ui-helpers");
+var _setRelAttribute = require("../../helpers/setRelAttribute");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -79,9 +80,11 @@ var Instructions = function Instructions(_ref) {
     additionalText = _ref$classes2.additionalText,
     arrowPrev = _ref$classes2.arrowPrev,
     arrowNext = _ref$classes2.arrowNext,
+    buttonClass = _ref$classes2.button,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     instructionItems = _ref.instructionItems,
+    itemsGap = _ref.itemsGap,
     _ref$pictureAlign = _ref.pictureAlign,
     pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
     _ref$pictureVerticalA = _ref.pictureVerticalAlign,
@@ -97,6 +100,7 @@ var Instructions = function Instructions(_ref) {
     _ref$elementOrder = _ref.elementOrder,
     elementOrder = _ref$elementOrder === void 0 ? 'default' : _ref$elementOrder,
     showMobileNumeration = _ref.showMobileNumeration,
+    button = _ref.button,
     children = _ref.children;
   var _React$useState = React.useState(),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -106,6 +110,7 @@ var Instructions = function Instructions(_ref) {
     _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     slideIndex = _React$useState4[0],
     setSlideIndex = _React$useState4[1];
+  var showButton = button === null || button === void 0 ? void 0 : button.title;
   var isMobileReversed = elementOrder === 'reversed';
   var getSwiperInstance = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
@@ -313,10 +318,34 @@ var Instructions = function Instructions(_ref) {
       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]);
+  var renderButton = React.useCallback(function () {
+    var _ref7 = button || {},
+      buttonTitle = _ref7.title,
+      type = _ref7.type,
+      icon = _ref7.icon,
+      href = _ref7.href,
+      target = _ref7.target,
+      rel = _ref7.rel,
+      onClick = _ref7.onClick;
+    return /*#__PURE__*/React.createElement(_uiCore.Button, {
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      className: cn('button', [buttonClass]),
+      type: type,
+      theme: "green",
+      icon: icon,
+      href: href,
+      target: target,
+      rel: (0, _setRelAttribute.setRelAttribute)(rel, target),
+      onClick: onClick
+    }, buttonTitle);
+  }, [button, buttonClass, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       mask: pictureMask,
-      reversed: isMobileReversed
+      reversed: isMobileReversed,
+      'items-gap': itemsGap
     }),
     ref: rootRef
   }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
@@ -337,6 +366,6 @@ var Instructions = function Instructions(_ref) {
     className: cn('articles', {
       align: pictureAlign
     })
-  }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
+  }, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), showButton && renderButton(), children)))));
 };
 var _default = exports["default"] = Instructions;

package/dist/lib/components/PictureBox/PictureBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-picture-box_mask_none .mfui-picture-box__image{border-radius:24px;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:414px;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width:1280px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:520px}}.mfui-picture-box_mask_mac-book .mfui-picture-box__image{border-top-left-radius:1.4% 2.2988505747%;border-top-right-radius:1.4% 2.2988505747%;height:87%;left:0;margin:0 auto;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:2%;width:82%}.mfui-picture-box__content{-ms-flex-item-align:center;align-self:center;margin-top:32px}@media screen and (min-width:1024px){.mfui-picture-box__content{margin-top:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:44px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:44px}}.mfui-picture-box__button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;margin-top:32px}.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-1x.png);background-repeat:no-repeat;background-size:100% auto;padding-bottom:60.9%;position:relative}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-2x.png)}}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import './PictureBox.scss';
+type ImageType = {
+    src: string;
+    src2x?: string;
+    align?: 'right' | 'left';
+    alt?: string;
+};
+type ButtonType = {
+    title?: string;
+    href?: string;
+    target?: '_self' | '_blank';
+    rel?: string;
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IPictureBoxProps {
+    /** Изображение */
+    image: ImageType;
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Маска */
+    pictureMask?: 'mac-book' | 'none';
+    /** Дочерние элементы */
+    children: React.ReactNode;
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дополнительный класс для корневого элемента */
+    className?: string;
+    /** Дополнительный класс корневого элемента */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+        image?: Record<string, string>;
+        mask?: Record<string, string>;
+        buttonsWrapper?: Record<string, string>;
+    };
+}
+declare const PictureBox: React.FC<IPictureBoxProps>;
+export default PictureBox;

package/dist/lib/components/PictureBox/PictureBox.js

@@ -0,0 +1,105 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.array.concat.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-picture-box');
+var PictureBox = function PictureBox(_ref) {
+  var image = _ref.image,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    _ref$pictureMask = _ref.pictureMask,
+    pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    classes = _ref.classes,
+    rootRef = _ref.rootRef,
+    children = _ref.children;
+  var imageSrc = image.src,
+    imageSrc2x = image.src2x,
+    _image$align = image.align,
+    imageAlign = _image$align === void 0 ? 'left' : _image$align,
+    _image$alt = image.alt,
+    imageAlt = _image$alt === void 0 ? '' : _image$alt;
+  var imageOrder = imageAlign === 'left' ? '0' : '1';
+  var renderImg = function renderImg() {
+    var srcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+    var img = /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
+      className: cn('image'),
+      srcSet: srcSet,
+      src: imageSrc,
+      alt: imageAlt
+    }));
+    if (pictureMask !== 'none') {
+      return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mask), {
+        className: cn('mask')
+      }), img);
+    }
+    return img;
+  };
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper), {
+      className: cn('button-wrapper')
+    }), !!button && /*#__PURE__*/React.createElement(_uiCore.Button, {
+      href: button.href,
+      target: button.target,
+      rel: button.rel,
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.button
+      },
+      onClick: button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
+      href: extraButton.href,
+      target: extraButton.target,
+      rel: extraButton.rel,
+      type: "outline",
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.extraButton
+      },
+      onClick: extraButton.onClick
+    }, extraButton.title));
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      align: imageAlign,
+      mask: pictureMask
+    }, [classes === null || classes === void 0 ? void 0 : classes.root, className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    guttersLeft: "medium"
+  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    all: "7",
+    tablet: "12",
+    mobile: "12",
+    orderWide: imageOrder,
+    orderDesktop: imageOrder
+  }, renderImg()), /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+    all: "5",
+    tablet: "12",
+    mobile: "12",
+    flex: true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, children, renderButtons()))));
+};
+var _default = exports["default"] = PictureBox;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Banner } from '@megafon/ui-core';
+export type PromoBannerPropsType = Omit<React.ComponentProps<typeof Banner>, 'autoHeight' | 'arrowTheme'>;
+declare const PromoBanner: React.FC<PromoBannerPropsType>;
+export default PromoBanner;

package/dist/lib/components/PromoBanner/PromoBanner.js

@@ -0,0 +1,36 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.index-of.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-promo-banner');
+var PromoBanner = function PromoBanner(_a) {
+  var children = _a.children,
+    props = __rest(_a, ["children"]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(_uiCore.Banner, (0, _extends2["default"])({}, props, {
+    autoHeight: true,
+    arrowTheme: "white"
+  }), children));
+};
+var _default = exports["default"] = PromoBanner;

package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-promo-banner-slide{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:24px;-ms-flex-direction:column;flex-direction:column;min-height:100%;overflow:hidden}.mfui-promo-banner-slide_background_dark-violet{background-image:-webkit-gradient(linear,right top,left top,from(#ada6ba),color-stop(108%,#f6f2f9));background-image:linear-gradient(270deg,#ada6ba,#f6f2f9 108%)}.mfui-promo-banner-slide_background_light-violet{background:#f6f2f9}.mfui-promo-banner-slide__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;gap:24px;padding:32px 20px 12px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__container{padding:38px 40px}}@media screen and (min-width:768px){.mfui-promo-banner-slide__container{gap:32px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:308px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__container{padding:34px 64px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__container{padding:42px 80px}}.mfui-promo-banner-slide__content{color:var(--stcBlack)}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__content{max-width:350px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__content{max-width:450px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__content{max-width:645px}}.mfui-promo-banner-slide__title{margin-bottom:12px}@media screen and (min-width:1280px){.mfui-promo-banner-slide__description{margin-right:82px}}.mfui-promo-banner-slide__buttons-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}@media screen and (min-width:768px){.mfui-promo-banner-slide__buttons-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.mfui-promo-banner-slide__picture{display:block;height:150px;position:relative;z-index:0}@media screen and (min-width:768px){.mfui-promo-banner-slide__picture{height:100%;position:absolute;top:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__picture{left:404px;width:523px}}@media screen and (min-width:1024px){.mfui-promo-banner-slide__picture{width:696px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__picture{left:534px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__picture{left:744px}}.mfui-promo-banner-slide__image{height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-promo-banner-slide__image{-o-object-fit:contain;object-fit:contain}}

package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import './PromoBannerSlide.scss';
+type ButtonType = {
+    /** Заголовок */
+    title?: string;
+    /** Ссылка */
+    href?: string;
+    /** Target - свойство тега <a> */
+    target?: '_self' | '_blank';
+    /** Rel - атрибут тега <a> */
+    rel?: string;
+    /** Обработчик клика по кнопке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+type ImageType = {
+    /** Изображение на разрешении экрана 1024+ */
+    desktopSrc: string;
+    /** Изображение 2x на разрешении экрана 1024+ */
+    desktopSrc2x?: string;
+    /** Изображение на разрешении экрана 768-1023 */
+    tabletSrc: string;
+    /** Изображение 2x на разрешении экрана 768-1023 */
+    tabletSrc2x?: string;
+    /** Изображение на разрешении экрана 0-767 */
+    mobileSrc: string;
+    /** Изображение 2x на разрешении экрана 0-767 */
+    mobileSrc2x?: string;
+    /** Значение тега alt для изображения */
+    alt?: string;
+};
+export interface IPromoBannerSlideProps {
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Заголовок */
+    title: string | React.ReactNode | React.ReactNode[];
+    /** Текст-описание */
+    description: string | React.ReactNode | React.ReactNode[];
+    /** Кнопка */
+    button?: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Изображение */
+    image: ImageType;
+    /** Фон */
+    background?: 'light-violet' | 'dark-violet';
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        image?: Record<string, string>;
+        desktopImageSource?: Record<string, string>;
+        tabletImageSource?: Record<string, string>;
+        buttonsWrapper?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const PromoBannerSlide: React.FC<IPromoBannerSlideProps>;
+export default PromoBannerSlide;

package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js

@@ -0,0 +1,108 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.array.concat.js");
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-promo-banner-slide');
+var PromoBannerSlide = function PromoBannerSlide(_ref) {
+  var className = _ref.className,
+    title = _ref.title,
+    description = _ref.description,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    image = _ref.image,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'dark-violet' : _ref$background,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+      className: cn('buttons-wrapper')
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper)), !!button && /*#__PURE__*/React.createElement(_uiCore.Button, {
+      href: button.href,
+      target: button.target,
+      rel: button.rel,
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.button
+      },
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
+      },
+      onClick: button.onClick
+    }, button.title), !!extraButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
+      href: extraButton.href,
+      target: extraButton.target,
+      rel: extraButton.rel,
+      type: "outline",
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.extraButton
+      },
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
+      },
+      onClick: extraButton.onClick
+    }, extraButton.title));
+  };
+  var renderImage = function renderImage() {
+    var desktopSrc = image.desktopSrc,
+      desktopSrc2x = image.desktopSrc2x,
+      tabletSrc = image.tabletSrc,
+      tabletSrc2x = image.tabletSrc2x,
+      mobileSrc = image.mobileSrc,
+      mobileSrc2x = image.mobileSrc2x,
+      alt = image.alt;
+    var desktopSrcSet = desktopSrc2x ? "".concat(desktopSrc, ", ").concat(desktopSrc2x, " 2x") : desktopSrc;
+    var tabletSrcSet = tabletSrc2x ? "".concat(tabletSrc, ", ").concat(tabletSrc2x, " 2x") : tabletSrc;
+    var mobileSrcSet = mobileSrc2x ? "".concat(mobileSrc, ", ").concat(mobileSrc2x, " 2x") : mobileSrc;
+    return /*#__PURE__*/React.createElement("picture", {
+      className: cn('picture')
+    }, /*#__PURE__*/React.createElement("source", (0, _extends2["default"])({
+      media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
+      srcSet: desktopSrcSet
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.desktopImageSource))), /*#__PURE__*/React.createElement("source", (0, _extends2["default"])({
+      media: "(min-width: ".concat(_uiHelpers.breakpoints.MOBILE_BIG_START, "px)"),
+      srcSet: tabletSrcSet
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tabletImageSource))), /*#__PURE__*/React.createElement("img", (0, _extends2["default"])({
+      className: cn('image'),
+      src: mobileSrc,
+      srcSet: mobileSrcSet,
+      alt: alt || ''
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image))));
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+    className: cn({
+      background: background
+    }, [classes === null || classes === void 0 ? void 0 : classes.root, className])
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('container')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, /*#__PURE__*/React.createElement(_uiCore.Header, {
+    className: cn('title'),
+    as: "h2",
+    color: "inherit"
+  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+    className: cn('description'),
+    hasMargin: false,
+    color: "inherit"
+  }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.textConvertConfig) : description)), renderButtons()), renderImage());
+};
+var _default = exports["default"] = PromoBannerSlide;

package/dist/lib/components/PromoCards/PromoCards.js

@@ -53,7 +53,7 @@ var PromoCards = function PromoCards(_ref) {
       dataAttrs: {
         root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
       },
-      className: cn([classes === null || classes === void 0 ? void 0 : classes.card]),
+      className: classes === null || classes === void 0 ? void 0 : classes.card,
       key: i + item.title
     }));
   })));

package/dist/lib/components/Stepper/StepperItem.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(i/separator.png) 2 repeat;border-image:url(i/separator.png) 2 repeat;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 24px);min-height:2px;position:absolute;top:19px;width:calc(100% - 36px)}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto;right:0}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(i/separator-vertical.png) 2 repeat;border-image:url(i/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}
+h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 24px);min-height:2px;position:absolute;top:19px;width:calc(100% - 36px)}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto;right:0}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}

package/dist/lib/index.d.ts

@@ -30,7 +30,10 @@ export { default as Instructions } from './components/Instructions/Instructions'
 export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
 export { default as PageTitle } from './components/PageTitle/PageTitle';
 export { default as Partners } from './components/Partners/Partners';
+export { default as PictureBox } from './components/PictureBox/PictureBox';
 export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
+export { default as PromoBanner } from './components/PromoBanner/PromoBanner';
+export { default as PromoBannerSlide } from './components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide';
 export { default as PromoCard } from './components/PromoCards/components/PromoCard/PromoCard';
 export { default as PromoCards } from './components/PromoCards/PromoCards';
 export { default as Property } from './components/Property/Property';

package/dist/lib/index.js

@@ -195,12 +195,30 @@ Object.defineProperty(exports, "Partners", {
     return _Partners["default"];
   }
 });
+Object.defineProperty(exports, "PictureBox", {
+  enumerable: true,
+  get: function get() {
+    return _PictureBox["default"];
+  }
+});
 Object.defineProperty(exports, "PictureWithDescription", {
   enumerable: true,
   get: function get() {
     return _PictureWithDescription["default"];
   }
 });
+Object.defineProperty(exports, "PromoBanner", {
+  enumerable: true,
+  get: function get() {
+    return _PromoBanner["default"];
+  }
+});
+Object.defineProperty(exports, "PromoBannerSlide", {
+  enumerable: true,
+  get: function get() {
+    return _PromoBannerSlide["default"];
+  }
+});
 Object.defineProperty(exports, "PromoCard", {
   enumerable: true,
   get: function get() {
@@ -395,7 +413,10 @@ var _Instructions = _interopRequireDefault(require("./components/Instructions/In
 var _NotificationBox = _interopRequireDefault(require("./components/NotificationBox/NotificationBox"));
 var _PageTitle = _interopRequireDefault(require("./components/PageTitle/PageTitle"));
 var _Partners = _interopRequireDefault(require("./components/Partners/Partners"));
+var _PictureBox = _interopRequireDefault(require("./components/PictureBox/PictureBox"));
 var _PictureWithDescription = _interopRequireDefault(require("./components/PictureWithDescription/PictureWithDescription"));
+var _PromoBanner = _interopRequireDefault(require("./components/PromoBanner/PromoBanner"));
+var _PromoBannerSlide = _interopRequireDefault(require("./components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide"));
 var _PromoCard = _interopRequireDefault(require("./components/PromoCards/components/PromoCard/PromoCard"));
 var _PromoCards = _interopRequireDefault(require("./components/PromoCards/PromoCards"));
 var _Property = _interopRequireDefault(require("./components/Property/Property"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@megafon/ui-shared",
-    "version": "8.1.0",
+    "version": "8.2.0",
     "files": [
         "dist"
     ],
@@ -77,13 +77,13 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "@megafon/ui-core": "^8.1.0",
+        "@megafon/ui-core": "^8.2.0",
         "@megafon/ui-helpers": "^4.0.1",
-        "@megafon/ui-icons": "^3.8.1",
+        "@megafon/ui-icons": "^3.9.0",
         "core-js": "^3.6.4",
         "htmr": "^1.0.2",
         "lodash.throttle": "^4.1.1",
         "swiper": "^11.1.1"
     },
-    "gitHead": "d9a710f4c5a27033a3b69898b7baa6e997b3b2f4"
+    "gitHead": "bf090c9d8db62ae578449898acfd83da9f5b0e55"
 }