@megafon/ui-shared 8.14.0 → 8.14.2

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

@@ -0,0 +1,142 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.array.concat.js";
+import * as React from 'react';
+import { Button, Header, Paragraph } from '@megafon/ui-core';
+import { cnCreate, convert, filterDataAttrs, breakpoints, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
+import "./PromoBannerSlide.css";
+export var BackgroundColor = {
+  DARK_VIOLET: 'dark-violet',
+  LIGHT_VIOLET: 'light-violet',
+  GREEN_20: 'green-20',
+  PURPLE_20: 'purple-20',
+  NIGHT_20: 'night-20',
+  FLAMINGO_20: 'flamingo-20',
+  BERRY_20: 'berry-20',
+  GRADIENT_PURPLE_1: 'gradient-purple-1',
+  GRADIENT_PURPLE_2: 'gradient-purple-2',
+  GRADIENT_PURPLE_3: 'gradient-purple-3',
+  GRADIENT_PURPLE_4: 'gradient-purple-4'
+};
+var getThemeSettings = function getThemeSettings(bgColor) {
+  switch (bgColor) {
+    case BackgroundColor.DARK_VIOLET:
+    case BackgroundColor.LIGHT_VIOLET:
+      return {
+        buttonColor: 'green',
+        textColor: 'inherit'
+      };
+    case BackgroundColor.GRADIENT_PURPLE_1:
+    case BackgroundColor.GRADIENT_PURPLE_2:
+    case BackgroundColor.GRADIENT_PURPLE_3:
+    case BackgroundColor.GRADIENT_PURPLE_4:
+      return {
+        buttonColor: 'white',
+        textColor: 'white'
+      };
+    default:
+      return {
+        buttonColor: 'green',
+        textColor: 'default'
+      };
+  }
+};
+var cn = 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 _getThemeSettings = getThemeSettings(background),
+    buttonColor = _getThemeSettings.buttonColor,
+    textColor = _getThemeSettings.textColor;
+  var renderButtons = function renderButtons() {
+    if (!button && !extraButton) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('buttons-wrapper')
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper)), !!button && /*#__PURE__*/React.createElement(Button, {
+      theme: buttonColor,
+      href: button.href,
+      target: button.target,
+      icon: button.icon,
+      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(Button, {
+      theme: buttonColor,
+      href: extraButton.href,
+      target: extraButton.target,
+      icon: extraButton.icon,
+      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", _extends({
+      media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
+      srcSet: desktopSrcSet
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.desktopImageSource))), /*#__PURE__*/React.createElement("source", _extends({
+      media: "(min-width: ".concat(breakpoints.MOBILE_BIG_START, "px)"),
+      srcSet: tabletSrcSet
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tabletImageSource))), /*#__PURE__*/React.createElement("img", _extends({
+      className: cn('image'),
+      src: mobileSrc,
+      srcSet: mobileSrcSet,
+      alt: alt || ''
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image))));
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn({
+      background: background
+    }, [classes === null || classes === void 0 ? void 0 : classes.root, className])
+  }, 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(Header, {
+    className: cn('title'),
+    as: "h2",
+    color: textColor
+  }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), /*#__PURE__*/React.createElement(Paragraph, {
+    className: cn('description'),
+    hasMargin: false,
+    color: textColor
+  }, typeof description === 'string' ? convert(description, textConvertConfig) : description)), renderButtons(), renderImage()));
+};
+export default PromoBannerSlide;

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { IPromoCardData, IPromoCardSettings } from './types';
+type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface IPromoCards extends IPromoCardSettings {
+    /** Список карточек. Минимальное количество 2 карточки */
+    items?: IPromoCardData[];
+    /** Тема навигации для карусели */
+    carouselNavTheme?: CarouselProps['navTheme'];
+    /** Цвет градиента для карусели */
+    carouselGradientColor?: CarouselProps['gradientColor'];
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительные css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        card?: string;
+        cardTitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        card?: Record<string, string>;
+    };
+    /** Обработчик смены слайда карусели */
+    onCarouselChange?: CarouselProps['onChange'];
+    /** Ссылка на элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дочерние элементы. Минимальное количество 2 элемента */
+    children?: React.ReactNode;
+}
+declare const PromoCards: React.FC<IPromoCards>;
+export default PromoCards;

