@megafon/ui-shared 8.14.0 → 8.14.2

package/dist/lib/components/BenefitsIcons/BenefitsIcons.js

@@ -0,0 +1,113 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+var _BenefitsIconsTile = _interopRequireDefault(require("./BenefitsIconsTile"));
+var _helpers = _interopRequireWildcard(require("./helpers"));
+var _types = require("./types");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var testIdPrefix = 'BenefitsIcons';
+var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-icons');
+var BenefitsIcons = function BenefitsIcons(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    rootRef = _ref.rootRef,
+    _ref$iconPosition = _ref.iconPosition,
+    iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _ref$iconPosition,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'transparent' : _ref$background,
+    _ref$inOneColumn = _ref.inOneColumn,
+    inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
+    items = _ref.items,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var _React$useState = React.useState(iconPosition === _types.IconPositionEnum.CENTER_TOP ? 'center' : 'left'),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    itemsAlign = _React$useState2[0],
+    setItemsAlign = _React$useState2[1];
+  var _React$useState3 = React.useState(iconPosition),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    localIconPosition = _React$useState4[0],
+    setLocalIconPosition = _React$useState4[1];
+  var resizeHandler = React.useCallback(function () {
+    if (window.innerWidth <= _uiHelpers.breakpoints.MOBILE_MIDDLE_END) {
+      setItemsAlign(_types.ItemsAlignEnum.CENTER);
+      setLocalIconPosition(_types.IconPositionEnum.CENTER_TOP);
+    } else {
+      setItemsAlign(_types.ItemsAlignEnum.LEFT);
+      setLocalIconPosition(iconPosition);
+    }
+  }, [iconPosition]);
+  React.useEffect(function () {
+    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
+    if (inOneColumn) {
+      resizeHandler();
+      window.addEventListener('resize', resizeHandlerThrottled);
+    }
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, [iconPosition, inOneColumn, resizeHandler]);
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'one-column': inOneColumn,
+      background: background
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    className: classes.grid,
+    guttersLeft: "medium",
+    hAlign: itemsAlign,
+    dataAttrs: {
+      root: {
+        'data-testid': "".concat(testIdPrefix, "-grid-root")
+      },
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
+  }, items.map(function (_ref2, i) {
+    var title = _ref2.title,
+      text = _ref2.text,
+      icon = _ref2.icon,
+      alt = _ref2.alt,
+      itemClasses = _ref2.classes,
+      itemDataAttrs = _ref2.dataAttrs;
+    var columnConfig = inOneColumn ? (0, _helpers.getOneColumnConfig)(iconPosition) : (0, _helpers["default"])(iconPosition, items.length, i);
+    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({
+      className: cn('column', [classes.gridColumn]),
+      key: i,
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-grid-column")
+        }
+      }
+    }, columnConfig), /*#__PURE__*/React.createElement(_BenefitsIconsTile["default"], {
+      className: cn('tile', [classes.item]),
+      classes: itemClasses,
+      dataAttrs: itemDataAttrs,
+      title: title,
+      text: text,
+      icon: icon,
+      background: background,
+      iconPosition: localIconPosition,
+      alt: alt
+    }));
+  }))));
+};
+var _default = exports["default"] = BenefitsIcons;

package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { IBenefit, IconPosition, BackgroundType } from './types';
+import './style/BenefitsIconsTile.scss';
+export interface IBenefitsIconsTile extends IBenefit {
+    iconPosition?: IconPosition;
+    background?: BackgroundType;
+    className?: string;
+}
+declare const BenefitsIconsTile: React.FC<IBenefitsIconsTile>;
+export default BenefitsIconsTile;

package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js

@@ -0,0 +1,60 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _uiCore = require("@megafon/ui-core");
+var _uiHelpers = require("@megafon/ui-helpers");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var testIdPrefix = 'BenefitsIconsTile';
+var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-icons-tile');
+var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    title = _ref.title,
+    text = _ref.text,
+    icon = _ref.icon,
+    iconPosition = _ref.iconPosition,
+    background = _ref.background,
+    alt = _ref.alt,
+    className = _ref.className;
+  var renderIcon = function renderIcon() {
+    if (typeof icon === 'string') {
+      return /*#__PURE__*/React.createElement("img", {
+        className: cn('img-icon', [classes.icon]),
+        src: icon,
+        alt: alt,
+        "data-testid": "".concat(testIdPrefix, "-img")
+      });
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('svg-icon', [classes.icon]),
+      "data-testid": "".concat(testIdPrefix, "-svg")
+    }, icon);
+  };
+  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      'icon-position': iconPosition,
+      background: background,
+      image: typeof icon === 'string'
+    }, [className, classes.root]),
+    "data-testid": "".concat(testIdPrefix, "-root")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+    className: cn('content-wrapper', [classes.contentWrapper])
+  }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
+    className: cn('title', [classes.title]),
+    as: "h5"
+  }, title), text && /*#__PURE__*/React.createElement("div", {
+    className: cn('content', [classes.text])
+  }, text))));
+};
+var _default = exports["default"] = BenefitsIconsTile;

