@megafon/ui-shared 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.2.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.1.0...@megafon/ui-shared@5.2.0) (2023-09-21)
+
+
+### Features
+
+* **property:** add type ReactNode to props item.value ([5f59136](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/5f59136ffdc6fc863a6910bd45f17c6783be19c8))
+* **table:** add vAlign and disableHeightLimit props ([813b1ce](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/813b1ceef71576104d8c397cf372c52192daa258))
+
+
+
+
+
 # [5.1.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.0.1...@megafon/ui-shared@5.1.0) (2023-09-14)
 
 

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

@@ -1,5 +1,5 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.values.js";
 import * as React from 'react';
@@ -9,120 +9,10 @@ import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
 import BenefitsIconsTile from "./BenefitsIconsTile";
+import getMultiColumnConfig, { getOneColumnConfig } from "./helpers";
 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;
-  var columnSize = {
-    wide: '4',
-    desktop: '5',
-    tablet: '10'
-  };
-
-  switch (count) {
-    case 2:
-    case 4:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetWide: everySecondWithoutOffset,
-        leftOffsetDesktop: everySecondWithoutOffset
-      });
-
-    default:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetDesktop: everySecondWithoutOffset
-      });
-  }
-}; // left-aligned column with left-aligned icon on top
-
-
-var getLeftTopConfig = function getLeftTopConfig(count, index) {
-  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
-  var everyThirdWithoutOffset = index % 3 ? '1' : undefined;
-
-  switch (count) {
-    case 2:
-      return {
-        wide: '4',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetWide: everySecondWithoutOffset,
-        leftOffsetDesktop: everySecondWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-
-    case 4:
-      return {
-        wide: '3',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetDesktop: everySecondWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-
-    default:
-      return {
-        wide: '3',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetWide: everyThirdWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-  }
-}; // center-aligned column with center-aligned icon on top
-
-
-var getCenterTopConfig = function getCenterTopConfig(count, index) {
-  var isEvenIndex = !(index % 2);
-  var everyEvenWithLeftOffset = isEvenIndex ? '1' : undefined;
-  var everyOddWithRightOffset = isEvenIndex ? undefined : '1';
-
-  switch (count) {
-    case 4:
-      return {
-        wide: '3',
-        desktop: '5',
-        tablet: '5',
-        leftOffsetDesktop: everyEvenWithLeftOffset,
-        leftOffsetTablet: everyEvenWithLeftOffset,
-        rightOffsetTablet: everyOddWithRightOffset,
-        rightOffsetDesktop: everyOddWithRightOffset
-      };
-
-    default:
-      return {
-        wide: '4',
-        desktop: '4',
-        tablet: '4'
-      };
-  }
-};
-
-var getOneColumnConfig = 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);
-
-    case IconPositionEnum.CENTER_TOP:
-      return getCenterTopConfig(count, index);
-
-    default:
-      return getLeftSideConfig(count, index);
-  }
-};
-
+import "./style/BenefitsIcons.css";
+var testIdPrefix = 'BenefitsIcons';
 var cn = cnCreate('mfui-benefits-icons');
 
 var BenefitsIcons = function BenefitsIcons(_ref) {
@@ -177,7 +67,15 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
   }, /*#__PURE__*/React.createElement(Grid, {
     className: classes.grid,
     guttersLeft: "medium",
-    hAlign: itemsAlign
+    hAlign: itemsAlign,
+    dataAttrs: {
+      root: {
+        'data-testid': "".concat(testIdPrefix, "-grid-root")
+      },
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
   }, items.map(function (_ref2, i) {
     var title = _ref2.title,
         text = _ref2.text,
@@ -185,7 +83,12 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
     var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
     return /*#__PURE__*/React.createElement(GridColumn, _extends({
       className: classes.gridColumn,
-      key: i
+      key: i,
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-grid-column")
+        }
+      }
     }, columnConfig), /*#__PURE__*/React.createElement(BenefitsIconsTile, {
       className: cn('tile', [classes.item]),
       title: title,

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

@@ -5,6 +5,7 @@ import { cnCreate } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
 import { IconPositionEnum } from "./types";
 import "./style/BenefitsIconsTile.css";
+var testIdPrefix = 'BenefitsIconsTile';
 var cn = cnCreate('mfui-benefits-icons-tile');
 
 var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
@@ -17,7 +18,8 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'icon-position': iconPosition
-    }, [className])
+    }, [className]),
+    "data-testid": "".concat(testIdPrefix, "-root")
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon')
   }, icon), /*#__PURE__*/React.createElement("div", {

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

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

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

@@ -0,0 +1,116 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { IconPositionEnum } from "./types"; // left-aligned column with left side icon
+
+var getLeftSideConfig = function getLeftSideConfig(count, index) {
+  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
+  var columnSize = {
+    wide: '4',
+    desktop: '5',
+    tablet: '10'
+  };
+
+  switch (count) {
+    case 2:
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: everySecondWithoutOffset,
+        leftOffsetDesktop: everySecondWithoutOffset
+      });
+
+    default:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetDesktop: everySecondWithoutOffset
+      });
+  }
+}; // left-aligned column with left-aligned icon on top
+
+
+var getLeftTopConfig = function getLeftTopConfig(count, index) {
+  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
+  var everyThirdWithoutOffset = index % 3 ? '1' : undefined;
+
+  switch (count) {
+    case 2:
+      return {
+        wide: '4',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetWide: everySecondWithoutOffset,
+        leftOffsetDesktop: everySecondWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+
+    case 4:
+      return {
+        wide: '3',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetDesktop: everySecondWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+
+    default:
+      return {
+        wide: '3',
+        desktop: '4',
+        tablet: '5',
+        leftOffsetWide: everyThirdWithoutOffset,
+        leftOffsetTablet: everySecondWithoutOffset
+      };
+  }
+}; // center-aligned column with center-aligned icon on top
+
+
+var getCenterTopConfig = function getCenterTopConfig(count, index) {
+  var isEvenIndex = !(index % 2);
+  var everyEvenWithLeftOffset = isEvenIndex ? '1' : undefined;
+  var everyOddWithRightOffset = isEvenIndex ? undefined : '1';
+
+  switch (count) {
+    case 4:
+      return {
+        wide: '3',
+        desktop: '5',
+        tablet: '5',
+        leftOffsetDesktop: everyEvenWithLeftOffset,
+        leftOffsetTablet: everyEvenWithLeftOffset,
+        rightOffsetTablet: everyOddWithRightOffset,
+        rightOffsetDesktop: everyOddWithRightOffset
+      };
+
+    default:
+      return {
+        wide: '4',
+        desktop: '4',
+        tablet: '4'
+      };
+  }
+};
+
+var getOneColumnConfig = 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);
+
+    case IconPositionEnum.CENTER_TOP:
+      return getCenterTopConfig(count, index);
+
+    default:
+      return getLeftSideConfig(count, index);
+  }
+};
+
+export default getMultiColumnConfig;
+export { getLeftSideConfig, getLeftTopConfig, getCenterTopConfig, getOneColumnConfig };

