@megafon/ui-shared 5.0.1 → 5.1.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* **benefitpictures:** rename helpers ([282fcfe](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/282fcfec6f6fc8f0bec325c52f7ec5ada955e4ff))
+* **dulpfile:** fix ignore rule ([525138b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/525138bafeaa3836fa37997691da544419efd7fa))
+
+
+### Features
+
+* **card:** add minor features ([e80582c](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/e80582c863f7baeaf17effe7566531f2f9a2c695))
+
+
+
+
+
 ## [5.0.1](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-shared@5.0.0...@megafon/ui-shared@5.0.1) (2023-08-31)
 
 

package/dist/es/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/es/components/BenefitsPictures/BenefitsPictures.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 * as React from 'react';
 import { useCallback } from 'react';
@@ -9,106 +9,10 @@ import convert from 'htmr';
 import throttle from 'lodash.throttle';
 import PropTypes from 'prop-types';
 import throttleTime from "../../constants/throttleTime";
+import getCenterConfig, { getLeftConfig } from "./helpers";
 import "./BenfitsPictures.css";
-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 _extends(_extends({}, columnSize), {
-        leftOffsetWide: getEvenOffset(index),
-        leftOffsetDesktop: getEvenOffset(index),
-        leftOffsetTablet: getEvenOffset(index)
-      });
-
-    default:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetTablet: getEvenOffset(index)
-      });
-  }
-};
-
-var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
-  switch (count) {
-    case 3:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetTablet: getOddOffset(index)
-      });
-
-    case 4:
-      return _extends(_extends({}, columnSize), {
-        rightOffsetWide: getOddOffset(index),
-        leftOffsetWide: getEvenOffset(index),
-        rightOffsetDesktop: getEvenOffset(index),
-        leftOffsetDesktop: getOddOffset(index),
-        rightOffsetTablet: getEvenOffset(index),
-        leftOffsetTablet: getOddOffset(index)
-      });
-
-    default:
-      return _extends(_extends({}, columnSize), {
-        rightOffsetWide: getOddOffset(index),
-        leftOffsetWide: getEvenOffset(index)
-      });
-  }
-};
-
-var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
-  switch (count) {
-    case 4:
-      return _extends(_extends({}, columnSize), {
-        leftOffsetWide: getOddOffset(index),
-        rightOffsetWide: getEvenOffset(index),
-        leftOffsetDesktop: getOddOffset(index),
-        rightOffsetDesktop: getEvenOffset(index),
-        leftOffsetTablet: getOddOffset(index),
-        rightOffsetTablet: getEvenOffset(index)
-      });
-
-    case 3:
-      {
-        return _extends(_extends({}, columnSize), {
-          leftOffsetTablet: getOddOffset(index)
-        });
-      }
-
-    default:
-      return _extends({}, columnSize);
-  }
-};
-
-var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
-  switch (gutterSize) {
-    case 'medium':
-      {
-        return getCenterMediumConfig(count, index);
-      }
-
-    default:
-      {
-        return getCenterLargeConfig(count, index);
-      }
-  }
-};
-
+export var ONLY_LEFT_ALIGN_ITEMS_COUNT = 3;
+var testIdPrefix = 'BenefitsPictures';
 var cn = cnCreate('mfui-benefits-pictures');
 
 var BenefitsPictures = function BenefitsPictures(_ref) {
@@ -153,7 +57,12 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     ref: rootRef
   }, /*#__PURE__*/React.createElement(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,
@@ -162,7 +71,8 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
     return /*#__PURE__*/React.createElement(GridColumn, _extends({}, align === 'left' ? getLeftConfig(items.length, index) : getCenterConfig(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/es/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, };

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

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/extends";
+var columnSize = {
+  wide: '4',
+  desktop: '4',
+  tablet: '5'
+};
+
+var isOddIndex = function isOddIndex(index) {
+  return !((index + 1) % 2);
+};
+
+var getEvenOffset = function getEvenOffset(index) {
+  return isOddIndex(index) ? '1' : undefined;
+};
+
+var getOddOffset = function getOddOffset(index) {
+  return isOddIndex(index) ? undefined : '1';
+};
+
+var getLeftConfig = function getLeftConfig(count, index) {
+  switch (count) {
+    case 2:
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: getEvenOffset(index),
+        leftOffsetDesktop: getEvenOffset(index),
+        leftOffsetTablet: getEvenOffset(index)
+      });
+
+    default:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getEvenOffset(index)
+      });
+  }
+};
+
+var getCenterMediumConfig = function getCenterMediumConfig(count, index) {
+  switch (count) {
+    case 3:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getOddOffset(index)
+      });
+
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        rightOffsetWide: getOddOffset(index),
+        leftOffsetWide: getEvenOffset(index),
+        rightOffsetDesktop: getEvenOffset(index),
+        leftOffsetDesktop: getOddOffset(index),
+        rightOffsetTablet: getEvenOffset(index),
+        leftOffsetTablet: getOddOffset(index)
+      });
+
+    default:
+      return _extends(_extends({}, columnSize), {
+        rightOffsetWide: getOddOffset(index),
+        leftOffsetWide: getEvenOffset(index)
+      });
+  }
+};
+
+var getCenterLargeConfig = function getCenterLargeConfig(count, index) {
+  switch (count) {
+    case 4:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetWide: getOddOffset(index),
+        rightOffsetWide: getEvenOffset(index),
+        leftOffsetDesktop: getOddOffset(index),
+        rightOffsetDesktop: getEvenOffset(index),
+        leftOffsetTablet: getOddOffset(index),
+        rightOffsetTablet: getEvenOffset(index)
+      });
+
+    case 3:
+      return _extends(_extends({}, columnSize), {
+        leftOffsetTablet: getOddOffset(index)
+      });
+
+    default:
+      return _extends({}, columnSize);
+  }
+};
+
+var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
+  switch (gutterSize) {
+    case 'medium':
+      {
+        return getCenterMediumConfig(count, index);
+      }
+
+    default:
+      {
+        return getCenterLargeConfig(count, index);
+      }
+  }
+};
+
+export default getCenterConfig;
+export { columnSize, isOddIndex, getEvenOffset, getOddOffset, getLeftConfig, getCenterMediumConfig, getCenterLargeConfig };

