@megafon/ui-shared 5.15.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 +22 -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 +22 -13
- package/dist/es/components/ImageBanner/ImageBanner.d.ts +3 -9
- package/dist/es/components/ImageBanner/ImageBanner.js +8 -20
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +8 -10
- 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 +22 -13
- package/dist/lib/components/ImageBanner/ImageBanner.d.ts +3 -9
- package/dist/lib/components/ImageBanner/ImageBanner.js +7 -20
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +8 -10
- package/package.json +4 -4
@@ -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,12 +37,12 @@ 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
|
/** Ссылка на корневой элемент */
|
@@ -83,8 +77,8 @@ export interface IImageBannerProps {
|
|
83
77
|
autoHeight?: boolean;
|
84
78
|
/** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
|
85
79
|
isImageFullWidth?: boolean;
|
86
|
-
/**
|
87
|
-
badges?:
|
80
|
+
/** Бейджи */
|
81
|
+
badges?: JSX.Element[] | JSX.Element;
|
88
82
|
/** Элемент блока с рекламой */
|
89
83
|
adBlock?: JSX.Element | null;
|
90
84
|
}
|
@@ -15,8 +15,6 @@ require("core-js/modules/es.symbol.js");
|
|
15
15
|
|
16
16
|
require("core-js/modules/es.symbol.description.js");
|
17
17
|
|
18
|
-
require("core-js/modules/es.array.map.js");
|
19
|
-
|
20
18
|
require("core-js/modules/es.array.concat.js");
|
21
19
|
|
22
20
|
require("core-js/modules/es.object.values.js");
|
@@ -117,8 +115,7 @@ var ImageBanner = function ImageBanner(_ref2) {
|
|
117
115
|
radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
|
118
116
|
autoHeight = _ref2.autoHeight,
|
119
117
|
isImageFullWidth = _ref2.isImageFullWidth,
|
120
|
-
|
121
|
-
badges = _ref2$badges === void 0 ? [] : _ref2$badges,
|
118
|
+
badges = _ref2.badges,
|
122
119
|
adBlock = _ref2.adBlock,
|
123
120
|
_ref2$children = _ref2.children,
|
124
121
|
children = _ref2$children === void 0 ? [] : _ref2$children;
|
@@ -146,18 +143,9 @@ var ImageBanner = function ImageBanner(_ref2) {
|
|
146
143
|
var navTheme = getTheme(backgroundColor);
|
147
144
|
var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
|
148
145
|
|
149
|
-
var renderBadges = !!badges
|
146
|
+
var renderBadges = !!badges && /*#__PURE__*/_react["default"].createElement("div", {
|
150
147
|
className: cn('badges', [classes.badges])
|
151
|
-
}, badges
|
152
|
-
var text = _ref4.text,
|
153
|
-
iconType = _ref4.iconType;
|
154
|
-
return /*#__PURE__*/_react["default"].createElement(_uiCore.PriceBadge, {
|
155
|
-
className: classes.badge,
|
156
|
-
theme: navTheme,
|
157
|
-
iconType: iconType,
|
158
|
-
key: text
|
159
|
-
}, text);
|
160
|
-
}));
|
148
|
+
}, badges);
|
161
149
|
|
162
150
|
var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
|
163
151
|
className: cn('ad-block', [classes.adBlock])
|
@@ -186,10 +174,11 @@ var ImageBanner = function ImageBanner(_ref2) {
|
|
186
174
|
'v-align': imageVerticalAlign
|
187
175
|
})
|
188
176
|
}, /*#__PURE__*/_react["default"].createElement("source", {
|
177
|
+
className: classes.imageSource,
|
189
178
|
media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
|
190
179
|
srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
|
191
180
|
}), /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
|
192
|
-
className: cn('
|
181
|
+
className: cn('image', [classes.image]),
|
193
182
|
src: imageMobile || imageMobile2x,
|
194
183
|
srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
|
195
184
|
alt: imageAlt
|
@@ -217,6 +206,7 @@ ImageBanner.propTypes = {
|
|
217
206
|
classes: PropTypes.shape({
|
218
207
|
root: PropTypes.string,
|
219
208
|
image: PropTypes.string,
|
209
|
+
imageSource: PropTypes.string,
|
220
210
|
title: PropTypes.string,
|
221
211
|
description: PropTypes.string,
|
222
212
|
cost: PropTypes.string,
|
@@ -243,10 +233,7 @@ ImageBanner.propTypes = {
|
|
243
233
|
imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
|
244
234
|
autoHeight: PropTypes.bool,
|
245
235
|
isImageFullWidth: PropTypes.bool,
|
246
|
-
badges: PropTypes.arrayOf(PropTypes.
|
247
|
-
iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
|
248
|
-
text: PropTypes.string.isRequired
|
249
|
-
}).isRequired),
|
236
|
+
badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
|
250
237
|
adBlock: PropTypes.element
|
251
238
|
};
|
252
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
|
}
|
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
|
}
|