@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

package/README.md

@@ -14,8 +14,3 @@ $ yarn add @megafon/ui-shared@beta
 ## Development notes
 
 ### Build
-
-```bash
-$ yarn run build
-```
-

package/dist/es/components/AccordionBox/AccordionBox.css

@@ -0,0 +1,13 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-accordion-box + .mfui-beta-accordion-box .mfui-beta-accordion {
+  border-top: none;
+}
+.mfui-beta-accordion-box .mfui-beta-property:first-child {
+  border-top: none;
+}

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import './AccordionBox.less';
+export interface IAccordionBox {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Заголовок аккордеона */
+    title: string;
+    /** Состояние аккордеона, заданное извне */
+    isOpened?: boolean;
+    /** Отключить ограничение ширины */
+    isFullWidth?: boolean;
+    /** Центрирование по горизонтали для расширения 1280+ */
+    hCenterAlignWide?: boolean;
+    /** Вертикальные отступы */
+    hasVerticalPaddings?: boolean;
+    /** Дополнительный класс для корнеовго элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        openedClass?: string;
+        root?: string;
+        collapse?: string;
+        titleWrap?: string;
+    };
+    /** Обработчик клика */
+    onClickAccordion?: (isOpened: boolean, title: string) => void;
+}
+declare const AccordionBox: React.FC<IAccordionBox>;
+export default AccordionBox;

package/dist/es/components/AccordionBox/AccordionBox.js

@@ -0,0 +1,62 @@
+import "core-js/modules/es.symbol";
+import "core-js/modules/es.array.index-of";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import { Grid, GridColumn, Accordion } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+import "./AccordionBox.css";
+var cn = cnCreate('mfui-beta-accordion-box');
+
+var AccordionBox = function AccordionBox(_a) {
+  var _a$hCenterAlignWide = _a.hCenterAlignWide,
+      hCenterAlignWide = _a$hCenterAlignWide === void 0 ? false : _a$hCenterAlignWide,
+      _a$isFullWidth = _a.isFullWidth,
+      isFullWidth = _a$isFullWidth === void 0 ? false : _a$isFullWidth,
+      restProps = __rest(_a, ["hCenterAlignWide", "isFullWidth"]);
+
+  var renderAccordionWithGrid = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn()
+    }, /*#__PURE__*/React.createElement(Grid, {
+      hAlign: hCenterAlignWide ? 'center' : 'left'
+    }, /*#__PURE__*/React.createElement(GridColumn, {
+      wide: "8"
+    }, /*#__PURE__*/React.createElement(Accordion, restProps))));
+  }, [restProps, hCenterAlignWide]);
+  return isFullWidth ? /*#__PURE__*/React.createElement(Accordion, restProps) : renderAccordionWithGrid();
+};
+
+AccordionBox.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.string.isRequired,
+  isFullWidth: PropTypes.bool,
+  isOpened: PropTypes.bool,
+  hCenterAlignWide: PropTypes.bool,
+  hasVerticalPaddings: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    openedClass: PropTypes.string,
+    root: PropTypes.string,
+    collapse: PropTypes.string,
+    titleWrap: PropTypes.string
+  }),
+  onClickAccordion: PropTypes.func
+};
+export default AccordionBox;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Banner } from '@megafon/ui-core';
+declare type BannerBoxProps = React.ComponentProps<typeof Banner>;
+declare const BannerBox: React.FC<BannerBoxProps>;
+export default BannerBox;

package/dist/es/components/BannerBox/BannerBox.js

@@ -0,0 +1,31 @@
+import "core-js/modules/es.symbol";
+import "core-js/modules/es.array.index-of";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import * as React from 'react';
+import { Banner } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+var cn = cnCreate('mfui-beta-banner-box');
+
+var BannerBox = function BannerBox(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(Banner, props, children));
+};
+
+export default BannerBox;

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

@@ -1,13 +1,24 @@
 import * as React from 'react';
 import './style/BenefitsIcons.less';