package/dist/es/components/PromoCards/PromoCards.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "core-js/modules/es.array.is-array.js";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
+import PromoCard from "./components/PromoCard/PromoCard";
+var slidesSettings = _defineProperty(_defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 2,
+  spaceBetween: 20
+}), breakpoints.DESKTOP_SMALL_START, {
+  slidesPerView: 3,
+  spaceBetween: 20
+});
+var MIN_ITEMS_COUNT = 2;
+var cn = cnCreate('mfui-promo-cards');
+var PromoCards = function PromoCards(_ref) {
+  var items = _ref.items,
+    carouselNavTheme = _ref.carouselNavTheme,
+    carouselGradientColor = _ref.carouselGradientColor,
+    background = _ref.background,
+    dataAttrs = _ref.dataAttrs,
+    className = _ref.className,
+    classes = _ref.classes,
+    onCarouselChange = _ref.onCarouselChange,
+    rootRef = _ref.rootRef,
+    children = _ref.children;
+  var itemsLength = (items === null || items === void 0 ? void 0 : items.length) || 0;
+  var childrenLength = Array.isArray(children) ? children.length : 0;
+  if ((childrenLength || itemsLength) < MIN_ITEMS_COUNT) {
+    return null;
+  }
+  var renderItems = (items || []).map(function (item, i) {
+    return /*#__PURE__*/React.createElement(PromoCard, _extends({}, item, {
+      className: classes === null || classes === void 0 ? void 0 : classes.card,
+      classes: {
+        title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
+      },
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
+      },
+      background: background,
+      key: i + item.title
+    }));
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Carousel, {
+    slidesSettings: slidesSettings,
+    navTheme: carouselNavTheme,
+    gradient: true,
+    gradientColor: carouselGradientColor,
+    onChange: onCarouselChange
+  }, childrenLength ? children : renderItems));
+};
+export default PromoCards;

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-promo-card{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);cursor:pointer;-ms-flex-direction:column;flex-direction:column;min-height:100%;text-decoration:none;-webkit-transition:background-color,.3s,.3s,-webkit-box-shadow;transition:background-color,.3s,.3s,-webkit-box-shadow;transition:background-color,.3s,box-shadow,.3s;transition:background-color,.3s,box-shadow,.3s,-webkit-box-shadow}.mfui-promo-card_background_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-promo-card_background_shadow:hover,.mfui-promo-card_background_white:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1);text-decoration:none}.mfui-promo-card_background_gray{background-color:var(--spbSky0)}.mfui-promo-card_background_gray:hover{background-color:var(--spbSky1);text-decoration:none}.mfui-promo-card__ad-title{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--stcBlack20);border:none;border-radius:8px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--stcWhite);cursor:pointer;font-family:inherit;font-size:12px;line-height:18px;margin:0;outline:none;padding:1px 8px 3px;position:absolute;right:16px;text-decoration:none;top:16px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.mfui-promo-card__ad-tooltip{max-width:232px}.mfui-promo-card__ad-tooltip-content{font-size:12px;line-height:18px}.mfui-promo-card__image{border-radius:inherit;vertical-align:top;width:100%}.mfui-promo-card__content{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-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;padding:32px 24px}@media screen and (min-width:1280px){.mfui-promo-card__content{padding:32px}}.mfui-promo-card__badge{left:24px;position:absolute;top:0;translate:0 -50%}@media screen and (min-width:1280px){.mfui-promo-card__badge{left:32px}}.mfui-promo-card__logo{background-color:var(--base);border:4px solid var(--base);border-radius:50%;position:absolute;right:44px;top:0;-webkit-transition:border-color,.3s;transition:border-color,.3s;translate:0 -50%}@media screen and (min-width:1280px){.mfui-promo-card__logo{right:52px}}.mfui-promo-card__logo:after,.mfui-promo-card__logo:before{content:"";height:10px;position:absolute;top:50%;translate:0 -100%;width:10px}.mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--base) 10px);left:-12px}.mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--base) 10px);right:-12px}.mfui-promo-card_background_gray .mfui-promo-card__logo{background-color:var(--spbSky0);border-color:var(--spbSky0)}.mfui-promo-card_background_gray .mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--spbSky0) 10px)}.mfui-promo-card_background_gray .mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--spbSky0) 10px)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo{background-color:var(--spbSky1);border-color:var(--spbSky1)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo:before{background-image:radial-gradient(circle at 0 0,transparent 9px,var(--spbSky1) 10px)}.mfui-promo-card_background_gray:hover .mfui-promo-card__logo:after{background-image:radial-gradient(circle at 100% 0,transparent 9px,var(--spbSky1) 10px)}.mfui-promo-card__logo-img{border:1px solid var(--spbSky1);border-radius:inherit;height:56px;vertical-align:top;width:56px}@media screen and (min-width:768px){.mfui-promo-card__logo-img{height:64px;width:64px}}@media screen and (min-width:1280px){.mfui-promo-card__logo-img{height:72px;width:72px}}.mfui-promo-card__subtitle{margin-top:8px}.mfui-promo-card__list{font-size:15px;font-weight:400;line-height:24px;list-style:none;margin:8px 0 0;padding:0}.mfui-promo-card__list-item{margin:0;padding:0 0 0 20px;position:relative}.mfui-promo-card__list-item:before{background-color:var(--spbSky2);border-radius:50%;content:"";height:6px;left:1px;position:absolute;top:9px;width:6px}.mfui-promo-card__list-item:not(:last-child){margin-bottom:12px}.mfui-promo-card__list-item b{font-weight:500}.mfui-promo-card__footer{margin-top:auto;padding-top:16px}

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IPromoCardData, IPromoCardSettings } from '../../types';
+import './PromoCard.scss';
+export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительные css классы для корневого элемента */
+    classes?: {
+        root?: string;
+        title?: string;
+    };
+    /** Дополнительные data атрибуты к корневому и внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        image?: Record<string, string>;
+        badge?: Record<string, string>;
+        logo?: Record<string, string>;
+        title?: Record<string, string>;
+        subtitle?: Record<string, string>;
+        list?: Record<string, string>;
+        adTitle?: Record<string, string>;
+    };
+}
+declare const PromoCard: React.FC<IPromoCard>;
+export default PromoCard;

package/dist/es/components/PromoCards/components/PromoCard/PromoCard.js

@@ -0,0 +1,175 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.string.link.js";
+var __rest = this && this.__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;
+};
+import * as React from 'react';
+import { Button, Header, Paragraph, PriceBadge, PromoBadge, Tooltip } from '@megafon/ui-core';
+import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../../helpers/setRelAttribute";
+import "./PromoCard.css";
+var listItemConvertConfig = {
+  b: {
+    component: function component(_ref) {
+      var children = _ref.children;
+      return /*#__PURE__*/React.createElement("b", null, children);
+    }
+  }
+};
+var cn = cnCreate('mfui-promo-card');
+var PromoCard = function PromoCard(_ref2) {
+  var title = _ref2.title,
+    subtitle = _ref2.subtitle,
+    _ref2$list = _ref2.list,
+    list = _ref2$list === void 0 ? [] : _ref2$list,
+    link = _ref2.link,
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? 'shadow' : _ref2$background,
+    image = _ref2.image,
+    logo = _ref2.logo,
+    badge = _ref2.badge,
+    _ref2$promoBadge = _ref2.promoBadge,
+    promoBadge = _ref2$promoBadge === void 0 ? null : _ref2$promoBadge,
+    _ref2$priceBadge = _ref2.priceBadge,
+    priceBadge = _ref2$priceBadge === void 0 ? null : _ref2$priceBadge,
+    _ref2$adMark = _ref2.adMark,
+    adMark = _ref2$adMark === void 0 ? null : _ref2$adMark,
+    className = _ref2.className,
+    classes = _ref2.classes,
+    dataAttrs = _ref2.dataAttrs,
+    onClick = _ref2.onClick;
+  var adTriggerRef = React.useRef(null);
+  var imageSrc = image.src,
+    imageSrc2x = image.src2x,
+    imageAlt = image.alt;
+  var linkHref = link.href,
+    _link$target = link.target,
+    linkTarget = _link$target === void 0 ? '_self' : _link$target,
+    linkRel = link.rel,
+    linkTitle = link.title;
+  var _ref3 = promoBadge || {},
+    promoBadgeText = _ref3.text,
+    promoBadgeColor = _ref3.color;
+  var _ref4 = priceBadge || {},
+    priceBadgeText = _ref4.text,
+    priceBadgeIcon = _ref4.iconType,
+    priceBadgeTheme = _ref4.theme;
+  var imageSrcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+  var hasBadge = !!promoBadgeText || !!priceBadgeText || !!badge;
+  var handleAdTitleClick = React.useCallback(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  var renderBadge = React.useMemo(function () {
+    switch (true) {
+      case !!promoBadgeText:
+        return /*#__PURE__*/React.createElement(PromoBadge, {
+          className: cn('badge'),
+          dataAttrs: {
+            root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge
+          },
+          color: promoBadgeColor
+        }, promoBadgeText);
+      case !!priceBadgeText:
+        return /*#__PURE__*/React.createElement(PriceBadge, {
+          className: cn('badge'),
+          dataAttrs: {
+            root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge
+          },
+          iconType: priceBadgeIcon,
+          theme: priceBadgeTheme
+        }, priceBadgeText);
+      default:
+        return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge), {
+          className: cn('badge')
+        }), badge);
+    }
+  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge, promoBadgeText, promoBadgeColor, priceBadgeText, priceBadgeIcon, priceBadgeTheme, badge]);
+  var renderAdMark = function renderAdMark() {
+    var _ref5 = adMark || {},
+      adTitle = _ref5.title,
+      adTooltip = _ref5.tooltip;
+    var _a = adTooltip || {},
+      placement = _a.placement,
+      offset = _a.offset,
+      triggerEvent = _a.triggerEvent,
+      colorTheme = _a.colorTheme,
+      children = _a.children,
+      restAdTooltip = __rest(_a, ["placement", "offset", "triggerEvent", "colorTheme", "children"]);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !!adTitle && /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.adTitle), {
+      className: cn('ad-title'),
+      ref: adTriggerRef,
+      onClick: handleAdTitleClick,
+      type: "button"
+    }), adTitle), !!adTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
+      className: cn('ad-tooltip')
+    }, restAdTooltip, {
+      placement: placement || 'bottom',
+      offset: offset || 'small',
+      triggerEvent: triggerEvent || 'hover',
+      colorTheme: colorTheme || 'blue',
+      triggerElement: adTriggerRef
+    }), !!children && /*#__PURE__*/React.createElement("div", {
+      className: cn('ad-tooltip-content')
+    }, typeof children === 'string' ? convert(children, {}) : children)));
+  };
+  return /*#__PURE__*/React.createElement("a", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      background: background
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    href: linkHref,
+    target: linkTarget,
+    rel: setRelAttribute(linkRel, linkTarget),
+    onClick: onClick
+  }), !!adMark && renderAdMark(), /*#__PURE__*/React.createElement("img", _extends({
+    className: cn('image')
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
+    srcSet: imageSrcSet,
+    src: imageSrc,
+    alt: imageAlt || ''
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, hasBadge && renderBadge, !!(logo === null || logo === void 0 ? void 0 : logo.src) && !hasBadge && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.logo), {
+    className: cn('logo')
+  }), /*#__PURE__*/React.createElement("img", {
+    className: cn('logo-img'),
+    src: logo.src,
+    alt: logo.alt || ''
+  })), /*#__PURE__*/React.createElement(Header, {
+    as: "h3",
+    className: classes === null || classes === void 0 ? void 0 : classes.title,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title
+    }
+  }, convert(title, {})), !!subtitle && /*#__PURE__*/React.createElement("div", {
+    className: cn('subtitle')
+  }, /*#__PURE__*/React.createElement(Paragraph, {
+    hasMargin: false,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtitle
+    }
+  }, convert(subtitle, {}))), !!list.length && /*#__PURE__*/React.createElement("ul", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.list), {
+    className: cn('list')
+  }), list.map(function (item, i) {
+    return /*#__PURE__*/React.createElement("li", {
+      className: cn('list-item'),
+      key: i
+    }, convert(item, listItemConvertConfig));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn('footer')
+  }, /*#__PURE__*/React.createElement(Button, {
+    sizeAll: "small",
+    type: "text",
+    showArrow: true
+  }, linkTitle))));
+};
+export default PromoCard;

