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

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -1,28 +1,33 @@
 import "core-js/modules/es.symbol";
 import "core-js/modules/es.symbol.description";
 import "core-js/modules/es.array.concat";
-import "core-js/modules/es.array.map";
 import "core-js/modules/es.object.values";
-import * as React from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Header, Button, Grid, GridColumn } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import "./VideoBlock.css";
-import { Header, Button, Paragraph, Grid, GridColumn, cnCreate } from '@megafon/ui-core';
 export var VideoTypes = {
   YOUTUBE: 'youtube',
   VIDEO: 'video'
 };
-var cn = cnCreate('mfui-beta-video-block');
+var cn = cnCreate('mfui-video-block');
 
 var VideoBlock = function VideoBlock(_ref) {
-  var content = _ref.content,
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      content = _ref.content,
       _ref$videoType = _ref.videoType,
       videoType = _ref$videoType === void 0 ? 'video' : _ref$videoType,
       videoSrc = _ref.videoSrc,
       _ref$isMuted = _ref.isMuted,
       isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
       _ref$isAutoplay = _ref.isAutoplay,
-      isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
-      className = _ref.className;
+      isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay;
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -33,22 +38,27 @@ var VideoBlock = function VideoBlock(_ref) {
             width: "100%",
             height: "100%",
             frameBorder: "0",
-            allow: "autoplay"
+            allow: "autoplay",
+            title: "iframe"
           });
         }
 
       case VideoTypes.VIDEO:
         {
-          return /*#__PURE__*/React.createElement("video", {
-            className: cn('video'),
-            autoPlay: isAutoplay,
-            muted: isMuted,
-            controls: !isAutoplay,
-            loop: true
-          }, /*#__PURE__*/React.createElement("source", {
-            src: videoSrc,
-            type: "video/mp4"
-          }));
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line jsx-a11y/media-has-caption
+            React.createElement("video", {
+              className: cn('video'),
+              autoPlay: isAutoplay,
+              muted: isMuted,
+              controls: !isAutoplay,
+              loop: true
+            }, /*#__PURE__*/React.createElement("source", {
+              src: videoSrc,
+              type: "video/mp4"
+            }))
+          );
         }
 
       default:
@@ -56,30 +66,28 @@ var VideoBlock = function VideoBlock(_ref) {
           return null;
         }
     }
-  }, [videoType, videoSrc]);
-  var renderContent = React.useCallback(function (data) {
-    var title = data.title,
-        description = data.description,
-        href = data.href,
-        buttonTitle = data.buttonTitle,
-        onButtonClick = data.onButtonClick;
+  }, [isAutoplay, isMuted, videoType, videoSrc]);
+  var renderContent = React.useCallback(function (_ref2) {
+    var title = _ref2.title,
+        description = _ref2.description,
+        href = _ref2.href,
+        buttonDownload = _ref2.buttonDownload,
+        buttonTitle = _ref2.buttonTitle,
+        onButtonClick = _ref2.onButtonClick;
     return /*#__PURE__*/React.createElement("div", {
       className: cn('content')
     }, /*#__PURE__*/React.createElement(Header, {
-      as: "h3",
+      as: "h2",
       className: cn('header')
-    }, title), /*#__PURE__*/React.createElement("div", null, description && description.map(function (paragraph, i) {
-      return /*#__PURE__*/React.createElement(Paragraph, {
-        key: i + paragraph,
-        className: cn('text'),
-        hasMargin: false
-      }, paragraph);
-    })), /*#__PURE__*/React.createElement(Button, {
-      className: cn('button'),
+    }, title), /*#__PURE__*/React.createElement("div", {
+      className: cn('description', [classes.description])
+    }, description), /*#__PURE__*/React.createElement(Button, {
+      className: cn('button', [classes.button]),
       href: href,
-      onClick: onButtonClick
+      onClick: onButtonClick,
+      download: buttonDownload
     }, buttonTitle));
-  }, [content]);
+  }, [classes.button, classes.description]);
   var renderGridColumns = React.useCallback(function () {
     var columns = [];
     var columnWidth = content ? '7' : '10';
@@ -91,7 +99,7 @@ var VideoBlock = function VideoBlock(_ref) {
         mobile: "12",
         orderTablet: "2",
         orderMobile: "2",
-        key: 'column-content'
+        key: "column-content"
       }, renderContent && renderContent(content)));
     }
 
@@ -99,7 +107,7 @@ var VideoBlock = function VideoBlock(_ref) {
       all: columnWidth,
       tablet: "12",
       mobile: "12",
-      key: 'column-video'
+      key: "column-video"
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('video-wrapper', {
         'with-content': !!content
@@ -107,26 +115,37 @@ var VideoBlock = function VideoBlock(_ref) {
     }, renderVideo())));
     return columns;
   }, [renderContent, renderVideo, content]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn([className])
