@megafon/ui-shared 4.20.6 → 4.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/es/components/Property/Property.css +89 -60
  3. package/dist/es/components/Property/Property.d.ts +9 -1
  4. package/dist/es/components/Property/Property.js +94 -40
  5. package/dist/es/components/Property/PropertyDescription.css +1 -1
  6. package/dist/es/components/Property/PropertyDescription.d.ts +1 -0
  7. package/dist/es/components/Property/PropertyDescription.js +9 -7
  8. package/dist/es/components/Property/types.d.ts +3 -0
  9. package/dist/lib/components/Property/Property.css +89 -60
  10. package/dist/lib/components/Property/Property.d.ts +9 -1
  11. package/dist/lib/components/Property/Property.js +96 -39
  12. package/dist/lib/components/Property/PropertyDescription.css +1 -1
  13. package/dist/lib/components/Property/PropertyDescription.d.ts +1 -0
  14. package/dist/lib/components/Property/PropertyDescription.js +11 -8
  15. package/dist/lib/components/Property/types.d.ts +3 -0
  16. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [4.21.0](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-shared@4.20.5...@megafon/ui-shared@4.21.0) (2023-08-21)
7
+
8
+
9
+ ### Features
10
+
11
+ * **property:** redisign component, add new not required props ([f03a822](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/commit/f03a822006afed0dd20ad9c9971621c48e50655f))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [4.20.6](https://hq-gitlab.megafon.ru/site-portal/libraries/javascript/megafon-ui/compare/@megafon/ui-shared@4.20.5...@megafon/ui-shared@4.20.6) (2023-07-18)
7
18
 
8
19
  **Note:** Version bump only for package @megafon/ui-shared
package/dist/es/components/Property/Property.css CHANGED
@@ -15,98 +15,124 @@ h5 {
15
15
  flex-direction: column;
16
16
  padding: 24px 0;
17
17
  }
18
- @media screen and (min-width: 1280px) {
19
- .mfui-property__wrapper {
20
- padding: 26px 0;
21
- }
18
+ .mfui-property_border-top.mfui-property_border-color_default .mfui-property__wrapper {
19
+ border-top: 1px solid var(--spbSky1);
20
+ }
21
+ .mfui-property_border-bottom.mfui-property_border-color_default .mfui-property__wrapper {
22
+ border-bottom: 1px solid var(--spbSky1);
22
23
  }
23
- .mfui-property_border-top .mfui-property__wrapper {
24
+ .mfui-property_border-top.mfui-property_border-color_darker .mfui-property__wrapper {
24
25
  border-top: 1px solid var(--spbSky2);
25
26
  }
26
- .mfui-property_border-bottom .mfui-property__wrapper {
27
+ .mfui-property_border-bottom.mfui-property_border-color_darker .mfui-property__wrapper {
27
28
  border-bottom: 1px solid var(--spbSky2);
28
29
  }
29
- .mfui-property__content {
30
+ .mfui-property__main {
30
31
  display: -webkit-box;
31
32
  display: -ms-flexbox;
32
33
  display: flex;
34
+ gap: 20px;
35
+ -webkit-box-align: baseline;
36
+ -ms-flex-align: baseline;
37
+ align-items: baseline;
38
+ -webkit-box-pack: justify;
39
+ -ms-flex-pack: justify;
40
+ justify-content: space-between;
33
41
  }
34
- .mfui-property__item {
35
- display: -webkit-box;
36
- display: -ms-flexbox;
37
- display: flex;
42
+ .mfui-property__main:not(:first-child) {
43
+ margin-top: 24px;
44
+ }
45
+ .mfui-property__main_with-out-title {
46
+ margin-top: 16px !important;
47
+ }
48
+ .mfui-property__main_with-badge {
49
+ -webkit-box-align: center;
50
+ -ms-flex-align: center;
51
+ align-items: center;
52
+ }
53
+ .mfui-property__title-item_size_default {
54
+ font-size: 15px;
55
+ line-height: 24px;
56
+ font-weight: 500;
57
+ }
58
+ .mfui-property__title-item_size_big {
59
+ font-weight: 500;
60
+ font-size: 18px;
61
+ line-height: 24px;
62
+ letter-spacing: 0.5px;
63
+ }
64
+ @media screen and (min-width: 1280px) {
65
+ .mfui-property__title-item_size_big {
66
+ font-size: 20px;
67
+ line-height: 28px;
68
+ }
69
+ }
70
+ @media screen and (max-width: 767px) {
71
+ .mfui-property__title-item {
72
+ font-size: 15px;
73
+ line-height: 24px;
74
+ font-weight: 500;
75
+ }
38
76
  }
39
77
  .mfui-property__icon {
40
78
  display: inline-block;
41
79
  width: 24px;
42
80
  height: 24px;
43
- margin-right: 9px;
81
+ margin-right: 8px;
44
82
  margin-left: 1px;
45
83
  overflow: hidden;
46
84
  vertical-align: bottom;
47
85
  }
48
86
  .mfui-property__badge {
49
- padding: 2px 8px;
50
- border-radius: 2px;
51
- color: var(--stcWhite);
52
- font-size: 12px;
53
- background: var(--137C);
54
- }
55
- .mfui-property__inner {
56
- -webkit-box-flex: 1;
57
- -ms-flex-positive: 1;
58
- flex-grow: 1;
59
- padding-right: 20px;
60
- }
61
- @media screen and (min-width: 768px) and (max-width: 1023px) {
62
- .mfui-property__inner {
63
- padding-right: 77px;
87
+ margin-bottom: 8px;
88
+ }
89
+ @media screen and (min-width: 768px) {
90
+ .mfui-property__title .mfui-property__desc {
91
+ width: 100%;
64
92
  }
65
93
  }
66
- @media screen and (max-width: 767px) {
67
- .mfui-property__inner {
68
- padding-right: 8px;
94
+ .mfui-property__tooltip {
95
+ display: inline-block;
96
+ width: 20px;
97
+ height: 20px;
98
+ margin-left: 8px;
99
+ vertical-align: text-bottom;
100
+ cursor: pointer;
101
+ fill: var(--spbSky2);
102
+ }
103
+ .mfui-property__tooltip-inner {
104
+ max-width: 350px;
105
+ }
106
+ .mfui-property__desc {
107
+ margin-top: 12px;
108
+ }
109
+ @media screen and (min-width: 768px) {
110
+ .mfui-property__desc {
111
+ width: 70%;
69
112
  }
70
113
  }
71
- .mfui-property__items-wrapper {
72
- width: 100%;
114
+ .mfui-property__desc_collapsible {
115
+ margin-top: 12px;
73
116
  }
74
117
  .mfui-property__value-wrapper {
75
118
  display: -webkit-box;
76
119
  display: -ms-flexbox;
77
120
  display: flex;
78
- -ms-flex-negative: 0;
79
- flex-shrink: 0;
80
- -webkit-box-align: start;
81
- -ms-flex-align: start;
82
- align-items: flex-start;
83
- -webkit-box-pack: end;
84
- -ms-flex-pack: end;
85
- justify-content: flex-end;
86
- width: 35%;
87
- }
88
- @media screen and (max-width: 479px) {
89
- .mfui-property__value-wrapper {
90
- width: auto;
91
- padding-left: 10px;
92
- }
93
- }
94
- .mfui-property__value-wrapper_merged {
95
- -webkit-box-align: center;
96
- -ms-flex-align: center;
97
- align-items: center;
98
- border-left: 1px solid var(--spbSky2);
121
+ -webkit-box-align: baseline;
122
+ -ms-flex-align: baseline;
123
+ align-items: baseline;
124
+ padding: 4px 8px;
125
+ border-radius: 8px;
126
+ white-space: pre-line;
127
+ text-align: right;
99
128
  }
100
- .mfui-property__desc {
101
- margin-top: 8px;
129
+ .mfui-property__value-wrapper_frame_default {
130
+ background: var(--base);
102
131
  }
103
- .mfui-property__item + .mfui-property__item {
104
- margin-top: 16px;
132
+ .mfui-property__value-wrapper_frame_gray {
133
+ background: var(--spbSky0);
105
134
  }
106
135
  .mfui-property__value {
107
- max-width: 234px;
108
- white-space: pre-line;
109
- text-align: right;
110
136
  font-weight: 500;
111
137
  font-size: 18px;
112
138
  line-height: 24px;
@@ -125,3 +151,6 @@ h5 {
125
151
  font-weight: 500;
126
152
  }
127
153
  }
154
+ .mfui-property__value-unit:before {
155
+ content: '\00a0';
156
+ }
package/dist/es/components/Property/Property.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import React, { Ref } from 'react';
1
+ import React, { Ref, ComponentProps } from 'react';
2
+ import { PromoBadge } from '@megafon/ui-core';
2
3
  import './Property.less';
3
4
  import { Item } from './types';
4
5
  export interface IProperty {
@@ -10,10 +11,16 @@ export interface IProperty {
10
11
  className?: string;
11
12
  /** Текст для бейджа */
12
13
  badge?: string;
14
+ /** Тип бейджа */
15
+ badgeType?: ComponentProps<typeof PromoBadge>['type'];
16
+ /** Текст тултипа */
17
+ tooltip?: string;
13
18
  /** Отключить верхнюю границу */
14
19
  disableBorderTop?: boolean;
15
20
  /** Наличие нижней границы */
16
21
  borderBottom?: boolean;
22
+ /** Цвет верхней и нижней границ */
23
+ borderColor?: 'default' | 'darker';
17
24
  /** Единое значение для всей строки */
18
25
  mergedValue?: string;
19
26
  /** Иконка для строки */
@@ -32,5 +39,6 @@ export interface IProperty {
32
39
  toggleDescription?: string;
33
40
  };
34
41
  }
42
+ export declare const testIdPrefix = "Property";
35
43
  declare const Property: React.FC<IProperty>;
36
44
  export default Property;
package/dist/es/components/Property/Property.js CHANGED
@@ -2,13 +2,23 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import "core-js/modules/es.array.map.js";
3
3
  import "core-js/modules/es.symbol.js";
4
4
  import "core-js/modules/es.symbol.description.js";
5
- import React from 'react';
6
- import { Header, Grid, GridColumn } from '@megafon/ui-core';
7
- import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
+ import React, { Fragment, useRef } from 'react';
6
+ import { Grid, GridColumn, PromoBadge, Caption, Tooltip } from '@megafon/ui-core';
7
+ import { cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
8
8
  import PropTypes from 'prop-types';
9
9
  import "./Property.css";
10
10
  import { getColumnConfig } from "../../helpers/getColumnConfig";
11
11
  import PropertyDescription from "./PropertyDescription";
12
+
13
+ var InfoIcon = function InfoIcon(props) {
14
+ return /*#__PURE__*/React.createElement("svg", _extends({
15
+ viewBox: "0 0 20 20"
16
+ }, props), /*#__PURE__*/React.createElement("path", {
17
+ 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"
18
+ }));
19
+ };
20
+
21
+ export var testIdPrefix = 'Property';
12
22
  var cn = cnCreate('mfui-property');
13
23
 
14
24
  var Property = function Property(_ref) {
@@ -17,11 +27,16 @@ var Property = function Property(_ref) {
17
27
  className = _ref.className,
18
28
  _ref$badge = _ref.badge,
19
29
  badge = _ref$badge === void 0 ? '' : _ref$badge,
30
+ _ref$badgeType = _ref.badgeType,
31
+ badgeType = _ref$badgeType === void 0 ? 'popular' : _ref$badgeType,
32
+ tooltip = _ref.tooltip,
20
33
  icon = _ref.icon,
21
34
  _ref$disableBorderTop = _ref.disableBorderTop,
22
35
  disableBorderTop = _ref$disableBorderTop === void 0 ? false : _ref$disableBorderTop,
23
36
  _ref$borderBottom = _ref.borderBottom,
24
37
  borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
38
+ _ref$borderColor = _ref.borderColor,
39
+ borderColor = _ref$borderColor === void 0 ? 'default' : _ref$borderColor,
25
40
  _ref$mergedValue = _ref.mergedValue,
26
41
  mergedValue = _ref$mergedValue === void 0 ? '' : _ref$mergedValue,
27
42
  _ref$fullWidth = _ref.fullWidth,
@@ -29,23 +44,37 @@ var Property = function Property(_ref) {
29
44
  _ref$classes = _ref.classes,
30
45
  classes = _ref$classes === void 0 ? {} : _ref$classes,
31
46
  dataAttrs = _ref.dataAttrs;
32
- var renderTitle = React.useCallback(function (title) {
47
+ var tooltipRef = useRef(null);
48
+
49
+ var renderTitle = function renderTitle(title, titleSize, isFirstItem) {
33
50
  return title && title.map(function (titleItem, i) {
34
- return /*#__PURE__*/React.createElement(Header, {
35
- as: "h5",
51
+ var isFirstTitle = i === 0;
52
+ return /*#__PURE__*/React.createElement("div", {
36
53
  key: i,
37
- className: classes.title
38
- }, icon && i === 0 && /*#__PURE__*/React.createElement("div", {
54
+ className: cn('title-item', {
55
+ size: titleSize
56
+ }, [classes.title]),
57
+ "data-testid": "".concat(testIdPrefix, "-title-item")
58
+ }, icon && isFirstTitle && /*#__PURE__*/React.createElement("div", {
39
59
  className: cn('icon')
40
- }, icon), titleItem);
60
+ }, icon), titleItem, tooltip && isFirstItem && isFirstTitle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
61
+ className: cn('tooltip'),
62
+ ref: tooltipRef
63
+ }, /*#__PURE__*/React.createElement(InfoIcon, null)), /*#__PURE__*/React.createElement(Tooltip, {
64
+ className: cn('tooltip-inner'),
65
+ triggerElement: tooltipRef
66
+ }, tooltip)));
41
67
  });
42
- }, [classes.title, icon]);
43
- var renderDescription = React.useCallback(function (description) {
68
+ };
69
+
70
+ var renderDescription = function renderDescription(description) {
44
71
  return description && description.map(function (_ref2, j) {
45
72
  var value = _ref2.value,
46
73
  isCollapsible = _ref2.isCollapsible;
47
74
  return /*#__PURE__*/React.createElement("div", {
48
- className: cn('desc'),
75
+ className: cn('desc', {
76
+ collapsible: isCollapsible
77
+ }),
49
78
  key: j
50
79
  }, /*#__PURE__*/React.createElement(PropertyDescription, {
51
80
  value: value,
@@ -59,44 +88,63 @@ var Property = function Property(_ref) {
59
88
  }
60
89
  }));
61
90
  });
62
- }, [classes.openedDescription, classes.toggleDescription, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink]);
91
+ };
92
+
93
+ var renderValue = function renderValue(valueFrameColor, value, valueUnit) {
94
+ return /*#__PURE__*/React.createElement("div", {
95
+ className: cn('value-wrapper', {
96
+ frame: valueFrameColor
97
+ }),
98
+ "data-testid": "".concat(testIdPrefix, "-value")
99
+ }, /*#__PURE__*/React.createElement("div", {
100
+ className: cn('value')
101
+ }, convert(value, {})), valueUnit && /*#__PURE__*/React.createElement(Caption, {
102
+ className: cn('value-unit'),
103
+ hasMargin: false
104
+ }, convert(valueUnit, {})));
105
+ };
106
+
63
107
  return /*#__PURE__*/React.createElement("div", _extends({
64
108
  className: cn({
65
109
  'border-top': !disableBorderTop,
66
- 'border-bottom': borderBottom
110
+ 'border-bottom': borderBottom,
111
+ 'border-color': borderColor
67
112
  }, [className]),
68
113
  ref: rootRef
69
- }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, getColumnConfig(fullWidth), /*#__PURE__*/React.createElement("div", {
114
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, _extends({}, getColumnConfig(fullWidth), {
115
+ dataAttrs: {
116
+ root: {
117
+ 'data-testid': "".concat(testIdPrefix, "-gridColumn")
118
+ }
119
+ }
120
+ }), /*#__PURE__*/React.createElement("div", {
70
121
  className: cn('wrapper')
71
- }, badge && /*#__PURE__*/React.createElement("div", {
72
- className: cn('badge-wrapper')
73
- }, /*#__PURE__*/React.createElement("span", {
74
- className: cn('badge')
75
- }, badge)), /*#__PURE__*/React.createElement("div", {
76
- className: cn('content')
77
- }, /*#__PURE__*/React.createElement("div", {
78
- className: cn('items-wrapper')
79
122
  }, items.map(function (_ref3, i) {
80
123
  var title = _ref3.title,
81
124
  value = _ref3.value,
82
- description = _ref3.description;
83
- return /*#__PURE__*/React.createElement("div", {
84
- className: cn('item'),
125
+ description = _ref3.description,
126
+ _ref3$valueUnit = _ref3.valueUnit,
127
+ valueUnit = _ref3$valueUnit === void 0 ? '' : _ref3$valueUnit,
128
+ _ref3$titleSize = _ref3.titleSize,
129
+ titleSize = _ref3$titleSize === void 0 ? 'default' : _ref3$titleSize,
130
+ _ref3$valueFrameColor = _ref3.valueFrameColor,
131
+ valueFrameColor = _ref3$valueFrameColor === void 0 ? 'default' : _ref3$valueFrameColor;
132
+ var isFirstItem = i === 0;
133
+ var isRenderBadge = isFirstItem && !!badge;
134
+ return /*#__PURE__*/React.createElement(Fragment, {
85
135
  key: i
86
136
  }, /*#__PURE__*/React.createElement("div", {
87
- className: cn('inner')
88
- }, renderTitle(title), renderDescription(description)), !mergedValue && /*#__PURE__*/React.createElement("div", {
89
- className: cn('value-wrapper')
90
- }, value && /*#__PURE__*/React.createElement("span", {
91
- className: cn('value')
92
- }, value)));
93
- })), mergedValue && /*#__PURE__*/React.createElement("div", {
94
- className: cn('value-wrapper', {
95
- merged: true
96
- })
97
- }, /*#__PURE__*/React.createElement(Header, {
98
- as: "h3"
99
- }, mergedValue)))))));
137
+ className: cn('main', {
138
+ 'with-badge': isRenderBadge,
139
+ 'with-out-title': !title
140
+ })
141
+ }, /*#__PURE__*/React.createElement("div", {
142
+ className: cn('title')
143
+ }, isRenderBadge && /*#__PURE__*/React.createElement(PromoBadge, {
144
+ className: cn('badge'),
145
+ type: badgeType
146
+ }, badge), title ? renderTitle(title, titleSize, isFirstItem) : renderDescription(description)), mergedValue && isFirstItem && renderValue(valueFrameColor, mergedValue, valueUnit), !mergedValue && value && renderValue(valueFrameColor, value, valueUnit)), title && renderDescription(description));
147
+ })))));
100
148
  };
101
149
 
102
150
  Property.propTypes = {
@@ -109,12 +157,18 @@ Property.propTypes = {
109
157
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.node)]).isRequired,
110
158
  isCollapsible: PropTypes.bool
111
159
  })),
112
- value: PropTypes.string
160
+ value: PropTypes.string,
161
+ titleSize: PropTypes.oneOf(['default', 'big']),
162
+ valueUnit: PropTypes.string,
163
+ valueFrameColor: PropTypes.oneOf(['default', 'gray'])
113
164
  }).isRequired).isRequired,
