@megafon/ui-shared 6.3.0 → 6.5.0

package/dist/lib/components/DarkGradientCards/DarkGradientCards.css

@@ -0,0 +1,18 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-dark-gradient-cards__cards {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 20px;
+}
+.mfui-dark-gradient-cards__cards .mfui-dark-gradient-cards__card {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+}

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { ItemType } from './types';
+import './DarkGradientCards.less';
+declare type CarouselProps = React.ComponentProps<typeof Carousel>;
+export interface IDarkGradientCards {
+    /** Карточки. Минимальное количество 3 карточки */
+    items: ItemType[];
+    /** Тема навигации для карусели */
+    carouselNavTheme?: CarouselProps['navTheme'];
+    /** Цвет градиента для карусели */
+    carouselGradientColor?: CarouselProps['gradientColor'];
+    /** Дополнительный класс для компонента */
+    className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        carousel?: Record<string, string>;
+        item?: Record<string, string>;
+    };
+}
+declare const DarkGradientCards: React.FC<IDarkGradientCards>;
+export default DarkGradientCards;

package/dist/lib/components/DarkGradientCards/DarkGradientCards.js

@@ -0,0 +1,104 @@
+"use strict";
+
+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 = _interopRequireDefault(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _useResolutions2 = _interopRequireDefault(require("../../hooks/useResolutions"));
+
+var _DarkGradientCard = _interopRequireDefault(require("./components/DarkGradientCard"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var carouselParams = (0, _defineProperty2["default"])({}, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 'auto',
+  spaceBetween: 20
+});
+var CAROUSEL_THRESHOLD = 5;
+var MIN_ITEMS_COUNT = 3;
+var cn = (0, _uiHelpers.cnCreate)('mfui-dark-gradient-cards');
+
+var DarkGradientCards = function DarkGradientCards(_ref) {
+  var items = _ref.items,
+      _ref$carouselGradient = _ref.carouselGradientColor,
+      carouselGradientColor = _ref$carouselGradient === void 0 ? 'default' : _ref$carouselGradient,
+      _ref$carouselNavTheme = _ref.carouselNavTheme,
+      carouselNavTheme = _ref$carouselNavTheme === void 0 ? 'light' : _ref$carouselNavTheme,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+
+  var _useResolutions = (0, _useResolutions2["default"])(),
+      isDesktopWide = _useResolutions.isDesktopWide;
+
+  var isCarouselActive = items.length > MIN_ITEMS_COUNT || items.length === MIN_ITEMS_COUNT && !isDesktopWide;
+  var cards = items.map(function (item, i) {
+    return /*#__PURE__*/_react["default"].createElement(_DarkGradientCard["default"], (0, _extends2["default"])({
+      className: cn('card')
+    }, item, {
+      key: item.title + i,
+      size: i === 0 ? 'big' : 'small',
+      classes: {
+        root: classes.item
+      },
+      dataAttrs: {
+        root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
+      }
+    }));
+  });
+
+  if (items.length < MIN_ITEMS_COUNT) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn([className, classes.root])
+  }), isCarouselActive ? /*#__PURE__*/_react["default"].createElement(_uiCore.Carousel, {
+    dataAttrs: {
+      root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.carousel))
+    },
+    slidesSettings: carouselParams,
+    navTheme: carouselNavTheme,
+    threshold: CAROUSEL_THRESHOLD,
+    gradient: true,
+    gradientColor: carouselGradientColor
+  }, cards) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('cards')
+  }, cards));
+};
+
+DarkGradientCards.propTypes = {
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    imageSrc: _propTypes["default"].string.isRequired,
+    title: _propTypes["default"].string.isRequired,
+    subtitle: _propTypes["default"].string,
+    moreIcon: _propTypes["default"].element,
+    moreText: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].oneOf(['_self', '_blank', '_parent', '_top']),
+    rel: _propTypes["default"].string
+  }).isRequired).isRequired,
+  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'])
+};
+var _default = DarkGradientCards;
+exports["default"] = _default;

package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.css