package/dist/lib/components/BenefitsIcons/helpers.d.ts

@@ -0,0 +1,8 @@
+import { GridConfig, IconPosition } from './types';
+declare const getLeftSideConfig: (count: number, index: number) => GridConfig;
+declare const getLeftTopConfig: (count: number, index: number) => GridConfig;
+declare const getCenterTopConfig: (count: number, index: number) => GridConfig;
+declare const getOneColumnConfig: (iconPosition: IconPosition) => GridConfig;
+declare const getMultiColumnConfig: (iconPosition: IconPosition, count: number, index: number) => GridConfig;
+export default getMultiColumnConfig;
+export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };

package/dist/lib/components/BenefitsIcons/helpers.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOneColumnConfig = exports.getLeftTopConfig = exports.getLeftSideConfig = exports.getCenterTopConfig = exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _types = require("./types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+// left-aligned column with left side icon
+var getLeftSideConfig = exports.getLeftSideConfig = function getLeftSideConfig(count, index) {
+  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
+  var columnSize = {
+    wide: '4',
+    desktop: '5',
+    tablet: '10'
+  };
+  switch (count) {
+    case 2:
+    case 4:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetWide: everySecondWithoutOffset,
+        leftOffsetDesktop: everySecondWithoutOffset
+      });
+    default:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetDesktop: everySecondWithoutOffset
+      });
+  }
+};
+// left-aligned column with left-aligned icon on top
+var getLeftTopConfig = exports.getLeftTopConfig = function getLeftTopConfig(count, index) {
+  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
+  var everyThirdWithoutOffset = index % 3 ? '1' : undefined;
+  switch (count) {
+    case 2:
+      return {
+        wide: '4',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetWide: everySecondWithoutOffset,
+        leftOffsetDesktop: everySecondWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+    case 4:
+      return {
+        wide: '3',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetDesktop: everySecondWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+    default:
+      return {
+        wide: '3',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetWide: everyThirdWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+  }
+};
+// center-aligned column with center-aligned icon on top
+var getCenterTopConfig = exports.getCenterTopConfig = function getCenterTopConfig(count, index) {
+  var isEvenIndex = !(index % 2);
+  var everyEvenWithLeftOffset = isEvenIndex ? '1' : undefined;
+  var everyOddWithRightOffset = isEvenIndex ? undefined : '1';
+  switch (count) {
+    case 4:
+      return {
+        wide: '3',
+        desktop: '5',
+        tablet: '5',
+        leftOffsetDesktop: everyEvenWithLeftOffset,
+        leftOffsetTablet: everyEvenWithLeftOffset,
+        rightOffsetTablet: everyOddWithRightOffset,
+        rightOffsetDesktop: everyOddWithRightOffset
+      };
+    default:
+      return {
+        wide: '4',
+        desktop: '4',
+        tablet: '4'
+      };
+  }
+};
+var getOneColumnConfig = exports.getOneColumnConfig = function getOneColumnConfig(iconPosition) {
+  return iconPosition !== _types.IconPositionEnum.CENTER_TOP ? {
+    wide: '10',
+    desktop: '10',
+    tablet: '10'
+  } : {
+    wide: '12',
+    desktop: '12',
+    tablet: '12'
+  };
+};
+var getMultiColumnConfig = function getMultiColumnConfig(iconPosition, count, index) {
+  switch (iconPosition) {
+    case _types.IconPositionEnum.LEFT_TOP:
+      return getLeftTopConfig(count, index);
+    case _types.IconPositionEnum.CENTER_TOP:
+      return getCenterTopConfig(count, index);
+    default:
+      return getLeftSideConfig(count, index);
+  }
+};
+var _default = exports["default"] = getMultiColumnConfig;

package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-benefits-icons{-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.mfui-benefits-icons__inner{margin-bottom:-20px}.mfui-benefits-icons_background_transparent .mfui-benefits-icons__inner{margin-bottom:-48px}.mfui-benefits-icons__column{margin-bottom:20px}.mfui-benefits-icons_background_transparent .mfui-benefits-icons__column{margin-bottom:48px}.mfui-benefits-icons_one-column .mfui-benefits-icons__inner{margin-bottom:-24px}@media screen and (max-width:767px){.mfui-benefits-icons_one-column .mfui-benefits-icons__inner{margin-bottom:-32px}}.mfui-benefits-icons_one-column .mfui-benefits-icons__column{margin-bottom:24px}@media screen and (max-width:767px){.mfui-benefits-icons_one-column .mfui-benefits-icons__column{margin-bottom:32px}}

package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-benefits-icons-tile{border-radius:24px;min-height:100%;padding:24px}.mfui-benefits-icons-tile_background_transparent{padding:0}.mfui-benefits-icons-tile_background_gray{background-color:var(--spbSky0)}.mfui-benefits-icons-tile_background_green{background-color:var(--brandGreen20)}.mfui-benefits-icons-tile_background_purple{background-color:var(--brandPurple20)}.mfui-benefits-icons-tile_background_white{background-color:var(--base)}.mfui-benefits-icons-tile_background_stroke{border:1px solid var(--spbSky2)}.mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon{margin-bottom:10px}.mfui-benefits-icons-tile__content{font-size:15px;font-weight:400;line-height:24px}.mfui-benefits-icons-tile__title+.mfui-benefits-icons-tile__content{margin-top:4px}.mfui-benefits-icons-tile__text{margin-bottom:0}.mfui-benefits-icons-tile__img-icon{border-radius:8px;height:64px;width:64px}.mfui-benefits-icons-tile__svg-icon{height:40px;overflow:hidden;width:40px}.mfui-benefits-icons-tile__svg-icon svg{fill:var(--brandGreen)!important}.mfui-benefits-icons-tile_background_purple .mfui-benefits-icons-tile__svg-icon svg{fill:var(--brandPurple)!important}.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__inner{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__content-wrapper{padding-top:8px}.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__img-icon,.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon{-ms-flex-negative:0;flex-shrink:0;margin-bottom:0;margin-right:14px}.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__inner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__content-wrapper{padding-top:0}.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__img-icon,.mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__svg-icon{-ms-flex-item-align:start;align-self:start}.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__inner{text-align:center}.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__img-icon,.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon{margin-left:auto;margin-right:auto}

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

@@ -0,0 +1,54 @@
+type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export interface IBenefit {
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+    };
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        icon?: string;
+        title?: string;
+        text?: string;
+        contentWrapper?: string;
+    };
+    /** Заголовок бенефита */
+    title?: string | React.ReactNode | React.ReactNode[];
+    /** Основной текст в бенефите */
+    text?: string | React.ReactNode | React.ReactNode[];
+    /** Иконка */
+    icon: React.ReactNode;
+    /** Атрибут alt для изображения */
+    alt?: string;
+}
+export declare const IconPositionEnum: {
+    readonly LEFT_TOP: "left-top";
+    readonly CENTER_TOP: "center-top";
+    readonly LEFT_SIDE: "left-side";
+};
+export type IconPosition = (typeof IconPositionEnum)[keyof typeof IconPositionEnum];
+export declare const ItemsAlignEnum: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+};
+export type ItemsAlignType = (typeof ItemsAlignEnum)[keyof typeof ItemsAlignEnum];
+export declare const BackgroundEnum: {
+    readonly TRANSPARENT: "transparent";
+    readonly GRAY: "gray";
+    readonly GREEN: "green";
+    readonly PURPLE: "purple";
+    readonly WHITE: "white";
+    readonly STROKE: "stroke";
+};
+export type BackgroundType = (typeof BackgroundEnum)[keyof typeof BackgroundEnum];
+export type GridConfig = {
+    wide?: TGridSizeValues;
+    desktop?: TGridSizeValues;
+    tablet?: TGridSizeValues;
+    leftOffsetWide?: TGridSizeValues;
+    leftOffsetDesktop?: TGridSizeValues;
+    leftOffsetTablet?: TGridSizeValues;
+    rightOffsetDesktop?: TGridSizeValues;
+    rightOffsetTablet?: TGridSizeValues;
+};
+export {};

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

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ItemsAlignEnum = exports.IconPositionEnum = exports.BackgroundEnum = void 0;
+var IconPositionEnum = exports.IconPositionEnum = {
+  LEFT_TOP: 'left-top',
+  CENTER_TOP: 'center-top',
+  LEFT_SIDE: 'left-side'
+};
+var ItemsAlignEnum = exports.ItemsAlignEnum = {
+  LEFT: 'left',
+  CENTER: 'center'
+};
+var BackgroundEnum = exports.BackgroundEnum = {
+  TRANSPARENT: 'transparent',
+  GRAY: 'gray',
+  GREEN: 'green',
+  PURPLE: 'purple',
+  WHITE: 'white',
+  STROKE: 'stroke'
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { IBenefit, GridGutterSize } from './types';
+import './BenfitsPictures.scss';
+export declare const ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
+export interface IBenefitsPicturesProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Данные для бенефитов */
+    items: IBenefit[];
+    /** Горизонтальное выравнивание бенефитов */
+    align?: 'left' | 'center';
+    /** Горизонтальное выравнивание текста */
+    textAlign?: 'left' | 'center' | 'auto';
+    /** Горизонтальное выравнивание изображения */
+    imgAlign?: 'left' | 'center' | 'auto';
+    /** Расстояние между бенефитами */
+    gridGap?: GridGutterSize;
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительные css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+    };
+}
+declare const BenefitsPictures: React.FC<IBenefitsPicturesProps>;
+export default BenefitsPictures;

package/dist/lib/components/BenefitsPictures/BenefitsPictures.js

@@ -0,0 +1,120 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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 _htmr = _interopRequireDefault(require("htmr"));
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+var _helpers = _interopRequireWildcard(require("./helpers"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var ONLY_LEFT_ALIGN_ITEMS_COUNT = exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
+var testIdPrefix = 'BenefitsPictures';
+var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-pictures');
+var BenefitsPictures = function BenefitsPictures(_ref) {
+  var items = _ref.items,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'left' : _ref$align,
+    _ref$textAlign = _ref.textAlign,
+    textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
+    _ref$imgAlign = _ref.imgAlign,
+    imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
+    _ref$gridGap = _ref.gridGap,
+    gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
+    rootRef = _ref.rootRef,
+    className = _ref.className,
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes;
+  var isLargeGutter = gridGap === 'large';
+  var isGridCenterAlign = align === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
+  var _React$useState = React.useState(gridGap),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    currentGutter = _React$useState2[0],
+    setCurrentGutter = _React$useState2[1];
+  var resizeHandler = React.useCallback(function () {
+    if (!isLargeGutter) {
+      return;
+    }
+    if (window.innerWidth < _uiHelpers.breakpoints.DESKTOP_MIDDLE_START) {
+      setCurrentGutter('medium');
+    } else {
+      setCurrentGutter('large');
+    }
+  }, [isLargeGutter]);
+  var renderText = function renderText(text) {
+    if (typeof text === 'string') {
+      return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+        dataAttrs: {
+          root: {
+            'data-testid': "".concat(testIdPrefix, "-paragraph")
+          }
+        }
+      }, (0, _htmr["default"])(text));
+    }
+    return text;
+  };
+  React.useEffect(function () {
+    var throttledResizeHandler = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
+    resizeHandler();
+    window.addEventListener('resize', throttledResizeHandler);
+    return function () {
+      return window.removeEventListener('resize', throttledResizeHandler);
+    };
+  }, [resizeHandler]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cn('inner')
+  }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    guttersLeft: currentGutter,
+    hAlign: isGridCenterAlign ? 'center' : 'left',
+    dataAttrs: {
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
+  }, items.map(function (_ref2, index) {
+    var img = _ref2.img,
+      title = _ref2.title,
+      text = _ref2.text,
+      alt = _ref2.alt;
+    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, align === 'left' ? (0, _helpers.getLeftConfig)(items.length, index) : (0, _helpers["default"])(items.length, index, gridGap), {
+      key: index
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('item', [classes.item]),
+      "data-testid": "".concat(testIdPrefix, "-item")
+    }, /*#__PURE__*/React.createElement("img", {
+      className: cn('img', {
+        'h-align': imgAlign === 'auto' ? align : imgAlign
+      }),
+      src: img,
+      alt: alt,
+      "data-testid": "".concat(testIdPrefix, "-img")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cn('content', {
+        'h-align': textAlign === 'auto' ? align : textAlign
+      }),
+      "data-testid": "".concat(testIdPrefix, "-content")
+    }, !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
+      className: cn('title'),
+      as: "h3",
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-title")
+        }
+      }
+    }, (0, _htmr["default"])(title)), !!text && renderText(text))));
+  }))));
+};
+var _default = exports["default"] = BenefitsPictures;

