@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,183 @@
|
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-side-picture-card {
|
9
|
+
display: grid;
|
10
|
+
grid-template-rows: 1fr auto;
|
11
|
+
grid-template-columns: auto;
|
12
|
+
gap: 20px;
|
13
|
+
min-height: 100%;
|
14
|
+
padding: 12px;
|
15
|
+
border-radius: 24px;
|
16
|
+
color: var(--content);
|
17
|
+
text-decoration: none;
|
18
|
+
background-color: var(--base);
|
19
|
+
-webkit-transition: background-color, -webkit-box-shadow;
|
20
|
+
transition: background-color, -webkit-box-shadow;
|
21
|
+
transition: background-color, box-shadow;
|
22
|
+
transition: background-color, box-shadow, -webkit-box-shadow;
|
23
|
+
-webkit-transition-duration: 0.3s;
|
24
|
+
transition-duration: 0.3s;
|
25
|
+
}
|
26
|
+
@media screen and (min-width: 1280px) {
|
27
|
+
.mfui-side-picture-card {
|
28
|
+
grid-template-rows: none;
|
29
|
+
grid-template-columns: 1fr 1fr;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
.mfui-side-picture-card:hover {
|
33
|
+
text-decoration: none;
|
34
|
+
}
|
35
|
+
.mfui-side-picture-card__content {
|
36
|
+
display: -webkit-box;
|
37
|
+
display: -ms-flexbox;
|
38
|
+
display: flex;
|
39
|
+
-webkit-box-orient: vertical;
|
40
|
+
-webkit-box-direction: normal;
|
41
|
+
-ms-flex-direction: column;
|
42
|
+
flex-direction: column;
|
43
|
+
padding: 12px;
|
44
|
+
overflow: hidden;
|
45
|
+
}
|
46
|
+
@media screen and (min-width: 1280px) {
|
47
|
+
.mfui-side-picture-card__content {
|
48
|
+
padding: 12px 0 12px 12px;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
.mfui-side-picture-card__title {
|
52
|
+
/* stylelint-disable-next-line value-no-vendor-prefix */
|
53
|
+
display: -webkit-box;
|
54
|
+
overflow: hidden;
|
55
|
+
white-space: normal;
|
56
|
+
text-overflow: ellipsis;
|
57
|
+
-webkit-box-orient: vertical;
|
58
|
+
-webkit-line-clamp: 2;
|
59
|
+
margin-bottom: 16px;
|
60
|
+
}
|
61
|
+
@media screen and (min-width: 1280px) {
|
62
|
+
.mfui-side-picture-card__title {
|
63
|
+
margin-bottom: 24px;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
.mfui-side-picture-card__items {
|
67
|
+
display: -webkit-box;
|
68
|
+
display: -ms-flexbox;
|
69
|
+
display: flex;
|
70
|
+
-webkit-box-orient: vertical;
|
71
|
+
-webkit-box-direction: normal;
|
72
|
+
-ms-flex-direction: column;
|
73
|
+
flex-direction: column;
|
74
|
+
gap: 12px;
|
75
|
+
margin-bottom: auto;
|
76
|
+
}
|
77
|
+
@media screen and (min-width: 1280px) {
|
78
|
+
.mfui-side-picture-card__items {
|
79
|
+
gap: 16px;
|
80
|
+
}
|
81
|
+
}
|
82
|
+
.mfui-side-picture-card__item {
|
83
|
+
display: -webkit-box;
|
84
|
+
display: -ms-flexbox;
|
85
|
+
display: flex;
|
86
|
+
gap: 12px;
|
87
|
+
}
|
88
|
+
.mfui-side-picture-card__item-icon {
|
89
|
+
display: block;
|
90
|
+
width: 32px;
|
91
|
+
min-width: 32px;
|
92
|
+
max-height: 32px;
|
93
|
+
}
|
94
|
+
.mfui-side-picture-card__item-icon svg {
|
95
|
+
display: block;
|
96
|
+
width: 100%;
|
97
|
+
height: 100%;
|
98
|
+
fill: var(--brandGreen);
|
99
|
+
}
|
100
|
+
.mfui-side-picture-card__item-description {
|
101
|
+
display: -webkit-box;
|
102
|
+
display: -ms-flexbox;
|
103
|
+
display: flex;
|
104
|
+
-webkit-box-orient: vertical;
|
105
|
+
-webkit-box-direction: normal;
|
106
|
+
-ms-flex-direction: column;
|
107
|
+
flex-direction: column;
|
108
|
+
gap: 4px;
|
109
|
+
-webkit-box-pack: center;
|
110
|
+
-ms-flex-pack: center;
|
111
|
+
justify-content: center;
|
112
|
+
}
|
113
|
+
.mfui-side-picture-card__item-text {
|
114
|
+
font-size: 15px;
|
115
|
+
line-height: 24px;
|
116
|
+
font-weight: 400;
|
117
|
+
/* stylelint-disable-next-line value-no-vendor-prefix */
|
118
|
+
display: -webkit-box;
|
119
|
+
overflow: hidden;
|
120
|
+
white-space: normal;
|
121
|
+
text-overflow: ellipsis;
|
122
|
+
-webkit-box-orient: vertical;
|
123
|
+
-webkit-line-clamp: 3;
|
124
|
+
}
|
125
|
+
.mfui-side-picture-card__item-info {
|
126
|
+
font-weight: 500;
|
127
|
+
font-size: 18px;
|
128
|
+
line-height: 24px;
|
129
|
+
letter-spacing: 0.5px;
|
130
|
+
/* stylelint-disable-next-line value-no-vendor-prefix */
|
131
|
+
display: -webkit-box;
|
132
|
+
overflow: hidden;
|
133
|
+
white-space: normal;
|
134
|
+
text-overflow: ellipsis;
|
135
|
+
-webkit-box-orient: vertical;
|
136
|
+
-webkit-line-clamp: 2;
|
137
|
+
}
|
138
|
+
@media screen and (min-width: 1280px) {
|
139
|
+
.mfui-side-picture-card__item-info {
|
140
|
+
font-size: 20px;
|
141
|
+
line-height: 28px;
|
142
|
+
}
|
143
|
+
}
|
144
|
+
.mfui-side-picture-card__button {
|
145
|
+
margin-top: 32px;
|
146
|
+
}
|
147
|
+
.mfui-side-picture-card__picture {
|
148
|
+
position: relative;
|
149
|
+
height: 172px;
|
150
|
+
}
|
151
|
+
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
152
|
+
.mfui-side-picture-card__picture {
|
153
|
+
height: 197px;
|
154
|
+
}
|
155
|
+
}
|
156
|
+
@media screen and (min-width: 1024px) and (max-width: 1279px) {
|
157
|
+
.mfui-side-picture-card__picture {
|
158
|
+
height: 270px;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
@media screen and (min-width: 1280px) {
|
162
|
+
.mfui-side-picture-card__picture {
|
163
|
+
height: 100%;
|
164
|
+
}
|
165
|
+
}
|
166
|
+
.mfui-side-picture-card__image {
|
167
|
+
position: absolute;
|
168
|
+
width: 100%;
|
169
|
+
height: 100%;
|
170
|
+
border-radius: 24px;
|
171
|
+
-o-object-fit: cover;
|
172
|
+
object-fit: cover;
|
173
|
+
}
|
174
|
+
.mfui-side-picture-card_active:hover:not(.mfui-side-picture-card_background_gray) {
|
175
|
+
-webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
|
176
|
+
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
|
177
|
+
}
|
178
|
+
.mfui-side-picture-card_background_gray {
|
179
|
+
background-color: var(--spbSky0);
|
180
|
+
}
|
181
|
+
.mfui-side-picture-card_background_gray.mfui-side-picture-card_active:hover {
|
182
|
+
background-color: var(--spbSky1);
|
183
|
+
}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { BackgroundType, CardDataType } from '../types';
|
3
|
+
import './SidePictureCard.less';
|
4
|
+
export declare type SidePictureCardType = CardDataType & {
|
5
|
+
background: BackgroundType;
|
6
|
+
classes?: {
|
7
|
+
root?: string;
|
8
|
+
button?: string;
|
9
|
+
};
|
10
|
+
dataAttrs?: {
|
11
|
+
root?: Record<string, string>;
|
12
|
+
button?: Record<string, string>;
|
13
|
+
};
|
14
|
+
};
|
15
|
+
declare const SidePictureCard: React.FC<SidePictureCardType>;
|
16
|
+
export default SidePictureCard;
|
@@ -0,0 +1,108 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports["default"] = void 0;
|
7
|
+
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
|
10
|
+
require("core-js/modules/es.array.slice.js");
|
11
|
+
|
12
|
+
require("core-js/modules/es.array.map.js");
|
13
|
+
|
14
|
+
require("core-js/modules/es.array.concat.js");
|
15
|
+
|
16
|
+
var _react = _interopRequireDefault(require("react"));
|
17
|
+
|
18
|
+
var _uiCore = require("@megafon/ui-core");
|
19
|
+
|
20
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
21
|
+
|
22
|
+
var _setRelAttribute = require("../../../helpers/setRelAttribute");
|
23
|
+
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
25
|
+
|
26
|
+
var MAX_ICON_ITEMS_COUNT = 4;
|
27
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-side-picture-card');
|
28
|
+
|
29
|
+
var SidePictureCard = function SidePictureCard(_ref) {
|
30
|
+
var background = _ref.background,
|
31
|
+
title = _ref.title,
|
32
|
+
image = _ref.image,
|
33
|
+
_ref$iconItems = _ref.iconItems,
|
34
|
+
iconItems = _ref$iconItems === void 0 ? [] : _ref$iconItems,
|
35
|
+
_ref$button = _ref.button,
|
36
|
+
button = _ref$button === void 0 ? {} : _ref$button,
|
37
|
+
href = _ref.href,
|
38
|
+
target = _ref.target,
|
39
|
+
rel = _ref.rel,
|
40
|
+
_ref$classes = _ref.classes,
|
41
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
42
|
+
dataAttrs = _ref.dataAttrs;
|
43
|
+
var buttonTitle = button.title,
|
44
|
+
buttonHref = button.href,
|
45
|
+
buttonTarget = button.target,
|
46
|
+
buttonRel = button.rel;
|
47
|
+
var isLink = !!href && !buttonHref;
|
48
|
+
var ElementType = isLink ? 'a' : 'div';
|
49
|
+
var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
|
50
|
+
var currentButtonRel = (0, _setRelAttribute.setRelAttribute)(buttonRel, buttonTarget);
|
51
|
+
var visibleIconItems = iconItems.slice(0, MAX_ICON_ITEMS_COUNT);
|
52
|
+
var items = visibleIconItems.map(function (item, i) {
|
53
|
+
var icon = item.icon,
|
54
|
+
_item$text = item.text,
|
55
|
+
text = _item$text === void 0 ? '' : _item$text,
|
56
|
+
_item$info = item.info,
|
57
|
+
info = _item$info === void 0 ? '' : _item$info;
|
58
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
59
|
+
className: cn('item'),
|
60
|
+
key: "".concat(text || info, "_").concat(i)
|
61
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
62
|
+
className: cn('item-icon')
|
63
|
+
}, icon), /*#__PURE__*/_react["default"].createElement("div", {
|
64
|
+
className: cn('item-description')
|
65
|
+
}, !!text && /*#__PURE__*/_react["default"].createElement("div", {
|
66
|
+
className: cn('item-text')
|
67
|
+
}, (0, _uiHelpers.convert)(text, {})), !!info && /*#__PURE__*/_react["default"].createElement("div", {
|
68
|
+
className: cn('item-info')
|
69
|
+
}, (0, _uiHelpers.convert)(info, {}))));
|
70
|
+
});
|
71
|
+
return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
|
72
|
+
className: cn({
|
73
|
+
background: background,
|
74
|
+
active: isLink
|
75
|
+
}, [classes.root])
|
76
|
+
}, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
|
77
|
+
href: href,
|
78
|
+
target: isLink ? target : undefined,
|
79
|
+
rel: isLink ? currentRel : undefined
|
80
|
+
}), /*#__PURE__*/_react["default"].createElement("div", {
|
81
|
+
className: cn('content')
|
82
|
+
}, !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
|
83
|
+
className: cn('title'),
|
84
|
+
as: "h3"
|
85
|
+
}, (0, _uiHelpers.convert)(title, {})), /*#__PURE__*/_react["default"].createElement("div", {
|
86
|
+
className: cn('items')
|
87
|
+
}, items), !!buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
|
88
|
+
className: cn('button', [classes.button]),
|
89
|
+
dataAttrs: {
|
90
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
|
91
|
+
},
|
92
|
+
href: buttonHref,
|
93
|
+
target: buttonTarget,
|
94
|
+
rel: currentButtonRel
|
95
|
+
}, buttonTitle)), /*#__PURE__*/_react["default"].createElement("picture", {
|
96
|
+
className: cn('picture')
|
97
|
+
}, /*#__PURE__*/_react["default"].createElement("source", {
|
98
|
+
media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
|
99
|
+
srcSet: image.srcWide
|
100
|
+
}), /*#__PURE__*/_react["default"].createElement("img", {
|
101
|
+
className: cn('image'),
|
102
|
+
src: image.src,
|
103
|
+
alt: image.alt || 'image'
|
104
|
+
})));
|
105
|
+
};
|
106
|
+
|
107
|
+
var _default = SidePictureCard;
|
108
|
+
exports["default"] = _default;
|
@@ -0,0 +1,46 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
|
3
|
+
declare type ButtonType = {
|
4
|
+
/** Название */
|
5
|
+
title: string;
|
6
|
+
/** Ссылка */
|
7
|
+
href: string;
|
8
|
+
/** Атрибут ссылки target */
|
9
|
+
target?: TargetType;
|
10
|
+
/** Атрибут ссылки rel */
|
11
|
+
rel?: string;
|
12
|
+
};
|
13
|
+
declare type ImageType = {
|
14
|
+
/** Изображение на разрешении экрана 0-1279 */
|
15
|
+
src: string;
|
16
|
+
/** Изображение на разрешении экрана 1280+ */
|
17
|
+
srcWide: string;
|
18
|
+
/** Значение тега alt для изображения */
|
19
|
+
alt?: string;
|
20
|
+
};
|
21
|
+
declare type IconContentType = {
|
22
|
+
/** Иконка */
|
23
|
+
icon: JSX.Element;
|
24
|
+
/** Текст-описание */
|
25
|
+
text?: string;
|
26
|
+
/** Дополнительная информация, значение */
|
27
|
+
info?: string;
|
28
|
+
};
|
29
|
+
export declare type CardDataType = {
|
30
|
+
/** Заголовок */
|
31
|
+
title?: string;
|
32
|
+
/** Изображение */
|
33
|
+
image: ImageType;
|
34
|
+
/** Список пунктов с иконками */
|
35
|
+
iconItems: IconContentType[];
|
36
|
+
/** Кнопка */
|
37
|
+
button?: ButtonType;
|
38
|
+
/** Ссылка */
|
39
|
+
href?: string;
|
40
|
+
/** Атрибут ссылки target */
|
41
|
+
target?: TargetType;
|
42
|
+
/** Атрибут ссылки rel */
|
43
|
+
rel?: string;
|
44
|
+
};
|
45
|
+
export declare type BackgroundType = 'white' | 'gray';
|
46
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";
|
@@ -17,13 +17,22 @@ h5 {
|
|
17
17
|
margin-top: 12px;
|
18
18
|
}
|
19
19
|
.mfui-text-with-icon-item__svg-icon {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
min-
|
24
|
-
|
25
|
-
|
20
|
+
-webkit-box-sizing: border-box;
|
21
|
+
box-sizing: border-box;
|
22
|
+
width: 40px;
|
23
|
+
min-width: 40px;
|
24
|
+
height: 40px;
|
25
|
+
min-height: 40px;
|
26
|
+
margin-right: 12px;
|
27
|
+
overflow: hidden;
|
28
|
+
}
|
29
|
+
.mfui-text-with-icon-item_icon-background_stroke .mfui-text-with-icon-item__svg-icon {
|
30
|
+
padding: 3px;
|
26
31
|
border: 1px solid var(--spbSky2);
|
27
32
|
border-radius: 50%;
|
28
|
-
|
33
|
+
}
|
34
|
+
.mfui-text-with-icon-item_icon-background_gray .mfui-text-with-icon-item__svg-icon {
|
35
|
+
padding: 4px;
|
36
|
+
border-radius: 50%;
|
37
|
+
background-color: var(--spbSky0);
|
29
38
|
}
|
@@ -10,6 +10,8 @@ export interface ITextWithIconItem {
|
|
10
10
|
text: string | string[];
|
11
11
|
/** Иконка */
|
12
12
|
icon: React.ReactNode;
|
13
|
+
/** Фон для иконки */
|
14
|
+
iconBackground?: 'no' | 'stroke' | 'gray';
|
13
15
|
/** Ссылка на корневой элемент */
|
14
16
|
rootRef?: React.Ref<HTMLDivElement>;
|
15
17
|
/** Дополнительные data атрибуты к внутренним элементам */
|
@@ -34,6 +34,8 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
|
|
34
34
|
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
35
35
|
text = _ref.text,
|
36
36
|
icon = _ref.icon,
|
37
|
+
_ref$iconBackground = _ref.iconBackground,
|
38
|
+
iconBackground = _ref$iconBackground === void 0 ? 'no' : _ref$iconBackground,
|
37
39
|
rootRef = _ref.rootRef,
|
38
40
|
dataAttrs = _ref.dataAttrs;
|
39
41
|
var renderText = React.useMemo(function () {
|
@@ -46,7 +48,9 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
|
|
46
48
|
return (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig);
|
47
49
|
}, [text]);
|
48
50
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
49
|
-
className: cn(
|
51
|
+
className: cn({
|
52
|
+
'icon-background': iconBackground
|
53
|
+
}, [className]),
|
50
54
|
ref: rootRef
|
51
55
|
}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
|
52
56
|
className: cn('svg-icon', [classes.icon]),
|
@@ -60,6 +64,7 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
|
|
60
64
|
TextWithIconItem.propTypes = {
|
61
65
|
text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired)]).isRequired,
|
62
66
|
icon: PropTypes.node.isRequired,
|
67
|
+
iconBackground: PropTypes.oneOf(['no', 'stroke', 'gray']),
|
63
68
|
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
64
69
|
current: PropTypes.elementType
|
65
70
|
}), PropTypes.any])]),
|
@@ -18,7 +18,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
18
18
|
var MOBILE_MIDDLE_END = _uiHelpers.breakpoints.MOBILE_MIDDLE_END,
|
19
19
|
MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START,
|
20
20
|
MOBILE_BIG_END = _uiHelpers.breakpoints.MOBILE_BIG_END,
|
21
|
-
DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START
|
21
|
+
DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START,
|
22
|
+
DESKTOP_MIDDLE_START = _uiHelpers.breakpoints.DESKTOP_MIDDLE_START;
|
22
23
|
|
23
24
|
var useResolutions = function useResolutions() {
|
24
25
|
var _React$useState = _react["default"].useState(false),
|
@@ -36,6 +37,11 @@ var useResolutions = function useResolutions() {
|
|
36
37
|
isDesktop = _React$useState6[0],
|
37
38
|
setIsDesktop = _React$useState6[1];
|
38
39
|
|
40
|
+
var _React$useState7 = _react["default"].useState(false),
|
41
|
+
_React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
|
42
|
+
isDesktopWide = _React$useState8[0],
|
43
|
+
setIsDesktopWide = _React$useState8[1];
|
44
|
+
|
39
45
|
_react["default"].useEffect(function () {
|
40
46
|
if (typeof window === 'undefined') {
|
41
47
|
return undefined;
|
@@ -46,25 +52,30 @@ var useResolutions = function useResolutions() {
|
|
46
52
|
var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
|
47
53
|
var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
|
48
54
|
var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
|
55
|
+
var desktopWideQuery = matchMedia("(min-width: ".concat(DESKTOP_MIDDLE_START, "px)"));
|
49
56
|
|
50
57
|
var handleResize = function handleResize() {
|
51
58
|
setIsMobile(mobileQuery.matches);
|
52
59
|
setIsTablet(tabletQuery.matches);
|
53
60
|
setIsDesktop(desktopQuery.matches);
|
61
|
+
setIsDesktopWide(desktopWideQuery.matches);
|
54
62
|
};
|
55
63
|
|
56
64
|
handleResize();
|
57
65
|
mobileQuery.addEventListener('change', handleResize);
|
58
66
|
tabletQuery.addEventListener('change', handleResize);
|
59
67
|
desktopQuery.addEventListener('change', handleResize);
|
68
|
+
desktopWideQuery.addEventListener('change', handleResize);
|
60
69
|
return function () {
|
61
70
|
mobileQuery.removeEventListener('change', handleResize);
|
62
71
|
tabletQuery.removeEventListener('change', handleResize);
|
63
72
|
desktopQuery.removeEventListener('change', handleResize);
|
73
|
+
desktopWideQuery.addEventListener('change', handleResize);
|
64
74
|
};
|
65
75
|
}, []);
|
66
76
|
|
67
77
|
return {
|
78
|
+
isDesktopWide: isDesktopWide,
|
68
79
|
isDesktop: isDesktop,
|
69
80
|
isMobile: isMobile,
|
70
81
|
isTablet: isTablet
|
package/dist/lib/index.d.ts
CHANGED
@@ -17,10 +17,14 @@ export { default as Card } from './components/Card/Card';
|
|
17
17
|
export { default as CardsBox } from './components/CardsBox/CardsBox';
|
18
18
|
export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
|
19
19
|
export { default as Container } from './components/Container/Container';
|
20
|
+
export { default as DarkGradientCard } from './components/DarkGradientCards/components/DarkGradientCard';
|
21
|
+
export { default as DarkGradientCards } from './components/DarkGradientCards/DarkGradientCards';
|
20
22
|
export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
|
21
23
|
export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
|
22
24
|
export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';
|
23
25
|
export { default as ImageBanner } from './components/ImageBanner/ImageBanner';
|
26
|
+
export { default as InfoCard } from './components/InfoCards/components/InfoCard/InfoCard';
|
27
|
+
export { default as InfoCards } from './components/InfoCards/InfoCards';
|
24
28
|
export { default as Instructions } from './components/Instructions/Instructions';
|
25
29
|
export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
|
26
30
|
export { default as PageTitle } from './components/PageTitle/PageTitle';
|
@@ -28,6 +32,8 @@ export { default as Partners } from './components/Partners/Partners';
|
|
28
32
|
export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
|
29
33
|
export { default as Property } from './components/Property/Property';
|
30
34
|
export { default as PropertyDescription } from './components/Property/PropertyDescription';
|
35
|
+
export { default as SidePictureCard } from './components/SidePictureCards/components/SidePictureCard';
|
36
|
+
export { default as SidePictureCards } from './components/SidePictureCards/SidePictureCards';
|
31
37
|
export { default as Steps } from './components/Steps/Steps';
|
32
38
|
export { default as StepsItem } from './components/Steps/StepsItem';
|
33
39
|
export { default as StoreBanner } from './components/StoreBanner/StoreBanner';
|
package/dist/lib/index.js
CHANGED
@@ -117,6 +117,18 @@ Object.defineProperty(exports, "Container", {
|
|
117
117
|
return _Container["default"];
|
118
118
|
}
|
119
119
|
});
|
120
|
+
Object.defineProperty(exports, "DarkGradientCard", {
|
121
|
+
enumerable: true,
|
122
|
+
get: function get() {
|
123
|
+
return _DarkGradientCard["default"];
|
124
|
+
}
|
125
|
+
});
|
126
|
+
Object.defineProperty(exports, "DarkGradientCards", {
|
127
|
+
enumerable: true,
|
128
|
+
get: function get() {
|
129
|
+
return _DarkGradientCards["default"];
|
130
|
+
}
|
131
|
+
});
|
120
132
|
Object.defineProperty(exports, "DownloadLink", {
|
121
133
|
enumerable: true,
|
122
134
|
get: function get() {
|
@@ -141,6 +153,18 @@ Object.defineProperty(exports, "ImageBanner", {
|
|
141
153
|
return _ImageBanner["default"];
|
142
154
|
}
|
143
155
|
});
|
156
|
+
Object.defineProperty(exports, "InfoCard", {
|
157
|
+
enumerable: true,
|
158
|
+
get: function get() {
|
159
|
+
return _InfoCard["default"];
|
160
|
+
}
|
161
|
+
});
|
162
|
+
Object.defineProperty(exports, "InfoCards", {
|
163
|
+
enumerable: true,
|
164
|
+
get: function get() {
|
165
|
+
return _InfoCards["default"];
|
166
|
+
}
|
167
|
+
});
|
144
168
|
Object.defineProperty(exports, "Instructions", {
|
145
169
|
enumerable: true,
|
146
170
|
get: function get() {
|
@@ -183,6 +207,18 @@ Object.defineProperty(exports, "PropertyDescription", {
|
|
183
207
|
return _PropertyDescription["default"];
|
184
208
|
}
|
185
209
|
});
|
210
|
+
Object.defineProperty(exports, "SidePictureCard", {
|
211
|
+
enumerable: true,
|
212
|
+
get: function get() {
|
213
|
+
return _SidePictureCard["default"];
|
214
|
+
}
|
215
|
+
});
|
216
|
+
Object.defineProperty(exports, "SidePictureCards", {
|
217
|
+
enumerable: true,
|
218
|
+
get: function get() {
|
219
|
+
return _SidePictureCards["default"];
|
220
|
+
}
|
221
|
+
});
|
186
222
|
Object.defineProperty(exports, "Steps", {
|
187
223
|
enumerable: true,
|
188
224
|
get: function get() {
|
@@ -330,6 +366,10 @@ var _CarouselBox = _interopRequireDefault(require("./components/CarouselBox/Caro
|
|
330
366
|
|
331
367
|
var _Container = _interopRequireDefault(require("./components/Container/Container"));
|
332
368
|
|
369
|
+
var _DarkGradientCard = _interopRequireDefault(require("./components/DarkGradientCards/components/DarkGradientCard"));
|
370
|
+
|
371
|
+
var _DarkGradientCards = _interopRequireDefault(require("./components/DarkGradientCards/DarkGradientCards"));
|
372
|
+
|
333
373
|
var _DownloadLink = _interopRequireDefault(require("./components/DownloadLinks/DownloadLink"));
|
334
374
|
|
335
375
|
var _DownloadLinks = _interopRequireDefault(require("./components/DownloadLinks/DownloadLinks"));
|
@@ -338,6 +378,10 @@ var _FaqWrapper = _interopRequireDefault(require("./components/FaqWrapper/FaqWra
|
|
338
378
|
|
339
379
|
var _ImageBanner = _interopRequireDefault(require("./components/ImageBanner/ImageBanner"));
|
340
380
|
|
381
|
+
var _InfoCard = _interopRequireDefault(require("./components/InfoCards/components/InfoCard/InfoCard"));
|
382
|
+
|
383
|
+
var _InfoCards = _interopRequireDefault(require("./components/InfoCards/InfoCards"));
|
384
|
+
|
341
385
|
var _Instructions = _interopRequireDefault(require("./components/Instructions/Instructions"));
|
342
386
|
|
343
387
|
var _NotificationBox = _interopRequireDefault(require("./components/NotificationBox/NotificationBox"));
|
@@ -352,6 +396,10 @@ var _Property = _interopRequireDefault(require("./components/Property/Property")
|
|
352
396
|
|
353
397
|
var _PropertyDescription = _interopRequireDefault(require("./components/Property/PropertyDescription"));
|
354
398
|
|
399
|
+
var _SidePictureCard = _interopRequireDefault(require("./components/SidePictureCards/components/SidePictureCard"));
|
400
|
+
|
401
|
+
var _SidePictureCards = _interopRequireDefault(require("./components/SidePictureCards/SidePictureCards"));
|
402
|
+
|
355
403
|
var _Steps = _interopRequireDefault(require("./components/Steps/Steps"));
|
356
404
|
|
357
405
|
var _StepsItem = _interopRequireDefault(require("./components/Steps/StepsItem"));
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@megafon/ui-shared",
|
3
|
-
"version": "6.
|
3
|
+
"version": "6.5.0",
|
4
4
|
"files": [
|
5
5
|
"dist"
|
6
6
|
],
|
@@ -90,5 +90,5 @@
|
|
90
90
|
"prop-types": "^15.7.2",
|
91
91
|
"swiper": "^6.5.6"
|
92
92
|
},
|
93
|
-
"gitHead": "
|
93
|
+
"gitHead": "aeabd8b477419a82c0446c18d275951ac86227ab"
|
94
94
|
}
|