@megafon/ui-shared 4.20.6 → 4.21.1

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 (48) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/es/components/AccordionBox/AccordionBox.d.ts +1 -1
  3. package/dist/es/components/AccordionBox/AccordionBox.js +15 -2
  4. package/dist/es/components/Card/Card.css +22 -22
  5. package/dist/es/components/Card/Card.js +1 -1
  6. package/dist/es/components/Instructions/img/android.png +0 -0
  7. package/dist/es/components/Instructions/img/blackIphone.png +0 -0
  8. package/dist/es/components/Instructions/img/laptop.png +0 -0
  9. package/dist/es/components/Instructions/img/newIphone.png +0 -0
  10. package/dist/es/components/Instructions/img/whiteIphone.png +0 -0
  11. package/dist/es/components/Property/Property.css +89 -60
  12. package/dist/es/components/Property/Property.d.ts +9 -1
  13. package/dist/es/components/Property/Property.js +94 -40
  14. package/dist/es/components/Property/PropertyDescription.css +1 -1
  15. package/dist/es/components/Property/PropertyDescription.d.ts +1 -0
  16. package/dist/es/components/Property/PropertyDescription.js +9 -7
  17. package/dist/es/components/Property/types.d.ts +3 -0
  18. package/dist/es/components/StoreBanner/doc/img/new-iphone-screen.png +0 -0
  19. package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
  20. package/dist/es/components/StoreBanner/doc/img/screen.png +0 -0
  21. package/dist/es/components/StoreBanner/img/android.png +0 -0
  22. package/dist/es/components/StoreBanner/img/black-iphone.png +0 -0
  23. package/dist/es/components/StoreBanner/img/new-iphone.png +0 -0
  24. package/dist/es/components/StoreBanner/img/white-iphone.png +0 -0
  25. package/dist/lib/components/AccordionBox/AccordionBox.d.ts +1 -1
  26. package/dist/lib/components/AccordionBox/AccordionBox.js +18 -2
  27. package/dist/lib/components/Card/Card.css +22 -22
  28. package/dist/lib/components/Card/Card.js +1 -1
  29. package/dist/lib/components/Instructions/img/android.png +0 -0
  30. package/dist/lib/components/Instructions/img/blackIphone.png +0 -0
  31. package/dist/lib/components/Instructions/img/laptop.png +0 -0
  32. package/dist/lib/components/Instructions/img/newIphone.png +0 -0
  33. package/dist/lib/components/Instructions/img/whiteIphone.png +0 -0
  34. package/dist/lib/components/Property/Property.css +89 -60
  35. package/dist/lib/components/Property/Property.d.ts +9 -1
  36. package/dist/lib/components/Property/Property.js +96 -39
  37. package/dist/lib/components/Property/PropertyDescription.css +1 -1
  38. package/dist/lib/components/Property/PropertyDescription.d.ts +1 -0
  39. package/dist/lib/components/Property/PropertyDescription.js +11 -8
  40. package/dist/lib/components/Property/types.d.ts +3 -0
  41. package/dist/lib/components/StoreBanner/doc/img/new-iphone-screen.png +0 -0
  42. package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
  43. package/dist/lib/components/StoreBanner/doc/img/screen.png +0 -0
  44. package/dist/lib/components/StoreBanner/img/android.png +0 -0
  45. package/dist/lib/components/StoreBanner/img/black-iphone.png +0 -0
  46. package/dist/lib/components/StoreBanner/img/new-iphone.png +0 -0
  47. package/dist/lib/components/StoreBanner/img/white-iphone.png +0 -0
  48. package/package.json +5 -5
@@ -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", {
@@ -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
  };
@@ -27,7 +27,7 @@ export interface IAccordionBox {
27
27
  isFullWidth?: boolean;
28
28
  /** Центрирование по горизонтали для расширения 1280+ */
29
29
  hCenterAlignWide?: boolean;
30
- /** Дополнительный класс для корнеовго элемента */
30
+ /** Дополнительный класс для корневого элемента */
31
31
  className?: string;
32
32
  /** Дополнительные классы для корневого и внутренних элементов */
33
33
  classes?: {
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports["default"] = void 0;
9
9
 
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
10
12
  require("core-js/modules/es.array.index-of.js");
11
13
 
12
14
  require("core-js/modules/es.symbol.js");
@@ -25,6 +27,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
25
27
 
26
28
  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; }
27
29
 
30
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
+
28
32
  var __rest = void 0 && (void 0).__rest || function (s, e) {
29
33
  var t = {};
30
34
 
@@ -38,6 +42,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
38
42
  return t;
39
43
  };
40
44
 
45
+ var testIdPrefix = 'AccordionBox';
41
46
  var cn = (0, _uiHelpers.cnCreate)('mfui-accordion-box');
42
47
 
43
48
  var AccordionBox = function AccordionBox(_a) {
@@ -50,8 +55,19 @@ var AccordionBox = function AccordionBox(_a) {
50
55
  return /*#__PURE__*/React.createElement("div", {
51
56
  className: cn()
52
57
  }, /*#__PURE__*/React.createElement(_uiCore.Grid, {
53
- hAlign: hCenterAlignWide ? 'center' : 'left'
54
- }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _getColumnConfig.getColumnConfig)(isFullWidth), /*#__PURE__*/React.createElement(_uiCore.Accordion, restProps))));
58
+ hAlign: hCenterAlignWide ? 'center' : 'left',
59
+ dataAttrs: {
60
+ container: {
61
+ 'data-testid': "".concat(testIdPrefix, "-container")
62
+ }
63
+ }
64
+ }, /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({}, (0, _getColumnConfig.getColumnConfig)(isFullWidth), {
65
+ dataAttrs: {
66
+ root: {
67
+ 'data-testid': "".concat(testIdPrefix, "-column")
68
+ }
69
+ }
70
+ }), /*#__PURE__*/React.createElement(_uiCore.Accordion, restProps))));
55
71
  };
