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

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,6 +11,8 @@ 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"));
@@ -23,10 +21,16 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 var _BenefitsIconsTile = _interopRequireDefault(require("./BenefitsIconsTile"));
 
 var _types = require("./types");
 
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
 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; }
@@ -120,7 +124,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 +149,93 @@ var getColumnConfig = function getColumnConfig(iconPosition, count, index) {
   }
 };
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-benefits-icons');
+var cn = (0, _uiHelpers.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 ? _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, 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/lib/components/BenefitsIcons/BenefitsIconsTile.js

@@ -2,8 +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.object.values");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,10 +13,10 @@ var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _htmr = _interopRequireDefault(require("htmr"));
-
 var _uiCore = require("@megafon/ui-core");
 
+var _uiHelpers = require("@megafon/ui-helpers");
+
 var _types = require("./types");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -27,18 +25,19 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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; }
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-benefits-icons-tile');
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-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 ? _types.IconPositionEnum.LEFT_TOP : _ref$iconPosition;
+      iconPosition = _ref$iconPosition === void 0 ? _types.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", {
@@ -46,17 +45,17 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
   }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
     className: cn('title'),
     as: "h5"
-  }, (0, _htmr["default"])(title)), text && /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
-    className: cn('text'),
-    hasMargin: false
-  }, (0, _htmr["default"])(text))));
+  }, title), text && /*#__PURE__*/React.createElement("div", {
+    className: cn('content')
+  }, text)));
 };
 
 BenefitsIconsTile.propTypes = {
-  title: _propTypes["default"].string,
-  text: _propTypes["default"].string,
+  className: _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)]),
   iconPosition: _propTypes["default"].oneOf(Object.values(_types.IconPositionEnum)),
-  icon: _propTypes["default"].node
+  icon: _propTypes["default"].node.isRequired
 };
 var _default = BenefitsIconsTile;
 exports["default"] = _default;

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

@@ -3,12 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.IconPositionEnum = void 0;
-var IconPositionEnum;
+exports.ItemsAlignEnum = exports.IconPositionEnum = void 0;
+var IconPositionEnum = {
+  LEFT_TOP: 'left-top',
+  CENTER_TOP: 'center-top',
+  LEFT_SIDE: 'left-side'
+};
 exports.IconPositionEnum = IconPositionEnum;
-
-(function (IconPositionEnum) {
-  IconPositionEnum["LEFT_TOP"] = "left-top";
-  IconPositionEnum["CENTER_TOP"] = "center-top";
-  IconPositionEnum["LEFT_SIDE"] = "left-side";
-})(IconPositionEnum || (exports.IconPositionEnum = IconPositionEnum = {}));
+var ItemsAlignEnum = {
+  LEFT: 'left',
+  CENTER: 'center'
+};
+exports.ItemsAlignEnum = ItemsAlignEnum;

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

@@ -2,8 +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");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +21,11 @@ var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
 var _uiCore = require("@megafon/ui-core");
 
-var _breakpoints = require("../../constants/breakpoints");
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _htmr = _interopRequireDefault(require("htmr"));
+
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -31,7 +33,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var THROTTLE_TIME = 500;
 var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
 var columnSize = {
   wide: '4',
@@ -131,14 +132,18 @@ var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
   }
 };
 
-var cn = (0, _uiCore.cnCreate)('mfui-beta-benefits-pictures');
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-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;
 
@@ -152,14 +157,14 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       return;
     }
 
