@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.
Files changed (211) hide show
  1. package/CHANGELOG.md +1637 -0
  2. package/README.md +0 -5
  3. package/dist/es/components/AccordionBox/AccordionBox.css +13 -0
  4. package/dist/es/components/AccordionBox/AccordionBox.d.ts +16 -1
  5. package/dist/es/components/AccordionBox/AccordionBox.js +29 -13
  6. package/dist/es/components/BannerBox/BannerBox.js +3 -2
  7. package/dist/es/components/BenefitsIcons/BenefitsIcons.d.ts +13 -2
  8. package/dist/es/components/BenefitsIcons/BenefitsIcons.js +82 -17
  9. package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
  10. package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js +15 -14
  11. package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +3 -3
  12. package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +19 -12
  13. package/dist/es/components/BenefitsIcons/types.d.ts +7 -2
  14. package/dist/es/components/BenefitsIcons/types.js +4 -0
  15. package/dist/es/components/BenefitsPictures/BenefitsPictures.d.ts +10 -1
  16. package/dist/es/components/BenefitsPictures/BenefitsPictures.js +28 -12
  17. package/dist/es/components/BenefitsPictures/BenfitsPictures.css +4 -4
  18. package/dist/es/components/Breadcrumbs/Breadcrumbs.css +46 -0
  19. package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +21 -0
  20. package/dist/es/components/Breadcrumbs/Breadcrumbs.js +49 -0
  21. package/dist/es/components/ButtonBanner/ButtonBanner.css +122 -0
  22. package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +54 -0
  23. package/dist/es/components/ButtonBanner/ButtonBanner.js +107 -0
  24. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.css +3 -3
  25. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +22 -2
  26. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +37 -8
  27. package/dist/es/components/Card/Card.css +71 -44
  28. package/dist/es/components/Card/Card.d.ts +33 -3
  29. package/dist/es/components/Card/Card.js +103 -42
  30. package/dist/es/components/CardsBox/CardsBox.d.ts +10 -2
  31. package/dist/es/components/CardsBox/CardsBox.js +26 -13
  32. package/dist/es/components/CarouselBox/CarouselBox.js +3 -2
  33. package/dist/es/components/Container/Container.css +1848 -533
  34. package/dist/es/components/Container/Container.d.ts +11 -1
  35. package/dist/es/components/Container/Container.js +28 -6
  36. package/dist/es/components/DownloadLinks/DownloadLink.css +6 -6
  37. package/dist/es/components/DownloadLinks/DownloadLink.d.ts +7 -0
  38. package/dist/es/components/DownloadLinks/DownloadLink.js +28 -6
  39. package/dist/es/components/DownloadLinks/DownloadLinks.css +9 -6
  40. package/dist/es/components/DownloadLinks/DownloadLinks.d.ts +2 -0
  41. package/dist/es/components/DownloadLinks/DownloadLinks.js +18 -3
  42. package/dist/es/components/Instructions/Instructions.css +189 -130
  43. package/dist/es/components/Instructions/Instructions.d.ts +21 -2
  44. package/dist/es/components/Instructions/Instructions.js +115 -74
  45. package/dist/es/components/Instructions/img/iphone12.png +0 -0
  46. package/dist/es/components/PageTitle/PageTitle.css +80 -0
  47. package/dist/es/components/PageTitle/PageTitle.d.ts +23 -0
  48. package/dist/es/components/PageTitle/PageTitle.js +65 -0
  49. package/dist/es/components/Partners/Partners.css +22 -31
  50. package/dist/es/components/Partners/Partners.d.ts +13 -1
  51. package/dist/es/components/Partners/Partners.js +40 -18
  52. package/dist/es/components/PictureWithDescription/PictureWithDescription.css +25 -10
  53. package/dist/es/components/PictureWithDescription/PictureWithDescription.d.ts +13 -0
  54. package/dist/es/components/PictureWithDescription/PictureWithDescription.js +31 -7
  55. package/dist/es/components/Property/Property.css +79 -71
  56. package/dist/es/components/Property/Property.d.ts +21 -2
  57. package/dist/es/components/Property/Property.js +80 -34
  58. package/dist/es/components/Property/PropertyDescription.css +3 -3
  59. package/dist/es/components/Property/PropertyDescription.js +19 -21
  60. package/dist/es/components/Property/types.d.ts +7 -2
  61. package/dist/es/components/Steps/Steps.css +41 -0
  62. package/dist/es/components/Steps/Steps.d.ts +10 -0
  63. package/dist/es/components/Steps/Steps.js +35 -0
  64. package/dist/es/components/Steps/StepsItem.css +37 -0
  65. package/dist/es/components/Steps/StepsItem.d.ts +10 -0
  66. package/dist/es/components/Steps/StepsItem.js +26 -0
  67. package/dist/es/components/StoreBanner/StoreBanner.css +293 -0
  68. package/dist/es/components/StoreBanner/StoreBanner.d.ts +67 -0
  69. package/dist/es/components/StoreBanner/StoreBanner.js +164 -0
  70. package/dist/es/components/StoreBanner/doc/img/new-iphone-screen.png +0 -0
  71. package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
  72. package/dist/es/components/StoreBanner/doc/img/screen.png +0 -0
  73. package/dist/es/components/StoreBanner/img/android.png +0 -0
  74. package/dist/es/components/StoreBanner/img/black-iphone.png +0 -0
  75. package/dist/es/components/StoreBanner/img/new-iphone.png +0 -0
  76. package/dist/es/components/StoreBanner/img/white-iphone.png +0 -0
  77. package/dist/es/components/StoreButton/StoreButton.css +15 -0
  78. package/dist/es/components/StoreButton/StoreButton.d.ts +17 -0
  79. package/dist/es/components/StoreButton/StoreButton.js +37 -0
  80. package/dist/es/components/StoreButton/img/app-store.png +0 -0
  81. package/dist/es/components/StoreButton/img/google-play.png +0 -0
  82. package/dist/es/components/StoreButton/img/huawei-store.png +0 -0
  83. package/dist/es/components/Table/Table.css +67 -67
  84. package/dist/es/components/Table/Table.js +4 -4
  85. package/dist/es/components/Table/TableRow.js +1 -0
  86. package/dist/es/components/TabsBox/TabsBox.d.ts +4 -1
  87. package/dist/es/components/TabsBox/TabsBox.js +24 -3
  88. package/dist/es/components/TextBox/TextBox.css +7 -1
  89. package/dist/es/components/TextBox/TextBox.d.ts +8 -0
  90. package/dist/es/components/TextBox/TextBox.js +37 -5
  91. package/dist/es/components/TextBox/TextBoxPicture.css +24 -0
  92. package/dist/es/components/TextBox/TextBoxPicture.d.ts +17 -0
  93. package/dist/es/components/TextBox/TextBoxPicture.js +32 -0
  94. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.css +15 -4
  95. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +8 -2
  96. package/dist/es/components/TitleDescriptionBox/TitleDescriptionBox.js +34 -14
  97. package/dist/es/components/VideoBanner/VideoBanner.css +155 -76
  98. package/dist/es/components/VideoBanner/VideoBanner.d.ts +64 -13
  99. package/dist/es/components/VideoBanner/VideoBanner.js +202 -70
  100. package/dist/es/components/VideoBlock/VideoBlock.css +32 -28
  101. package/dist/es/components/VideoBlock/VideoBlock.d.ts +20 -6
  102. package/dist/es/components/VideoBlock/VideoBlock.js +63 -44
  103. package/dist/es/constants/throttleTime.d.ts +4 -0
  104. package/dist/es/constants/throttleTime.js +3 -0
  105. package/dist/es/index.d.ts +8 -0
  106. package/dist/es/index.js +8 -0
  107. package/dist/lib/components/AccordionBox/AccordionBox.css +13 -0
  108. package/dist/lib/components/AccordionBox/AccordionBox.d.ts +16 -1
  109. package/dist/lib/components/AccordionBox/AccordionBox.js +31 -19
  110. package/dist/lib/components/BannerBox/BannerBox.js +3 -5
  111. package/dist/lib/components/BenefitsIcons/BenefitsIcons.d.ts +13 -2
  112. package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +84 -20
  113. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
  114. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js +15 -16
  115. package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +3 -3
  116. package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +19 -12
  117. package/dist/lib/components/BenefitsIcons/types.d.ts +7 -2
  118. package/dist/lib/components/BenefitsIcons/types.js +7 -2
  119. package/dist/lib/components/BenefitsPictures/BenefitsPictures.d.ts +10 -1
  120. package/dist/lib/components/BenefitsPictures/BenefitsPictures.js +32 -15
  121. package/dist/lib/components/BenefitsPictures/BenfitsPictures.css +4 -4
  122. package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +46 -0
  123. package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +21 -0
  124. package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +65 -0
  125. package/dist/lib/components/ButtonBanner/ButtonBanner.css +122 -0
  126. package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +54 -0
  127. package/dist/lib/components/ButtonBanner/ButtonBanner.js +133 -0
  128. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.css +3 -3
  129. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +22 -2
  130. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +45 -11
  131. package/dist/lib/components/Card/Card.css +71 -44
  132. package/dist/lib/components/Card/Card.d.ts +33 -3
  133. package/dist/lib/components/Card/Card.js +118 -59
  134. package/dist/lib/components/CardsBox/CardsBox.d.ts +10 -2
  135. package/dist/lib/components/CardsBox/CardsBox.js +30 -16
  136. package/dist/lib/components/CarouselBox/CarouselBox.js +3 -5
  137. package/dist/lib/components/Container/Container.css +1848 -533
  138. package/dist/lib/components/Container/Container.d.ts +11 -1
  139. package/dist/lib/components/Container/Container.js +32 -11
  140. package/dist/lib/components/DownloadLinks/DownloadLink.css +6 -6
  141. package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +7 -0
  142. package/dist/lib/components/DownloadLinks/DownloadLink.js +32 -11
  143. package/dist/lib/components/DownloadLinks/DownloadLinks.css +9 -6
  144. package/dist/lib/components/DownloadLinks/DownloadLinks.d.ts +2 -0
  145. package/dist/lib/components/DownloadLinks/DownloadLinks.js +20 -6
  146. package/dist/lib/components/Instructions/Instructions.css +189 -130
  147. package/dist/lib/components/Instructions/Instructions.d.ts +21 -2
  148. package/dist/lib/components/Instructions/Instructions.js +148 -104
  149. package/dist/lib/components/Instructions/img/iphone12.png +0 -0
  150. package/dist/lib/components/PageTitle/PageTitle.css +80 -0
  151. package/dist/lib/components/PageTitle/PageTitle.d.ts +23 -0
  152. package/dist/lib/components/PageTitle/PageTitle.js +85 -0
  153. package/dist/lib/components/Partners/Partners.css +22 -31
  154. package/dist/lib/components/Partners/Partners.d.ts +13 -1
  155. package/dist/lib/components/Partners/Partners.js +43 -23
  156. package/dist/lib/components/PictureWithDescription/PictureWithDescription.css +25 -10
  157. package/dist/lib/components/PictureWithDescription/PictureWithDescription.d.ts +13 -0
  158. package/dist/lib/components/PictureWithDescription/PictureWithDescription.js +33 -8
  159. package/dist/lib/components/Property/Property.css +79 -71
  160. package/dist/lib/components/Property/Property.d.ts +21 -2
  161. package/dist/lib/components/Property/Property.js +93 -53
  162. package/dist/lib/components/Property/PropertyDescription.css +3 -3
  163. package/dist/lib/components/Property/PropertyDescription.js +21 -25
  164. package/dist/lib/components/Property/types.d.ts +7 -2
  165. package/dist/lib/components/Steps/Steps.css +41 -0
  166. package/dist/lib/components/Steps/Steps.d.ts +10 -0
  167. package/dist/lib/components/Steps/Steps.js +55 -0
  168. package/dist/lib/components/Steps/StepsItem.css +37 -0
  169. package/dist/lib/components/Steps/StepsItem.d.ts +10 -0
  170. package/dist/lib/components/Steps/StepsItem.js +39 -0
  171. package/dist/lib/components/StoreBanner/StoreBanner.css +293 -0
  172. package/dist/lib/components/StoreBanner/StoreBanner.d.ts +67 -0
  173. package/dist/lib/components/StoreBanner/StoreBanner.js +191 -0
  174. package/dist/lib/components/StoreBanner/doc/img/new-iphone-screen.png +0 -0
  175. package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
  176. package/dist/lib/components/StoreBanner/doc/img/screen.png +0 -0
  177. package/dist/lib/components/StoreBanner/img/android.png +0 -0
  178. package/dist/lib/components/StoreBanner/img/black-iphone.png +0 -0
  179. package/dist/lib/components/StoreBanner/img/new-iphone.png +0 -0
  180. package/dist/lib/components/StoreBanner/img/white-iphone.png +0 -0
  181. package/dist/lib/components/StoreButton/StoreButton.css +15 -0
  182. package/dist/lib/components/StoreButton/StoreButton.d.ts +17 -0
  183. package/dist/lib/components/StoreButton/StoreButton.js +58 -0
  184. package/dist/lib/components/StoreButton/img/app-store.png +0 -0
  185. package/dist/lib/components/StoreButton/img/google-play.png +0 -0
  186. package/dist/lib/components/StoreButton/img/huawei-store.png +0 -0
  187. package/dist/lib/components/Table/Table.css +67 -67
  188. package/dist/lib/components/Table/Table.js +6 -8
  189. package/dist/lib/components/Table/TableRow.js +1 -0
  190. package/dist/lib/components/TabsBox/TabsBox.d.ts +4 -1
  191. package/dist/lib/components/TabsBox/TabsBox.js +25 -2
  192. package/dist/lib/components/TextBox/TextBox.css +7 -1
  193. package/dist/lib/components/TextBox/TextBox.d.ts +8 -0
  194. package/dist/lib/components/TextBox/TextBox.js +39 -6
  195. package/dist/lib/components/TextBox/TextBoxPicture.css +24 -0
  196. package/dist/lib/components/TextBox/TextBoxPicture.d.ts +17 -0
  197. package/dist/lib/components/TextBox/TextBoxPicture.js +49 -0
  198. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.css +15 -4
  199. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.d.ts +8 -2
  200. package/dist/lib/components/TitleDescriptionBox/TitleDescriptionBox.js +39 -19
  201. package/dist/lib/components/VideoBanner/VideoBanner.css +155 -76
  202. package/dist/lib/components/VideoBanner/VideoBanner.d.ts +64 -13
  203. package/dist/lib/components/VideoBanner/VideoBanner.js +225 -89
  204. package/dist/lib/components/VideoBlock/VideoBlock.css +32 -28
  205. package/dist/lib/components/VideoBlock/VideoBlock.d.ts +20 -6
  206. package/dist/lib/components/VideoBlock/VideoBlock.js +76 -68
  207. package/dist/lib/constants/throttleTime.d.ts +4 -0
  208. package/dist/lib/constants/throttleTime.js +10 -0
  209. package/dist/lib/index.d.ts +8 -0
  210. package/dist/lib/index.js +64 -0
  211. 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-beta-button-link-box {
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-beta-button-link-box__row:not(:last-child) {
14
+ .mfui-button-link-box__row:not(:last-child) {
15
15
  margin-bottom: 32px;
16
16
  }
17
- .mfui-beta-button-link-box_h-align_center {
17
+ .mfui-button-link-box_h-align_center {
18
18
  text-align: center;
19
19
  }
@@ -1,18 +1,38 @@
1
- import * as React from 'react';
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
- var React = _interopRequireWildcard(require("react"));
10
+ require("core-js/modules/es.string.link");
11
11
 
12
- var PropTypes = _interopRequireWildcard(require("prop-types"));
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
- var cn = (0, _uiCore.cnCreate)('mfui-beta-button-link-box');
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 buttonTitle = _ref.buttonTitle,
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__*/React.createElement("div", {
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
- }, buttonTitle && /*#__PURE__*/React.createElement("div", {
52
+ }, [className, classes.root]),
53
+ ref: rootRef
54
+ }), buttonTitle && /*#__PURE__*/_react["default"].createElement("div", {
38
55
  className: cn('row')
39
- }, /*#__PURE__*/React.createElement(_uiCore.Button, {
56
+ }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
57
+ className: classes.button,
40
58
  href: buttonUrl,
41
59
  theme: buttonColor,
42
- onClick: onButtonClick
43
- }, buttonTitle)), linkTitle && /*#__PURE__*/React.createElement("div", {
60
+ onClick: onButtonClick,
61
+ target: buttonTarget,
62
+ download: buttonDownload
63
+ }, buttonTitle)), linkTitle && /*#__PURE__*/_react["default"].createElement("div", {
44
64
  className: cn('row')
45
- }, /*#__PURE__*/React.createElement(_uiCore.TextLink, {
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-beta-card {
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-beta-card_href * {
16
- text-decoration: none;
17
- }
18
- .mfui-beta-card_href:hover {
19
- -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
20
- box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
21
- }
22
- .mfui-beta-card__inner {
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-beta-card__inner {
37
+ .mfui-card__inner {
27
38
  padding: 24px 16px;
28
39
  }
29
40
  }
30
- .mfui-beta-card__title {
31
- margin-bottom: 12px;
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-beta-card__btns-wrapper {
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
- margin-top: 12px;
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-beta-card__btns-wrapper_left-align {
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-beta-card__fake-link {
68
+ .mfui-card__fake-link {
53
69
  color: #34AAF2;
54
70
  }
55
- .mfui-beta-card__button,
56
- .mfui-beta-card__link,
57
- .mfui-beta-card__fake-link {
71
+ .mfui-card__button,
72
+ .mfui-card__link,
73
+ .mfui-card__fake-link {
58
74
  margin: 12px 10px;
59
75
  }
60
- .mfui-beta-card__pic-wrapper {
61
- margin-bottom: 32px;
76
+ .mfui-card__svg-wrapper {
77
+ margin-bottom: 24px;
62
78
  }
63
- @media screen and (max-width: 767px) {
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-beta-card__pic-wrapper_img {
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-beta-card__pic-wrapper_img {
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-beta-card__pic-wrapper_object-fit_fill img {
109
+ .mfui-card__pic-wrapper_object-fit_fill img {
97
110
  width: 100%;
98
111
  height: auto;
99
112
  }
100
- .mfui-beta-card__pic-wrapper_object-fit_contain img {
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 * as React from 'react';
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: string;
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
  }