56
72
 
57
73
  AccordionBox.propTypes = {
@@ -5,7 +5,7 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
- .mfui-card {
8
+ .mfui-card-old {
9
9
  display: -webkit-box;
10
10
  display: -ms-flexbox;
11
11
  display: flex;
@@ -15,7 +15,7 @@ h5 {
15
15
  -webkit-box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
16
16
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
17
17
  }
18
- .mfui-card__inner {
18
+ .mfui-card-old__inner {
19
19
  display: -webkit-box;
20
20
  display: -ms-flexbox;
21
21
  display: flex;
@@ -34,18 +34,18 @@ h5 {
34
34
  padding: 32px 20px;
35
35
  }
36
36
  @media screen and (max-width: 767px) {
37
- .mfui-card__inner {
37
+ .mfui-card-old__inner {
38
38
  padding: 24px 16px;
39
39
  }
40
40
  }
41
- .mfui-card__text {
41
+ .mfui-card-old__text {
42
42
  font-size: 15px;
43
43
  line-height: 24px;
44
44
  font-weight: 400;
45
45
  margin-top: 12px;
46
46
  color: var(--content);
47
47
  }
48
- .mfui-card__btns-wrapper {
48
+ .mfui-card-old__btns-wrapper {
49
49
  display: -webkit-box;
50
50
  display: -ms-flexbox;
51
51
  display: flex;
@@ -60,30 +60,30 @@ h5 {
60
60
  margin-top: auto;
61
61
  padding-top: 12px;
62
62
  }
63
- .mfui-card__btns-wrapper_left-align {
63
+ .mfui-card-old__btns-wrapper_left-align {
64
64
  -webkit-box-pack: start;
65
65
  -ms-flex-pack: start;
66
66
  justify-content: flex-start;
67
67
  }
68
- .mfui-card__fake-link {
68
+ .mfui-card-old__fake-link {
69
69
  color: var(--systemBlue);
70
70
  }
71
- .mfui-card__button,
72
- .mfui-card__link,
73
- .mfui-card__fake-link {
71
+ .mfui-card-old__button,
72
+ .mfui-card-old__link,
73
+ .mfui-card-old__fake-link {
74
74
  margin: 12px 10px;
75
75
  }
76
- .mfui-card__svg-wrapper {
76
+ .mfui-card-old__svg-wrapper {
77
77
  margin-bottom: 24px;
78
78
  }
79
- .mfui-card__svg-wrapper svg {
79
+ .mfui-card-old__svg-wrapper svg {
80
80
  width: 40px;
81
81
  height: 40px;
82
82
  }
83
- .mfui-card__pic-wrapper .mfui-card__img {
83
+ .mfui-card-old__pic-wrapper .mfui-card-old__img {
84
84
  max-width: 100%;
85
85
  }
86
- .mfui-card__pic-wrapper {
86
+ .mfui-card-old__pic-wrapper {
87
87
  display: -webkit-box;
88
88
  display: -ms-flexbox;
89
89
  display: flex;
@@ -99,32 +99,32 @@ h5 {
99
99
  margin-left: -20px;
100
100
  }
101
101
  @media screen and (max-width: 767px) {
102
- .mfui-card__pic-wrapper {
102
+ .mfui-card-old__pic-wrapper {
103
103
  margin-top: -24px;
104
104
  margin-right: -16px;
105
105
  margin-bottom: 24px;
106
106
  margin-left: -16px;
107
107
  }
108
108
  }
109
- .mfui-card__pic-wrapper_object-fit_fill img {
109
+ .mfui-card-old__pic-wrapper_object-fit_fill img {
110
110
  width: 100%;
111
111
  height: auto;
112
112
  }
113
- .mfui-card__pic-wrapper_object-fit_contain img {
113
+ .mfui-card-old__pic-wrapper_object-fit_contain img {
114
114
  width: auto;
115
115
  height: 100%;
116
116
  }
117
- .mfui-card_href * {
117
+ .mfui-card-old_href * {
118
118
  text-decoration: none !important;
119
119
  }
120
- .mfui-card_href:hover {
120
+ .mfui-card-old_href:hover {
121
121
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
122
122
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
123
123
  }
124
- .mfui-card_full-height {
124
+ .mfui-card-old_full-height {
125
125
  height: 100%;
126
126
  }
127
- .mfui-card_centered-text .mfui-card__text,
128
- .mfui-card_centered-text .mfui-card__title {
127
+ .mfui-card-old_centered-text .mfui-card-old__text,
128
+ .mfui-card-old_centered-text .mfui-card-old__title {
129
129
  text-align: center;
130
130
  }
@@ -31,7 +31,7 @@ var ObjectFit = {
31
31
  CONTAIN: 'contain'
32
32
  };
33
33
  exports.ObjectFit = ObjectFit;
34
- var cn = (0, _uiHelpers.cnCreate)('mfui-card');
34
+ var cn = (0, _uiHelpers.cnCreate)('mfui-card-old');
35
35
 
36
36
  var Card = function Card(_ref) {
37
37
  var dataAttrs = _ref.dataAttrs,
@@ -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
+ }
@@ -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;