@megafon/ui-shared 2.0.0-beta.99 → 2.0.0

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-accordion-box + .mfui-accordion-box .mfui-accordion {
+  border-top: none;
+}
+.mfui-accordion-box .mfui-property:first-child {
+  border-top: none;
+}

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

@@ -1,15 +1,30 @@
 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;

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

@@ -15,32 +15,48 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import * as React from 'react';
+import { Grid, GridColumn, Accordion } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
-import { cnCreate, Grid, GridColumn, Accordion } from '@megafon/ui-core';
-var cn = cnCreate('mfui-beta-accordion-box');
+import "./AccordionBox.css";
+var cn = cnCreate('mfui-accordion-box');
 
 var AccordionBox = function AccordionBox(_a) {
   var _a$hCenterAlignWide = _a.hCenterAlignWide,
       hCenterAlignWide = _a$hCenterAlignWide === void 0 ? false : _a$hCenterAlignWide,
-      props = __rest(_a, ["hCenterAlignWide"]);
+      _a$isFullWidth = _a.isFullWidth,
+      isFullWidth = _a$isFullWidth === void 0 ? false : _a$isFullWidth,
+      restProps = __rest(_a, ["hCenterAlignWide", "isFullWidth"]);
 
-  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, props))));
+  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
+    collapse: PropTypes.string,
+    titleWrap: PropTypes.string
   }),
-  onClickAccordion: PropTypes.func,
-  hCenterAlignWide: PropTypes.bool
+  onClickAccordion: PropTypes.func
 };
 export default AccordionBox;

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

@@ -15,8 +15,9 @@ var __rest = this && this.__rest || function (s, e) {
 };
 
 import * as React from 'react';
