@megafon/ui-shared 6.10.0 → 6.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/es/components/ButtonsBox/ButtonsBox.css +34 -0
  2. package/dist/es/components/ButtonsBox/ButtonsBox.d.ts +48 -0
  3. package/dist/es/components/ButtonsBox/ButtonsBox.js +89 -0
  4. package/dist/es/components/Container/Container.css +526 -1
  5. package/dist/es/components/Container/Container.d.ts +9 -0
  6. package/dist/es/components/Container/Container.js +14 -3
  7. package/dist/es/components/InfoCards/InfoCards.d.ts +4 -1
  8. package/dist/es/components/InfoCards/InfoCards.js +14 -5
  9. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css +30 -7
  10. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.d.ts +4 -0
  11. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js +20 -10
  12. package/dist/es/components/InfoCards/types.d.ts +6 -1
  13. package/dist/es/components/PromoCards/PromoCards.d.ts +28 -0
  14. package/dist/es/components/PromoCards/PromoCards.js +90 -0
  15. package/dist/es/components/PromoCards/components/PromoCard/PromoCard.css +157 -0
  16. package/dist/es/components/PromoCards/components/PromoCard/PromoCard.d.ts +18 -0
  17. package/dist/es/components/PromoCards/components/PromoCard/PromoCard.js +74 -0
  18. package/dist/es/components/PromoCards/types.d.ts +29 -0
  19. package/dist/es/components/PromoCards/types.js +0 -0
  20. package/dist/es/index.d.ts +3 -0
  21. package/dist/es/index.js +3 -0
  22. package/dist/lib/components/ButtonsBox/ButtonsBox.css +34 -0
  23. package/dist/lib/components/ButtonsBox/ButtonsBox.d.ts +48 -0
  24. package/dist/lib/components/ButtonsBox/ButtonsBox.js +110 -0
  25. package/dist/lib/components/Container/Container.css +526 -1
  26. package/dist/lib/components/Container/Container.d.ts +9 -0
  27. package/dist/lib/components/Container/Container.js +14 -3
  28. package/dist/lib/components/InfoCards/InfoCards.d.ts +4 -1
  29. package/dist/lib/components/InfoCards/InfoCards.js +16 -13
  30. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.css +30 -7
  31. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.d.ts +4 -0
  32. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.js +19 -9
  33. package/dist/lib/components/InfoCards/types.d.ts +6 -1
  34. package/dist/lib/components/PromoCards/PromoCards.d.ts +28 -0
  35. package/dist/lib/components/PromoCards/PromoCards.js +113 -0
  36. package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.css +157 -0
  37. package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.d.ts +18 -0
  38. package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.js +96 -0
  39. package/dist/lib/components/PromoCards/types.d.ts +29 -0
  40. package/dist/lib/components/PromoCards/types.js +1 -0
  41. package/dist/lib/index.d.ts +3 -0
  42. package/dist/lib/index.js +24 -0
  43. package/package.json +3 -3