-  }, /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+    className: cn([className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Grid, {
     hAlign: "center",
     className: cn('grid')
   }, renderGridColumns()));
 };
 
 VideoBlock.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    description: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   content: PropTypes.shape({
     title: PropTypes.string.isRequired,
-    description: PropTypes.array.isRequired,
+    description: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
     href: PropTypes.string,
     buttonTitle: PropTypes.string.isRequired,
+    buttonDownload: PropTypes.bool,
     onButtonClick: PropTypes.func
   }),
   videoType: PropTypes.oneOf(Object.values(VideoTypes)),
   videoSrc: PropTypes.string.isRequired,
   isMuted: PropTypes.bool,
-  isAutoplay: PropTypes.bool,
-  className: PropTypes.string
+  isAutoplay: PropTypes.bool
 };
 export default VideoBlock;

package/dist/es/constants/throttleTime.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    resize: number;
+};
+export default _default;

package/dist/es/constants/throttleTime.js

@@ -0,0 +1,3 @@
+export default {
+  resize: 300
+};

package/dist/es/index.d.ts

@@ -3,6 +3,8 @@ export { default as BannerBox } from './components/BannerBox/BannerBox';
 export { default as BenefitsIcons } from './components/BenefitsIcons/BenefitsIcons';
 export { default as BenefitsIconsTile } from './components/BenefitsIcons/BenefitsIconsTile';
 export { default as BenefitsPictures } from './components/BenefitsPictures/BenefitsPictures';
+export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
+export { default as ButtonBanner } from './components/ButtonBanner/ButtonBanner';
 export { default as ButtonLinkBox } from './components/ButtonLinkBox/ButtonLinkBox';
 export { default as Card } from './components/Card/Card';
 export { default as CardsBox } from './components/CardsBox/CardsBox';
@@ -11,16 +13,22 @@ export { default as Container } from './components/Container/Container';
 export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
 export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
 export { default as Instructions } from './components/Instructions/Instructions';
+export { default as PageTitle } from './components/PageTitle/PageTitle';
 export { default as Partners } from './components/Partners/Partners';
 export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
 export { default as Property } from './components/Property/Property';
 export { default as PropertyDescription } from './components/Property/PropertyDescription';
+export { default as Steps } from './components/Steps/Steps';
+export { default as StepsItem } from './components/Steps/StepsItem';
+export { default as StoreBanner } from './components/StoreBanner/StoreBanner';
+export { default as StoreButton } from './components/StoreButton/StoreButton';
 export { default as TabBox } from './components/TabsBox/TabBox';
 export { default as Table } from './components/Table/Table';
 export { default as TableCell } from './components/Table/TableCell';
 export { default as TableRow } from './components/Table/TableRow';
 export { default as TabsBox } from './components/TabsBox/TabsBox';
 export { default as TextBox } from './components/TextBox/TextBox';
+export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
 export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
 export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/es/index.js

@@ -3,6 +3,8 @@ export { default as BannerBox } from "./components/BannerBox/BannerBox";
 export { default as BenefitsIcons } from "./components/BenefitsIcons/BenefitsIcons";
 export { default as BenefitsIconsTile } from "./components/BenefitsIcons/BenefitsIconsTile";
 export { default as BenefitsPictures } from "./components/BenefitsPictures/BenefitsPictures";
+export { default as Breadcrumbs } from "./components/Breadcrumbs/Breadcrumbs";
+export { default as ButtonBanner } from "./components/ButtonBanner/ButtonBanner";
 export { default as ButtonLinkBox } from "./components/ButtonLinkBox/ButtonLinkBox";
 export { default as Card } from "./components/Card/Card";
 export { default as CardsBox } from "./components/CardsBox/CardsBox";
@@ -11,16 +13,22 @@ export { default as Container } from "./components/Container/Container";
 export { default as DownloadLink } from "./components/DownloadLinks/DownloadLink";
 export { default as DownloadLinks } from "./components/DownloadLinks/DownloadLinks";
 export { default as Instructions } from "./components/Instructions/Instructions";
+export { default as PageTitle } from "./components/PageTitle/PageTitle";
 export { default as Partners } from "./components/Partners/Partners";
 export { default as PictureWithDescription } from "./components/PictureWithDescription/PictureWithDescription";
 export { default as Property } from "./components/Property/Property";
 export { default as PropertyDescription } from "./components/Property/PropertyDescription";