-    if (window.innerWidth < _breakpoints.DESKTOP_MIDDLE_START) {
+    if (window.innerWidth < _uiHelpers.breakpoints.DESKTOP_MIDDLE_START) {
       setCurrentGutter('medium');
     } else {
       setCurrentGutter('large');
     }
   }, []);
   React.useEffect(function () {
-    var throttledResizeHandler = (0, _lodash["default"])(resizeHandler, THROTTLE_TIME);
+    var throttledResizeHandler = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
     resizeHandler();
     window.addEventListener('resize', throttledResizeHandler);
     return function () {
@@ -167,7 +172,8 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     };
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: cn()
+    className: cn([className, classes.root]),
+    ref: rootRef
   }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
     guttersLeft: currentGutter,
     hAlign: isGridCenterAlign ? 'center' : 'left'
@@ -178,7 +184,7 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, 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
@@ -189,20 +195,28 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
       className: cn('title'),
       hAlign: hAlign,
       as: "h3"
-    }, title), /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
+    }, (0, _htmr["default"])(title)), /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
       align: hAlign
-    }, text)));
+    }, (0, _htmr["default"])(text))));
   })));
 };
 
 BenefitsPictures.propTypes = {
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     title: _propTypes["default"].string.isRequired,
     text: _propTypes["default"].string.isRequired,
     img: _propTypes["default"].string.isRequired
   }).isRequired).isRequired,
   hAlign: _propTypes["default"].oneOf(['left', 'center']),
-  gridGap: _propTypes["default"].oneOf(['medium', 'large'])
+  gridGap: _propTypes["default"].oneOf(['medium', 'large']),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    item: _propTypes["default"].string
+  })
 };
 var _default = BenefitsPictures;
 exports["default"] = _default;

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

package/dist/lib/components/Breadcrumbs/Breadcrumbs.css

@@ -0,0 +1,46 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-beta-breadcrumbs {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.mfui-beta-breadcrumbs_color_black .mfui-beta-breadcrumbs__item:before {
+  color: #333333;
+}
+.mfui-beta-breadcrumbs_color_white .mfui-beta-breadcrumbs__item:before {
+  color: #FFFFFF;
+}
+.mfui-beta-breadcrumbs__icon {
+  position: relative;
+  width: 14px;
+  height: 3px;
+  margin-right: 10px;
+}
+.mfui-beta-breadcrumbs__item {
+  position: relative;
+  margin-right: 10px;
+  padding-left: 22px;
+}
+.mfui-beta-breadcrumbs__item:before {
+  content: '→';
+  position: absolute;
+  top: -2px;
+  left: 0;
+}
+.mfui-beta-breadcrumbs__item:first-child {
+  padding-left: 0;
+}
+.mfui-beta-breadcrumbs__item:first-child:before {
+  display: none;
+}
+.mfui-beta-breadcrumbs__item:last-child {
+  pointer-events: none;
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import './Breadcrumbs.less';
+declare type ItemType = {
+    title: string;
+    href?: string;
+};
+export declare const TextColor: {
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+};
+declare type TextColorType = typeof TextColor[keyof typeof TextColor];
+export declare type Props = {
+    className?: string;
+    classes?: {
+        item?: string;
+    };
+    items: ItemType[];
+    color?: TextColorType;
+};
+declare const Breadcrumbs: React.FC<Props>;
+export default Breadcrumbs;

package/dist/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TextColor = void 0;
+
+require("core-js/modules/es.array.map");
+
+require("core-js/modules/es.object.values");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var TextColor = {
+  BLACK: 'black',
+  WHITE: 'white'
+};
+exports.TextColor = TextColor;
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-breadcrumbs');
+
+var Breadcrumbs = function Breadcrumbs(_ref) {
+  var items = _ref.items,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'black' : _ref$color,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn({
+      color: color
+    }, className)
+  }, items.map(function (_ref2) {
+    var title = _ref2.title,
+        href = _ref2.href;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('item', classes.item),
+      key: title
+    }, /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+      href: href,
+      color: color
+    }, title));
+  }));
+};
+
+Breadcrumbs.propTypes = {
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    item: _propTypes["default"].string
+  }),
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    href: _propTypes["default"].string
+  }).isRequired).isRequired,
+  color: _propTypes["default"].oneOf(Object.values(TextColor))
+};
+var _default = Breadcrumbs;
+exports["default"] = _default;