@@ -15,12 +15,21 @@ declare type Props = {
15
15
  rootRef?: Ref<HTMLDivElement>;
16
16
  /** Дополнительный класс корневого элемента */
17
17
  className?: string;
18
+ /** Дополнительные классы для корневого и внутренних элементов */
19
+ classes?: {
20
+ root?: string;
21
+ inner?: string;
22
+ };
18
23
  /** Цвет фона */
19
24
  backgroundColor?: BackgroundColorType;
20
25
  /** Отключить отступ сверху */
21
26
  disablePaddingTop?: boolean;
22
27
  /** Отключить отступ снизу */
23
28
  disablePaddingBottom?: boolean;
29
+ /** Отключить скругление сверху */
30
+ disableRadiusTop?: boolean;
31
+ /** Отключить скругление снизу */
32
+ disableRadiusBottom?: boolean;
24
33
  /** Включить тень в нижней части компонента */
25
34
  bottomShadow?: boolean;
26
35
  /** Предотвратить прохождение верхнего отступа дочернего компонента через верхнюю границу контейнера */
@@ -19,9 +19,12 @@ var Container = function Container(_ref) {
19
19
  rootRef = _ref.rootRef,
20
20
  id = _ref.id,
21
21
  className = _ref.className,
22
+ classes = _ref.classes,
22
23
  children = _ref.children,
23
24
  disablePaddingTop = _ref.disablePaddingTop,
24
25
  disablePaddingBottom = _ref.disablePaddingBottom,
26
+ disableRadiusTop = _ref.disableRadiusTop,
27
+ disableRadiusBottom = _ref.disableRadiusBottom,
25
28
  _ref$bottomShadow = _ref.bottomShadow,
26
29
  bottomShadow = _ref$bottomShadow === void 0 ? false : _ref$bottomShadow,
27
30
  _ref$preventMarginTop = _ref.preventMarginTopCollapse,
@@ -31,26 +34,34 @@ var Container = function Container(_ref) {
31
34
  'bg-color': backgroundColor,
32
35
  'bottom-shadow': bottomShadow,
33
36
  'disable-padding-top': disablePaddingTop,
34
- 'disable-padding-bottom': disablePaddingBottom
35
- }, [className]),
37
+ 'disable-padding-bottom': disablePaddingBottom,
38
+ 'disable-radius-top': disableRadiusTop,
39
+ 'disable-radius-bottom': disableRadiusBottom
40
+ }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
36
41
  ref: rootRef,
37
42
  id: id
38
43
  }, /*#__PURE__*/React.createElement("div", {
39
44
  className: cn('inner', {
40
45
  prevent: preventMarginTopCollapse
41
- })
46
+ }, [classes === null || classes === void 0 ? void 0 : classes.inner])
42
47
  }, /*#__PURE__*/React.createElement(ContentArea, null, children)));
43
48
  };
44
49
 
45
50
  Container.propTypes = {
46
51
  id: PropTypes.string,
47
52
  className: PropTypes.string,
53
+ classes: PropTypes.shape({
54
+ root: PropTypes.string,
55
+ inner: PropTypes.string
56
+ }),
48
57
  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColors)),
49
58
  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
50
59
  current: PropTypes.elementType
51
60
  }), PropTypes.any])]),
52
61
  disablePaddingTop: PropTypes.bool,
53
62
  disablePaddingBottom: PropTypes.bool,
63
+ disableRadiusTop: PropTypes.bool,
64
+ disableRadiusBottom: PropTypes.bool,
54
65
  bottomShadow: PropTypes.bool,
55
66
  preventMarginTopCollapse: PropTypes.bool
56
67
  };
@@ -1,4 +1,4 @@
1
- import * as React from 'react';
1
+ import React, { Ref } from 'react';
2
2
  import { IInfoCardData, IInfoCardSettings } from './types';
3
3
  import './InfoCards.less';