114
165
  className: PropTypes.string,
115
166
  badge: PropTypes.string,
167
+ badgeType: PropTypes.oneOf(['hit', 'new', 'vip', 'popular', 'user-choice', 'interests']),
168
+ tooltip: PropTypes.string,
116
169
  disableBorderTop: PropTypes.bool,
117
170
  borderBottom: PropTypes.bool,
171
+ borderColor: PropTypes.oneOf(['default', 'darker']),
118
172
  mergedValue: PropTypes.string,
119
173
  icon: PropTypes.node,
120
174
  fullWidth: PropTypes.bool,
package/dist/es/components/Property/PropertyDescription.css CHANGED
@@ -13,5 +13,5 @@ h5 {
13
13
  cursor: pointer;
14
14
  }
15
15
  .mfui-property-description__content-inner {
16
- margin-top: 8px;
16
+ margin-bottom: 8px;
17
17
  }
package/dist/es/components/Property/PropertyDescription.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import './PropertyDescription.less';
3
3
  import { Desc } from './types';
4
+ export declare const testIdPrefix = "PropertyDescription";
4
5
  declare const PropertyDescription: React.FC<Desc>;
5
6
  export default PropertyDescription;
package/dist/es/components/Property/PropertyDescription.js CHANGED
@@ -9,6 +9,7 @@ import { Collapse } from '@megafon/ui-core';
9
9
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
10
10
  import PropTypes from 'prop-types';