-import { IconPositionEnum, IBenefit } from './types';
+import { IconPosition, IBenefit } from './types';
 export interface IBenefitsIcons {
-    /** Icon position */
-    iconPosition?: IconPositionEnum;
-    /** Benefits list */
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Позиция иконки */
+    iconPosition?: IconPosition;
+    /** Выстраивать бенефиты в одну колонку вне зависимости от количества */
+    inOneColumn?: boolean;
+    /** Список бенефитов */
     items: IBenefit[];
-    /** Custom className */
+    /** Дополнительный css класс для корневого элемента */
     className?: string;
+    /** Дополнительные css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+        grid?: string;
+        gridColumn?: string;
+    };
 }
 declare const BenefitsIcons: React.FC<IBenefitsIcons>;
 export default BenefitsIcons;

package/dist/es/components/BenefitsIcons/BenefitsIcons.js

@@ -1,12 +1,16 @@
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.object.values";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import "./style/BenefitsIcons.css";
-import { cnCreate, Grid, GridColumn } from '@megafon/ui-core';
+import { Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, breakpoints } from '@megafon/ui-helpers';
 import BenefitsIconsTile from "./BenefitsIconsTile";
-import { IconPositionEnum } from "./types"; // left-aligned column with left side icon,
+import { IconPositionEnum, ItemsAlignEnum } from "./types";
+import throttle from 'lodash.throttle';
+import throttleTime from "../../constants/throttleTime"; // left-aligned column with left side icon,
 
 var getLeftSideConfig = function getLeftSideConfig(count, index) {
   var everySecondWithoutOffset = index % 2 ? '1' : undefined;
@@ -94,7 +98,19 @@ var getCenterTopConfig = function getCenterTopConfig(count, index) {
   }
 };
 
-var getColumnConfig = function getColumnConfig(iconPosition, count, index) {
+var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
+  return iconPosition !== 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 IconPositionEnum.LEFT_TOP:
       return getLeftTopConfig(count, index);
@@ -110,40 +126,89 @@ var getColumnConfig = function getColumnConfig(iconPosition, count, index) {
 var cn = cnCreate('mfui-beta-benefits-icons');
 
 var BenefitsIcons = function BenefitsIcons(_ref) {
-  var _ref$iconPosition = _ref.iconPosition,
+  var rootRef = _ref.rootRef,
+      _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? IconPositionEnum.LEFT_TOP : _ref$iconPosition,
+      _ref$inOneColumn = _ref.inOneColumn,
+      inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
       items = _ref.items,
-      className = _ref.className;
-  var hAlign = iconPosition === IconPositionEnum.CENTER_TOP ? 'center' : 'left';
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
+
+  var _React$useState = React.useState(iconPosition === IconPositionEnum.CENTER_TOP ? 'center' : 'left'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      itemsAlign = _React$useState2[0],
+      setItemsAlign = _React$useState2[1];
+
+  var _React$useState3 = React.useState(iconPosition),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      localIconPosition = _React$useState4[0],
+      setLocalIconPosition = _React$useState4[1];
+
+  var resizeHandler = React.useCallback(function () {
+    if (window.innerWidth <= breakpoints.MOBILE_MIDDLE_END) {
+      setItemsAlign(ItemsAlignEnum.CENTER);
+      setLocalIconPosition(IconPositionEnum.CENTER_TOP);
+    } else {
+      setItemsAlign(ItemsAlignEnum.LEFT);
+      setLocalIconPosition(iconPosition);
+    }
+  }, [iconPosition]);
+  React.useEffect(function () {
+    var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
+
+    if (inOneColumn) {
+      resizeHandler();
+      window.addEventListener('resize', resizeHandlerThrottled);
+    }
+
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, [iconPosition, inOneColumn, resizeHandler]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn(className)
+    className: cn([className, classes.root]),
+    ref: rootRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement(Grid, {
+    className: classes.grid,
     guttersLeft: "medium",
-    hAlign: hAlign
+    hAlign: itemsAlign
   }, items.map(function (_ref2, i) {
     var title = _ref2.title,
         text = _ref2.text,
         icon = _ref2.icon;
-    return /*#__PURE__*/React.createElement(GridColumn, _extends({}, getColumnConfig(iconPosition, items.length, i), {
+    var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
+    return /*#__PURE__*/React.createElement(GridColumn, _extends({
+      className: classes.gridColumn,
       key: i
-    }), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
+    }, columnConfig), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
+      className: classes.item,
       title: title,
       text: text,
       icon: icon,
-      iconPosition: iconPosition
+      iconPosition: localIconPosition
     }));
   }))));
 };
 
 BenefitsIcons.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
+  inOneColumn: PropTypes.bool,
   items: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    text: PropTypes.string,
+    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
     icon: PropTypes.node.isRequired
   }).isRequired).isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    item: PropTypes.string
+  })
 };
 export default BenefitsIcons;

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

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

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

