@megafon/ui-shared 8.7.2 → 8.8.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/Card/Card.css +1 -1
- package/dist/es/components/SidePictureCards/SidePictureCards.d.ts +4 -0
- package/dist/es/components/SidePictureCards/SidePictureCards.js +41 -19
- package/dist/es/components/SidePictureCards/components/SidePictureCard.js +6 -6
- package/dist/es/components/Steps/Steps.css +1 -1
- package/dist/es/components/Steps/Steps.d.ts +2 -0
- package/dist/es/components/Steps/Steps.js +5 -1
- package/dist/es/components/Steps/StepsItem.css +1 -1
- package/dist/lib/components/Card/Card.css +1 -1
- package/dist/lib/components/SidePictureCards/SidePictureCards.d.ts +4 -0
- package/dist/lib/components/SidePictureCards/SidePictureCards.js +39 -17
- package/dist/lib/components/SidePictureCards/components/SidePictureCard.js +6 -6
- package/dist/lib/components/Steps/Steps.css +1 -1
- package/dist/lib/components/Steps/Steps.d.ts +2 -0
- package/dist/lib/components/Steps/Steps.js +5 -1
- package/dist/lib/components/Steps/StepsItem.css +1 -1
- package/package.json +4 -4
@@ -1 +1 @@
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-card{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);-ms-flex-direction:column;flex-direction:column;padding:16px 16px 24px;text-decoration:none!important;-webkit-transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,box-shadow,.3s;transition:background-color .3s,box-shadow,.3s,-webkit-box-shadow}@media screen and (min-width:1280px){.mfui-card{padding:24px 24px 32px}}.mfui-card_full-height{height:100%}.mfui-card_link{cursor:pointer}.mfui-card_view_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-card_link.mfui-card_view_hover-shadow:hover,.mfui-card_link.mfui-card_view_shadow:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-card_view_background{background-color:var(--spbSky0)}.mfui-card_link.mfui-card_view_background:hover{background-color:var(--spbSky1)}.mfui-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-card_only-title{padding:32px}}.mfui-card__header{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-card__img{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:100%}.mfui-card_link:hover .mfui-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-card__marker-item{padding-left:20px;position:relative}.mfui-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-card__marker-item:before{background-color:var(--
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-card{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);-ms-flex-direction:column;flex-direction:column;padding:16px 16px 24px;text-decoration:none!important;-webkit-transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,box-shadow,.3s;transition:background-color .3s,box-shadow,.3s,-webkit-box-shadow}@media screen and (min-width:1280px){.mfui-card{padding:24px 24px 32px}}.mfui-card_full-height{height:100%}.mfui-card_link{cursor:pointer}.mfui-card_view_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-card_link.mfui-card_view_hover-shadow:hover,.mfui-card_link.mfui-card_view_shadow:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-card_view_background{background-color:var(--spbSky0)}.mfui-card_link.mfui-card_view_background:hover{background-color:var(--spbSky1)}.mfui-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-card_only-title{padding:32px}}.mfui-card__header{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-card__img{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:100%}.mfui-card_link:hover .mfui-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-card__marker-item{padding-left:20px;position:relative}.mfui-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-card__marker-item:before{background-color:var(--spbSky2);border-radius:50%;content:"";height:6px;left:0;opacity:.8;position:absolute;top:7px;width:6px}.mfui-card__marker-note{display:block;font-weight:500;margin:4px 0 0;padding:0}.mfui-card__texts{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;margin-top:16px}.mfui-card__texts ol,.mfui-card__texts ul{margin:0;padding-left:24px}.mfui-card__texts ol{list-style-type:decimal}.mfui-card__texts ul{list-style-type:disc}.mfui-card__texts-title{font-weight:500}.mfui-card__features{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;margin-top:16px;overflow:hidden}.mfui-card__features-list{list-style:none;margin:0;padding:0}.mfui-card__features-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-card__features-item:before{background-image:radial-gradient(circle,var(--spbSky3) 1px,transparent 1px);background-size:6px 2px;bottom:.4em;content:"";height:2px;position:absolute;width:100%}.mfui-card__features-item-value{-ms-flex-negative:0;flex-shrink:0;text-align:end}.mfui-card__features-item-text{background-color:var(--base);position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;z-index:1}.mfui-card_view_background .mfui-card__features-item-text{background-color:var(--spbSky0)}.mfui-card_link.mfui-card_view_background:hover .mfui-card__features-item-text{background-color:var(--spbSky1)}.mfui-card__features-item-title .mfui-card__features-item-text{padding-right:4px}.mfui-card__features-item-value .mfui-card__features-item-text{padding-left:4px}.mfui-card__icons{margin-top:16px}.mfui-card__icons-desc{margin-bottom:12px}.mfui-card__icons-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.mfui-card__icons-item,.mfui-card__icons-list{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-card__icons-item-icon{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-right:8px;width:32px}.mfui-card__icons-item-text{margin-top:4px}.mfui-card__price{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-ms-flex-pack:center;border-top:1px solid var(--spbSky1);justify-content:center;margin-top:24px;padding-top:24px}@media screen and (min-width:1280px){.mfui-card__price{margin-top:32px}}.mfui-card__img-box+.mfui-card__price{border:none;padding-top:0}.mfui-card__price-old-value{color:var(--spbSky3);position:relative}.mfui-card__price-old-value:before{background-color:var(--fury);content:"";height:1px;left:-1px;position:absolute;right:-1px;top:50%}.mfui-card__price-value{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-card__price-value{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-card__price-value{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-card__price-value{font-size:32px;line-height:40px}}.mfui-card__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;margin-top:32px}.mfui-card__price+.mfui-card__buttons{margin-top:24px}.mfui-card__buttons_centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-card__button{-ms-flex-preferred-size:190px;flex-basis:190px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;max-width:320px}.mfui-card__footer{margin-top:auto}
|
@@ -5,6 +5,8 @@ export interface ISidePictureCards {
|
|
5
5
|
items: CardDataType[];
|
6
6
|
/** Цвет фона карточек */
|
7
7
|
background?: BackgroundType;
|
8
|
+
/** Выстраивать карточки в карусель */
|
9
|
+
hasCarousel?: boolean;
|
8
10
|
/** Дополнительный класс для компонента */
|
9
11
|
className?: string;
|
10
12
|
/** Дополнительные классы для внутренних элементов */
|
@@ -17,6 +19,8 @@ export interface ISidePictureCards {
|
|
17
19
|
root?: Record<string, string>;
|
18
20
|
item?: Record<string, string>;
|
19
21
|
};
|
22
|
+
/** Ссылка на корневой элемент */
|
23
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
20
24
|
}
|
21
25
|
declare const SidePictureCards: React.FC<ISidePictureCards>;
|
22
26
|
export default SidePictureCards;
|
@@ -1,44 +1,66 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
3
|
import "core-js/modules/es.array.concat.js";
|
3
4
|
import "core-js/modules/es.array.map.js";
|
4
5
|
import * as React from 'react';
|
5
|
-
import { Grid, GridColumn } from '@megafon/ui-core';
|
6
|
-
import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
6
|
+
import { Carousel, Grid, GridColumn } from '@megafon/ui-core';
|
7
|
+
import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
|
7
8
|
import SidePictureCard from "./components/SidePictureCard";
|
9
|
+
var slidesSettings = _defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
|
10
|
+
slidesPerView: 1,
|
11
|
+
spaceBetween: 16
|
12
|
+
}), breakpoints.MOBILE_BIG_START, {
|
13
|
+
slidesPerView: 2,
|
14
|
+
spaceBetween: 20
|
15
|
+
});
|
8
16
|
var MIN_ITEMS_COUNT = 2;
|
9
17
|
var cn = cnCreate('mfui-side-picture-cards');
|
10
18
|
var SidePictureCards = function SidePictureCards(_ref) {
|
11
19
|
var items = _ref.items,
|
12
20
|
_ref$background = _ref.background,
|
13
21
|
background = _ref$background === void 0 ? 'gray' : _ref$background,
|
22
|
+
_ref$hasCarousel = _ref.hasCarousel,
|
23
|
+
hasCarousel = _ref$hasCarousel === void 0 ? false : _ref$hasCarousel,
|
14
24
|
className = _ref.className,
|
15
25
|
_ref$classes = _ref.classes,
|
16
26
|
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
17
|
-
dataAttrs = _ref.dataAttrs
|
27
|
+
dataAttrs = _ref.dataAttrs,
|
28
|
+
rootRef = _ref.rootRef;
|
18
29
|
if (items.length < MIN_ITEMS_COUNT) {
|
19
30
|
return null;
|
20
31
|
}
|
21
|
-
|
22
|
-
|
23
|
-
}), /*#__PURE__*/React.createElement(Grid, {
|
24
|
-
className: cn(),
|
25
|
-
guttersLeft: "medium",
|
26
|
-
guttersBottom: "medium"
|
27
|
-
}, items.map(function (item, i) {
|
28
|
-
return /*#__PURE__*/React.createElement(GridColumn, {
|
29
|
-
all: "6",
|
30
|
-
mobile: "12",
|
31
|
-
key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
|
32
|
-
}, /*#__PURE__*/React.createElement(SidePictureCard, _extends({}, item, {
|
32
|
+
var renderItem = function renderItem(item, index) {
|
33
|
+
return /*#__PURE__*/React.createElement(SidePictureCard, _extends({}, item, {
|
33
34
|
background: background,
|
34
|
-
key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(
|
35
|
+
key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(index),
|
35
36
|
classes: {
|
36
37
|
root: classes.item
|
37
38
|
},
|
38
39
|
dataAttrs: {
|
39
|
-
root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item,
|
40
|
+
root: _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
|
40
41
|
}
|
41
|
-
}))
|
42
|
-
}
|
42
|
+
}));
|
43
|
+
};
|
44
|
+
var renderContent = function renderContent() {
|
45
|
+
if (hasCarousel) {
|
46
|
+
return /*#__PURE__*/React.createElement(Carousel, {
|
47
|
+
slidesSettings: slidesSettings
|
48
|
+
}, items.map(renderItem));
|
49
|
+
}
|
50
|
+
return /*#__PURE__*/React.createElement(Grid, {
|
51
|
+
guttersLeft: "medium",
|
52
|
+
guttersBottom: "medium"
|
53
|
+
}, items.map(function (item, i) {
|
54
|
+
return /*#__PURE__*/React.createElement(GridColumn, {
|
55
|
+
all: "6",
|
56
|
+
mobile: "12",
|
57
|
+
key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
|
58
|
+
}, renderItem(item, i));
|
59
|
+
}));
|
60
|
+
};
|
61
|
+
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
62
|
+
className: cn([className, classes.root]),
|
63
|
+
ref: rootRef
|
64
|
+
}), renderContent());
|
43
65
|
};
|
44
66
|
export default SidePictureCards;
|
@@ -15,18 +15,18 @@ var SidePictureCard = function SidePictureCard(_ref) {
|
|
15
15
|
image = _ref.image,
|
16
16
|
_ref$iconItems = _ref.iconItems,
|
17
17
|
iconItems = _ref$iconItems === void 0 ? [] : _ref$iconItems,
|
18
|
-
|
19
|
-
button = _ref$button === void 0 ? {} : _ref$button,
|
18
|
+
button = _ref.button,
|
20
19
|
href = _ref.href,
|
21
20
|
target = _ref.target,
|
22
21
|
rel = _ref.rel,
|
23
22
|
_ref$classes = _ref.classes,
|
24
23
|
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
25
24
|
dataAttrs = _ref.dataAttrs;
|
26
|
-
var
|
27
|
-
|
28
|
-
|
29
|
-
|
25
|
+
var _ref2 = button || {},
|
26
|
+
buttonTitle = _ref2.title,
|
27
|
+
buttonHref = _ref2.href,
|
28
|
+
buttonTarget = _ref2.target,
|
29
|
+
buttonRel = _ref2.rel;
|
30
30
|
var isLink = !!href && !buttonHref;
|
31
31
|
var ElementType = isLink ? 'a' : 'div';
|
32
32
|
var currentRel = setRelAttribute(rel, target);
|
@@ -1 +1 @@
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:100%}@media screen and (min-width:768px){.mfui-steps{width:66%}}@media screen and (min-width:1280px){.mfui-steps{width:49%}}.mfui-steps__title{margin-bottom:24px}@media screen and (min-width:1024px){.mfui-steps__title{margin-bottom:40px}}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{border-radius:24px;margin-bottom:12px;padding:16px}.mfui-steps__item:last-child{margin-bottom:0}.mfui-steps_theme_gray .mfui-steps__item{background-color:var(--spbSky0)}.mfui-steps_theme_white .mfui-steps__item{background-color:var(--base)}.mfui-steps_theme_none .mfui-steps__title{margin-bottom:40px}.mfui-steps_theme_none .mfui-steps__item{border-radius:0;margin-bottom:48px;padding:0}@media screen and (max-width:767px){.mfui-steps_theme_none .mfui-steps__item{margin-bottom:24px}}
|
@@ -13,6 +13,8 @@ export interface ISteps {
|
|
13
13
|
rootRef?: React.Ref<HTMLDivElement>;
|
14
14
|
/** Заголовок */
|
15
15
|
title?: string;
|
16
|
+
/** Цветовая тема. DEPRECATED: 'none' */
|
17
|
+
theme?: 'none' | 'white' | 'gray';
|
16
18
|
children: React.ReactNode;
|
17
19
|
}
|
18
20
|
declare const Steps: React.FC<ISteps>;
|
@@ -9,9 +9,13 @@ var Steps = function Steps(_ref) {
|
|
9
9
|
classes = _ref.classes,
|
10
10
|
title = _ref.title,
|
11
11
|
rootRef = _ref.rootRef,
|
12
|
+
_ref$theme = _ref.theme,
|
13
|
+
theme = _ref$theme === void 0 ? 'none' : _ref$theme,
|
12
14
|
children = _ref.children;
|
13
15
|
return /*#__PURE__*/React.createElement("div", {
|
14
|
-
className: cn(
|
16
|
+
className: cn({
|
17
|
+
theme: theme
|
18
|
+
}, [className]),
|
15
19
|
ref: rootRef
|
16
20
|
}, !!title && /*#__PURE__*/React.createElement(Header, {
|
17
21
|
as: "h2",
|
@@ -1 +1 @@
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--brandGreen);border-radius:
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--brandGreen);border-radius:12px;color:var(--stcWhite);height:40px;justify-content:center;width:40px}.mfui-steps-item__text-wrapper{padding-left:16px;padding-top:8px}.mfui-steps-item__nodes{font-size:15px;font-weight:400;line-height:24px}
|
@@ -1 +1 @@
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-card{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);-ms-flex-direction:column;flex-direction:column;padding:16px 16px 24px;text-decoration:none!important;-webkit-transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,box-shadow,.3s;transition:background-color .3s,box-shadow,.3s,-webkit-box-shadow}@media screen and (min-width:1280px){.mfui-card{padding:24px 24px 32px}}.mfui-card_full-height{height:100%}.mfui-card_link{cursor:pointer}.mfui-card_view_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-card_link.mfui-card_view_hover-shadow:hover,.mfui-card_link.mfui-card_view_shadow:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-card_view_background{background-color:var(--spbSky0)}.mfui-card_link.mfui-card_view_background:hover{background-color:var(--spbSky1)}.mfui-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-card_only-title{padding:32px}}.mfui-card__header{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-card__img{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:100%}.mfui-card_link:hover .mfui-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-card__marker-item{padding-left:20px;position:relative}.mfui-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-card__marker-item:before{background-color:var(--
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-card{display:-webkit-box;display:-ms-flexbox;display:flex;font-family:inherit;font-size:15px;font-weight:400;line-height:24px;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-color:var(--base);border-radius:24px;color:var(--content);-ms-flex-direction:column;flex-direction:column;padding:16px 16px 24px;text-decoration:none!important;-webkit-transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,.3s,-webkit-box-shadow;transition:background-color .3s,box-shadow,.3s;transition:background-color .3s,box-shadow,.3s,-webkit-box-shadow}@media screen and (min-width:1280px){.mfui-card{padding:24px 24px 32px}}.mfui-card_full-height{height:100%}.mfui-card_link{cursor:pointer}.mfui-card_view_shadow{-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1)}.mfui-card_link.mfui-card_view_hover-shadow:hover,.mfui-card_link.mfui-card_view_shadow:hover{-webkit-box-shadow:0 8px 28px 0 rgba(0,0,0,.1);box-shadow:0 8px 28px 0 rgba(0,0,0,.1)}.mfui-card_view_background{background-color:var(--spbSky0)}.mfui-card_link.mfui-card_view_background:hover{background-color:var(--spbSky1)}.mfui-card_only-title{padding:24px}@media screen and (min-width:1280px){.mfui-card_only-title{padding:32px}}.mfui-card__header{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-card__icon{height:40px;margin-bottom:32px;width:40px}.mfui-card__img-box{border-radius:24px;overflow:hidden;padding-bottom:56.25%;position:relative}.mfui-card__img-box_position_top{margin:-6px -6px 24px}@media screen and (min-width:1280px){.mfui-card__img-box_position_top{margin:-12px -12px 32px}}.mfui-card__img-box_position_bottom{margin:24px -6px 0}@media screen and (min-width:1280px){.mfui-card__img-box_position_bottom{margin:32px -12px 0}}.mfui-card__img{height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:100%}.mfui-card_link:hover .mfui-card__img{-webkit-transform:scale(1.2);transform:scale(1.2)}.mfui-card__marker-list{list-style-type:none;margin:16px 0 0;padding:0}.mfui-card__marker-item{padding-left:20px;position:relative}.mfui-card__marker-item:not(:last-child){margin-bottom:12px}.mfui-card__marker-item:before{background-color:var(--spbSky2);border-radius:50%;content:"";height:6px;left:0;opacity:.8;position:absolute;top:7px;width:6px}.mfui-card__marker-note{display:block;font-weight:500;margin:4px 0 0;padding:0}.mfui-card__texts{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;margin-top:16px}.mfui-card__texts ol,.mfui-card__texts ul{margin:0;padding-left:24px}.mfui-card__texts ol{list-style-type:decimal}.mfui-card__texts ul{list-style-type:disc}.mfui-card__texts-title{font-weight:500}.mfui-card__features{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px;margin-top:16px;overflow:hidden}.mfui-card__features-list{list-style:none;margin:0;padding:0}.mfui-card__features-item{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.mfui-card__features-item:before{background-image:radial-gradient(circle,var(--spbSky3) 1px,transparent 1px);background-size:6px 2px;bottom:.4em;content:"";height:2px;position:absolute;width:100%}.mfui-card__features-item-value{-ms-flex-negative:0;flex-shrink:0;text-align:end}.mfui-card__features-item-text{background-color:var(--base);position:relative;-webkit-transition:background-color .3s;transition:background-color .3s;z-index:1}.mfui-card_view_background .mfui-card__features-item-text{background-color:var(--spbSky0)}.mfui-card_link.mfui-card_view_background:hover .mfui-card__features-item-text{background-color:var(--spbSky1)}.mfui-card__features-item-title .mfui-card__features-item-text{padding-right:4px}.mfui-card__features-item-value .mfui-card__features-item-text{padding-left:4px}.mfui-card__icons{margin-top:16px}.mfui-card__icons-desc{margin-bottom:12px}.mfui-card__icons-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;gap:12px}.mfui-card__icons-item,.mfui-card__icons-list{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-card__icons-item-icon{-ms-flex-negative:0;flex-shrink:0;height:32px;margin-right:8px;width:32px}.mfui-card__icons-item-text{margin-top:4px}.mfui-card__price{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:8px;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-ms-flex-pack:center;border-top:1px solid var(--spbSky1);justify-content:center;margin-top:24px;padding-top:24px}@media screen and (min-width:1280px){.mfui-card__price{margin-top:32px}}.mfui-card__img-box+.mfui-card__price{border:none;padding-top:0}.mfui-card__price-old-value{color:var(--spbSky3);position:relative}.mfui-card__price-old-value:before{background-color:var(--fury);content:"";height:1px;left:-1px;position:absolute;right:-1px;top:50%}.mfui-card__price-value{font-size:22px;font-weight:600;letter-spacing:.5px;line-height:28px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-card__price-value{font-size:26px;line-height:32px}}@media screen and (min-width:1024px){.mfui-card__price-value{font-size:28px;line-height:36px}}@media screen and (min-width:1280px){.mfui-card__price-value{font-size:32px;line-height:40px}}.mfui-card__buttons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px;margin-top:32px}.mfui-card__price+.mfui-card__buttons{margin-top:24px}.mfui-card__buttons_centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mfui-card__button{-ms-flex-preferred-size:190px;flex-basis:190px;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;max-width:320px}.mfui-card__footer{margin-top:auto}
|
@@ -5,6 +5,8 @@ export interface ISidePictureCards {
|
|
5
5
|
items: CardDataType[];
|
6
6
|
/** Цвет фона карточек */
|
7
7
|
background?: BackgroundType;
|
8
|
+
/** Выстраивать карточки в карусель */
|
9
|
+
hasCarousel?: boolean;
|
8
10
|
/** Дополнительный класс для компонента */
|
9
11
|
className?: string;
|
10
12
|
/** Дополнительные классы для внутренних элементов */
|
@@ -17,6 +19,8 @@ export interface ISidePictureCards {
|
|
17
19
|
root?: Record<string, string>;
|
18
20
|
item?: Record<string, string>;
|
19
21
|
};
|
22
|
+
/** Ссылка на корневой элемент */
|
23
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
20
24
|
}
|
21
25
|
declare const SidePictureCards: React.FC<ISidePictureCards>;
|
22
26
|
export default SidePictureCards;
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports["default"] = void 0;
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
10
|
require("core-js/modules/es.array.concat.js");
|
10
11
|
require("core-js/modules/es.array.map.js");
|
11
12
|
var React = _interopRequireWildcard(require("react"));
|
@@ -15,40 +16,61 @@ var _SidePictureCard = _interopRequireDefault(require("./components/SidePictureC
|
|
15
16
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
16
17
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
17
18
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
19
|
+
var slidesSettings = (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
|
20
|
+
slidesPerView: 1,
|
21
|
+
spaceBetween: 16
|
22
|
+
}), _uiHelpers.breakpoints.MOBILE_BIG_START, {
|
23
|
+
slidesPerView: 2,
|
24
|
+
spaceBetween: 20
|
25
|
+
});
|
18
26
|
var MIN_ITEMS_COUNT = 2;
|
19
27
|
var cn = (0, _uiHelpers.cnCreate)('mfui-side-picture-cards');
|
20
28
|
var SidePictureCards = function SidePictureCards(_ref) {
|
21
29
|
var items = _ref.items,
|
22
30
|
_ref$background = _ref.background,
|
23
31
|
background = _ref$background === void 0 ? 'gray' : _ref$background,
|
32
|
+
_ref$hasCarousel = _ref.hasCarousel,
|
33
|
+
hasCarousel = _ref$hasCarousel === void 0 ? false : _ref$hasCarousel,
|
24
34
|
className = _ref.className,
|
25
35
|
_ref$classes = _ref.classes,
|
26
36
|
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
27
|
-
dataAttrs = _ref.dataAttrs
|
37
|
+
dataAttrs = _ref.dataAttrs,
|
38
|
+
rootRef = _ref.rootRef;
|
28
39
|
if (items.length < MIN_ITEMS_COUNT) {
|
29
40
|
return null;
|
30
41
|
}
|
31
|
-
|
32
|
-
|
33
|
-
}), /*#__PURE__*/React.createElement(_uiCore.Grid, {
|
34
|
-
className: cn(),
|
35
|
-
guttersLeft: "medium",
|
36
|
-
guttersBottom: "medium"
|
37
|
-
}, items.map(function (item, i) {
|
38
|
-
return /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
|
39
|
-
all: "6",
|
40
|
-
mobile: "12",
|
41
|
-
key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
|
42
|
-
}, /*#__PURE__*/React.createElement(_SidePictureCard["default"], (0, _extends2["default"])({}, item, {
|
42
|
+
var renderItem = function renderItem(item, index) {
|
43
|
+
return /*#__PURE__*/React.createElement(_SidePictureCard["default"], (0, _extends2["default"])({}, item, {
|
43
44
|
background: background,
|
44
|
-
key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(
|
45
|
+
key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(index),
|
45
46
|
classes: {
|
46
47
|
root: classes.item
|
47
48
|
},
|
48
49
|
dataAttrs: {
|
49
|
-
root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item,
|
50
|
+
root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
|
50
51
|
}
|
51
|
-
}))
|
52
|
-
}
|
52
|
+
}));
|
53
|
+
};
|
54
|
+
var renderContent = function renderContent() {
|
55
|
+
if (hasCarousel) {
|
56
|
+
return /*#__PURE__*/React.createElement(_uiCore.Carousel, {
|
57
|
+
slidesSettings: slidesSettings
|
58
|
+
}, items.map(renderItem));
|
59
|
+
}
|
60
|
+
return /*#__PURE__*/React.createElement(_uiCore.Grid, {
|
61
|
+
guttersLeft: "medium",
|
62
|
+
guttersBottom: "medium"
|
63
|
+
}, items.map(function (item, i) {
|
64
|
+
return /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
|
65
|
+
all: "6",
|
66
|
+
mobile: "12",
|
67
|
+
key: "".concat(item === null || item === void 0 ? void 0 : item.title, "_").concat(i)
|
68
|
+
}, renderItem(item, i));
|
69
|
+
}));
|
70
|
+
};
|
71
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
72
|
+
className: cn([className, classes.root]),
|
73
|
+
ref: rootRef
|
74
|
+
}), renderContent());
|
53
75
|
};
|
54
76
|
var _default = exports["default"] = SidePictureCards;
|
@@ -21,18 +21,18 @@ var SidePictureCard = function SidePictureCard(_ref) {
|
|
21
21
|
image = _ref.image,
|
22
22
|
_ref$iconItems = _ref.iconItems,
|
23
23
|
iconItems = _ref$iconItems === void 0 ? [] : _ref$iconItems,
|
24
|
-
|
25
|
-
button = _ref$button === void 0 ? {} : _ref$button,
|
24
|
+
button = _ref.button,
|
26
25
|
href = _ref.href,
|
27
26
|
target = _ref.target,
|
28
27
|
rel = _ref.rel,
|
29
28
|
_ref$classes = _ref.classes,
|
30
29
|
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
31
30
|
dataAttrs = _ref.dataAttrs;
|
32
|
-
var
|
33
|
-
|
34
|
-
|
35
|
-
|
31
|
+
var _ref2 = button || {},
|
32
|
+
buttonTitle = _ref2.title,
|
33
|
+
buttonHref = _ref2.href,
|
34
|
+
buttonTarget = _ref2.target,
|
35
|
+
buttonRel = _ref2.rel;
|
36
36
|
var isLink = !!href && !buttonHref;
|
37
37
|
var ElementType = isLink ? 'a' : 'div';
|
38
38
|
var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
|
@@ -1 +1 @@
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-steps{margin-left:auto;margin-right:auto;width:100%}@media screen and (min-width:768px){.mfui-steps{width:66%}}@media screen and (min-width:1280px){.mfui-steps{width:49%}}.mfui-steps__title{margin-bottom:24px}@media screen and (min-width:1024px){.mfui-steps__title{margin-bottom:40px}}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{border-radius:24px;margin-bottom:12px;padding:16px}.mfui-steps__item:last-child{margin-bottom:0}.mfui-steps_theme_gray .mfui-steps__item{background-color:var(--spbSky0)}.mfui-steps_theme_white .mfui-steps__item{background-color:var(--base)}.mfui-steps_theme_none .mfui-steps__title{margin-bottom:40px}.mfui-steps_theme_none .mfui-steps__item{border-radius:0;margin-bottom:48px;padding:0}@media screen and (max-width:767px){.mfui-steps_theme_none .mfui-steps__item{margin-bottom:24px}}
|
@@ -13,6 +13,8 @@ export interface ISteps {
|
|
13
13
|
rootRef?: React.Ref<HTMLDivElement>;
|
14
14
|
/** Заголовок */
|
15
15
|
title?: string;
|
16
|
+
/** Цветовая тема. DEPRECATED: 'none' */
|
17
|
+
theme?: 'none' | 'white' | 'gray';
|
16
18
|
children: React.ReactNode;
|
17
19
|
}
|
18
20
|
declare const Steps: React.FC<ISteps>;
|
@@ -17,9 +17,13 @@ var Steps = function Steps(_ref) {
|
|
17
17
|
classes = _ref.classes,
|
18
18
|
title = _ref.title,
|
19
19
|
rootRef = _ref.rootRef,
|
20
|
+
_ref$theme = _ref.theme,
|
21
|
+
theme = _ref$theme === void 0 ? 'none' : _ref$theme,
|
20
22
|
children = _ref.children;
|
21
23
|
return /*#__PURE__*/React.createElement("div", {
|
22
|
-
className: cn(
|
24
|
+
className: cn({
|
25
|
+
theme: theme
|
26
|
+
}, [className]),
|
23
27
|
ref: rootRef
|
24
28
|
}, !!title && /*#__PURE__*/React.createElement(_uiCore.Header, {
|
25
29
|
as: "h2",
|
@@ -1 +1 @@
|
|
1
|
-
h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--brandGreen);border-radius:
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-steps-item,.mfui-steps-item__step-number{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-steps-item__step-number{font-size:15px;font-weight:500;line-height:24px;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;background-color:var(--brandGreen);border-radius:12px;color:var(--stcWhite);height:40px;justify-content:center;width:40px}.mfui-steps-item__text-wrapper{padding-left:16px;padding-top:8px}.mfui-steps-item__nodes{font-size:15px;font-weight:400;line-height:24px}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@megafon/ui-shared",
|
3
|
-
"version": "8.
|
3
|
+
"version": "8.8.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": "^8.
|
80
|
+
"@megafon/ui-core": "^8.8.0",
|
81
81
|
"@megafon/ui-helpers": "^4.0.1",
|
82
|
-
"@megafon/ui-icons": "^3.
|
82
|
+
"@megafon/ui-icons": "^3.11.0",
|
83
83
|
"core-js": "^3.6.4",
|
84
84
|
"htmr": "^1.0.2",
|
85
85
|
"lodash.throttle": "^4.1.1",
|
86
86
|
"swiper": "^11.1.1"
|
87
87
|
},
|
88
|
-
"gitHead": "
|
88
|
+
"gitHead": "999ff51c6364eb3ad881247c77438ea74ba053fe"
|
89
89
|
}
|