@megafon/ui-shared 6.10.0 → 6.11.0

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { Ref } from 'react';
 import { IInfoCardData, IInfoCardSettings } from './types';
 import './InfoCards.less';
 export interface IInfoCards extends IInfoCardSettings {
@@ -8,6 +8,7 @@ export interface IInfoCards extends IInfoCardSettings {
     classes?: {
         root?: string;
         card?: string;
+        cardTitle?: string;
     };
     /** Дополнительные data атрибуты к внутренним элементам */
     dataAttrs?: {
@@ -16,6 +17,8 @@ export interface IInfoCards extends IInfoCardSettings {
     };
     /** Список карточек */
     items: IInfoCardData[];
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
 }
 declare const InfoCards: React.FC<IInfoCards>;
 export default InfoCards;

package/dist/lib/components/InfoCards/InfoCards.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,7 +11,7 @@ require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.array.concat.js");
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
@@ -21,10 +19,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _InfoCard = _interopRequireDefault(require("./components/InfoCard/InfoCard"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var cn = (0, _uiHelpers.cnCreate)('mfui-v6-info-cards');
@@ -39,15 +33,17 @@ var InfoCards = function InfoCards(_ref) {
       imgPosition = _ref$imgPosition === void 0 ? 'top-left' : _ref$imgPosition,
       _ref$background = _ref.background,
       background = _ref$background === void 0 ? 'stroke' : _ref$background,
-      dataAttrs = _ref.dataAttrs;
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+      dataAttrs = _ref.dataAttrs,
+      rootRef = _ref.rootRef;
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       size: size,
       position: imgPosition,
       background: background
-    }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
+    ref: rootRef
   }), items.map(function (item, i) {
-    return /*#__PURE__*/React.createElement(_InfoCard["default"], (0, _extends2["default"])({}, item, {
+    return /*#__PURE__*/_react["default"].createElement(_InfoCard["default"], (0, _extends2["default"])({}, item, {
       className: classes === null || classes === void 0 ? void 0 : classes.card,
       size: size,
       imgPosition: imgPosition,
@@ -55,6 +51,9 @@ var InfoCards = function InfoCards(_ref) {
       dataAttrs: {
         root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
       },
+      classes: {
+        title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
+      },
       key: "".concat(item.title, "_").concat(i)
     }));
   }));
@@ -64,7 +63,8 @@ InfoCards.propTypes = {
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     root: _propTypes["default"].string,
-    card: _propTypes["default"].string
+    card: _propTypes["default"].string,
+    cardTitle: _propTypes["default"].string
   }),
   dataAttrs: _propTypes["default"].shape({
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
@@ -82,7 +82,10 @@ InfoCards.propTypes = {
     target: _propTypes["default"].oneOf(['_self', '_blank']),
     rel: _propTypes["default"].string,
     moreInfo: _propTypes["default"].string
-  }).isRequired).isRequired
+  }).isRequired).isRequired,
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])])
 };
 var _default = InfoCards;
 exports["default"] = _default;

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

@@ -58,7 +58,10 @@ h5 {
   -webkit-transition: color 0.3s;
   transition: color 0.3s;
 }
