@megafon/ui-shared 9.0.0-alpha.9 → 9.0.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/BenefitCards/BenefitCard/BenefitCard.css +1 -0
- package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.d.ts +13 -0
- package/dist/es/components/BenefitCards/BenefitCard/BenefitCard.js +59 -0
- package/dist/es/components/BenefitCards/BenefitCards.css +1 -0
- package/dist/es/components/BenefitCards/BenefitCards.d.ts +27 -0
- package/dist/es/components/BenefitCards/BenefitCards.js +35 -0
- package/dist/es/components/BenefitCards/helpers.d.ts +1 -0
- package/dist/es/components/BenefitCards/helpers.js +19 -0
- package/dist/es/components/BenefitCards/types.d.ts +24 -0
- package/dist/es/components/BenefitCards/types.js +1 -0
- package/dist/es/components/BlogBox/components/BlogBoxTile.css +1 -1
- package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +2 -0
- package/dist/es/components/Breadcrumbs/Breadcrumbs.js +3 -0
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +1 -0
- package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.js +18 -13
- package/dist/es/components/Card/Card.css +1 -1
- package/dist/es/components/Card/Card.d.ts +2 -1
- package/dist/es/components/Card/Card.js +23 -16
- package/dist/es/components/Card/types.d.ts +3 -5
- package/dist/es/components/CardsOnBackground/CardsOnBackground.css +1 -0
- package/dist/es/components/CardsOnBackground/CardsOnBackground.d.ts +37 -0
- package/dist/es/components/CardsOnBackground/CardsOnBackground.js +98 -0
- package/dist/es/components/CardsOnBackground/components/CardOnBackground.css +1 -0
- package/dist/es/components/CardsOnBackground/components/CardOnBackground.d.ts +22 -0
- package/dist/es/components/CardsOnBackground/components/CardOnBackground.js +94 -0
- package/dist/es/components/CardsOnBackground/types.d.ts +47 -0
- package/dist/es/components/CardsOnBackground/types.js +10 -0
- package/dist/es/components/CardsOnBackground/useUniformHeights.d.ts +9 -0
- package/dist/es/components/CardsOnBackground/useUniformHeights.js +88 -0
- package/dist/es/components/Container/Container.css +1 -1
- package/dist/es/components/Container/Container.d.ts +4 -0
- package/dist/es/components/Container/Container.js +4 -1
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css +1 -1
- package/dist/es/components/DownloadLinks/DownloadLink.css +1 -1
- package/dist/es/components/DownloadLinks/DownloadLink.js +3 -1
- package/dist/es/components/ImageBanner/ImageBanner.d.ts +3 -0
- package/dist/es/components/ImageBanner/ImageBanner.js +3 -1
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css +1 -1
- package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js +4 -2
- package/dist/es/components/Instructions/Instructions.css +1 -1
- package/dist/es/components/Instructions/Instructions.d.ts +23 -7
- package/dist/es/components/Instructions/Instructions.js +46 -30
- package/dist/es/components/Instructions/img/android.png +0 -0
- package/dist/es/components/Instructions/img/laptop.png +0 -0
- package/dist/es/components/Instructions/img/logo-base.png +0 -0
- package/dist/es/components/Instructions/img/logo-cropped-base-with-opacity.png +0 -0
- package/dist/es/components/Instructions/img/logo-cropped-spb-sky-3.png +0 -0
- package/dist/es/components/Instructions/img/logo-spb-sky-0.png +0 -0
- package/dist/es/components/Partners/Partners.css +1 -1
- package/dist/es/components/Partners/Partners.d.ts +3 -8
- package/dist/es/components/Partners/Partners.js +20 -31
- package/dist/es/components/Partners/components/PartnersItem/PartnersItem.css +1 -0
- package/dist/es/components/Partners/components/PartnersItem/PartnersItem.d.ts +12 -0
- package/dist/es/components/Partners/components/PartnersItem/PartnersItem.js +33 -0
- package/dist/es/components/Partners/types.d.ts +7 -0
- package/dist/es/components/Partners/types.js +1 -0
- package/dist/es/components/PictureBox/PictureBox.d.ts +1 -0
- package/dist/es/components/PictureBox/PictureBox.js +2 -0
- package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts +2 -0
- package/dist/es/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js +2 -0
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.css +1 -1
- package/dist/es/components/ServiceCards/components/ServiceCard/ServiceCard.css +1 -1
- package/dist/es/components/ServiceCards/components/ServiceCard/ServiceCard.js +1 -1
- package/dist/es/components/StepperBox/StepperBox.d.ts +11 -0
- package/dist/es/components/StepperBox/StepperBox.js +36 -0
- package/dist/es/components/StoreButton/StoreButton.css +1 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +1 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +27 -1
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js +31 -24
- package/dist/es/hooks/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/es/hooks/useIsomorphicLayoutEffect.js +6 -0
- package/dist/es/index.d.ts +7 -2
- package/dist/es/index.js +7 -2
- package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.css +1 -0
- package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.d.ts +13 -0
- package/dist/lib/components/BenefitCards/BenefitCard/BenefitCard.js +68 -0
- package/dist/lib/components/BenefitCards/BenefitCards.css +1 -0
- package/dist/lib/components/BenefitCards/BenefitCards.d.ts +27 -0
- package/dist/lib/components/BenefitCards/BenefitCards.js +44 -0
- package/dist/lib/components/BenefitCards/helpers.d.ts +1 -0
- package/dist/lib/components/BenefitCards/helpers.js +26 -0
- package/dist/lib/components/BenefitCards/types.d.ts +24 -0
- package/dist/lib/components/BenefitCards/types.js +5 -0
- package/dist/lib/components/BlogBox/components/BlogBoxTile.css +1 -1
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +2 -0
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +3 -0
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.d.ts +1 -0
- package/dist/lib/components/Breadcrumbs/components/BreadcrumbsItem.js +18 -13
- package/dist/lib/components/Card/Card.css +1 -1
- package/dist/lib/components/Card/Card.d.ts +2 -1
- package/dist/lib/components/Card/Card.js +22 -15
- package/dist/lib/components/Card/types.d.ts +3 -5
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.css +1 -0
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.d.ts +37 -0
- package/dist/lib/components/CardsOnBackground/CardsOnBackground.js +107 -0
- package/dist/lib/components/CardsOnBackground/components/CardOnBackground.css +1 -0
- package/dist/lib/components/CardsOnBackground/components/CardOnBackground.d.ts +22 -0
- package/dist/lib/components/CardsOnBackground/components/CardOnBackground.js +100 -0
- package/dist/lib/components/CardsOnBackground/types.d.ts +47 -0
- package/dist/lib/components/CardsOnBackground/types.js +16 -0
- package/dist/lib/components/CardsOnBackground/useUniformHeights.d.ts +9 -0
- package/dist/lib/components/CardsOnBackground/useUniformHeights.js +95 -0
- package/dist/lib/components/Container/Container.css +1 -1
- package/dist/lib/components/Container/Container.d.ts +4 -0
- package/dist/lib/components/Container/Container.js +4 -1
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.css +1 -1
- package/dist/lib/components/DownloadLinks/DownloadLink.css +1 -1
- package/dist/lib/components/DownloadLinks/DownloadLink.js +3 -1
- package/dist/lib/components/ImageBanner/ImageBanner.d.ts +3 -0
- package/dist/lib/components/ImageBanner/ImageBanner.js +3 -1
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.css +1 -1
- package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.js +4 -2
- package/dist/lib/components/Instructions/Instructions.css +1 -1
- package/dist/lib/components/Instructions/Instructions.d.ts +23 -7
- package/dist/lib/components/Instructions/Instructions.js +47 -30
- package/dist/lib/components/Instructions/img/android.png +0 -0
- package/dist/lib/components/Instructions/img/laptop.png +0 -0
- package/dist/lib/components/Instructions/img/logo-base.png +0 -0
- package/dist/lib/components/Instructions/img/logo-cropped-base-with-opacity.png +0 -0
- package/dist/lib/components/Instructions/img/logo-cropped-spb-sky-3.png +0 -0
- package/dist/lib/components/Instructions/img/logo-spb-sky-0.png +0 -0
- package/dist/lib/components/Partners/Partners.css +1 -1
- package/dist/lib/components/Partners/Partners.d.ts +3 -8
- package/dist/lib/components/Partners/Partners.js +19 -30
- package/dist/lib/components/Partners/components/PartnersItem/PartnersItem.css +1 -0
- package/dist/lib/components/Partners/components/PartnersItem/PartnersItem.d.ts +12 -0
- package/dist/lib/components/Partners/components/PartnersItem/PartnersItem.js +42 -0
- package/dist/lib/components/Partners/types.d.ts +7 -0
- package/dist/lib/components/Partners/types.js +5 -0
- package/dist/lib/components/PictureBox/PictureBox.d.ts +1 -0
- package/dist/lib/components/PictureBox/PictureBox.js +2 -0
- package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.d.ts +2 -0
- package/dist/lib/components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide.js +2 -0
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.css +1 -1
- package/dist/lib/components/ServiceCards/components/ServiceCard/ServiceCard.css +1 -1
- package/dist/lib/components/ServiceCards/components/ServiceCard/ServiceCard.js +1 -1
- package/dist/lib/components/StepperBox/StepperBox.d.ts +11 -0
- package/dist/lib/components/StepperBox/StepperBox.js +46 -0
- package/dist/lib/components/StoreButton/StoreButton.css +1 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +1 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +27 -1
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js +30 -23
- package/dist/lib/hooks/useIsomorphicLayoutEffect.d.ts +3 -0
- package/dist/lib/hooks/useIsomorphicLayoutEffect.js +13 -0
- package/dist/lib/index.d.ts +7 -2
- package/dist/lib/index.js +45 -10
- package/package.json +6 -6
- package/dist/es/components/Instructions/img/android-new.png +0 -0
- package/dist/es/components/Instructions/img/blackIphone.png +0 -0
- package/dist/es/components/Instructions/img/iphone-new.png +0 -0
- package/dist/es/components/Instructions/img/iphone12.png +0 -0
- package/dist/es/components/Instructions/img/laptop-new.png +0 -0
- package/dist/es/components/Stepper/Stepper.css +0 -1
- package/dist/es/components/Stepper/Stepper.d.ts +0 -52
- package/dist/es/components/Stepper/Stepper.js +0 -159
- package/dist/es/components/Stepper/StepperItem.css +0 -1
- package/dist/es/components/Stepper/StepperItem.d.ts +0 -57
- package/dist/es/components/Stepper/StepperItem.js +0 -99
- package/dist/es/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/es/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/es/components/Stepper/img/separator.png +0 -0
- package/dist/lib/components/Instructions/img/android-new.png +0 -0
- package/dist/lib/components/Instructions/img/blackIphone.png +0 -0
- package/dist/lib/components/Instructions/img/iphone-new.png +0 -0
- package/dist/lib/components/Instructions/img/iphone12.png +0 -0
- package/dist/lib/components/Instructions/img/laptop-new.png +0 -0
- package/dist/lib/components/Stepper/Stepper.css +0 -1
- package/dist/lib/components/Stepper/Stepper.d.ts +0 -52
- package/dist/lib/components/Stepper/Stepper.js +0 -168
- package/dist/lib/components/Stepper/StepperItem.css +0 -1
- package/dist/lib/components/Stepper/StepperItem.d.ts +0 -57
- package/dist/lib/components/Stepper/StepperItem.js +0 -108
- package/dist/lib/components/Stepper/img/separator-mobile.png +0 -0
- package/dist/lib/components/Stepper/img/separator-vertical.png +0 -0
- package/dist/lib/components/Stepper/img/separator.png +0 -0
- /package/dist/es/components/Instructions/img/{iphone15.png → iphone.png} +0 -0
- /package/dist/lib/components/Instructions/img/{iphone15.png → iphone.png} +0 -0
package/dist/lib/index.js
CHANGED
|
@@ -39,6 +39,18 @@ Object.defineProperty(exports, "BannerBox", {
|
|
|
39
39
|
return _BannerBox["default"];
|
|
40
40
|
}
|
|
41
41
|
});
|
|
42
|
+
Object.defineProperty(exports, "BenefitCard", {
|
|
43
|
+
enumerable: true,
|
|
44
|
+
get: function get() {
|
|
45
|
+
return _BenefitCard["default"];
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
Object.defineProperty(exports, "BenefitCards", {
|
|
49
|
+
enumerable: true,
|
|
50
|
+
get: function get() {
|
|
51
|
+
return _BenefitCards["default"];
|
|
52
|
+
}
|
|
53
|
+
});
|
|
42
54
|
Object.defineProperty(exports, "BenefitsIcons", {
|
|
43
55
|
enumerable: true,
|
|
44
56
|
get: function get() {
|
|
@@ -105,12 +117,24 @@ Object.defineProperty(exports, "Card", {
|
|
|
105
117
|
return _Card["default"];
|
|
106
118
|
}
|
|
107
119
|
});
|
|
120
|
+
Object.defineProperty(exports, "CardOnBackground", {
|
|
121
|
+
enumerable: true,
|
|
122
|
+
get: function get() {
|
|
123
|
+
return _CardOnBackground["default"];
|
|
124
|
+
}
|
|
125
|
+
});
|
|
108
126
|
Object.defineProperty(exports, "CardsBox", {
|
|
109
127
|
enumerable: true,
|
|
110
128
|
get: function get() {
|
|
111
129
|
return _CardsBox["default"];
|
|
112
130
|
}
|
|
113
131
|
});
|
|
132
|
+
Object.defineProperty(exports, "CardsOnBackground", {
|
|
133
|
+
enumerable: true,
|
|
134
|
+
get: function get() {
|
|
135
|
+
return _CardsOnBackground["default"];
|
|
136
|
+
}
|
|
137
|
+
});
|
|
114
138
|
Object.defineProperty(exports, "CarouselBox", {
|
|
115
139
|
enumerable: true,
|
|
116
140
|
get: function get() {
|
|
@@ -219,6 +243,12 @@ Object.defineProperty(exports, "Partners", {
|
|
|
219
243
|
return _Partners["default"];
|
|
220
244
|
}
|
|
221
245
|
});
|
|
246
|
+
Object.defineProperty(exports, "PartnersItem", {
|
|
247
|
+
enumerable: true,
|
|
248
|
+
get: function get() {
|
|
249
|
+
return _PartnersItem["default"];
|
|
250
|
+
}
|
|
251
|
+
});
|
|
222
252
|
Object.defineProperty(exports, "PictureBox", {
|
|
223
253
|
enumerable: true,
|
|
224
254
|
get: function get() {
|
|
@@ -285,16 +315,10 @@ Object.defineProperty(exports, "SidePictureCards", {
|
|
|
285
315
|
return _SidePictureCards["default"];
|
|
286
316
|
}
|
|
287
317
|
});
|
|
288
|
-
Object.defineProperty(exports, "
|
|
289
|
-
enumerable: true,
|
|
290
|
-
get: function get() {
|
|
291
|
-
return _Stepper["default"];
|
|
292
|
-
}
|
|
293
|
-
});
|
|
294
|
-
Object.defineProperty(exports, "StepperItem", {
|
|
318
|
+
Object.defineProperty(exports, "StepperBox", {
|
|
295
319
|
enumerable: true,
|
|
296
320
|
get: function get() {
|
|
297
|
-
return
|
|
321
|
+
return _StepperBox["default"];
|
|
298
322
|
}
|
|
299
323
|
});
|
|
300
324
|
Object.defineProperty(exports, "Steps", {
|
|
@@ -405,12 +429,20 @@ Object.defineProperty(exports, "useTrackDuration", {
|
|
|
405
429
|
return _useTrackDuration["default"];
|
|
406
430
|
}
|
|
407
431
|
});
|
|
432
|
+
Object.defineProperty(exports, "useUniformHeights", {
|
|
433
|
+
enumerable: true,
|
|
434
|
+
get: function get() {
|
|
435
|
+
return _useUniformHeights["default"];
|
|
436
|
+
}
|
|
437
|
+
});
|
|
408
438
|
var _AccordionBox = _interopRequireDefault(require("./components/AccordionBox/AccordionBox"));
|
|
409
439
|
var _AudioPlayer = _interopRequireDefault(require("./components/AudioPlayer/AudioPlayer"));
|
|
410
440
|
var _AudioProgress = _interopRequireDefault(require("./components/AudioPlayer/AudioProgress"));
|
|
411
441
|
var _AudioRange = _interopRequireDefault(require("./components/AudioPlayer/AudioRange"));
|
|
412
442
|
var _AudioVolume = _interopRequireDefault(require("./components/AudioPlayer/AudioVolume"));
|
|
413
443
|
var _BannerBox = _interopRequireDefault(require("./components/BannerBox/BannerBox"));
|
|
444
|
+
var _BenefitCard = _interopRequireDefault(require("./components/BenefitCards/BenefitCard/BenefitCard"));
|
|
445
|
+
var _BenefitCards = _interopRequireDefault(require("./components/BenefitCards/BenefitCards"));
|
|
414
446
|
var _BenefitsIcons = _interopRequireDefault(require("./components/BenefitsIcons/BenefitsIcons"));
|
|
415
447
|
var _BenefitsIconsTile = _interopRequireDefault(require("./components/BenefitsIcons/BenefitsIconsTile"));
|
|
416
448
|
var _BenefitsPictures = _interopRequireDefault(require("./components/BenefitsPictures/BenefitsPictures"));
|
|
@@ -422,7 +454,9 @@ var _ButtonBanner = _interopRequireDefault(require("./components/ButtonBanner/Bu
|
|
|
422
454
|
var _ButtonLinkBox = _interopRequireDefault(require("./components/ButtonLinkBox/ButtonLinkBox"));
|
|
423
455
|
var _ButtonsBox = _interopRequireDefault(require("./components/ButtonsBox/ButtonsBox"));
|
|
424
456
|
var _Card = _interopRequireDefault(require("./components/Card/Card"));
|
|
457
|
+
var _CardOnBackground = _interopRequireDefault(require("./components/CardsOnBackground/components/CardOnBackground"));
|
|
425
458
|
var _CardsBox = _interopRequireDefault(require("./components/CardsBox/CardsBox"));
|
|
459
|
+
var _CardsOnBackground = _interopRequireDefault(require("./components/CardsOnBackground/CardsOnBackground"));
|
|
426
460
|
var _CarouselBox = _interopRequireDefault(require("./components/CarouselBox/CarouselBox"));
|
|
427
461
|
var _ChipBox = _interopRequireDefault(require("./components/ChipsBox/ChipBox"));
|
|
428
462
|
var _ChipsBox = _interopRequireDefault(require("./components/ChipsBox/ChipsBox"));
|
|
@@ -441,6 +475,7 @@ var _NumbersBox = _interopRequireDefault(require("./components/NumbersBox/Number
|
|
|
441
475
|
var _NumbersCard = _interopRequireDefault(require("./components/NumbersBox/components/NumbersCard/NumbersCard"));
|
|
442
476
|
var _PageTitle = _interopRequireDefault(require("./components/PageTitle/PageTitle"));
|
|
443
477
|
var _Partners = _interopRequireDefault(require("./components/Partners/Partners"));
|
|
478
|
+
var _PartnersItem = _interopRequireDefault(require("./components/Partners/components/PartnersItem/PartnersItem"));
|
|
444
479
|
var _PictureBox = _interopRequireDefault(require("./components/PictureBox/PictureBox"));
|
|
445
480
|
var _PictureWithDescription = _interopRequireDefault(require("./components/PictureWithDescription/PictureWithDescription"));
|
|
446
481
|
var _PromoBanner = _interopRequireDefault(require("./components/PromoBanner/PromoBanner"));
|
|
@@ -452,8 +487,7 @@ var _ServiceCard = _interopRequireDefault(require("./components/ServiceCards/com
|
|
|
452
487
|
var _ServiceCards = _interopRequireDefault(require("./components/ServiceCards/ServiceCards"));
|
|
453
488
|
var _SidePictureCard = _interopRequireDefault(require("./components/SidePictureCards/components/SidePictureCard"));
|
|
454
489
|
var _SidePictureCards = _interopRequireDefault(require("./components/SidePictureCards/SidePictureCards"));
|
|
455
|
-
var
|
|
456
|
-
var _StepperItem = _interopRequireDefault(require("./components/Stepper/StepperItem"));
|
|
490
|
+
var _StepperBox = _interopRequireDefault(require("./components/StepperBox/StepperBox"));
|
|
457
491
|
var _Steps = _interopRequireDefault(require("./components/Steps/Steps"));
|
|
458
492
|
var _StepsItem = _interopRequireDefault(require("./components/Steps/StepsItem"));
|
|
459
493
|
var _StoreBanner = _interopRequireDefault(require("./components/StoreBanner/StoreBanner"));
|
|
@@ -470,6 +504,7 @@ var _TextWithIconItem = _interopRequireDefault(require("./components/TextWithIco
|
|
|
470
504
|
var _timerFormatUtil = _interopRequireDefault(require("./components/AudioPlayer/timerFormatUtil"));
|
|
471
505
|
var _TitleDescriptionBox = _interopRequireDefault(require("./components/TitleDescriptionBox/TitleDescriptionBox"));
|
|
472
506
|
var _useTrackDuration = _interopRequireDefault(require("./components/AudioPlayer/hooks/useTrackDuration"));
|
|
507
|
+
var _useUniformHeights = _interopRequireDefault(require("./components/CardsOnBackground/useUniformHeights"));
|
|
473
508
|
var _VideoBanner = _interopRequireDefault(require("./components/VideoBanner/VideoBanner"));
|
|
474
509
|
var _VideoBlock = _interopRequireDefault(require("./components/VideoBlock/VideoBlock"));
|
|
475
510
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@megafon/ui-shared",
|
|
3
|
-
"version": "9.0.0
|
|
3
|
+
"version": "9.0.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -77,13 +77,13 @@
|
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
79
|
"@babel/runtime": "^7.8.4",
|
|
80
|
-
"@megafon/ui-core": "^9.0.0
|
|
81
|
-
"@megafon/ui-helpers": "^5.0.0
|
|
82
|
-
"@megafon/ui-icons": "^4.0.0
|
|
80
|
+
"@megafon/ui-core": "^9.0.0",
|
|
81
|
+
"@megafon/ui-helpers": "^5.0.0",
|
|
82
|
+
"@megafon/ui-icons": "^4.0.0",
|
|
83
83
|
"core-js": "^3.6.4",
|
|
84
84
|
"htmr": "^1.0.2",
|
|
85
85
|
"lodash.throttle": "^4.1.1",
|
|
86
|
-
"swiper": "^
|
|
86
|
+
"swiper": "^12.1.2"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "7bc0de9281b32fa6cda0c6d6e2b48bec67be30b7"
|
|
89
89
|
}
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-stepper{gap:16px}.mfui-9-stepper,.mfui-9-stepper__items-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-9-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-9-stepper::-webkit-scrollbar{height:8px}.mfui-9-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-9-stepper_is-horizontal .mfui-9-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IStepperItemProps } from './StepperItem';
|
|
3
|
-
import './Stepper.scss';
|
|
4
|
-
export type StepperItemType = Pick<IStepperItemProps, 'title' | 'text' | 'icon' | 'linkText' | 'linkUrl'>;
|
|
5
|
-
export interface IStepperProps {
|
|
6
|
-
/** Дополнительный класс корневого элемента */
|
|
7
|
-
className?: string;
|
|
8
|
-
/** Дополнительные классы элементов */
|
|
9
|
-
classes?: {
|
|
10
|
-
root?: string;
|
|
11
|
-
itemsWrap?: string;
|
|
12
|
-
item?: string;
|
|
13
|
-
itemIconButton?: string;
|
|
14
|
-
itemTitle?: string;
|
|
15
|
-
itemText?: string;
|
|
16
|
-
itemLink?: string;
|
|
17
|
-
};
|
|
18
|
-
/** Ссылка на корневой элемент */
|
|
19
|
-
rootRef?: React.Ref<HTMLDivElement>;
|
|
20
|
-
/** Индекс активного шага */
|
|
21
|
-
activeStep?: number;
|
|
22
|
-
/** Количество шагов */
|
|
23
|
-
stepCount?: number;
|
|
24
|
-
/** Шаги */
|
|
25
|
-
items?: StepperItemType[];
|
|
26
|
-
/** Направление */
|
|
27
|
-
isHorizontal?: boolean;
|
|
28
|
-
/** Цифры вместо галочек */
|
|
29
|
-
isNumeric?: boolean;
|
|
30
|
-
/** Отключение кнопок */
|
|
31
|
-
isDisabled?: boolean;
|
|
32
|
-
/** Все шаги пройдены */
|
|
33
|
-
isAllChecked?: boolean;
|
|
34
|
-
/** Отображение контента только активного шага */
|
|
35
|
-
showActiveStepContent?: boolean;
|
|
36
|
-
/** Выравнивание */
|
|
37
|
-
align?: 'center' | 'left';
|
|
38
|
-
/** Дополнительные data атрибуты к внутренним элементам */
|
|
39
|
-
dataAttrs?: {
|
|
40
|
-
root?: Record<string, string>;
|
|
41
|
-
itemsWrap?: Record<string, string>;
|
|
42
|
-
item?: Record<string, string>;
|
|
43
|
-
itemIconButton?: Record<string, string>;
|
|
44
|
-
itemTitle?: Record<string, string>;
|
|
45
|
-
itemText?: Record<string, string>;
|
|
46
|
-
itemLink?: Record<string, string>;
|
|
47
|
-
};
|
|
48
|
-
/** Обработчик события смены шага */
|
|
49
|
-
onChange?: (index: number) => void;
|
|
50
|
-
}
|
|
51
|
-
declare const Stepper: React.FC<IStepperProps>;
|
|
52
|
-
export default Stepper;
|
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
-
import "core-js/modules/es.array.from.js";
|
|
4
|
-
import "core-js/modules/es.array.map.js";
|
|
5
|
-
import "core-js/modules/es.string.iterator.js";
|
|
6
|
-
import * as React from 'react';
|
|
7
|
-
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
8
|
-
import StepperItem, { STEPPER_ITEM_THEME_ENUM, STEPPER_ITEM_VIEW_ENUM } from "./StepperItem";
|
|
9
|
-
import "./Stepper.css";
|
|
10
|
-
var CheckedIcon = function CheckedIcon(props) {
|
|
11
|
-
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
12
|
-
viewBox: "0 0 20 20"
|
|
13
|
-
}, props), /*#__PURE__*/React.createElement("path", {
|
|
14
|
-
d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
|
|
15
|
-
}));
|
|
16
|
-
};
|
|
17
|
-
var cn = cnCreate('mfui-9-stepper');
|
|
18
|
-
var Stepper = function Stepper(_ref) {
|
|
19
|
-
var className = _ref.className,
|
|
20
|
-
_ref$classes = _ref.classes,
|
|
21
|
-
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
22
|
-
rootClassName = _ref$classes2.root,
|
|
23
|
-
itemsWrapClassName = _ref$classes2.itemsWrap,
|
|
24
|
-
itemClassName = _ref$classes2.item,
|
|
25
|
-
itemIconButtonClassName = _ref$classes2.itemIconButton,
|
|
26
|
-
itemTitleClassName = _ref$classes2.itemTitle,
|
|
27
|
-
itemTextClassname = _ref$classes2.itemText,
|
|
28
|
-
itemLinkClassName = _ref$classes2.itemLink,
|
|
29
|
-
rootRef = _ref.rootRef,
|
|
30
|
-
_ref$activeStep = _ref.activeStep,
|
|
31
|
-
activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
|
|
32
|
-
_ref$stepCount = _ref.stepCount,
|
|
33
|
-
stepCount = _ref$stepCount === void 0 ? 2 : _ref$stepCount,
|
|
34
|
-
_ref$items = _ref.items,
|
|
35
|
-
items = _ref$items === void 0 ? [] : _ref$items,
|
|
36
|
-
_ref$isHorizontal = _ref.isHorizontal,
|
|
37
|
-
isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
|
|
38
|
-
isNumeric = _ref.isNumeric,
|
|
39
|
-
isDisabled = _ref.isDisabled,
|
|
40
|
-
isAllChecked = _ref.isAllChecked,
|
|
41
|
-
_ref$showActiveStepCo = _ref.showActiveStepContent,
|
|
42
|
-
showActiveStepContent = _ref$showActiveStepCo === void 0 ? false : _ref$showActiveStepCo,
|
|
43
|
-
_ref$align = _ref.align,
|
|
44
|
-
align = _ref$align === void 0 ? 'center' : _ref$align,
|
|
45
|
-
_ref$dataAttrs = _ref.dataAttrs,
|
|
46
|
-
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
47
|
-
rootAttrs = _ref$dataAttrs2.root,
|
|
48
|
-
itemsWrapAttrs = _ref$dataAttrs2.itemsWrap,
|
|
49
|
-
itemAttrs = _ref$dataAttrs2.item,
|
|
50
|
-
itemIconButtonAttrs = _ref$dataAttrs2.itemIconButton,
|
|
51
|
-
itemTitleAttrs = _ref$dataAttrs2.itemTitle,
|
|
52
|
-
itemTextAttrs = _ref$dataAttrs2.itemText,
|
|
53
|
-
itemLinkAttrs = _ref$dataAttrs2.itemLink,
|
|
54
|
-
_ref$onChange = _ref.onChange,
|
|
55
|
-
onChange = _ref$onChange === void 0 ? function () {
|
|
56
|
-
return null;
|
|
57
|
-
} : _ref$onChange;
|
|
58
|
-
var _React$useState = React.useState(activeStep),
|
|
59
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
60
|
-
currentIndex = _React$useState2[0],
|
|
61
|
-
setCurrentIndex = _React$useState2[1];
|
|
62
|
-
var hasCustomItems = !!items.length;
|
|
63
|
-
var isHorizontalContent = isHorizontal || showActiveStepContent;
|
|
64
|
-
var currentItems = hasCustomItems ? items : Array.from({
|
|
65
|
-
length: stepCount
|
|
66
|
-
});
|
|
67
|
-
var isCorrectDisabled = React.useMemo(function () {
|
|
68
|
-
return !!isAllChecked || !!isDisabled;
|
|
69
|
-
}, [isAllChecked, isDisabled]);
|
|
70
|
-
var defineItemTheme = React.useCallback(function (index) {
|
|
71
|
-
switch (true) {
|
|
72
|
-
case isAllChecked:
|
|
73
|
-
case index < currentIndex:
|
|
74
|
-
{
|
|
75
|
-
return STEPPER_ITEM_THEME_ENUM.CHECKED;
|
|
76
|
-
}
|
|
77
|
-
case index === currentIndex:
|
|
78
|
-
{
|
|
79
|
-
return STEPPER_ITEM_THEME_ENUM.ACTIVE;
|
|
80
|
-
}
|
|
81
|
-
default:
|
|
82
|
-
{
|
|
83
|
-
return STEPPER_ITEM_THEME_ENUM.DEFAULT;
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}, [currentIndex, isAllChecked]);
|
|
87
|
-
var handleClickItem = React.useCallback(function (index) {
|
|
88
|
-
return function () {
|
|
89
|
-
if (isCorrectDisabled) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
|
-
setCurrentIndex(index);
|
|
93
|
-
onChange(index);
|
|
94
|
-
};
|
|
95
|
-
}, [isCorrectDisabled, onChange]);
|
|
96
|
-
React.useEffect(function () {
|
|
97
|
-
if (activeStep === undefined) {
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
|
-
setCurrentIndex(activeStep);
|
|
101
|
-
}, [activeStep]);
|
|
102
|
-
var renderIcon = React.useCallback(function (index, theme) {
|
|
103
|
-
var isChecked = theme === STEPPER_ITEM_THEME_ENUM.CHECKED;
|
|
104
|
-
if (isNumeric || !isChecked) {
|
|
105
|
-
return index + 1;
|
|
106
|
-
}
|
|
107
|
-
return /*#__PURE__*/React.createElement(CheckedIcon, null);
|
|
108
|
-
}, [isNumeric]);
|
|
109
|
-
var renderItem = React.useCallback(function (props, index) {
|
|
110
|
-
return /*#__PURE__*/React.createElement(StepperItem, _extends({}, props, {
|
|
111
|
-
key: index,
|
|
112
|
-
className: itemClassName,
|
|
113
|
-
classes: {
|
|
114
|
-
iconButton: itemIconButtonClassName,
|
|
115
|
-
title: itemTitleClassName,
|
|
116
|
-
text: itemTextClassname,
|
|
117
|
-
link: itemLinkClassName
|
|
118
|
-
},
|
|
119
|
-
dataAttrs: {
|
|
120
|
-
root: itemAttrs,
|
|
121
|
-
iconButton: itemIconButtonAttrs,
|
|
122
|
-
title: itemTitleAttrs,
|
|
123
|
-
text: itemTextAttrs,
|
|
124
|
-
link: itemLinkAttrs
|
|
125
|
-
}
|
|
126
|
-
}));
|
|
127
|
-
}, [itemAttrs, itemIconButtonAttrs, itemIconButtonClassName, itemClassName, itemLinkAttrs, itemLinkClassName, itemTextAttrs, itemTextClassname, itemTitleAttrs, itemTitleClassName]);
|
|
128
|
-
var renderItems = React.useMemo(function () {
|
|
129
|
-
return currentItems.map(function (elem, i) {
|
|
130
|
-
var item = elem || {};
|
|
131
|
-
var itemTheme = defineItemTheme(i);
|
|
132
|
-
var itemIcon = item.icon || renderIcon(i, itemTheme);
|
|
133
|
-
return renderItem(_extends(_extends({}, item), {
|
|
134
|
-
icon: itemIcon,
|
|
135
|
-
hasSeparator: i < currentItems.length - 1,
|
|
136
|
-
isHorizontal: isHorizontalContent,
|
|
137
|
-
isDisabled: isCorrectDisabled,
|
|
138
|
-
align: align,
|
|
139
|
-
theme: itemTheme,
|
|
140
|
-
view: showActiveStepContent ? STEPPER_ITEM_VIEW_ENUM.ICON : STEPPER_ITEM_VIEW_ENUM.DEFAULT,
|
|
141
|
-
onClick: handleClickItem(i)
|
|
142
|
-
}), i);
|
|
143
|
-
});
|
|
144
|
-
}, [align, currentItems, isCorrectDisabled, showActiveStepContent, isHorizontalContent, defineItemTheme, handleClickItem, renderIcon, renderItem]);
|
|
145
|
-
var renderSingleItem = renderItem(_extends(_extends({}, currentItems[currentIndex]), {
|
|
146
|
-
isDisabled: isCorrectDisabled,
|
|
147
|
-
align: align,
|
|
148
|
-
view: STEPPER_ITEM_VIEW_ENUM.CONTENT
|
|
149
|
-
}));
|
|
150
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
|
|
151
|
-
className: cn([className, rootClassName], {
|
|
152
|
-
'is-horizontal': isHorizontalContent
|
|
153
|
-
}),
|
|
154
|
-
ref: rootRef
|
|
155
|
-
}), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(itemsWrapAttrs), {
|
|
156
|
-
className: cn('items-wrap', [itemsWrapClassName])
|
|
157
|
-
}), renderItems), showActiveStepContent && renderSingleItem);
|
|
158
|
-
};
|
|
159
|
-
export default Stepper;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-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-9-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-9-stepper-item_is-horizontal .mfui-9-stepper-item__separator{-o-border-image:url(img/separator-mobile.png) 2 round;border-image:url(img/separator-mobile.png) 2 round;border-left:none;border-radius:100px;border-top:2px solid transparent;height:2px;left:calc(50% + 22px);min-height:2px;position:absolute;top:19px;width:calc(100% - 32px)}@media screen and (min-width:768px){.mfui-9-stepper-item_is-horizontal .mfui-9-stepper-item__separator{-o-border-image:url(img/separator.png) 2 repeat;border-image:url(img/separator.png) 2 repeat}}@media screen and (min-width:1024px){.mfui-9-stepper-item_is-horizontal .mfui-9-stepper-item__separator{left:calc(50% + 32px);width:calc(100% - 52px)}}.mfui-9-stepper-item_theme_active .mfui-9-stepper-item__icon-button{background-color:var(--night20)}.mfui-9-stepper-item_theme_active .mfui-9-stepper-item__icon{background-color:var(--night)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__icon-button{background-color:var(--brandGreen20)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__icon{background-color:var(--brandGreen)}.mfui-9-stepper-item_theme_checked .mfui-9-stepper-item__separator{border-color:var(--brandGreen);-o-border-image:none;border-image:none}.mfui-9-stepper-item_align_left{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-stepper-item_align_left .mfui-9-stepper-item__separator{left:42px;right:0}@media screen and (min-width:1024px){.mfui-9-stepper-item_align_left .mfui-9-stepper-item__separator{left:auto}}.mfui-9-stepper-item_align_left .mfui-9-stepper-item__content,.mfui-9-stepper-item_align_left .mfui-9-stepper-item__icon-button-area{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.mfui-9-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-9-stepper-item__icon-button,.mfui-9-stepper-item__icon-button-area{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;align-items:center}.mfui-9-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:none;border-radius:100%;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;height:40px;justify-content:center;outline:none;-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out;width:40px}.mfui-9-stepper-item__icon-button:disabled{cursor:default}.mfui-9-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-9-stepper-item__icon svg{height:20px;width:20px;fill:var(--stcWhite)}.mfui-9-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-9-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-9-stepper-item__link{margin-top:13px}
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import './StepperItem.scss';
|
|
3
|
-
export declare enum STEPPER_ITEM_THEME_ENUM {
|
|
4
|
-
CHECKED = "checked",
|
|
5
|
-
ACTIVE = "active",
|
|
6
|
-
DEFAULT = "default"
|
|
7
|
-
}
|
|
8
|
-
export declare enum STEPPER_ITEM_VIEW_ENUM {
|
|
9
|
-
ICON = "icon",
|
|
10
|
-
CONTENT = "content",
|
|
11
|
-
DEFAULT = "default"
|
|
12
|
-
}
|
|
13
|
-
export interface IStepperItemProps {
|
|
14
|
-
/** Дополнительный класс корневого элемента */
|
|
15
|
-
className?: string;
|
|
16
|
-
/** Дополнительные классы элементов */
|
|
17
|
-
classes?: {
|
|
18
|
-
iconButton?: string;
|
|
19
|
-
title?: string;
|
|
20
|
-
text?: string;
|
|
21
|
-
link?: string;
|
|
22
|
-
};
|
|
23
|
-
/** Тема */
|
|
24
|
-
theme?: STEPPER_ITEM_THEME_ENUM;
|
|
25
|
-
/** Заголовок */
|
|
26
|
-
title?: string;
|
|
27
|
-
/** Текст */
|
|
28
|
-
text?: string;
|
|
29
|
-
/** Текст ссылки */
|
|
30
|
-
linkText?: string;
|
|
31
|
-
/** Адрес ссылки */
|
|
32
|
-
linkUrl?: string;
|
|
33
|
-
/** Иконка */
|
|
34
|
-
icon?: string | number | JSX.Element;
|
|
35
|
-
/** Наличие разделителя */
|
|
36
|
-
hasSeparator?: boolean;
|
|
37
|
-
/** Направление */
|
|
38
|
-
isHorizontal?: boolean;
|
|
39
|
-
/** Отключение */
|
|
40
|
-
isDisabled?: boolean;
|
|
41
|
-
/** Выравнивание */
|
|
42
|
-
align?: 'center' | 'left';
|
|
43
|
-
/** Варианты отображения */
|
|
44
|
-
view?: STEPPER_ITEM_VIEW_ENUM;
|
|
45
|
-
/** Дополнительные data атрибуты к внутренним элементам */
|
|
46
|
-
dataAttrs?: {
|
|
47
|
-
root?: Record<string, string>;
|
|
48
|
-
iconButton?: Record<string, string>;
|
|
49
|
-
title?: Record<string, string>;
|
|
50
|
-
text?: Record<string, string>;
|
|
51
|
-
link?: Record<string, string>;
|
|
52
|
-
};
|
|
53
|
-
/** Обработчик события клика */
|
|
54
|
-
onClick?: () => void;
|
|
55
|
-
}
|
|
56
|
-
declare const StepperItem: React.FC<IStepperItemProps>;
|
|
57
|
-
export default StepperItem;
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import "core-js/modules/es.string.link.js";
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { Button, Header, Paragraph } from '@megafon/ui-core';
|
|
5
|
-
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
|
6
|
-
import "./StepperItem.css";
|
|
7
|
-
export var STEPPER_ITEM_THEME_ENUM;
|
|
8
|
-
(function (STEPPER_ITEM_THEME_ENUM) {
|
|
9
|
-
STEPPER_ITEM_THEME_ENUM["CHECKED"] = "checked";
|
|
10
|
-
STEPPER_ITEM_THEME_ENUM["ACTIVE"] = "active";
|
|
11
|
-
STEPPER_ITEM_THEME_ENUM["DEFAULT"] = "default";
|
|
12
|
-
})(STEPPER_ITEM_THEME_ENUM || (STEPPER_ITEM_THEME_ENUM = {}));
|
|
13
|
-
export var STEPPER_ITEM_VIEW_ENUM;
|
|
14
|
-
(function (STEPPER_ITEM_VIEW_ENUM) {
|
|
15
|
-
STEPPER_ITEM_VIEW_ENUM["ICON"] = "icon";
|
|
16
|
-
STEPPER_ITEM_VIEW_ENUM["CONTENT"] = "content";
|
|
17
|
-
STEPPER_ITEM_VIEW_ENUM["DEFAULT"] = "default";
|
|
18
|
-
})(STEPPER_ITEM_VIEW_ENUM || (STEPPER_ITEM_VIEW_ENUM = {}));
|
|
19
|
-
var cn = cnCreate('mfui-9-stepper-item');
|
|
20
|
-
var StepperItem = function StepperItem(_ref) {
|
|
21
|
-
var className = _ref.className,
|
|
22
|
-
_ref$classes = _ref.classes,
|
|
23
|
-
_ref$classes2 = _ref$classes === void 0 ? {} : _ref$classes,
|
|
24
|
-
iconButtonClassName = _ref$classes2.iconButton,
|
|
25
|
-
titleClassName = _ref$classes2.title,
|
|
26
|
-
textClassName = _ref$classes2.text,
|
|
27
|
-
linkClassName = _ref$classes2.link,
|
|
28
|
-
_ref$theme = _ref.theme,
|
|
29
|
-
theme = _ref$theme === void 0 ? STEPPER_ITEM_THEME_ENUM.DEFAULT : _ref$theme,
|
|
30
|
-
title = _ref.title,
|
|
31
|
-
text = _ref.text,
|
|
32
|
-
linkText = _ref.linkText,
|
|
33
|
-
linkUrl = _ref.linkUrl,
|
|
34
|
-
icon = _ref.icon,
|
|
35
|
-
hasSeparator = _ref.hasSeparator,
|
|
36
|
-
_ref$isHorizontal = _ref.isHorizontal,
|
|
37
|
-
isHorizontal = _ref$isHorizontal === void 0 ? true : _ref$isHorizontal,
|
|
38
|
-
isDisabled = _ref.isDisabled,
|
|
39
|
-
_ref$align = _ref.align,
|
|
40
|
-
align = _ref$align === void 0 ? 'center' : _ref$align,
|
|
41
|
-
_ref$view = _ref.view,
|
|
42
|
-
view = _ref$view === void 0 ? STEPPER_ITEM_VIEW_ENUM.DEFAULT : _ref$view,
|
|
43
|
-
_ref$dataAttrs = _ref.dataAttrs,
|
|
44
|
-
_ref$dataAttrs2 = _ref$dataAttrs === void 0 ? {} : _ref$dataAttrs,
|
|
45
|
-
rootAttrs = _ref$dataAttrs2.root,
|
|
46
|
-
iconButtonAttrs = _ref$dataAttrs2.iconButton,
|
|
47
|
-
titleAttrs = _ref$dataAttrs2.title,
|
|
48
|
-
textAttrs = _ref$dataAttrs2.text,
|
|
49
|
-
linkAttrs = _ref$dataAttrs2.link,
|
|
50
|
-
onClick = _ref.onClick;
|
|
51
|
-
var hasLink = !!linkText && !!linkUrl;
|
|
52
|
-
var hasContent = !!title || !!text || hasLink;
|
|
53
|
-
var showContent = view !== STEPPER_ITEM_VIEW_ENUM.ICON && hasContent;
|
|
54
|
-
var showIcon = view !== STEPPER_ITEM_VIEW_ENUM.CONTENT;
|
|
55
|
-
var renderContent = /*#__PURE__*/React.createElement("div", {
|
|
56
|
-
className: cn('content')
|
|
57
|
-
}, title && /*#__PURE__*/React.createElement(Header, {
|
|
58
|
-
className: cn([titleClassName]),
|
|
59
|
-
dataAttrs: {
|
|
60
|
-
root: titleAttrs
|
|
61
|
-
},
|
|
62
|
-
as: "h5",
|
|
63
|
-
align: align
|
|
64
|
-
}, title), text && /*#__PURE__*/React.createElement(Paragraph, {
|
|
65
|
-
className: cn([textClassName]),
|
|
66
|
-
dataAttrs: {
|
|
67
|
-
root: textAttrs
|
|
68
|
-
},
|
|
69
|
-
hasMargin: false,
|
|
70
|
-
align: align
|
|
71
|
-
}, text), hasLink && /*#__PURE__*/React.createElement(Button, {
|
|
72
|
-
className: cn('link', [linkClassName]),
|
|
73
|
-
dataAttrs: {
|
|
74
|
-
root: linkAttrs
|
|
75
|
-
},
|
|
76
|
-
href: linkUrl,
|
|
77
|
-
type: "text",
|
|
78
|
-
sizeAll: "extra-small"
|
|
79
|
-
}, linkText));
|
|
80
|
-
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(rootAttrs), {
|
|
81
|
-
className: cn([className], {
|
|
82
|
-
theme: theme,
|
|
83
|
-
align: align,
|
|
84
|
-
'is-horizontal': isHorizontal
|
|
85
|
-
})
|
|
86
|
-
}), showIcon && /*#__PURE__*/React.createElement("div", {
|
|
87
|
-
className: cn('icon-button-area')
|
|
88
|
-
}, /*#__PURE__*/React.createElement("button", _extends({}, filterDataAttrs(iconButtonAttrs), {
|
|
89
|
-
className: cn('icon-button', [iconButtonClassName]),
|
|
90
|
-
type: "button",
|
|
91
|
-
disabled: isDisabled,
|
|
92
|
-
onClick: onClick
|
|
93
|
-
}), /*#__PURE__*/React.createElement("span", {
|
|
94
|
-
className: cn('icon')
|
|
95
|
-
}, icon)), hasSeparator && /*#__PURE__*/React.createElement("span", {
|
|
96
|
-
className: cn('separator')
|
|
97
|
-
})), showContent && renderContent);
|
|
98
|
-
};
|
|
99
|
-
export default StepperItem;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-9-stepper{gap:16px}.mfui-9-stepper,.mfui-9-stepper__items-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mfui-9-stepper__items-wrap{gap:12px;overflow-x:auto}.mfui-9-stepper::-webkit-scrollbar{height:8px}.mfui-9-stepper::-webkit-scrollbar-thumb{background-color:var(--spbSky2);border-radius:8px}.mfui-9-stepper_is-horizontal .mfui-9-stepper__items-wrap{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IStepperItemProps } from './StepperItem';
|
|
3
|
-
import './Stepper.scss';
|
|
4
|
-
export type StepperItemType = Pick<IStepperItemProps, 'title' | 'text' | 'icon' | 'linkText' | 'linkUrl'>;
|
|
5
|
-
export interface IStepperProps {
|
|
6
|
-
/** Дополнительный класс корневого элемента */
|
|
7
|
-
className?: string;
|
|
8
|
-
/** Дополнительные классы элементов */
|
|
9
|
-
classes?: {
|
|
10
|
-
root?: string;
|
|
11
|
-
itemsWrap?: string;
|
|
12
|
-
item?: string;
|
|
13
|
-
itemIconButton?: string;
|
|
14
|
-
itemTitle?: string;
|
|
15
|
-
itemText?: string;
|
|
16
|
-
itemLink?: string;
|
|
17
|
-
};
|
|
18
|
-
/** Ссылка на корневой элемент */
|
|
19
|
-
rootRef?: React.Ref<HTMLDivElement>;
|
|
20
|
-
/** Индекс активного шага */
|
|
21
|
-
activeStep?: number;
|
|
22
|
-
/** Количество шагов */
|
|
23
|
-
stepCount?: number;
|
|
24
|
-
/** Шаги */
|
|
25
|
-
items?: StepperItemType[];
|
|
26
|
-
/** Направление */
|
|
27
|
-
isHorizontal?: boolean;
|
|
28
|
-
/** Цифры вместо галочек */
|
|
29
|
-
isNumeric?: boolean;
|
|
30
|
-
/** Отключение кнопок */
|
|
31
|
-
isDisabled?: boolean;
|
|
32
|
-
/** Все шаги пройдены */
|
|
33
|
-
isAllChecked?: boolean;
|
|
34
|
-
/** Отображение контента только активного шага */
|
|
35
|
-
showActiveStepContent?: boolean;
|
|
36
|
-
/** Выравнивание */
|
|
37
|
-
align?: 'center' | 'left';
|
|
38
|
-
/** Дополнительные data атрибуты к внутренним элементам */
|
|
39
|
-
dataAttrs?: {
|
|
40
|
-
root?: Record<string, string>;
|
|
41
|
-
itemsWrap?: Record<string, string>;
|
|
42
|
-
item?: Record<string, string>;
|
|
43
|
-
itemIconButton?: Record<string, string>;
|
|
44
|
-
itemTitle?: Record<string, string>;
|
|
45
|
-
itemText?: Record<string, string>;
|
|
46
|
-
itemLink?: Record<string, string>;
|
|
47
|
-
};
|
|
48
|
-
/** Обработчик события смены шага */
|
|
49
|
-
onChange?: (index: number) => void;
|
|
50
|
-
}
|
|
51
|
-
declare const Stepper: React.FC<IStepperProps>;
|
|
52
|
-
export default Stepper;
|