@megafon/ui-shared 4.20.6 → 4.21.1

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

@@ -1,9 +1,11 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.testIdPrefix = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -13,7 +15,7 @@ require("core-js/modules/es.symbol.js");
 
 require("core-js/modules/es.symbol.description.js");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _uiCore = require("@megafon/ui-core");
 
@@ -25,8 +27,22 @@ var _getColumnConfig = require("../../helpers/getColumnConfig");
 
 var _PropertyDescription = _interopRequireDefault(require("./PropertyDescription"));
 
+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; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var InfoIcon = function InfoIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M10 2c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm0 5c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1zm1 8V9H9v6h2z"
+  }));
+};
+
+var testIdPrefix = 'Property';
+exports.testIdPrefix = testIdPrefix;
 var cn = (0, _uiHelpers.cnCreate)('mfui-property');
 
 var Property = function Property(_ref) {
@@ -35,11 +51,16 @@ var Property = function Property(_ref) {
       className = _ref.className,
       _ref$badge = _ref.badge,
       badge = _ref$badge === void 0 ? '' : _ref$badge,
+      _ref$badgeType = _ref.badgeType,
+      badgeType = _ref$badgeType === void 0 ? 'popular' : _ref$badgeType,
+      tooltip = _ref.tooltip,
       icon = _ref.icon,
       _ref$disableBorderTop = _ref.disableBorderTop,
       disableBorderTop = _ref$disableBorderTop === void 0 ? false : _ref$disableBorderTop,
       _ref$borderBottom = _ref.borderBottom,
       borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
+      _ref$borderColor = _ref.borderColor,
+      borderColor = _ref$borderColor === void 0 ? 'default' : _ref$borderColor,
       _ref$mergedValue = _ref.mergedValue,
       mergedValue = _ref$mergedValue === void 0 ? '' : _ref$mergedValue,
       _ref$fullWidth = _ref.fullWidth,
@@ -47,25 +68,37 @@ var Property = function Property(_ref) {
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
       dataAttrs = _ref.dataAttrs;
+  var tooltipRef = (0, _react.useRef)(null);
 
-  var renderTitle = _react["default"].useCallback(function (title) {
+  var renderTitle = function renderTitle(title, titleSize, isFirstItem) {
     return title && title.map(function (titleItem, i) {
-      return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
-        as: "h5",
+      var isFirstTitle = i === 0;
+      return /*#__PURE__*/_react["default"].createElement("div", {
         key: i,
-        className: classes.title
-      }, icon && i === 0 && /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('title-item', {
+          size: titleSize
+        }, [classes.title]),
+        "data-testid": "".concat(testIdPrefix, "-title-item")
+      }, icon && isFirstTitle && /*#__PURE__*/_react["default"].createElement("div", {
         className: cn('icon')
-      }, icon), titleItem);
+      }, icon), titleItem, tooltip && isFirstItem && isFirstTitle && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: cn('tooltip'),
+        ref: tooltipRef
+      }, /*#__PURE__*/_react["default"].createElement(InfoIcon, null)), /*#__PURE__*/_react["default"].createElement(_uiCore.Tooltip, {
+        className: cn('tooltip-inner'),
+        triggerElement: tooltipRef
+      }, tooltip)));
     });
-  }, [classes.title, icon]);
+  };
 
