@megafon/ui-shared 5.14.0 → 5.16.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 +38 -0
- package/dist/es/components/Card/Card.css +52 -6
- package/dist/es/components/Card/Card.d.ts +7 -3
- package/dist/es/components/Card/Card.js +27 -6
- package/dist/es/components/Card/types.d.ts +6 -0
- package/dist/es/components/Container/Container.css +130 -1
- package/dist/es/components/ImageBanner/ImageBanner.css +37 -30
- package/dist/es/components/ImageBanner/ImageBanner.d.ts +9 -13
- package/dist/es/components/ImageBanner/ImageBanner.js +39 -28
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +8 -10
- package/dist/es/helpers/getColumnConfig.d.ts +1 -1
- package/dist/lib/components/Card/Card.css +52 -6
- package/dist/lib/components/Card/Card.d.ts +7 -3
- package/dist/lib/components/Card/Card.js +27 -6
- package/dist/lib/components/Card/types.d.ts +6 -0
- package/dist/lib/components/Container/Container.css +130 -1
- package/dist/lib/components/ImageBanner/ImageBanner.css +37 -30
- package/dist/lib/components/ImageBanner/ImageBanner.d.ts +9 -13
- package/dist/lib/components/ImageBanner/ImageBanner.js +40 -28
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +8 -10
- package/dist/lib/helpers/getColumnConfig.d.ts +1 -1
- package/package.json +4 -4
@@ -7,26 +7,28 @@ h5 {
|
|
7
7
|
}
|
8
8
|
.mfui-image-banner {
|
9
9
|
position: relative;
|
10
|
+
display: -webkit-box;
|
11
|
+
display: -ms-flexbox;
|
12
|
+
display: flex;
|
13
|
+
-webkit-box-orient: vertical;
|
14
|
+
-webkit-box-direction: normal;
|
15
|
+
-ms-flex-direction: column;
|
16
|
+
flex-direction: column;
|
17
|
+
-webkit-box-pack: justify;
|
18
|
+
-ms-flex-pack: justify;
|
19
|
+
justify-content: space-between;
|
10
20
|
overflow: hidden;
|
11
21
|
}
|
12
22
|
@media screen and (min-width: 1024px) {
|
13
23
|
.mfui-image-banner {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
@media screen and (min-width: 1024px) {
|
19
|
-
.mfui-image-banner__wrapper {
|
20
|
-
display: -webkit-box;
|
21
|
-
display: -ms-flexbox;
|
22
|
-
display: flex;
|
24
|
+
-webkit-box-orient: horizontal;
|
25
|
+
-webkit-box-direction: normal;
|
26
|
+
-ms-flex-direction: row;
|
27
|
+
flex-direction: row;
|
23
28
|
-webkit-box-align: center;
|
24
29
|
-ms-flex-align: center;
|
25
30
|
align-items: center;
|
26
|
-
|
27
|
-
-ms-flex-pack: justify;
|
28
|
-
justify-content: space-between;
|
29
|
-
height: 100%;
|
31
|
+
height: 420px;
|
30
32
|
}
|
31
33
|
}
|
32
34
|
.mfui-image-banner__picture {
|
@@ -38,18 +40,14 @@ h5 {
|
|
38
40
|
-webkit-box-pack: center;
|
39
41
|
-ms-flex-pack: center;
|
40
42
|
justify-content: center;
|
43
|
+
max-width: 672px;
|
41
44
|
}
|
42
45
|
@media screen and (min-width: 1024px) {
|
43
46
|
.mfui-image-banner__picture {
|
44
|
-
width:
|
47
|
+
width: 50%;
|
45
48
|
height: 100%;
|
46
49
|
}
|
47
50
|
}
|
48
|
-
@media screen and (min-width: 1280px) {
|
49
|
-
.mfui-image-banner__picture {
|
50
|
-
width: 408px;
|
51
|
-
}
|
52
|
-
}
|
53
51
|
.mfui-image-banner__picture_v-align_top {
|
54
52
|
-webkit-box-align: start;
|
55
53
|
-ms-flex-align: start;
|
@@ -65,18 +63,18 @@ h5 {
|
|
65
63
|
-ms-flex-align: end;
|
66
64
|
align-items: flex-end;
|
67
65
|
}
|
68
|
-
.mfui-image-
|
66
|
+
.mfui-image-banner__image {
|
69
67
|
display: block;
|
70
68
|
max-width: 100%;
|
71
|
-
max-height:
|
69
|
+
max-height: 150px;
|
72
70
|
}
|
73
71
|
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
74
|
-
.mfui-image-
|
75
|
-
max-height:
|
72
|
+
.mfui-image-banner__image {
|
73
|
+
max-height: 230px;
|
76
74
|
}
|
77
75
|
}
|
78
76
|
@media screen and (min-width: 1024px) {
|
79
|
-
.mfui-image-
|
77
|
+
.mfui-image-banner__image {
|
80
78
|
max-height: 100%;
|
81
79
|
-o-object-fit: contain;
|
82
80
|
object-fit: contain;
|
@@ -84,6 +82,9 @@ h5 {
|
|
84
82
|
}
|
85
83
|
.mfui-image-banner__content {
|
86
84
|
z-index: 1;
|
85
|
+
-webkit-box-flex: 1;
|
86
|
+
-ms-flex-positive: 1;
|
87
|
+
flex-grow: 1;
|
87
88
|
}
|
88
89
|
@media screen and (max-width: 1023px) {
|
89
90
|
.mfui-image-banner__content {
|
@@ -95,9 +96,10 @@ h5 {
|
|
95
96
|
text-align: center;
|
96
97
|
}
|
97
98
|
}
|
98
|
-
@media screen and (
|
99
|
-
.mfui-image-
|
100
|
-
|
99
|
+
@media screen and (min-width: 1024px) {
|
100
|
+
.mfui-image-banner__content {
|
101
|
+
width: 50%;
|
102
|
+
padding: 0 80px;
|
101
103
|
}
|
102
104
|
}
|
103
105
|
.mfui-image-banner__description {
|
@@ -192,7 +194,7 @@ h5 {
|
|
192
194
|
}
|
193
195
|
@media screen and (min-width: 1024px) {
|
194
196
|
.mfui-image-banner_auto-height .mfui-image-banner__content {
|
195
|
-
padding: 48px
|
197
|
+
padding: 48px 80px;
|
196
198
|
}
|
197
199
|
}
|
198
200
|
@media screen and (min-width: 1024px) {
|
@@ -201,7 +203,12 @@ h5 {
|
|
201
203
|
}
|
202
204
|
}
|
203
205
|
@media screen and (min-width: 1024px) {
|
204
|
-
.mfui-image-
|
206
|
+
.mfui-image-banner_has-image .mfui-image-banner__content {
|
207
|
+
padding-right: 0;
|
208
|
+
}
|
209
|
+
}
|
210
|
+
@media screen and (min-width: 1024px) {
|
211
|
+
.mfui-image-banner_full-width .mfui-image-banner__image {
|
205
212
|
position: absolute;
|
206
213
|
right: 0;
|
207
214
|
bottom: 0;
|
@@ -210,7 +217,7 @@ h5 {
|
|
210
217
|
}
|
211
218
|
}
|
212
219
|
@media screen and (min-width: 1024px) {
|
213
|
-
.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-
|
220
|
+
.mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image {
|
214
221
|
width: 100%;
|
215
222
|
height: 100%;
|
216
223
|
-o-object-fit: cover;
|
@@ -1,5 +1,4 @@
|
|
1
1
|
import React, { Ref } from 'react';
|
2
|
-
import { PriceBadge } from '@megafon/ui-core';
|
3
2
|
import './ImageBanner.less';
|
4
3
|
export declare const BackgroundColor: {
|
5
4
|
readonly TRANSPARENT: "transparent";
|
@@ -26,11 +25,6 @@ export declare const ImageVerticalAlign: {
|
|
26
25
|
readonly BOTTOM: "bottom";
|
27
26
|
};
|
28
27
|
export declare type ImageVerticalAlignType = typeof ImageVerticalAlign[keyof typeof ImageVerticalAlign];
|
29
|
-
declare type PriceBadgeTypes = React.ComponentProps<typeof PriceBadge>;
|
30
|
-
export declare type PriceBadgePropsType = Pick<PriceBadgeTypes, 'iconType'> & {
|
31
|
-
/** Текст бейджа */
|
32
|
-
text: string;
|
33
|
-
};
|
34
28
|
export interface IImageBannerProps {
|
35
29
|
/** Дополнительные data атрибуты к внутренним элементам */
|
36
30
|
dataAttrs?: {
|
@@ -43,22 +37,26 @@ export interface IImageBannerProps {
|
|
43
37
|
classes?: {
|
44
38
|
root?: string;
|
45
39
|
image?: string;
|
40
|
+
imageSource?: string;
|
46
41
|
title?: string;
|
47
42
|
description?: string;
|
48
43
|
cost?: string;
|
49
44
|
badgesContainer?: string;
|
50
45
|
badges?: string;
|
51
|
-
badge?: string;
|
52
46
|
adBlock?: string;
|
53
47
|
};
|
54
48
|
/** Ссылка на корневой элемент */
|
55
49
|
rootRef?: Ref<HTMLDivElement>;
|
56
50
|
/** Заголовок */
|
57
|
-
title
|
51
|
+
title?: string | React.ReactNode | React.ReactNode[];
|
58
52
|
/** Текст-описание */
|
59
53
|
description?: string | React.ReactNode | React.ReactNode[];
|
60
54
|
/** Строка со стоимостью услуги */
|
61
55
|
cost?: string;
|
56
|
+
/** Тег заголовка на разрешении экрана 0-767 */
|
57
|
+
headerLevelMobile?: 'h1' | 'h2';
|
58
|
+
/** Тег заголовка на разрешении экрана 768+ */
|
59
|
+
headerLevel?: 'h1' | 'h2';
|
62
60
|
/** Фоновый цвет */
|
63
61
|
backgroundColor?: BackgroundColorType;
|
64
62
|
/** Радиус границы */
|
@@ -79,12 +77,10 @@ export interface IImageBannerProps {
|
|
79
77
|
autoHeight?: boolean;
|
80
78
|
/** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
|
81
79
|
isImageFullWidth?: boolean;
|
82
|
-
/**
|
83
|
-
badges?:
|
84
|
-
/** Дополнительный отступ снизу при использовании в баннере */
|
85
|
-
hasBottomOffset?: boolean;
|
80
|
+
/** Бейджи */
|
81
|
+
badges?: JSX.Element[] | JSX.Element;
|
86
82
|
/** Элемент блока с рекламой */
|
87
|
-
adBlock?: JSX.Element;
|
83
|
+
adBlock?: JSX.Element | null;
|
88
84
|
}
|
89
85
|
declare const ImageBanner: React.FC<IImageBannerProps>;
|
90
86
|
export default ImageBanner;
|
@@ -9,12 +9,12 @@ exports["default"] = exports.ImageVerticalAlign = exports.NavTheme = exports.Rad
|
|
9
9
|
|
10
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
11
11
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13
|
+
|
12
14
|
require("core-js/modules/es.symbol.js");
|
13
15
|
|
14
16
|
require("core-js/modules/es.symbol.description.js");
|
15
17
|
|
16
|
-
require("core-js/modules/es.array.map.js");
|
17
|
-
|
18
18
|
require("core-js/modules/es.array.concat.js");
|
19
19
|
|
20
20
|
require("core-js/modules/es.object.values.js");
|
@@ -105,33 +105,47 @@ var ImageBanner = function ImageBanner(_ref2) {
|
|
105
105
|
title = _ref2.title,
|
106
106
|
description = _ref2.description,
|
107
107
|
cost = _ref2.cost,
|
108
|
+
_ref2$headerLevelMobi = _ref2.headerLevelMobile,
|
109
|
+
headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
|
110
|
+
_ref2$headerLevel = _ref2.headerLevel,
|
111
|
+
headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
|
108
112
|
_ref2$backgroundColor = _ref2.backgroundColor,
|
109
113
|
backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
|
110
114
|
_ref2$radius = _ref2.radius,
|
111
115
|
radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
|
112
116
|
autoHeight = _ref2.autoHeight,
|
113
117
|
isImageFullWidth = _ref2.isImageFullWidth,
|
114
|
-
|
115
|
-
badges = _ref2$badges === void 0 ? [] : _ref2$badges,
|
116
|
-
hasBottomOffset = _ref2.hasBottomOffset,
|
118
|
+
badges = _ref2.badges,
|
117
119
|
adBlock = _ref2.adBlock,
|
118
120
|
_ref2$children = _ref2.children,
|
119
121
|
children = _ref2$children === void 0 ? [] : _ref2$children;
|
122
|
+
|
123
|
+
var _React$useState = _react["default"].useState(false),
|
124
|
+
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
|
125
|
+
isMobile = _React$useState2[0],
|
126
|
+
setIsMobile = _React$useState2[1];
|
127
|
+
|
128
|
+
_react["default"].useEffect(function () {
|
129
|
+
var mediaQuery = window.matchMedia("(max-width: ".concat(_uiHelpers.breakpoints.MOBILE_MIDDLE_END, "px)"));
|
130
|
+
|
131
|
+
var handleMediaChange = function handleMediaChange(_ref3) {
|
132
|
+
var matches = _ref3.matches;
|
133
|
+
setIsMobile(matches);
|
134
|
+
};
|
135
|
+
|
136
|
+
setIsMobile(mediaQuery.matches);
|
137
|
+
mediaQuery.addEventListener('change', handleMediaChange);
|
138
|
+
return function () {
|
139
|
+
mediaQuery.removeEventListener('change', handleMediaChange);
|
140
|
+
};
|
141
|
+
}, []);
|
142
|
+
|
120
143
|
var navTheme = getTheme(backgroundColor);
|
121
144
|
var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
|
122
145
|
|
123
|
-
var renderBadges = !!badges
|
146
|
+
var renderBadges = !!badges && /*#__PURE__*/_react["default"].createElement("div", {
|
124
147
|
className: cn('badges', [classes.badges])
|
125
|
-
}, badges
|
126
|
-
var text = _ref3.text,
|
127
|
-
iconType = _ref3.iconType;
|
128
|
-
return /*#__PURE__*/_react["default"].createElement(_uiCore.PriceBadge, {
|
129
|
-
className: classes.badge,
|
130
|
-
theme: navTheme,
|
131
|
-
iconType: iconType,
|
132
|
-
key: text
|
133
|
-
}, text);
|
134
|
-
}));
|
148
|
+
}, badges);
|
135
149
|
|
136
150
|
var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
|
137
151
|
className: cn('ad-block', [classes.adBlock])
|
@@ -143,7 +157,8 @@ var ImageBanner = function ImageBanner(_ref2) {
|
|
143
157
|
className: cn('badges-container', [classes.badgesContainer])
|
144
158
|
}, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
|
145
159
|
className: cn('title', [classes.title]),
|
146
|
-
color: "inherit"
|
160
|
+
color: "inherit",
|
161
|
+
as: isMobile ? headerLevelMobile : headerLevel
|
147
162
|
}, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
|
148
163
|
className: cn('description', [classes.description]),
|
149
164
|
as: "h5",
|
@@ -159,10 +174,11 @@ var ImageBanner = function ImageBanner(_ref2) {
|
|
159
174
|
'v-align': imageVerticalAlign
|
160
175
|
})
|
161
176
|
}, /*#__PURE__*/_react["default"].createElement("source", {
|
177
|
+
className: classes.imageSource,
|
162
178
|
media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
|
163
179
|
srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
|
164
180
|
}), /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
|
165
|
-
className: cn('
|
181
|
+
className: cn('image', [classes.image]),
|
166
182
|
src: imageMobile || imageMobile2x,
|
167
183
|
srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
|
168
184
|
alt: imageAlt
|
@@ -175,13 +191,10 @@ var ImageBanner = function ImageBanner(_ref2) {
|
|
175
191
|
'has-image': hasImage,
|
176
192
|
'auto-height': autoHeight,
|
177
193
|
'full-width': isImageFullWidth,
|
178
|
-
'bottom-offset': hasBottomOffset && !hasImage,
|
179
194
|
radius: radius
|
180
195
|
}, [className, classes.root]),
|
181
196
|
ref: rootRef
|
182
|
-
}),
|
183
|
-
className: cn('wrapper')
|
184
|
-
}, renderContent, hasImage && renderImage));
|
197
|
+
}), renderContent, hasImage && renderImage);
|
185
198
|
};
|
186
199
|
|
187
200
|
ImageBanner.propTypes = {
|
@@ -193,6 +206,7 @@ ImageBanner.propTypes = {
|
|
193
206
|
classes: PropTypes.shape({
|
194
207
|
root: PropTypes.string,
|
195
208
|
image: PropTypes.string,
|
209
|
+
imageSource: PropTypes.string,
|
196
210
|
title: PropTypes.string,
|
197
211
|
description: PropTypes.string,
|
198
212
|
cost: PropTypes.string,
|
@@ -204,9 +218,11 @@ ImageBanner.propTypes = {
|
|
204
218
|
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
205
219
|
current: PropTypes.elementType
|
206
220
|
}), PropTypes.any])]),
|
207
|
-
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
|
221
|
+
title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
208
222
|
description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
209
223
|
cost: PropTypes.string,
|
224
|
+
headerLevelMobile: PropTypes.oneOf(['h1', 'h2']),
|
225
|
+
headerLevel: PropTypes.oneOf(['h1', 'h2']),
|
210
226
|
backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
|
211
227
|
radius: PropTypes.oneOf(Object.values(Radius)),
|
212
228
|
imageMobile: PropTypes.string,
|
@@ -217,11 +233,7 @@ ImageBanner.propTypes = {
|
|
217
233
|
imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
|
218
234
|
autoHeight: PropTypes.bool,
|
219
235
|
isImageFullWidth: PropTypes.bool,
|
220
|
-
badges: PropTypes.arrayOf(PropTypes.
|
221
|
-
iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
|
222
|
-
text: PropTypes.string.isRequired
|
223
|
-
}).isRequired),
|
224
|
-
hasBottomOffset: PropTypes.bool,
|
236
|
+
badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
|
225
237
|
adBlock: PropTypes.element
|
226
238
|
};
|
227
239
|
var _default = ImageBanner;
|
@@ -14,18 +14,16 @@ h5 {
|
|
14
14
|
align-items: center;
|
15
15
|
}
|
16
16
|
.mfui-text-with-icon-item:not(:first-of-type) {
|
17
|
-
margin-top:
|
18
|
-
}
|
19
|
-
@media screen and (max-width: 767px) {
|
20
|
-
.mfui-text-with-icon-item:not(:first-of-type) {
|
21
|
-
margin-top: 24px;
|
22
|
-
}
|
17
|
+
margin-top: 12px;
|
23
18
|
}
|
24
19
|
.mfui-text-with-icon-item__svg-icon {
|
25
|
-
width:
|
26
|
-
min-width:
|
27
|
-
height:
|
28
|
-
min-height:
|
20
|
+
width: 44px;
|
21
|
+
min-width: 44px;
|
22
|
+
height: 44px;
|
23
|
+
min-height: 44px;
|
29
24
|
margin-right: 16px;
|
25
|
+
padding: 6px;
|
26
|
+
border: 1px solid var(--spbSky2);
|
27
|
+
border-radius: 50%;
|
30
28
|
overflow: hidden;
|
31
29
|
}
|
@@ -1,2 +1,2 @@
|
|
1
1
|
import React from 'react';
|
2
|
-
export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("
|
2
|
+
export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@megafon/ui-shared",
|
3
|
-
"version": "5.
|
3
|
+
"version": "5.16.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.
|
51
|
+
"@megafon/ui-icons": "^2.26.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.
|
85
|
+
"@megafon/ui-core": "^5.18.0",
|
86
86
|
"@megafon/ui-helpers": "^2.6.0",
|
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": "083ea89de7d915f3d2d74aff90e4ec8213a235f5"
|
94
94
|
}
|