package/dist/lib/components/BenefitsPictures/BenfitsPictures.css

@@ -0,0 +1 @@
+h1,h2,h3,h4,h5{margin:0}.mfui-benefits-pictures{overflow:hidden}.mfui-benefits-pictures__inner{margin-bottom:-40px}@media screen and (min-width:768px){.mfui-benefits-pictures__inner{margin-bottom:-48px}}.mfui-benefits-pictures__item{margin-bottom:40px}@media screen and (min-width:768px){.mfui-benefits-pictures__item{margin-bottom:48px}}.mfui-benefits-pictures__content_h-align_center{text-align:center}.mfui-benefits-pictures__img{border-radius:12px;margin-bottom:32px;max-width:100%;vertical-align:top}.mfui-benefits-pictures__img_h-align_center{display:block;margin-left:auto;margin-right:auto}.mfui-benefits-pictures__title{margin-bottom:12px}

package/dist/lib/components/BenefitsPictures/helpers.d.ts

@@ -0,0 +1,11 @@
+import { GridConfig } from './types';
+declare const columnSize: GridConfig;
+declare const isOddIndex: (index: number) => boolean;
+declare const getEvenOffset: (index: number) => "1" | undefined;
+declare const getOddOffset: (index: number) => "1" | undefined;
+declare const getLeftConfig: (count: number, index: number) => GridConfig;
+declare const getCenterMediumConfig: (count: number, index: number) => GridConfig;
+declare const getCenterLargeConfig: (count: number, index: number) => GridConfig;
+declare const getCenterConfig: (count: number, index: number, gutterSize: string) => GridConfig;
+export default getCenterConfig;
+export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig, };