11
11
  import "./PropertyDescription.css";
12
+ export var testIdPrefix = 'PropertyDescription';
12
13
  var cn = cnCreate('mfui-property-description');
13
14
 
14
15
  var PropertyDescription = function PropertyDescription(_ref) {
@@ -30,16 +31,17 @@ var PropertyDescription = function PropertyDescription(_ref) {
30
31
 
31
32
  if (isCollapsible) {
32
33
  return /*#__PURE__*/React.createElement("div", {
33
- className: cn([isOpened ? classes.open : undefined])
34
- }, /*#__PURE__*/React.createElement("span", _extends({
35
- onClick: handleClickDesc
36
- }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
37
- className: cn('collapse', classes.toggle)
38
- }), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(Collapse, {
34
+ className: cn([isOpened ? classes.open : undefined]),
35
+ "data-testid": "".concat(testIdPrefix, "-collapsible")
36
+ }, /*#__PURE__*/React.createElement(Collapse, {
39
37
  className: cn('content'),
40
38
  classNameContainer: cn('content-inner'),
41
39
  isOpened: isOpened
42
- }, value));
40
+ }, value), /*#__PURE__*/React.createElement("span", _extends({
41
+ onClick: handleClickDesc
42
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
43
+ className: cn('collapse', classes.toggle)
44
+ }), isOpened ? 'Скрыть' : 'Подробнее'));
43
45
  }