4
4
  export interface IInfoCards extends IInfoCardSettings {
@@ -8,6 +8,7 @@ export interface IInfoCards extends IInfoCardSettings {
8
8
  classes?: {
9
9
  root?: string;
10
10
  card?: string;
11
+ cardTitle?: string;
11
12
  };
12
13
  /** Дополнительные data атрибуты к внутренним элементам */
13
14
  dataAttrs?: {
@@ -16,6 +17,8 @@ export interface IInfoCards extends IInfoCardSettings {
16
17
  };
17
18
  /** Список карточек */
18
19
  items: IInfoCardData[];
20
+ /** Ссылка на корневой элемент */
21
+ rootRef?: Ref<HTMLDivElement>;
19
22
  }
20
23
  declare const InfoCards: React.FC<IInfoCards>;
21
24
  export default InfoCards;
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import "core-js/modules/es.array.map.js";
3
3
  import "core-js/modules/es.array.concat.js";
4
- import * as React from 'react';
4
+ import React from 'react';
5
5
  import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
6
6
  import PropTypes from 'prop-types';
7
7
  import InfoCard from "./components/InfoCard/InfoCard";
@@ -18,13 +18,15 @@ var InfoCards = function InfoCards(_ref) {
18
18
  imgPosition = _ref$imgPosition === void 0 ? 'top-left' : _ref$imgPosition,
19
19
  _ref$background = _ref.background,
20
20
  background = _ref$background === void 0 ? 'stroke' : _ref$background,
21
- dataAttrs = _ref.dataAttrs;
21
+ dataAttrs = _ref.dataAttrs,
22
+ rootRef = _ref.rootRef;
22
23
  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
23
24
  className: cn({
24
25
  size: size,
25
26
  position: imgPosition,
26
27
  background: background
27
- }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
28
+ }, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
29
+ ref: rootRef
28
30
  }), items.map(function (item, i) {
29
31
  return /*#__PURE__*/React.createElement(InfoCard, _extends({}, item, {
30
32
  className: classes === null || classes === void 0 ? void 0 : classes.card,
@@ -34,6 +36,9 @@ var InfoCards = function InfoCards(_ref) {
34
36
  dataAttrs: {
35
37
  root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
36
38
  },
39
+ classes: {
40
+ title: classes === null || classes === void 0 ? void 0 : classes.cardTitle
41
+ },
37
42
  key: "".concat(item.title, "_").concat(i)
38
43
  }));
39
44
  }));
@@ -43,7 +48,8 @@ InfoCards.propTypes = {
43
48
  className: PropTypes.string,
44
49
  classes: PropTypes.shape({
45
50
  root: PropTypes.string,
46
- card: PropTypes.string
51
+ card: PropTypes.string,
52
+ cardTitle: PropTypes.string
47
53
  }),
48
54
  dataAttrs: PropTypes.shape({
49
55
  root: PropTypes.objectOf(PropTypes.string.isRequired),
@@ -61,6 +67,9 @@ InfoCards.propTypes = {
61
67
  target: PropTypes.oneOf(['_self', '_blank']),
62
68
  rel: PropTypes.string,
63
69
  moreInfo: PropTypes.string
64
- }).isRequired).isRequired
70
+ }).isRequired).isRequired,
71
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
72
+ current: PropTypes.elementType
73
+ }), PropTypes.any])])
65
74
  };
66
75
  export default InfoCards;
@@ -58,7 +58,10 @@ h5 {
58
58
  -webkit-transition: color 0.3s;
59
59
  transition: color 0.3s;
60
60
  }