-.mfui-v6-info-card_link:hover .mfui-v6-info-card__more-info {
+.mfui-v6-info-card_active {
+  cursor: pointer;
+}
+.mfui-v6-info-card_active:hover .mfui-v6-info-card__more-info {
   color: var(--brandGreen);
 }
 .mfui-v6-info-card__more-info-text {
@@ -195,6 +198,26 @@ h5 {
 .mfui-v6-info-card_position_right-side .mfui-v6-info-card__more-info {
   padding-top: 8px;
 }
+@media screen and (min-width: 768px) {
+  .mfui-v6-info-card_size_big.mfui-v6-info-card_align-center {
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-v6-info-card_size_big.mfui-v6-info-card_align-center .mfui-v6-info-card__more-info {
+    margin-top: 0;
+  }
+}
+.mfui-v6-info-card_position_right-side.mfui-v6-info-card_align-center {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.mfui-v6-info-card_position_right-side.mfui-v6-info-card_align-center .mfui-v6-info-card__more-info {
+  margin-top: 0;
+}
 .mfui-v6-info-card_background_stroke {
   border: 1px solid var(--spbSky2);
 }
@@ -218,20 +241,20 @@ h5 {
 .mfui-v6-info-card_background_no {
   padding: 0;
 }
-.mfui-v6-info-card_background_stroke.mfui-v6-info-card_link:hover {
+.mfui-v6-info-card_background_stroke.mfui-v6-info-card_active:hover {
   background-color: var(--spbSky0);
 }
-.mfui-v6-info-card_background_shadow.mfui-v6-info-card_link:hover,
-.mfui-v6-info-card_background_white.mfui-v6-info-card_link:hover {
+.mfui-v6-info-card_background_shadow.mfui-v6-info-card_active:hover,
+.mfui-v6-info-card_background_white.mfui-v6-info-card_active:hover {
   -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
           box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
 }
-.mfui-v6-info-card_background_gray.mfui-v6-info-card_link:hover {
+.mfui-v6-info-card_background_gray.mfui-v6-info-card_active:hover {
   background-color: var(--spbSky1);
 }
-.mfui-v6-info-card_background_purple.mfui-v6-info-card_link:hover {
+.mfui-v6-info-card_background_purple.mfui-v6-info-card_active:hover {
   background-color: var(--buttonHoverPurpleSoft);
 }
-.mfui-v6-info-card_background_green.mfui-v6-info-card_link:hover {
+.mfui-v6-info-card_background_green.mfui-v6-info-card_active:hover {
   background-color: var(--buttonHoverGreenSoft);
 }

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

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

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

@@ -55,20 +55,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 = isBigSize ? 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;
@@ -81,12 +84,15 @@ var InfoCard = function InfoCard(_ref) {
     href: isLink ? href : undefined,
     target: isLink ? target : undefined,
     rel: isLink ? (0, _setRelAttribute.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,
@@ -94,18 +100,22 @@ var InfoCard = function InfoCard(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cn('content')
   }, !!title && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
-    className: cn('title')
-  }), title), !!description && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
+    className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
+  }), (0, _uiHelpers.convert)(title, {})), !!description && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
     className: cn('description')
-  }), description), !!moreInfo && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
+  }), (0, _uiHelpers.convert)(description, {})), !!moreInfo && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.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())));
+  }, (0, _uiHelpers.convert)(moreInfo, {})), isActive && renderArrowRight())));
 };
 
 InfoCard.propTypes = {
   className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    title: _propTypes["default"].string
+  }),
   dataAttrs: _propTypes["default"].shape({
     root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
     title: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),

package/dist/lib/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/lib/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';
+declare 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/lib/components/PromoCards/PromoCards.js

@@ -0,0 +1,113 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _PromoCard = _interopRequireDefault(require("./components/PromoCard/PromoCard"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _slidesSettings;
+
+var slidesSettings = (_slidesSettings = {}, (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 2,
+  spaceBetween: 20
+}), (0, _defineProperty2["default"])(_slidesSettings, _uiHelpers.breakpoints.DESKTOP_SMALL_START, {
+  slidesPerView: 3,
+  spaceBetween: 20
+}), _slidesSettings);
+var MIN_ITEMS_COUNT = 2;
+var cn = (0, _uiHelpers.cnCreate)('mfui-v6-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", (0, _extends2["default"])({}, (0, _uiHelpers.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(_uiCore.Carousel, {
+    slidesSettings: slidesSettings,
+    navTheme: carouselNavTheme,
+    gradient: true,
+    gradientColor: carouselGradientColor
+  }, items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(_PromoCard["default"], (0, _extends2["default"])({}, item, {
+      background: background,
+      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]),
+      key: i + item.title
+    }));
+  })));
+};
+
+PromoCards.propTypes = {
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    subtitle: _propTypes["default"].string,
+    link: _propTypes["default"].shape({
+      title: _propTypes["default"].string.isRequired,
+      href: _propTypes["default"].string.isRequired,
+      target: _propTypes["default"].oneOf(['_self', '_blank']),
+      rel: _propTypes["default"].string
+    }).isRequired,
+    image: _propTypes["default"].shape({
+      src: _propTypes["default"].string.isRequired,
+      src2x: _propTypes["default"].string,
+      alt: _propTypes["default"].string
+    }).isRequired,
+    logo: _propTypes["default"].shape({
+      src: _propTypes["default"].string,
+      alt: _propTypes["default"].string
+    }),
+    badge: _propTypes["default"].oneOf([_propTypes["default"].element, null])
+  }).isRequired).isRequired,
+  background: _propTypes["default"].oneOf(['white', 'gray', 'shadow']),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].objectOf(_propTypes["default"].string),
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].object),
+  carouselNavTheme: _propTypes["default"].oneOf(['light', 'green']),
+  carouselGradientColor: _propTypes["default"].oneOf(['green', 'default', 'black', 'spbSky0', 'spbSky1', 'spbSky2']),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])])
+};
+var _default = PromoCards;
+exports["default"] = _default;

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

