@megafon/ui-shared 6.10.0 → 6.11.1

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

@@ -15,12 +15,21 @@ declare type Props = {
     rootRef?: Ref<HTMLDivElement>;
     /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        inner?: string;
+    };
     /** Цвет фона */
     backgroundColor?: BackgroundColorType;
     /** Отключить отступ сверху */
     disablePaddingTop?: boolean;
     /** Отключить отступ снизу */
     disablePaddingBottom?: boolean;
+    /** Отключить скругление сверху */
+    disableRadiusTop?: boolean;
+    /** Отключить скругление снизу */
+    disableRadiusBottom?: boolean;
     /** Включить тень в нижней части компонента */
     bottomShadow?: boolean;
     /** Предотвратить прохождение верхнего отступа дочернего компонента через верхнюю границу контейнера */

package/dist/es/components/Container/Container.js

@@ -19,9 +19,12 @@ var Container = function Container(_ref) {
       rootRef = _ref.rootRef,
       id = _ref.id,
       className = _ref.className,
+      classes = _ref.classes,
       children = _ref.children,
       disablePaddingTop = _ref.disablePaddingTop,
       disablePaddingBottom = _ref.disablePaddingBottom,
+      disableRadiusTop = _ref.disableRadiusTop,
+      disableRadiusBottom = _ref.disableRadiusBottom,
       _ref$bottomShadow = _ref.bottomShadow,
       bottomShadow = _ref$bottomShadow === void 0 ? false : _ref$bottomShadow,
       _ref$preventMarginTop = _ref.preventMarginTopCollapse,
@@ -31,26 +34,34 @@ var Container = function Container(_ref) {
       'bg-color': backgroundColor,
       'bottom-shadow': bottomShadow,
       'disable-padding-top': disablePaddingTop,
-      'disable-padding-bottom': disablePaddingBottom
-    }, [className]),
+      'disable-padding-bottom': disablePaddingBottom,
+      'disable-radius-top': disableRadiusTop,
+      'disable-radius-bottom': disableRadiusBottom
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
     ref: rootRef,
     id: id
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner', {
       prevent: preventMarginTopCollapse
-    })
+    }, [classes === null || classes === void 0 ? void 0 : classes.inner])
   }, /*#__PURE__*/React.createElement(ContentArea, null, children)));
 };
 
 Container.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    inner: PropTypes.string
+  }),
   backgroundColor: PropTypes.oneOf(Object.values(BackgroundColors)),
   rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
     current: PropTypes.elementType
   }), PropTypes.any])]),
   disablePaddingTop: PropTypes.bool,
   disablePaddingBottom: PropTypes.bool,
+  disableRadiusTop: PropTypes.bool,
+  disableRadiusBottom: PropTypes.bool,
   bottomShadow: PropTypes.bool,
   preventMarginTopCollapse: PropTypes.bool
 };

package/dist/es/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/es/components/InfoCards/InfoCards.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.array.concat.js";
-import * as React from 'react';
+import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import InfoCard from "./components/InfoCard/InfoCard";
@@ -18,13 +18,15 @@ 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;
+      dataAttrs = _ref.dataAttrs,
+      rootRef = _ref.rootRef;
   return /*#__PURE__*/React.createElement("div", _extends({}, 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, _extends({}, item, {
       className: classes === null || classes === void 0 ? void 0 : classes.card,
@@ -34,6 +36,9 @@ var InfoCards = function InfoCards(_ref) {
       dataAttrs: {
         root: 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)
     }));
   }));
@@ -43,7 +48,8 @@ InfoCards.propTypes = {
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,
-    card: PropTypes.string
+    card: PropTypes.string,
+    cardTitle: PropTypes.string
   }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
@@ -61,6 +67,9 @@ InfoCards.propTypes = {
     target: PropTypes.oneOf(['_self', '_blank']),
     rel: PropTypes.string,
     moreInfo: PropTypes.string
-  }).isRequired).isRequired
+  }).isRequired).isRequired,
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
 };
 export default InfoCards;

package/dist/es/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/es/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/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 PropTypes from 'prop-types';
 import { setRelAttribute } from "../../../../helpers/setRelAttribute";
 import "./InfoCard.css";
@@ -35,20 +35,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;
@@ -61,12 +64,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,
@@ -74,18 +80,22 @@ 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())));
 };
 
 InfoCard.propTypes = {
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    title: PropTypes.string
+  }),
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
     title: PropTypes.objectOf(PropTypes.string.isRequired),

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';
+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/es/components/PromoCards/PromoCards.js

@@ -0,0 +1,90 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _slidesSettings;
+
+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 PropTypes from 'prop-types';
+import PromoCard from "./components/PromoCard/PromoCard";
+var slidesSettings = (_slidesSettings = {}, _defineProperty(_slidesSettings, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), _defineProperty(_slidesSettings, breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 2,
+  spaceBetween: 20
+}), _defineProperty(_slidesSettings, breakpoints.DESKTOP_SMALL_START, {
+  slidesPerView: 3,
+  spaceBetween: 20
+}), _slidesSettings);
+var MIN_ITEMS_COUNT = 2;
+var cn = 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", _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
+    }));
+  })));
+};
+
+PromoCards.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
+    link: PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      href: PropTypes.string.isRequired,
+      target: PropTypes.oneOf(['_self', '_blank']),
+      rel: PropTypes.string
+    }).isRequired,
+    image: PropTypes.shape({
+      src: PropTypes.string.isRequired,
+      src2x: PropTypes.string,
+      alt: PropTypes.string
+    }).isRequired,
+    logo: PropTypes.shape({
+      src: PropTypes.string,
+      alt: PropTypes.string
+    }),
+    badge: PropTypes.oneOf([PropTypes.element, null])
+  }).isRequired).isRequired,
+  background: PropTypes.oneOf(['white', 'gray', 'shadow']),
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  carouselNavTheme: PropTypes.oneOf(['light', 'green']),
+  carouselGradientColor: PropTypes.oneOf(['green', 'default', 'black', 'spbSky0', 'spbSky1', 'spbSky2']),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])])
+};
+export default PromoCards;

package/dist/es/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/es/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;