package/dist/es/components/PromoCards/types.d.ts

@@ -0,0 +1,62 @@
+import type { IPriceBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PriceBadge/PriceBadge';
+import type { IPromoBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PromoBadge/PromoBadge';
+import type { ITooltipProps } from '@megafon/ui-core/dist/lib/components/Tooltip/Tooltip';
+type ImageType = {
+    src: string;
+    src2x?: string;
+    alt?: string;
+};
+type LogoType = {
+    src?: string;
+    alt?: string;
+};
+type LinkType = {
+    title: string;
+    href: string;
+    target?: '_self' | '_blank';
+    rel?: string;
+};
+type PromoBadgeType = {
+    text: string;
+    color: IPromoBadgeProps['color'];
+};
+type PriceBadgeType = {
+    text: string;
+    iconType?: IPriceBadgeProps['iconType'];
+    theme?: IPriceBadgeProps['theme'];
+};
+type AdMarkType = {
+    /** Заголовок */
+    title: string;
+    /** Параметры тултипа (пропсы компонента Tooltip из ui-core) */
+    tooltip: Omit<ITooltipProps, 'triggerElement'>;
+};
+export interface IPromoCardSettings {
+    /** Фон карточки */
+    background?: 'gray' | 'white' | 'shadow';
+}
+export interface IPromoCardData {
+    /** Заголовок карточки */
+    title: string;
+    /** Подзаголовок карточки */
+    subtitle?: string;
+    /** Список карточки (может принимать тег b в пунктах) */
+    list?: string[];
+    /** Параметры для ссылки в карточке */
+    link: LinkType;
+    /** Параметры для изображения в карточке */
+    image: ImageType;
+    /** Параметры для логотипа в карточке */
+    logo?: LogoType;
+    /** Бейдж в карточке */
+    badge?: React.ReactElement | null;
+    /** Параметры для отображения компонента PromoBadge в карточке */
+    promoBadge?: PromoBadgeType | null;
+    /** Параметры для отображения компонента PriceBadge в карточке */
+    priceBadge?: PriceBadgeType | null;
+    /** Рекламная метка */
+    adMark?: AdMarkType | null;
+    /** Обработчик клика по карточке */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+export {};

package/dist/es/components/PromoCards/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Parameter } from '@megafon/ui-core';
+type PropertyProps = React.ComponentProps<typeof Parameter>;
+declare const Property: React.FC<PropertyProps>;
+export default Property;

package/dist/es/components/Property/Property.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Parameter } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+var cn = cnCreate('mfui-property');
+var Property = function Property(props) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(Parameter, props));
+};
+export default Property;

