@megafon/ui-shared 6.10.0 → 6.11.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.
- package/dist/es/components/ButtonsBox/ButtonsBox.css +34 -0
- package/dist/es/components/ButtonsBox/ButtonsBox.d.ts +48 -0
- package/dist/es/components/ButtonsBox/ButtonsBox.js +89 -0
- package/dist/es/components/Container/Container.css +526 -1
- package/dist/es/components/Container/Container.d.ts +9 -0
- package/dist/es/components/Container/Container.js +14 -3
- package/dist/es/components/InfoCards/InfoCards.d.ts +4 -1
- package/dist/es/components/InfoCards/InfoCards.js +14 -5
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css +30 -7
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.d.ts +4 -0
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js +20 -10
- package/dist/es/components/InfoCards/types.d.ts +6 -1
- package/dist/es/components/PromoCards/PromoCards.d.ts +28 -0
- package/dist/es/components/PromoCards/PromoCards.js +90 -0
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.css +157 -0
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.d.ts +18 -0
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.js +74 -0
- package/dist/es/components/PromoCards/types.d.ts +29 -0
- package/dist/es/components/PromoCards/types.js +0 -0
- package/dist/es/index.d.ts +3 -0
- package/dist/es/index.js +3 -0
- package/dist/lib/components/ButtonsBox/ButtonsBox.css +34 -0
- package/dist/lib/components/ButtonsBox/ButtonsBox.d.ts +48 -0
- package/dist/lib/components/ButtonsBox/ButtonsBox.js +110 -0
- package/dist/lib/components/Container/Container.css +526 -1
- package/dist/lib/components/Container/Container.d.ts +9 -0
- package/dist/lib/components/Container/Container.js +14 -3
- package/dist/lib/components/InfoCards/InfoCards.d.ts +4 -1
- package/dist/lib/components/InfoCards/InfoCards.js +16 -13
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.css +30 -7
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.d.ts +4 -0
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.js +19 -9
- package/dist/lib/components/InfoCards/types.d.ts +6 -1
- package/dist/lib/components/PromoCards/PromoCards.d.ts +28 -0
- package/dist/lib/components/PromoCards/PromoCards.js +113 -0
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.css +157 -0
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.d.ts +18 -0
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.js +96 -0
- package/dist/lib/components/PromoCards/types.d.ts +29 -0
- package/dist/lib/components/PromoCards/types.js +1 -0
- package/dist/lib/index.d.ts +3 -0
- package/dist/lib/index.js +24 -0
- package/package.json +3 -3
@@ -15,12 +15,21 @@ declare type Props = {
|
|
15
15
|
rootRef?: Ref<HTMLDivElement>;
|
16
16
|
/** Дополнительный класс корневого элемента */
|
17
17
|
className?: string;
|
18
|
+
/** Дополнительные классы для корневого и внутренних элементов */
|
19
|
+
classes?: {
|
20
|
+
root?: string;
|
21
|
+
inner?: string;
|
22
|
+
};
|
18
23
|
/** Цвет фона */
|
19
24
|
backgroundColor?: BackgroundColorType;
|
20
25
|
/** Отключить отступ сверху */
|
21
26
|
disablePaddingTop?: boolean;
|
22
27
|
/** Отключить отступ снизу */
|
23
28
|
disablePaddingBottom?: boolean;
|
29
|
+
/** Отключить скругление сверху */
|
30
|
+
disableRadiusTop?: boolean;
|
31
|
+
/** Отключить скругление снизу */
|
32
|
+
disableRadiusBottom?: boolean;
|
24
33
|
/** Включить тень в нижней части компонента */
|
25
34
|
bottomShadow?: boolean;
|
26
35
|
/** Предотвратить прохождение верхнего отступа дочернего компонента через верхнюю границу контейнера */
|
@@ -19,9 +19,12 @@ var Container = function Container(_ref) {
|
|
19
19
|
rootRef = _ref.rootRef,
|
20
20
|
id = _ref.id,
|
21
21
|
className = _ref.className,
|
22
|
+
classes = _ref.classes,
|
22
23
|
children = _ref.children,
|
23
24
|
disablePaddingTop = _ref.disablePaddingTop,
|
24
25
|
disablePaddingBottom = _ref.disablePaddingBottom,
|
26
|
+
disableRadiusTop = _ref.disableRadiusTop,
|
27
|
+
disableRadiusBottom = _ref.disableRadiusBottom,
|
25
28
|
_ref$bottomShadow = _ref.bottomShadow,
|
26
29
|
bottomShadow = _ref$bottomShadow === void 0 ? false : _ref$bottomShadow,
|
27
30
|
_ref$preventMarginTop = _ref.preventMarginTopCollapse,
|
@@ -31,26 +34,34 @@ var Container = function Container(_ref) {
|
|
31
34
|
'bg-color': backgroundColor,
|
32
35
|
'bottom-shadow': bottomShadow,
|
33
36
|
'disable-padding-top': disablePaddingTop,
|
34
|
-
'disable-padding-bottom': disablePaddingBottom
|
35
|
-
|
37
|
+
'disable-padding-bottom': disablePaddingBottom,
|
38
|
+
'disable-radius-top': disableRadiusTop,
|
39
|
+
'disable-radius-bottom': disableRadiusBottom
|
40
|
+
}, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
|
36
41
|
ref: rootRef,
|
37
42
|
id: id
|
38
43
|
}, /*#__PURE__*/React.createElement("div", {
|
39
44
|
className: cn('inner', {
|
40
45
|
prevent: preventMarginTopCollapse
|
41
|
-
})
|
46
|
+
}, [classes === null || classes === void 0 ? void 0 : classes.inner])
|
42
47
|
}, /*#__PURE__*/React.createElement(ContentArea, null, children)));
|
43
48
|
};
|
44
49
|
|
45
50
|
Container.propTypes = {
|
46
51
|
id: PropTypes.string,
|
47
52
|
className: PropTypes.string,
|
53
|
+
classes: PropTypes.shape({
|
54
|
+
root: PropTypes.string,
|
55
|
+
inner: PropTypes.string
|
56
|
+
}),
|
48
57
|
backgroundColor: PropTypes.oneOf(Object.values(BackgroundColors)),
|
49
58
|
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
50
59
|
current: PropTypes.elementType
|
51
60
|
}), PropTypes.any])]),
|
52
61
|
disablePaddingTop: PropTypes.bool,
|
53
62
|
disablePaddingBottom: PropTypes.bool,
|
63
|
+
disableRadiusTop: PropTypes.bool,
|
64
|
+
disableRadiusBottom: PropTypes.bool,
|
54
65
|
bottomShadow: PropTypes.bool,
|
55
66
|
preventMarginTopCollapse: PropTypes.bool
|
56
67
|
};
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import
|
1
|
+
import React, { Ref } from 'react';
|
2
2
|
import { IInfoCardData, IInfoCardSettings } from './types';
|
3
3
|
import './InfoCards.less';
|
4
4
|
export interface IInfoCards extends IInfoCardSettings {
|
@@ -8,6 +8,7 @@ export interface IInfoCards extends IInfoCardSettings {
|
|
8
8
|
classes?: {
|
9
9
|
root?: string;
|
10
10
|
card?: string;
|
11
|
+
cardTitle?: string;
|
11
12
|
};
|
12
13
|
/** Дополнительные data атрибуты к внутренним элементам */
|
13
14
|
dataAttrs?: {
|
@@ -16,6 +17,8 @@ export interface IInfoCards extends IInfoCardSettings {
|
|
16
17
|
};
|
17
18
|
/** Список карточек */
|
18
19
|
items: IInfoCardData[];
|
20
|
+
/** Ссылка на корневой элемент */
|
21
|
+
rootRef?: Ref<HTMLDivElement>;
|
19
22
|
}
|
20
23
|
declare const InfoCards: React.FC<IInfoCards>;
|
21
24
|
export default InfoCards;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import "core-js/modules/es.array.map.js";
|
3
3
|
import "core-js/modules/es.array.concat.js";
|
4
|
-
import
|
4
|
+
import React from 'react';
|
5
5
|
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
6
6
|
import PropTypes from 'prop-types';
|
7
7
|
import InfoCard from "./components/InfoCard/InfoCard";
|
@@ -18,13 +18,15 @@ var InfoCards = function InfoCards(_ref) {
|
|
18
18
|
imgPosition = _ref$imgPosition === void 0 ? 'top-left' : _ref$imgPosition,
|
19
19
|
_ref$background = _ref.background,
|
20
20
|
background = _ref$background === void 0 ? 'stroke' : _ref$background,
|
21
|
-
dataAttrs = _ref.dataAttrs
|
21
|
+
dataAttrs = _ref.dataAttrs,
|
22
|
+
rootRef = _ref.rootRef;
|
22
23
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
23
24
|
className: cn({
|
24
25
|
size: size,
|
25
26
|
position: imgPosition,
|
26
27
|
background: background
|
27
|
-
}, [className, classes === null || classes === void 0 ? void 0 : classes.root])
|
28
|
+
}, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
|
29
|
+
ref: rootRef
|
28
30
|
}), items.map(function (item, i) {
|
29
31
|
return /*#__PURE__*/React.createElement(InfoCard, _extends({}, item, {
|
30
32
|
className: classes === null || classes === void 0 ? void 0 : classes.card,
|
@@ -34,6 +36,9 @@ var InfoCards = function InfoCards(_ref) {
|
|
34
36
|
dataAttrs: {
|
35
37
|
root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
|
36
38
|
},
|
39
|
+
classes: {
|
40
|
+
title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
|
41
|
+
},
|
37
42
|
key: "".concat(item.title, "_").concat(i)
|
38
43
|
}));
|
39
44
|
}));
|
@@ -43,7 +48,8 @@ InfoCards.propTypes = {
|
|
43
48
|
className: PropTypes.string,
|
44
49
|
classes: PropTypes.shape({
|
45
50
|
root: PropTypes.string,
|
46
|
-
card: PropTypes.string
|
51
|
+
card: PropTypes.string,
|
52
|
+
cardTitle: PropTypes.string
|
47
53
|
}),
|
48
54
|
dataAttrs: PropTypes.shape({
|
49
55
|
root: PropTypes.objectOf(PropTypes.string.isRequired),
|
@@ -61,6 +67,9 @@ InfoCards.propTypes = {
|
|
61
67
|
target: PropTypes.oneOf(['_self', '_blank']),
|
62
68
|
rel: PropTypes.string,
|
63
69
|
moreInfo: PropTypes.string
|
64
|
-
}).isRequired).isRequired
|
70
|
+
}).isRequired).isRequired,
|
71
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
72
|
+
current: PropTypes.elementType
|
73
|
+
}), PropTypes.any])])
|
65
74
|
};
|
66
75
|
export default InfoCards;
|
@@ -58,7 +58,10 @@ h5 {
|
|
58
58
|
-webkit-transition: color 0.3s;
|
59
59
|
transition: color 0.3s;
|
60
60
|
}
|
61
|
-
.mfui-v6-info-
|
61
|
+
.mfui-v6-info-card_active {
|
62
|
+
cursor: pointer;
|
63
|
+
}
|
64
|
+
.mfui-v6-info-card_active:hover .mfui-v6-info-card__more-info {
|
62
65
|
color: var(--brandGreen);
|
63
66
|
}
|
64
67
|
.mfui-v6-info-card__more-info-text {
|
@@ -195,6 +198,26 @@ h5 {
|
|
195
198
|
.mfui-v6-info-card_position_right-side .mfui-v6-info-card__more-info {
|
196
199
|
padding-top: 8px;
|
197
200
|
}
|
201
|
+
@media screen and (min-width: 768px) {
|
202
|
+
.mfui-v6-info-card_size_big.mfui-v6-info-card_align-center {
|
203
|
+
-webkit-box-align: center;
|
204
|
+
-ms-flex-align: center;
|
205
|
+
align-items: center;
|
206
|
+
}
|
207
|
+
}
|
208
|
+
@media screen and (min-width: 768px) {
|
209
|
+
.mfui-v6-info-card_size_big.mfui-v6-info-card_align-center .mfui-v6-info-card__more-info {
|
210
|
+
margin-top: 0;
|
211
|
+
}
|
212
|
+
}
|
213
|
+
.mfui-v6-info-card_position_right-side.mfui-v6-info-card_align-center {
|
214
|
+
-webkit-box-align: center;
|
215
|
+
-ms-flex-align: center;
|
216
|
+
align-items: center;
|
217
|
+
}
|
218
|
+
.mfui-v6-info-card_position_right-side.mfui-v6-info-card_align-center .mfui-v6-info-card__more-info {
|
219
|
+
margin-top: 0;
|
220
|
+
}
|
198
221
|
.mfui-v6-info-card_background_stroke {
|
199
222
|
border: 1px solid var(--spbSky2);
|
200
223
|
}
|
@@ -218,20 +241,20 @@ h5 {
|
|
218
241
|
.mfui-v6-info-card_background_no {
|
219
242
|
padding: 0;
|
220
243
|
}
|
221
|
-
.mfui-v6-info-card_background_stroke.mfui-v6-info-
|
244
|
+
.mfui-v6-info-card_background_stroke.mfui-v6-info-card_active:hover {
|
222
245
|
background-color: var(--spbSky0);
|
223
246
|
}
|
224
|
-
.mfui-v6-info-card_background_shadow.mfui-v6-info-
|
225
|
-
.mfui-v6-info-card_background_white.mfui-v6-info-
|
247
|
+
.mfui-v6-info-card_background_shadow.mfui-v6-info-card_active:hover,
|
248
|
+
.mfui-v6-info-card_background_white.mfui-v6-info-card_active:hover {
|
226
249
|
-webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
|
227
250
|
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
|
228
251
|
}
|
229
|
-
.mfui-v6-info-card_background_gray.mfui-v6-info-
|
252
|
+
.mfui-v6-info-card_background_gray.mfui-v6-info-card_active:hover {
|
230
253
|
background-color: var(--spbSky1);
|
231
254
|
}
|
232
|
-
.mfui-v6-info-card_background_purple.mfui-v6-info-
|
255
|
+
.mfui-v6-info-card_background_purple.mfui-v6-info-card_active:hover {
|
233
256
|
background-color: var(--buttonHoverPurpleSoft);
|
234
257
|
}
|
235
|
-
.mfui-v6-info-card_background_green.mfui-v6-info-
|
258
|
+
.mfui-v6-info-card_background_green.mfui-v6-info-card_active:hover {
|
236
259
|
background-color: var(--buttonHoverGreenSoft);
|
237
260
|
}
|
@@ -3,6 +3,10 @@ import { IInfoCardData, IInfoCardSettings } from '../../types';
|
|
3
3
|
import './InfoCard.less';
|
4
4
|
export interface IInfoCard extends IInfoCardSettings, IInfoCardData {
|
5
5
|
className?: string;
|
6
|
+
classes?: {
|
7
|
+
root?: string;
|
8
|
+
title?: string;
|
9
|
+
};
|
6
10
|
dataAttrs?: {
|
7
11
|
root?: Record<string, string>;
|
8
12
|
title?: Record<string, string>;
|
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import "core-js/modules/es.symbol.js";
|
3
3
|
import "core-js/modules/es.symbol.description.js";
|
4
4
|
import * as React from 'react';
|
5
|
-
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
5
|
+
import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
|
6
6
|
import PropTypes from 'prop-types';
|
7
7
|
import { setRelAttribute } from "../../../../helpers/setRelAttribute";
|
8
8
|
import "./InfoCard.css";
|
@@ -35,20 +35,23 @@ var InfoCard = function InfoCard(_ref) {
|
|
35
35
|
href = _ref.href,
|
36
36
|
target = _ref.target,
|
37
37
|
rel = _ref.rel,
|
38
|
+
download = _ref.download,
|
38
39
|
moreInfo = _ref.moreInfo,
|
40
|
+
onClick = _ref.onClick,
|
39
41
|
_ref$size = _ref.size,
|
40
42
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
41
|
-
|
42
|
-
imgPosition = _ref$imgPosition === void 0 ? 'right-side' : _ref$imgPosition,
|
43
|
+
imgPosition = _ref.imgPosition,
|
43
44
|
_ref$background = _ref.background,
|
44
45
|
background = _ref$background === void 0 ? 'stroke' : _ref$background,
|
45
|
-
dataAttrs = _ref.dataAttrs
|
46
|
+
dataAttrs = _ref.dataAttrs,
|
47
|
+
classes = _ref.classes;
|
46
48
|
var RootElement = href ? 'a' : 'div';
|
47
49
|
var isBigSize = size === 'big';
|
48
50
|
var finalImgPosition = isBigSize ? false : imgPosition;
|
49
51
|
var isInvalidBackground = background === 'no' && (imgPosition === 'right-side' || size === 'big');
|
50
52
|
var finalBackground = isInvalidBackground ? 'stroke' : background;
|
51
53
|
var isLink = !!href;
|
54
|
+
var isActive = isLink || !!onClick;
|
52
55
|
|
53
56
|
var renderArrowRight = function renderArrowRight() {
|
54
57
|
var ArrowRight = isBigSize ? ArrowRight24 : ArrowRight16;
|
@@ -61,12 +64,15 @@ var InfoCard = function InfoCard(_ref) {
|
|
61
64
|
href: isLink ? href : undefined,
|
62
65
|
target: isLink ? target : undefined,
|
63
66
|
rel: isLink ? setRelAttribute(rel, target) : undefined,
|
67
|
+
download: isLink ? download : undefined,
|
68
|
+
onClick: onClick,
|
64
69
|
className: cn({
|
65
70
|
size: size,
|
66
71
|
position: finalImgPosition,
|
67
72
|
background: finalBackground,
|
68
|
-
|
69
|
-
|
73
|
+
active: isActive,
|
74
|
+
'align-center': !moreInfo
|
75
|
+
}, [className, classes === null || classes === void 0 ? void 0 : classes.root])
|
70
76
|
}), /*#__PURE__*/React.createElement("img", {
|
71
77
|
className: cn('image'),
|
72
78
|
src: imgSrc,
|
@@ -74,18 +80,22 @@ var InfoCard = function InfoCard(_ref) {
|
|
74
80
|
}), /*#__PURE__*/React.createElement("div", {
|
75
81
|
className: cn('content')
|
76
82
|
}, !!title && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
|
77
|
-
className: cn('title')
|
78
|
-
}), title), !!description && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
|
83
|
+
className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
|
84
|
+
}), convert(title, {})), !!description && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
|
79
85
|
className: cn('description')
|
80
|
-
}), description), !!moreInfo && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
|
86
|
+
}), convert(description, {})), !!moreInfo && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
|
81
87
|
className: cn('more-info')
|
82
88
|
}), /*#__PURE__*/React.createElement("span", {
|
83
89
|
className: cn('more-info-text')
|
84
|
-
}, moreInfo),
|
90
|
+
}, convert(moreInfo, {})), isActive && renderArrowRight())));
|
85
91
|
};
|
86
92
|
|
87
93
|
InfoCard.propTypes = {
|
88
94
|
className: PropTypes.string,
|
95
|
+
classes: PropTypes.shape({
|
96
|
+
root: PropTypes.string,
|
97
|
+
title: PropTypes.string
|
98
|
+
}),
|
89
99
|
dataAttrs: PropTypes.shape({
|
90
100
|
root: PropTypes.objectOf(PropTypes.string.isRequired),
|
91
101
|
title: PropTypes.objectOf(PropTypes.string.isRequired),
|
@@ -1,10 +1,11 @@
|
|
1
|
+
import React from 'react';
|
1
2
|
export interface IInfoCardSettings {
|
2
3
|
/** Размер карточки */
|
3
4
|
size?: 'big' | 'medium' | 'small';
|
4
5
|
/** Расположение изображения */
|
5
6
|
imgPosition?: 'right-side' | 'top-left';
|
6
7
|
/** Фон карточки */
|
7
|
-
background?: 'shadow' | 'stroke' | 'gray' | 'green' | 'purple' | 'white' | '
|
8
|
+
background?: 'shadow' | 'stroke' | 'gray' | 'green' | 'purple' | 'white' | 'no';
|
8
9
|
}
|
9
10
|
export interface IInfoCardData {
|
10
11
|
/** Заголовок */
|
@@ -21,6 +22,10 @@ export interface IInfoCardData {
|
|
21
22
|
target?: '_self' | '_blank';
|
22
23
|
/** Атрибут rel ссылки */
|
23
24
|
rel?: string;
|
25
|
+
/** Добавление атрибута download для ссылки */
|
26
|
+
download?: boolean;
|
24
27
|
/** Дополнительная информация */
|
25
28
|
moreInfo?: string;
|
29
|
+
/** Обработчик клика */
|
30
|
+
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
26
31
|
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { Carousel } from '@megafon/ui-core';
|
3
|
+
import { IPromoCardData, IPromoCardSettings } from './types';
|
4
|
+
declare type CarouselProps = React.ComponentProps<typeof Carousel>;
|
5
|
+
export interface IPromoCards extends IPromoCardSettings {
|
6
|
+
/** Список карточек. Минимальное количество 2 карточки */
|
7
|
+
items: IPromoCardData[];
|
8
|
+
/** Тема навигации для карусели */
|
9
|
+
carouselNavTheme?: CarouselProps['navTheme'];
|
10
|
+
/** Цвет градиента для карусели */
|
11
|
+
carouselGradientColor?: CarouselProps['gradientColor'];
|
12
|
+
/** Дополнительный css класс для корневого элемента */
|
13
|
+
className?: string;
|
14
|
+
/** Дополнительные css классы для корневого и внутренних элементов */
|
15
|
+
classes?: {
|
16
|
+
root?: string;
|
17
|
+
card?: string;
|
18
|
+
};
|
19
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
20
|
+
dataAttrs?: {
|
21
|
+
root?: Record<string, string>;
|
22
|
+
card?: Record<string, string>;
|
23
|
+
};
|
24
|
+
/** Ссылка на элемент */
|
25
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
26
|
+
}
|
27
|
+
declare const PromoCards: React.FC<IPromoCards>;
|
28
|
+
export default PromoCards;
|
@@ -0,0 +1,90 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
+
|
4
|
+
var _slidesSettings;
|
5
|
+
|
6
|
+
import "core-js/modules/es.array.map.js";
|
7
|
+
import * as React from 'react';
|
8
|
+
import { Carousel } from '@megafon/ui-core';
|
9
|
+
import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
|
10
|
+
import PropTypes from 'prop-types';
|
11
|
+
import PromoCard from "./components/PromoCard/PromoCard";
|
12
|
+
var slidesSettings = (_slidesSettings = {}, _defineProperty(_slidesSettings, breakpoints.MOBILE_SMALL_START, {
|
13
|
+
slidesPerView: 1,
|
14
|
+
spaceBetween: 16
|
15
|
+
}), _defineProperty(_slidesSettings, breakpoints.MOBILE_BIG_START, {
|
16
|
+
slidesPerView: 2,
|
17
|
+
spaceBetween: 20
|
18
|
+
}), _defineProperty(_slidesSettings, breakpoints.DESKTOP_SMALL_START, {
|
19
|
+
slidesPerView: 3,
|
20
|
+
spaceBetween: 20
|
21
|
+
}), _slidesSettings);
|
22
|
+
var MIN_ITEMS_COUNT = 2;
|
23
|
+
var cn = cnCreate('mfui-v6-promo-cards');
|
24
|
+
|
25
|
+
var PromoCards = function PromoCards(_ref) {
|
26
|
+
var items = _ref.items,
|
27
|
+
carouselNavTheme = _ref.carouselNavTheme,
|
28
|
+
carouselGradientColor = _ref.carouselGradientColor,
|
29
|
+
background = _ref.background,
|
30
|
+
dataAttrs = _ref.dataAttrs,
|
31
|
+
className = _ref.className,
|
32
|
+
classes = _ref.classes,
|
33
|
+
rootRef = _ref.rootRef;
|
34
|
+
|
35
|
+
if (items.length < MIN_ITEMS_COUNT) {
|
36
|
+
return null;
|
37
|
+
}
|
38
|
+
|
39
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
40
|
+
className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
|
41
|
+
ref: rootRef
|
42
|
+
}), /*#__PURE__*/React.createElement(Carousel, {
|
43
|
+
slidesSettings: slidesSettings,
|
44
|
+
navTheme: carouselNavTheme,
|
45
|
+
gradient: true,
|
46
|
+
gradientColor: carouselGradientColor
|
47
|
+
}, items.map(function (item, i) {
|
48
|
+
return /*#__PURE__*/React.createElement(PromoCard, _extends({}, item, {
|
49
|
+
background: background,
|
50
|
+
dataAttrs: {
|
51
|
+
root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
|
52
|
+
},
|
53
|
+
className: cn([classes === null || classes === void 0 ? void 0 : classes.card]),
|
54
|
+
key: i + item.title
|
55
|
+
}));
|
56
|
+
})));
|
57
|
+
};
|
58
|
+
|
59
|
+
PromoCards.propTypes = {
|
60
|
+
items: PropTypes.arrayOf(PropTypes.shape({
|
61
|
+
title: PropTypes.string.isRequired,
|
62
|
+
subtitle: PropTypes.string,
|
63
|
+
link: PropTypes.shape({
|
64
|
+
title: PropTypes.string.isRequired,
|
65
|
+
href: PropTypes.string.isRequired,
|
66
|
+
target: PropTypes.oneOf(['_self', '_blank']),
|
67
|
+
rel: PropTypes.string
|
68
|
+
}).isRequired,
|
69
|
+
image: PropTypes.shape({
|
70
|
+
src: PropTypes.string.isRequired,
|
71
|
+
src2x: PropTypes.string,
|
72
|
+
alt: PropTypes.string
|
73
|
+
}).isRequired,
|
74
|
+
logo: PropTypes.shape({
|
75
|
+
src: PropTypes.string,
|
76
|
+
alt: PropTypes.string
|
77
|
+
}),
|
78
|
+
badge: PropTypes.oneOf([PropTypes.element, null])
|
79
|
+
}).isRequired).isRequired,
|
80
|
+
background: PropTypes.oneOf(['white', 'gray', 'shadow']),
|
81
|
+
className: PropTypes.string,
|
82
|
+
classes: PropTypes.objectOf(PropTypes.string),
|
83
|
+
dataAttrs: PropTypes.objectOf(PropTypes.object),
|
84
|
+
carouselNavTheme: PropTypes.oneOf(['light', 'green']),
|
85
|
+
carouselGradientColor: PropTypes.oneOf(['green', 'default', 'black', 'spbSky0', 'spbSky1', 'spbSky2']),
|
86
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
87
|
+
current: PropTypes.elementType
|
88
|
+
}), PropTypes.any])])
|
89
|
+
};
|
90
|
+
export default PromoCards;
|
@@ -0,0 +1,157 @@
|
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-v6-promo-card {
|
9
|
+
display: -webkit-box;
|
10
|
+
display: -ms-flexbox;
|
11
|
+
display: flex;
|
12
|
+
-webkit-box-orient: vertical;
|
13
|
+
-webkit-box-direction: normal;
|
14
|
+
-ms-flex-direction: column;
|
15
|
+
flex-direction: column;
|
16
|
+
min-height: 100%;
|
17
|
+
border-radius: 24px;
|
18
|
+
color: var(--content);
|
19
|
+
text-decoration: none;
|
20
|
+
background-color: var(--base);
|
21
|
+
cursor: pointer;
|
22
|
+
-webkit-transition: background-color, 0.3s, 0.3s, -webkit-box-shadow;
|
23
|
+
transition: background-color, 0.3s, 0.3s, -webkit-box-shadow;
|
24
|
+
transition: background-color, 0.3s, box-shadow, 0.3s;
|
25
|
+
transition: background-color, 0.3s, box-shadow, 0.3s, -webkit-box-shadow;
|
26
|
+
}
|
27
|
+
.mfui-v6-promo-card_background_shadow {
|
28
|
+
-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
29
|
+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
30
|
+
}
|
31
|
+
.mfui-v6-promo-card_background_white:hover,
|
32
|
+
.mfui-v6-promo-card_background_shadow:hover {
|
33
|
+
text-decoration: none;
|
34
|
+
-webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
|
35
|
+
box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
|
36
|
+
}
|
37
|
+
.mfui-v6-promo-card_background_gray {
|
38
|
+
background-color: var(--spbSky0);
|
39
|
+
}
|
40
|
+
.mfui-v6-promo-card_background_gray:hover {
|
41
|
+
text-decoration: none;
|
42
|
+
background-color: var(--spbSky1);
|
43
|
+
}
|
44
|
+
.mfui-v6-promo-card__image {
|
45
|
+
width: 100%;
|
46
|
+
border-radius: inherit;
|
47
|
+
vertical-align: top;
|
48
|
+
}
|
49
|
+
.mfui-v6-promo-card__content {
|
50
|
+
position: relative;
|
51
|
+
display: -webkit-box;
|
52
|
+
display: -ms-flexbox;
|
53
|
+
display: flex;
|
54
|
+
-webkit-box-orient: vertical;
|
55
|
+
-webkit-box-direction: normal;
|
56
|
+
-ms-flex-direction: column;
|
57
|
+
flex-direction: column;
|
58
|
+
-webkit-box-flex: 1;
|
59
|
+
-ms-flex-positive: 1;
|
60
|
+
flex-grow: 1;
|
61
|
+
padding: 32px 24px;
|
62
|
+
}
|
63
|
+
@media screen and (min-width: 1280px) {
|
64
|
+
.mfui-v6-promo-card__content {
|
65
|
+
padding: 32px;
|
66
|
+
}
|
67
|
+
}
|
68
|
+
.mfui-v6-promo-card__badge {
|
69
|
+
position: absolute;
|
70
|
+
top: 0;
|
71
|
+
left: 24px;
|
72
|
+
translate: 0 -50%;
|
73
|
+
}
|
74
|
+
@media screen and (min-width: 1280px) {
|
75
|
+
.mfui-v6-promo-card__badge {
|
76
|
+
left: 32px;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
.mfui-v6-promo-card__logo {
|
80
|
+
position: absolute;
|
81
|
+
top: 0;
|
82
|
+
right: 44px;
|
83
|
+
border: 4px solid var(--base);
|
84
|
+
border-radius: 50%;
|
85
|
+
translate: 0 -50%;
|
86
|
+
background-color: var(--base);
|
87
|
+
-webkit-transition: border-color, 0.3s;
|
88
|
+
transition: border-color, 0.3s;
|
89
|
+
}
|
90
|
+
@media screen and (min-width: 1280px) {
|
91
|
+
.mfui-v6-promo-card__logo {
|
92
|
+
right: 52px;
|
93
|
+
}
|
94
|
+
}
|
95
|
+
.mfui-v6-promo-card__logo:before,
|
96
|
+
.mfui-v6-promo-card__logo:after {
|
97
|
+
content: '';
|
98
|
+
position: absolute;
|
99
|
+
top: 50%;
|
100
|
+
width: 10px;
|
101
|
+
height: 10px;
|
102
|
+
translate: 0 -100%;
|
103
|
+
}
|
104
|
+
.mfui-v6-promo-card__logo:before {
|
105
|
+
background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--base) 10px);
|
106
|
+
left: -12px;
|
107
|
+
}
|
108
|
+
.mfui-v6-promo-card__logo:after {
|
109
|
+
background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--base) 10px);
|
110
|
+
right: -12px;
|
111
|
+
}
|
112
|
+
.mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo {
|
113
|
+
border-color: var(--spbSky0);
|
114
|
+
background-color: var(--spbSky0);
|
115
|
+
}
|
116
|
+
.mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo:before {
|
117
|
+
background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--spbSky0) 10px);
|
118
|
+
}
|
119
|
+
.mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo:after {
|
120
|
+
background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--spbSky0) 10px);
|
121
|
+
}
|
122
|
+
.mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo {
|
123
|
+
border-color: var(--spbSky1);
|
124
|
+
background-color: var(--spbSky1);
|
125
|
+
}
|
126
|
+
.mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo:before {
|
127
|
+
background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--spbSky1) 10px);
|
128
|
+
}
|
129
|
+
.mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo:after {
|
130
|
+
background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--spbSky1) 10px);
|
131
|
+
}
|
132
|
+
.mfui-v6-promo-card__logo-img {
|
133
|
+
width: 56px;
|
134
|
+
height: 56px;
|
135
|
+
border: 1px solid var(--spbSky1);
|
136
|
+
border-radius: inherit;
|
137
|
+
vertical-align: top;
|
138
|
+
}
|
139
|
+
@media screen and (min-width: 768px) {
|
140
|
+
.mfui-v6-promo-card__logo-img {
|
141
|
+
width: 64px;
|
142
|
+
height: 64px;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
@media screen and (min-width: 1280px) {
|
146
|
+
.mfui-v6-promo-card__logo-img {
|
147
|
+
width: 72px;
|
148
|
+
height: 72px;
|
149
|
+
}
|
150
|
+
}
|
151
|
+
.mfui-v6-promo-card__subtitle {
|
152
|
+
margin-top: 8px;
|
153
|
+
}
|
154
|
+
.mfui-v6-promo-card__footer {
|
155
|
+
margin-top: auto;
|
156
|
+
padding-top: 16px;
|
157
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { IPromoCardData, IPromoCardSettings } from '../../types';
|
3
|
+
import './PromoCard.less';
|
4
|
+
export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
|
5
|
+
className?: string;
|
6
|
+
classes?: {
|
7
|
+
root?: string;
|
8
|
+
};
|
9
|
+
dataAttrs?: {
|
10
|
+
root?: Record<string, string>;
|
11
|
+
image?: Record<string, string>;
|
12
|
+
badge?: Record<string, string>;
|
13
|
+
logo?: Record<string, string>;
|
14
|
+
subtitle?: Record<string, string>;
|
15
|
+
};
|
16
|
+
}
|
17
|
+
declare const PromoCard: React.FC<IPromoCard>;
|
18
|
+
export default PromoCard;
|