package/dist/es/components/Card/Card.css

@@ -20,8 +20,12 @@ h5 {
   padding: 16px 16px 24px;
   border-radius: 12px;
   color: var(--content);
-  text-decoration: none;
+  text-decoration: none !important;
   background-color: var(--base);
+  -webkit-transition: background-color 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color 0.3s, box-shadow, 0.3s;
+  transition: background-color 0.3s, box-shadow, 0.3s, -webkit-box-shadow;
 }
 @media screen and (min-width: 1280px) {
   .mfui-card {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import './Card.less';
 import { ButtonType, FeaturesList, IconsList, Image, Link, Price, TextsList, Title } from './types';
 export interface ICard {
@@ -12,6 +12,14 @@ export interface ICard {
     };
     /** Дополнительный класс для компонента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement | HTMLAnchorElement>;
     isFullHeight?: boolean;
     /** Вид */
     view?: 'shadow' | 'background';

package/dist/es/components/Card/Card.js

@@ -37,6 +37,8 @@ var cn = cnCreate('mfui-card');
 var Card = function Card(_ref5) {
   var dataAttrs = _ref5.dataAttrs,
       className = _ref5.className,
+      classes = _ref5.classes,
+      rootRef = _ref5.rootRef,
       _ref5$isFullHeight = _ref5.isFullHeight,
       isFullHeight = _ref5$isFullHeight === void 0 ? false : _ref5$isFullHeight,
       link = _ref5.link,
@@ -169,7 +171,7 @@ var Card = function Card(_ref5) {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
       },
-      className: cn('button'),
+      className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
       href: button.href,
       target: button.target,
       onClick: button === null || button === void 0 ? void 0 : button.onClick
@@ -177,7 +179,7 @@ var Card = function Card(_ref5) {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
       },
-      className: cn('button'),
+      className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.extraButton]),
       href: extraButton.href,
       target: extraButton.target,
       type: "outline",
@@ -201,10 +203,11 @@ var Card = function Card(_ref5) {
       view: view,
       link: isLink,
       'full-height': isFullHeight
-    }, [className]),
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
     href: isLink ? link === null || link === void 0 ? void 0 : link.href : undefined,
     target: isLink ? link === null || link === void 0 ? void 0 : link.target : undefined,
-    onClick: isLink ? onClick : undefined
+    onClick: isLink ? onClick : undefined,
+    ref: rootRef
   }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/React.createElement(Header, {
     className: cn('title'),
     as: "h3",
@@ -221,6 +224,14 @@ Card.propTypes = {
     extraButton: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    extraButton: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   view: PropTypes.oneOf(['shadow', 'background']),
   link: PropTypes.shape({
     href: PropTypes.string,

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/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, };

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

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCenterLargeConfig = exports.getCenterMediumConfig = exports.getLeftConfig = exports.getOddOffset = exports.getEvenOffset = exports.isOddIndex = exports.columnSize = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var columnSize = {
+  wide: '4',
+  desktop: '4',
+  tablet: '5'
+};
+exports.columnSize = columnSize;
+
+var isOddIndex = function isOddIndex(index) {
+  return !((index + 1) % 2);
+};
+
+exports.isOddIndex = isOddIndex;
+
+var getEvenOffset = function getEvenOffset(index) {
+  return isOddIndex(index) ? '1' : undefined;
+};
+
+exports.getEvenOffset = getEvenOffset;
+
+var getOddOffset = function getOddOffset(index) {
+  return isOddIndex(index) ? undefined : '1';
+};
+
+exports.getOddOffset = getOddOffset;
+
+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)
+      });
+  }
+};
+
+exports.getLeftConfig = getLeftConfig;
+
+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)
+      });
+  }
+};
+
+exports.getCenterMediumConfig = getCenterMediumConfig;
+
+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);
+  }
+};
+
+exports.getCenterLargeConfig = getCenterLargeConfig;
+
+var getCenterConfig = function getCenterConfig(count, index, gutterSize) {
+  switch (gutterSize) {
+    case 'medium':
+      {
+        return getCenterMediumConfig(count, index);
+      }
+
+    default:
+      {
+        return getCenterLargeConfig(count, index);
+      }
+  }
+};
+
+var _default = getCenterConfig;
+exports["default"] = _default;