-import { cnCreate, Banner } from '@megafon/ui-core';
-var cn = cnCreate('mfui-beta-banner-box');
+import { Banner } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+var cn = cnCreate('mfui-banner-box');
 
 var BannerBox = function BannerBox(_a) {
   var children = _a.children,

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

@@ -1,13 +1,24 @@
 import * as React from 'react';
-import './style/BenefitsIcons.less';
 import { IconPosition, IBenefit } from './types';
+import './style/BenefitsIcons.less';
 export interface IBenefitsIcons {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Позиция иконки */
     iconPosition?: IconPosition;
+    /** Выстраивать бенефиты в одну колонку вне зависимости от количества */
+    inOneColumn?: boolean;
     /** Список бенефитов */
     items: IBenefit[];
-    /** Дополнительный класс корневого элемента */
+    /** Дополнительный 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 { Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, breakpoints } from '@megafon/ui-helpers';
+import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
-import "./style/BenefitsIcons.css";
-import { cnCreate, Grid, GridColumn } from '@megafon/ui-core';
+import throttleTime from "../../constants/throttleTime";
 import BenefitsIconsTile from "./BenefitsIconsTile";
-import { IconPositionEnum } from "./types"; // left-aligned column with left side icon,
+import { IconPositionEnum, ItemsAlignEnum } from "./types";
+import "./style/BenefitsIcons.css"; // 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);
@@ -107,43 +123,92 @@ var getColumnConfig = function getColumnConfig(iconPosition, count, index) {
   }
 };
 
-var cn = cnCreate('mfui-beta-benefits-icons');
+var cn = cnCreate('mfui-benefits-icons');
 
 var BenefitsIcons = function BenefitsIcons(_ref) {
-  var _ref$iconPosition = _ref.iconPosition,
-      iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _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, IconPosition } from './types';
+import './style/BenefitsIconsTile.less';
 export interface IBenefitsIconsTile extends IBenefit {
     iconPosition?: IconPosition;
+    className?: string;
 }
 declare const BenefitsIconsTile: React.FC<IBenefitsIconsTile>;
 export default BenefitsIconsTile;

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

@@ -1,22 +1,23 @@
 import "core-js/modules/es.object.values";
 import * as React from 'react';
+import { Header } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
-import convert from 'htmr';
-import "./style/BenefitsIconsTile.css";
-import { Header, Paragraph, cnCreate } from '@megafon/ui-core';
 import { IconPositionEnum } from "./types";
-var cn = cnCreate('mfui-beta-benefits-icons-tile');
+import "./style/BenefitsIconsTile.css";
+var cn = cnCreate('mfui-benefits-icons-tile');
 
 var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
   var title = _ref.title,
       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

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

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

@@ -5,39 +5,46 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-benefits-icons-tile {
+.mfui-benefits-icons-tile {
   margin-bottom: 48px;
-  padding: 0 16px;
 }
-.mfui-beta-benefits-icons-tile .mfui-beta-benefits-icons-tile__svg-icon {
+.mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon {
   margin-bottom: 10px;
 }
-.mfui-beta-benefits-icons-tile__title + .mfui-beta-benefits-icons-tile__text {
+.mfui-benefits-icons-tile__content {
+  font-size: 15px;
+  line-height: 24px;
+  font-weight: 400;
+}
+.mfui-benefits-icons-tile__title + .mfui-benefits-icons-tile__content {
   margin-top: 4px;
 }
-.mfui-beta-benefits-icons-tile__svg-icon {
-  width: 44px;
-  height: 44px;
+.mfui-benefits-icons-tile__text {
+  margin-bottom: 0;
+}
+.mfui-benefits-icons-tile__svg-icon {
+  width: 40px;
+  height: 40px;
   overflow: hidden;
 }
-.mfui-beta-benefits-icons-tile_icon-position_left-side {
+.mfui-benefits-icons-tile_icon-position_left-side {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-beta-benefits-icons-tile_icon-position_left-side .mfui-beta-benefits-icons-tile__content-wrapper {
+.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__content-wrapper {
   padding-top: 10px;
 }
-.mfui-beta-benefits-icons-tile_icon-position_left-side .mfui-beta-benefits-icons-tile__svg-icon {
+.mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon {
   -ms-flex-negative: 0;
       flex-shrink: 0;
   margin-right: 14px;
   margin-bottom: 0;
 }
-.mfui-beta-benefits-icons-tile_icon-position_center-top {
+.mfui-benefits-icons-tile_icon-position_center-top {
   text-align: center;
 }
-.mfui-beta-benefits-icons-tile_icon-position_center-top .mfui-beta-benefits-icons-tile__svg-icon {
+.mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon {
   margin-right: auto;
   margin-left: auto;
 }

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

@@ -2,9 +2,9 @@
 declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export interface IBenefit {
     /** Заголовок бенефита */
-    title?: string;
+    title?: string | React.ReactNode | React.ReactNode[];
     /** Основной текст в бенефите */
-    text?: string;
+    text?: string | React.ReactNode | React.ReactNode[];
     /** Иконка */
     icon: React.ReactNode;
 }
@@ -14,6 +14,11 @@ export declare const IconPositionEnum: {
     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

@@ -2,4 +2,8 @@ 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

@@ -1,13 +1,22 @@
 import * as React from 'react';
-import './BenfitsPictures.less';
 import { IBenefit, GridGutterSize } from './types';
+import './BenfitsPictures.less';
 export interface IBenefitsPicturesProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Данные для бенефитов */
     items: IBenefit[];
     /** Горизонтальное выравнивание */
     hAlign?: 'left' | 'center';
     /** Расстояние между бенефитами */
     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

@@ -3,10 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { useCallback } from 'react';
-import PropTypes from 'prop-types';
+import { Grid, GridColumn, Header, Paragraph } from '@megafon/ui-core';
+import { breakpoints, cnCreate } from '@megafon/ui-helpers';
+import convert from 'htmr';
 import throttle from 'lodash.throttle';
+import PropTypes from 'prop-types';
+import throttleTime from "../../constants/throttleTime";
 import "./BenfitsPictures.css";
-import { cnCreate, Grid, GridColumn, Header, Paragraph, breakpoints, throttleTime } from '@megafon/ui-core';
 var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
 var columnSize = {
   wide: '4',
@@ -106,14 +109,18 @@ var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
   }
 };
 
-var cn = cnCreate('mfui-beta-benefits-pictures');
+var cn = cnCreate('mfui-benefits-pictures');
 
 var BenefitsPictures = function BenefitsPictures(_ref) {
   var items = _ref.items,
       _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;
 
@@ -127,12 +134,12 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       return;
     }
 
-    if (window.innerWidth < breakpoints.desktopMiddleStart) {
+    if (window.innerWidth < breakpoints.DESKTOP_MIDDLE_START) {
       setCurrentGutter('medium');
     } else {
       setCurrentGutter('large');
     }
-  }, []);
+  }, [isLargeGutter]);
   React.useEffect(function () {
     var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
     resizeHandler();
@@ -140,9 +147,10 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     return function () {
       return window.removeEventListener('resize', throttledResizeHandler);
     };
-  }, []);
+  }, [resizeHandler]);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn()
+    className: cn([className, classes.root]),
+    ref: rootRef
   }, /*#__PURE__*/React.createElement(Grid, {
     guttersLeft: currentGutter,
     hAlign: isGridCenterAlign ? 'center' : 'left'
@@ -153,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
@@ -164,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

@@ -5,15 +5,15 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-benefits-pictures__img {
+.mfui-benefits-pictures__img {
   max-width: 100%;
   margin-bottom: 32px;
 }
-.mfui-beta-benefits-pictures__img_h-align_center {
+.mfui-benefits-pictures__img_h-align_center {
   display: block;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 }
-.mfui-beta-benefits-pictures__title {
+.mfui-benefits-pictures__title {
   margin-bottom: 12px;
 }