@megafon/ui-shared 5.0.1 → 5.2.0

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/es/index.d.ts

@@ -18,7 +18,6 @@ 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 FaqWrapper } from './components/FaqWrapper/FaqWrapper';
-export { default as helpers } from './components/CardsBox/helpers';
 export { default as Instructions } from './components/Instructions/Instructions';
 export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
 export { default as PageTitle } from './components/PageTitle/PageTitle';

package/dist/es/index.js

@@ -18,7 +18,6 @@ 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 FaqWrapper } from "./components/FaqWrapper/FaqWrapper";
-export { default as helpers } from "./components/CardsBox/helpers";
 export { default as Instructions } from "./components/Instructions/Instructions";
 export { default as NotificationBox } from "./components/NotificationBox/NotificationBox";
 export { default as PageTitle } from "./components/PageTitle/PageTitle";

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/BenefitsPictures/BenefitsPictures.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IBenefit, GridGutterSize } from './types';
 import './BenfitsPictures.less';
+export declare const ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
 export interface IBenefitsPicturesProps {
     /** Ссылка на корневой элемент */
     rootRef?: React.Ref<HTMLDivElement>;

package/dist/lib/components/BenefitsPictures/BenefitsPictures.js

@@ -5,12 +5,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports["default"] = exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 require("core-js/modules/es.array.map.js");
 
 var React = _interopRequireWildcard(require("react"));
@@ -27,6 +27,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
 
+var _helpers = _interopRequireWildcard(require("./helpers"));
+
 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); }
 
 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; }
@@ -34,104 +36,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
-var columnSize = {
-  wide: '4',
-  desktop: '4',
-  tablet: '5'
-};
-
-var isEvenIndex = function isEvenIndex(index) {
-  return !((index + 1) % 2);
-};
-
-var getEvenOffset = function getEvenOffset(index) {
-  return isEvenIndex(index) ? '1' : undefined;
-};
-
-var getOddOffset = function getOddOffset(index) {
-  return isEvenIndex(index) ? undefined : '1';
-};
-
-var getLeftConfig = function getLeftConfig(count, index) {
-  switch (count) {
-    case 2:
-    case 4:
-      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-        leftOffsetWide: getEvenOffset(index),
-        leftOffsetDesktop: getEvenOffset(index),
-        leftOffsetTablet: getEvenOffset(index)
-      });
-
-    default:
-      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-        leftOffsetTablet: getEvenOffset(index)
-      });
-  }
-};
-
-var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
-  switch (count) {
-    case 3:
-      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-        leftOffsetTablet: getOddOffset(index)
-      });
-
-    case 4:
-      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-        rightOffsetWide: getOddOffset(index),
-        leftOffsetWide: getEvenOffset(index),
-        rightOffsetDesktop: getEvenOffset(index),
-        leftOffsetDesktop: getOddOffset(index),
-        rightOffsetTablet: getEvenOffset(index),
-        leftOffsetTablet: getOddOffset(index)
-      });
-
-    default:
-      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-        rightOffsetWide: getOddOffset(index),
-        leftOffsetWide: getEvenOffset(index)
-      });
-  }
-};
-
-var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
-  switch (count) {
-    case 4:
-      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-        leftOffsetWide: getOddOffset(index),
-        rightOffsetWide: getEvenOffset(index),
-        leftOffsetDesktop: getOddOffset(index),
-        rightOffsetDesktop: getEvenOffset(index),
-        leftOffsetTablet: getOddOffset(index),
-        rightOffsetTablet: getEvenOffset(index)
-      });
-
-    case 3:
-      {
-        return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
-          leftOffsetTablet: getOddOffset(index)
-        });
-      }
-
-    default:
-      return (0, _extends2["default"])({}, columnSize);
-  }
-};
-
-var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
-  switch (gutterSize) {
-    case 'medium':
-      {
-        return getCenterMediumConfig(count, index);
-      }
-
-    default:
-      {
-        return getCenterLargeConfig(count, index);
-      }
-  }
-};
-
+exports.ONLY_LEFT_ALIGN_ITEMS_COUNT = ONLY_LEFT_ALIGN_ITEMS_COUNT;
+var testIdPrefix = 'BenefitsPictures';
 var cn = (0, _uiHelpers.cnCreate)('mfui-benefits-pictures');
 
 var BenefitsPictures = function BenefitsPictures(_ref) {
@@ -176,16 +82,22 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     ref: rootRef
   }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
     guttersLeft: currentGutter,
-    hAlign: isGridCenterAlign ? 'center' : 'left'
+    hAlign: isGridCenterAlign ? 'center' : 'left',
+    dataAttrs: {
+      container: {
+        'data-testid': "".concat(testIdPrefix, "-grid-container")
+      }
+    }
   }, items.map(function (_ref2, index) {
     var img = _ref2.img,
         title = _ref2.title,
         text = _ref2.text,
         alt = _ref2.alt;
-    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, align === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(items.length, index, gridGap), {
+    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, align === 'left' ? (0, _helpers.getLeftConfig)(items.length, index) : (0, _helpers["default"])(items.length, index, gridGap), {
       key: index
     }), /*#__PURE__*/React.createElement("div", {
-      className: cn('item', [classes.item])
+      className: cn('item', [classes.item]),
+      "data-testid": "".concat(testIdPrefix, "-item")
     }, /*#__PURE__*/React.createElement("img", {
       className: cn('img', {
         'h-align': align

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

@@ -0,0 +1,11 @@
+import { GridConfig } from './types';
+declare const columnSize: GridConfig;
+declare const isOddIndex: (index: number) => boolean;
+declare const getEvenOffset: (index: number) => "1" | undefined;
+declare const getOddOffset: (index: number) => "1" | undefined;
+declare const getLeftConfig: (count: number, index: number) => GridConfig;
+declare const getCenterMediumConfig: (count: number, index: number) => GridConfig;
+declare const getCenterLargeConfig: (count: number, index: number) => GridConfig;
+declare const getCenterConfig: (count: number, index: number, gutterSize: string) => GridConfig;
+export default getCenterConfig;
+export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig, };