package/dist/es/components/Property/Property.js

@@ -98,7 +98,7 @@ var Property = function Property(_ref) {
       "data-testid": "".concat(testIdPrefix, "-value")
     }, /*#__PURE__*/React.createElement("div", {
       className: cn('value')
-    }, convert(value, {})), valueUnit && /*#__PURE__*/React.createElement(Caption, {
+    }, typeof value === 'string' ? convert(value, {}) : value), valueUnit && /*#__PURE__*/React.createElement(Caption, {
       className: cn('value-unit'),
       hasMargin: false
     }, convert(valueUnit, {})));
@@ -157,7 +157,7 @@ Property.propTypes = {
       value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]).isRequired,
       isCollapsible: PropTypes.bool
     })),
-    value: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     titleSize: PropTypes.oneOf(['default', 'big']),
     valueUnit: PropTypes.string,
     valueFrameColor: PropTypes.oneOf(['none', 'default', 'gray'])

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

@@ -14,7 +14,7 @@ export declare type Item = {
     title?: string[] | React.ReactNode[];
     titleSize?: 'default' | 'big';
     description?: Desc[];
-    value?: string;
+    value?: string | React.ReactNode;
     valueUnit?: string;
     valueFrameColor?: 'none' | 'default' | 'gray';
 };

package/dist/es/components/Table/Table.css