package/dist/lib/components/BenefitsPictures/helpers.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOddIndex = exports.getOddOffset = exports.getLeftConfig = exports.getEvenOffset = exports.getCenterMediumConfig = exports.getCenterLargeConfig = exports["default"] = exports.columnSize = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var columnSize = exports.columnSize = {
+  wide: '4',
+  desktop: '4',
+  tablet: '5'
+};
+var isOddIndex = exports.isOddIndex = function isOddIndex(index) {
+  return !((index + 1) % 2);
+};
+var getEvenOffset = exports.getEvenOffset = function getEvenOffset(index) {
+  return isOddIndex(index) ? '1' : undefined;
+};
+var getOddOffset = exports.getOddOffset = function getOddOffset(index) {
+  return isOddIndex(index) ? undefined : '1';
+};
+var getLeftConfig = exports.getLeftConfig = function getLeftConfig(count, index) {
+  switch (count) {
+    case 2:
+    case 4:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetWide: getEvenOffset(index),
+        leftOffsetDesktop: getEvenOffset(index),
+        leftOffsetTablet: getEvenOffset(index)
+      });
+    default:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetTablet: getEvenOffset(index)
+      });
+  }
+};
+var getCenterMediumConfig = exports.getCenterMediumConfig = function getCenterMediumConfig(count, index) {
+  switch (count) {
+    case 3:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetTablet: getOddOffset(index)
+      });
+    case 4:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        rightOffsetWide: getOddOffset(index),
+        leftOffsetWide: getEvenOffset(index),
+        rightOffsetDesktop: getEvenOffset(index),
+        leftOffsetDesktop: getOddOffset(index),
+        rightOffsetTablet: getEvenOffset(index),
+        leftOffsetTablet: getOddOffset(index)
+      });
+    default:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        rightOffsetWide: getOddOffset(index),
+        leftOffsetWide: getEvenOffset(index)
+      });
+  }
+};
+var getCenterLargeConfig = exports.getCenterLargeConfig = function getCenterLargeConfig(count, index) {
+  switch (count) {
+    case 4:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetWide: getOddOffset(index),
+        rightOffsetWide: getEvenOffset(index),
+        leftOffsetDesktop: getOddOffset(index),
+        rightOffsetDesktop: getEvenOffset(index),
+        leftOffsetTablet: getOddOffset(index),
+        rightOffsetTablet: getEvenOffset(index)
+      });
+    case 3:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetTablet: getOddOffset(index)
+      });
+    default:
+      return (0, _extends2["default"])({}, columnSize);
+  }
+};
+var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
+  switch (gutterSize) {
+    case 'medium':
+      {
+        return getCenterMediumConfig(count, index);
+      }
+    default:
+      {
+        return getCenterLargeConfig(count, index);
+      }
+  }
+};
+var _default = exports["default"] = getCenterConfig;