@@ -1,9 +1,9 @@
 import "core-js/modules/es.object.values";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import convert from 'htmr';
 import "./style/BenefitsIconsTile.css";
-import { Header, Paragraph, cnCreate } from '@megafon/ui-core';
+import { Header } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
 import { IconPositionEnum } from "./types";
 var cn = cnCreate('mfui-beta-benefits-icons-tile');
 
@@ -12,11 +12,12 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
       text = _ref.text,
       icon = _ref.icon,
       _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? IconPositionEnum.LEFT_TOP : _ref$iconPosition;
+      iconPosition = _ref$iconPosition === void 0 ? IconPositionEnum.LEFT_TOP : _ref$iconPosition,
+      className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: cn('', {
+    className: cn({
       'icon-position': iconPosition
-    })
+    }, [className])
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon')
   }, icon), /*#__PURE__*/React.createElement("div", {
@@ -24,16 +25,16 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
   }, title && /*#__PURE__*/React.createElement(Header, {
     className: cn('title'),
     as: "h5"
-  }, convert(title)), text && /*#__PURE__*/React.createElement(Paragraph, {
-    className: cn('text'),
-    hasMargin: false
-  }, convert(text))));
+  }, title), text && /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, text)));
 };
 
 BenefitsIconsTile.propTypes = {
-  title: PropTypes.string,
-  text: PropTypes.string,
+  className: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
-  icon: PropTypes.node
+  icon: PropTypes.node.isRequired
 };
 export default BenefitsIconsTile;

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