44
46
 
45
47
  return /*#__PURE__*/React.createElement("div", {
package/dist/es/components/Property/types.d.ts CHANGED
@@ -12,6 +12,9 @@ export declare type Desc = {
12
12
  };
13
13
  export declare type Item = {
14
14
  title?: string[] | React.ReactNode[];
15
+ titleSize?: 'default' | 'big';
15
16
  description?: Desc[];
16
17
  value?: string;
18
+ valueUnit?: string;
19
+ valueFrameColor?: 'default' | 'gray';
17
20
  };
package/dist/lib/components/Property/Property.css CHANGED
@@ -15,98 +15,124 @@ h5 {
15
15
  flex-direction: column;
16
16
  padding: 24px 0;
17
17
  }
18
- @media screen and (min-width: 1280px) {
19
- .mfui-property__wrapper {
20
- padding: 26px 0;
21
- }
18
+ .mfui-property_border-top.mfui-property_border-color_default .mfui-property__wrapper {
19
+ border-top: 1px solid var(--spbSky1);
20
+ }
21
+ .mfui-property_border-bottom.mfui-property_border-color_default .mfui-property__wrapper {
22
+ border-bottom: 1px solid var(--spbSky1);
22
23
  }
23
- .mfui-property_border-top .mfui-property__wrapper {
24
+ .mfui-property_border-top.mfui-property_border-color_darker .mfui-property__wrapper {
24
25
  border-top: 1px solid var(--spbSky2);
25
26
  }
26
- .mfui-property_border-bottom .mfui-property__wrapper {
27
+ .mfui-property_border-bottom.mfui-property_border-color_darker .mfui-property__wrapper {
27
28
  border-bottom: 1px solid var(--spbSky2);
28
29
  }
29
- .mfui-property__content {
30
+ .mfui-property__main {
30
31
  display: -webkit-box;
31
32
  display: -ms-flexbox;
32
33
  display: flex;
34
+ gap: 20px;
35
+ -webkit-box-align: baseline;
36
+ -ms-flex-align: baseline;
37
+ align-items: baseline;
38
+ -webkit-box-pack: justify;
39
+ -ms-flex-pack: justify;
40
+ justify-content: space-between;
33
41
  }
34
- .mfui-property__item {
35
- display: -webkit-box;
36
- display: -ms-flexbox;
37
- display: flex;
42
+ .mfui-property__main:not(:first-child) {
43
+ margin-top: 24px;
44
+ }
45
+ .mfui-property__main_with-out-title {
46
+ margin-top: 16px !important;
47
+ }
48
+ .mfui-property__main_with-badge {
49
+ -webkit-box-align: center;
50
+ -ms-flex-align: center;
51
+ align-items: center;
52
+ }
53
+ .mfui-property__title-item_size_default {
54
+ font-size: 15px;
55
+ line-height: 24px;
56
+ font-weight: 500;
57
+ }
58
+ .mfui-property__title-item_size_big {
59
+ font-weight: 500;
60
+ font-size: 18px;
61
+ line-height: 24px;
62
+ letter-spacing: 0.5px;
63
+ }
64
+ @media screen and (min-width: 1280px) {
65
+ .mfui-property__title-item_size_big {
66
+ font-size: 20px;
67
+ line-height: 28px;
68
+ }
69
+ }
70
+ @media screen and (max-width: 767px) {
71
+ .mfui-property__title-item {
72
+ font-size: 15px;
73
+ line-height: 24px;
74
+ font-weight: 500;
75
+ }
38
76
  }
39
77
  .mfui-property__icon {
40
78
  display: inline-block;
41
79
  width: 24px;
42
80
  height: 24px;
43
- margin-right: 9px;
81
+ margin-right: 8px;
44
82
  margin-left: 1px;
45
83
  overflow: hidden;
46
84
  vertical-align: bottom;
47
85
  }
48
86
  .mfui-property__badge {
49
- padding: 2px 8px;
50
- border-radius: 2px;
51
- color: var(--stcWhite);
52
- font-size: 12px;
53
- background: var(--137C);
54
- }
55
- .mfui-property__inner {
56
- -webkit-box-flex: 1;
57
- -ms-flex-positive: 1;
58
- flex-grow: 1;
59
- padding-right: 20px;
60
- }
61
- @media screen and (min-width: 768px) and (max-width: 1023px) {
62
- .mfui-property__inner {
63
- padding-right: 77px;
87
+ margin-bottom: 8px;
88
+ }
89
+ @media screen and (min-width: 768px) {
90
+ .mfui-property__title .mfui-property__desc {
91
+ width: 100%;
64
92
  }
65
93
  }
66
- @media screen and (max-width: 767px) {
67
- .mfui-property__inner {
68
- padding-right: 8px;
94
+ .mfui-property__tooltip {
95
+ display: inline-block;
96
+ width: 20px;
97
+ height: 20px;
98
+ margin-left: 8px;
99
+ vertical-align: text-bottom;
100
+ cursor: pointer;
101
+ fill: var(--spbSky2);
102
+ }
103
+ .mfui-property__tooltip-inner {
104
+ max-width: 350px;
105
+ }
106
+ .mfui-property__desc {
107
+ margin-top: 12px;
108
+ }
109
+ @media screen and (min-width: 768px) {
110
+ .mfui-property__desc {
111
+ width: 70%;
69
112
  }
70
113
  }
71
- .mfui-property__items-wrapper {
72
- width: 100%;
114
+ .mfui-property__desc_collapsible {
115
+ margin-top: 12px;
73
116
  }
74
117
  .mfui-property__value-wrapper {
75
118
  display: -webkit-box;
76
119
  display: -ms-flexbox;
77
120
  display: flex;
78
- -ms-flex-negative: 0;
79
- flex-shrink: 0;
80
- -webkit-box-align: start;
81
- -ms-flex-align: start;
82
- align-items: flex-start;
83
- -webkit-box-pack: end;
84
- -ms-flex-pack: end;
85
- justify-content: flex-end;
86
- width: 35%;
87
- }
88
- @media screen and (max-width: 479px) {
89
- .mfui-property__value-wrapper {
90
- width: auto;
91
- padding-left: 10px;
92
- }
93
- }
94
- .mfui-property__value-wrapper_merged {
95
- -webkit-box-align: center;
96
- -ms-flex-align: center;
97
- align-items: center;
98
- border-left: 1px solid var(--spbSky2);
121
+ -webkit-box-align: baseline;
122
+ -ms-flex-align: baseline;
123
+ align-items: baseline;
124
+ padding: 4px 8px;
125
+ border-radius: 8px;
126
+ white-space: pre-line;
127
+ text-align: right;
99
128
  }
100
- .mfui-property__desc {
101
- margin-top: 8px;
129
+ .mfui-property__value-wrapper_frame_default {
130
+ background: var(--base);
102
131
  }
103
- .mfui-property__item + .mfui-property__item {
104
- margin-top: 16px;
132
+ .mfui-property__value-wrapper_frame_gray {
133
+ background: var(--spbSky0);
105
134
  }
106
135
  .mfui-property__value {
107
- max-width: 234px;
108
- white-space: pre-line;
109
- text-align: right;
110
136
  font-weight: 500;
111
137
  font-size: 18px;
112
138
  line-height: 24px;
@@ -125,3 +151,6 @@ h5 {
125
151
  font-weight: 500;
126
152
  }
127
153
  }
154
+ .mfui-property__value-unit:before {
155
+ content: '\00a0';
156
+ }
package/dist/lib/components/Property/Property.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import React, { Ref } from 'react';
1
+ import React, { Ref, ComponentProps } from 'react';
2
+ import { PromoBadge } from '@megafon/ui-core';
2
3
  import './Property.less';
3
4
  import { Item } from './types';
4
5
  export interface IProperty {
@@ -10,10 +11,16 @@ export interface IProperty {
10
11
  className?: string;
11
12
  /** Текст для бейджа */
12
13
  badge?: string;
14
+ /** Тип бейджа */
15
+ badgeType?: ComponentProps<typeof PromoBadge>['type'];
16
+ /** Текст тултипа */
17
+ tooltip?: string;
13
18
  /** Отключить верхнюю границу */
14
19
  disableBorderTop?: boolean;
15
20
  /** Наличие нижней границы */
16
21
  borderBottom?: boolean;
22
+ /** Цвет верхней и нижней границ */
23
+ borderColor?: 'default' | 'darker';
17
24
  /** Единое значение для всей строки */
18
25
  mergedValue?: string;
19
26
  /** Иконка для строки */
@@ -32,5 +39,6 @@ export interface IProperty {
32
39
  toggleDescription?: string;
33
40
  };
34
41
  }
42
+ export declare const testIdPrefix = "Property";
35
43
  declare const Property: React.FC<IProperty>;
36
44
  export default Property;
package/dist/lib/components/Property/Property.js CHANGED
@@ -1,9 +1,11 @@
1
1
  "use strict";
2
2
 
3
+ 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); }
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
- exports["default"] = void 0;
8
+ exports["default"] = exports.testIdPrefix = void 0;
7
9
 
8
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
11
 
@@ -13,7 +15,7 @@ require("core-js/modules/es.symbol.js");
13
15
 
14
16
  require("core-js/modules/es.symbol.description.js");
15
17
 
16
- var _react = _interopRequireDefault(require("react"));
18
+ var _react = _interopRequireWildcard(require("react"));
17
19
 
18
20
  var _uiCore = require("@megafon/ui-core");
19
21
 
@@ -25,8 +27,22 @@ var _getColumnConfig = require("../../helpers/getColumnConfig");
25
27
 
26
28
  var _PropertyDescription = _interopRequireDefault(require("./PropertyDescription"));
27
29
 
30
+ 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); }
31
+
32
+ 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; }
33
+
28
34
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
29
35
 
36
+ var InfoIcon = function InfoIcon(props) {
37
+ return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
38
+ viewBox: "0 0 20 20"
39
+ }, props), /*#__PURE__*/_react["default"].createElement("path", {
40
+ 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"
41
+ }));
42
+ };
43
+
44
+ var testIdPrefix = 'Property';
45
+ exports.testIdPrefix = testIdPrefix;
30
46
  var cn = (0, _uiHelpers.cnCreate)('mfui-property');
31
47
 
32
48
  var Property = function Property(_ref) {
@@ -35,11 +51,16 @@ var Property = function Property(_ref) {
35
51
  className = _ref.className,
36
52
  _ref$badge = _ref.badge,
37
53
  badge = _ref$badge === void 0 ? '' : _ref$badge,
54
+ _ref$badgeType = _ref.badgeType,
55
+ badgeType = _ref$badgeType === void 0 ? 'popular' : _ref$badgeType,
56
+ tooltip = _ref.tooltip,
38
57
  icon = _ref.icon,
39
58
  _ref$disableBorderTop = _ref.disableBorderTop,
40
59
  disableBorderTop = _ref$disableBorderTop === void 0 ? false : _ref$disableBorderTop,
41
60
  _ref$borderBottom = _ref.borderBottom,
42
61
  borderBottom = _ref$borderBottom === void 0 ? false : _ref$borderBottom,
62
+ _ref$borderColor = _ref.borderColor,
63
+ borderColor = _ref$borderColor === void 0 ? 'default' : _ref$borderColor,
43
64
  _ref$mergedValue = _ref.mergedValue,
44
65
  mergedValue = _ref$mergedValue === void 0 ? '' : _ref$mergedValue,
45
66
  _ref$fullWidth = _ref.fullWidth,
@@ -47,25 +68,37 @@ var Property = function Property(_ref) {
47
68
  _ref$classes = _ref.classes,
48
69
  classes = _ref$classes === void 0 ? {} : _ref$classes,
49
70
  dataAttrs = _ref.dataAttrs;
71
+ var tooltipRef = (0, _react.useRef)(null);
50
72
 
51
- var renderTitle = _react["default"].useCallback(function (title) {
73
+ var renderTitle = function renderTitle(title, titleSize, isFirstItem) {
52
74
  return title && title.map(function (titleItem, i) {
53
- return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
54
- as: "h5",
75
+ var isFirstTitle = i === 0;
76
+ return /*#__PURE__*/_react["default"].createElement("div", {
55
77
  key: i,
56
- className: classes.title
57
- }, icon && i === 0 && /*#__PURE__*/_react["default"].createElement("div", {
78
+ className: cn('title-item', {
79
+ size: titleSize
80
+ }, [classes.title]),
81
+ "data-testid": "".concat(testIdPrefix, "-title-item")
82
+ }, icon && isFirstTitle && /*#__PURE__*/_react["default"].createElement("div", {
58
83
  className: cn('icon')
59
- }, icon), titleItem);
84
+ }, icon), titleItem, tooltip && isFirstItem && isFirstTitle && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
85
+ className: cn('tooltip'),
86
+ ref: tooltipRef
87
+ }, /*#__PURE__*/_react["default"].createElement(InfoIcon, null)), /*#__PURE__*/_react["default"].createElement(_uiCore.Tooltip, {
88
+ className: cn('tooltip-inner'),
89
+ triggerElement: tooltipRef
90
+ }, tooltip)));
60
91
  });
61
- }, [classes.title, icon]);
92
+ };
62
93
 
63
- var renderDescription = _react["default"].useCallback(function (description) {
94
+ var renderDescription = function renderDescription(description) {
64
95
  return description && description.map(function (_ref2, j) {
65
96
  var value = _ref2.value,
66
97
  isCollapsible = _ref2.isCollapsible;
67
98
  return /*#__PURE__*/_react["default"].createElement("div", {
68
- className: cn('desc'),
99
+ className: cn('desc', {
100
+ collapsible: isCollapsible
101
+ }),
69
102
  key: j
70
103
  }, /*#__PURE__*/_react["default"].createElement(_PropertyDescription["default"], {
71
104
  value: value,
@@ -79,45 +112,63 @@ var Property = function Property(_ref) {
79
112
  }
80
113
  }));
81
114
  });
82
- }, [classes.openedDescription, classes.toggleDescription, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink]);
115
+ };
116
+
117
+ var renderValue = function renderValue(valueFrameColor, value, valueUnit) {
118
+ return /*#__PURE__*/_react["default"].createElement("div", {
119
+ className: cn('value-wrapper', {
120
+ frame: valueFrameColor
121
+ }),
122
+ "data-testid": "".concat(testIdPrefix, "-value")
123
+ }, /*#__PURE__*/_react["default"].createElement("div", {
124
+ className: cn('value')
125
+ }, (0, _uiHelpers.convert)(value, {})), valueUnit && /*#__PURE__*/_react["default"].createElement(_uiCore.Caption, {
126
+ className: cn('value-unit'),
127
+ hasMargin: false
128
+ }, (0, _uiHelpers.convert)(valueUnit, {})));
129
+ };
83
130
 
84
131
  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
85
132
  className: cn({
86
133
  'border-top': !disableBorderTop,
87
- 'border-bottom': borderBottom
134
+ 'border-bottom': borderBottom,
135
+ 'border-color': borderColor
88
136
  }, [className]),
89
137
  ref: rootRef
90
- }, (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", {
138
+ }, (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), {
139
+ dataAttrs: {
140
+ root: {
141
+ 'data-testid': "".concat(testIdPrefix, "-gridColumn")
142
+ }
143
+ }
144
+ }), /*#__PURE__*/_react["default"].createElement("div", {
91
145
  className: cn('wrapper')
92
- }, badge && /*#__PURE__*/_react["default"].createElement("div", {
93
- className: cn('badge-wrapper')
94
- }, /*#__PURE__*/_react["default"].createElement("span", {
95
- className: cn('badge')
96
- }, badge)), /*#__PURE__*/_react["default"].createElement("div", {
97
- className: cn('content')
98
- }, /*#__PURE__*/_react["default"].createElement("div", {
99
- className: cn('items-wrapper')
100
146
  }, items.map(function (_ref3, i) {
101
147
  var title = _ref3.title,
102
148
  value = _ref3.value,
103
- description = _ref3.description;
104
- return /*#__PURE__*/_react["default"].createElement("div", {
105
- className: cn('item'),
149
+ description = _ref3.description,
150
+ _ref3$valueUnit = _ref3.valueUnit,
151
+ valueUnit = _ref3$valueUnit === void 0 ? '' : _ref3$valueUnit,
152
+ _ref3$titleSize = _ref3.titleSize,
153
+ titleSize = _ref3$titleSize === void 0 ? 'default' : _ref3$titleSize,
154
+ _ref3$valueFrameColor = _ref3.valueFrameColor,
155
+ valueFrameColor = _ref3$valueFrameColor === void 0 ? 'default' : _ref3$valueFrameColor;
156
+ var isFirstItem = i === 0;
157
+ var isRenderBadge = isFirstItem && !!badge;
158
+ return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
106
159
  key: i
107
160
  }, /*#__PURE__*/_react["default"].createElement("div", {
108
- className: cn('inner')
109
- }, renderTitle(title), renderDescription(description)), !mergedValue && /*#__PURE__*/_react["default"].createElement("div", {
110
- className: cn('value-wrapper')
111
- }, value && /*#__PURE__*/_react["default"].createElement("span", {
112
- className: cn('value')
113
- }, value)));
114
- })), mergedValue && /*#__PURE__*/_react["default"].createElement("div", {
115
- className: cn('value-wrapper', {
116
- merged: true
117
- })
118
- }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
119
- as: "h3"
120
- }, mergedValue)))))));
161
+ className: cn('main', {
162
+ 'with-badge': isRenderBadge,
163
+ 'with-out-title': !title
164
+ })
165
+ }, /*#__PURE__*/_react["default"].createElement("div", {
166
+ className: cn('title')
167
+ }, isRenderBadge && /*#__PURE__*/_react["default"].createElement(_uiCore.PromoBadge, {
168
+ className: cn('badge'),
169
+ type: badgeType
170
+ }, badge), title ? renderTitle(title, titleSize, isFirstItem) : renderDescription(description)), mergedValue && isFirstItem && renderValue(valueFrameColor, mergedValue, valueUnit), !mergedValue && value && renderValue(valueFrameColor, value, valueUnit)), title && renderDescription(description));
171
+ })))));
121
172
  };
