@megafon/ui-shared 6.3.0 → 6.4.0

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

@@ -72,8 +72,6 @@ export interface IImageBannerProps {
     imageDesktop2x?: string;
     /** Значение тега alt для изображения */
     imageAlt?: string;
-    /** Приоритет загрузки изображения */
-    fetchPriority?: 'auto' | 'high' | 'low';
     /** Выравнивание изображения по вертикали (по умолчанию center) */
     imageVerticalAlign?: ImageVerticalAlignType;
     /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -72,8 +72,6 @@ var ImageBanner = function ImageBanner(_ref2) {
       imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
       _ref2$imageAlt = _ref2.imageAlt,
       imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
-      _ref2$fetchPriority = _ref2.fetchPriority,
-      fetchPriority = _ref2$fetchPriority === void 0 ? 'auto' : _ref2$fetchPriority,
       _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
       imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
       title = _ref2.title,
@@ -150,8 +148,7 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('image', [classes.image]),
     src: imageMobile || imageMobile2x,
     srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
-    alt: imageAlt,
-    fetchPriority: fetchPriority
+    alt: imageAlt
   })));
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
@@ -200,7 +197,6 @@ ImageBanner.propTypes = {
   imageDesktop: PropTypes.string,
   imageDesktop2x: PropTypes.string,
   imageAlt: PropTypes.string,
-  fetchPriority: PropTypes.oneOf(['auto', 'high', 'low']),
   imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
   autoHeight: PropTypes.bool,
   isImageFullWidth: PropTypes.bool,

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

@@ -0,0 +1,75 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-info-cards {
+  display: grid;
+  grid-template-columns: auto;
+  gap: 20px;
+}
+@media screen and (min-width: 768px) {
+  .mfui-info-cards_size_small.mfui-info-cards_position_right-side {
+    grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-info-cards_size_small.mfui-info-cards_position_right-side {
+    grid-template-columns: repeat(auto-fit, minmax(438px, 1fr));
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-info-cards_size_small.mfui-info-cards_position_right-side {
+    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
+  }
+}
+@media screen and (min-width: 768px) {
+  .mfui-info-cards_size_small.mfui-info-cards_position_top-left {
+    grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-info-cards_size_small.mfui-info-cards_position_top-left {
+    grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
+    grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
+    grid-template-columns: repeat(auto-fit, minmax(438px, 1fr));
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
+    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
+    grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
+    grid-template-columns: repeat(auto-fit, minmax(209px, 1fr));
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
+    grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-info-cards_size_big {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+.mfui-info-cards_position_top-left.mfui-info-cards_background_no {
+  row-gap: 40px;
+}

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { IInfoCardData, IInfoCardSettings } from './types';
+import './InfoCards.less';
+export interface IInfoCards extends IInfoCardSettings {
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительные css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        card?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        card?: Record<string, string>;
+    };
+    /** Список карточек */
+    items: IInfoCardData[];
+}
+declare const InfoCards: React.FC<IInfoCards>;
+export default InfoCards;

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

@@ -0,0 +1,66 @@
+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 { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import InfoCard from "./components/InfoCard/InfoCard";
+import "./InfoCards.css";
+var cn = cnCreate('mfui-info-cards');
+
+var InfoCards = function InfoCards(_ref) {
+  var className = _ref.className,
+      classes = _ref.classes,
+      items = _ref.items,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
+      _ref$imgPosition = _ref.imgPosition,
+      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", _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])
+  }), items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(InfoCard, _extends({}, item, {
+      className: classes === null || classes === void 0 ? void 0 : classes.card,
+      size: size,
+      imgPosition: imgPosition,
+      background: background,
+      dataAttrs: {
+        root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
+      },
+      key: "".concat(item.title, "_").concat(i)
+    }));
+  }));
+};
+
+InfoCards.propTypes = {
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    card: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    card: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  size: PropTypes.oneOf(['big', 'medium', 'small']),
+  imgPosition: PropTypes.oneOf(['right-side', 'top-left']),
+  background: PropTypes.oneOf(['shadow', 'stroke', 'gray', 'green', 'purple', 'white', 'gray', 'no']),
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    imgSrc: PropTypes.string.isRequired,
+    imgAlt: PropTypes.string,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank']),
+    rel: PropTypes.string,
+    moreInfo: PropTypes.string
+  }).isRequired).isRequired
+};
+export default InfoCards;

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