@@ -6,8 +6,8 @@ h5 {
   margin: 0;
 }
 .mfui-beta-benefits-icons {
-  font-size: 10px;
   overflow: hidden;
+  font-size: 10px;
 }
 .mfui-beta-benefits-icons__inner {
   margin-bottom: -48px;

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

@@ -7,17 +7,24 @@ h5 {
 }
 .mfui-beta-benefits-icons-tile {
   margin-bottom: 48px;
-  padding: 0 16px;
 }
 .mfui-beta-benefits-icons-tile .mfui-beta-benefits-icons-tile__svg-icon {
   margin-bottom: 10px;
 }
-.mfui-beta-benefits-icons-tile__title + .mfui-beta-benefits-icons-tile__text {
+.mfui-beta-benefits-icons-tile__content {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-beta-benefits-icons-tile__title + .mfui-beta-benefits-icons-tile__content {
   margin-top: 4px;
 }
+.mfui-beta-benefits-icons-tile__text {
+  margin-bottom: 0;
+}
 .mfui-beta-benefits-icons-tile__svg-icon {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   overflow: hidden;
 }
 .mfui-beta-benefits-icons-tile_icon-position_left-side {

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

@@ -1,15 +1,24 @@
 /// <reference types="react" />
 declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export interface IBenefit {
-    title?: string;
-    text?: string;
+    /** Заголовок бенефита */
+    title?: string | React.ReactNode | React.ReactNode[];
+    /** Основной текст в бенефите */
+    text?: string | React.ReactNode | React.ReactNode[];
+    /** Иконка */
     icon: React.ReactNode;
 }
-export declare enum IconPositionEnum {
-    LEFT_TOP = "left-top",
-    CENTER_TOP = "center-top",
-    LEFT_SIDE = "left-side"
-}
+export declare const IconPositionEnum: {
+    readonly LEFT_TOP: "left-top";
+    readonly CENTER_TOP: "center-top";
+    readonly LEFT_SIDE: "left-side";
+};
+export declare type IconPosition = typeof IconPositionEnum[keyof typeof IconPositionEnum];
+export declare const ItemsAlignEnum: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+};
+export declare type ItemsAlignType = typeof ItemsAlignEnum[keyof typeof ItemsAlignEnum];
 export declare type GridConfig = {
     wide?: TGridSizeValues;
     desktop?: TGridSizeValues;

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

@@ -1,7 +1,9 @@
-export var IconPositionEnum;
-
-(function (IconPositionEnum) {
-  IconPositionEnum["LEFT_TOP"] = "left-top";
-  IconPositionEnum["CENTER_TOP"] = "center-top";
-  IconPositionEnum["LEFT_SIDE"] = "left-side";
-})(IconPositionEnum || (IconPositionEnum = {}));
+export var IconPositionEnum = {
+  LEFT_TOP: 'left-top',
+  CENTER_TOP: 'center-top',
+  LEFT_SIDE: 'left-side'
+};
+export var ItemsAlignEnum = {
+  LEFT: 'left',
+  CENTER: 'center'
+};

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

@@ -2,12 +2,21 @@ import * as React from 'react';
 import './BenfitsPictures.less';
 import { IBenefit, GridGutterSize } from './types';
 export interface IBenefitsPicturesProps {
-    /** Benefits list */
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Данные для бенефитов */
     items: IBenefit[];
-    /** Benefits horizontal align */
+    /** Горизонтальное выравнивание */
     hAlign?: 'left' | 'center';
-    /** Grid gap size */
+    /** Расстояние между бенефитами */
     gridGap?: GridGutterSize;
+    /** Дополнительный css класс для корневого элемента */
+    className?: string;
+    /** Дополнительные css классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        item?: string;
+    };
 }
 declare const BenefitsPictures: React.FC<IBenefitsPicturesProps>;
 export default BenefitsPictures;

package/dist/es/components/BenefitsPictures/BenefitsPictures.js

@@ -6,9 +6,10 @@ import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import throttle from 'lodash.throttle';
 import "./BenfitsPictures.css";
-import { cnCreate, Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
-import { DESKTOP_MIDDLE_START } from "../../constants/breakpoints";
-var THROTTLE_TIME = 500;
+import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
+import { breakpoints, cnCreate } from '@megafon/ui-helpers';
+import convert from 'htmr';
+import throttleTime from "../../constants/throttleTime";
 var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
 var columnSize = {
   wide: '4',
@@ -115,7 +116,11 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       _ref$hAlign = _ref.hAlign,
       hAlign = _ref$hAlign === void 0 ? 'left' : _ref$hAlign,
       _ref$gridGap = _ref.gridGap,
-      gridGap = _ref$gridGap === void 0 ? 'large' : _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 = hAlign === 'center' && items.length !== ONLY_LEFT_ALIGN_ITEMS_COUNT;
 
@@ -129,14 +134,14 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       return;
     }
 
-    if (window.innerWidth < DESKTOP_MIDDLE_START) {
+    if (window.innerWidth < breakpoints.DESKTOP_MIDDLE_START) {
       setCurrentGutter('medium');
     } else {
       setCurrentGutter('large');
     }
   }, []);
   React.useEffect(function () {
-    var throttledResizeHandler = throttle(resizeHandler, THROTTLE_TIME);
+    var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
     resizeHandler();
     window.addEventListener('resize', throttledResizeHandler);
     return function () {
@@ -144,7 +149,8 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn()
+    className: cn([className, classes.root]),
+    ref: rootRef
   }, /*#__PURE__*/React.createElement(Grid, {
     guttersLeft: currentGutter,
     hAlign: isGridCenterAlign ? 'center' : 'left'
@@ -155,7 +161,7 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     return /*#__PURE__*/React.createElement(GridColumn, _extends({}, hAlign === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(items.length, index, gridGap), {
       key: index
     }), /*#__PURE__*/React.createElement("div", {
-      className: cn('item')
+      className: cn('item', [classes.item])
     }, /*#__PURE__*/React.createElement("img", {
       className: cn('img', {
         'h-align': hAlign
@@ -166,19 +172,27 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       className: cn('title'),
       hAlign: hAlign,
       as: "h3"
-    }, title), /*#__PURE__*/React.createElement(Paragraph, {
+    }, convert(title)), /*#__PURE__*/React.createElement(Paragraph, {
       align: hAlign
-    }, text)));
+    }, convert(text))));
   })));
 };
 
 BenefitsPictures.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   items: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired,
     img: PropTypes.string.isRequired
   }).isRequired).isRequired,
   hAlign: PropTypes.oneOf(['left', 'center']),
-  gridGap: PropTypes.oneOf(['medium', 'large'])
+  gridGap: PropTypes.oneOf(['medium', 'large']),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    item: PropTypes.string
+  })
 };
 export default BenefitsPictures;

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

@@ -11,8 +11,8 @@ h5 {
 }
 .mfui-beta-benefits-pictures__img_h-align_center {
   display: block;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
 .mfui-beta-benefits-pictures__title {
   margin-bottom: 12px;

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

@@ -1,6 +1,9 @@
 export interface IBenefit {
+    /** Заголовок бенефита */
     title: string;
+    /** Основной текст в бенефите */
     text: string;
+    /** Изображение */
     img: string;
 }
 declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';