-  var renderDescription = _react["default"].useCallback(function (description) {
+  var renderDescription = function renderDescription(description) {
     return description && description.map(function (_ref2, j) {
       var value = _ref2.value,
           isCollapsible = _ref2.isCollapsible;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: cn('desc'),
+        className: cn('desc', {
+          collapsible: isCollapsible
+        }),
         key: j
       }, /*#__PURE__*/_react["default"].createElement(_PropertyDescription["default"], {
         value: value,
@@ -79,45 +112,63 @@ var Property = function Property(_ref) {
         }
       }));
     });
-  }, [classes.openedDescription, classes.toggleDescription, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink]);
+  };
+
+  var renderValue = function renderValue(valueFrameColor, value, valueUnit) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('value-wrapper', {
+        frame: valueFrameColor
+      }),
+      "data-testid": "".concat(testIdPrefix, "-value")
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('value')
+    }, (0, _uiHelpers.convert)(value, {})), valueUnit && /*#__PURE__*/_react["default"].createElement(_uiCore.Caption, {
+      className: cn('value-unit'),
+      hasMargin: false
+    }, (0, _uiHelpers.convert)(valueUnit, {})));
+  };
 
   return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
     className: cn({
       'border-top': !disableBorderTop,
-      'border-bottom': borderBottom
+      'border-bottom': borderBottom,
+      'border-color': borderColor
     }, [className]),
     ref: rootRef
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, null, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, (0, _getColumnConfig.getColumnConfig)(fullWidth), /*#__PURE__*/_react["default"].createElement("div", {
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, null, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, (0, _getColumnConfig.getColumnConfig)(fullWidth), {
+    dataAttrs: {
+      root: {
+        'data-testid': "".concat(testIdPrefix, "-gridColumn")
+      }
+    }
+  }), /*#__PURE__*/_react["default"].createElement("div", {
     className: cn('wrapper')
-  }, badge && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('badge-wrapper')
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: cn('badge')
-  }, badge)), /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('content')
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('items-wrapper')
   }, items.map(function (_ref3, i) {
     var title = _ref3.title,
         value = _ref3.value,
-        description = _ref3.description;
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: cn('item'),
+        description = _ref3.description,
+        _ref3$valueUnit = _ref3.valueUnit,
+        valueUnit = _ref3$valueUnit === void 0 ? '' : _ref3$valueUnit,
+        _ref3$titleSize = _ref3.titleSize,
+        titleSize = _ref3$titleSize === void 0 ? 'default' : _ref3$titleSize,
+        _ref3$valueFrameColor = _ref3.valueFrameColor,
+        valueFrameColor = _ref3$valueFrameColor === void 0 ? 'default' : _ref3$valueFrameColor;
+    var isFirstItem = i === 0;
+    var isRenderBadge = isFirstItem && !!badge;
+    return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
       key: i
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: cn('inner')
-    }, renderTitle(title), renderDescription(description)), !mergedValue && /*#__PURE__*/_react["default"].createElement("div", {
-      className: cn('value-wrapper')
-    }, value && /*#__PURE__*/_react["default"].createElement("span", {
-      className: cn('value')
-    }, value)));
-  })), mergedValue && /*#__PURE__*/_react["default"].createElement("div", {
-    className: cn('value-wrapper', {
-      merged: true
-    })
-  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
-    as: "h3"
-  }, mergedValue)))))));
+      className: cn('main', {
+        'with-badge': isRenderBadge,
+        'with-out-title': !title
+      })
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('title')
+    }, isRenderBadge && /*#__PURE__*/_react["default"].createElement(_uiCore.PromoBadge, {
+      className: cn('badge'),
+      type: badgeType
+    }, badge), title ? renderTitle(title, titleSize, isFirstItem) : renderDescription(description)), mergedValue && isFirstItem && renderValue(valueFrameColor, mergedValue, valueUnit), !mergedValue && value && renderValue(valueFrameColor, value, valueUnit)), title && renderDescription(description));
+  })))));
 };
 
 Property.propTypes = {
@@ -130,12 +181,18 @@ 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"].string,
+    titleSize: _propTypes["default"].oneOf(['default', 'big']),
+    valueUnit: _propTypes["default"].string,
+    valueFrameColor: _propTypes["default"].oneOf(['default', 'gray'])
   }).isRequired).isRequired,
   className: _propTypes["default"].string,
   badge: _propTypes["default"].string,
+  badgeType: _propTypes["default"].oneOf(['hit', 'new', 'vip', 'popular', 'user-choice', 'interests']),
+  tooltip: _propTypes["default"].string,
   disableBorderTop: _propTypes["default"].bool,
   borderBottom: _propTypes["default"].bool,
+  borderColor: _propTypes["default"].oneOf(['default', 'darker']),
   mergedValue: _propTypes["default"].string,
   icon: _propTypes["default"].node,
   fullWidth: _propTypes["default"].bool,

package/dist/lib/components/Property/PropertyDescription.css

@@ -13,5 +13,5 @@ h5 {
   cursor: pointer;
 }
 .mfui-property-description__content-inner {
-  margin-top: 8px;
+  margin-bottom: 8px;
 }

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import './PropertyDescription.less';
 import { Desc } from './types';
+export declare const testIdPrefix = "PropertyDescription";
 declare const PropertyDescription: React.FC<Desc>;
 export default PropertyDescription;

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.testIdPrefix = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -28,6 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
+var testIdPrefix = 'PropertyDescription';
+exports.testIdPrefix = testIdPrefix;
 var cn = (0, _uiHelpers.cnCreate)('mfui-property-description');
 
 var PropertyDescription = function PropertyDescription(_ref) {
@@ -49,16 +51,17 @@ var PropertyDescription = function PropertyDescription(_ref) {
 
   if (isCollapsible) {
     return /*#__PURE__*/React.createElement("div", {
-      className: cn([isOpened ? classes.open : undefined])
-    }, /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
-      onClick: handleClickDesc
-    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
-      className: cn('collapse', classes.toggle)
-    }), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(_uiCore.Collapse, {
+      className: cn([isOpened ? classes.open : undefined]),
+      "data-testid": "".concat(testIdPrefix, "-collapsible")
+    }, /*#__PURE__*/React.createElement(_uiCore.Collapse, {
       className: cn('content'),
       classNameContainer: cn('content-inner'),
       isOpened: isOpened
-    }, value));
+    }, value), /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
+      onClick: handleClickDesc
+    }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
+      className: cn('collapse', classes.toggle)
+    }), isOpened ? 'Скрыть' : 'Подробнее'));
   }
 
   return /*#__PURE__*/React.createElement("div", {

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "4.20.6",
+  "version": "4.21.1",
   "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.13.0",
+    "@megafon/ui-icons": "^2.14.0",
     "@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.1.1",
-    "@megafon/ui-helpers": "^2.5.1",
+    "@megafon/ui-core": "^5.2.0",
+    "@megafon/ui-helpers": "^2.5.2",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "9d1e595eebdde3e8652d07511c1bf3057d61a8f3"
+  "gitHead": "dcc83f03d9aa2088d55b98deecafe819051cda0d"
 }