@megafon/ui-shared 3.0.0-beta.9 → 3.1.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 +48 -67
- package/README.md +2 -2
- package/dist/es/components/AccordionBox/AccordionBox.d.ts +5 -0
- package/dist/es/components/AccordionBox/AccordionBox.js +6 -1
- package/dist/es/components/BenefitsIcons/BenefitsIcons.js +1 -1
- package/dist/es/components/Breadcrumbs/Breadcrumbs.css +2 -2
- package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +7 -2
- package/dist/es/components/Breadcrumbs/Breadcrumbs.js +48 -18
- package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +1 -0
- package/dist/es/components/ButtonBanner/ButtonBanner.js +5 -1
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +2 -0
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +9 -1
- package/dist/es/components/Card/Card.d.ts +4 -2
- package/dist/es/components/Card/Card.js +16 -6
- package/dist/es/components/Container/Container.css +163 -0
- package/dist/es/components/DownloadLinks/DownloadLink.css +1 -1
- package/dist/es/components/DownloadLinks/DownloadLink.d.ts +5 -0
- package/dist/es/components/DownloadLinks/DownloadLink.js +14 -6
- package/dist/es/components/Instructions/Instructions.d.ts +7 -0
- package/dist/es/components/Instructions/Instructions.js +55 -45
- package/dist/es/components/PageTitle/PageTitle.d.ts +6 -0
- package/dist/es/components/PageTitle/PageTitle.js +15 -4
- package/dist/es/components/Partners/Partners.d.ts +5 -4
- package/dist/es/components/Partners/Partners.js +15 -7
- package/dist/es/components/Property/Property.d.ts +3 -2
- package/dist/es/components/Property/Property.js +9 -3
- package/dist/es/components/Property/PropertyDescription.js +11 -5
- package/dist/es/components/Property/types.d.ts +3 -0
- package/dist/es/components/StoreBanner/StoreBanner.css +21 -22
- package/dist/es/components/StoreBanner/StoreBanner.d.ts +4 -0
- package/dist/es/components/StoreBanner/StoreBanner.js +19 -4
- package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/es/components/StoreButton/StoreButton.d.ts +1 -1
- package/dist/es/components/StoreButton/StoreButton.js +26 -7
- package/dist/es/components/Table/Table.css +1 -1
- package/dist/es/components/TextBox/TextBox.css +9 -0
- package/dist/es/components/TextWithIcon/TextWithIcon.css +15 -0
- package/dist/es/components/TextWithIcon/TextWithIcon.d.ts +19 -0
- package/dist/es/components/TextWithIcon/TextWithIcon.js +40 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.css +49 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +18 -0
- package/dist/es/components/TextWithIcon/TextWithIconItem.js +35 -0
- package/dist/es/components/VideoBanner/VideoBanner.d.ts +7 -2
- package/dist/es/components/VideoBanner/VideoBanner.js +21 -5
- package/dist/es/components/VideoBlock/VideoBlock.d.ts +4 -3
- package/dist/es/components/VideoBlock/VideoBlock.js +12 -6
- package/dist/es/index.d.ts +2 -0
- package/dist/es/index.js +2 -0
- package/dist/lib/components/AccordionBox/AccordionBox.d.ts +5 -0
- package/dist/lib/components/AccordionBox/AccordionBox.js +6 -1
- package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +1 -1
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +2 -2
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +7 -2
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +49 -17
- package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +1 -0
- package/dist/lib/components/ButtonBanner/ButtonBanner.js +5 -1
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +2 -0
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +9 -1
- package/dist/lib/components/Card/Card.d.ts +4 -2
- package/dist/lib/components/Card/Card.js +16 -6
- package/dist/lib/components/Container/Container.css +163 -0
- package/dist/lib/components/DownloadLinks/DownloadLink.css +1 -1
- package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +5 -0
- package/dist/lib/components/DownloadLinks/DownloadLink.js +13 -5
- package/dist/lib/components/Instructions/Instructions.d.ts +7 -0
- package/dist/lib/components/Instructions/Instructions.js +55 -44
- package/dist/lib/components/PageTitle/PageTitle.d.ts +6 -0
- package/dist/lib/components/PageTitle/PageTitle.js +17 -5
- package/dist/lib/components/Partners/Partners.d.ts +5 -4
- package/dist/lib/components/Partners/Partners.js +15 -7
- package/dist/lib/components/Property/Property.d.ts +3 -2
- package/dist/lib/components/Property/Property.js +9 -3
- package/dist/lib/components/Property/PropertyDescription.js +11 -4
- package/dist/lib/components/Property/types.d.ts +3 -0
- package/dist/lib/components/StoreBanner/StoreBanner.css +21 -22
- package/dist/lib/components/StoreBanner/StoreBanner.d.ts +4 -0
- package/dist/lib/components/StoreBanner/StoreBanner.js +19 -4
- package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/lib/components/StoreButton/StoreButton.d.ts +1 -1
- package/dist/lib/components/StoreButton/StoreButton.js +30 -9
- package/dist/lib/components/Table/Table.css +1 -1
- package/dist/lib/components/TextBox/TextBox.css +9 -0
- package/dist/lib/components/TextWithIcon/TextWithIcon.css +15 -0
- package/dist/lib/components/TextWithIcon/TextWithIcon.d.ts +19 -0
- package/dist/lib/components/TextWithIcon/TextWithIcon.js +60 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.css +49 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +18 -0
- package/dist/lib/components/TextWithIcon/TextWithIconItem.js +54 -0
- package/dist/lib/components/VideoBanner/VideoBanner.d.ts +7 -2
- package/dist/lib/components/VideoBanner/VideoBanner.js +21 -5
- package/dist/lib/components/VideoBlock/VideoBlock.d.ts +4 -3
- package/dist/lib/components/VideoBlock/VideoBlock.js +12 -6
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib/index.js +16 -0
- package/package.json +5 -5
@@ -1,3 +1,4 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
1
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
3
|
|
3
4
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
@@ -5,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
6
|
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
6
7
|
import * as React from 'react';
|
7
8
|
import { Collapse } from '@megafon/ui-core';
|
8
|
-
import { cnCreate } from '@megafon/ui-helpers';
|
9
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
9
10
|
import PropTypes from 'prop-types';
|
10
11
|
import "./PropertyDescription.css";
|
11
12
|
var cn = cnCreate('mfui-property-description');
|
@@ -15,7 +16,8 @@ var PropertyDescription = function PropertyDescription(_ref) {
|
|
15
16
|
_ref$isCollapsible = _ref.isCollapsible,
|
16
17
|
isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible,
|
17
18
|
_ref$classes = _ref.classes,
|
18
|
-
classes = _ref$classes === void 0 ? {} : _ref$classes
|
19
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
20
|
+
dataAttrs = _ref.dataAttrs;
|
19
21
|
|
20
22
|
var _React$useState = React.useState(false),
|
21
23
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
@@ -29,10 +31,11 @@ var PropertyDescription = function PropertyDescription(_ref) {
|
|
29
31
|
if (isCollapsible) {
|
30
32
|
return /*#__PURE__*/React.createElement("div", {
|
31
33
|
className: cn([isOpened ? classes.open : undefined])
|
32
|
-
}, /*#__PURE__*/React.createElement("span", {
|
33
|
-
className: cn('collapse', classes.toggle),
|
34
|
+
}, /*#__PURE__*/React.createElement("span", _extends({
|
34
35
|
onClick: handleClickDesc
|
35
|
-
},
|
36
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
|
37
|
+
className: cn('collapse', classes.toggle)
|
38
|
+
}), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(Collapse, {
|
36
39
|
className: cn('content'),
|
37
40
|
classNameContainer: cn('content-inner'),
|
38
41
|
isOpened: isOpened
|
@@ -50,6 +53,9 @@ PropertyDescription.propTypes = {
|
|
50
53
|
classes: PropTypes.shape({
|
51
54
|
open: PropTypes.string,
|
52
55
|
toggle: PropTypes.string
|
56
|
+
}),
|
57
|
+
dataAttrs: PropTypes.shape({
|
58
|
+
moreLink: PropTypes.objectOf(PropTypes.string.isRequired)
|
53
59
|
})
|
54
60
|
};
|
55
61
|
export default PropertyDescription;
|
@@ -159,7 +159,16 @@ h5 {
|
|
159
159
|
display: flex;
|
160
160
|
}
|
161
161
|
.mfui-store-banner__qr-code {
|
162
|
+
-ms-flex-item-align: center;
|
163
|
+
align-self: center;
|
164
|
+
-webkit-box-sizing: border-box;
|
165
|
+
box-sizing: border-box;
|
166
|
+
width: 90px;
|
167
|
+
height: 90px;
|
162
168
|
margin-right: 16px;
|
169
|
+
border: 1px solid var(--spbSky1);
|
170
|
+
border-radius: 8px;
|
171
|
+
background-color: var(--base);
|
163
172
|
}
|
164
173
|
@media screen and (max-width: 767px) {
|
165
174
|
.mfui-store-banner__qr-code {
|
@@ -180,6 +189,9 @@ h5 {
|
|
180
189
|
.mfui-store-banner__store-link {
|
181
190
|
width: 136px;
|
182
191
|
height: 40px;
|
192
|
+
margin-right: 8px;
|
193
|
+
margin-bottom: 10px;
|
194
|
+
margin-left: 8px;
|
183
195
|
}
|
184
196
|
@media screen and (max-width: 767px) {
|
185
197
|
.mfui-store-banner__store-link {
|
@@ -187,9 +199,8 @@ h5 {
|
|
187
199
|
height: 35px;
|
188
200
|
}
|
189
201
|
}
|
190
|
-
.mfui-store-banner__store-link:
|
191
|
-
margin-
|
192
|
-
margin-bottom: 10px;
|
202
|
+
.mfui-store-banner__store-link:last-child {
|
203
|
+
margin-bottom: 0;
|
193
204
|
}
|
194
205
|
.mfui-store-banner__stores {
|
195
206
|
display: -webkit-box;
|
@@ -208,6 +219,11 @@ h5 {
|
|
208
219
|
justify-content: center;
|
209
220
|
}
|
210
221
|
}
|
222
|
+
@media screen and (min-width: 768px) {
|
223
|
+
.mfui-store-banner__stores {
|
224
|
+
margin-left: -8px;
|
225
|
+
}
|
226
|
+
}
|
211
227
|
.mfui-store-banner__text {
|
212
228
|
margin-bottom: 32px;
|
213
229
|
}
|
@@ -229,16 +245,10 @@ h5 {
|
|
229
245
|
-o-object-fit: contain;
|
230
246
|
object-fit: contain;
|
231
247
|
}
|
232
|
-
@media screen and (min-width: 768px) and (max-width: 1023px) {
|
233
|
-
.mfui-store-banner__links_three .mfui-store-banner__qr-code {
|
234
|
-
width: 120px;
|
235
|
-
height: 120px;
|
236
|
-
}
|
237
|
-
}
|
238
248
|
@media screen and (min-width: 1280px) {
|
239
249
|
.mfui-store-banner__links_three .mfui-store-banner__qr-code {
|
240
|
-
max-width:
|
241
|
-
max-height:
|
250
|
+
max-width: 90px;
|
251
|
+
max-height: 90px;
|
242
252
|
}
|
243
253
|
}
|
244
254
|
.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
|
@@ -260,12 +270,6 @@ h5 {
|
|
260
270
|
margin: 0 auto;
|
261
271
|
}
|
262
272
|
}
|
263
|
-
.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
|
264
|
-
margin-right: 16px;
|
265
|
-
}
|
266
|
-
.mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
|
267
|
-
margin-right: 0;
|
268
|
-
}
|
269
273
|
.mfui-store-banner__links_three .mfui-store-banner__store-link {
|
270
274
|
width: 136px;
|
271
275
|
height: 40px;
|
@@ -284,8 +288,3 @@ h5 {
|
|
284
288
|
margin-bottom: 16px;
|
285
289
|
}
|
286
290
|
}
|
287
|
-
@media screen and (max-width: 1023px) {
|
288
|
-
.mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
|
289
|
-
margin-right: 0;
|
290
|
-
}
|
291
|
-
}
|
@@ -59,6 +59,10 @@ export interface IStoreBannerProps {
|
|
59
59
|
/** Дополнительные data атрибуты к внутренним элементам */
|
60
60
|
dataAttrs?: {
|
61
61
|
root?: Record<string, string>;
|
62
|
+
button?: Record<string, string>;
|
63
|
+
linkApple?: Record<string, string>;
|
64
|
+
linkGoogle?: Record<string, string>;
|
65
|
+
linkHuawei?: Record<string, string>;
|
62
66
|
};
|
63
67
|
}
|
64
68
|
declare const StoreBanner: React.FC<IStoreBannerProps>;
|
@@ -17,7 +17,6 @@ export var DeviceMask = {
|
|
17
17
|
BLACK_IPHONE: 'black-iphone',
|
18
18
|
WHITE_IPHONE: 'white-iphone'
|
19
19
|
};
|
20
|
-
var DEFAULT_TEXT_BUTTON = 'Установите приложение';
|
21
20
|
var cn = cnCreate('mfui-store-banner');
|
22
21
|
|
23
22
|
var StoreBanner = function StoreBanner(_ref) {
|
@@ -35,11 +34,11 @@ var StoreBanner = function StoreBanner(_ref) {
|
|
35
34
|
linkHuawei = _ref.linkHuawei,
|
36
35
|
linkButton = _ref.linkButton,
|
37
36
|
_ref$textButton = _ref.textButton,
|
38
|
-
textButton = _ref$textButton === void 0 ?
|
37
|
+
textButton = _ref$textButton === void 0 ? 'Установите приложение' : _ref$textButton,
|
39
38
|
qrCode = _ref.qrCode,
|
40
39
|
imageSrc = _ref.imageSrc,
|
41
40
|
_ref$theme = _ref.theme,
|
42
|
-
theme = _ref$theme === void 0 ?
|
41
|
+
theme = _ref$theme === void 0 ? 'default' : _ref$theme,
|
43
42
|
deviceMask = _ref.deviceMask,
|
44
43
|
rootRef = _ref.rootRef,
|
45
44
|
dataAttrs = _ref.dataAttrs,
|
@@ -81,6 +80,9 @@ var StoreBanner = function StoreBanner(_ref) {
|
|
81
80
|
}), !linkButton && /*#__PURE__*/React.createElement("div", {
|
82
81
|
className: cn('stores')
|
83
82
|
}, linkApple && /*#__PURE__*/React.createElement(StoreButton, {
|
83
|
+
dataAttrs: {
|
84
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkApple
|
85
|
+
},
|
84
86
|
theme: StoreButtonTheme.APP_STORE,
|
85
87
|
href: linkApple,
|
86
88
|
onClick: onClickApple,
|
@@ -88,6 +90,9 @@ var StoreBanner = function StoreBanner(_ref) {
|
|
88
90
|
'app-store': true
|
89
91
|
}, appleLinkClassName)
|
90
92
|
}), linkGoogle && /*#__PURE__*/React.createElement(StoreButton, {
|
93
|
+
dataAttrs: {
|
94
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGoogle
|
95
|
+
},
|
91
96
|
theme: StoreButtonTheme.GOOGLE_PLAY,
|
92
97
|
href: linkGoogle,
|
93
98
|
className: cn('store-link', {
|
@@ -95,6 +100,9 @@ var StoreBanner = function StoreBanner(_ref) {
|
|
95
100
|
}, googleLinkClassName),
|
96
101
|
onClick: onClickGoogle
|
97
102
|
}), linkHuawei && /*#__PURE__*/React.createElement(StoreButton, {
|
103
|
+
dataAttrs: {
|
104
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkHuawei
|
105
|
+
},
|
98
106
|
theme: StoreButtonTheme.HUAWEI_STORE,
|
99
107
|
href: linkHuawei,
|
100
108
|
className: cn('store-link', {
|
@@ -102,6 +110,9 @@ var StoreBanner = function StoreBanner(_ref) {
|
|
102
110
|
}, huaweiLinkClassName),
|
103
111
|
onClick: onClickHuawei
|
104
112
|
})), linkButton && /*#__PURE__*/React.createElement(Button, {
|
113
|
+
dataAttrs: {
|
114
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
|
115
|
+
},
|
105
116
|
className: cn('button'),
|
106
117
|
href: linkButton,
|
107
118
|
theme: theme === 'green' ? 'purple' : 'green'
|
@@ -141,7 +152,11 @@ StoreBanner.propTypes = {
|
|
141
152
|
}), PropTypes.any])]),
|
142
153
|
theme: PropTypes.oneOf(Object.values(Theme)),
|
143
154
|
dataAttrs: PropTypes.shape({
|
144
|
-
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
155
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired),
|
156
|
+
button: PropTypes.objectOf(PropTypes.string.isRequired),
|
157
|
+
linkApple: PropTypes.objectOf(PropTypes.string.isRequired),
|
158
|
+
linkGoogle: PropTypes.objectOf(PropTypes.string.isRequired),
|
159
|
+
linkHuawei: PropTypes.objectOf(PropTypes.string.isRequired)
|
145
160
|
})
|
146
161
|
};
|
147
162
|
export default StoreBanner;
|
Binary file
|
@@ -7,7 +7,7 @@ export declare enum Theme {
|
|
7
7
|
HUAWEI_STORE = "huawei-store"
|
8
8
|
}
|
9
9
|
declare type LinkPropTypes = React.ComponentProps<typeof Link>;
|
10
|
-
export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick'> & {
|
10
|
+
export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick' | 'dataAttrs'> & {
|
11
11
|
/** Тема кнопки */
|
12
12
|
theme: Theme;
|
13
13
|
/** Дополнительный класс */
|
@@ -1,4 +1,21 @@
|
|
1
|
+
import "core-js/modules/es.symbol";
|
2
|
+
import "core-js/modules/es.array.index-of";
|
1
3
|
import "core-js/modules/es.object.values";
|
4
|
+
import _extends from "@babel/runtime/helpers/extends";
|
5
|
+
|
6
|
+
var __rest = this && this.__rest || function (s, e) {
|
7
|
+
var t = {};
|
8
|
+
|
9
|
+
for (var p in s) {
|
10
|
+
if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
11
|
+
}
|
12
|
+
|
13
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
14
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
15
|
+
}
|
16
|
+
return t;
|
17
|
+
};
|
18
|
+
|
2
19
|
import * as React from 'react';
|
3
20
|
import { Link } from '@megafon/ui-core';
|
4
21
|
import { cnCreate } from '@megafon/ui-helpers';
|
@@ -14,18 +31,20 @@ export var Theme;
|
|
14
31
|
|
15
32
|
var cn = cnCreate('mfui-store-button');
|
16
33
|
|
17
|
-
var StoreButton = function StoreButton(
|
18
|
-
var href =
|
19
|
-
onClick =
|
20
|
-
theme =
|
21
|
-
className =
|
22
|
-
|
34
|
+
var StoreButton = function StoreButton(_a) {
|
35
|
+
var href = _a.href,
|
36
|
+
onClick = _a.onClick,
|
37
|
+
theme = _a.theme,
|
38
|
+
className = _a.className,
|
39
|
+
rest = __rest(_a, ["href", "onClick", "theme", "className"]);
|
40
|
+
|
41
|
+
return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
|
23
42
|
href: href,
|
24
43
|
onClick: onClick,
|
25
44
|
className: cn({
|
26
45
|
theme: theme
|
27
46
|
}, className)
|
28
|
-
});
|
47
|
+
}));
|
29
48
|
};
|
30
49
|
|
31
50
|
StoreButton.propTypes = {
|
@@ -14,3 +14,12 @@ h5 {
|
|
14
14
|
.mfui-text-box_text-center {
|
15
15
|
text-align: center;
|
16
16
|
}
|
17
|
+
.mfui-text-box .mfui-text-with-icon {
|
18
|
+
margin: 24px 0;
|
19
|
+
}
|
20
|
+
.mfui-text-box .mfui-text-with-icon + .mfui-header {
|
21
|
+
margin-top: 32px;
|
22
|
+
}
|
23
|
+
.mfui-text-box .mfui-text-box-picture + .mfui-text-with-icon {
|
24
|
+
margin: 32px 0 24px;
|
25
|
+
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { ITextWithIconItem } from './TextWithIconItem';
|
3
|
+
import './TextWithIcon.less';
|
4
|
+
export interface ITextWithIconProps {
|
5
|
+
/** Заголовок */
|
6
|
+
title?: string;
|
7
|
+
/** Ссылка на корневой элемент */
|
8
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
9
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
10
|
+
dataAttrs?: {
|
11
|
+
root?: Record<string, string>;
|
12
|
+
};
|
13
|
+
/** Дополнительный класс для корневого элемента */
|
14
|
+
className?: string;
|
15
|
+
/** Допустимый дочерний компонент */
|
16
|
+
children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
|
17
|
+
}
|
18
|
+
declare const TextWithIcon: React.FC<ITextWithIconProps>;
|
19
|
+
export default TextWithIcon;
|
@@ -0,0 +1,40 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import * as React from 'react';
|
3
|
+
import { Header, Grid, GridColumn } from '@megafon/ui-core';
|
4
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
5
|
+
import * as PropTypes from 'prop-types';
|
6
|
+
import "./TextWithIcon.css";
|
7
|
+
var cn = cnCreate('mfui-text-with-icon');
|
8
|
+
|
9
|
+
var TextWithIcon = function TextWithIcon(_ref) {
|
10
|
+
var title = _ref.title,
|
11
|
+
rootRef = _ref.rootRef,
|
12
|
+
dataAttrs = _ref.dataAttrs,
|
13
|
+
className = _ref.className,
|
14
|
+
children = _ref.children;
|
15
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
16
|
+
className: cn([className]),
|
17
|
+
ref: rootRef
|
18
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
|
19
|
+
mobile: '12',
|
20
|
+
tablet: '7',
|
21
|
+
desktop: '6',
|
22
|
+
wide: '6'
|
23
|
+
}, title && /*#__PURE__*/React.createElement(Header, {
|
24
|
+
className: cn('header'),
|
25
|
+
as: "h5"
|
26
|
+
}, title), children)));
|
27
|
+
};
|
28
|
+
|
29
|
+
TextWithIcon.propTypes = {
|
30
|
+
title: PropTypes.string,
|
31
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
32
|
+
current: PropTypes.elementType
|
33
|
+
}), PropTypes.any])]),
|
34
|
+
dataAttrs: PropTypes.shape({
|
35
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
36
|
+
}),
|
37
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
|
38
|
+
className: PropTypes.string
|
39
|
+
};
|
40
|
+
export default TextWithIcon;
|
@@ -0,0 +1,49 @@
|
|
1
|
+
h1,
|
2
|
+
h2,
|
3
|
+
h3,
|
4
|
+
h4,
|
5
|
+
h5 {
|
6
|
+
margin: 0;
|
7
|
+
}
|
8
|
+
.mfui-text-with-icon-item {
|
9
|
+
display: -webkit-box;
|
10
|
+
display: -ms-flexbox;
|
11
|
+
display: flex;
|
12
|
+
-webkit-box-align: center;
|
13
|
+
-ms-flex-align: center;
|
14
|
+
align-items: center;
|
15
|
+
}
|
16
|
+
@media screen and (max-width: 767px) {
|
17
|
+
.mfui-text-with-icon-item {
|
18
|
+
-webkit-box-orient: vertical;
|
19
|
+
-webkit-box-direction: normal;
|
20
|
+
-ms-flex-direction: column;
|
21
|
+
flex-direction: column;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
.mfui-text-with-icon-item:not(:first-of-type) {
|
25
|
+
margin-top: 16px;
|
26
|
+
}
|
27
|
+
@media screen and (max-width: 767px) {
|
28
|
+
.mfui-text-with-icon-item:not(:first-of-type) {
|
29
|
+
margin-top: 24px;
|
30
|
+
}
|
31
|
+
}
|
32
|
+
.mfui-text-with-icon-item__svg-icon {
|
33
|
+
width: 40px;
|
34
|
+
min-width: 40px;
|
35
|
+
height: 40px;
|
36
|
+
min-height: 40px;
|
37
|
+
overflow: hidden;
|
38
|
+
}
|
39
|
+
@media screen and (min-width: 768px) {
|
40
|
+
.mfui-text-with-icon-item__svg-icon {
|
41
|
+
margin-right: 16px;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
@media screen and (max-width: 767px) {
|
45
|
+
.mfui-text-with-icon-item__text {
|
46
|
+
margin-top: 12px;
|
47
|
+
text-align: center;
|
48
|
+
}
|
49
|
+
}
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import './TextWithIconItem.less';
|
3
|
+
export interface ITextWithIconItem {
|
4
|
+
/** Текст */
|
5
|
+
text: string | string[];
|
6
|
+
/** Иконка */
|
7
|
+
icon: React.ReactNode;
|
8
|
+
/** Ссылка на корневой элемент */
|
9
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
10
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
11
|
+
dataAttrs?: {
|
12
|
+
root?: Record<string, string>;
|
13
|
+
};
|
14
|
+
/** Дополнительный класс для корневого элемента */
|
15
|
+
className?: string;
|
16
|
+
}
|
17
|
+
declare const TextWithIconItem: React.FC<ITextWithIconItem>;
|
18
|
+
export default TextWithIconItem;
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import * as React from 'react';
|
3
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
4
|
+
import * as PropTypes from 'prop-types';
|
5
|
+
import "./TextWithIconItem.css";
|
6
|
+
var cn = cnCreate('mfui-text-with-icon-item');
|
7
|
+
|
8
|
+
var TextWithIconItem = function TextWithIconItem(_ref) {
|
9
|
+
var text = _ref.text,
|
10
|
+
icon = _ref.icon,
|
11
|
+
rootRef = _ref.rootRef,
|
12
|
+
dataAttrs = _ref.dataAttrs,
|
13
|
+
className = _ref.className;
|
14
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
15
|
+
className: cn([className]),
|
16
|
+
ref: rootRef
|
17
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
|
18
|
+
className: cn('svg-icon')
|
19
|
+
}, icon), /*#__PURE__*/React.createElement("div", {
|
20
|
+
className: cn('text')
|
21
|
+
}, text));
|
22
|
+
};
|
23
|
+
|
24
|
+
TextWithIconItem.propTypes = {
|
25
|
+
text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired)]).isRequired,
|
26
|
+
icon: PropTypes.node.isRequired,
|
27
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
28
|
+
current: PropTypes.elementType
|
29
|
+
}), PropTypes.any])]),
|
30
|
+
dataAttrs: PropTypes.shape({
|
31
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired)
|
32
|
+
}),
|
33
|
+
className: PropTypes.string
|
34
|
+
};
|
35
|
+
export default TextWithIconItem;
|
@@ -52,9 +52,13 @@ export interface IContent {
|
|
52
52
|
cost?: string;
|
53
53
|
}
|
54
54
|
interface IVideoBannerProps {
|
55
|
-
/**
|
55
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
56
56
|
dataAttrs?: {
|
57
|
-
|
57
|
+
root?: Record<string, string>;
|
58
|
+
breadcrumbs?: Record<string, string>;
|
59
|
+
breadcrumbsLink?: Record<string, string>;
|
60
|
+
button?: Record<string, string>;
|
61
|
+
link?: Record<string, string>;
|
58
62
|
};
|
59
63
|
/** Дополнительный класс корневого элемента */
|
60
64
|
className?: string;
|
@@ -64,6 +68,7 @@ interface IVideoBannerProps {
|
|
64
68
|
button?: string;
|
65
69
|
link?: string;
|
66
70
|
breadcrumbs?: string;
|
71
|
+
video?: string;
|
67
72
|
};
|
68
73
|
/** Ссылка на корневой элемент */
|
69
74
|
rootRef?: Ref<HTMLDivElement>;
|
@@ -122,18 +122,24 @@ var VideoBanner = function VideoBanner(_ref2) {
|
|
122
122
|
}, convert(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
|
123
123
|
className: cn('btns-wrapper')
|
124
124
|
}, buttonTitle && /*#__PURE__*/React.createElement(Button, {
|
125
|
+
dataAttrs: {
|
126
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
|
127
|
+
},
|
125
128
|
className: cn(ClassName.BUTTON, [classes.button]),
|
126
129
|
theme: buttonColor,
|
127
130
|
href: buttonHref,
|
128
131
|
onClick: onButtonClick,
|
129
132
|
download: buttonDownload
|
130
133
|
}, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(TextLink, {
|
134
|
+
dataAttrs: {
|
135
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
|
136
|
+
},
|
131
137
|
className: cn(ClassName.LINK, [classes.link]),
|
132
138
|
href: linkUrl,
|
133
139
|
download: linkDownload,
|
134
140
|
onClick: onLinkClick
|
135
141
|
}, linkTitle)))));
|
136
|
-
}, [classes.button, classes.link]);
|
142
|
+
}, [classes.button, classes.link, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link]);
|
137
143
|
var renderVideo = React.useCallback(function () {
|
138
144
|
switch (videoType) {
|
139
145
|
case VideoType.YOUTUBE:
|
@@ -165,7 +171,7 @@ var VideoBanner = function VideoBanner(_ref2) {
|
|
165
171
|
/*#__PURE__*/
|
166
172
|
// eslint-disable-next-line jsx-a11y/media-has-caption
|
167
173
|
React.createElement("video", {
|
168
|
-
className: cn('video'),
|
174
|
+
className: cn('video', [classes.video]),
|
169
175
|
autoPlay: true,
|
170
176
|
loop: true,
|
171
177
|
muted: isMuted
|
@@ -181,7 +187,7 @@ var VideoBanner = function VideoBanner(_ref2) {
|
|
181
187
|
return null;
|
182
188
|
}
|
183
189
|
}
|
184
|
-
}, [videoType, videoSrc, isMuted]);
|
190
|
+
}, [videoType, videoSrc, isMuted, classes.video]);
|
185
191
|
React.useEffect(function () {
|
186
192
|
var getImageSrc = function getImageSrc() {
|
187
193
|
var windowWidth = window.innerWidth;
|
@@ -213,12 +219,16 @@ var VideoBanner = function VideoBanner(_ref2) {
|
|
213
219
|
window.removeEventListener('resize', resizeHandlerThrottled);
|
214
220
|
};
|
215
221
|
}, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
|
216
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
|
222
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
217
223
|
className: cn([className, classes.root]),
|
218
224
|
ref: rootRef
|
219
225
|
}), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
|
220
226
|
className: cn('wrapper')
|
221
227
|
}, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
|
228
|
+
dataAttrs: {
|
229
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
|
230
|
+
link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
|
231
|
+
},
|
222
232
|
className: cn('breadcrumbs'),
|
223
233
|
items: breadcrumbs,
|
224
234
|
color: content === null || content === void 0 ? void 0 : content.textColor,
|
@@ -234,7 +244,13 @@ var VideoBanner = function VideoBanner(_ref2) {
|
|
234
244
|
};
|
235
245
|
|
236
246
|
VideoBanner.propTypes = {
|
237
|
-
dataAttrs: PropTypes.
|
247
|
+
dataAttrs: PropTypes.shape({
|
248
|
+
root: PropTypes.objectOf(PropTypes.string.isRequired),
|
249
|
+
breadcrumbs: PropTypes.objectOf(PropTypes.string.isRequired),
|
250
|
+
breadcrumbsLink: PropTypes.objectOf(PropTypes.string.isRequired),
|
251
|
+
button: PropTypes.objectOf(PropTypes.string.isRequired),
|
252
|
+
link: PropTypes.objectOf(PropTypes.string.isRequired)
|
253
|
+
}),
|
238
254
|
className: PropTypes.string,
|
239
255
|
classes: PropTypes.shape({
|
240
256
|
root: PropTypes.string,
|
@@ -6,7 +6,7 @@ export interface IContent {
|
|
6
6
|
/** Текст-описание */
|
7
7
|
description: string | React.ReactNode[] | React.ReactNode;
|
8
8
|
/** Текст кнопки */
|
9
|
-
buttonTitle
|
9
|
+
buttonTitle?: string;
|
10
10
|
/** Добавляет атрибут download для тега <a> компонента Button */
|
11
11
|
buttonDownload?: boolean;
|
12
12
|
/** Ссылка на кнопке */
|
@@ -20,9 +20,10 @@ export declare const VideoTypes: {
|
|
20
20
|
};
|
21
21
|
declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
|
22
22
|
export interface IVideoBlockProps {
|
23
|
-
/**
|
23
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
24
24
|
dataAttrs?: {
|
25
|
-
|
25
|
+
root?: Record<string, string>;
|
26
|
+
button?: Record<string, string>;
|
26
27
|
};
|
27
28
|
/** Дополнительный класс корневого элемента */
|
28
29
|
className?: string;
|