+export { default as Steps } from "./components/Steps/Steps";
+export { default as StepsItem } from "./components/Steps/StepsItem";
+export { default as StoreBanner } from "./components/StoreBanner/StoreBanner";
+export { default as StoreButton } from "./components/StoreButton/StoreButton";
 export { default as TabBox } from "./components/TabsBox/TabBox";
 export { default as Table } from "./components/Table/Table";
 export { default as TableCell } from "./components/Table/TableCell";
 export { default as TableRow } from "./components/Table/TableRow";
 export { default as TabsBox } from "./components/TabsBox/TabsBox";
 export { default as TextBox } from "./components/TextBox/TextBox";
+export { default as TextBoxPicture } from "./components/TextBox/TextBoxPicture";
 export { default as TitleDescriptionBox } from "./components/TitleDescriptionBox/TitleDescriptionBox";
 export { default as VideoBanner } from "./components/VideoBanner/VideoBanner";
 export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";

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

@@ -2,10 +2,6 @@
 
 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); }
 
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.array.index-of");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,10 +13,12 @@ require("core-js/modules/es.array.index-of");
 
 var React = _interopRequireWildcard(require("react"));
 
-var PropTypes = _interopRequireWildcard(require("prop-types"));
-
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
@@ -38,31 +36,45 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-accordion-box');
+var cn = (0, _uiHelpers.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"]);
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn()
-  }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
-    hAlign: hCenterAlignWide ? 'center' : 'left'
-  }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
-    wide: "8"
-  }, /*#__PURE__*/React.createElement(_uiCore.Accordion, props))));
+      _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(_uiCore.Grid, {
+      hAlign: hCenterAlignWide ? 'center' : 'left'
+    }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+      wide: "8"
+    }, /*#__PURE__*/React.createElement(_uiCore.Accordion, restProps))));
+  }, [restProps, hCenterAlignWide]);
+  return isFullWidth ? /*#__PURE__*/React.createElement(_uiCore.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
 };
 var _default = AccordionBox;
 exports["default"] = _default;

package/dist/lib/components/BannerBox/BannerBox.js

@@ -2,10 +2,6 @@
 
 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); }
 
-require("core-js/modules/es.symbol");
-
-require("core-js/modules/es.array.index-of");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,6 +15,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
@@ -36,7 +34,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-banner-box');
+var cn = (0, _uiHelpers.cnCreate)('mfui-banner-box');
 
 var BannerBox = function BannerBox(_a) {
   var children = _a.children,

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

@@ -2,10 +2,6 @@
 
 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); }
 
-require("core-js/modules/es.array.map");
-
-require("core-js/modules/es.object.values");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,13 +11,21 @@ require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.object.values");
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 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");
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _uiCore = require("@megafon/ui-core");
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 
 var _BenefitsIconsTile = _interopRequireDefault(require("./BenefitsIconsTile"));
 
@@ -33,7 +37,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-// left-aligned column with left side icon,
 var getLeftSideConfig = function getLeftSideConfig(count, index) {
   var everySecondWithoutOffset = index % 2 ? '1' : undefined;
   var columnSize = {
@@ -120,7 +123,19 @@ var getCenterTopConfig = function getCenterTopConfig(count, index) {
   }
 };
 
-var getColumnConfig = function getColumnConfig(iconPosition, count, index) {
+var 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);
@@ -133,44 +148,93 @@ var getColumnConfig = function getColumnConfig(iconPosition, count, index) {
   }
 };
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-benefits-icons');
+var cn = (0, _uiHelpers.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 ? _types.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 === _types.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 === _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", {
-    className: cn(className)
+    className: cn([className, classes.root]),
+    ref: rootRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('inner')
   }, /*#__PURE__*/React.createElement(_uiCore.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(_uiCore.GridColumn, (0, _extends2["default"])({}, getColumnConfig(iconPosition, items.length, i), {
+    var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
+    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({
+      className: classes.gridColumn,
       key: i
-    }), /*#__PURE__*/React.createElement(_BenefitsIconsTile["default"], {
+    }, columnConfig), /*#__PURE__*/React.createElement(_BenefitsIconsTile["default"], {
+      className: classes.item,
       title: title,
       text: text,
       icon: icon,
-      iconPosition: iconPosition
+      iconPosition: localIconPosition
     }));
   }))));
 };
 
 BenefitsIcons.propTypes = {
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
   iconPosition: _propTypes["default"].oneOf(Object.values(_types.IconPositionEnum)),
+  inOneColumn: _propTypes["default"].bool,
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    title: _propTypes["default"].string,
-    text: _propTypes["default"].string,
+    title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
+    text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
     icon: _propTypes["default"].node.isRequired
   }).isRequired).isRequired,
-  className: _propTypes["default"].string
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    item: _propTypes["default"].string
+  })
 };
 var _default = BenefitsIcons;
 exports["default"] = _default;

package/dist/lib/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;