@megafon/ui-shared 5.3.0 → 5.4.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 (10) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts +5 -1
  3. package/dist/es/components/BenefitsPictures/BenefitsPictures.js +32 -13
  4. package/dist/es/components/BenefitsPictures/BenfitsPictures.css +3 -0
  5. package/dist/es/components/BenefitsPictures/types.d.ts +2 -1
  6. package/dist/lib/components/BenefitsPictures/BenefitsPictures.d.ts +5 -1
  7. package/dist/lib/components/BenefitsPictures/BenefitsPictures.js +32 -13
  8. package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +3 -0
  9. package/dist/lib/components/BenefitsPictures/types.d.ts +2 -1
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
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
+ ## [5.4.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.4.0...@megafon/ui-shared@5.4.1) (2024-01-15)
7
+
8
+ **Note:** Version bump only for package @megafon/ui-shared
9
+
10
+
11
+
12
+
13
+
14
+ # [5.4.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.3.0...@megafon/ui-shared@5.4.0) (2024-01-09)
15
+
16
+
17
+ ### Features
18
+
19
+ * **benefitspictures:** add imgAlign and textAlign props, add ReactNode type to item text ([ebb2f3f](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/ebb2f3f0509f436e456a60c01fa362ecf92371e8))
20
+
21
+
22
+
23
+
24
+
6
25
  # [5.3.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.2.4...@megafon/ui-shared@5.3.0) (2023-12-14)
7
26
 
8
27
 
package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts CHANGED
@@ -7,8 +7,12 @@ export interface IBenefitsPicturesProps {
7
7
  rootRef?: React.Ref<HTMLDivElement>;
8
8
  /** Данные для бенефитов */
9
9
  items: IBenefit[];
10
- /** Горизонтальное выравнивание */
10
+ /** Горизонтальное выравнивание бенефитов */
11
11
  align?: 'left' | 'center';
12
+ /** Горизонтальное выравнивание текста */
13
+ textAlign?: 'left' | 'center' | 'auto';
14
+ /** Горизонтальное выравнивание изображения */
15
+ imgAlign?: 'left' | 'center' | 'auto';
12
16
  /** Расстояние между бенефитами */
13
17
  gridGap?: GridGutterSize;
14
18
  /** Дополнительный css класс для корневого элемента */
package/dist/es/components/BenefitsPictures/BenefitsPictures.js CHANGED
@@ -19,6 +19,10 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
19
19
  var items = _ref.items,
20
20
  _ref$align = _ref.align,
21
21
  align = _ref$align === void 0 ? 'left' : _ref$align,
22
+ _ref$textAlign = _ref.textAlign,
23
+ textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
24
+ _ref$imgAlign = _ref.imgAlign,
25
+ imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
22
26
  _ref$gridGap = _ref.gridGap,
23
27
  gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
24
28
  rootRef = _ref.rootRef,
@@ -44,6 +48,21 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
44
48
  setCurrentGutter('large');
45
49
  }
46
50
  }, [isLargeGutter]);
51
+
52
+ var renderText = function renderText(text) {
53
+ if (typeof text === 'string') {
54
+ return /*#__PURE__*/React.createElement(Paragraph, {
55
+ dataAttrs: {
56
+ root: {
57
+ 'data-testid': "".concat(testIdPrefix, "-paragraph")
58
+ }
59
+ }
60
+ }, convert(text));
61
+ }
62
+
63
+ return text;
64
+ };
65
+
47
66
  React.useEffect(function () {
48
67
  var throttledResizeHandler = throttle(resizeHandler, throttleTime.resize);
49
68
  resizeHandler();
@@ -77,27 +96,25 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
77
96
  "data-testid": "".concat(testIdPrefix, "-item")
78
97
  }, /*#__PURE__*/React.createElement("img", {
79
98
  className: cn('img', {
80
- 'h-align': align
99
+ 'h-align': imgAlign === 'auto' ? align : imgAlign
81
100
  }),
82
101
  src: img,
83
- alt: alt
84
- }), !!title && /*#__PURE__*/React.createElement(Header, {
102
+ alt: alt,
103
+ "data-testid": "".concat(testIdPrefix, "-img")
104
+ }), /*#__PURE__*/React.createElement("div", {
105
+ className: cn('content', {
106
+ 'h-align': textAlign === 'auto' ? align : textAlign
107
+ }),
108
+ "data-testid": "".concat(testIdPrefix, "-content")
109
+ }, !!title && /*#__PURE__*/React.createElement(Header, {
85
110
  className: cn('title'),
86
- align: align,
87
111
  as: "h3",
88
112
  dataAttrs: {
89
113
  root: {
90
114
  'data-testid': "".concat(testIdPrefix, "-title")
91
115
  }
92
116
  }
93
- }, convert(title)), !!text && /*#__PURE__*/React.createElement(Paragraph, {
94
- align: align,
95
- dataAttrs: {
96
- root: {
97
- 'data-testid': "".concat(testIdPrefix, "-text")
98
- }
99
- }
100
- }, convert(text))));
117
+ }, convert(title)), !!text && renderText(text))));
101
118
  }))));
