@megafon/ui-shared 7.4.0 → 7.6.0

package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css

@@ -1 +1 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-info-card{border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;line-height:24px;-webkit-transition:background-color .3s,-webkit-box-shadow .3s;transition:background-color .3s,-webkit-box-shadow .3s;transition:background-color .3s,box-shadow .3s;transition:background-color .3s,box-shadow .3s,-webkit-box-shadow .3s}.mfui-info-card,.mfui-info-card:hover{text-decoration:none}.mfui-info-card__content{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-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-info-card__title+.mfui-info-card__description{margin-top:8px}.mfui-info-card__more-info{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:12px;line-height:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:500;margin-top:auto;padding-top:12px;-webkit-transition:color .3s;transition:color .3s}.mfui-info-card_link:hover .mfui-info-card__more-info{color:var(--brandGreen)}.mfui-info-card__more-info-text{margin-top:-2px}.mfui-info-card__more-info-arrow{height:20px;width:20px;fill:currentColor}.mfui-info-card_size_small{padding:16px 20px}.mfui-info-card_size_small .mfui-info-card__image{height:64px;margin-bottom:16px;width:64px}.mfui-info-card_size_small .mfui-info-card__title{font-size:15px;font-weight:500;line-height:24px}.mfui-info-card_size_small .mfui-info-card__description{font-size:12px;line-height:18px}.mfui-info-card_size_medium{padding:20px 24px}.mfui-info-card_size_medium .mfui-info-card__image{height:80px;margin-bottom:16px;width:80px}@media screen and (min-width:768px){.mfui-info-card_size_medium .mfui-info-card__image{margin-bottom:24px}}.mfui-info-card_size_medium .mfui-info-card__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-info-card_size_medium .mfui-info-card__title{font-size:20px;line-height:28px}}.mfui-info-card_size_big{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:24px}@media screen and (min-width:768px){.mfui-info-card_size_big{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:32px}}.mfui-info-card_size_big .mfui-info-card__image{-ms-flex-item-align:center;align-self:center;-webkit-box-ordinal-group:2;-ms-flex-order:1;height:150px;order:1;width:150px}@media screen and (max-width:767px){.mfui-info-card_size_big .mfui-info-card__image{-ms-flex-item-align:start;align-self:start;-webkit-box-ordinal-group:1;-ms-flex-order:0;margin-bottom:16px;order:0}}.mfui-info-card_size_big .mfui-info-card__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-info-card_size_big .mfui-info-card__title{font-size:20px;line-height:28px}}.mfui-info-card_size_big .mfui-info-card__more-info{font-size:15px;line-height:24px;padding-top:24px}.mfui-info-card_size_big .mfui-info-card__more-info-arrow{height:32px;width:32px}.mfui-info-card_position_top-left{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-info-card_position_right-side{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-info-card_position_right-side .mfui-info-card__image{-ms-flex-item-align:center;align-self:center;-webkit-box-ordinal-group:2;-ms-flex-order:1;margin-bottom:0;order:1}.mfui-info-card_position_right-side .mfui-info-card__title+.mfui-info-card__description{margin-top:2px}.mfui-info-card_position_right-side .mfui-info-card__more-info{padding-top:8px}.mfui-info-card_background_stroke{border:1px solid var(--spbSky2)}.mfui-info-card_background_shadow{background-color:var(--base);-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-info-card_background_green{background-color:var(--brandGreen20)}.mfui-info-card_background_purple{background-color:var(--brandPurple20)}.mfui-info-card_background_white{background-color:var(--base)}.mfui-info-card_background_gray{background-color:var(--spbSky0)}.mfui-info-card_background_no{padding:0}.mfui-info-card_background_stroke.mfui-info-card_link:hover{background-color:var(--spbSky0)}.mfui-info-card_background_shadow.mfui-info-card_link:hover,.mfui-info-card_background_white.mfui-info-card_link:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-info-card_background_gray.mfui-info-card_link:hover{background-color:var(--spbSky1)}.mfui-info-card_background_purple.mfui-info-card_link:hover{background-color:var(--buttonHoverPurpleSoft)}.mfui-info-card_background_green.mfui-info-card_link:hover{background-color:var(--buttonHoverGreenSoft)}
+h1,h2,h3,h4,h5{margin:0}.mfui-info-card{border-radius:24px;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--content);-webkit-column-gap:12px;-moz-column-gap:12px;column-gap:12px;display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;line-height:24px;-webkit-transition:background-color .3s,-webkit-box-shadow .3s;transition:background-color .3s,-webkit-box-shadow .3s;transition:background-color .3s,box-shadow .3s;transition:background-color .3s,box-shadow .3s,-webkit-box-shadow .3s}.mfui-info-card,.mfui-info-card:hover{text-decoration:none}.mfui-info-card__content{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-flex:1;-ms-flex-positive:1;flex-grow:1}.mfui-info-card__title+.mfui-info-card__description{margin-top:8px}.mfui-info-card__more-info{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:12px;line-height:18px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:500;margin-top:auto;padding-top:12px;-webkit-transition:color .3s;transition:color .3s}.mfui-info-card_active{cursor:pointer}.mfui-info-card_active:hover .mfui-info-card__more-info{color:var(--brandGreen)}.mfui-info-card__more-info-text{margin-top:-2px}.mfui-info-card__more-info-arrow{height:20px;width:20px;fill:currentColor}.mfui-info-card_size_small{padding:16px 20px}.mfui-info-card_size_small .mfui-info-card__image{height:64px;margin-bottom:16px;width:64px}.mfui-info-card_size_small .mfui-info-card__title{font-size:15px;font-weight:500;line-height:24px}.mfui-info-card_size_small .mfui-info-card__description{font-size:12px;line-height:18px}.mfui-info-card_size_medium{padding:20px 24px}.mfui-info-card_size_medium .mfui-info-card__image{height:80px;margin-bottom:16px;width:80px}@media screen and (min-width:768px){.mfui-info-card_size_medium .mfui-info-card__image{margin-bottom:24px}}.mfui-info-card_size_medium .mfui-info-card__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-info-card_size_medium .mfui-info-card__title{font-size:20px;line-height:28px}}.mfui-info-card_size_big{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:24px}@media screen and (min-width:768px){.mfui-info-card_size_big{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:32px}}.mfui-info-card_size_big .mfui-info-card__image{-ms-flex-item-align:center;align-self:center;-webkit-box-ordinal-group:2;-ms-flex-order:1;height:150px;order:1;width:150px}@media screen and (max-width:767px){.mfui-info-card_size_big .mfui-info-card__image{-ms-flex-item-align:start;align-self:start;-webkit-box-ordinal-group:1;-ms-flex-order:0;margin-bottom:16px;order:0}}.mfui-info-card_size_big .mfui-info-card__title{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px}@media screen and (min-width:1280px){.mfui-info-card_size_big .mfui-info-card__title{font-size:20px;line-height:28px}}.mfui-info-card_size_big .mfui-info-card__more-info{font-size:15px;line-height:24px;padding-top:24px}.mfui-info-card_size_big .mfui-info-card__more-info-arrow{height:32px;width:32px}.mfui-info-card_position_top-left{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-info-card_position_right-side{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-info-card_position_right-side .mfui-info-card__image{-ms-flex-item-align:center;align-self:center;-webkit-box-ordinal-group:2;-ms-flex-order:1;margin-bottom:0;order:1}.mfui-info-card_position_right-side .mfui-info-card__title+.mfui-info-card__description{margin-top:2px}.mfui-info-card_position_right-side .mfui-info-card__more-info{padding-top:8px}@media screen and (min-width:768px){.mfui-info-card_size_big.mfui-info-card_align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-info-card_size_big.mfui-info-card_align-center .mfui-info-card__more-info{margin-top:0}}.mfui-info-card_position_right-side.mfui-info-card_align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-info-card_position_right-side.mfui-info-card_align-center .mfui-info-card__more-info{margin-top:0}.mfui-info-card_background_stroke{border:1px solid var(--spbSky2)}.mfui-info-card_background_shadow{background-color:var(--base);-webkit-box-shadow:0 2px 12px rgba(0,0,0,.1);box-shadow:0 2px 12px rgba(0,0,0,.1)}.mfui-info-card_background_green{background-color:var(--brandGreen20)}.mfui-info-card_background_purple{background-color:var(--brandPurple20)}.mfui-info-card_background_white{background-color:var(--base)}.mfui-info-card_background_gray{background-color:var(--spbSky0)}.mfui-info-card_background_no{padding:0}.mfui-info-card_background_stroke.mfui-info-card_active:hover{background-color:var(--spbSky0)}.mfui-info-card_background_shadow.mfui-info-card_active:hover,.mfui-info-card_background_white.mfui-info-card_active:hover{-webkit-box-shadow:0 8px 28px rgba(0,0,0,.1);box-shadow:0 8px 28px rgba(0,0,0,.1)}.mfui-info-card_background_gray.mfui-info-card_active:hover{background-color:var(--spbSky1)}.mfui-info-card_background_purple.mfui-info-card_active:hover{background-color:var(--buttonHoverPurpleSoft)}.mfui-info-card_background_green.mfui-info-card_active:hover{background-color:var(--buttonHoverGreenSoft)}

package/dist/es/components/InfoCards/components/InfoCard/InfoCard.d.ts

@@ -3,6 +3,10 @@ import { IInfoCardData, IInfoCardSettings } from '../../types';
 import './InfoCard.scss';
 export interface IInfoCard extends IInfoCardSettings, IInfoCardData {
     className?: string;
+    classes?: {
+        root?: string;
+        title?: string;
+    };
     dataAttrs?: {
         root?: Record<string, string>;
         title?: Record<string, string>;

package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
 import { setRelAttribute } from "../../../../helpers/setRelAttribute";
 import "./InfoCard.css";
 var ArrowRight16 = function ArrowRight16(props) {
@@ -30,20 +30,23 @@ var InfoCard = function InfoCard(_ref) {
     href = _ref.href,
     target = _ref.target,
     rel = _ref.rel,
+    download = _ref.download,
     moreInfo = _ref.moreInfo,
+    onClick = _ref.onClick,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$imgPosition = _ref.imgPosition,
-    imgPosition = _ref$imgPosition === void 0 ? 'right-side' : _ref$imgPosition,
+    imgPosition = _ref.imgPosition,
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'stroke' : _ref$background,
-    dataAttrs = _ref.dataAttrs;
+    dataAttrs = _ref.dataAttrs,
+    classes = _ref.classes;
   var RootElement = href ? 'a' : 'div';
   var isBigSize = size === 'big';
   var finalImgPosition = size === 'big' ? false : imgPosition;
   var isInvalidBackground = background === 'no' && (imgPosition === 'right-side' || size === 'big');
   var finalBackground = isInvalidBackground ? 'stroke' : background;
   var isLink = !!href;
+  var isActive = isLink || !!onClick;
   var renderArrowRight = function renderArrowRight() {
     var ArrowRight = isBigSize ? ArrowRight24 : ArrowRight16;
     return /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreArrow), {
@@ -54,12 +57,15 @@ var InfoCard = function InfoCard(_ref) {
     href: isLink ? href : undefined,
     target: isLink ? target : undefined,
     rel: isLink ? setRelAttribute(rel, target) : undefined,
+    download: isLink ? download : undefined,
+    onClick: onClick,
     className: cn({
       size: size,
       position: finalImgPosition,
       background: finalBackground,
-      link: isLink
-    }, [className])
+      active: isActive,
+      'align-center': !moreInfo
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
   }), /*#__PURE__*/React.createElement("img", {
     className: cn('image'),
     src: imgSrc,
@@ -67,13 +73,13 @@ var InfoCard = function InfoCard(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, !!title && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
-    className: cn('title')
-  }), title), !!description && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
+  }), convert(title, {})), !!description && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
     className: cn('description')
-  }), description), !!moreInfo && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
+  }), convert(description, {})), !!moreInfo && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
     className: cn('more-info')
   }), /*#__PURE__*/React.createElement("span", {
     className: cn('more-info-text')
-  }, moreInfo), isLink && renderArrowRight())));
+  }, convert(moreInfo, {})), isActive && renderArrowRight())));
 };
 export default InfoCard;

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

