@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.
Files changed (37) hide show
  1. package/dist/es/components/Container/Container.css +1 -1
  2. package/dist/es/components/Instructions/Instructions.css +1 -1
  3. package/dist/es/components/Instructions/Instructions.d.ts +15 -0
  4. package/dist/es/components/Instructions/Instructions.js +32 -3
  5. package/dist/es/components/PictureBox/PictureBox.css +1 -0
  6. package/dist/es/components/PictureBox/PictureBox.d.ts +48 -0
  7. package/dist/es/components/PictureBox/PictureBox.js +96 -0
  8. package/dist/es/components/PromoBanner/PromoBanner.d.ts +5 -0
  9. package/dist/es/components/PromoBanner/PromoBanner.js +26 -0
  10. package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.css +1 -0
  11. package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts +66 -0
  12. package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js +99 -0
  13. package/dist/es/components/PromoCards/PromoCards.js +1 -1
  14. package/dist/es/components/Stepper/StepperItem.css +1 -1
  15. package/dist/es/components/Stepper/img/separator-vertical.png +0 -0
  16. package/dist/es/components/Stepper/img/separator.png +0 -0
  17. package/dist/es/index.d.ts +3 -0
  18. package/dist/es/index.js +3 -0
  19. package/dist/lib/components/Container/Container.css +1 -1
  20. package/dist/lib/components/Instructions/Instructions.css +1 -1
  21. package/dist/lib/components/Instructions/Instructions.d.ts +15 -0
  22. package/dist/lib/components/Instructions/Instructions.js +31 -2
  23. package/dist/lib/components/PictureBox/PictureBox.css +1 -0
  24. package/dist/lib/components/PictureBox/PictureBox.d.ts +48 -0
  25. package/dist/lib/components/PictureBox/PictureBox.js +105 -0
  26. package/dist/lib/components/PromoBanner/PromoBanner.d.ts +5 -0
  27. package/dist/lib/components/PromoBanner/PromoBanner.js +36 -0
  28. package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.css +1 -0
  29. package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts +66 -0
  30. package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js +108 -0
  31. package/dist/lib/components/PromoCards/PromoCards.js +1 -1
  32. package/dist/lib/components/Stepper/StepperItem.css +1 -1
  33. package/dist/lib/components/Stepper/img/separator-vertical.png +0 -0
  34. package/dist/lib/components/Stepper/img/separator.png +0 -0
  35. package/dist/lib/index.d.ts +3 -0
  36. package/dist/lib/index.js +21 -0
  37. 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: cn([classes === null || classes === void 0 ? void 0 : classes.card]),
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(i/separator.png) 2 repeat;border-image:url(i/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(i/separator-vertical.png) 2 repeat;border-image:url(i/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}
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}
@@ -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";