122
173
 
123
174
  Property.propTypes = {
@@ -130,12 +181,18 @@ Property.propTypes = {
130
181
  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
131
182
  isCollapsible: _propTypes["default"].bool
132
183
  })),
133
- value: _propTypes["default"].string
184
+ value: _propTypes["default"].string,
185
+ titleSize: _propTypes["default"].oneOf(['default', 'big']),
186
+ valueUnit: _propTypes["default"].string,
187
+ valueFrameColor: _propTypes["default"].oneOf(['default', 'gray'])
134
188
  }).isRequired).isRequired,
135
189
  className: _propTypes["default"].string,
136
190
  badge: _propTypes["default"].string,
191
+ badgeType: _propTypes["default"].oneOf(['hit', 'new', 'vip', 'popular', 'user-choice', 'interests']),
192
+ tooltip: _propTypes["default"].string,
137
193
  disableBorderTop: _propTypes["default"].bool,
138
194
  borderBottom: _propTypes["default"].bool,
195
+ borderColor: _propTypes["default"].oneOf(['default', 'darker']),
139
196
  mergedValue: _propTypes["default"].string,
140
197
  icon: _propTypes["default"].node,
141
198
  fullWidth: _propTypes["default"].bool,
package/dist/lib/components/Property/PropertyDescription.css CHANGED
@@ -13,5 +13,5 @@ h5 {
13
13
  cursor: pointer;
14
14
  }