@@ -1,10 +1,11 @@
+import React from 'react';
 export interface IInfoCardSettings {
     /** Размер карточки */
     size?: 'big' | 'medium' | 'small';
     /** Расположение изображения */
     imgPosition?: 'right-side' | 'top-left';
     /** Фон карточки */
-    background?: 'shadow' | 'stroke' | 'gray' | 'green' | 'purple' | 'white' | 'gray' | 'no';
+    background?: 'shadow' | 'stroke' | 'gray' | 'green' | 'purple' | 'white' | 'no';
 }
 export interface IInfoCardData {
     /** Заголовок */
@@ -21,6 +22,10 @@ export interface IInfoCardData {
     target?: '_self' | '_blank';
     /** Атрибут rel ссылки */
     rel?: string;
+    /** Добавление атрибута download для ссылки */
+    download?: boolean;
     /** Дополнительная информация */
     moreInfo?: string;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
 }

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

@@ -0,0 +1,28 @@
+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;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        card?: Record<string, string>;
+    };
+    /** Ссылка на элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const PromoCards: React.FC<IPromoCards>;
+export default PromoCards;

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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,
+    rootRef = _ref.rootRef;
+  if (items.length < MIN_ITEMS_COUNT) {
+    return null;
+  }
+  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
+  }, items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(PromoCard, _extends({}, item, {
+      background: background,
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
+      },
+      className: cn([classes === null || classes === void 0 ? void 0 : classes.card]),
+      key: i + item.title
+    }));
+  })));
+};
+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;-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__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__footer{margin-top:auto;padding-top:16px}

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IPromoCardData, IPromoCardSettings } from '../../types';
+import './PromoCard.scss';
+export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
+    className?: string;
+    classes?: {
+        root?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        image?: Record<string, string>;
+        badge?: Record<string, string>;
+        logo?: Record<string, string>;
+        subtitle?: Record<string, string>;
+    };
+}
+declare const PromoCard: React.FC<IPromoCard>;
+export default PromoCard;

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

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.string.link.js";
+import * as React from 'react';
+import { Button, Header, Paragraph } from '@megafon/ui-core';
+import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
+import { setRelAttribute } from "../../../../helpers/setRelAttribute";
+import "./PromoCard.css";
+var cn = cnCreate('mfui-promo-card');
+var PromoCard = function PromoCard(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    link = _ref.link,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'shadow' : _ref$background,
+    image = _ref.image,
+    logo = _ref.logo,
+    badge = _ref.badge,
+    className = _ref.className,
+    classes = _ref.classes,
+    dataAttrs = _ref.dataAttrs,
+    onClick = _ref.onClick;
+  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 imageSrcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
+  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
+  }), /*#__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')
+  }, !!badge && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge), {
+    className: cn('badge')
+  }), badge), !!(logo === null || logo === void 0 ? void 0 : logo.src) && !badge && /*#__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"
+  }, convert(title, {})), !!subtitle && /*#__PURE__*/React.createElement(Paragraph, {
+    className: cn('subtitle'),
+    hasMargin: false,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.subtitle
+    }
+  }, convert(subtitle, {})), /*#__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,28 @@
+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;
+};
+export interface IPromoCardSettings {
+    background?: 'gray' | 'white' | 'shadow';
+}
+export interface IPromoCardData {
+    title: string;
+    subtitle?: string;
+    link: LinkType;
+    image: ImageType;
+    logo?: LogoType;
+    badge?: React.ReactElement | null;
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+}
+export {};

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

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

package/dist/es/index.d.ts

@@ -13,6 +13,7 @@ export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
 export { default as BreadcrumbsItem } from './components/Breadcrumbs/components/BreadcrumbsItem';
 export { default as ButtonBanner } from './components/ButtonBanner/ButtonBanner';
 export { default as ButtonLinkBox } from './components/ButtonLinkBox/ButtonLinkBox';
+export { default as ButtonsBox } from './components/ButtonsBox/ButtonsBox';
 export { default as Card } from './components/Card/Card';
 export { default as CardsBox } from './components/CardsBox/CardsBox';
 export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
@@ -30,6 +31,8 @@ export { default as NotificationBox } from './components/NotificationBox/Notific
 export { default as PageTitle } from './components/PageTitle/PageTitle';
 export { default as Partners } from './components/Partners/Partners';
 export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
+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';
 export { default as PropertyDescription } from './components/Property/PropertyDescription';
 export { default as SidePictureCard } from './components/SidePictureCards/components/SidePictureCard';

package/dist/es/index.js

@@ -13,6 +13,7 @@ export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
 export { default as BreadcrumbsItem } from "./components/Breadcrumbs/components/BreadcrumbsItem";
 export { default as ButtonBanner } from "./components/ButtonBanner/ButtonBanner";
 export { default as ButtonLinkBox } from "./components/ButtonLinkBox/ButtonLinkBox";
+export { default as ButtonsBox } from "./components/ButtonsBox/ButtonsBox";
 export { default as Card } from "./components/Card/Card";
 export { default as CardsBox } from "./components/CardsBox/CardsBox";
 export { default as CarouselBox } from "./components/CarouselBox/CarouselBox";
@@ -30,6 +31,8 @@ export { default as NotificationBox } from "./components/NotificationBox/Notific
 export { default as PageTitle } from "./components/PageTitle/PageTitle";
 export { default as Partners } from "./components/Partners/Partners";
 export { default as PictureWithDescription } from "./components/PictureWithDescription/PictureWithDescription";
+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";
 export { default as PropertyDescription } from "./components/Property/PropertyDescription";
 export { default as SidePictureCard } from "./components/SidePictureCards/components/SidePictureCard";

package/dist/lib/components/ButtonsBox/ButtonsBox.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-buttons-box{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-buttons-box__buttons_equal-width{display:grid;gap:20px;max-width:-webkit-max-content;max-width:-moz-max-content;max-width:max-content}@media screen and (max-width:767px){.mfui-buttons-box__buttons_equal-width{grid-template-rows:repeat(2,1fr)}}@media screen and (min-width:768px){.mfui-buttons-box__buttons_equal-width{grid-template-columns:repeat(2,1fr)}}.mfui-buttons-box_h-align_center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import './ButtonsBox.scss';
+export type ButtonType = {
+    /** Тип */
+    type?: 'primary' | 'outline';
+    /** Иконка */
+    icon?: React.JSX.Element;
+    /** Название */
+    title?: string;
+    /** Ссылка */
+    href?: string;
+    /** Target свойство кнопки */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Rel - атрибут тега <a> */
+    rel?: string;
+    /** Задает атрибут download для тега <a> */
+    download?: boolean;
+    /** Показать стелку */
+    showArrow?: boolean;
+    /** Обработчик клика */
+    onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
+};
+export interface IButtonsBox {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        button?: Record<string, string>;
+        extraButton?: Record<string, string>;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Кнопка */
+    button: ButtonType;
+    /** Дополнительная кнопка */
+    extraButton?: ButtonType;
+    /** Горизонтальное выравнивание */
+    align?: 'center' | 'left';
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+}
+declare const ButtonsBox: React.FC<IButtonsBox>;
+export default ButtonsBox;