@@ -0,0 +1,237 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-info-card {
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 24px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  border-radius: 24px;
+  color: var(--content);
+  text-decoration: none;
+  -webkit-column-gap: 12px;
+     -moz-column-gap: 12px;
+          column-gap: 12px;
+  -webkit-transition: background-color 0.3s, -webkit-box-shadow 0.3s;
+  transition: background-color 0.3s, -webkit-box-shadow 0.3s;
+  transition: background-color 0.3s, box-shadow 0.3s;
+  transition: background-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
+}
+.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;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 12px;
+  line-height: 18px;
+  margin-top: auto;
+  padding-top: 12px;
+  font-weight: 500;
+  -webkit-transition: color 0.3s;
+  transition: color 0.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 {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+.mfui-info-card_size_small {
+  padding: 16px 20px;
+}
+.mfui-info-card_size_small .mfui-info-card__image {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 16px;
+}
+.mfui-info-card_size_small .mfui-info-card__title {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+}
+.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 {
+  width: 80px;
+  height: 80px;
+  margin-bottom: 16px;
+}
+@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-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@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;
+          order: 1;
+  width: 150px;
+  height: 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;
+            order: 0;
+    margin-bottom: 16px;
+  }
+}
+.mfui-info-card_size_big .mfui-info-card__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@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 {
+  width: 32px;
+  height: 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;
+          order: 1;
+  margin-bottom: 0;
+}
+.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, 0.1);
+          box-shadow: 0 2px 12px rgba(0, 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, 0.1);
+          box-shadow: 0 8px 28px rgba(0, 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);
+}

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { IInfoCardData, IInfoCardSettings } from '../../types';
+import './InfoCard.less';
+export interface IInfoCard extends IInfoCardSettings, IInfoCardData {
+    className?: string;
+    dataAttrs?: {
+        root?: Record<string, string>;
+        title?: Record<string, string>;
+        description?: Record<string, string>;
+        moreInfo?: Record<string, string>;
+        moreArrow?: Record<string, string>;
+    };
+}
+declare const InfoCard: React.FC<IInfoCard>;
+export default InfoCard;

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

