@megafon/ui-shared 8.1.0 → 8.2.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/dist/es/components/Container/Container.css +1 -1
- package/dist/es/components/Instructions/Instructions.css +1 -1
- package/dist/es/components/Instructions/Instructions.d.ts +15 -0
- package/dist/es/components/Instructions/Instructions.js +32 -3
- package/dist/es/components/PictureBox/PictureBox.css +1 -0
- package/dist/es/components/PictureBox/PictureBox.d.ts +48 -0
- package/dist/es/components/PictureBox/PictureBox.js +96 -0
- package/dist/es/components/PromoBanner/PromoBanner.d.ts +5 -0
- package/dist/es/components/PromoBanner/PromoBanner.js +26 -0
- package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.css +1 -0
- package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts +66 -0
- package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js +99 -0
- package/dist/es/components/PromoCards/PromoCards.js +1 -1
- package/dist/es/components/Stepper/StepperItem.css +1 -1
- package/dist/es/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/es/components/Stepper/img/separator.png +0 -0
- package/dist/es/index.d.ts +3 -0
- package/dist/es/index.js +3 -0
- package/dist/lib/components/Container/Container.css +1 -1
- package/dist/lib/components/Instructions/Instructions.css +1 -1
- package/dist/lib/components/Instructions/Instructions.d.ts +15 -0
- package/dist/lib/components/Instructions/Instructions.js +31 -2
- package/dist/lib/components/PictureBox/PictureBox.css +1 -0
- package/dist/lib/components/PictureBox/PictureBox.d.ts +48 -0
- package/dist/lib/components/PictureBox/PictureBox.js +105 -0
- package/dist/lib/components/PromoBanner/PromoBanner.d.ts +5 -0
- package/dist/lib/components/PromoBanner/PromoBanner.js +36 -0
- package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.css +1 -0
- package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts +66 -0
- package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js +108 -0
- package/dist/lib/components/PromoCards/PromoCards.js +1 -1
- package/dist/lib/components/Stepper/StepperItem.css +1 -1
- package/dist/lib/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/lib/components/Stepper/img/separator.png +0 -0
- package/dist/lib/index.d.ts +3 -0
- package/dist/lib/index.js +21 -0
- package/package.json +4 -4
@@ -50,6 +50,15 @@ export type InstructionItemType = {
|
|
50
50
|
/** Текст для плашки с изображением QR-кода */
|
51
51
|
qrCodeText?: string | React.ReactNode | React.ReactNode[];
|
52
52
|
};
|
53
|
+
export type ButtonType = {
|
54
|
+
title: string;
|
55
|
+
type?: 'primary' | 'outline';
|
56
|
+
icon?: React.JSX.Element;
|
57
|
+
href?: string;
|
58
|
+
target?: '_self' | '_blank' | '_parent' | '_top';
|
59
|
+
rel?: string;
|
60
|
+
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
61
|
+
};
|
53
62
|
export interface IInstructionsProps {
|
54
63
|
/** Дополнительные data атрибуты к внутренним элементам */
|
55
64
|
dataAttrs?: {
|
@@ -60,6 +69,7 @@ export interface IInstructionsProps {
|
|
60
69
|
wrapper?: Record<string, string>;
|
61
70
|
arrowPrev?: Record<string, string>;
|
62
71
|
arrowNext?: Record<string, string>;
|
72
|
+
button?: Record<string, string>;
|
63
73
|
};
|
64
74
|
/** Ссылка на корневой элемент */
|
65
75
|
rootRef?: React.Ref<HTMLDivElement>;
|
@@ -75,11 +85,14 @@ export interface IInstructionsProps {
|
|
75
85
|
additionalText?: string;
|
76
86
|
arrowPrev?: string;
|
77
87
|
arrowNext?: string;
|
88
|
+
button?: string;
|
78
89
|
};
|
79
90
|
/** Заголовок инструкции */
|
80
91
|
title?: string;
|
81
92
|
/** Пункты инструкции */
|
82
93
|
instructionItems: InstructionItemType[];
|
94
|
+
/** Отступ между пунктами инструкции. DEPRECATED: 'large' */
|
95
|
+
itemsGap?: 'medium' | 'large';
|
83
96
|
/** Описание после инструкции */
|
84
97
|
additionalText?: string;
|
85
98
|
/** Расположение изображения по горизонтали */
|
@@ -98,6 +111,8 @@ export interface IInstructionsProps {
|
|
98
111
|
elementOrder?: ElementOrderType;
|
99
112
|
/** Показать нумерацию пунктов инструкции на мобильных устройствах */
|
100
113
|
showMobileNumeration?: boolean;
|
114
|
+
/** Кнопка */
|
115
|
+
button?: ButtonType;
|
101
116
|
/** Ref на swiper */
|
102
117
|
getSwiper?: (instance: SwiperCore) => void;
|
103
118
|
}
|
@@ -4,8 +4,9 @@ import "core-js/modules/es.array.map.js";
|
|
4
4
|
/* eslint-disable jsx-a11y/no-static-element-interactions */
|
5
5
|
/* eslint-disable jsx-a11y/click-events-have-key-events */
|
6
6
|
import * as React from 'react';
|
7
|
-
import { Grid, GridColumn, Header, NavArrow, Paragraph, Tile } from '@megafon/ui-core';
|
7
|
+
import { Button, Grid, GridColumn, Header, NavArrow, Paragraph, Tile } from '@megafon/ui-core';
|
8
8
|
import { cnCreate, filterDataAttrs, titleConvertConfig, convert, textConvertConfig } from '@megafon/ui-helpers';
|
9
|
+
import { setRelAttribute } from "../../helpers/setRelAttribute";
|
9
10
|
import "./Instructions.css";
|
10
11
|
var Swiper = null;
|
11
12
|
var SwiperSlide = null;
|
@@ -69,9 +70,11 @@ var Instructions = function Instructions(_ref) {
|
|
69
70
|
additionalText = _ref$classes2.additionalText,
|
70
71
|
arrowPrev = _ref$classes2.arrowPrev,
|
71
72
|
arrowNext = _ref$classes2.arrowNext,
|
73
|
+
buttonClass = _ref$classes2.button,
|
72
74
|
_ref$title = _ref.title,
|
73
75
|
title = _ref$title === void 0 ? '' : _ref$title,
|
74
76
|
instructionItems = _ref.instructionItems,
|
77
|
+
itemsGap = _ref.itemsGap,
|
75
78
|
_ref$pictureAlign = _ref.pictureAlign,
|
76
79
|
pictureAlign = _ref$pictureAlign === void 0 ? 'left' : _ref$pictureAlign,
|
77
80
|
_ref$pictureVerticalA = _ref.pictureVerticalAlign,
|
@@ -87,6 +90,7 @@ var Instructions = function Instructions(_ref) {
|
|
87
90
|
_ref$elementOrder = _ref.elementOrder,
|
88
91
|
elementOrder = _ref$elementOrder === void 0 ? 'default' : _ref$elementOrder,
|
89
92
|
showMobileNumeration = _ref.showMobileNumeration,
|
93
|
+
button = _ref.button,
|
90
94
|
children = _ref.children;
|
91
95
|
var _React$useState = React.useState(),
|
92
96
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
@@ -96,6 +100,7 @@ var Instructions = function Instructions(_ref) {
|
|
96
100
|
_React$useState4 = _slicedToArray(_React$useState3, 2),
|
97
101
|
slideIndex = _React$useState4[0],
|
98
102
|
setSlideIndex = _React$useState4[1];
|
103
|
+
var showButton = button === null || button === void 0 ? void 0 : button.title;
|
99
104
|
var isMobileReversed = elementOrder === 'reversed';
|
100
105
|
var getSwiperInstance = React.useCallback(function (swiper) {
|
101
106
|
setSwiperInstance(swiper);
|
@@ -304,10 +309,34 @@ var Instructions = function Instructions(_ref) {
|
|
304
309
|
onClick: handleNextClick
|
305
310
|
}));
|
306
311
|
}, [handlePrevClick, handleNextClick, arrowsTheme, arrowPrev, arrowNext, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowPrev, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.arrowNext, slideIndex, instructionItems.length]);
|
312
|
+
var renderButton = React.useCallback(function () {
|
313
|
+
var _ref7 = button || {},
|
314
|
+
buttonTitle = _ref7.title,
|
315
|
+
type = _ref7.type,
|
316
|
+
icon = _ref7.icon,
|
317
|
+
href = _ref7.href,
|
318
|
+
target = _ref7.target,
|
319
|
+
rel = _ref7.rel,
|
320
|
+
onClick = _ref7.onClick;
|
321
|
+
return /*#__PURE__*/React.createElement(Button, {
|
322
|
+
dataAttrs: {
|
323
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
|
324
|
+
},
|
325
|
+
className: cn('button', [buttonClass]),
|
326
|
+
type: type,
|
327
|
+
theme: "green",
|
328
|
+
icon: icon,
|
329
|
+
href: href,
|
330
|
+
target: target,
|
331
|
+
rel: setRelAttribute(rel, target),
|
332
|
+
onClick: onClick
|
333
|
+
}, buttonTitle);
|
334
|
+
}, [button, buttonClass, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
|
307
335
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
308
336
|
className: cn({
|
309
337
|
mask: pictureMask,
|
310
|
-
reversed: isMobileReversed
|
338
|
+
reversed: isMobileReversed,
|
339
|
+
'items-gap': itemsGap
|
311
340
|
}),
|
312
341
|
ref: rootRef
|
313
342
|
}), /*#__PURE__*/React.createElement(Grid, {
|
@@ -328,6 +357,6 @@ var Instructions = function Instructions(_ref) {
|
|
328
357
|
className: cn('articles', {
|
329
358
|
align: pictureAlign
|
330
359
|
})
|
331
|
-
}, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), children)))));
|
360
|
+
}, !!title && renderTitle('desktop'), !isMobileReversed && renderMobileArticles(), renderDesktopArticles(), text && renderText(), showButton && renderButton(), children)))));
|
332
361
|
};
|
333
362
|
export default Instructions;
|
@@ -0,0 +1 @@
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-picture-box_mask_none .mfui-picture-box__image{border-radius:24px;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:414px;-o-object-fit:cover;object-fit:cover}}@media screen and (min-width:1280px){.mfui-picture-box_mask_none .mfui-picture-box__image{height:520px}}.mfui-picture-box_mask_mac-book .mfui-picture-box__image{border-top-left-radius:1.4% 2.2988505747%;border-top-right-radius:1.4% 2.2988505747%;height:87%;left:0;margin:0 auto;-o-object-fit:cover;object-fit:cover;position:absolute;right:0;top:2%;width:82%}.mfui-picture-box__content{-ms-flex-item-align:center;align-self:center;margin-top:32px}@media screen and (min-width:1024px){.mfui-picture-box__content{margin-top:0}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_left .mfui-picture-box__content{margin-left:44px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:12px}}@media screen and (min-width:1280px){.mfui-picture-box_align_right .mfui-picture-box__content{margin-right:44px}}.mfui-picture-box__button-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:20px;margin-top:32px}.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-1x.png);background-repeat:no-repeat;background-size:100% auto;padding-bottom:60.9%;position:relative}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-device-pixel-ratio:2),screen and (min-resolution:192dpi),screen and (min-resolution:2dppx){.mfui-picture-box_mask_mac-book .mfui-picture-box__mask{background-image:url(i/mac-book-2x.png)}}
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import './PictureBox.scss';
|
3
|
+
type ImageType = {
|
4
|
+
src: string;
|
5
|
+
src2x?: string;
|
6
|
+
align?: 'right' | 'left';
|
7
|
+
alt?: string;
|
8
|
+
};
|
9
|
+
type ButtonType = {
|
10
|
+
title?: string;
|
11
|
+
href?: string;
|
12
|
+
target?: '_self' | '_blank';
|
13
|
+
rel?: string;
|
14
|
+
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
15
|
+
};
|
16
|
+
export interface IPictureBoxProps {
|
17
|
+
/** Изображение */
|
18
|
+
image: ImageType;
|
19
|
+
/** Кнопка */
|
20
|
+
button?: ButtonType;
|
21
|
+
/** Дополнительная кнопка */
|
22
|
+
extraButton?: ButtonType;
|
23
|
+
/** Маска */
|
24
|
+
pictureMask?: 'mac-book' | 'none';
|
25
|
+
/** Дочерние элементы */
|
26
|
+
children: React.ReactNode;
|
27
|
+
/** Ссылка на корневой элемент */
|
28
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
29
|
+
/** Дополнительный класс для корневого элемента */
|
30
|
+
className?: string;
|
31
|
+
/** Дополнительный класс корневого элемента */
|
32
|
+
classes?: {
|
33
|
+
root?: string;
|
34
|
+
button?: string;
|
35
|
+
extraButton?: string;
|
36
|
+
};
|
37
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
38
|
+
dataAttrs?: {
|
39
|
+
root?: Record<string, string>;
|
40
|
+
button?: Record<string, string>;
|
41
|
+
extraButton?: Record<string, string>;
|
42
|
+
image?: Record<string, string>;
|
43
|
+
mask?: Record<string, string>;
|
44
|
+
buttonsWrapper?: Record<string, string>;
|
45
|
+
};
|
46
|
+
}
|
47
|
+
declare const PictureBox: React.FC<IPictureBoxProps>;
|
48
|
+
export default PictureBox;
|
@@ -0,0 +1,96 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import "core-js/modules/es.array.concat.js";
|
3
|
+
import * as React from 'react';
|
4
|
+
import { Button, Grid, GridColumn } from '@megafon/ui-core';
|
5
|
+
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
6
|
+
import "./PictureBox.css";
|
7
|
+
var cn = cnCreate('mfui-picture-box');
|
8
|
+
var PictureBox = function PictureBox(_ref) {
|
9
|
+
var image = _ref.image,
|
10
|
+
button = _ref.button,
|
11
|
+
extraButton = _ref.extraButton,
|
12
|
+
_ref$pictureMask = _ref.pictureMask,
|
13
|
+
pictureMask = _ref$pictureMask === void 0 ? 'none' : _ref$pictureMask,
|
14
|
+
dataAttrs = _ref.dataAttrs,
|
15
|
+
className = _ref.className,
|
16
|
+
classes = _ref.classes,
|
17
|
+
rootRef = _ref.rootRef,
|
18
|
+
children = _ref.children;
|
19
|
+
var imageSrc = image.src,
|
20
|
+
imageSrc2x = image.src2x,
|
21
|
+
_image$align = image.align,
|
22
|
+
imageAlign = _image$align === void 0 ? 'left' : _image$align,
|
23
|
+
_image$alt = image.alt,
|
24
|
+
imageAlt = _image$alt === void 0 ? '' : _image$alt;
|
25
|
+
var imageOrder = imageAlign === 'left' ? '0' : '1';
|
26
|
+
var renderImg = function renderImg() {
|
27
|
+
var srcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
|
28
|
+
var img = /*#__PURE__*/React.createElement("img", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
|
29
|
+
className: cn('image'),
|
30
|
+
srcSet: srcSet,
|
31
|
+
src: imageSrc,
|
32
|
+
alt: imageAlt
|
33
|
+
}));
|
34
|
+
if (pictureMask !== 'none') {
|
35
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.mask), {
|
36
|
+
className: cn('mask')
|
37
|
+
}), img);
|
38
|
+
}
|
39
|
+
return img;
|
40
|
+
};
|
41
|
+
var renderButtons = function renderButtons() {
|
42
|
+
if (!button && !extraButton) {
|
43
|
+
return null;
|
44
|
+
}
|
45
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper), {
|
46
|
+
className: cn('button-wrapper')
|
47
|
+
}), !!button && /*#__PURE__*/React.createElement(Button, {
|
48
|
+
href: button.href,
|
49
|
+
target: button.target,
|
50
|
+
rel: button.rel,
|
51
|
+
dataAttrs: {
|
52
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
|
53
|
+
},
|
54
|
+
classes: {
|
55
|
+
root: classes === null || classes === void 0 ? void 0 : classes.button
|
56
|
+
},
|
57
|
+
onClick: button.onClick
|
58
|
+
}, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
|
59
|
+
href: extraButton.href,
|
60
|
+
target: extraButton.target,
|
61
|
+
rel: extraButton.rel,
|
62
|
+
type: "outline",
|
63
|
+
dataAttrs: {
|
64
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
|
65
|
+
},
|
66
|
+
classes: {
|
67
|
+
root: classes === null || classes === void 0 ? void 0 : classes.extraButton
|
68
|
+
},
|
69
|
+
onClick: extraButton.onClick
|
70
|
+
}, extraButton.title));
|
71
|
+
};
|
72
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
73
|
+
className: cn({
|
74
|
+
align: imageAlign,
|
75
|
+
mask: pictureMask
|
76
|
+
}, [classes === null || classes === void 0 ? void 0 : classes.root, className])
|
77
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
78
|
+
ref: rootRef
|
79
|
+
}), /*#__PURE__*/React.createElement(Grid, {
|
80
|
+
guttersLeft: "medium"
|
81
|
+
}, /*#__PURE__*/React.createElement(GridColumn, {
|
82
|
+
all: "7",
|
83
|
+
tablet: "12",
|
84
|
+
mobile: "12",
|
85
|
+
orderWide: imageOrder,
|
86
|
+
orderDesktop: imageOrder
|
87
|
+
}, renderImg()), /*#__PURE__*/React.createElement(GridColumn, {
|
88
|
+
all: "5",
|
89
|
+
tablet: "12",
|
90
|
+
mobile: "12",
|
91
|
+
flex: true
|
92
|
+
}, /*#__PURE__*/React.createElement("div", {
|
93
|
+
className: cn('content')
|
94
|
+
}, children, renderButtons()))));
|
95
|
+
};
|
96
|
+
export default PictureBox;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { Banner } from '@megafon/ui-core';
|
3
|
+
export type PromoBannerPropsType = Omit<React.ComponentProps<typeof Banner>, 'autoHeight' | 'arrowTheme'>;
|
4
|
+
declare const PromoBanner: React.FC<PromoBannerPropsType>;
|
5
|
+
export default PromoBanner;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import "core-js/modules/es.symbol.js";
|
3
|
+
import "core-js/modules/es.array.index-of.js";
|
4
|
+
var __rest = this && this.__rest || function (s, e) {
|
5
|
+
var t = {};
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
7
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
9
|
+
}
|
10
|
+
return t;
|
11
|
+
};
|
12
|
+
import * as React from 'react';
|
13
|
+
import { Banner } from '@megafon/ui-core';
|
14
|
+
import { cnCreate } from '@megafon/ui-helpers';
|
15
|
+
var cn = cnCreate('mfui-promo-banner');
|
16
|
+
var PromoBanner = function PromoBanner(_a) {
|
17
|
+
var children = _a.children,
|
18
|
+
props = __rest(_a, ["children"]);
|
19
|
+
return /*#__PURE__*/React.createElement("div", {
|
20
|
+
className: cn()
|
21
|
+
}, /*#__PURE__*/React.createElement(Banner, _extends({}, props, {
|
22
|
+
autoHeight: true,
|
23
|
+
arrowTheme: "white"
|
24
|
+
}), children));
|
25
|
+
};
|
26
|
+
export default PromoBanner;
|
@@ -0,0 +1 @@
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-promo-banner-slide{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;border-radius:24px;-ms-flex-direction:column;flex-direction:column;min-height:100%;overflow:hidden}.mfui-promo-banner-slide_background_dark-violet{background-image:-webkit-gradient(linear,right top,left top,from(#ada6ba),color-stop(108%,#f6f2f9));background-image:linear-gradient(270deg,#ada6ba,#f6f2f9 108%)}.mfui-promo-banner-slide_background_light-violet{background:#f6f2f9}.mfui-promo-banner-slide__container{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;gap:24px;padding:32px 20px 12px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__container{padding:38px 40px}}@media screen and (min-width:768px){.mfui-promo-banner-slide__container{gap:32px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;min-height:308px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__container{padding:34px 64px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__container{padding:42px 80px}}.mfui-promo-banner-slide__content{color:var(--stcBlack)}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__content{max-width:350px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__content{max-width:450px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__content{max-width:645px}}.mfui-promo-banner-slide__title{margin-bottom:12px}@media screen and (min-width:1280px){.mfui-promo-banner-slide__description{margin-right:82px}}.mfui-promo-banner-slide__buttons-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:16px}@media screen and (min-width:768px){.mfui-promo-banner-slide__buttons-wrapper{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}}.mfui-promo-banner-slide__picture{display:block;height:150px;position:relative;z-index:0}@media screen and (min-width:768px){.mfui-promo-banner-slide__picture{height:100%;position:absolute;top:0}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-promo-banner-slide__picture{left:404px;width:523px}}@media screen and (min-width:1024px){.mfui-promo-banner-slide__picture{width:696px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-promo-banner-slide__picture{left:534px}}@media screen and (min-width:1280px){.mfui-promo-banner-slide__picture{left:744px}}.mfui-promo-banner-slide__image{height:100%;-o-object-fit:cover;object-fit:cover;vertical-align:top;width:100%}@media screen and (min-width:768px){.mfui-promo-banner-slide__image{-o-object-fit:contain;object-fit:contain}}
|
@@ -0,0 +1,66 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import './PromoBannerSlide.scss';
|
3
|
+
type ButtonType = {
|
4
|
+
/** Заголовок */
|
5
|
+
title?: string;
|
6
|
+
/** Ссылка */
|
7
|
+
href?: string;
|
8
|
+
/** Target - свойство тега <a> */
|
9
|
+
target?: '_self' | '_blank';
|
10
|
+
/** Rel - атрибут тега <a> */
|
11
|
+
rel?: string;
|
12
|
+
/** Обработчик клика по кнопке */
|
13
|
+
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
14
|
+
};
|
15
|
+
type ImageType = {
|
16
|
+
/** Изображение на разрешении экрана 1024+ */
|
17
|
+
desktopSrc: string;
|
18
|
+
/** Изображение 2x на разрешении экрана 1024+ */
|
19
|
+
desktopSrc2x?: string;
|
20
|
+
/** Изображение на разрешении экрана 768-1023 */
|
21
|
+
tabletSrc: string;
|
22
|
+
/** Изображение 2x на разрешении экрана 768-1023 */
|
23
|
+
tabletSrc2x?: string;
|
24
|
+
/** Изображение на разрешении экрана 0-767 */
|
25
|
+
mobileSrc: string;
|
26
|
+
/** Изображение 2x на разрешении экрана 0-767 */
|
27
|
+
mobileSrc2x?: string;
|
28
|
+
/** Значение тега alt для изображения */
|
29
|
+
alt?: string;
|
30
|
+
};
|
31
|
+
export interface IPromoBannerSlideProps {
|
32
|
+
/** Дополнительный класс корневого элемента */
|
33
|
+
className?: string;
|
34
|
+
/** Заголовок */
|
35
|
+
title: string | React.ReactNode | React.ReactNode[];
|
36
|
+
/** Текст-описание */
|
37
|
+
description: string | React.ReactNode | React.ReactNode[];
|
38
|
+
/** Кнопка */
|
39
|
+
button?: ButtonType;
|
40
|
+
/** Дополнительная кнопка */
|
41
|
+
extraButton?: ButtonType;
|
42
|
+
/** Изображение */
|
43
|
+
image: ImageType;
|
44
|
+
/** Фон */
|
45
|
+
background?: 'light-violet' | 'dark-violet';
|
46
|
+
/** Дополнительные классы для корневого и внутренних элементов */
|
47
|
+
classes?: {
|
48
|
+
root?: string;
|
49
|
+
button?: string;
|
50
|
+
extraButton?: string;
|
51
|
+
};
|
52
|
+
/** Дополнительные data атрибуты к внутренним элементам */
|
53
|
+
dataAttrs?: {
|
54
|
+
root?: Record<string, string>;
|
55
|
+
image?: Record<string, string>;
|
56
|
+
desktopImageSource?: Record<string, string>;
|
57
|
+
tabletImageSource?: Record<string, string>;
|
58
|
+
buttonsWrapper?: Record<string, string>;
|
59
|
+
button?: Record<string, string>;
|
60
|
+
extraButton?: Record<string, string>;
|
61
|
+
};
|
62
|
+
/** Ссылка на корневой элемент */
|
63
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
64
|
+
}
|
65
|
+
declare const PromoBannerSlide: React.FC<IPromoBannerSlideProps>;
|
66
|
+
export default PromoBannerSlide;
|
@@ -0,0 +1,99 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import "core-js/modules/es.symbol.js";
|
3
|
+
import "core-js/modules/es.symbol.description.js";
|
4
|
+
import "core-js/modules/es.array.concat.js";
|
5
|
+
import * as React from 'react';
|
6
|
+
import { Button, Header, Paragraph } from '@megafon/ui-core';
|
7
|
+
import { cnCreate, convert, filterDataAttrs, breakpoints, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
|
8
|
+
import "./PromoBannerSlide.css";
|
9
|
+
var cn = cnCreate('mfui-promo-banner-slide');
|
10
|
+
var PromoBannerSlide = function PromoBannerSlide(_ref) {
|
11
|
+
var className = _ref.className,
|
12
|
+
title = _ref.title,
|
13
|
+
description = _ref.description,
|
14
|
+
button = _ref.button,
|
15
|
+
extraButton = _ref.extraButton,
|
16
|
+
image = _ref.image,
|
17
|
+
_ref$background = _ref.background,
|
18
|
+
background = _ref$background === void 0 ? 'dark-violet' : _ref$background,
|
19
|
+
classes = _ref.classes,
|
20
|
+
dataAttrs = _ref.dataAttrs,
|
21
|
+
rootRef = _ref.rootRef;
|
22
|
+
var renderButtons = function renderButtons() {
|
23
|
+
if (!button && !extraButton) {
|
24
|
+
return null;
|
25
|
+
}
|
26
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
27
|
+
className: cn('buttons-wrapper')
|
28
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.buttonsWrapper)), !!button && /*#__PURE__*/React.createElement(Button, {
|
29
|
+
href: button.href,
|
30
|
+
target: button.target,
|
31
|
+
rel: button.rel,
|
32
|
+
classes: {
|
33
|
+
root: classes === null || classes === void 0 ? void 0 : classes.button
|
34
|
+
},
|
35
|
+
dataAttrs: {
|
36
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
|
37
|
+
},
|
38
|
+
onClick: button.onClick
|
39
|
+
}, button.title), !!extraButton && /*#__PURE__*/React.createElement(Button, {
|
40
|
+
href: extraButton.href,
|
41
|
+
target: extraButton.target,
|
42
|
+
rel: extraButton.rel,
|
43
|
+
type: "outline",
|
44
|
+
classes: {
|
45
|
+
root: classes === null || classes === void 0 ? void 0 : classes.extraButton
|
46
|
+
},
|
47
|
+
dataAttrs: {
|
48
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.extraButton
|
49
|
+
},
|
50
|
+
onClick: extraButton.onClick
|
51
|
+
}, extraButton.title));
|
52
|
+
};
|
53
|
+
var renderImage = function renderImage() {
|
54
|
+
var desktopSrc = image.desktopSrc,
|
55
|
+
desktopSrc2x = image.desktopSrc2x,
|
56
|
+
tabletSrc = image.tabletSrc,
|
57
|
+
tabletSrc2x = image.tabletSrc2x,
|
58
|
+
mobileSrc = image.mobileSrc,
|
59
|
+
mobileSrc2x = image.mobileSrc2x,
|
60
|
+
alt = image.alt;
|
61
|
+
var desktopSrcSet = desktopSrc2x ? "".concat(desktopSrc, ", ").concat(desktopSrc2x, " 2x") : desktopSrc;
|
62
|
+
var tabletSrcSet = tabletSrc2x ? "".concat(tabletSrc, ", ").concat(tabletSrc2x, " 2x") : tabletSrc;
|
63
|
+
var mobileSrcSet = mobileSrc2x ? "".concat(mobileSrc, ", ").concat(mobileSrc2x, " 2x") : mobileSrc;
|
64
|
+
return /*#__PURE__*/React.createElement("picture", {
|
65
|
+
className: cn('picture')
|
66
|
+
}, /*#__PURE__*/React.createElement("source", _extends({
|
67
|
+
media: "(min-width: ".concat(breakpoints.DESKTOP_SMALL_START, "px)"),
|
68
|
+
srcSet: desktopSrcSet
|
69
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.desktopImageSource))), /*#__PURE__*/React.createElement("source", _extends({
|
70
|
+
media: "(min-width: ".concat(breakpoints.MOBILE_BIG_START, "px)"),
|
71
|
+
srcSet: tabletSrcSet
|
72
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.tabletImageSource))), /*#__PURE__*/React.createElement("img", _extends({
|
73
|
+
className: cn('image'),
|
74
|
+
src: mobileSrc,
|
75
|
+
srcSet: mobileSrcSet,
|
76
|
+
alt: alt || ''
|
77
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image))));
|
78
|
+
};
|
79
|
+
return /*#__PURE__*/React.createElement("div", _extends({
|
80
|
+
className: cn({
|
81
|
+
background: background
|
82
|
+
}, [classes === null || classes === void 0 ? void 0 : classes.root, className])
|
83
|
+
}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
84
|
+
ref: rootRef
|
85
|
+
}), /*#__PURE__*/React.createElement("div", {
|
86
|
+
className: cn('container')
|
87
|
+
}, /*#__PURE__*/React.createElement("div", {
|
88
|
+
className: cn('content')
|
89
|
+
}, /*#__PURE__*/React.createElement(Header, {
|
90
|
+
className: cn('title'),
|
91
|
+
as: "h2",
|
92
|
+
color: "inherit"
|
93
|
+
}, typeof title === 'string' ? convert(title, titleConvertConfig) : title), /*#__PURE__*/React.createElement(Paragraph, {
|
94
|
+
className: cn('description'),
|
95
|
+
hasMargin: false,
|
96
|
+
color: "inherit"
|
97
|
+
}, typeof description === 'string' ? convert(description, textConvertConfig) : description)), renderButtons()), renderImage());
|
98
|
+
};
|
99
|
+
export default PromoBannerSlide;
|
@@ -43,7 +43,7 @@ var PromoCards = function PromoCards(_ref) {
|
|
43
43
|
dataAttrs: {
|
44
44
|
root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
|
45
45
|
},
|
46
|
-
className:
|
46
|
+
className: classes === null || classes === void 0 ? void 0 : classes.card,
|
47
47
|
key: i + item.title
|
48
48
|
}));
|
49
49
|
})));
|
@@ -1 +1 @@
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-stepper-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;gap:16px}.mfui-stepper-item_is-horizontal{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 24px);min-height:2px;position:absolute;top:19px;width:calc(100% - 36px)}@media screen and (min-width:1024px){.mfui-stepper-item_is-horizontal .mfui-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-stepper-item_theme_active .mfui-stepper-item__icon-button{background-color:var(--night20)}.mfui-stepper-item_theme_active .mfui-stepper-item__icon{background-color:var(--night)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-stepper-item_theme_checked .mfui-stepper-item__icon{background-color:var(--brandGreen)}.mfui-stepper-item_theme_checked .mfui-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item_align_left .mfui-stepper-item__separator{left:auto;right:0}.mfui-stepper-item_align_left .mfui-stepper-item__content,.mfui-stepper-item_align_left .mfui-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-stepper-item__icon-button-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;-ms-flex-align:center;-ms-flex-item-align:stretch;align-self:stretch}.mfui-stepper-item__icon-button,.mfui-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-stepper-item__icon-button{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky0);border-radius:100%;height:40px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-stepper-item__icon-button:disabled{cursor:default}.mfui-stepper-item__icon{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--spbSky2);border-radius:100%;color:var(--stcWhite);font-weight:500;height:24px;justify-content:center;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:24px}.mfui-stepper-item__icon svg{width:20px;fill:var(--stcWhite)}.mfui-stepper-item__separator{-o-border-image:url(img/separator-vertical.png) 2 repeat;border-image:url(img/separator-vertical.png) 2 repeat;border-left:2px solid transparent;border-top:none;height:100%;min-height:20px;position:static;-webkit-transition:border-color .25s ease-out;transition:border-color .25s ease-out;width:2px}.mfui-stepper-item__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:4px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-width:160px;padding-bottom:20px}.mfui-stepper-item__link{margin-top:13px}
|
Binary file
|
Binary file
|
package/dist/es/index.d.ts
CHANGED
@@ -30,7 +30,10 @@ export { default as Instructions } from './components/Instructions/Instructions'
|
|
30
30
|
export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
|
31
31
|
export { default as PageTitle } from './components/PageTitle/PageTitle';
|
32
32
|
export { default as Partners } from './components/Partners/Partners';
|
33
|
+
export { default as PictureBox } from './components/PictureBox/PictureBox';
|
33
34
|
export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
|
35
|
+
export { default as PromoBanner } from './components/PromoBanner/PromoBanner';
|
36
|
+
export { default as PromoBannerSlide } from './components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide';
|
34
37
|
export { default as PromoCard } from './components/PromoCards/components/PromoCard/PromoCard';
|
35
38
|
export { default as PromoCards } from './components/PromoCards/PromoCards';
|
36
39
|
export { default as Property } from './components/Property/Property';
|
package/dist/es/index.js
CHANGED
@@ -30,7 +30,10 @@ export { default as Instructions } from "./components/Instructions/Instructions"
|
|
30
30
|
export { default as NotificationBox } from "./components/NotificationBox/NotificationBox";
|
31
31
|
export { default as PageTitle } from "./components/PageTitle/PageTitle";
|
32
32
|
export { default as Partners } from "./components/Partners/Partners";
|
33
|
+
export { default as PictureBox } from "./components/PictureBox/PictureBox";
|
33
34
|
export { default as PictureWithDescription } from "./components/PictureWithDescription/PictureWithDescription";
|
35
|
+
export { default as PromoBanner } from "./components/PromoBanner/PromoBanner";
|
36
|
+
export { default as PromoBannerSlide } from "./components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide";
|
34
37
|
export { default as PromoCard } from "./components/PromoCards/components/PromoCard/PromoCard";
|
35
38
|
export { default as PromoCards } from "./components/PromoCards/PromoCards";
|
36
39
|
export { default as Property } from "./components/Property/Property";
|