@megafon/ui-shared 6.3.0 → 6.5.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 +29 -0
- package/dist/es/components/Card/Card.css +1 -1
- package/dist/es/components/Container/Container.css +934 -7
- package/dist/es/components/DarkGradientCards/DarkGradientCards.css +18 -0
- package/dist/es/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
- package/dist/es/components/DarkGradientCards/DarkGradientCards.js +88 -0
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css +175 -0
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js +52 -0
- package/dist/es/components/DarkGradientCards/types.d.ts +21 -0
- package/dist/es/components/DarkGradientCards/types.js +0 -0
- package/dist/es/components/InfoCards/InfoCards.css +75 -0
- package/dist/es/components/InfoCards/InfoCards.d.ts +21 -0
- package/dist/es/components/InfoCards/InfoCards.js +66 -0
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css +237 -0
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.d.ts +15 -0
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js +108 -0
- package/dist/es/components/InfoCards/types.d.ts +26 -0
- package/dist/es/components/InfoCards/types.js +0 -0
- package/dist/es/components/SidePictureCards/SidePictureCards.d.ts +22 -0
- package/dist/es/components/SidePictureCards/SidePictureCards.js +77 -0
- package/dist/es/components/SidePictureCards/components/SidePictureCard.css +183 -0
- package/dist/es/components/SidePictureCards/components/SidePictureCard.d.ts +16 -0
- package/dist/es/components/SidePictureCards/components/SidePictureCard.js +91 -0
- package/dist/es/components/SidePictureCards/types.d.ts +46 -0
- package/dist/es/components/SidePictureCards/types.js +0 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +16 -7
- package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +2 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.js +6 -1
- package/dist/es/hooks/useResolutions.d.ts +1 -0
- package/dist/es/hooks/useResolutions.js +12 -1
- package/dist/es/index.d.ts +6 -0
- package/dist/es/index.js +6 -0
- package/dist/lib/components/Card/Card.css +1 -1
- package/dist/lib/components/Container/Container.css +934 -7
- package/dist/lib/components/DarkGradientCards/DarkGradientCards.css +18 -0
- package/dist/lib/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
- package/dist/lib/components/DarkGradientCards/DarkGradientCards.js +104 -0
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.css +175 -0
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.js +65 -0
- package/dist/lib/components/DarkGradientCards/types.d.ts +21 -0
- package/dist/lib/components/DarkGradientCards/types.js +1 -0
- package/dist/lib/components/InfoCards/InfoCards.css +75 -0
- package/dist/lib/components/InfoCards/InfoCards.d.ts +21 -0
- package/dist/lib/components/InfoCards/InfoCards.js +88 -0
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.css +237 -0
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.d.ts +15 -0
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.js +129 -0
- package/dist/lib/components/InfoCards/types.d.ts +26 -0
- package/dist/lib/components/InfoCards/types.js +1 -0
- package/dist/lib/components/SidePictureCards/SidePictureCards.d.ts +22 -0
- package/dist/lib/components/SidePictureCards/SidePictureCards.js +95 -0
- package/dist/lib/components/SidePictureCards/components/SidePictureCard.css +183 -0
- package/dist/lib/components/SidePictureCards/components/SidePictureCard.d.ts +16 -0
- package/dist/lib/components/SidePictureCards/components/SidePictureCard.js +108 -0
- package/dist/lib/components/SidePictureCards/types.d.ts +46 -0
- package/dist/lib/components/SidePictureCards/types.js +1 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +16 -7
- package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +2 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.js +6 -1
- package/dist/lib/hooks/useResolutions.d.ts +1 -0
- package/dist/lib/hooks/useResolutions.js +12 -1
- package/dist/lib/index.d.ts +6 -0
- package/dist/lib/index.js +48 -0
- package/package.json +2 -2
@@ -0,0 +1,18 @@
|
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-dark-gradient-cards__cards {
|
9
|
+
display: -webkit-box;
|
10
|
+
display: -ms-flexbox;
|
11
|
+
display: flex;
|
12
|
+
gap: 20px;
|
13
|
+
}
|
14
|
+
.mfui-dark-gradient-cards__cards .mfui-dark-gradient-cards__card {
|
15
|
+
-webkit-box-flex: 1;
|
16
|
+
-ms-flex-positive: 1;
|
17
|
+
flex-grow: 1;
|
18
|
+
}
|
@@ -0,0 +1,28 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { Carousel } from '@megafon/ui-core';
|
3
|
+
import { ItemType } from './types';
|
4
|
+
import './DarkGradientCards.less';
|
5
|
+
declare type CarouselProps = React.ComponentProps<typeof Carousel>;
|
6
|
+
export interface IDarkGradientCards {
|
7
|
+
/** Карточки. Минимальное количество 3 карточки */
|
8
|
+
items: ItemType[];
|
9
|
+
/** Тема навигации для карусели */
|
10
|
+
carouselNavTheme?: CarouselProps['navTheme'];
|
11
|
+
/** Цвет градиента для карусели */
|
12
|
+
carouselGradientColor?: CarouselProps['gradientColor'];
|
13
|
+
/** Дополнительный класс для компонента */
|
14
|
+
className?: string;
|
15
|
+
/** Дополнительные классы для внутренних элементов */
|
16
|
+
classes?: {
|
17
|
+
root?: string;
|
18
|
+
item?: string;
|
19
|
+
};
|
20
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
21
|
+
dataAttrs?: {
|
22
|
+
root?: Record<string, string>;
|
23
|
+
carousel?: Record<string, string>;
|
24
|
+
item?: Record<string, string>;
|
25
|
+
};
|
26
|
+
}
|
27
|
+
declare const DarkGradientCards: React.FC<IDarkGradientCards>;
|
28
|
+
export default DarkGradientCards;
|
@@ -0,0 +1,88 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
+
import "core-js/modules/es.array.map.js";
|
4
|
+
import React from 'react';
|
5
|
+
import { Carousel } from '@megafon/ui-core';
|
6
|
+
import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
|
7
|
+
import PropTypes from 'prop-types';
|
8
|
+
import useResolutions from "../../hooks/useResolutions";
|
9
|
+
import DarkGradientCard from "./components/DarkGradientCard";
|
10
|
+
import "./DarkGradientCards.css";
|
11
|
+
|
12
|
+
var carouselParams = _defineProperty({}, breakpoints.MOBILE_SMALL_START, {
|
13
|
+
slidesPerView: 'auto',
|
14
|
+
spaceBetween: 20
|
15
|
+
});
|
16
|
+
|
17
|
+
var CAROUSEL_THRESHOLD = 5;
|
18
|
+
var MIN_ITEMS_COUNT = 3;
|
19
|
+
var cn = cnCreate('mfui-dark-gradient-cards');
|
20
|
+
|
21
|
+
var DarkGradientCards = function DarkGradientCards(_ref) {
|
22
|
+
var items = _ref.items,
|
23
|
+
_ref$carouselGradient = _ref.carouselGradientColor,
|
24
|
+
carouselGradientColor = _ref$carouselGradient === void 0 ? 'default' : _ref$carouselGradient,
|
25
|
+
_ref$carouselNavTheme = _ref.carouselNavTheme,
|
26
|
+
carouselNavTheme = _ref$carouselNavTheme === void 0 ? 'light' : _ref$carouselNavTheme,
|
27
|
+
className = _ref.className,
|
28
|
+
_ref$classes = _ref.classes,
|
29
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
30
|
+
dataAttrs = _ref.dataAttrs;
|
31
|
+
|
32
|
+
var _useResolutions = useResolutions(),
|
33
|
+
isDesktopWide = _useResolutions.isDesktopWide;
|
34
|
+
|
35
|
+
var isCarouselActive = items.length > MIN_ITEMS_COUNT || items.length === MIN_ITEMS_COUNT && !isDesktopWide;
|
36
|
+
var cards = items.map(function (item, i) {
|
37
|
+
return /*#__PURE__*/React.createElement(DarkGradientCard, _extends({
|
38
|
+
className: cn('card')
|
39
|
+
}, item, {
|
40
|
+
key: item.title + i,
|
41
|
+
size: i === 0 ? 'big' : 'small',
|
42
|
+
classes: {
|
43
|
+
root: classes.item
|
44
|
+
},
|
45
|
+
dataAttrs: {
|
46
|
+
root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1))
|
47
|
+
}
|
48
|
+
}));
|
49
|
+
});
|
50
|
+
|
51
|
+
if (items.length < MIN_ITEMS_COUNT) {
|
52
|
+
return null;
|
53
|
+
}
|
54
|
+
|
55
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
56
|
+
className: cn([className, classes.root])
|
57
|
+
}), isCarouselActive ? /*#__PURE__*/React.createElement(Carousel, {
|
58
|
+
dataAttrs: {
|
59
|
+
root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.carousel))
|
60
|
+
},
|
61
|
+
slidesSettings: carouselParams,
|
62
|
+
navTheme: carouselNavTheme,
|
63
|
+
threshold: CAROUSEL_THRESHOLD,
|
64
|
+
gradient: true,
|
65
|
+
gradientColor: carouselGradientColor
|
66
|
+
}, cards) : /*#__PURE__*/React.createElement("div", {
|
67
|
+
className: cn('cards')
|
68
|
+
}, cards));
|
69
|
+
};
|
70
|
+
|
71
|
+
DarkGradientCards.propTypes = {
|
72
|
+
items: PropTypes.arrayOf(PropTypes.shape({
|
73
|
+
imageSrc: PropTypes.string.isRequired,
|
74
|
+
title: PropTypes.string.isRequired,
|
75
|
+
subtitle: PropTypes.string,
|
76
|
+
moreIcon: PropTypes.element,
|
77
|
+
moreText: PropTypes.string,
|
78
|
+
href: PropTypes.string,
|
79
|
+
target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
|
80
|
+
rel: PropTypes.string
|
81
|
+
}).isRequired).isRequired,
|
82
|
+
className: PropTypes.string,
|
83
|
+
classes: PropTypes.objectOf(PropTypes.string),
|
84
|
+
dataAttrs: PropTypes.objectOf(PropTypes.object),
|
85
|
+
carouselNavTheme: PropTypes.oneOf(['light', 'green']),
|
86
|
+
carouselGradientColor: PropTypes.oneOf(['green', 'default', 'black', 'spbSky0', 'spbSky1', 'spbSky2'])
|
87
|
+
};
|
88
|
+
export default DarkGradientCards;
|
@@ -0,0 +1,175 @@
|
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-dark-gradient-card {
|
9
|
+
position: relative;
|
10
|
+
display: -webkit-box;
|
11
|
+
display: -ms-flexbox;
|
12
|
+
display: flex;
|
13
|
+
width: 298px;
|
14
|
+
min-height: 420px;
|
15
|
+
padding: 24px;
|
16
|
+
border-radius: 24px;
|
17
|
+
color: var(--stcWhite);
|
18
|
+
text-decoration: none;
|
19
|
+
background-position: center;
|
20
|
+
background-size: cover;
|
21
|
+
}
|
22
|
+
@media screen and (max-width: 359px) {
|
23
|
+
.mfui-dark-gradient-card {
|
24
|
+
width: 265px;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
28
|
+
.mfui-dark-gradient-card {
|
29
|
+
width: 211px;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
@media screen and (min-width: 1024px) {
|
33
|
+
.mfui-dark-gradient-card {
|
34
|
+
min-height: 520px;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
38
|
+
.mfui-dark-gradient-card {
|
39
|
+
width: 285px;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
@media screen and (min-width: 1280px) and (max-width: 1439px) {
|
43
|
+
.mfui-dark-gradient-card {
|
44
|
+
width: 265px;
|
45
|
+
}
|
46
|
+
}
|
47
|
+
@media screen and (min-width: 1280px) {
|
48
|
+
.mfui-dark-gradient-card {
|
49
|
+
padding: 32px;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
@media screen and (min-width: 1440px) {
|
53
|
+
.mfui-dark-gradient-card {
|
54
|
+
width: 345px;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
.mfui-dark-gradient-card:hover {
|
58
|
+
text-decoration: none;
|
59
|
+
}
|
60
|
+
.mfui-dark-gradient-card:before {
|
61
|
+
content: '';
|
62
|
+
position: absolute;
|
63
|
+
top: 0;
|
64
|
+
right: 0;
|
65
|
+
bottom: 0;
|
66
|
+
left: 0;
|
67
|
+
z-index: 0;
|
68
|
+
border-radius: inherit;
|
69
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#000000));
|
70
|
+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
|
71
|
+
}
|
72
|
+
.mfui-dark-gradient-card_active:hover.mfui-dark-gradient-card:before {
|
73
|
+
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.9)));
|
74
|
+
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
|
75
|
+
}
|
76
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
77
|
+
.mfui-dark-gradient-card_size_big {
|
78
|
+
width: 441px;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
82
|
+
.mfui-dark-gradient-card_size_big {
|
83
|
+
width: 591px;
|
84
|
+
}
|
85
|
+
}
|
86
|
+
@media screen and (min-width: 1280px) and (max-width: 1439px) {
|
87
|
+
.mfui-dark-gradient-card_size_big {
|
88
|
+
width: 550px;
|
89
|
+
}
|
90
|
+
}
|
91
|
+
@media screen and (min-width: 1440px) {
|
92
|
+
.mfui-dark-gradient-card_size_big {
|
93
|
+
width: 710px;
|
94
|
+
}
|
95
|
+
}
|
96
|
+
.mfui-dark-gradient-card__inner {
|
97
|
+
position: relative;
|
98
|
+
z-index: 1;
|
99
|
+
display: -webkit-box;
|
100
|
+
display: -ms-flexbox;
|
101
|
+
display: flex;
|
102
|
+
-webkit-box-orient: vertical;
|
103
|
+
-webkit-box-direction: normal;
|
104
|
+
-ms-flex-direction: column;
|
105
|
+
flex-direction: column;
|
106
|
+
gap: 12px;
|
107
|
+
width: 100%;
|
108
|
+
}
|
109
|
+
.mfui-dark-gradient-card__title {
|
110
|
+
margin-top: auto;
|
111
|
+
}
|
112
|
+
.mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
|
113
|
+
font-weight: 500;
|
114
|
+
font-size: 18px;
|
115
|
+
line-height: 24px;
|
116
|
+
letter-spacing: 0.5px;
|
117
|
+
}
|
118
|
+
@media screen and (min-width: 1280px) {
|
119
|
+
.mfui-dark-gradient-card_size_small .mfui-dark-gradient-card__title {
|
120
|
+
font-size: 20px;
|
121
|
+
line-height: 28px;
|
122
|
+
}
|
123
|
+
}
|
124
|
+
.mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
|
125
|
+
font-weight: 600;
|
126
|
+
font-size: 22px;
|
127
|
+
line-height: 28px;
|
128
|
+
letter-spacing: 0.5px;
|
129
|
+
}
|
130
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
131
|
+
.mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
|
132
|
+
font-size: 26px;
|
133
|
+
line-height: 32px;
|
134
|
+
}
|
135
|
+
}
|
136
|
+
@media screen and (min-width: 1024px) {
|
137
|
+
.mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
|
138
|
+
font-size: 28px;
|
139
|
+
line-height: 36px;
|
140
|
+
}
|
141
|
+
}
|
142
|
+
@media screen and (min-width: 1280px) {
|
143
|
+
.mfui-dark-gradient-card_size_big .mfui-dark-gradient-card__title {
|
144
|
+
font-size: 32px;
|
145
|
+
line-height: 40px;
|
146
|
+
}
|
147
|
+
}
|
148
|
+
.mfui-dark-gradient-card__subtitle {
|
149
|
+
font-size: 15px;
|
150
|
+
line-height: 24px;
|
151
|
+
}
|
152
|
+
.mfui-dark-gradient-card__more {
|
153
|
+
font-size: 15px;
|
154
|
+
line-height: 24px;
|
155
|
+
font-weight: 500;
|
156
|
+
display: -webkit-box;
|
157
|
+
display: -ms-flexbox;
|
158
|
+
display: flex;
|
159
|
+
gap: 8px;
|
160
|
+
-webkit-box-align: start;
|
161
|
+
-ms-flex-align: start;
|
162
|
+
align-items: flex-start;
|
163
|
+
}
|
164
|
+
.mfui-dark-gradient-card__more-icon {
|
165
|
+
display: block;
|
166
|
+
width: 24px;
|
167
|
+
min-width: 24px;
|
168
|
+
max-height: 24px;
|
169
|
+
}
|
170
|
+
.mfui-dark-gradient-card__more-icon svg {
|
171
|
+
display: block;
|
172
|
+
width: 100%;
|
173
|
+
height: 100%;
|
174
|
+
fill: var(--stcWhite);
|
175
|
+
}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { ItemType } from '../types';
|
3
|
+
import './DarkGradientCard.less';
|
4
|
+
export declare type DarkGradientCardType = ItemType & {
|
5
|
+
size?: 'small' | 'big';
|
6
|
+
className?: string;
|
7
|
+
classes?: {
|
8
|
+
root?: string;
|
9
|
+
};
|
10
|
+
dataAttrs?: {
|
11
|
+
root?: Record<string, string>;
|
12
|
+
};
|
13
|
+
};
|
14
|
+
declare const DarkGradientCard: React.FC<DarkGradientCardType>;
|
15
|
+
export default DarkGradientCard;
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import React from 'react';
|
3
|
+
import { cnCreate, convert } from '@megafon/ui-helpers';
|
4
|
+
import { setRelAttribute } from "../../../helpers/setRelAttribute";
|
5
|
+
import "./DarkGradientCard.css";
|
6
|
+
var cn = cnCreate('mfui-dark-gradient-card');
|
7
|
+
|
8
|
+
var DarkGradientCard = function DarkGradientCard(_ref) {
|
9
|
+
var imageSrc = _ref.imageSrc,
|
10
|
+
title = _ref.title,
|
11
|
+
subtitle = _ref.subtitle,
|
12
|
+
moreIcon = _ref.moreIcon,
|
13
|
+
moreText = _ref.moreText,
|
14
|
+
href = _ref.href,
|
15
|
+
_ref$target = _ref.target,
|
16
|
+
target = _ref$target === void 0 ? '_self' : _ref$target,
|
17
|
+
rel = _ref.rel,
|
18
|
+
_ref$size = _ref.size,
|
19
|
+
size = _ref$size === void 0 ? 'small' : _ref$size,
|
20
|
+
className = _ref.className,
|
21
|
+
_ref$classes = _ref.classes,
|
22
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
23
|
+
dataAttrs = _ref.dataAttrs;
|
24
|
+
var isLink = !!href;
|
25
|
+
var ElementType = isLink ? 'a' : 'div';
|
26
|
+
var currentRel = setRelAttribute(rel, target);
|
27
|
+
return /*#__PURE__*/React.createElement(ElementType, _extends({
|
28
|
+
className: cn({
|
29
|
+
size: size,
|
30
|
+
active: isLink
|
31
|
+
}, [className, classes.root])
|
32
|
+
}, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
|
33
|
+
href: href,
|
34
|
+
target: isLink ? target : undefined,
|
35
|
+
rel: isLink ? currentRel : undefined,
|
36
|
+
style: {
|
37
|
+
backgroundImage: "url(".concat(imageSrc, ")")
|
38
|
+
}
|
39
|
+
}), /*#__PURE__*/React.createElement("div", {
|
40
|
+
className: cn('inner')
|
41
|
+
}, /*#__PURE__*/React.createElement("div", {
|
42
|
+
className: cn('title')
|
43
|
+
}, convert(title, {})), subtitle && /*#__PURE__*/React.createElement("div", {
|
44
|
+
className: cn('subtitle')
|
45
|
+
}, convert(subtitle, {})), !!moreText && /*#__PURE__*/React.createElement("div", {
|
46
|
+
className: cn('more')
|
47
|
+
}, !!moreIcon && /*#__PURE__*/React.createElement("div", {
|
48
|
+
className: cn('more-icon')
|
49
|
+
}, moreIcon), convert(moreText, {}))));
|
50
|
+
};
|
51
|
+
|
52
|
+
export default DarkGradientCard;
|
@@ -0,0 +1,21 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
|
3
|
+
export declare type ItemType = {
|
4
|
+
/** Изображение */
|
5
|
+
imageSrc: string;
|
6
|
+
/** Заголовок */
|
7
|
+
title: string;
|
8
|
+
/** Подзаголовок */
|
9
|
+
subtitle?: string;
|
10
|
+
/** Иконка */
|
11
|
+
moreIcon?: JSX.Element;
|
12
|
+
/** Текст */
|
13
|
+
moreText?: string;
|
14
|
+
/** Ссылка */
|
15
|
+
href?: string;
|
16
|
+
/** Атрибут ссылки target */
|
17
|
+
target?: TargetType;
|
18
|
+
/** Атрибут ссылки rel */
|
19
|
+
rel?: string;
|
20
|
+
};
|
21
|
+
export {};
|
File without changes
|
@@ -0,0 +1,75 @@
|
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-info-cards {
|
9
|
+
display: grid;
|
10
|
+
grid-template-columns: auto;
|
11
|
+
gap: 20px;
|
12
|
+
}
|
13
|
+
@media screen and (min-width: 768px) {
|
14
|
+
.mfui-info-cards_size_small.mfui-info-cards_position_right-side {
|
15
|
+
grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
|
16
|
+
}
|
17
|
+
}
|
18
|
+
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
19
|
+
.mfui-info-cards_size_small.mfui-info-cards_position_right-side {
|
20
|
+
grid-template-columns: repeat(auto-fit, minmax(438px, 1fr));
|
21
|
+
}
|
22
|
+
}
|
23
|
+
@media screen and (min-width: 1280px) {
|
24
|
+
.mfui-info-cards_size_small.mfui-info-cards_position_right-side {
|
25
|
+
grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
|
26
|
+
}
|
27
|
+
}
|
28
|
+
@media screen and (min-width: 768px) {
|
29
|
+
.mfui-info-cards_size_small.mfui-info-cards_position_top-left {
|
30
|
+
grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
|
31
|
+
}
|
32
|
+
}
|
33
|
+
@media screen and (min-width: 1024px) {
|
34
|
+
.mfui-info-cards_size_small.mfui-info-cards_position_top-left {
|
35
|
+
grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
|
36
|
+
}
|
37
|
+
}
|
38
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
39
|
+
.mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
|
40
|
+
grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
|
41
|
+
}
|
42
|
+
}
|
43
|
+
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
44
|
+
.mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
|
45
|
+
grid-template-columns: repeat(auto-fit, minmax(438px, 1fr));
|
46
|
+
}
|
47
|
+
}
|
48
|
+
@media screen and (min-width: 1280px) {
|
49
|
+
.mfui-info-cards_size_medium.mfui-info-cards_position_right-side {
|
50
|
+
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
|
51
|
+
}
|
52
|
+
}
|
53
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
54
|
+
.mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
|
55
|
+
grid-template-columns: repeat(auto-fit, minmax(326px, 1fr));
|
56
|
+
}
|
57
|
+
}
|
58
|
+
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
59
|
+
.mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
|
60
|
+
grid-template-columns: repeat(auto-fit, minmax(209px, 1fr));
|
61
|
+
}
|
62
|
+
}
|
63
|
+
@media screen and (min-width: 1280px) {
|
64
|
+
.mfui-info-cards_size_medium.mfui-info-cards_position_top-left {
|
65
|
+
grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
|
66
|
+
}
|
67
|
+
}
|
68
|
+
@media screen and (min-width: 1024px) {
|
69
|
+
.mfui-info-cards_size_big {
|
70
|
+
grid-template-columns: 1fr 1fr;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
.mfui-info-cards_position_top-left.mfui-info-cards_background_no {
|
74
|
+
row-gap: 40px;
|
75
|
+
}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { IInfoCardData, IInfoCardSettings } from './types';
|
3
|
+
import './InfoCards.less';
|
4
|
+
export interface IInfoCards extends IInfoCardSettings {
|
5
|
+
/** Дополнительный css класс для корневого элемента */
|
6
|
+
className?: string;
|
7
|
+
/** Дополнительные css классы для корневого и внутренних элементов */
|
8
|
+
classes?: {
|
9
|
+
root?: string;
|
10
|
+
card?: string;
|
11
|
+
};
|
12
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
13
|
+
dataAttrs?: {
|
14
|
+
root?: Record<string, string>;
|
15
|
+
card?: Record<string, string>;
|
16
|
+
};
|
17
|
+
/** Список карточек */
|
18
|
+
items: IInfoCardData[];
|
19
|
+
}
|
20
|
+
declare const InfoCards: React.FC<IInfoCards>;
|
21
|
+
export default InfoCards;
|
@@ -0,0 +1,66 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import "core-js/modules/es.array.map.js";
|
3
|
+
import "core-js/modules/es.array.concat.js";
|
4
|
+
import * as React from 'react';
|
5
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
6
|
+
import PropTypes from 'prop-types';
|
7
|
+
import InfoCard from "./components/InfoCard/InfoCard";
|
8
|
+
import "./InfoCards.css";
|
9
|
+
var cn = cnCreate('mfui-info-cards');
|
10
|
+
|
11
|
+
var InfoCards = function InfoCards(_ref) {
|
12
|
+
var className = _ref.className,
|
13
|
+
classes = _ref.classes,
|
14
|
+
items = _ref.items,
|
15
|
+
_ref$size = _ref.size,
|
16
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
17
|
+
_ref$imgPosition = _ref.imgPosition,
|
18
|
+
imgPosition = _ref$imgPosition === void 0 ? 'top-left' : _ref$imgPosition,
|
19
|
+
_ref$background = _ref.background,
|
20
|
+
background = _ref$background === void 0 ? 'stroke' : _ref$background,
|
21
|
+
dataAttrs = _ref.dataAttrs;
|
22
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
23
|
+
className: cn({
|
24
|
+
size: size,
|
25
|
+
position: imgPosition,
|
26
|
+
background: background
|
27
|
+
}, [className, classes === null || classes === void 0 ? void 0 : classes.root])
|
28
|
+
}), items.map(function (item, i) {
|
29
|
+
return /*#__PURE__*/React.createElement(InfoCard, _extends({}, item, {
|
30
|
+
className: classes === null || classes === void 0 ? void 0 : classes.card,
|
31
|
+
size: size,
|
32
|
+
imgPosition: imgPosition,
|
33
|
+
background: background,
|
34
|
+
dataAttrs: {
|
35
|
+
root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
|
36
|
+
},
|
37
|
+
key: "".concat(item.title, "_").concat(i)
|
38
|
+
}));
|
39
|
+
}));
|
40
|
+
};
|
41
|
+
|
42
|
+
InfoCards.propTypes = {
|
43
|
+
className: PropTypes.string,
|
44
|
+
classes: PropTypes.shape({
|
45
|
+
root: PropTypes.string,
|
46
|
+
card: PropTypes.string
|
47
|
+
}),
|
48
|
+
dataAttrs: PropTypes.shape({
|
49
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired),
|
50
|
+
card: PropTypes.objectOf(PropTypes.string.isRequired)
|
51
|
+
}),
|
52
|
+
size: PropTypes.oneOf(['big', 'medium', 'small']),
|
53
|
+
imgPosition: PropTypes.oneOf(['right-side', 'top-left']),
|
54
|
+
background: PropTypes.oneOf(['shadow', 'stroke', 'gray', 'green', 'purple', 'white', 'gray', 'no']),
|
55
|
+
items: PropTypes.arrayOf(PropTypes.shape({
|
56
|
+
title: PropTypes.string,
|
57
|
+
description: PropTypes.string,
|
58
|
+
imgSrc: PropTypes.string.isRequired,
|
59
|
+
imgAlt: PropTypes.string,
|
60
|
+
href: PropTypes.string,
|
61
|
+
target: PropTypes.oneOf(['_self', '_blank']),
|
62
|
+
rel: PropTypes.string,
|
63
|
+
moreInfo: PropTypes.string
|
64
|
+
}).isRequired).isRequired
|
65
|
+
};
|
66
|
+
export default InfoCards;
|