@megafon/ui-shared 8.2.2 → 8.3.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/BenefitsIcons/style/BenefitsIconsTile.css +1 -1
- package/dist/es/components/BenefitsIcons/types.d.ts +2 -0
- package/dist/es/components/BenefitsIcons/types.js +3 -1
- package/dist/es/components/Container/Container.css +1 -1
- package/dist/es/components/NumbersBox/NumbersBox.css +1 -0
- package/dist/es/components/NumbersBox/NumbersBox.d.ts +35 -0
- package/dist/es/components/NumbersBox/NumbersBox.js +72 -0
- package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.css +1 -0
- package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.d.ts +16 -0
- package/dist/es/components/NumbersBox/components/NumbersCard/NumbersCard.js +28 -0
- package/dist/es/components/NumbersBox/types.d.ts +7 -0
- package/dist/es/components/NumbersBox/types.js +1 -0
- package/dist/es/components/PromoCards/PromoCards.d.ts +3 -1
- package/dist/es/components/PromoCards/PromoCards.js +17 -12
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.d.ts +3 -0
- package/dist/es/components/PromoCards/components/PromoCard/PromoCard.js +39 -4
- package/dist/es/components/PromoCards/types.d.ts +23 -0
- package/dist/es/index.d.ts +2 -0
- package/dist/es/index.js +2 -0
- package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +1 -1
- package/dist/lib/components/BenefitsIcons/types.d.ts +2 -0
- package/dist/lib/components/BenefitsIcons/types.js +3 -1
- package/dist/lib/components/Container/Container.css +1 -1
- package/dist/lib/components/NumbersBox/NumbersBox.css +1 -0
- package/dist/lib/components/NumbersBox/NumbersBox.d.ts +35 -0
- package/dist/lib/components/NumbersBox/NumbersBox.js +81 -0
- package/dist/lib/components/NumbersBox/components/NumbersCard/NumbersCard.css +1 -0
- package/dist/lib/components/NumbersBox/components/NumbersCard/NumbersCard.d.ts +16 -0
- package/dist/lib/components/NumbersBox/components/NumbersCard/NumbersCard.js +37 -0
- package/dist/lib/components/NumbersBox/types.d.ts +7 -0
- package/dist/lib/components/NumbersBox/types.js +5 -0
- package/dist/lib/components/PromoCards/PromoCards.d.ts +3 -1
- package/dist/lib/components/PromoCards/PromoCards.js +17 -12
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.d.ts +3 -0
- package/dist/lib/components/PromoCards/components/PromoCard/PromoCard.js +38 -3
- package/dist/lib/components/PromoCards/types.d.ts +23 -0
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib/index.js +14 -0
- package/package.json +3 -3
@@ -0,0 +1,81 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports["default"] = void 0;
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
|
+
require("core-js/modules/es.array.map.js");
|
11
|
+
var React = _interopRequireWildcard(require("react"));
|
12
|
+
var _uiCore = require("@megafon/ui-core");
|
13
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
14
|
+
var _NumbersCard = _interopRequireDefault(require("./components/NumbersCard/NumbersCard"));
|
15
|
+
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
|
+
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
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
18
|
+
var slidesSettings = (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
|
19
|
+
slidesPerView: 1,
|
20
|
+
spaceBetween: 20
|
21
|
+
}), _uiHelpers.breakpoints.MOBILE_BIG_START, {
|
22
|
+
slidesPerView: 3,
|
23
|
+
spaceBetween: 20
|
24
|
+
}), _uiHelpers.breakpoints.DESKTOP_SMALL_START, {
|
25
|
+
slidesPerView: 4,
|
26
|
+
spaceBetween: 20
|
27
|
+
});
|
28
|
+
var MIN_ITEMS_COUNT = 3;
|
29
|
+
var FOUR_ITEMS = 4;
|
30
|
+
var MIN_CAROUSEL_ITEMS_COUNT = 5;
|
31
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-numbers-box');
|
32
|
+
var NumbersBox = function NumbersBox(_ref) {
|
33
|
+
var items = _ref.items,
|
34
|
+
_ref$background = _ref.background,
|
35
|
+
background = _ref$background === void 0 ? 'shadow' : _ref$background,
|
36
|
+
_ref$titleColor = _ref.titleColor,
|
37
|
+
titleColor = _ref$titleColor === void 0 ? 'default' : _ref$titleColor,
|
38
|
+
_ref$subtitleSize = _ref.subtitleSize,
|
39
|
+
subtitleSize = _ref$subtitleSize === void 0 ? 'medium' : _ref$subtitleSize,
|
40
|
+
carouselNavTheme = _ref.carouselNavTheme,
|
41
|
+
carouselGradientColor = _ref.carouselGradientColor,
|
42
|
+
dataAttrs = _ref.dataAttrs,
|
43
|
+
className = _ref.className,
|
44
|
+
classes = _ref.classes,
|
45
|
+
rootRef = _ref.rootRef;
|
46
|
+
if (items.length < MIN_ITEMS_COUNT) {
|
47
|
+
return null;
|
48
|
+
}
|
49
|
+
var showCarousel = items.length >= MIN_CAROUSEL_ITEMS_COUNT;
|
50
|
+
var isGridLayout = items.length === FOUR_ITEMS;
|
51
|
+
var hasLargeSpacing = background === 'none' && !showCarousel;
|
52
|
+
var renderItem = function renderItem(item, index) {
|
53
|
+
return /*#__PURE__*/React.createElement(_NumbersCard["default"], (0, _extends2["default"])({}, item, {
|
54
|
+
background: background,
|
55
|
+
titleColor: titleColor,
|
56
|
+
subtitleSize: subtitleSize,
|
57
|
+
dataAttrs: {
|
58
|
+
root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, index + 1)
|
59
|
+
},
|
60
|
+
className: cn('card', [classes === null || classes === void 0 ? void 0 : classes.card]),
|
61
|
+
key: index + item.title
|
62
|
+
}));
|
63
|
+
};
|
64
|
+
var renderCarousel = function renderCarousel() {
|
65
|
+
return /*#__PURE__*/React.createElement(_uiCore.Carousel, {
|
66
|
+
slidesSettings: slidesSettings,
|
67
|
+
navTheme: carouselNavTheme,
|
68
|
+
gradient: true,
|
69
|
+
gradientColor: carouselGradientColor
|
70
|
+
}, items.map(renderItem));
|
71
|
+
};
|
72
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
73
|
+
className: cn({
|
74
|
+
line: !showCarousel,
|
75
|
+
grid: isGridLayout,
|
76
|
+
spaced: hasLargeSpacing
|
77
|
+
}, [className, classes === null || classes === void 0 ? void 0 : classes.root]),
|
78
|
+
ref: rootRef
|
79
|
+
}), showCarousel ? renderCarousel() : items.map(renderItem));
|
80
|
+
};
|
81
|
+
var _default = exports["default"] = NumbersBox;
|
@@ -0,0 +1 @@
|
|
1
|
+
h1,h2,h3,h4,h5{margin:0}.mfui-numbers-card{display:-webkit-box;display:-ms-flexbox;display:flex;-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;gap:4px;min-height:100%;padding:24px}@media screen and (min-width:1280px){.mfui-numbers-card{gap:8px;padding:32px}}.mfui-numbers-card_background_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-numbers-card_background_stroke{background-color:transparent;border:1px solid var(--spbSky2)}.mfui-numbers-card_background_gray{background-color:var(--spbSky0)}.mfui-numbers-card_background_none{background-color:transparent;border-radius:0;padding:0}.mfui-numbers-card__title{color:var(--brandGreen);font-size:36px;font-weight:600;font-weight:700;letter-spacing:.5px;line-height:30px}@media screen and (min-width:768px) and (max-width:1023px){.mfui-numbers-card__title{font-size:36px;line-height:40px}}@media screen and (min-width:1024px){.mfui-numbers-card__title{font-size:44px;line-height:48px}}@media screen and (min-width:1280px){.mfui-numbers-card__title{font-size:52px;line-height:56px}}@media screen and (max-width:1023px){.mfui-numbers-card__title{letter-spacing:0;line-height:40px}}.mfui-numbers-card__title_color_night{color:var(--night)}.mfui-numbers-card__title_color_berry{color:var(--berry)}.mfui-numbers-card__title_color_flamingo{color:var(--flamingo)}.mfui-numbers-card__subtitle{font-size:18px;font-weight:500;letter-spacing:.5px;line-height:24px;overflow:hidden}@media screen and (min-width:1280px){.mfui-numbers-card__subtitle{font-size:20px;line-height:28px}}@media screen and (max-width:1023px){.mfui-numbers-card__subtitle{letter-spacing:0}}.mfui-numbers-card__subtitle_size_small{font-size:15px;font-weight:500;line-height:24px}
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { BackgroundType, SubtitleSizeType, TitleColorType } from '../../types';
|
3
|
+
import './NumbersCard.scss';
|
4
|
+
export interface INumbersCard {
|
5
|
+
title: string;
|
6
|
+
subtitle: string;
|
7
|
+
titleColor?: TitleColorType;
|
8
|
+
subtitleSize?: SubtitleSizeType;
|
9
|
+
background?: BackgroundType;
|
10
|
+
className?: string;
|
11
|
+
dataAttrs?: {
|
12
|
+
root?: Record<string, string>;
|
13
|
+
};
|
14
|
+
}
|
15
|
+
declare const NumbersCard: React.FC<INumbersCard>;
|
16
|
+
export default NumbersCard;
|
@@ -0,0 +1,37 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports["default"] = void 0;
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
var React = _interopRequireWildcard(require("react"));
|
10
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
11
|
+
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); }
|
12
|
+
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; }
|
13
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
14
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-numbers-card');
|
15
|
+
var NumbersCard = function NumbersCard(_ref) {
|
16
|
+
var title = _ref.title,
|
17
|
+
titleColor = _ref.titleColor,
|
18
|
+
subtitle = _ref.subtitle,
|
19
|
+
subtitleSize = _ref.subtitleSize,
|
20
|
+
background = _ref.background,
|
21
|
+
className = _ref.className,
|
22
|
+
dataAttrs = _ref.dataAttrs;
|
23
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
|
24
|
+
className: cn({
|
25
|
+
background: background
|
26
|
+
}, [className])
|
27
|
+
}, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), /*#__PURE__*/React.createElement("div", {
|
28
|
+
className: cn('title', {
|
29
|
+
color: titleColor
|
30
|
+
})
|
31
|
+
}, (0, _uiHelpers.convert)(title, {})), /*#__PURE__*/React.createElement("div", {
|
32
|
+
className: cn('subtitle', {
|
33
|
+
size: subtitleSize
|
34
|
+
})
|
35
|
+
}, (0, _uiHelpers.convert)(subtitle, _uiHelpers.textConvertConfig)));
|
36
|
+
};
|
37
|
+
var _default = exports["default"] = NumbersCard;
|
@@ -0,0 +1,7 @@
|
|
1
|
+
export type CardDataType = {
|
2
|
+
title: string;
|
3
|
+
subtitle: string;
|
4
|
+
};
|
5
|
+
export type TitleColorType = 'default' | 'night' | 'berry' | 'flamingo';
|
6
|
+
export type SubtitleSizeType = 'small' | 'medium';
|
7
|
+
export type BackgroundType = 'shadow' | 'stroke' | 'gray' | 'white' | 'none';
|
@@ -4,7 +4,7 @@ import { IPromoCardData, IPromoCardSettings } from './types';
|
|
4
4
|
type CarouselProps = React.ComponentProps<typeof Carousel>;
|
5
5
|
export interface IPromoCards extends IPromoCardSettings {
|
6
6
|
/** Список карточек. Минимальное количество 2 карточки */
|
7
|
-
items
|
7
|
+
items?: IPromoCardData[];
|
8
8
|
/** Тема навигации для карусели */
|
9
9
|
carouselNavTheme?: CarouselProps['navTheme'];
|
10
10
|
/** Цвет градиента для карусели */
|
@@ -23,6 +23,8 @@ export interface IPromoCards extends IPromoCardSettings {
|
|
23
23
|
};
|
24
24
|
/** Ссылка на элемент */
|
25
25
|
rootRef?: React.Ref<HTMLDivElement>;
|
26
|
+
/** Дочерние элементы. Минимальное количество 2 элемента */
|
27
|
+
children?: React.ReactNode;
|
26
28
|
}
|
27
29
|
declare const PromoCards: React.FC<IPromoCards>;
|
28
30
|
export default PromoCards;
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports["default"] = void 0;
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
9
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
10
|
+
require("core-js/modules/es.array.is-array.js");
|
10
11
|
require("core-js/modules/es.array.map.js");
|
11
12
|
var React = _interopRequireWildcard(require("react"));
|
12
13
|
var _uiCore = require("@megafon/ui-core");
|
@@ -35,10 +36,23 @@ var PromoCards = function PromoCards(_ref) {
|
|
35
36
|
dataAttrs = _ref.dataAttrs,
|
36
37
|
className = _ref.className,
|
37
38
|
classes = _ref.classes,
|
38
|
-
rootRef = _ref.rootRef
|
39
|
-
|
39
|
+
rootRef = _ref.rootRef,
|
40
|
+
children = _ref.children;
|
41
|
+
var itemsLength = (items === null || items === void 0 ? void 0 : items.length) || 0;
|
42
|
+
var childrenLength = Array.isArray(children) ? children.length : 0;
|
43
|
+
if ((childrenLength || itemsLength) < MIN_ITEMS_COUNT) {
|
40
44
|
return null;
|
41
45
|
}
|
46
|
+
var renderItems = (items || []).map(function (item, i) {
|
47
|
+
return /*#__PURE__*/React.createElement(_PromoCard["default"], (0, _extends2["default"])({}, item, {
|
48
|
+
className: classes === null || classes === void 0 ? void 0 : classes.card,
|
49
|
+
dataAttrs: {
|
50
|
+
root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
|
51
|
+
},
|
52
|
+
background: background,
|
53
|
+
key: i + item.title
|
54
|
+
}));
|
55
|
+
});
|
42
56
|
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
43
57
|
className: cn([className, classes === null || classes === void 0 ? void 0 : classes.root]),
|
44
58
|
ref: rootRef
|
@@ -47,15 +61,6 @@ var PromoCards = function PromoCards(_ref) {
|
|
47
61
|
navTheme: carouselNavTheme,
|
48
62
|
gradient: true,
|
49
63
|
gradientColor: carouselGradientColor
|
50
|
-
},
|
51
|
-
return /*#__PURE__*/React.createElement(_PromoCard["default"], (0, _extends2["default"])({}, item, {
|
52
|
-
background: background,
|
53
|
-
dataAttrs: {
|
54
|
-
root: (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.card, i + 1)
|
55
|
-
},
|
56
|
-
className: classes === null || classes === void 0 ? void 0 : classes.card,
|
57
|
-
key: i + item.title
|
58
|
-
}));
|
59
|
-
})));
|
64
|
+
}, childrenLength ? children : renderItems));
|
60
65
|
};
|
61
66
|
var _default = exports["default"] = PromoCards;
|
@@ -2,10 +2,13 @@ import * as React from 'react';
|
|
2
2
|
import { IPromoCardData, IPromoCardSettings } from '../../types';
|
3
3
|
import './PromoCard.scss';
|
4
4
|
export interface IPromoCard extends IPromoCardData, IPromoCardSettings {
|
5
|
+
/** Дополнительный css класс для корневого элемента */
|
5
6
|
className?: string;
|
7
|
+
/** Дополнительные css классы для корневого элемента */
|
6
8
|
classes?: {
|
7
9
|
root?: string;
|
8
10
|
};
|
11
|
+
/** Дополнительные data атрибуты к корневому и внутренним элементам */
|
9
12
|
dataAttrs?: {
|
10
13
|
root?: Record<string, string>;
|
11
14
|
image?: Record<string, string>;
|
@@ -25,6 +25,10 @@ var PromoCard = function PromoCard(_ref) {
|
|
25
25
|
image = _ref.image,
|
26
26
|
logo = _ref.logo,
|
27
27
|
badge = _ref.badge,
|
28
|
+
_ref$promoBadge = _ref.promoBadge,
|
29
|
+
promoBadge = _ref$promoBadge === void 0 ? null : _ref$promoBadge,
|
30
|
+
_ref$priceBadge = _ref.priceBadge,
|
31
|
+
priceBadge = _ref$priceBadge === void 0 ? null : _ref$priceBadge,
|
28
32
|
className = _ref.className,
|
29
33
|
classes = _ref.classes,
|
30
34
|
dataAttrs = _ref.dataAttrs,
|
@@ -37,7 +41,40 @@ var PromoCard = function PromoCard(_ref) {
|
|
37
41
|
linkTarget = _link$target === void 0 ? '_self' : _link$target,
|
38
42
|
linkRel = link.rel,
|
39
43
|
linkTitle = link.title;
|
44
|
+
var _ref2 = promoBadge || {},
|
45
|
+
promoBadgeText = _ref2.text,
|
46
|
+
promoBadgeColor = _ref2.color;
|
47
|
+
var _ref3 = priceBadge || {},
|
48
|
+
priceBadgeText = _ref3.text,
|
49
|
+
priceBadgeIcon = _ref3.iconType,
|
50
|
+
priceBadgeTheme = _ref3.theme;
|
40
51
|
var imageSrcSet = imageSrc2x ? "".concat(imageSrc, ", ").concat(imageSrc2x, " 2x") : undefined;
|
52
|
+
var hasBadge = !!promoBadgeText || !!priceBadgeText || !!badge;
|
53
|
+
var renderBadge = React.useMemo(function () {
|
54
|
+
switch (true) {
|
55
|
+
case !!promoBadgeText:
|
56
|
+
return /*#__PURE__*/React.createElement(_uiCore.PromoBadge, {
|
57
|
+
className: cn('badge'),
|
58
|
+
dataAttrs: {
|
59
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge
|
60
|
+
},
|
61
|
+
color: promoBadgeColor
|
62
|
+
}, promoBadgeText);
|
63
|
+
case !!priceBadgeText:
|
64
|
+
return /*#__PURE__*/React.createElement(_uiCore.PriceBadge, {
|
65
|
+
className: cn('badge'),
|
66
|
+
dataAttrs: {
|
67
|
+
root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge
|
68
|
+
},
|
69
|
+
iconType: priceBadgeIcon,
|
70
|
+
theme: priceBadgeTheme
|
71
|
+
}, priceBadgeText);
|
72
|
+
default:
|
73
|
+
return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge), {
|
74
|
+
className: cn('badge')
|
75
|
+
}), badge);
|
76
|
+
}
|
77
|
+
}, [dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.badge, promoBadgeText, promoBadgeColor, priceBadgeText, priceBadgeIcon, priceBadgeTheme, badge]);
|
41
78
|
return /*#__PURE__*/React.createElement("a", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
42
79
|
className: cn({
|
43
80
|
background: background
|
@@ -54,9 +91,7 @@ var PromoCard = function PromoCard(_ref) {
|
|
54
91
|
alt: imageAlt || ''
|
55
92
|
})), /*#__PURE__*/React.createElement("div", {
|
56
93
|
className: cn('content')
|
57
|
-
}, !!
|
58
|
-
className: cn('badge')
|
59
|
-
}), badge), !!(logo === null || logo === void 0 ? void 0 : logo.src) && !badge && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.logo), {
|
94
|
+
}, hasBadge && renderBadge, !!(logo === null || logo === void 0 ? void 0 : logo.src) && !hasBadge && /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.logo), {
|
60
95
|
className: cn('logo')
|
61
96
|
}), /*#__PURE__*/React.createElement("img", {
|
62
97
|
className: cn('logo-img'),
|
@@ -1,3 +1,5 @@
|
|
1
|
+
import type { IPriceBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PriceBadge/PriceBadge';
|
2
|
+
import type { IPromoBadgeProps } from '@megafon/ui-core/dist/lib/components/Badges/PromoBadge/PromoBadge';
|
1
3
|
type ImageType = {
|
2
4
|
src: string;
|
3
5
|
src2x?: string;
|
@@ -13,16 +15,37 @@ type LinkType = {
|
|
13
15
|
target?: '_self' | '_blank';
|
14
16
|
rel?: string;
|
15
17
|
};
|
18
|
+
type PromoBadgeType = {
|
19
|
+
text: string;
|
20
|
+
color: IPromoBadgeProps['color'];
|
21
|
+
};
|
22
|
+
type PriceBadgeType = {
|
23
|
+
text: string;
|
24
|
+
iconType?: IPriceBadgeProps['iconType'];
|
25
|
+
theme?: IPriceBadgeProps['theme'];
|
26
|
+
};
|
16
27
|
export interface IPromoCardSettings {
|
28
|
+
/** Фон карточки */
|
17
29
|
background?: 'gray' | 'white' | 'shadow';
|
18
30
|
}
|
19
31
|
export interface IPromoCardData {
|
32
|
+
/** Заголовок карточки */
|
20
33
|
title: string;
|
34
|
+
/** Подзаголовок карточки */
|
21
35
|
subtitle?: string;
|
36
|
+
/** Параметры для ссылки в карточке */
|
22
37
|
link: LinkType;
|
38
|
+
/** Параметры для изображения в карточке */
|
23
39
|
image: ImageType;
|
40
|
+
/** Параметры для логотипа в карточке */
|
24
41
|
logo?: LogoType;
|
42
|
+
/** Бейдж в карточке */
|
25
43
|
badge?: React.ReactElement | null;
|
44
|
+
/** Параметры для отображения компонента PromoBadge в карточке */
|
45
|
+
promoBadge?: PromoBadgeType | null;
|
46
|
+
/** Параметры для отображения компонента PriceBadge в карточке */
|
47
|
+
priceBadge?: PriceBadgeType | null;
|
48
|
+
/** Обработчик клика по карточке */
|
26
49
|
onClick?: (e: React.SyntheticEvent<EventTarget>) => void;
|
27
50
|
}
|
28
51
|
export {};
|
package/dist/lib/index.d.ts
CHANGED
@@ -28,6 +28,8 @@ export { default as InfoCard } from './components/InfoCards/components/InfoCard/
|
|
28
28
|
export { default as InfoCards } from './components/InfoCards/InfoCards';
|
29
29
|
export { default as Instructions } from './components/Instructions/Instructions';
|
30
30
|
export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
|
31
|
+
export { default as NumbersBox } from './components/NumbersBox/NumbersBox';
|
32
|
+
export { default as NumbersCard } from './components/NumbersBox/components/NumbersCard/NumbersCard';
|
31
33
|
export { default as PageTitle } from './components/PageTitle/PageTitle';
|
32
34
|
export { default as Partners } from './components/Partners/Partners';
|
33
35
|
export { default as PictureBox } from './components/PictureBox/PictureBox';
|
package/dist/lib/index.js
CHANGED
@@ -183,6 +183,18 @@ Object.defineProperty(exports, "NotificationBox", {
|
|
183
183
|
return _NotificationBox["default"];
|
184
184
|
}
|
185
185
|
});
|
186
|
+
Object.defineProperty(exports, "NumbersBox", {
|
187
|
+
enumerable: true,
|
188
|
+
get: function get() {
|
189
|
+
return _NumbersBox["default"];
|
190
|
+
}
|
191
|
+
});
|
192
|
+
Object.defineProperty(exports, "NumbersCard", {
|
193
|
+
enumerable: true,
|
194
|
+
get: function get() {
|
195
|
+
return _NumbersCard["default"];
|
196
|
+
}
|
197
|
+
});
|
186
198
|
Object.defineProperty(exports, "PageTitle", {
|
187
199
|
enumerable: true,
|
188
200
|
get: function get() {
|
@@ -411,6 +423,8 @@ var _InfoCard = _interopRequireDefault(require("./components/InfoCards/component
|
|
411
423
|
var _InfoCards = _interopRequireDefault(require("./components/InfoCards/InfoCards"));
|
412
424
|
var _Instructions = _interopRequireDefault(require("./components/Instructions/Instructions"));
|
413
425
|
var _NotificationBox = _interopRequireDefault(require("./components/NotificationBox/NotificationBox"));
|
426
|
+
var _NumbersBox = _interopRequireDefault(require("./components/NumbersBox/NumbersBox"));
|
427
|
+
var _NumbersCard = _interopRequireDefault(require("./components/NumbersBox/components/NumbersCard/NumbersCard"));
|
414
428
|
var _PageTitle = _interopRequireDefault(require("./components/PageTitle/PageTitle"));
|
415
429
|
var _Partners = _interopRequireDefault(require("./components/Partners/Partners"));
|
416
430
|
var _PictureBox = _interopRequireDefault(require("./components/PictureBox/PictureBox"));
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@megafon/ui-shared",
|
3
|
-
"version": "8.
|
3
|
+
"version": "8.3.0",
|
4
4
|
"files": [
|
5
5
|
"dist"
|
6
6
|
],
|
@@ -77,7 +77,7 @@
|
|
77
77
|
},
|
78
78
|
"dependencies": {
|
79
79
|
"@babel/runtime": "^7.8.4",
|
80
|
-
"@megafon/ui-core": "^8.
|
80
|
+
"@megafon/ui-core": "^8.3.0",
|
81
81
|
"@megafon/ui-helpers": "^4.0.1",
|
82
82
|
"@megafon/ui-icons": "^3.9.2",
|
83
83
|
"core-js": "^3.6.4",
|
@@ -85,5 +85,5 @@
|
|
85
85
|
"lodash.throttle": "^4.1.1",
|
86
86
|
"swiper": "^11.1.1"
|
87
87
|
},
|
88
|
-
"gitHead": "
|
88
|
+
"gitHead": "3a9673d8ac34a1c09c4dbb829fd29f2833b4029d"
|
89
89
|
}
|