102
119
  };
103
120
 
@@ -107,11 +124,13 @@ BenefitsPictures.propTypes = {
107
124
  }), PropTypes.any])]),
108
125
  items: PropTypes.arrayOf(PropTypes.shape({
109
126
  title: PropTypes.string,
110
- text: PropTypes.string,
127
+ text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
111
128
  img: PropTypes.string.isRequired,
112
129
  alt: PropTypes.string
113
130
  }).isRequired).isRequired,
114
131
  align: PropTypes.oneOf(['left', 'center']),
132
+ textAlign: PropTypes.oneOf(['left', 'center', 'auto']),
133
+ imgAlign: PropTypes.oneOf(['left', 'center', 'auto']),
115
134
  gridGap: PropTypes.oneOf(['medium', 'large']),
116
135
  className: PropTypes.string,
117
136
  classes: PropTypes.shape({
package/dist/es/components/BenefitsPictures/BenfitsPictures.css CHANGED
@@ -24,6 +24,9 @@ h5 {
24
24
  margin-bottom: 48px;
25
25
  }
26
26
  }
27
+ .mfui-benefits-pictures__content_h-align_center {
28
+ text-align: center;
29
+ }
27
30
  .mfui-benefits-pictures__img {
28
31
  max-width: 100%;
29
32
  margin-bottom: 32px;
package/dist/es/components/BenefitsPictures/types.d.ts CHANGED
@@ -1,8 +1,9 @@
1
+ /// <reference types="react" />
1
2
  export interface IBenefit {
2
3
  /** Заголовок бенефита */
3
4
  title?: string;
4
5
  /** Основной текст в бенефите */
5
- text?: string;
6
+ text?: string | React.ReactNode | React.ReactNode[];
6
7
  /** Изображение */
7
8
  img: string;
8
9
  /** Значение тега alt для изображения */
package/dist/lib/components/BenefitsPictures/BenefitsPictures.d.ts CHANGED
@@ -7,8 +7,12 @@ export interface IBenefitsPicturesProps {
7
7
  rootRef?: React.Ref<HTMLDivElement>;
8
8
  /** Данные для бенефитов */
9
9
  items: IBenefit[];
10
- /** Горизонтальное выравнивание */
10
+ /** Горизонтальное выравнивание бенефитов */
11
11
  align?: 'left' | 'center';
12
+ /** Горизонтальное выравнивание текста */
13
+ textAlign?: 'left' | 'center' | 'auto';
14
+ /** Горизонтальное выравнивание изображения */
15
+ imgAlign?: 'left' | 'center' | 'auto';
12
16
  /** Расстояние между бенефитами */
13
17
  gridGap?: GridGutterSize;
14
18
  /** Дополнительный css класс для корневого элемента */
package/dist/lib/components/BenefitsPictures/BenefitsPictures.js CHANGED
@@ -44,6 +44,10 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
44
44
  var items = _ref.items,
45
45
  _ref$align = _ref.align,
46
46
  align = _ref$align === void 0 ? 'left' : _ref$align,
47
+ _ref$textAlign = _ref.textAlign,
48
+ textAlign = _ref$textAlign === void 0 ? 'auto' : _ref$textAlign,
49
+ _ref$imgAlign = _ref.imgAlign,
50
+ imgAlign = _ref$imgAlign === void 0 ? 'auto' : _ref$imgAlign,
47
51
  _ref$gridGap = _ref.gridGap,
48
52
  gridGap = _ref$gridGap === void 0 ? 'large' : _ref$gridGap,
49
53
  rootRef = _ref.rootRef,
@@ -69,6 +73,21 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
69
73
  setCurrentGutter('large');
70
74
  }
71
75
  }, [isLargeGutter]);
76
+
77
+ var renderText = function renderText(text) {
78
+ if (typeof text === 'string') {
79
+ return /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
80
+ dataAttrs: {
81
+ root: {
82
+ 'data-testid': "".concat(testIdPrefix, "-paragraph")
83
+ }
84
+ }
85
+ }, (0, _htmr["default"])(text));
86
+ }
87
+
88
+ return text;
89
+ };
90
+
72
91
  React.useEffect(function () {
73
92
  var throttledResizeHandler = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
74
93
  resizeHandler();
@@ -102,27 +121,25 @@ var BenefitsPictures = function BenefitsPictures(_ref) {
102
121
  "data-testid": "".concat(testIdPrefix, "-item")
103
122
  }, /*#__PURE__*/React.createElement("img", {
104
123
  className: cn('img', {
105
- 'h-align': align
124
+ 'h-align': imgAlign === 'auto' ? align : imgAlign
106
125
  }),
107
126
  src: img,
108
- alt: alt
109
- }), !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
127
+ alt: alt,
128
+ "data-testid": "".concat(testIdPrefix, "-img")
129
+ }), /*#__PURE__*/React.createElement("div", {
130
+ className: cn('content', {
131
+ 'h-align': textAlign === 'auto' ? align : textAlign
132
+ }),
133
+ "data-testid": "".concat(testIdPrefix, "-content")
134
+ }, !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
110
135
  className: cn('title'),
111
- align: align,
112
136
  as: "h3",
113
137
  dataAttrs: {
114
138
  root: {
115
139
  'data-testid': "".concat(testIdPrefix, "-title")
116
140
  }
117
141
  }
118
- }, (0, _htmr["default"])(title)), !!text && /*#__PURE__*/React.createElement(_uiCore.Paragraph, {
119
- align: align,
120
- dataAttrs: {
121
- root: {
122
- 'data-testid': "".concat(testIdPrefix, "-text")
123
- }
124
- }
125
- }, (0, _htmr["default"])(text))));
142
+ }, (0, _htmr["default"])(title)), !!text && renderText(text))));
126
143
  }))));