@@ -0,0 +1,157 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-v6-promo-card {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  min-height: 100%;
+  border-radius: 24px;
+  color: var(--content);
+  text-decoration: none;
+  background-color: var(--base);
+  cursor: pointer;
+  -webkit-transition: background-color, 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color, 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color, 0.3s, box-shadow, 0.3s;
+  transition: background-color, 0.3s, box-shadow, 0.3s, -webkit-box-shadow;
+}
+.mfui-v6-promo-card_background_shadow {
+  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+.mfui-v6-promo-card_background_white:hover,
+.mfui-v6-promo-card_background_shadow:hover {
+  text-decoration: none;
+  -webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
+          box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
+}
+.mfui-v6-promo-card_background_gray {
+  background-color: var(--spbSky0);
+}
+.mfui-v6-promo-card_background_gray:hover {
+  text-decoration: none;
+  background-color: var(--spbSky1);
+}
+.mfui-v6-promo-card__image {
+  width: 100%;
+  border-radius: inherit;
+  vertical-align: top;
+}
+.mfui-v6-promo-card__content {
+  position: relative;
+  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;
+  padding: 32px 24px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-promo-card__content {
+    padding: 32px;
+  }
+}
+.mfui-v6-promo-card__badge {
+  position: absolute;
+  top: 0;
+  left: 24px;
+  translate: 0 -50%;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-promo-card__badge {
+    left: 32px;
+  }
+}
+.mfui-v6-promo-card__logo {
+  position: absolute;
+  top: 0;
+  right: 44px;
+  border: 4px solid var(--base);
+  border-radius: 50%;
+  translate: 0 -50%;
+  background-color: var(--base);
+  -webkit-transition: border-color, 0.3s;
+  transition: border-color, 0.3s;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-promo-card__logo {
+    right: 52px;
+  }
+}
+.mfui-v6-promo-card__logo:before,
+.mfui-v6-promo-card__logo:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  width: 10px;
+  height: 10px;
+  translate: 0 -100%;
+}
+.mfui-v6-promo-card__logo:before {
+  background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--base) 10px);
+  left: -12px;
+}
+.mfui-v6-promo-card__logo:after {
+  background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--base) 10px);
+  right: -12px;
+}
+.mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo {
+  border-color: var(--spbSky0);
+  background-color: var(--spbSky0);
+}
+.mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo:before {
+  background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--spbSky0) 10px);
+}
+.mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo:after {
+  background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--spbSky0) 10px);
+}
+.mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo {
+  border-color: var(--spbSky1);
+  background-color: var(--spbSky1);
+}
+.mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo:before {
+  background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--spbSky1) 10px);
+}
+.mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo:after {
+  background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--spbSky1) 10px);
+}
+.mfui-v6-promo-card__logo-img {
+  width: 56px;
+  height: 56px;
+  border: 1px solid var(--spbSky1);
+  border-radius: inherit;
+  vertical-align: top;
+}
+@media screen and (min-width: 768px) {
+  .mfui-v6-promo-card__logo-img {
+    width: 64px;
+    height: 64px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-v6-promo-card__logo-img {
+    width: 72px;
+    height: 72px;
+  }
+}
+.mfui-v6-promo-card__subtitle {
+  margin-top: 8px;
+}
+.mfui-v6-promo-card__footer {
+  margin-top: auto;
+  padding-top: 16px;
+}

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IPromoCardData, IPromoCardSettings } from '../../types';
+import './PromoCard.less';
+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;