@megafon/ui-shared 5.0.1 → 5.2.0

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/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/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.2.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": "03a9bcbea7cad951a3c18033c77696c25427c15e"
 }