127
144
  };
128
145
 
@@ -132,11 +149,13 @@ BenefitsPictures.propTypes = {
132
149
  }), _propTypes["default"].any])]),
133
150
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
134
151
  title: _propTypes["default"].string,
135
- text: _propTypes["default"].string,
152
+ text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
136
153
  img: _propTypes["default"].string.isRequired,
137
154
  alt: _propTypes["default"].string
138
155
  }).isRequired).isRequired,
139
156
  align: _propTypes["default"].oneOf(['left', 'center']),
157
+ textAlign: _propTypes["default"].oneOf(['left', 'center', 'auto']),
158
+ imgAlign: _propTypes["default"].oneOf(['left', 'center', 'auto']),
140
159
  gridGap: _propTypes["default"].oneOf(['medium', 'large']),
141
160
  className: _propTypes["default"].string,
142
161
  classes: _propTypes["default"].shape({
package/dist/lib/components/BenefitsPictures/BenfitsPictures.css CHANGED
@@ -24,6 +24,9 @@ h5 {
24
24
  margin-bottom: 48px;
25
25
  }
26
26
  }
27
+ .mfui-benefits-pictures__content_h-align_center {
28
+ text-align: center;
29
+ }
27
30
  .mfui-benefits-pictures__img {
28
31
  max-width: 100%;
29
32
  margin-bottom: 32px;
package/dist/lib/components/BenefitsPictures/types.d.ts CHANGED
@@ -1,8 +1,9 @@
1
+ /// <reference types="react" />
1
2
  export interface IBenefit {
2
3
  /** Заголовок бенефита */
3
4
  title?: string;
4
5
  /** Основной текст в бенефите */
5
- text?: string;
6
+ text?: string | React.ReactNode | React.ReactNode[];
6
7
  /** Изображение */
7
8
  img: string;
8
9
  /** Значение тега alt для изображения */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "5.3.0",
3
+ "version": "5.4.1",
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.16.0",
51
+ "@megafon/ui-icons": "^2.18.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,7 +82,7 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@babel/runtime": "^7.8.4",
85
- "@megafon/ui-core": "^5.4.2",
85
+ "@megafon/ui-core": "^5.4.4",
86
86
  "@megafon/ui-helpers": "^2.5.4",
87
87
  "core-js": "^3.6.4",
88
88
  "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
90
90
  "prop-types": "^15.7.2",
91
91
  "swiper": "^6.5.6"
92
92
  },
93
- "gitHead": "18cb80b0ac6513b2ad8f31167461aefbb226a6c2"
93
+ "gitHead": "471b8bdf93ee77158913a50f2650c9a954949a93"
94
94
  }