@@ -0,0 +1,108 @@
+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 PropTypes from 'prop-types';
+import { setRelAttribute } from "../../../../helpers/setRelAttribute";
+import "./InfoCard.css";
+
+var ArrowRight16 = function ArrowRight16(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M8 13l3-3-3-3 1-1 4 4-4 4z"
+  }));
+};
+
+var ArrowRight24 = function ArrowRight24(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M12.5 20.8l4.8-4.8-4.8-4.8 1.6-1.7 6.4 6.5-6.4 6.5z"
+  }));
+};
+
+var cn = cnCreate('mfui-info-card');
+
+var InfoCard = function InfoCard(_ref) {
+  var className = _ref.className,
+      title = _ref.title,
+      description = _ref.description,
+      imgSrc = _ref.imgSrc,
+      _ref$imgAlt = _ref.imgAlt,
+      imgAlt = _ref$imgAlt === void 0 ? '' : _ref$imgAlt,
+      href = _ref.href,
+      target = _ref.target,
+      rel = _ref.rel,
+      moreInfo = _ref.moreInfo,
+      _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,
+      _ref$background = _ref.background,
+      background = _ref$background === void 0 ? 'stroke' : _ref$background,
+      dataAttrs = _ref.dataAttrs;
+  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 renderArrowRight = function renderArrowRight() {
+    var ArrowRight = isBigSize ? ArrowRight24 : ArrowRight16;
+    return /*#__PURE__*/React.createElement(ArrowRight, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreArrow), {
+      className: cn('more-info-arrow')
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(RootElement, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    href: isLink ? href : undefined,
+    target: isLink ? target : undefined,
+    rel: isLink ? setRelAttribute(rel, target) : undefined,
+    className: cn({
+      size: size,
+      position: finalImgPosition,
+      background: finalBackground,
+      link: isLink
+    }, [className])
+  }), /*#__PURE__*/React.createElement("img", {
+    className: cn('image'),
+    src: imgSrc,
+    alt: imgAlt
+  }), /*#__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('description')
+  }), 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())));
+};
+
+InfoCard.propTypes = {
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    title: PropTypes.objectOf(PropTypes.string.isRequired),
+    description: PropTypes.objectOf(PropTypes.string.isRequired),
+    moreInfo: PropTypes.objectOf(PropTypes.string.isRequired),
+    moreArrow: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  size: PropTypes.oneOf(['big', 'medium', 'small']),
+  imgPosition: PropTypes.oneOf(['right-side', 'top-left']),
+  background: PropTypes.oneOf(['shadow', 'stroke', 'gray', 'green', 'purple', 'white', 'gray', 'no']),
+  title: PropTypes.string,
+  description: PropTypes.string,
+  imgSrc: PropTypes.string.isRequired,
+  imgAlt: PropTypes.string,
+  href: PropTypes.string,
+  target: PropTypes.oneOf(['_self', '_blank']),
+  rel: PropTypes.string,
+  moreInfo: PropTypes.string
+};
+export default InfoCard;

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

@@ -0,0 +1,26 @@
+export interface IInfoCardSettings {
+    /** Размер карточки */
+    size?: 'big' | 'medium' | 'small';
+    /** Расположение изображения */
+    imgPosition?: 'right-side' | 'top-left';
+    /** Фон карточки */
+    background?: 'shadow' | 'stroke' | 'gray' | 'green' | 'purple' | 'white' | 'gray' | 'no';
+}
+export interface IInfoCardData {
+    /** Заголовок */
+    title?: string;
+    /** Текст */
+    description?: string;
+    /** URL изображения */
+    imgSrc: string;
+    /** Атрибут alt изображения */
+    imgAlt?: string;
+    /** URL ссылки */
+    href?: string;
+    /** Атрибут target ссылки */
+    target?: '_self' | '_blank';
+    /** Атрибут rel ссылки */
+    rel?: string;
+    /** Дополнительная информация */
+    moreInfo?: string;
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BackgroundType, CardDataType } from './types';
+export interface ISidePictureCards {
+    /** Карточки. Минимальное количество 2 карточки */
+    items: CardDataType[];
+    /** Цвет фона карточек */
+    background?: BackgroundType;
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+    };
+}
+declare const SidePictureCards: React.FC<ISidePictureCards>;
+export default SidePictureCards;

package/dist/es/components/SidePictureCards/SidePictureCards.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import SidePictureCard from "./components/SidePictureCard";
+var MIN_ITEMS_COUNT = 2;
+var cn = cnCreate('mfui-side-picture-cards');
+
+var SidePictureCards = function SidePictureCards(_ref) {
+  var items = _ref.items,
+      _ref$background = _ref.background,
+      background = _ref$background === void 0 ? 'gray' : _ref$background,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+
+  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.root])
+  }), /*#__PURE__*/React.createElement(Grid, {
+    className: cn(),
+    guttersLeft: "medium",
+    guttersBottom: "medium"
+  }, items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(GridColumn, {
+      all: "6",
+      mobile: "12",
+      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
+    }, /*#__PURE__*/React.createElement(SidePictureCard, _extends({}, item, {
+      background: background,
+      key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i),
+      classes: {
+        root: classes.item
+      },
+      dataAttrs: {
+        root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
+      }
+    })));
+  })));
+};
+
+SidePictureCards.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    image: PropTypes.shape({
+      src: PropTypes.string.isRequired,
+      srcWide: PropTypes.string.isRequired,
+      alt: PropTypes.string
+    }).isRequired,
+    iconItems: PropTypes.arrayOf(PropTypes.shape({
+      icon: PropTypes.element.isRequired,
+      text: PropTypes.string,
+      info: PropTypes.string
+    }).isRequired).isRequired,
+    button: PropTypes.shape({
+      title: PropTypes.string.isRequired,
+      href: PropTypes.string.isRequired,
+      target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+      rel: PropTypes.string
+    }),
+    href: PropTypes.string,
+    target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: PropTypes.string
+  }).isRequired).isRequired,
+  background: PropTypes.oneOf(['white', 'gray']),
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object)
+};
+export default SidePictureCards;