package/dist/lib/components/Card/Card.css

@@ -20,8 +20,12 @@ h5 {
   padding: 16px 16px 24px;
   border-radius: 12px;
   color: var(--content);
-  text-decoration: none;
+  text-decoration: none !important;
   background-color: var(--base);
+  -webkit-transition: background-color 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color 0.3s, 0.3s, -webkit-box-shadow;
+  transition: background-color 0.3s, box-shadow, 0.3s;
+  transition: background-color 0.3s, box-shadow, 0.3s, -webkit-box-shadow;
 }
 @media screen and (min-width: 1280px) {
   .mfui-card {

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import './Card.less';
 import { ButtonType, FeaturesList, IconsList, Image, Link, Price, TextsList, Title } from './types';
 export interface ICard {
@@ -12,6 +12,14 @@ export interface ICard {
     };
     /** Дополнительный класс для компонента */
     className?: string;
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        extraButton?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement | HTMLAnchorElement>;
     isFullHeight?: boolean;
     /** Вид */
     view?: 'shadow' | 'background';

package/dist/lib/components/Card/Card.js

@@ -52,6 +52,8 @@ var cn = (0, _uiHelpers.cnCreate)('mfui-card');
 var Card = function Card(_ref5) {
   var dataAttrs = _ref5.dataAttrs,
       className = _ref5.className,
+      classes = _ref5.classes,
+      rootRef = _ref5.rootRef,
       _ref5$isFullHeight = _ref5.isFullHeight,
       isFullHeight = _ref5$isFullHeight === void 0 ? false : _ref5$isFullHeight,
       link = _ref5.link,
@@ -184,7 +186,7 @@ var Card = function Card(_ref5) {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
       },
-      className: cn('button'),
+      className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.button]),
       href: button.href,
       target: button.target,
       onClick: button === null || button === void 0 ? void 0 : button.onClick
@@ -192,7 +194,7 @@ var Card = function Card(_ref5) {
       dataAttrs: {
         root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
       },
-      className: cn('button'),
+      className: cn('button', [classes === null || classes === void 0 ? void 0 : classes.extraButton]),
       href: extraButton.href,
       target: extraButton.target,
       type: "outline",
@@ -216,10 +218,11 @@ var Card = function Card(_ref5) {
       view: view,
       link: isLink,
       'full-height': isFullHeight
-    }, [className]),
+    }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
     href: isLink ? link === null || link === void 0 ? void 0 : link.href : undefined,
     target: isLink ? link === null || link === void 0 ? void 0 : link.target : undefined,
-    onClick: isLink ? onClick : undefined
+    onClick: isLink ? onClick : undefined,
+    ref: rootRef
   }), renderIcon(), !isBottomImage && renderImage(), /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
     className: cn('title'),
     as: "h3",
@@ -236,6 +239,14 @@ Card.propTypes = {
     extraButton: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
   }),
   className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    button: _propTypes["default"].string,
+    extraButton: _propTypes["default"].string
+  }),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
   view: _propTypes["default"].oneOf(['shadow', 'background']),
   link: _propTypes["default"].shape({
     href: _propTypes["default"].string,

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

@@ -123,12 +123,6 @@ Object.defineProperty(exports, "FaqWrapper", {
     return _FaqWrapper["default"];
   }
 });
-Object.defineProperty(exports, "helpers", {
-  enumerable: true,
-  get: function get() {
-    return _helpers["default"];
-  }
-});
 Object.defineProperty(exports, "Instructions", {
   enumerable: true,
   get: function get() {
@@ -320,8 +314,6 @@ var _DownloadLinks = _interopRequireDefault(require("./components/DownloadLinks/
 
 var _FaqWrapper = _interopRequireDefault(require("./components/FaqWrapper/FaqWrapper"));
 
-var _helpers = _interopRequireDefault(require("./components/CardsBox/helpers"));
-
 var _Instructions = _interopRequireDefault(require("./components/Instructions/Instructions"));
 
 var _NotificationBox = _interopRequireDefault(require("./components/NotificationBox/NotificationBox"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "files": [
     "dist"
   ],
@@ -48,7 +48,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.14.0",
+    "@megafon/ui-icons": "^2.14.1",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -82,13 +82,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^5.2.1",
-    "@megafon/ui-helpers": "^2.5.2",
+    "@megafon/ui-core": "^5.2.2",
+    "@megafon/ui-helpers": "^2.5.3",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "c69a92daeb0568c343f3ca3b0dc4b2ca6de338d7"
+  "gitHead": "67d1595c72454846b31ebcd4acc8f7550a5f0df3"
 }