61
- .mfui-v6-info-card_link:hover .mfui-v6-info-card__more-info {
61
+ .mfui-v6-info-card_active {
62
+ cursor: pointer;
63
+ }
64
+ .mfui-v6-info-card_active:hover .mfui-v6-info-card__more-info {
62
65
  color: var(--brandGreen);
63
66
  }
64
67
  .mfui-v6-info-card__more-info-text {
@@ -195,6 +198,26 @@ h5 {
195
198
  .mfui-v6-info-card_position_right-side .mfui-v6-info-card__more-info {
196
199
  padding-top: 8px;
197
200
  }
201
+ @media screen and (min-width: 768px) {
202
+ .mfui-v6-info-card_size_big.mfui-v6-info-card_align-center {
203
+ -webkit-box-align: center;
204
+ -ms-flex-align: center;
205
+ align-items: center;
206
+ }
207
+ }
208
+ @media screen and (min-width: 768px) {
209
+ .mfui-v6-info-card_size_big.mfui-v6-info-card_align-center .mfui-v6-info-card__more-info {
210
+ margin-top: 0;
211
+ }
212
+ }
213
+ .mfui-v6-info-card_position_right-side.mfui-v6-info-card_align-center {
214
+ -webkit-box-align: center;
215
+ -ms-flex-align: center;
216
+ align-items: center;
217
+ }
218
+ .mfui-v6-info-card_position_right-side.mfui-v6-info-card_align-center .mfui-v6-info-card__more-info {
219
+ margin-top: 0;
220
+ }
198
221
  .mfui-v6-info-card_background_stroke {
199
222
  border: 1px solid var(--spbSky2);
200
223
  }
@@ -218,20 +241,20 @@ h5 {
218
241
  .mfui-v6-info-card_background_no {
219
242
  padding: 0;
220
243
  }
221
- .mfui-v6-info-card_background_stroke.mfui-v6-info-card_link:hover {
244
+ .mfui-v6-info-card_background_stroke.mfui-v6-info-card_active:hover {
222
245
  background-color: var(--spbSky0);
223
246
  }
224
- .mfui-v6-info-card_background_shadow.mfui-v6-info-card_link:hover,
225
- .mfui-v6-info-card_background_white.mfui-v6-info-card_link:hover {
247
+ .mfui-v6-info-card_background_shadow.mfui-v6-info-card_active:hover,
248
+ .mfui-v6-info-card_background_white.mfui-v6-info-card_active:hover {
226
249
  -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
227
250
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
228
251
  }
229
- .mfui-v6-info-card_background_gray.mfui-v6-info-card_link:hover {
252
+ .mfui-v6-info-card_background_gray.mfui-v6-info-card_active:hover {
230
253
  background-color: var(--spbSky1);
231
254
  }
232
- .mfui-v6-info-card_background_purple.mfui-v6-info-card_link:hover {
255
+ .mfui-v6-info-card_background_purple.mfui-v6-info-card_active:hover {
233
256
  background-color: var(--buttonHoverPurpleSoft);
234
257
  }
235
- .mfui-v6-info-card_background_green.mfui-v6-info-card_link:hover {
258
+ .mfui-v6-info-card_background_green.mfui-v6-info-card_active:hover {
236
259
  background-color: var(--buttonHoverGreenSoft);
237
260
  }
@@ -3,6 +3,10 @@ import { IInfoCardData, IInfoCardSettings } from '../../types';
3
3
  import './InfoCard.less';
4
4
  export interface IInfoCard extends IInfoCardSettings, IInfoCardData {
5
5
  className?: string;
6
+ classes?: {
7
+ root?: string;
8
+ title?: string;
9
+ };
6
10
  dataAttrs?: {
7
11
  root?: Record<string, string>;
8
12
  title?: Record<string, string>;
@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  import "core-js/modules/es.symbol.js";
3
3
  import "core-js/modules/es.symbol.description.js";
4
4
  import * as React from 'react';
5
- import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
+ import { cnCreate, convert, filterDataAttrs } from '@megafon/ui-helpers';
6
6
  import PropTypes from 'prop-types';
7
7
  import { setRelAttribute } from "../../../../helpers/setRelAttribute";
8
8
  import "./InfoCard.css";
@@ -35,20 +35,23 @@ var InfoCard = function InfoCard(_ref) {
35
35
  href = _ref.href,
36
36
  target = _ref.target,
37
37
  rel = _ref.rel,
38
+ download = _ref.download,
38
39
  moreInfo = _ref.moreInfo,
40
+ onClick = _ref.onClick,
39
41
  _ref$size = _ref.size,
40
42
  size = _ref$size === void 0 ? 'medium' : _ref$size,
41
- _ref$imgPosition = _ref.imgPosition,
42
- imgPosition = _ref$imgPosition === void 0 ? 'right-side' : _ref$imgPosition,
43
+ imgPosition = _ref.imgPosition,
43
44
  _ref$background = _ref.background,
44
45
  background = _ref$background === void 0 ? 'stroke' : _ref$background,
45
- dataAttrs = _ref.dataAttrs;
46
+ dataAttrs = _ref.dataAttrs,
47
+ classes = _ref.classes;
46
48
  var RootElement = href ? 'a' : 'div';
47
49
  var isBigSize = size === 'big';
48
50
  var finalImgPosition = isBigSize ? false : imgPosition;
49
51
  var isInvalidBackground = background === 'no' && (imgPosition === 'right-side' || size === 'big');
50
52
  var finalBackground = isInvalidBackground ? 'stroke' : background;
51
53
  var isLink = !!href;
54
+ var isActive = isLink || !!onClick;
52
55
 
53
56
  var renderArrowRight = function renderArrowRight() {
54
57
  var ArrowRight = isBigSize ? ArrowRight24 : ArrowRight16;
@@ -61,12 +64,15 @@ var InfoCard = function InfoCard(_ref) {
61
64
  href: isLink ? href : undefined,
62
65
  target: isLink ? target : undefined,
63
66
  rel: isLink ? setRelAttribute(rel, target) : undefined,
67
+ download: isLink ? download : undefined,
68
+ onClick: onClick,
64
69
  className: cn({
65
70
  size: size,
66
71
  position: finalImgPosition,
67
72
  background: finalBackground,
68
- link: isLink
69
- }, [className])
73
+ active: isActive,
74
+ 'align-center': !moreInfo
75
+ }, [className, classes === null || classes === void 0 ? void 0 : classes.root])
70
76
  }), /*#__PURE__*/React.createElement("img", {
71
77
  className: cn('image'),
72
78
  src: imgSrc,
@@ -74,18 +80,22 @@ var InfoCard = function InfoCard(_ref) {
74
80
  }), /*#__PURE__*/React.createElement("div", {
75
81
  className: cn('content')
76
82
  }, !!title && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
77
- className: cn('title')
78
- }), title), !!description && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
83
+ className: cn('title', [classes === null || classes === void 0 ? void 0 : classes.title])
84
+ }), convert(title, {})), !!description && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.description), {
79
85
  className: cn('description')
80
- }), description), !!moreInfo && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
86
+ }), convert(description, {})), !!moreInfo && /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreInfo), {
81
87
  className: cn('more-info')
82
88
  }), /*#__PURE__*/React.createElement("span", {
83
89
  className: cn('more-info-text')
84
- }, moreInfo), isLink && renderArrowRight())));
90
+ }, convert(moreInfo, {})), isActive && renderArrowRight())));
85
91
  };