15
15
  .mfui-property-description__content-inner {
16
- margin-top: 8px;
16
+ margin-bottom: 8px;
17
17
  }
package/dist/lib/components/Property/PropertyDescription.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import './PropertyDescription.less';
3
3
  import { Desc } from './types';
4
+ export declare const testIdPrefix = "PropertyDescription";
4
5
  declare const PropertyDescription: React.FC<Desc>;
5
6
  export default PropertyDescription;
package/dist/lib/components/Property/PropertyDescription.js CHANGED
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = void 0;
8
+ exports["default"] = exports.testIdPrefix = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
@@ -28,6 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
28
28
  /* eslint-disable jsx-a11y/no-static-element-interactions */
29
29
 
30
30
  /* eslint-disable jsx-a11y/click-events-have-key-events */
31
+ var testIdPrefix = 'PropertyDescription';
32
+ exports.testIdPrefix = testIdPrefix;
31
33
  var cn = (0, _uiHelpers.cnCreate)('mfui-property-description');
32
34
 
33
35
  var PropertyDescription = function PropertyDescription(_ref) {
@@ -49,16 +51,17 @@ var PropertyDescription = function PropertyDescription(_ref) {
49
51
 
50
52
  if (isCollapsible) {
51
53
  return /*#__PURE__*/React.createElement("div", {
52
- className: cn([isOpened ? classes.open : undefined])
53
- }, /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
54
- onClick: handleClickDesc
55
- }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
56
- className: cn('collapse', classes.toggle)
57
- }), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(_uiCore.Collapse, {
54
+ className: cn([isOpened ? classes.open : undefined]),
55
+ "data-testid": "".concat(testIdPrefix, "-collapsible")
56
+ }, /*#__PURE__*/React.createElement(_uiCore.Collapse, {
58
57
  className: cn('content'),
59
58
  classNameContainer: cn('content-inner'),
60
59
  isOpened: isOpened
61
- }, value));
60
+ }, value), /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
61
+ onClick: handleClickDesc
62
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
63
+ className: cn('collapse', classes.toggle)
64
+ }), isOpened ? 'Скрыть' : 'Подробнее'));
62
65
  }