package/dist/es/components/ServiceCards/ServiceCards.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-service-cards__items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:20px}@media screen and (min-width:768px){.mfui-service-cards__items{display:grid;grid-auto-rows:290px;grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:1280px){.mfui-service-cards__items{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:768px){.mfui-service-cards__item_size_big{grid-row-end:span 2;grid-row-start:1}}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ServiceCardDataType, BackgroundType } from './types';
+import './ServiceCards.scss';
+export interface IServiceCardsProps {
+    /** Цвет фона плиток */
+    background?: BackgroundType;
+    /** Список плиток */
+    items: [ServiceCardDataType, ServiceCardDataType, ServiceCardDataType, ServiceCardDataType, ServiceCardDataType];
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        card?: string;
+        cardTitle?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+        card?: Record<string, string>;
+        cardTitle?: Record<string, string>;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const ServiceCards: React.FC<IServiceCardsProps>;
+export default ServiceCards;

package/dist/es/components/ServiceCards/ServiceCards.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import ServiceCard from "./components/ServiceCard/ServiceCard";
+import "./ServiceCards.css";
+var cn = cnCreate('mfui-service-cards');
+var ServiceCards = function ServiceCards(_ref) {
+  var className = _ref.className,
+    classes = _ref.classes,
+    items = _ref.items,
+    background = _ref.background,
+    dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef;
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('items')
+  }, items.map(function (item, i) {
+    var size = i === 0 ? 'big' : 'small';
+    return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      className: cn('item', {
+        size: size
+      }),
+      key: "".concat(item.title, "_").concat(i)
+    }), /*#__PURE__*/React.createElement(ServiceCard, _extends({}, item, {
+      background: background,
+      size: size,
+      classes: {
+        root: classes === null || classes === void 0 ? void 0 : classes.card,
+        title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
+      },
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1),
+        title: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.cardTitle, i + 1)
+      }
+    })));
+  })));
+};
+export default ServiceCards;

