@megafon/ui-shared 3.3.3 → 3.4.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,38 @@
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
+ # [3.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.5...@megafon/ui-shared@3.4.0) (2022-05-30)
7
+
8
+
9
+ ### Features
10
+
11
+ * **instructions:** add swipe to picture ([eb9eb09](https://github.com/MegafonWebLab/megafon-ui/commit/eb9eb0991444e113baf95d2d014d1c690cd1e99a))
12
+ * **textwithicon:** add isFullWidth and centeringOnMobile props ([b86ad8b](https://github.com/MegafonWebLab/megafon-ui/commit/b86ad8b1ad5e41c87e83ebadeb3a0a157bc41a2c))
13
+
14
+
15
+
16
+
17
+
18
+ ## [3.3.5](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.4...@megafon/ui-shared@3.3.5) (2022-05-27)
19
+
20
+ **Note:** Version bump only for package @megafon/ui-shared
21
+
22
+
23
+
24
+
25
+
26
+ ## [3.3.4](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.3...@megafon/ui-shared@3.3.4) (2022-05-24)
27
+
28
+
29
+ ### Bug Fixes
30
+
31
+ * **instructions:** remove css prorerty filter for image ([d4ee221](https://github.com/MegafonWebLab/megafon-ui/commit/d4ee22123565b82ec777c1526093a94251e59809))
32
+ * **picturewithdescription:** fix clearing indents for first and last element ([d9263e3](https://github.com/MegafonWebLab/megafon-ui/commit/d9263e3670b2d493ec4bf194a2cdd6440d1ea86f))
33
+
34
+
35
+
36
+
37
+
6
38
  ## [3.3.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@3.3.2...@megafon/ui-shared@3.3.3) (2022-05-17)
7
39
 
8
40
  **Note:** Version bump only for package @megafon/ui-shared
@@ -89,6 +89,9 @@ h5 {
89
89
  .mfui-instructions__swiper-img {
90
90
  width: 100%;
91
91
  height: 100%;
92
+ }
93
+ .mfui-instructions__swiper-img_video {
94
+ /* hack for fix not white video background */
92
95
  -webkit-filter: brightness(108.5%);
93
96
  filter: brightness(108.5%);
94
97
  }
@@ -78,13 +78,19 @@ var Instructions = function Instructions(_ref) {
78
78
  swiperInstance && swiperInstance.slideTo(ind);
79
79
  };
80
80
  }, [swiperInstance]);
81
+ var handleSlideChange = React.useCallback(function (_ref2) {
82
+ var activeIndex = _ref2.activeIndex;
83
+ setSlideIndex(activeIndex);
84
+ }, []);
81
85
  var renderVideo = React.useCallback(function (mediaUrl, index) {
82
86
  return /*#__PURE__*/React.createElement("video", _extends({
83
87
  loop: true,
84
88
  muted: true,
85
89
  autoPlay: true,
86
90
  playsInline: true,
87
- className: cn('swiper-img')
91
+ className: cn('swiper-img', {
92
+ video: true
93
+ })
88
94
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/React.createElement("source", {
89
95
  src: mediaUrl,
90
96
  type: "video/mp4"
@@ -92,12 +98,14 @@ var Instructions = function Instructions(_ref) {
92
98
  }, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
93
99
  var renderSlider = React.useCallback(function () {
94
100
  return /*#__PURE__*/React.createElement(Swiper, {
95
- className: cn('swiper'),
101
+ noSwiping: false,
96
102
  onSwiper: getSwiperInstance,
97
- noSwipingClass: swiperSlideCn
98
- }, instructionItems.map(function (_ref2, i) {
99
- var mediaUrl = _ref2.mediaUrl,
100
- isVideo = _ref2.isVideo;
103
+ noSwipingClass: swiperSlideCn,
104
+ onSlideChange: handleSlideChange,
105
+ className: cn('swiper')
106
+ }, instructionItems.map(function (_ref3, i) {
107
+ var mediaUrl = _ref3.mediaUrl,
108
+ isVideo = _ref3.isVideo;
101
109
  return /*#__PURE__*/React.createElement(SwiperSlide, {
102
110
  className: swiperSlideCn,
103
111
  key: i + mediaUrl
@@ -108,7 +116,7 @@ var Instructions = function Instructions(_ref) {
108
116
  className: cn('swiper-img', [instructionItemImg])
109
117
  })));
110
118
  }));
111
- }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
119
+ }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, handleSlideChange]);
112
120
  var renderTitle = React.useCallback(function (resolution) {
113
121
  return /*#__PURE__*/React.createElement(Header, {
114
122
  className: cn('title', {
@@ -140,8 +148,8 @@ var Instructions = function Instructions(_ref) {
140
148
  'text-after': !!text,
141
149
  desktop: true
142
150
  })
143
- }, instructionItems.map(function (_ref3, i) {
144
- var itemTitle = _ref3.title;
151
+ }, instructionItems.map(function (_ref4, i) {
152
+ var itemTitle = _ref4.title;
145
153
  return (
146
154
  /*#__PURE__*/
147
155
  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -169,8 +177,8 @@ var Instructions = function Instructions(_ref) {
169
177
  })
170
178
  }, /*#__PURE__*/React.createElement("div", {
171
179
  className: cn('articles-title-block')
172
- }, instructionItems.map(function (_ref4, i) {
173
- var itemTitle = _ref4.title;
180
+ }, instructionItems.map(function (_ref5, i) {
181
+ var itemTitle = _ref5.title;
174
182
  return slideIndex === i && /*#__PURE__*/React.createElement("div", _extends({
175
183
  key: i,
176
184
  "data-index": i
@@ -53,10 +53,10 @@ h5 {
53
53
  max-width: 550px;
54
54
  height: 100%;
55
55
  }
56
- .mfui-picture-with-description__content :first-child {
56
+ .mfui-picture-with-description__content > :first-child {
57
57
  margin-top: 0 !important;
58
58
  }
59
- .mfui-picture-with-description__content :last-child {
59
+ .mfui-picture-with-description__content > :last-child {
60
60
  margin-bottom: 0 !important;
61
61
  }
62
62
  @media screen and (min-width: 1024px) {
@@ -9,7 +9,7 @@ h5 {
9
9
  margin-bottom: 24px;
10
10
  }
11
11
  @media screen and (max-width: 767px) {
12
- .mfui-text-with-icon__header {
12
+ .mfui-text-with-icon_centering-on-mobile .mfui-text-with-icon__header {
13
13
  text-align: center;
14
14
  }
15
15
  }
@@ -12,6 +12,10 @@ export interface ITextWithIconProps {
12
12
  };
13
13
  /** Дополнительный класс для корневого элемента */
14
14
  className?: string;
15
+ /** Включить растягивание на всю ширину контейнера */
16
+ isFullWidth?: boolean;
17
+ /** Выравнивание по центру на мобильных */
18
+ centeringOnMobile?: boolean;
15
19
  /** Допустимый дочерний компонент */
16
20
  children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
17
21
  }
@@ -11,19 +11,34 @@ var TextWithIcon = function TextWithIcon(_ref) {
11
11
  rootRef = _ref.rootRef,
12
12
  dataAttrs = _ref.dataAttrs,
13
13
  className = _ref.className,
14
+ _ref$isFullWidth = _ref.isFullWidth,
15
+ isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
16
+ _ref$centeringOnMobil = _ref.centeringOnMobile,
17
+ centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
14
18
  children = _ref.children;
19
+
20
+ var renderContent = function renderContent() {
21
+ return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(Header, {
22
+ className: cn('header'),
23
+ as: "h5"
24
+ }, title), children);
25
+ };
26
+
27
+ var renderContentWithGrid = function renderContentWithGrid() {
28
+ return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
29
+ mobile: '12',
30
+ tablet: '7',
31
+ desktop: '6',
32
+ wide: '6'
33
+ }, renderContent()));
34
+ };
35
+
15
36
  return /*#__PURE__*/React.createElement("div", _extends({
16
- className: cn([className]),
37
+ className: cn({
38
+ 'centering-on-mobile': centeringOnMobile
39
+ }, [className]),
17
40
  ref: rootRef
18
- }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
19
- mobile: '12',
20
- tablet: '7',
21
- desktop: '6',
22
- wide: '6'
23
- }, title && /*#__PURE__*/React.createElement(Header, {
24
- className: cn('header'),
25
- as: "h5"
26
- }, title), children)));
41
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isFullWidth ? renderContent() : renderContentWithGrid());
27
42
  };
28
43
 
29
44
  TextWithIcon.propTypes = {
@@ -35,6 +50,8 @@ TextWithIcon.propTypes = {
35
50
  root: PropTypes.objectOf(PropTypes.string.isRequired)
36
51
  }),
37
52
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
53
+ isFullWidth: PropTypes.bool,
54
+ centeringOnMobile: PropTypes.bool,
38
55
  className: PropTypes.string
39
56
  };
40
57
  export default TextWithIcon;
@@ -13,14 +13,6 @@ h5 {
13
13
  -ms-flex-align: center;
14
14
  align-items: center;
15
15
  }
16
- @media screen and (max-width: 767px) {
17
- .mfui-text-with-icon-item {
18
- -webkit-box-orient: vertical;
19
- -webkit-box-direction: normal;
20
- -ms-flex-direction: column;
21
- flex-direction: column;
22
- }
23
- }
24
16
  .mfui-text-with-icon-item:not(:first-of-type) {
25
17
  margin-top: 16px;
26
18
  }
@@ -34,16 +26,25 @@ h5 {
34
26
  min-width: 40px;
35
27
  height: 40px;
36
28
  min-height: 40px;
29
+ margin-right: 16px;
37
30
  overflow: hidden;
38
31
  }
39
- @media screen and (min-width: 768px) {
40
- .mfui-text-with-icon-item__svg-icon {
41
- margin-right: 16px;
32
+ @media screen and (max-width: 767px) {
33
+ .mfui-text-with-icon-item_centering-on-mobile {
34
+ -webkit-box-orient: vertical;
35
+ -webkit-box-direction: normal;
36
+ -ms-flex-direction: column;
37
+ flex-direction: column;
42
38
  }
43
39
  }
44
40
  @media screen and (max-width: 767px) {
45
- .mfui-text-with-icon-item__text {
41
+ .mfui-text-with-icon-item_centering-on-mobile .mfui-text-with-icon-item__text {
46
42
  margin-top: 12px;
47
43
  text-align: center;
48
44
  }
49
45
  }
46
+ @media screen and (max-width: 767px) {
47
+ .mfui-text-with-icon-item_centering-on-mobile .mfui-text-with-icon-item__svg-icon {
48
+ margin-right: 0;
49
+ }
50
+ }
@@ -11,6 +11,8 @@ export interface ITextWithIconItem {
11
11
  dataAttrs?: {
12
12
  root?: Record<string, string>;
13
13
  };
14
+ /** Выравнивание по центру на мобильных */
15
+ centeringOnMobile?: boolean;
14
16
  /** Дополнительный класс для корневого элемента */
15
17
  className?: string;
16
18
  }
@@ -10,9 +10,13 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
10
10
  icon = _ref.icon,
11
11
  rootRef = _ref.rootRef,
12
12
  dataAttrs = _ref.dataAttrs,
13
+ _ref$centeringOnMobil = _ref.centeringOnMobile,
14
+ centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
13
15
  className = _ref.className;
14
16
  return /*#__PURE__*/React.createElement("div", _extends({
15
- className: cn([className]),
17
+ className: cn({
18
+ 'centering-on-mobile': centeringOnMobile
19
+ }, [className]),
16
20
  ref: rootRef
17
21
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
18
22
  className: cn('svg-icon')
@@ -30,6 +34,7 @@ TextWithIconItem.propTypes = {
30
34
  dataAttrs: PropTypes.shape({
31
35
  root: PropTypes.objectOf(PropTypes.string.isRequired)
32
36
  }),
37
+ centeringOnMobile: PropTypes.bool,
33
38
  className: PropTypes.string
34
39
  };
35
40
  export default TextWithIconItem;
@@ -89,6 +89,9 @@ h5 {
89
89
  .mfui-instructions__swiper-img {
90
90
  width: 100%;
91
91
  height: 100%;
92
+ }
93
+ .mfui-instructions__swiper-img_video {
94
+ /* hack for fix not white video background */
92
95
  -webkit-filter: brightness(108.5%);
93
96
  filter: brightness(108.5%);
94
97
  }
@@ -99,13 +99,20 @@ var Instructions = function Instructions(_ref) {
99
99
  };
100
100
  }, [swiperInstance]);
101
101
 
102
+ var handleSlideChange = _react["default"].useCallback(function (_ref2) {
103
+ var activeIndex = _ref2.activeIndex;
104
+ setSlideIndex(activeIndex);
105
+ }, []);
106
+
102
107
  var renderVideo = _react["default"].useCallback(function (mediaUrl, index) {
103
108
  return /*#__PURE__*/_react["default"].createElement("video", (0, _extends2["default"])({
104
109
  loop: true,
105
110
  muted: true,
106
111
  autoPlay: true,
107
112
  playsInline: true,
108
- className: cn('swiper-img')
113
+ className: cn('swiper-img', {
114
+ video: true
115
+ })
109
116
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, index + 1)), /*#__PURE__*/_react["default"].createElement("source", {
110
117
  src: mediaUrl,
111
118
  type: "video/mp4"
@@ -114,12 +121,14 @@ var Instructions = function Instructions(_ref) {
114
121
 
115
122
  var renderSlider = _react["default"].useCallback(function () {
116
123
  return /*#__PURE__*/_react["default"].createElement(_react2.Swiper, {
117
- className: cn('swiper'),
124
+ noSwiping: false,
118
125
  onSwiper: getSwiperInstance,
119
- noSwipingClass: swiperSlideCn
120
- }, instructionItems.map(function (_ref2, i) {
121
- var mediaUrl = _ref2.mediaUrl,
122
- isVideo = _ref2.isVideo;
126
+ noSwipingClass: swiperSlideCn,
127
+ onSlideChange: handleSlideChange,
128
+ className: cn('swiper')
129
+ }, instructionItems.map(function (_ref3, i) {
130
+ var mediaUrl = _ref3.mediaUrl,
131
+ isVideo = _ref3.isVideo;
123
132
  return /*#__PURE__*/_react["default"].createElement(_react2.SwiperSlide, {
124
133
  className: swiperSlideCn,
125
134
  key: i + mediaUrl
@@ -130,7 +139,7 @@ var Instructions = function Instructions(_ref) {
130
139
  className: cn('swiper-img', [instructionItemImg])
131
140
  })));
132
141
  }));
133
- }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image]);
142
+ }, [getSwiperInstance, instructionItemImg, instructionItems, renderVideo, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image, handleSlideChange]);
134
143
 
135
144
  var renderTitle = _react["default"].useCallback(function (resolution) {
136
145
  return /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
@@ -166,8 +175,8 @@ var Instructions = function Instructions(_ref) {
166
175
  'text-after': !!text,
167
176
  desktop: true
168
177
  })
169
- }, instructionItems.map(function (_ref3, i) {
170
- var itemTitle = _ref3.title;
178
+ }, instructionItems.map(function (_ref4, i) {
179
+ var itemTitle = _ref4.title;
171
180
  return (
172
181
  /*#__PURE__*/
173
182
  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
@@ -196,8 +205,8 @@ var Instructions = function Instructions(_ref) {
196
205
  })
197
206
  }, /*#__PURE__*/_react["default"].createElement("div", {
198
207
  className: cn('articles-title-block')
199
- }, instructionItems.map(function (_ref4, i) {
200
- var itemTitle = _ref4.title;
208
+ }, instructionItems.map(function (_ref5, i) {
209
+ var itemTitle = _ref5.title;
201
210
  return slideIndex === i && /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
202
211
  key: i,
203
212
  "data-index": i
@@ -53,10 +53,10 @@ h5 {
53
53
  max-width: 550px;
54
54
  height: 100%;
55
55
  }
56
- .mfui-picture-with-description__content :first-child {
56
+ .mfui-picture-with-description__content > :first-child {
57
57
  margin-top: 0 !important;
58
58
  }
59
- .mfui-picture-with-description__content :last-child {
59
+ .mfui-picture-with-description__content > :last-child {
60
60
  margin-bottom: 0 !important;
61
61
  }
62
62
  @media screen and (min-width: 1024px) {
@@ -9,7 +9,7 @@ h5 {
9
9
  margin-bottom: 24px;
10
10
  }
11
11
  @media screen and (max-width: 767px) {
12
- .mfui-text-with-icon__header {
12
+ .mfui-text-with-icon_centering-on-mobile .mfui-text-with-icon__header {
13
13
  text-align: center;
14
14
  }
15
15
  }
@@ -12,6 +12,10 @@ export interface ITextWithIconProps {
12
12
  };
13
13
  /** Дополнительный класс для корневого элемента */
14
14
  className?: string;
15
+ /** Включить растягивание на всю ширину контейнера */
16
+ isFullWidth?: boolean;
17
+ /** Выравнивание по центру на мобильных */
18
+ centeringOnMobile?: boolean;
15
19
  /** Допустимый дочерний компонент */
16
20
  children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
17
21
  }
@@ -30,19 +30,34 @@ var TextWithIcon = function TextWithIcon(_ref) {
30
30
  rootRef = _ref.rootRef,
31
31
  dataAttrs = _ref.dataAttrs,
32
32
  className = _ref.className,
33
+ _ref$isFullWidth = _ref.isFullWidth,
34
+ isFullWidth = _ref$isFullWidth === void 0 ? false : _ref$isFullWidth,
35
+ _ref$centeringOnMobil = _ref.centeringOnMobile,
36
+ centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
33
37
  children = _ref.children;
38
+
39
+ var renderContent = function renderContent() {
40
+ return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
41
+ className: cn('header'),
42
+ as: "h5"
43
+ }, title), children);
44
+ };
45
+
46
+ var renderContentWithGrid = function renderContentWithGrid() {
47
+ return /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
48
+ mobile: '12',
49
+ tablet: '7',
50
+ desktop: '6',
51
+ wide: '6'
52
+ }, renderContent()));
53
+ };
54
+
34
55
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
35
- className: cn([className]),
56
+ className: cn({
57
+ 'centering-on-mobile': centeringOnMobile
58
+ }, [className]),
36
59
  ref: rootRef
37
- }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_uiCore.Grid, null, /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
38
- mobile: '12',
39
- tablet: '7',
40
- desktop: '6',
41
- wide: '6'
42
- }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
43
- className: cn('header'),
44
- as: "h5"
45
- }, title), children)));
60
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), isFullWidth ? renderContent() : renderContentWithGrid());
46
61
  };
47
62
 
48
63
  TextWithIcon.propTypes = {
@@ -54,6 +69,8 @@ TextWithIcon.propTypes = {
54
69
  root: PropTypes.objectOf(PropTypes.string.isRequired)
55
70
  }),
56
71
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
72
+ isFullWidth: PropTypes.bool,
73
+ centeringOnMobile: PropTypes.bool,
57
74
  className: PropTypes.string
58
75
  };
59
76
  var _default = TextWithIcon;
@@ -13,14 +13,6 @@ h5 {
13
13
  -ms-flex-align: center;
14
14
  align-items: center;
15
15
  }
16
- @media screen and (max-width: 767px) {
17
- .mfui-text-with-icon-item {
18
- -webkit-box-orient: vertical;
19
- -webkit-box-direction: normal;
20
- -ms-flex-direction: column;
21
- flex-direction: column;
22
- }
23
- }
24
16
  .mfui-text-with-icon-item:not(:first-of-type) {
25
17
  margin-top: 16px;
26
18
  }
@@ -34,16 +26,25 @@ h5 {
34
26
  min-width: 40px;
35
27
  height: 40px;
36
28
  min-height: 40px;
29
+ margin-right: 16px;
37
30
  overflow: hidden;
38
31
  }
39
- @media screen and (min-width: 768px) {
40
- .mfui-text-with-icon-item__svg-icon {
41
- margin-right: 16px;
32
+ @media screen and (max-width: 767px) {
33
+ .mfui-text-with-icon-item_centering-on-mobile {
34
+ -webkit-box-orient: vertical;
35
+ -webkit-box-direction: normal;
36
+ -ms-flex-direction: column;
37
+ flex-direction: column;
42
38
  }
43
39
  }
44
40
  @media screen and (max-width: 767px) {
45
- .mfui-text-with-icon-item__text {
41
+ .mfui-text-with-icon-item_centering-on-mobile .mfui-text-with-icon-item__text {
46
42
  margin-top: 12px;
47
43
  text-align: center;
48
44
  }
49
45
  }
46
+ @media screen and (max-width: 767px) {
47
+ .mfui-text-with-icon-item_centering-on-mobile .mfui-text-with-icon-item__svg-icon {
48
+ margin-right: 0;
49
+ }
50
+ }
@@ -11,6 +11,8 @@ export interface ITextWithIconItem {
11
11
  dataAttrs?: {
12
12
  root?: Record<string, string>;
13
13
  };
14
+ /** Выравнивание по центру на мобильных */
15
+ centeringOnMobile?: boolean;
14
16
  /** Дополнительный класс для корневого элемента */
15
17
  className?: string;
16
18
  }
@@ -28,9 +28,13 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
28
28
  icon = _ref.icon,
29
29
  rootRef = _ref.rootRef,
30
30
  dataAttrs = _ref.dataAttrs,
31
+ _ref$centeringOnMobil = _ref.centeringOnMobile,
32
+ centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
31
33
  className = _ref.className;
32
34
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
33
- className: cn([className]),
35
+ className: cn({
36
+ 'centering-on-mobile': centeringOnMobile
37
+ }, [className]),
34
38
  ref: rootRef
35
39
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
36
40
  className: cn('svg-icon')
@@ -48,6 +52,7 @@ TextWithIconItem.propTypes = {
48
52
  dataAttrs: PropTypes.shape({
49
53
  root: PropTypes.objectOf(PropTypes.string.isRequired)
50
54
  }),
55
+ centeringOnMobile: PropTypes.bool,
51
56
  className: PropTypes.string
52
57
  };
53
58
  var _default = TextWithIconItem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "3.3.3",
3
+ "version": "3.4.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -82,7 +82,7 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@babel/runtime": "^7.8.4",
85
- "@megafon/ui-core": "^3.8.0",
85
+ "@megafon/ui-core": "^3.10.0",
86
86
  "@megafon/ui-helpers": "^2.1.2",
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": "929d0fbafbdc4d2aa98f283f7c71dff21347542f"
93
+ "gitHead": "eca7dfc6c6f0f7317f404b989bb8d7bd5ec429ed"
94
94
  }