@megafon/ui-shared 2.0.0-beta.98 → 2.1.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/CHANGELOG.md +1637 -0
- package/README.md +0 -5
- package/dist/es/components/AccordionBox/AccordionBox.css +13 -0
- package/dist/es/components/AccordionBox/AccordionBox.d.ts +16 -1
- package/dist/es/components/AccordionBox/AccordionBox.js +29 -13
- package/dist/es/components/BannerBox/BannerBox.js +3 -2
- package/dist/es/components/BenefitsIcons/BenefitsIcons.d.ts +13 -2
- package/dist/es/components/BenefitsIcons/BenefitsIcons.js +82 -17
- package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
- package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js +15 -14
- package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +3 -3
- package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +19 -12
- package/dist/es/components/BenefitsIcons/types.d.ts +7 -2
- package/dist/es/components/BenefitsIcons/types.js +4 -0
- package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts +10 -1
- package/dist/es/components/BenefitsPictures/BenefitsPictures.js +28 -12
- package/dist/es/components/BenefitsPictures/BenfitsPictures.css +4 -4
- package/dist/es/components/Breadcrumbs/Breadcrumbs.css +46 -0
- package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +21 -0
- package/dist/es/components/Breadcrumbs/Breadcrumbs.js +49 -0
- package/dist/es/components/ButtonBanner/ButtonBanner.css +122 -0
- package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +54 -0
- package/dist/es/components/ButtonBanner/ButtonBanner.js +107 -0
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css +3 -3
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +22 -2
- package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +37 -8
- package/dist/es/components/Card/Card.css +71 -44
- package/dist/es/components/Card/Card.d.ts +33 -3
- package/dist/es/components/Card/Card.js +103 -42
- package/dist/es/components/CardsBox/CardsBox.d.ts +10 -2
- package/dist/es/components/CardsBox/CardsBox.js +26 -13
- package/dist/es/components/CarouselBox/CarouselBox.js +3 -2
- package/dist/es/components/Container/Container.css +1848 -533
- package/dist/es/components/Container/Container.d.ts +11 -1
- package/dist/es/components/Container/Container.js +28 -6
- package/dist/es/components/DownloadLinks/DownloadLink.css +6 -6
- package/dist/es/components/DownloadLinks/DownloadLink.d.ts +7 -0
- package/dist/es/components/DownloadLinks/DownloadLink.js +28 -6
- package/dist/es/components/DownloadLinks/DownloadLinks.css +9 -6
- package/dist/es/components/DownloadLinks/DownloadLinks.d.ts +2 -0
- package/dist/es/components/DownloadLinks/DownloadLinks.js +18 -3
- package/dist/es/components/Instructions/Instructions.css +189 -130
- package/dist/es/components/Instructions/Instructions.d.ts +21 -2
- package/dist/es/components/Instructions/Instructions.js +115 -74
- package/dist/es/components/Instructions/img/iphone12.png +0 -0
- package/dist/es/components/PageTitle/PageTitle.css +80 -0
- package/dist/es/components/PageTitle/PageTitle.d.ts +23 -0
- package/dist/es/components/PageTitle/PageTitle.js +65 -0
- package/dist/es/components/Partners/Partners.css +22 -31
- package/dist/es/components/Partners/Partners.d.ts +13 -1
- package/dist/es/components/Partners/Partners.js +40 -18
- package/dist/es/components/PictureWithDescription/PictureWithDescription.css +25 -10
- package/dist/es/components/PictureWithDescription/PictureWithDescription.d.ts +13 -0
- package/dist/es/components/PictureWithDescription/PictureWithDescription.js +31 -7
- package/dist/es/components/Property/Property.css +79 -71
- package/dist/es/components/Property/Property.d.ts +21 -2
- package/dist/es/components/Property/Property.js +80 -34
- package/dist/es/components/Property/PropertyDescription.css +3 -3
- package/dist/es/components/Property/PropertyDescription.js +19 -21
- package/dist/es/components/Property/types.d.ts +7 -2
- package/dist/es/components/Steps/Steps.css +41 -0
- package/dist/es/components/Steps/Steps.d.ts +10 -0
- package/dist/es/components/Steps/Steps.js +35 -0
- package/dist/es/components/Steps/StepsItem.css +37 -0
- package/dist/es/components/Steps/StepsItem.d.ts +10 -0
- package/dist/es/components/Steps/StepsItem.js +26 -0
- package/dist/es/components/StoreBanner/StoreBanner.css +293 -0
- package/dist/es/components/StoreBanner/StoreBanner.d.ts +67 -0
- package/dist/es/components/StoreBanner/StoreBanner.js +164 -0
- package/dist/es/components/StoreBanner/doc/img/new-iphone-screen.png +0 -0
- package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/es/components/StoreBanner/doc/img/screen.png +0 -0
- package/dist/es/components/StoreBanner/img/android.png +0 -0
- package/dist/es/components/StoreBanner/img/black-iphone.png +0 -0
- package/dist/es/components/StoreBanner/img/new-iphone.png +0 -0
- package/dist/es/components/StoreBanner/img/white-iphone.png +0 -0
- package/dist/es/components/StoreButton/StoreButton.css +15 -0
- package/dist/es/components/StoreButton/StoreButton.d.ts +17 -0
- package/dist/es/components/StoreButton/StoreButton.js +37 -0
- package/dist/es/components/StoreButton/img/app-store.png +0 -0
- package/dist/es/components/StoreButton/img/google-play.png +0 -0
- package/dist/es/components/StoreButton/img/huawei-store.png +0 -0
- package/dist/es/components/Table/Table.css +67 -67
- package/dist/es/components/Table/Table.js +4 -4
- package/dist/es/components/Table/TableRow.js +1 -0
- package/dist/es/components/TabsBox/TabsBox.d.ts +4 -1
- package/dist/es/components/TabsBox/TabsBox.js +24 -3
- package/dist/es/components/TextBox/TextBox.css +7 -1
- package/dist/es/components/TextBox/TextBox.d.ts +8 -0
- package/dist/es/components/TextBox/TextBox.js +37 -5
- package/dist/es/components/TextBox/TextBoxPicture.css +24 -0
- package/dist/es/components/TextBox/TextBoxPicture.d.ts +17 -0
- package/dist/es/components/TextBox/TextBoxPicture.js +32 -0
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +15 -4
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +8 -2
- package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js +34 -14
- package/dist/es/components/VideoBanner/VideoBanner.css +155 -76
- package/dist/es/components/VideoBanner/VideoBanner.d.ts +64 -13
- package/dist/es/components/VideoBanner/VideoBanner.js +202 -70
- package/dist/es/components/VideoBlock/VideoBlock.css +32 -28
- package/dist/es/components/VideoBlock/VideoBlock.d.ts +20 -6
- package/dist/es/components/VideoBlock/VideoBlock.js +63 -44
- package/dist/es/constants/throttleTime.d.ts +4 -0
- package/dist/es/constants/throttleTime.js +3 -0
- package/dist/es/index.d.ts +8 -0
- package/dist/es/index.js +8 -0
- package/dist/lib/components/AccordionBox/AccordionBox.css +13 -0
- package/dist/lib/components/AccordionBox/AccordionBox.d.ts +16 -1
- package/dist/lib/components/AccordionBox/AccordionBox.js +31 -19
- package/dist/lib/components/BannerBox/BannerBox.js +3 -5
- package/dist/lib/components/BenefitsIcons/BenefitsIcons.d.ts +13 -2
- package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +84 -20
- package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
- package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js +15 -16
- package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +3 -3
- package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +19 -12
- package/dist/lib/components/BenefitsIcons/types.d.ts +7 -2
- package/dist/lib/components/BenefitsIcons/types.js +7 -2
- package/dist/lib/components/BenefitsPictures/BenefitsPictures.d.ts +10 -1
- package/dist/lib/components/BenefitsPictures/BenefitsPictures.js +32 -15
- package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +4 -4
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +46 -0
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +21 -0
- package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +65 -0
- package/dist/lib/components/ButtonBanner/ButtonBanner.css +122 -0
- package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +54 -0
- package/dist/lib/components/ButtonBanner/ButtonBanner.js +133 -0
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css +3 -3
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +22 -2
- package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +45 -11
- package/dist/lib/components/Card/Card.css +71 -44
- package/dist/lib/components/Card/Card.d.ts +33 -3
- package/dist/lib/components/Card/Card.js +118 -59
- package/dist/lib/components/CardsBox/CardsBox.d.ts +10 -2
- package/dist/lib/components/CardsBox/CardsBox.js +30 -16
- package/dist/lib/components/CarouselBox/CarouselBox.js +3 -5
- package/dist/lib/components/Container/Container.css +1848 -533
- package/dist/lib/components/Container/Container.d.ts +11 -1
- package/dist/lib/components/Container/Container.js +32 -11
- package/dist/lib/components/DownloadLinks/DownloadLink.css +6 -6
- package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +7 -0
- package/dist/lib/components/DownloadLinks/DownloadLink.js +32 -11
- package/dist/lib/components/DownloadLinks/DownloadLinks.css +9 -6
- package/dist/lib/components/DownloadLinks/DownloadLinks.d.ts +2 -0
- package/dist/lib/components/DownloadLinks/DownloadLinks.js +20 -6
- package/dist/lib/components/Instructions/Instructions.css +189 -130
- package/dist/lib/components/Instructions/Instructions.d.ts +21 -2
- package/dist/lib/components/Instructions/Instructions.js +148 -104
- package/dist/lib/components/Instructions/img/iphone12.png +0 -0
- package/dist/lib/components/PageTitle/PageTitle.css +80 -0
- package/dist/lib/components/PageTitle/PageTitle.d.ts +23 -0
- package/dist/lib/components/PageTitle/PageTitle.js +85 -0
- package/dist/lib/components/Partners/Partners.css +22 -31
- package/dist/lib/components/Partners/Partners.d.ts +13 -1
- package/dist/lib/components/Partners/Partners.js +43 -23
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +25 -10
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.d.ts +13 -0
- package/dist/lib/components/PictureWithDescription/PictureWithDescription.js +33 -8
- package/dist/lib/components/Property/Property.css +79 -71
- package/dist/lib/components/Property/Property.d.ts +21 -2
- package/dist/lib/components/Property/Property.js +93 -53
- package/dist/lib/components/Property/PropertyDescription.css +3 -3
- package/dist/lib/components/Property/PropertyDescription.js +21 -25
- package/dist/lib/components/Property/types.d.ts +7 -2
- package/dist/lib/components/Steps/Steps.css +41 -0
- package/dist/lib/components/Steps/Steps.d.ts +10 -0
- package/dist/lib/components/Steps/Steps.js +55 -0
- package/dist/lib/components/Steps/StepsItem.css +37 -0
- package/dist/lib/components/Steps/StepsItem.d.ts +10 -0
- package/dist/lib/components/Steps/StepsItem.js +39 -0
- package/dist/lib/components/StoreBanner/StoreBanner.css +293 -0
- package/dist/lib/components/StoreBanner/StoreBanner.d.ts +67 -0
- package/dist/lib/components/StoreBanner/StoreBanner.js +191 -0
- package/dist/lib/components/StoreBanner/doc/img/new-iphone-screen.png +0 -0
- package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
- package/dist/lib/components/StoreBanner/doc/img/screen.png +0 -0
- package/dist/lib/components/StoreBanner/img/android.png +0 -0
- package/dist/lib/components/StoreBanner/img/black-iphone.png +0 -0
- package/dist/lib/components/StoreBanner/img/new-iphone.png +0 -0
- package/dist/lib/components/StoreBanner/img/white-iphone.png +0 -0
- package/dist/lib/components/StoreButton/StoreButton.css +15 -0
- package/dist/lib/components/StoreButton/StoreButton.d.ts +17 -0
- package/dist/lib/components/StoreButton/StoreButton.js +58 -0
- package/dist/lib/components/StoreButton/img/app-store.png +0 -0
- package/dist/lib/components/StoreButton/img/google-play.png +0 -0
- package/dist/lib/components/StoreButton/img/huawei-store.png +0 -0
- package/dist/lib/components/Table/Table.css +67 -67
- package/dist/lib/components/Table/Table.js +6 -8
- package/dist/lib/components/Table/TableRow.js +1 -0
- package/dist/lib/components/TabsBox/TabsBox.d.ts +4 -1
- package/dist/lib/components/TabsBox/TabsBox.js +25 -2
- package/dist/lib/components/TextBox/TextBox.css +7 -1
- package/dist/lib/components/TextBox/TextBox.d.ts +8 -0
- package/dist/lib/components/TextBox/TextBox.js +39 -6
- package/dist/lib/components/TextBox/TextBoxPicture.css +24 -0
- package/dist/lib/components/TextBox/TextBoxPicture.d.ts +17 -0
- package/dist/lib/components/TextBox/TextBoxPicture.js +49 -0
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +15 -4
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +8 -2
- package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js +39 -19
- package/dist/lib/components/VideoBanner/VideoBanner.css +155 -76
- package/dist/lib/components/VideoBanner/VideoBanner.d.ts +64 -13
- package/dist/lib/components/VideoBanner/VideoBanner.js +225 -89
- package/dist/lib/components/VideoBlock/VideoBlock.css +32 -28
- package/dist/lib/components/VideoBlock/VideoBlock.d.ts +20 -6
- package/dist/lib/components/VideoBlock/VideoBlock.js +76 -68
- package/dist/lib/constants/throttleTime.d.ts +4 -0
- package/dist/lib/constants/throttleTime.js +10 -0
- package/dist/lib/index.d.ts +8 -0
- package/dist/lib/index.js +64 -0
- package/package.json +20 -75
@@ -0,0 +1,133 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
4
|
+
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports["default"] = exports.ImageScaling = exports.ButtonTarget = exports.ButtonColor = void 0;
|
9
|
+
|
10
|
+
require("core-js/modules/es.object.values");
|
11
|
+
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
|
+
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
15
|
+
|
16
|
+
var _uiCore = require("@megafon/ui-core");
|
17
|
+
|
18
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
19
|
+
|
20
|
+
var PropTypes = _interopRequireWildcard(require("prop-types"));
|
21
|
+
|
22
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
23
|
+
|
24
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
25
|
+
|
26
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
27
|
+
|
28
|
+
var ButtonColor = {
|
29
|
+
GREEN: 'green',
|
30
|
+
PURPLE: 'purple'
|
31
|
+
};
|
32
|
+
exports.ButtonColor = ButtonColor;
|
33
|
+
var ButtonTarget = {
|
34
|
+
SELF: '_self',
|
35
|
+
BLANK: '_blank'
|
36
|
+
};
|
37
|
+
exports.ButtonTarget = ButtonTarget;
|
38
|
+
var ImageScaling = {
|
39
|
+
COVER: 'cover',
|
40
|
+
CONTAIN: 'contain'
|
41
|
+
};
|
42
|
+
exports.ImageScaling = ImageScaling;
|
43
|
+
|
44
|
+
var getMediaStyle = function getMediaStyle(imageUrl) {
|
45
|
+
return imageUrl ? {
|
46
|
+
backgroundImage: "url(".concat(imageUrl, ")")
|
47
|
+
} : undefined;
|
48
|
+
};
|
49
|
+
|
50
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-button-banner');
|
51
|
+
|
52
|
+
var ButtonBanner = function ButtonBanner(_ref) {
|
53
|
+
var dataAttrs = _ref.dataAttrs,
|
54
|
+
className = _ref.className,
|
55
|
+
_ref$classes = _ref.classes,
|
56
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
57
|
+
rootRef = _ref.rootRef,
|
58
|
+
title = _ref.title,
|
59
|
+
text = _ref.text,
|
60
|
+
_ref$imageUrl = _ref.imageUrl,
|
61
|
+
imageUrl = _ref$imageUrl === void 0 ? '' : _ref$imageUrl,
|
62
|
+
buttonText = _ref.buttonText,
|
63
|
+
buttonUrl = _ref.buttonUrl,
|
64
|
+
buttonDownload = _ref.buttonDownload,
|
65
|
+
_ref$buttonTarget = _ref.buttonTarget,
|
66
|
+
buttonTarget = _ref$buttonTarget === void 0 ? '_self' : _ref$buttonTarget,
|
67
|
+
_ref$buttonColor = _ref.buttonColor,
|
68
|
+
buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
|
69
|
+
_ref$imageScaling = _ref.imageScaling,
|
70
|
+
imageScaling = _ref$imageScaling === void 0 ? 'cover' : _ref$imageScaling,
|
71
|
+
onButtonClick = _ref.onButtonClick;
|
72
|
+
|
73
|
+
var buttonElem = /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
|
74
|
+
className: cn('button', [classes.button]),
|
75
|
+
href: buttonUrl,
|
76
|
+
target: buttonTarget,
|
77
|
+
theme: buttonColor,
|
78
|
+
onClick: onButtonClick,
|
79
|
+
download: buttonDownload
|
80
|
+
}, buttonText);
|
81
|
+
|
82
|
+
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
|
83
|
+
className: cn({
|
84
|
+
image: !!imageUrl,
|
85
|
+
scaling: imageScaling
|
86
|
+
}, [className, classes.root]),
|
87
|
+
ref: rootRef
|
88
|
+
}), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
|
89
|
+
guttersLeft: "medium"
|
90
|
+
}, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
|
91
|
+
all: "6",
|
92
|
+
mobile: "12",
|
93
|
+
leftOffsetTablet: "1",
|
94
|
+
leftOffsetDesktop: "1",
|
95
|
+
leftOffsetWide: "1"
|
96
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
97
|
+
className: cn('content')
|
98
|
+
}, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
|
99
|
+
className: cn('header'),
|
100
|
+
as: "h2"
|
101
|
+
}, title), /*#__PURE__*/_react["default"].createElement("div", {
|
102
|
+
className: cn('text')
|
103
|
+
}, text), !!imageUrl && buttonElem)), /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, {
|
104
|
+
all: "5",
|
105
|
+
mobile: "12"
|
106
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
107
|
+
className: cn('media'),
|
108
|
+
style: getMediaStyle(imageUrl)
|
109
|
+
}, !imageUrl && buttonElem))));
|
110
|
+
};
|
111
|
+
|
112
|
+
ButtonBanner.propTypes = {
|
113
|
+
dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
|
114
|
+
className: PropTypes.string,
|
115
|
+
classes: PropTypes.shape({
|
116
|
+
root: PropTypes.string,
|
117
|
+
button: PropTypes.string
|
118
|
+
}),
|
119
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
120
|
+
current: PropTypes.elementType
|
121
|
+
}), PropTypes.any])]),
|
122
|
+
title: PropTypes.string.isRequired,
|
123
|
+
text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
|
124
|
+
imageUrl: PropTypes.string,
|
125
|
+
buttonText: PropTypes.string.isRequired,
|
126
|
+
buttonUrl: PropTypes.string,
|
127
|
+
buttonDownload: PropTypes.bool,
|
128
|
+
buttonTarget: PropTypes.oneOf(Object.values(ButtonTarget)),
|
129
|
+
buttonColor: PropTypes.oneOf(Object.values(ButtonColor)),
|
130
|
+
onButtonClick: PropTypes.func
|
131
|
+
};
|
132
|
+
var _default = ButtonBanner;
|
133
|
+
exports["default"] = _default;
|
@@ -5,15 +5,15 @@ h4,
|
|
5
5
|
h5 {
|
6
6
|
margin: 0;
|
7
7
|
}
|
8
|
-
.mfui-
|
8
|
+
.mfui-button-link-box {
|
9
9
|
font-family: inherit;
|
10
10
|
font-size: 15px;
|
11
11
|
line-height: 24px;
|
12
12
|
font-weight: 400;
|
13
13
|
}
|
14
|
-
.mfui-
|
14
|
+
.mfui-button-link-box__row:not(:last-child) {
|
15
15
|
margin-bottom: 32px;
|
16
16
|
}
|
17
|
-
.mfui-
|
17
|
+
.mfui-button-link-box_h-align_center {
|
18
18
|
text-align: center;
|
19
19
|
}
|
@@ -1,18 +1,38 @@
|
|
1
|
-
import
|
1
|
+
import React, { Ref } from 'react';
|
2
2
|
import './ButtonLinkBox.less';
|
3
3
|
export interface IButtonLinkBoxProps {
|
4
|
+
/** Дата атрибуты для корневого элемента */
|
5
|
+
dataAttrs?: {
|
6
|
+
[key: string]: string;
|
7
|
+
};
|
4
8
|
/** Дополнительный класс корневого элемента */
|
5
9
|
className?: string;
|
10
|
+
/** Дополнительные классы для корневого и внутренних элементов */
|
11
|
+
classes?: {
|
12
|
+
root?: string;
|
13
|
+
button?: string;
|
14
|
+
link?: string;
|
15
|
+
};
|
16
|
+
/** Ссылка на корневой элемент */
|
17
|
+
rootRef?: Ref<HTMLDivElement>;
|
6
18
|
/** Заголовок кнопки */
|
7
19
|
buttonTitle?: string;
|
8
20
|
/** Ссылка кнопки */
|
9
21
|
buttonUrl?: string;
|
22
|
+
/** Добавляет атрибут download для тега <a> компонента Button */
|
23
|
+
buttonDownload?: boolean;
|
10
24
|
/** Цвет кнопки */
|
11
25
|
buttonColor?: 'green' | 'purple';
|
26
|
+
/** Target свойство кнопки */
|
27
|
+
buttonTarget?: '_self' | '_blank' | '_parent' | '_top';
|
12
28
|
/** Заголовок ссылки */
|
13
29
|
linkTitle?: string;
|
14
|
-
/**
|
30
|
+
/** Добавляет атрибут download для тега <a> компонента Button */
|
15
31
|
linkUrl?: string;
|
32
|
+
/** Target свойство ссылки */
|
33
|
+
linkTarget?: '_self' | '_blank' | '_parent' | '_top';
|
34
|
+
/** Добавляет атрибут download к свойству тега <a> */
|
35
|
+
linkDownload?: boolean;
|
16
36
|
/** Горизонтальное выравнивание */
|
17
37
|
hAlign?: 'center' | 'left';
|
18
38
|
/** Обработчик клика по кнопке */
|
@@ -7,55 +7,89 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
});
|
8
8
|
exports["default"] = void 0;
|
9
9
|
|
10
|
-
|
10
|
+
require("core-js/modules/es.string.link");
|
11
11
|
|
12
|
-
var
|
12
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
13
|
+
|
14
|
+
var _react = _interopRequireDefault(require("react"));
|
13
15
|
|
14
16
|
var _uiCore = require("@megafon/ui-core");
|
15
17
|
|
18
|
+
var _uiHelpers = require("@megafon/ui-helpers");
|
19
|
+
|
20
|
+
var PropTypes = _interopRequireWildcard(require("prop-types"));
|
21
|
+
|
16
22
|
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
|
17
23
|
|
18
24
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
19
25
|
|
20
|
-
|
26
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
27
|
+
|
28
|
+
var cn = (0, _uiHelpers.cnCreate)('mfui-button-link-box');
|
21
29
|
|
22
30
|
var ButtonLinkBox = function ButtonLinkBox(_ref) {
|
23
|
-
var
|
31
|
+
var dataAttrs = _ref.dataAttrs,
|
32
|
+
rootRef = _ref.rootRef,
|
33
|
+
buttonTitle = _ref.buttonTitle,
|
24
34
|
buttonUrl = _ref.buttonUrl,
|
35
|
+
buttonDownload = _ref.buttonDownload,
|
25
36
|
_ref$buttonColor = _ref.buttonColor,
|
26
37
|
buttonColor = _ref$buttonColor === void 0 ? 'green' : _ref$buttonColor,
|
27
38
|
linkTitle = _ref.linkTitle,
|
28
39
|
linkUrl = _ref.linkUrl,
|
40
|
+
linkDownload = _ref.linkDownload,
|
29
41
|
hAlign = _ref.hAlign,
|
30
42
|
className = _ref.className,
|
43
|
+
buttonTarget = _ref.buttonTarget,
|
44
|
+
linkTarget = _ref.linkTarget,
|
45
|
+
_ref$classes = _ref.classes,
|
46
|
+
classes = _ref$classes === void 0 ? {} : _ref$classes,
|
31
47
|
onButtonClick = _ref.onButtonClick,
|
32
48
|
onLinkClick = _ref.onLinkClick;
|
33
|
-
return /*#__PURE__*/
|
49
|
+
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
|
34
50
|
className: cn({
|
35
51
|
'h-align': hAlign
|
36
|
-
}, className)
|
37
|
-
|
52
|
+
}, [className, classes.root]),
|
53
|
+
ref: rootRef
|
54
|
+
}), buttonTitle && /*#__PURE__*/_react["default"].createElement("div", {
|
38
55
|
className: cn('row')
|
39
|
-
}, /*#__PURE__*/
|
56
|
+
}, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
|
57
|
+
className: classes.button,
|
40
58
|
href: buttonUrl,
|
41
59
|
theme: buttonColor,
|
42
|
-
onClick: onButtonClick
|
43
|
-
|
60
|
+
onClick: onButtonClick,
|
61
|
+
target: buttonTarget,
|
62
|
+
download: buttonDownload
|
63
|
+
}, buttonTitle)), linkTitle && /*#__PURE__*/_react["default"].createElement("div", {
|
44
64
|
className: cn('row')
|
45
|
-
}, /*#__PURE__*/
|
65
|
+
}, /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
|
66
|
+
className: classes.link,
|
46
67
|
href: linkUrl,
|
68
|
+
download: linkDownload,
|
47
69
|
underlineVisibility: "always",
|
70
|
+
target: linkTarget,
|
48
71
|
onClick: onLinkClick
|
49
72
|
}, linkTitle)));
|
50
73
|
};
|
51
74
|
|
52
75
|
ButtonLinkBox.propTypes = {
|
76
|
+
dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
|
53
77
|
className: PropTypes.string,
|
78
|
+
classes: PropTypes.shape({
|
79
|
+
root: PropTypes.string,
|
80
|
+
button: PropTypes.string,
|
81
|
+
link: PropTypes.string
|
82
|
+
}),
|
83
|
+
rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
|
84
|
+
current: PropTypes.elementType
|
85
|
+
}), PropTypes.any])]),
|
54
86
|
buttonTitle: PropTypes.string,
|
55
87
|
buttonUrl: PropTypes.string,
|
88
|
+
buttonDownload: PropTypes.bool,
|
56
89
|
buttonColor: PropTypes.oneOf(['green', 'purple']),
|
57
90
|
linkTitle: PropTypes.string,
|
58
91
|
linkUrl: PropTypes.string,
|
92
|
+
linkDownload: PropTypes.bool,
|
59
93
|
hAlign: PropTypes.oneOf(['center']),
|
60
94
|
onButtonClick: PropTypes.func,
|
61
95
|
onLinkClick: PropTypes.func
|
@@ -5,99 +5,126 @@ h4,
|
|
5
5
|
h5 {
|
6
6
|
margin: 0;
|
7
7
|
}
|
8
|
-
.mfui-
|
8
|
+
.mfui-card {
|
9
|
+
display: -webkit-box;
|
10
|
+
display: -ms-flexbox;
|
11
|
+
display: flex;
|
9
12
|
border-radius: 8px;
|
13
|
+
overflow: hidden;
|
14
|
+
background-color: #FFFFFF;
|
10
15
|
-webkit-box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
|
11
16
|
box-shadow: 0 0.25px 3px rgba(0, 0, 0, 0.25);
|
12
|
-
background-color: #FFFFFF;
|
13
|
-
overflow: hidden;
|
14
17
|
}
|
15
|
-
.mfui-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
-webkit-box-
|
20
|
-
|
21
|
-
|
22
|
-
|
18
|
+
.mfui-card__inner {
|
19
|
+
display: -webkit-box;
|
20
|
+
display: -ms-flexbox;
|
21
|
+
display: flex;
|
22
|
+
-webkit-box-orient: vertical;
|
23
|
+
-webkit-box-direction: normal;
|
24
|
+
-ms-flex-direction: column;
|
25
|
+
flex-direction: column;
|
26
|
+
-webkit-box-flex: 0;
|
27
|
+
-ms-flex-positive: 0;
|
28
|
+
flex-grow: 0;
|
29
|
+
-ms-flex-negative: 1;
|
30
|
+
flex-shrink: 1;
|
31
|
+
-webkit-box-sizing: border-box;
|
32
|
+
box-sizing: border-box;
|
33
|
+
width: 100%;
|
23
34
|
padding: 32px 20px;
|
24
35
|
}
|
25
36
|
@media screen and (max-width: 767px) {
|
26
|
-
.mfui-
|
37
|
+
.mfui-card__inner {
|
27
38
|
padding: 24px 16px;
|
28
39
|
}
|
29
40
|
}
|
30
|
-
.mfui-
|
31
|
-
|
41
|
+
.mfui-card__text {
|
42
|
+
font-size: 15px;
|
43
|
+
line-height: 24px;
|
44
|
+
font-weight: 400;
|
45
|
+
margin-top: 12px;
|
46
|
+
color: #333333;
|
32
47
|
}
|
33
|
-
.mfui-
|
48
|
+
.mfui-card__btns-wrapper {
|
34
49
|
display: -webkit-box;
|
35
50
|
display: -ms-flexbox;
|
36
51
|
display: flex;
|
37
52
|
-ms-flex-wrap: wrap;
|
38
53
|
flex-wrap: wrap;
|
39
|
-
-webkit-box-pack: space-evenly;
|
40
|
-
-ms-flex-pack: space-evenly;
|
41
|
-
justify-content: space-evenly;
|
42
54
|
-webkit-box-align: center;
|
43
55
|
-ms-flex-align: center;
|
44
56
|
align-items: center;
|
45
|
-
|
57
|
+
-webkit-box-pack: space-evenly;
|
58
|
+
-ms-flex-pack: space-evenly;
|
59
|
+
justify-content: space-evenly;
|
60
|
+
margin-top: auto;
|
61
|
+
padding-top: 12px;
|
46
62
|
}
|
47
|
-
.mfui-
|
63
|
+
.mfui-card__btns-wrapper_left-align {
|
48
64
|
-webkit-box-pack: start;
|
49
65
|
-ms-flex-pack: start;
|
50
66
|
justify-content: flex-start;
|
51
67
|
}
|
52
|
-
.mfui-
|
68
|
+
.mfui-card__fake-link {
|
53
69
|
color: #34AAF2;
|
54
70
|
}
|
55
|
-
.mfui-
|
56
|
-
.mfui-
|
57
|
-
.mfui-
|
71
|
+
.mfui-card__button,
|
72
|
+
.mfui-card__link,
|
73
|
+
.mfui-card__fake-link {
|
58
74
|
margin: 12px 10px;
|
59
75
|
}
|
60
|
-
.mfui-
|
61
|
-
margin-bottom:
|
76
|
+
.mfui-card__svg-wrapper {
|
77
|
+
margin-bottom: 24px;
|
62
78
|
}
|
63
|
-
|
64
|
-
.mfui-beta-card__pic-wrapper {
|
65
|
-
margin-bottom: 24px;
|
66
|
-
}
|
67
|
-
}
|
68
|
-
.mfui-beta-card__pic-wrapper .mfui-beta-card__img {
|
69
|
-
max-width: 100%;
|
70
|
-
}
|
71
|
-
.mfui-beta-card__pic-wrapper svg {
|
79
|
+
.mfui-card__svg-wrapper svg {
|
72
80
|
width: 40px;
|
73
81
|
height: 40px;
|
74
82
|
}
|
75
|
-
.mfui-
|
83
|
+
.mfui-card__pic-wrapper .mfui-card__img {
|
84
|
+
max-width: 100%;
|
85
|
+
}
|
86
|
+
.mfui-card__pic-wrapper {
|
76
87
|
display: -webkit-box;
|
77
88
|
display: -ms-flexbox;
|
78
89
|
display: flex;
|
79
|
-
-webkit-box-pack: center;
|
80
|
-
-ms-flex-pack: center;
|
81
|
-
justify-content: center;
|
82
90
|
-webkit-box-align: center;
|
83
91
|
-ms-flex-align: center;
|
84
92
|
align-items: center;
|
93
|
+
-webkit-box-pack: center;
|
94
|
+
-ms-flex-pack: center;
|
95
|
+
justify-content: center;
|
85
96
|
margin-top: -32px;
|
86
|
-
margin-left: -20px;
|
87
97
|
margin-right: -20px;
|
98
|
+
margin-bottom: 32px;
|
99
|
+
margin-left: -20px;
|
88
100
|
}
|
89
101
|
@media screen and (max-width: 767px) {
|
90
|
-
.mfui-
|
102
|
+
.mfui-card__pic-wrapper {
|
91
103
|
margin-top: -24px;
|
92
|
-
margin-left: -16px;
|
93
104
|
margin-right: -16px;
|
105
|
+
margin-bottom: 24px;
|
106
|
+
margin-left: -16px;
|
94
107
|
}
|
95
108
|
}
|
96
|
-
.mfui-
|
109
|
+
.mfui-card__pic-wrapper_object-fit_fill img {
|
97
110
|
width: 100%;
|
98
111
|
height: auto;
|
99
112
|
}
|
100
|
-
.mfui-
|
113
|
+
.mfui-card__pic-wrapper_object-fit_contain img {
|
101
114
|
width: auto;
|
102
115
|
height: 100%;
|
103
116
|
}
|
117
|
+
.mfui-card_href * {
|
118
|
+
text-decoration: none !important;
|
119
|
+
}
|
120
|
+
.mfui-card_href:hover {
|
121
|
+
-webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
|
122
|
+
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
|
123
|
+
}
|
124
|
+
.mfui-card_full-height {
|
125
|
+
height: 100%;
|
126
|
+
}
|
127
|
+
.mfui-card_centered-text .mfui-card__text,
|
128
|
+
.mfui-card_centered-text .mfui-card__title {
|
129
|
+
text-align: center;
|
130
|
+
}
|
@@ -1,12 +1,21 @@
|
|
1
|
-
import
|
1
|
+
import React, { Ref } from 'react';
|
2
2
|
import './Card.less';
|
3
|
+
export declare const Target: {
|
4
|
+
readonly SELF: "_self";
|
5
|
+
readonly BLANK: "_blank";
|
6
|
+
};
|
7
|
+
declare type TargetType = typeof Target[keyof typeof Target];
|
3
8
|
interface IButton {
|
4
9
|
title: string;
|
5
10
|
href: string;
|
11
|
+
target?: TargetType;
|
12
|
+
download?: boolean;
|
6
13
|
}
|
7
14
|
interface ILink {
|
8
15
|
title: string;
|
9
16
|
href?: string;
|
17
|
+
target?: TargetType;
|
18
|
+
download?: boolean;
|
10
19
|
}
|
11
20
|
export declare const ObjectFit: {
|
12
21
|
readonly FILL: "fill";
|
@@ -14,22 +23,43 @@ export declare const ObjectFit: {
|
|
14
23
|
};
|
15
24
|
declare type ObjectFitType = typeof ObjectFit[keyof typeof ObjectFit];
|
16
25
|
export interface ICard {
|
26
|
+
/** Дата атрибуты для корневого элемента */
|
27
|
+
dataAttrs?: {
|
28
|
+
[key: string]: string;
|
29
|
+
};
|
30
|
+
/** Дополнительный класс корневого элемента */
|
31
|
+
className?: string;
|
32
|
+
/** Дополнительные классы для корневого и внутренних элементов */
|
33
|
+
classes?: {
|
34
|
+
root?: string;
|
35
|
+
button?: string;
|
36
|
+
link?: string;
|
37
|
+
inner?: string;
|
38
|
+
};
|
39
|
+
/** Ссылка на корневой элемент */
|
40
|
+
rootRef?: Ref<HTMLDivElement>;
|
17
41
|
/** Изображение в карточке */
|
18
42
|
imageSrc?: string;
|
19
43
|
/** Иконка в карточке */
|
20
44
|
svgSrc?: React.ReactNode;
|
21
45
|
/** Заголовок карточки */
|
22
|
-
title: string;
|
46
|
+
title: string | React.ReactNode[] | React.ReactNode;
|
23
47
|
/** Текст карточки */
|
24
|
-
text
|
48
|
+
text?: string | React.ReactNode[] | React.ReactNode;
|
25
49
|
/** Данные для кнопки */
|
26
50
|
button?: IButton;
|
27
51
|
/** Данные для ссылки */
|
28
52
|
link?: ILink;
|
53
|
+
/** Выравнивание текста по центру */
|
54
|
+
isCenteredText?: boolean;
|
29
55
|
/** Расположение кнопки/ссылки по левой стороне */
|
30
56
|
isLeftHAlign?: boolean;
|
57
|
+
/** Высота корневого элемента 100% */
|
58
|
+
isFullHeight?: boolean;
|
31
59
|
/** Ссылка для всей карточки */
|
32
60
|
href?: string;
|
61
|
+
/** Target свойство, аналогично свойству 'target' тега 'a' */
|
62
|
+
target?: TargetType;
|
33
63
|
/** Режим позиционирования изображения */
|
34
64
|
objectFit?: ObjectFitType;
|
35
65
|
}
|