@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 +32 -0
- package/dist/es/components/Instructions/Instructions.css +3 -0
- package/dist/es/components/Instructions/Instructions.js +19 -11
- package/dist/es/components/PictureWithDescription/PictureWithDescription.css +2 -2
- package/dist/es/components/TextWithIcon/TextWithIcon.css +1 -1
- package/dist/es/components/TextWithIcon/TextWithIcon.d.ts +4 -0
- package/dist/es/components/TextWithIcon/TextWithIcon.js +27 -10
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +13 -12
- package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +2 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.js +6 -1
- package/dist/lib/components/Instructions/Instructions.css +3 -0
- package/dist/lib/components/Instructions/Instructions.js +20 -11
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +2 -2
- package/dist/lib/components/TextWithIcon/TextWithIcon.css +1 -1
- package/dist/lib/components/TextWithIcon/TextWithIcon.d.ts +4 -0
- package/dist/lib/components/TextWithIcon/TextWithIcon.js +27 -10
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +13 -12
- package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +2 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.js +6 -1
- package/package.json +3 -3
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
|
@@ -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
|
-
|
101
|
+
noSwiping: false,
|
96
102
|
onSwiper: getSwiperInstance,
|
97
|
-
noSwipingClass: swiperSlideCn
|
98
|
-
|
99
|
-
|
100
|
-
|
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 (
|
144
|
-
var itemTitle =
|
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 (
|
173
|
-
var itemTitle =
|
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) {
|
@@ -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(
|
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)),
|
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 (
|
40
|
-
.mfui-text-with-icon-
|
41
|
-
|
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
|
+
}
|
@@ -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(
|
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;
|
@@ -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
|
-
|
124
|
+
noSwiping: false,
|
118
125
|
onSwiper: getSwiperInstance,
|
119
|
-
noSwipingClass: swiperSlideCn
|
120
|
-
|
121
|
-
|
122
|
-
|
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 (
|
170
|
-
var itemTitle =
|
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 (
|
200
|
-
var itemTitle =
|
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) {
|
@@ -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(
|
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)),
|
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 (
|
40
|
-
.mfui-text-with-icon-
|
41
|
-
|
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
|
+
}
|
@@ -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(
|
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
|
+
"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.
|
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": "
|
93
|
+
"gitHead": "eca7dfc6c6f0f7317f404b989bb8d7bd5ec429ed"
|
94
94
|
}
|