63
66
 
64
67
  return /*#__PURE__*/React.createElement("div", {
package/dist/lib/components/Property/types.d.ts CHANGED
@@ -12,6 +12,9 @@ export declare type Desc = {
12
12
  };
13
13
  export declare type Item = {
14
14
  title?: string[] | React.ReactNode[];
15
+ titleSize?: 'default' | 'big';
15
16
  description?: Desc[];
16
17
  value?: string;
18
+ valueUnit?: string;
19
+ valueFrameColor?: 'default' | 'gray';
17
20
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "4.20.6",
3
+ "version": "4.21.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -48,7 +48,7 @@
48
48
  "@babel/preset-env": "^7.8.6",
49
49
  "@babel/preset-react": "^7.8.3",
50
50
  "@babel/preset-typescript": "^7.8.3",
51
- "@megafon/ui-icons": "^2.13.0",
51
+ "@megafon/ui-icons": "^2.14.0",
52
52
  "@svgr/core": "^2.4.1",
53
53
  "@testing-library/jest-dom": "5.16.2",
54
54
  "@testing-library/react": "12.1.2",
@@ -82,13 +82,13 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@babel/runtime": "^7.8.4",
85
- "@megafon/ui-core": "^5.1.1",
86
- "@megafon/ui-helpers": "^2.5.1",
85
+ "@megafon/ui-core": "^5.1.2",
86
+ "@megafon/ui-helpers": "^2.5.2",
87
87
  "core-js": "^3.6.4",
88
88
  "htmr": "^0.9.2",
89
89
  "lodash.throttle": "^4.1.1",
90
90
  "prop-types": "^15.7.2",
91
91
  "swiper": "^6.5.6"
92
92
  },
93
- "gitHead": "9d1e595eebdde3e8652d07511c1bf3057d61a8f3"
93
+ "gitHead": "5c1ab056af4f3c2ced942d4e4b820e049b671a5d"
94
94
  }