@@ -0,0 +1,175 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-dark-gradient-card {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 298px;
+  min-height: 420px;
+  padding: 24px;
+  border-radius: 24px;
+  color: var(--stcWhite);
+  text-decoration: none;
+  background-position: center;
+  background-size: cover;
+}
+@media screen and (max-width: 359px) {
+  .mfui-dark-gradient-card {
+    width: 265px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-dark-gradient-card {
+    width: 211px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-dark-gradient-card {
+    min-height: 520px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-dark-gradient-card {
+    width: 285px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-dark-gradient-card {
+    width: 265px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-dark-gradient-card {
+    padding: 32px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-dark-gradient-card {
+    width: 345px;
+  }
+}
+.mfui-dark-gradient-card:hover {
+  text-decoration: none;
+}
+.mfui-dark-gradient-card:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  border-radius: inherit;
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
+}
+.mfui-dark-gradient-card_active:hover.mfui-dark-gradient-card:before {
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-dark-gradient-card_size_big {
+    width: 441px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-dark-gradient-card_size_big {
+    width: 591px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-dark-gradient-card_size_big {
+    width: 550px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-dark-gradient-card_size_big {
+    width: 710px;
+  }
+}
+.mfui-dark-gradient-card__inner {
+  position: relative;
+  z-index: 1;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+.mfui-dark-gradient-card__title {
+  margin-top: auto;
+}
+.mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 1280px) {
+  .mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+.mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+  font-weight: 600;
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.5px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+    font-size: 26px;
+    line-height: 32px;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+    font-size: 28px;
+    line-height: 36px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+.mfui-dark-gradient-card__subtitle {
+  font-size: 15px;
+  line-height: 24px;
+}
+.mfui-dark-gradient-card__more {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 500;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 8px;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+}
+.mfui-dark-gradient-card__more-icon {
+  display: block;
+  width: 24px;
+  min-width: 24px;
+  max-height: 24px;
+}
+.mfui-dark-gradient-card__more-icon svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  fill: var(--stcWhite);
+}

package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ItemType } from '../types';
+import './DarkGradientCard.less';
+export declare type DarkGradientCardType = ItemType & {
+    size?: 'small' | 'big';
+    className?: string;
+    classes?: {
+        root?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+};
+declare const DarkGradientCard: React.FC<DarkGradientCardType>;
+export default DarkGradientCard;

package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _setRelAttribute = require("../../../helpers/setRelAttribute");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-dark-gradient-card');
+
+var DarkGradientCard = function DarkGradientCard(_ref) {
+  var imageSrc = _ref.imageSrc,
+      title = _ref.title,
+      subtitle = _ref.subtitle,
+      moreIcon = _ref.moreIcon,
+      moreText = _ref.moreText,
+      href = _ref.href,
+      _ref$target = _ref.target,
+      target = _ref$target === void 0 ? '_self' : _ref$target,
+      rel = _ref.rel,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs;
+  var isLink = !!href;
+  var ElementType = isLink ? 'a' : 'div';
+  var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
+  return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
+    className: cn({
+      size: size,
+      active: isLink
+    }, [className, classes.root])
+  }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
+    href: href,
+    target: isLink ? target : undefined,
+    rel: isLink ? currentRel : undefined,
+    style: {
+      backgroundImage: "url(".concat(imageSrc, ")")
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('title')
+  }, (0, _uiHelpers.convert)(title, {})), subtitle && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('subtitle')
+  }, (0, _uiHelpers.convert)(subtitle, {})), !!moreText && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('more')
+  }, !!moreIcon && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('more-icon')
+  }, moreIcon), (0, _uiHelpers.convert)(moreText, {}))));
+};
+
+var _default = DarkGradientCard;
+exports["default"] = _default;

package/dist/lib/components/DarkGradientCards/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
+export declare type ItemType = {
+    /** Изображение */
+    imageSrc: string;
+    /** Заголовок */
+    title: string;
+    /** Подзаголовок */
+    subtitle?: string;
+    /** Иконка */
+    moreIcon?: JSX.Element;
+    /** Текст */
+    moreText?: string;
+    /** Ссылка */
+    href?: string;
+    /** Атрибут ссылки target */
+    target?: TargetType;
+    /** Атрибут ссылки rel */
+    rel?: string;
+};
+export {};

package/dist/lib/components/DarkGradientCards/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,88 @@
+"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"));
+
+require("core-js/modules/es.array.map.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+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-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", (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])
+  }), items.map(function (item, i) {
+    return /*#__PURE__*/React.createElement(_InfoCard["default"], (0, _extends2["default"])({}, item, {
+      className: classes === null || classes === void 0 ? void 0 : classes.card,
+      size: size,
+      imgPosition: imgPosition,
+      background: background,
+      dataAttrs: {
+        root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
+      },
+      key: "".concat(item.title, "_").concat(i)
+    }));
+  }));
+};
+
+InfoCards.propTypes = {
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    card: _propTypes["default"].string
+  }),
+  dataAttrs: _propTypes["default"].shape({
+    root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+    card: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
+  }),
+  size: _propTypes["default"].oneOf(['big', 'medium', 'small']),
+  imgPosition: _propTypes["default"].oneOf(['right-side', 'top-left']),
+  background: _propTypes["default"].oneOf(['shadow', 'stroke', 'gray', 'green', 'purple', 'white', 'gray', 'no']),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string,
+    description: _propTypes["default"].string,
+    imgSrc: _propTypes["default"].string.isRequired,
+    imgAlt: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].oneOf(['_self', '_blank']),
+    rel: _propTypes["default"].string,
+    moreInfo: _propTypes["default"].string
+  }).isRequired).isRequired
+};
+var _default = InfoCards;
+exports["default"] = _default;