package/dist/lib/components/ButtonsBox/ButtonsBox.js

@@ -0,0 +1,56 @@
+"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"));
+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 }; }
+var cn = (0, _uiHelpers.cnCreate)('mfui-buttons-box');
+var ButtonsBox = function ButtonsBox(_ref) {
+  var className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    button = _ref.button,
+    extraButton = _ref.extraButton,
+    align = _ref.align,
+    rootRef = _ref.rootRef;
+  var showTwoButtons = !!button && !!extraButton;
+  var renderButton = function renderButton(btnProps, btnClassName, dataAttr) {
+    return /*#__PURE__*/React.createElement(_uiCore.Button, {
+      dataAttrs: {
+        root: dataAttr
+      },
+      className: btnClassName,
+      fullWidth: showTwoButtons,
+      type: btnProps.type,
+      theme: "green",
+      icon: btnProps.icon,
+      href: btnProps.href,
+      target: btnProps.target,
+      download: btnProps.download,
+      showArrow: btnProps.showArrow,
+      rel: (0, _setRelAttribute.setRelAttribute)(btnProps.rel, btnProps.target),
+      onClick: btnProps.onClick
+    }, btnProps.title);
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'h-align': align
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('buttons', {
+      'equal-width': showTwoButtons
+    })
+  }, !!button && renderButton(button, classes.button, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button), !!extraButton && renderButton(extraButton, classes.extraButton, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton)));
+};
+var _default = exports["default"] = ButtonsBox;