package/dist/es/components/ServiceCards/components/ServiceCard/ServiceCard.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-service-card{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;background-color:var(--base);border-radius:24px;color:var(--content);height:100%;justify-content:space-between;overflow:hidden;padding:24px 24px 22px;-webkit-transition:background-color,-webkit-box-shadow;transition:background-color,-webkit-box-shadow;transition:background-color,box-shadow;transition:background-color,box-shadow,-webkit-box-shadow;-webkit-transition-duration:.3s;transition-duration:.3s;width:100%}@media screen and (min-width:768px){.mfui-service-card{padding-bottom:32px}}.mfui-service-card:hover{text-decoration:none}.mfui-service-card__title{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-service-card__title{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-service-card__title{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-service-card__title{font-size:32px;line-height:40px}}.mfui-service-card__subtitle{font-size:15px;font-weight:400;line-height:24px;margin-top:12px}.mfui-service-card__image-wrapper{overflow:hidden}.mfui-service-card__image{display:block;height:240px;width:240px}.mfui-service-card__circle,.mfui-service-card__price{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-service-card__circle{-webkit-box-pack:center;-ms-flex-pack:center;border:1px solid var(--brandGreen);border-radius:50%;height:48px;justify-content:center;width:48px}.mfui-service-card:hover .mfui-service-card__circle{-webkit-animation:scale-circle 1s ease-out forwards;animation:scale-circle 1s ease-out forwards;-webkit-transform-origin:center;transform-origin:center}.mfui-service-card__arrow{height:32px;min-width:32px;width:32px;fill:var(--brandGreen)}.mfui-service-card__value{font-size:15px;font-weight:500;line-height:24px;margin-left:8px}.mfui-service-card_size_big .mfui-service-card__image-wrapper{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;border-radius:24px;justify-content:center;margin:32px auto}@media screen and (min-width:768px){.mfui-service-card_size_big .mfui-service-card__image{height:auto;max-height:100%;max-width:100%;width:auto}}.mfui-service-card_size_small .mfui-service-card__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-service-card_size_small .mfui-service-card__title{font-size:20px;line-height:28px}}.mfui-service-card_size_small .mfui-service-card__subtitle{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3}.mfui-service-card_size_small .mfui-service-card__footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@media screen and (max-width:767px){.mfui-service-card_size_small .mfui-service-card__footer{margin-top:20px}}.mfui-service-card_size_small .mfui-service-card__image-wrapper{margin-bottom:-22px;margin-right:-24px}@media screen and (min-width:768px){.mfui-service-card_size_small .mfui-service-card__image-wrapper{margin-bottom:-32px}}.mfui-service-card_size_small .mfui-service-card__image{height:110px;width:110px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-service-card_size_small .mfui-service-card__image{height:125px;width:125px}}@media screen and (min-width:1024px){.mfui-service-card_size_small .mfui-service-card__image{height:150px;width:150px}}@media screen and (max-width:767px){.mfui-service-card_size_small .mfui-service-card__circle{height:32px;width:32px}.mfui-service-card_size_small .mfui-service-card__arrow{height:20px;min-width:20px;width:20px}}.mfui-service-card:hover:not(.mfui-service-card_background_gray){-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-service-card_background_shadow{-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-service-card_background_gray{background-color:var(--spbSky0)}.mfui-service-card_background_gray:hover{background-color:var(--spbSky1)}@-webkit-keyframes scale-circle{0%{scale:1}50%{scale:.6875}to{scale:1}}@keyframes scale-circle{0%{scale:1}50%{scale:.6875}to{scale:1}}

package/dist/es/components/ServiceCards/components/ServiceCard/ServiceCard.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SizeType, ServiceCardDataType, BackgroundType } from '../../types';
+import './ServiceCard.scss';
+export interface IServiceCardProps extends ServiceCardDataType {
+    size: SizeType;
+    background?: BackgroundType;
+    classes?: {
+        root?: string;
+        title?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        title?: Record<string, string>;
+        subtitle?: Record<string, string>;
+        footer?: Record<string, string>;
+    };
+}
+declare const ServiceCard: React.FC<IServiceCardProps>;
+export default ServiceCard;