86
92
 
87
93
  InfoCard.propTypes = {
88
94
  className: PropTypes.string,
95
+ classes: PropTypes.shape({
96
+ root: PropTypes.string,
97
+ title: PropTypes.string
98
+ }),
89
99
  dataAttrs: PropTypes.shape({
90
100
  root: PropTypes.objectOf(PropTypes.string.isRequired),
91
101
  title: PropTypes.objectOf(PropTypes.string.isRequired),
@@ -1,10 +1,11 @@
1
+ import React from 'react';
1
2
  export interface IInfoCardSettings {
2
3
  /** Размер карточки */
3
4
  size?: 'big' | 'medium' | 'small';
4
5
  /** Расположение изображения */
5
6
  imgPosition?: 'right-side' | 'top-left';
6
7
  /** Фон карточки */
7
- background?: 'shadow' | 'stroke' | 'gray' | 'green' | 'purple' | 'white' | 'gray' | 'no';
8
+ background?: 'shadow' | 'stroke' | 'gray' | 'green' | 'purple' | 'white' | 'no';
8
9
  }
9
10
  export interface IInfoCardData {
10
11
  /** Заголовок */
@@ -21,6 +22,10 @@ export interface IInfoCardData {
21
22
  target?: '_self' | '_blank';
22
23
  /** Атрибут rel ссылки */
23
24
  rel?: string;
25
+ /** Добавление атрибута download для ссылки */
26
+ download?: boolean;
24
27
  /** Дополнительная информация */
25
28
  moreInfo?: string;
29
+ /** Обработчик клика */
30
+ onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
26
31
  }
@@ -0,0 +1,28 @@
1
+ import * as React from 'react';
2
+ import { Carousel } from '@megafon/ui-core';
3
+ import { IPromoCardData, IPromoCardSettings } from './types';
4
+ declare type CarouselProps = React.ComponentProps<typeof Carousel>;
5
+ export interface IPromoCards extends IPromoCardSettings {
6
+ /** Список карточек. Минимальное количество 2 карточки */
7
+ items: IPromoCardData[];
8
+ /** Тема навигации для карусели */
9
+ carouselNavTheme?: CarouselProps['navTheme'];
10
+ /** Цвет градиента для карусели */
11
+ carouselGradientColor?: CarouselProps['gradientColor'];
12
+ /** Дополнительный css класс для корневого элемента */
13
+ className?: string;
14
+ /** Дополнительные css классы для корневого и внутренних элементов */
15
+ classes?: {
16
+ root?: string;
17
+ card?: string;
18
+ };
19
+ /** Дополнительные data атрибуты к внутренним элементам */
20
+ dataAttrs?: {
21
+ root?: Record<string, string>;
22
+ card?: Record<string, string>;
23
+ };
24
+ /** Ссылка на элемент */
25
+ rootRef?: React.Ref<HTMLDivElement>;
26
+ }
27
+ declare const PromoCards: React.FC<IPromoCards>;
28
+ export default PromoCards;
@@ -0,0 +1,90 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
+
4
+ var _slidesSettings;
5
+
6
+ import "core-js/modules/es.array.map.js";
7
+ import * as React from 'react';
8
+ import { Carousel } from '@megafon/ui-core';
9
+ import { cnCreate, breakpoints, filterDataAttrs } from '@megafon/ui-helpers';
10
+ import PropTypes from 'prop-types';
11
+ import PromoCard from "./components/PromoCard/PromoCard";
12
+ var slidesSettings = (_slidesSettings = {}, _defineProperty(_slidesSettings, breakpoints.MOBILE_SMALL_START, {
13
+ slidesPerView: 1,
14
+ spaceBetween: 16
15
+ }), _defineProperty(_slidesSettings, breakpoints.MOBILE_BIG_START, {
16
+ slidesPerView: 2,
17
+ spaceBetween: 20
18
+ }), _defineProperty(_slidesSettings, breakpoints.DESKTOP_SMALL_START, {
19
+ slidesPerView: 3,
20
+ spaceBetween: 20
21
+ }), _slidesSettings);
22
+ var MIN_ITEMS_COUNT = 2;
23
+ var cn = cnCreate('mfui-v6-promo-cards');
24
+
25
+ var PromoCards = function PromoCards(_ref) {
26
+ var items = _ref.items,
27
+ carouselNavTheme = _ref.carouselNavTheme,
28
+ carouselGradientColor = _ref.carouselGradientColor,
29
+ background = _ref.background,
30
+ dataAttrs = _ref.dataAttrs,
31
+ className = _ref.className,
32
+ classes = _ref.classes,
33
+ rootRef = _ref.rootRef;
34
+
35
+ if (items.length < MIN_ITEMS_COUNT) {
36
+ return null;
37
+ }
38
+
39
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
40
+ className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
41
+ ref: rootRef
42
+ }), /*#__PURE__*/React.createElement(Carousel, {
43
+ slidesSettings: slidesSettings,
44
+ navTheme: carouselNavTheme,
45
+ gradient: true,
46
+ gradientColor: carouselGradientColor
47
+ }, items.map(function (item, i) {
48
+ return /*#__PURE__*/React.createElement(PromoCard, _extends({}, item, {
49
+ background: background,
50
+ dataAttrs: {
51
+ root: filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
52
+ },
53
+ className: cn([classes === null || classes === void 0 ? void 0 : classes.card]),
54
+ key: i + item.title
55
+ }));
56
+ })));
57
+ };
58
+
59
+ PromoCards.propTypes = {
60
+ items: PropTypes.arrayOf(PropTypes.shape({
61
+ title: PropTypes.string.isRequired,
62
+ subtitle: PropTypes.string,
63
+ link: PropTypes.shape({
64
+ title: PropTypes.string.isRequired,
65
+ href: PropTypes.string.isRequired,
66
+ target: PropTypes.oneOf(['_self', '_blank']),
67
+ rel: PropTypes.string
68
+ }).isRequired,
69
+ image: PropTypes.shape({
70
+ src: PropTypes.string.isRequired,
71
+ src2x: PropTypes.string,
72
+ alt: PropTypes.string
73
+ }).isRequired,
74
+ logo: PropTypes.shape({
75
+ src: PropTypes.string,
76
+ alt: PropTypes.string
77
+ }),
78
+ badge: PropTypes.oneOf([PropTypes.element, null])
79
+ }).isRequired).isRequired,
80
+ background: PropTypes.oneOf(['white', 'gray', 'shadow']),
81
+ className: PropTypes.string,
82
+ classes: PropTypes.objectOf(PropTypes.string),
83
+ dataAttrs: PropTypes.objectOf(PropTypes.object),
84
+ carouselNavTheme: PropTypes.oneOf(['light', 'green']),
85
+ carouselGradientColor: PropTypes.oneOf(['green', 'default', 'black', 'spbSky0', 'spbSky1', 'spbSky2']),
86
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
87
+ current: PropTypes.elementType
88
+ }), PropTypes.any])])
89
+ };
90
+ export default PromoCards;
@@ -0,0 +1,157 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-v6-promo-card {
9
+ display: -webkit-box;
10
+ display: -ms-flexbox;
11
+ display: flex;
12
+ -webkit-box-orient: vertical;
13
+ -webkit-box-direction: normal;
14
+ -ms-flex-direction: column;
15
+ flex-direction: column;
16
+ min-height: 100%;
17
+ border-radius: 24px;
18
+ color: var(--content);
19
+ text-decoration: none;
20
+ background-color: var(--base);
21
+ cursor: pointer;
22
+ -webkit-transition: background-color, 0.3s, 0.3s, -webkit-box-shadow;
23
+ transition: background-color, 0.3s, 0.3s, -webkit-box-shadow;
24
+ transition: background-color, 0.3s, box-shadow, 0.3s;
25
+ transition: background-color, 0.3s, box-shadow, 0.3s, -webkit-box-shadow;
26
+ }
27
+ .mfui-v6-promo-card_background_shadow {
28
+ -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
29
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
30
+ }
31
+ .mfui-v6-promo-card_background_white:hover,
32
+ .mfui-v6-promo-card_background_shadow:hover {
33
+ text-decoration: none;
34
+ -webkit-box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
35
+ box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.1);
36
+ }
37
+ .mfui-v6-promo-card_background_gray {
38
+ background-color: var(--spbSky0);
39
+ }
40
+ .mfui-v6-promo-card_background_gray:hover {
41
+ text-decoration: none;
42
+ background-color: var(--spbSky1);
43
+ }
44
+ .mfui-v6-promo-card__image {
45
+ width: 100%;
46
+ border-radius: inherit;
47
+ vertical-align: top;
48
+ }
49
+ .mfui-v6-promo-card__content {
50
+ position: relative;
51
+ display: -webkit-box;
52
+ display: -ms-flexbox;
53
+ display: flex;
54
+ -webkit-box-orient: vertical;
55
+ -webkit-box-direction: normal;
56
+ -ms-flex-direction: column;
57
+ flex-direction: column;
58
+ -webkit-box-flex: 1;
59
+ -ms-flex-positive: 1;
60
+ flex-grow: 1;
61
+ padding: 32px 24px;
62
+ }
63
+ @media screen and (min-width: 1280px) {
64
+ .mfui-v6-promo-card__content {
65
+ padding: 32px;
66
+ }
67
+ }
68
+ .mfui-v6-promo-card__badge {
69
+ position: absolute;
70
+ top: 0;
71
+ left: 24px;
72
+ translate: 0 -50%;
73
+ }
74
+ @media screen and (min-width: 1280px) {
75
+ .mfui-v6-promo-card__badge {
76
+ left: 32px;
77
+ }
78
+ }
79
+ .mfui-v6-promo-card__logo {
80
+ position: absolute;
81
+ top: 0;
82
+ right: 44px;
83
+ border: 4px solid var(--base);
84
+ border-radius: 50%;
85
+ translate: 0 -50%;
86
+ background-color: var(--base);
87
+ -webkit-transition: border-color, 0.3s;
88
+ transition: border-color, 0.3s;
89
+ }
90
+ @media screen and (min-width: 1280px) {
91
+ .mfui-v6-promo-card__logo {
92
+ right: 52px;
93
+ }
94
+ }
95
+ .mfui-v6-promo-card__logo:before,
96
+ .mfui-v6-promo-card__logo:after {
97
+ content: '';
98
+ position: absolute;
99
+ top: 50%;
100
+ width: 10px;
101
+ height: 10px;
102
+ translate: 0 -100%;
103
+ }
104
+ .mfui-v6-promo-card__logo:before {
105
+ background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--base) 10px);
106
+ left: -12px;
107
+ }
108
+ .mfui-v6-promo-card__logo:after {
109
+ background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--base) 10px);
110
+ right: -12px;
111
+ }
112
+ .mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo {
113
+ border-color: var(--spbSky0);
114
+ background-color: var(--spbSky0);
115
+ }
116
+ .mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo:before {
117
+ background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--spbSky0) 10px);
118
+ }
119
+ .mfui-v6-promo-card_background_gray .mfui-v6-promo-card__logo:after {
120
+ background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--spbSky0) 10px);
121
+ }
122
+ .mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo {
123
+ border-color: var(--spbSky1);
124
+ background-color: var(--spbSky1);
125
+ }
126
+ .mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo:before {
127
+ background-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 9px, var(--spbSky1) 10px);
128
+ }
129
+ .mfui-v6-promo-card_background_gray:hover .mfui-v6-promo-card__logo:after {
130
+ background-image: radial-gradient(circle at 100% 0, rgba(0, 0, 0, 0) 9px, var(--spbSky1) 10px);
131
+ }
132
+ .mfui-v6-promo-card__logo-img {
133
+ width: 56px;
134
+ height: 56px;
135
+ border: 1px solid var(--spbSky1);
136
+ border-radius: inherit;
137
+ vertical-align: top;
138
+ }
139
+ @media screen and (min-width: 768px) {
140
+ .mfui-v6-promo-card__logo-img {
141
+ width: 64px;
142
+ height: 64px;
143
+ }
144
+ }
145
+ @media screen and (min-width: 1280px) {
146
+ .mfui-v6-promo-card__logo-img {
147
+ width: 72px;
148
+ height: 72px;
149
+ }
150
+ }
151
+ .mfui-v6-promo-card__subtitle {
152
+ margin-top: 8px;
153
+ }
154
+ .mfui-v6-promo-card__footer {
155
+ margin-top: auto;
156
+ padding-top: 16px;
157
+ }
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ import { IPromoCardData, IPromoCardSettings } from '../../types';
3
+ import './PromoCard.less';
4
+ export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
5
+ className?: string;
6
+ classes?: {
7
+ root?: string;
8
+ };
9
+ dataAttrs?: {
10
+ root?: Record<string, string>;
11
+ image?: Record<string, string>;
12
+ badge?: Record<string, string>;
13
+ logo?: Record<string, string>;
14
+ subtitle?: Record<string, string>;
15
+ };
16
+ }
17
+ declare const PromoCard: React.FC<IPromoCard>;
18
+ export default PromoCard;