@@ -40,7 +40,7 @@ h5 {
   overflow: auto;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-table__scroll {
+  .mfui-table__scroll_limit {
     max-height: 500px;
   }
 }
@@ -131,6 +131,15 @@ h5 {
 .mfui-table__row:not(:last-child) .mfui-table__cell {
   border-bottom: 1px solid var(--spbSky2);
 }
+.mfui-table__row_align_bottom .mfui-table__cell {
+  vertical-align: bottom;
+}
+.mfui-table__row_align_top .mfui-table__cell {
+  vertical-align: top;
+}
+.mfui-table__row_align_top.mfui-table__row_head .mfui-table__cell {
+  padding-top: 12px;
+}
 .mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child) {
   min-width: 72px;
 }

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

@@ -8,6 +8,8 @@ export interface ITable {
     fixColumn?: boolean;
     /** Минимальный размер ячеек */
     minCellSize?: 'small' | 'large';
+    /** Отключить ограничение по высоте при разрешении больше 1024px */
+    disableHeightLimit?: boolean;
     children: Array<React.ReactElement<ITableRow>>;
 }
 declare const Table: React.FC<ITable>;

package/dist/es/components/Table/Table.js

@@ -14,6 +14,8 @@ var Table = function Table(_ref) {
       fixColumn = _ref$fixColumn === void 0 ? true : _ref$fixColumn,
       _ref$minCellSize = _ref.minCellSize,
       minCellSize = _ref$minCellSize === void 0 ? 'large' : _ref$minCellSize,
+      _ref$disableHeightLim = _ref.disableHeightLimit,
+      disableHeightLimit = _ref$disableHeightLim === void 0 ? false : _ref$disableHeightLim,
       children = _ref.children;
   var scrollRef = React.useRef(null);
 
@@ -75,17 +77,23 @@ var Table = function Table(_ref) {
   }, []);
 
   var renderRows = function renderRows() {
-    return React.Children.map(children, function (_ref2) {
+    return React.Children.map(children, function (_ref2, index) {
       var _ref2$props = _ref2.props,
           cells = _ref2$props.children,
-          head = _ref2$props.head;
+          head = _ref2$props.head,
+          _ref2$props$vAlign = _ref2$props.vAlign,
+          vAlign = _ref2$props$vAlign === void 0 ? 'default' : _ref2$props$vAlign;
       return /*#__PURE__*/React.createElement("tr", {
+        key: index,
         className: cn('row', {
-          head: head
-        })
-      }, React.Children.map(cells, function (_ref3) {
+          head: head,
+          align: vAlign
+        }),
+        "data-testid": "Table-row"
+      }, React.Children.map(cells, function (_ref3, cellIndex) {
         var cell = _ref3.props.children;
         return /*#__PURE__*/React.createElement("td", {
+          key: cellIndex,
           className: cn('cell')
         }, typeof cell === 'string' ? convert(cell) : cell);
       }));
@@ -99,7 +107,9 @@ var Table = function Table(_ref) {
       touch: isTouchDevice
     }, [className])
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('scroll'),
+    className: cn('scroll', {
+      limit: !disableHeightLimit
+    }),
     ref: scrollRef,
     onScroll: handleTableScroll
   }, isTopShadow && /*#__PURE__*/React.createElement("div", {
@@ -119,6 +129,7 @@ Table.propTypes = {
   className: PropTypes.string,
   fixColumn: PropTypes.bool,
   minCellSize: PropTypes.oneOf(['small', 'large']),
+  disableHeightLimit: PropTypes.bool,
   children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
 };
 export default Table;

package/dist/es/components/Table/TableRow.d.ts

@@ -3,6 +3,8 @@ import { ITableCell } from './TableCell';
 export interface ITableRow {
     /** Ряд таблицы как заголовок */
     head?: boolean;
+    /** Выравнивание по вертикали в ячейках таблицы */
+    vAlign?: 'default' | 'bottom' | 'top';
     children: Array<React.ReactElement<ITableCell>>;
 }
 declare const TableRow: React.FC<ITableRow>;

package/dist/es/components/Table/TableRow.js

@@ -9,6 +9,8 @@ var TableRow = function TableRow(_ref) {
 TableRow.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
   head: PropTypes.bool,
+  // eslint-disable-next-line react/no-unused-prop-types
+  vAlign: PropTypes.oneOf(['default', 'bottom', 'top']),
   children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
 };
 export default TableRow;

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

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.object.values.js");
@@ -29,6 +29,8 @@ var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime
 
 var _BenefitsIconsTile = _interopRequireDefault(require("./BenefitsIconsTile"));
 
+var _helpers = _interopRequireWildcard(require("./helpers"));
+
 var _types = require("./types");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,117 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var getLeftSideConfig = function getLeftSideConfig(count, index) {
-  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
-  var columnSize = {
-    wide: '4',
-    desktop: '5',
-    tablet: '10'
-  };
-
-  switch (count) {
-    case 2:
-    case 4:
-      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-        leftOffsetWide: everySecondWithoutOffset,
-        leftOffsetDesktop: everySecondWithoutOffset
-      });
-
-    default:
-      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-        leftOffsetDesktop: everySecondWithoutOffset
-      });
-  }
-}; // left-aligned column with left-aligned icon on top
-
-
-var getLeftTopConfig = function getLeftTopConfig(count, index) {
-  var everySecondWithoutOffset = index % 2 ? '1' : undefined;
-  var everyThirdWithoutOffset = index % 3 ? '1' : undefined;
-
-  switch (count) {
-    case 2:
-      return {
-        wide: '4',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetWide: everySecondWithoutOffset,
-        leftOffsetDesktop: everySecondWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-
-    case 4:
-      return {
-        wide: '3',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetDesktop: everySecondWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-
-    default:
-      return {
-        wide: '3',
-        desktop: '4',
-        tablet: '5',
-        leftOffsetWide: everyThirdWithoutOffset,
-        leftOffsetTablet: everySecondWithoutOffset
-      };
-  }
-}; // center-aligned column with center-aligned icon on top
-
-
-var getCenterTopConfig = function getCenterTopConfig(count, index) {
-  var isEvenIndex = !(index % 2);
-  var everyEvenWithLeftOffset = isEvenIndex ? '1' : undefined;
-  var everyOddWithRightOffset = isEvenIndex ? undefined : '1';
-
-  switch (count) {
-    case 4:
-      return {
-        wide: '3',
-        desktop: '5',
-        tablet: '5',
-        leftOffsetDesktop: everyEvenWithLeftOffset,
-        leftOffsetTablet: everyEvenWithLeftOffset,
-        rightOffsetTablet: everyOddWithRightOffset,
-        rightOffsetDesktop: everyOddWithRightOffset
-      };
-
-    default:
-      return {
-        wide: '4',
-        desktop: '4',
-        tablet: '4'
-      };
-  }
-};
-
-var getOneColumnConfig = function getOneColumnConfig(iconPosition) {
-  return iconPosition !== _types.IconPositionEnum.CENTER_TOP ? {
-    wide: '10',
-    desktop: '10',
-    tablet: '10'
-  } : {
-    wide: '12',
-    desktop: '12',
-    tablet: '12'
-  };
-};
-
-var getMultiColumnConfig = function getMultiColumnConfig(iconPosition, count, index) {
-  switch (iconPosition) {
-    case _types.IconPositionEnum.LEFT_TOP:
-      return getLeftTopConfig(count, index);
-
-    case _types.IconPositionEnum.CENTER_TOP:
-      return getCenterTopConfig(count, index);
-
-    default:
-      return getLeftSideConfig(count, index);
-  }
-};
-
+var testIdPrefix = 'BenefitsIcons';
 var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-icons');
 
 var BenefitsIcons = function BenefitsIcons(_ref) {
@@ -202,15 +94,28 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
   }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
     className: classes.grid,
     guttersLeft: "medium",
-    hAlign: itemsAlign
+    hAlign: itemsAlign,
+    dataAttrs: {
+      root: {
+        'data-testid': "".concat(testIdPrefix, "-grid-root")
+      },
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
   }, items.map(function (_ref2, i) {
     var title = _ref2.title,
         text = _ref2.text,
         icon = _ref2.icon;
-    var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
+    var columnConfig = inOneColumn ? (0, _helpers.getOneColumnConfig)(iconPosition) : (0, _helpers["default"])(iconPosition, items.length, i);
     return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({
       className: classes.gridColumn,
-      key: i
+      key: i,
+      dataAttrs: {
+        root: {
+          'data-testid': "".concat(testIdPrefix, "-grid-column")
+        }
+      }
     }, columnConfig), /*#__PURE__*/React.createElement(_BenefitsIconsTile["default"], {
       className: cn('tile', [classes.item]),
       title: title,

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

@@ -25,6 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 testIdPrefix = 'BenefitsIconsTile';
 var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-icons-tile');
 
 var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
@@ -37,7 +38,8 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cn({
       'icon-position': iconPosition
-    }, [className])
+    }, [className]),
+    "data-testid": "".concat(testIdPrefix, "-root")
   }, /*#__PURE__*/React.createElement("div", {
     className: cn('svg-icon')
   }, icon), /*#__PURE__*/React.createElement("div", {

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

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

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

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

package/dist/lib/components/Property/Property.js

@@ -122,7 +122,7 @@ var Property = function Property(_ref) {
       "data-testid": "".concat(testIdPrefix, "-value")
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: cn('value')
-    }, (0, _uiHelpers.convert)(value, {})), valueUnit && /*#__PURE__*/_react["default"].createElement(_uiCore.Caption, {
+    }, typeof value === 'string' ? (0, _uiHelpers.convert)(value, {}) : value), valueUnit && /*#__PURE__*/_react["default"].createElement(_uiCore.Caption, {
       className: cn('value-unit'),
       hasMargin: false
     }, (0, _uiHelpers.convert)(valueUnit, {})));
@@ -181,7 +181,7 @@ Property.propTypes = {
       value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
       isCollapsible: _propTypes["default"].bool
     })),
-    value: _propTypes["default"].string,
+    value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
     titleSize: _propTypes["default"].oneOf(['default', 'big']),
     valueUnit: _propTypes["default"].string,
     valueFrameColor: _propTypes["default"].oneOf(['none', 'default', 'gray'])

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

@@ -14,7 +14,7 @@ export declare type Item = {
     title?: string[] | React.ReactNode[];
     titleSize?: 'default' | 'big';
     description?: Desc[];
-    value?: string;
+    value?: string | React.ReactNode;
     valueUnit?: string;
     valueFrameColor?: 'none' | 'default' | 'gray';
 };

package/dist/lib/components/Table/Table.css

@@ -40,7 +40,7 @@ h5 {
   overflow: auto;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-table__scroll {
+  .mfui-table__scroll_limit {
     max-height: 500px;
   }
 }
@@ -131,6 +131,15 @@ h5 {
 .mfui-table__row:not(:last-child) .mfui-table__cell {
   border-bottom: 1px solid var(--spbSky2);
 }
+.mfui-table__row_align_bottom .mfui-table__cell {
+  vertical-align: bottom;
+}
+.mfui-table__row_align_top .mfui-table__cell {
+  vertical-align: top;
+}
+.mfui-table__row_align_top.mfui-table__row_head .mfui-table__cell {
+  padding-top: 12px;
+}
 .mfui-table_min-cell-size_small .mfui-table__cell:not(:first-child) {
   min-width: 72px;
 }

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

@@ -8,6 +8,8 @@ export interface ITable {
     fixColumn?: boolean;
     /** Минимальный размер ячеек */
     minCellSize?: 'small' | 'large';
+    /** Отключить ограничение по высоте при разрешении больше 1024px */
+    disableHeightLimit?: boolean;
     children: Array<React.ReactElement<ITableRow>>;
 }
 declare const Table: React.FC<ITable>;

package/dist/lib/components/Table/Table.js

@@ -35,6 +35,8 @@ var Table = function Table(_ref) {
       fixColumn = _ref$fixColumn === void 0 ? true : _ref$fixColumn,
       _ref$minCellSize = _ref.minCellSize,
       minCellSize = _ref$minCellSize === void 0 ? 'large' : _ref$minCellSize,
+      _ref$disableHeightLim = _ref.disableHeightLimit,
+      disableHeightLimit = _ref$disableHeightLim === void 0 ? false : _ref$disableHeightLim,
       children = _ref.children;
   var scrollRef = React.useRef(null);
 
@@ -96,17 +98,23 @@ var Table = function Table(_ref) {
   }, []);
 
   var renderRows = function renderRows() {
-    return React.Children.map(children, function (_ref2) {
+    return React.Children.map(children, function (_ref2, index) {
       var _ref2$props = _ref2.props,
           cells = _ref2$props.children,
-          head = _ref2$props.head;
+          head = _ref2$props.head,
+          _ref2$props$vAlign = _ref2$props.vAlign,
+          vAlign = _ref2$props$vAlign === void 0 ? 'default' : _ref2$props$vAlign;
       return /*#__PURE__*/React.createElement("tr", {
+        key: index,
         className: cn('row', {
-          head: head
-        })
-      }, React.Children.map(cells, function (_ref3) {
+          head: head,
+          align: vAlign
+        }),
+        "data-testid": "Table-row"
+      }, React.Children.map(cells, function (_ref3, cellIndex) {
         var cell = _ref3.props.children;
         return /*#__PURE__*/React.createElement("td", {
+          key: cellIndex,
           className: cn('cell')
         }, typeof cell === 'string' ? (0, _htmr["default"])(cell) : cell);
       }));
@@ -120,7 +128,9 @@ var Table = function Table(_ref) {
       touch: isTouchDevice
     }, [className])
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn('scroll'),
+    className: cn('scroll', {
+      limit: !disableHeightLimit
+    }),
     ref: scrollRef,
     onScroll: handleTableScroll
   }, isTopShadow && /*#__PURE__*/React.createElement("div", {
@@ -140,6 +150,7 @@ Table.propTypes = {
   className: PropTypes.string,
   fixColumn: PropTypes.bool,
   minCellSize: PropTypes.oneOf(['small', 'large']),
+  disableHeightLimit: PropTypes.bool,
   children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
 };
 var _default = Table;

package/dist/lib/components/Table/TableRow.d.ts

@@ -3,6 +3,8 @@ import { ITableCell } from './TableCell';
 export interface ITableRow {
     /** Ряд таблицы как заголовок */
     head?: boolean;
+    /** Выравнивание по вертикали в ячейках таблицы */
+    vAlign?: 'default' | 'bottom' | 'top';
     children: Array<React.ReactElement<ITableCell>>;
 }
 declare const TableRow: React.FC<ITableRow>;

package/dist/lib/components/Table/TableRow.js

@@ -23,6 +23,8 @@ var TableRow = function TableRow(_ref) {
 TableRow.propTypes = {
   // eslint-disable-next-line react/no-unused-prop-types
   head: PropTypes.bool,
+  // eslint-disable-next-line react/no-unused-prop-types
+  vAlign: PropTypes.oneOf(['default', 'bottom', 'top']),
   children: PropTypes.arrayOf(PropTypes.element.isRequired).isRequired
 };
 var _default = TableRow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "files": [
     "dist"
   ],
@@ -90,5 +90,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "67d1595c72454846b31ebcd4acc8f7550a5f0df3"
+  "gitHead": "03a9bcbea7cad951a3c18033c77696c25427c15e"
 }