@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.
@@ -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(--stcBlack20);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 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}
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
- return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
22
- className: cn([className, classes.root])
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(i),
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, i + 1))
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
- _ref$button = _ref.button,
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 buttonTitle = button.title,
27
- buttonHref = button.href,
28
- buttonTarget = button.target,
29
- buttonRel = button.rel;
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:66%}@media screen and (min-width:1280px){.mfui-steps{width:49%}}@media screen and (max-width:767px){.mfui-steps{width:100%}}.mfui-steps__title{margin-bottom:40px}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{margin-bottom:48px}@media screen and (max-width:767px){.mfui-steps__item{margin-bottom:24px}}.mfui-steps__item:last-child{margin-bottom:0}
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([className]),
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:50%;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
+ 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(--stcBlack20);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 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}
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
- return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
32
- className: cn([className, classes.root])
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(i),
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, i + 1))
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
- _ref$button = _ref.button,
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 buttonTitle = button.title,
33
- buttonHref = button.href,
34
- buttonTarget = button.target,
35
- buttonRel = button.rel;
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:66%}@media screen and (min-width:1280px){.mfui-steps{width:49%}}@media screen and (max-width:767px){.mfui-steps{width:100%}}.mfui-steps__title{margin-bottom:40px}.mfui-steps__list{list-style:none;margin:0;padding:0}.mfui-steps__item{margin-bottom:48px}@media screen and (max-width:767px){.mfui-steps__item{margin-bottom:24px}}.mfui-steps__item:last-child{margin-bottom:0}
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([className]),
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:50%;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
+ 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.7.2",
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.6.1",
80
+ "@megafon/ui-core": "^8.8.0",
81
81
  "@megafon/ui-helpers": "^4.0.1",
82
- "@megafon/ui-icons": "^3.10.1",
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": "032abe223ae76eba0774e4907133843aead19c72"
88
+ "gitHead": "999ff51c6364eb3ad881247c77438ea74ba053fe"
89
89
  }