@megafon/ui-shared 3.0.0-beta.9 → 3.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 (95) hide show
  1. package/CHANGELOG.md +48 -67
  2. package/README.md +2 -2
  3. package/dist/es/components/AccordionBox/AccordionBox.d.ts +5 -0
  4. package/dist/es/components/AccordionBox/AccordionBox.js +6 -1
  5. package/dist/es/components/BenefitsIcons/BenefitsIcons.js +1 -1
  6. package/dist/es/components/Breadcrumbs/Breadcrumbs.css +2 -2
  7. package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +7 -2
  8. package/dist/es/components/Breadcrumbs/Breadcrumbs.js +48 -18
  9. package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +1 -0
  10. package/dist/es/components/ButtonBanner/ButtonBanner.js +5 -1
  11. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +2 -0
  12. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +9 -1
  13. package/dist/es/components/Card/Card.d.ts +4 -2
  14. package/dist/es/components/Card/Card.js +16 -6
  15. package/dist/es/components/Container/Container.css +163 -0
  16. package/dist/es/components/DownloadLinks/DownloadLink.css +1 -1
  17. package/dist/es/components/DownloadLinks/DownloadLink.d.ts +5 -0
  18. package/dist/es/components/DownloadLinks/DownloadLink.js +14 -6
  19. package/dist/es/components/Instructions/Instructions.d.ts +7 -0
  20. package/dist/es/components/Instructions/Instructions.js +55 -45
  21. package/dist/es/components/PageTitle/PageTitle.d.ts +6 -0
  22. package/dist/es/components/PageTitle/PageTitle.js +15 -4
  23. package/dist/es/components/Partners/Partners.d.ts +5 -4
  24. package/dist/es/components/Partners/Partners.js +15 -7
  25. package/dist/es/components/Property/Property.d.ts +3 -2
  26. package/dist/es/components/Property/Property.js +9 -3
  27. package/dist/es/components/Property/PropertyDescription.js +11 -5
  28. package/dist/es/components/Property/types.d.ts +3 -0
  29. package/dist/es/components/StoreBanner/StoreBanner.css +21 -22
  30. package/dist/es/components/StoreBanner/StoreBanner.d.ts +4 -0
  31. package/dist/es/components/StoreBanner/StoreBanner.js +19 -4
  32. package/dist/es/components/StoreBanner/doc/img/qr-code.png +0 -0
  33. package/dist/es/components/StoreButton/StoreButton.d.ts +1 -1
  34. package/dist/es/components/StoreButton/StoreButton.js +26 -7
  35. package/dist/es/components/Table/Table.css +1 -1
  36. package/dist/es/components/TextBox/TextBox.css +9 -0
  37. package/dist/es/components/TextWithIcon/TextWithIcon.css +15 -0
  38. package/dist/es/components/TextWithIcon/TextWithIcon.d.ts +19 -0
  39. package/dist/es/components/TextWithIcon/TextWithIcon.js +40 -0
  40. package/dist/es/components/TextWithIcon/TextWithIconItem.css +49 -0
  41. package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +18 -0
  42. package/dist/es/components/TextWithIcon/TextWithIconItem.js +35 -0
  43. package/dist/es/components/VideoBanner/VideoBanner.d.ts +7 -2
  44. package/dist/es/components/VideoBanner/VideoBanner.js +21 -5
  45. package/dist/es/components/VideoBlock/VideoBlock.d.ts +4 -3
  46. package/dist/es/components/VideoBlock/VideoBlock.js +12 -6
  47. package/dist/es/index.d.ts +2 -0
  48. package/dist/es/index.js +2 -0
  49. package/dist/lib/components/AccordionBox/AccordionBox.d.ts +5 -0
  50. package/dist/lib/components/AccordionBox/AccordionBox.js +6 -1
  51. package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +1 -1
  52. package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +2 -2
  53. package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +7 -2
  54. package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +49 -17
  55. package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +1 -0
  56. package/dist/lib/components/ButtonBanner/ButtonBanner.js +5 -1
  57. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +2 -0
  58. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +9 -1
  59. package/dist/lib/components/Card/Card.d.ts +4 -2
  60. package/dist/lib/components/Card/Card.js +16 -6
  61. package/dist/lib/components/Container/Container.css +163 -0
  62. package/dist/lib/components/DownloadLinks/DownloadLink.css +1 -1
  63. package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +5 -0
  64. package/dist/lib/components/DownloadLinks/DownloadLink.js +13 -5
  65. package/dist/lib/components/Instructions/Instructions.d.ts +7 -0
  66. package/dist/lib/components/Instructions/Instructions.js +55 -44
  67. package/dist/lib/components/PageTitle/PageTitle.d.ts +6 -0
  68. package/dist/lib/components/PageTitle/PageTitle.js +17 -5
  69. package/dist/lib/components/Partners/Partners.d.ts +5 -4
  70. package/dist/lib/components/Partners/Partners.js +15 -7
  71. package/dist/lib/components/Property/Property.d.ts +3 -2
  72. package/dist/lib/components/Property/Property.js +9 -3
  73. package/dist/lib/components/Property/PropertyDescription.js +11 -4
  74. package/dist/lib/components/Property/types.d.ts +3 -0
  75. package/dist/lib/components/StoreBanner/StoreBanner.css +21 -22
  76. package/dist/lib/components/StoreBanner/StoreBanner.d.ts +4 -0
  77. package/dist/lib/components/StoreBanner/StoreBanner.js +19 -4
  78. package/dist/lib/components/StoreBanner/doc/img/qr-code.png +0 -0
  79. package/dist/lib/components/StoreButton/StoreButton.d.ts +1 -1
  80. package/dist/lib/components/StoreButton/StoreButton.js +30 -9
  81. package/dist/lib/components/Table/Table.css +1 -1
  82. package/dist/lib/components/TextBox/TextBox.css +9 -0
  83. package/dist/lib/components/TextWithIcon/TextWithIcon.css +15 -0
  84. package/dist/lib/components/TextWithIcon/TextWithIcon.d.ts +19 -0
  85. package/dist/lib/components/TextWithIcon/TextWithIcon.js +60 -0
  86. package/dist/lib/components/TextWithIcon/TextWithIconItem.css +49 -0
  87. package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +18 -0
  88. package/dist/lib/components/TextWithIcon/TextWithIconItem.js +54 -0
  89. package/dist/lib/components/VideoBanner/VideoBanner.d.ts +7 -2
  90. package/dist/lib/components/VideoBanner/VideoBanner.js +21 -5
  91. package/dist/lib/components/VideoBlock/VideoBlock.d.ts +4 -3
  92. package/dist/lib/components/VideoBlock/VideoBlock.js +12 -6
  93. package/dist/lib/index.d.ts +2 -0
  94. package/dist/lib/index.js +16 -0
  95. package/package.json +5 -5
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
 
3
4
  /* eslint-disable jsx-a11y/no-static-element-interactions */
@@ -5,7 +6,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
6
  /* eslint-disable jsx-a11y/click-events-have-key-events */
6
7
  import * as React from 'react';
7
8
  import { Collapse } from '@megafon/ui-core';
8
- import { cnCreate } from '@megafon/ui-helpers';
9
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
9
10
  import PropTypes from 'prop-types';
10
11
  import "./PropertyDescription.css";
11
12
  var cn = cnCreate('mfui-property-description');
@@ -15,7 +16,8 @@ var PropertyDescription = function PropertyDescription(_ref) {
15
16
  _ref$isCollapsible = _ref.isCollapsible,
16
17
  isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible,
17
18
  _ref$classes = _ref.classes,
18
- classes = _ref$classes === void 0 ? {} : _ref$classes;
19
+ classes = _ref$classes === void 0 ? {} : _ref$classes,
20
+ dataAttrs = _ref.dataAttrs;
19
21
 
20
22
  var _React$useState = React.useState(false),
21
23
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -29,10 +31,11 @@ var PropertyDescription = function PropertyDescription(_ref) {
29
31
  if (isCollapsible) {
30
32
  return /*#__PURE__*/React.createElement("div", {
31
33
  className: cn([isOpened ? classes.open : undefined])
32
- }, /*#__PURE__*/React.createElement("span", {
33
- className: cn('collapse', classes.toggle),
34
+ }, /*#__PURE__*/React.createElement("span", _extends({
34
35
  onClick: handleClickDesc
35
- }, isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(Collapse, {
36
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
37
+ className: cn('collapse', classes.toggle)
38
+ }), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(Collapse, {
36
39
  className: cn('content'),
37
40
  classNameContainer: cn('content-inner'),
38
41
  isOpened: isOpened
@@ -50,6 +53,9 @@ PropertyDescription.propTypes = {
50
53
  classes: PropTypes.shape({
51
54
  open: PropTypes.string,
52
55
  toggle: PropTypes.string
56
+ }),
57
+ dataAttrs: PropTypes.shape({
58
+ moreLink: PropTypes.objectOf(PropTypes.string.isRequired)
53
59
  })
54
60
  };
55
61
  export default PropertyDescription;
@@ -6,6 +6,9 @@ export declare type Desc = {
6
6
  toggle?: string;
7
7
  open?: string;
8
8
  };
9
+ dataAttrs?: {
10
+ moreLink?: Record<string, string>;
11
+ };
9
12
  };
10
13
  export declare type Item = {
11
14
  title?: string[] | React.ReactNode[];
@@ -159,7 +159,16 @@ h5 {
159
159
  display: flex;
160
160
  }
161
161
  .mfui-store-banner__qr-code {
162
+ -ms-flex-item-align: center;
163
+ align-self: center;
164
+ -webkit-box-sizing: border-box;
165
+ box-sizing: border-box;
166
+ width: 90px;
167
+ height: 90px;
162
168
  margin-right: 16px;
169
+ border: 1px solid var(--spbSky1);
170
+ border-radius: 8px;
171
+ background-color: var(--base);
163
172
  }
164
173
  @media screen and (max-width: 767px) {
165
174
  .mfui-store-banner__qr-code {
@@ -180,6 +189,9 @@ h5 {
180
189
  .mfui-store-banner__store-link {
181
190
  width: 136px;
182
191
  height: 40px;
192
+ margin-right: 8px;
193
+ margin-bottom: 10px;
194
+ margin-left: 8px;
183
195
  }
184
196
  @media screen and (max-width: 767px) {
185
197
  .mfui-store-banner__store-link {
@@ -187,9 +199,8 @@ h5 {
187
199
  height: 35px;
188
200
  }
189
201
  }
190
- .mfui-store-banner__store-link:not(:last-child) {
191
- margin-right: 16px;
192
- margin-bottom: 10px;
202
+ .mfui-store-banner__store-link:last-child {
203
+ margin-bottom: 0;
193
204
  }
194
205
  .mfui-store-banner__stores {
195
206
  display: -webkit-box;
@@ -208,6 +219,11 @@ h5 {
208
219
  justify-content: center;
209
220
  }
210
221
  }
222
+ @media screen and (min-width: 768px) {
223
+ .mfui-store-banner__stores {
224
+ margin-left: -8px;
225
+ }
226
+ }
211
227
  .mfui-store-banner__text {
212
228
  margin-bottom: 32px;
213
229
  }
@@ -229,16 +245,10 @@ h5 {
229
245
  -o-object-fit: contain;
230
246
  object-fit: contain;
231
247
  }
232
- @media screen and (min-width: 768px) and (max-width: 1023px) {
233
- .mfui-store-banner__links_three .mfui-store-banner__qr-code {
234
- width: 120px;
235
- height: 120px;
236
- }
237
- }
238
248
  @media screen and (min-width: 1280px) {
239
249
  .mfui-store-banner__links_three .mfui-store-banner__qr-code {
240
- max-width: 88px;
241
- max-height: 88px;
250
+ max-width: 90px;
251
+ max-height: 90px;
242
252
  }
243
253
  }
244
254
  .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores {
@@ -260,12 +270,6 @@ h5 {
260
270
  margin: 0 auto;
261
271
  }
262
272
  }
263
- .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link {
264
- margin-right: 16px;
265
- }
266
- .mfui-store-banner__links_three .mfui-store-banner__qr-code + .mfui-store-banner__stores .mfui-store-banner__store-link:not(:first-child) {
267
- margin-right: 0;
268
- }
269
273
  .mfui-store-banner__links_three .mfui-store-banner__store-link {
270
274
  width: 136px;
271
275
  height: 40px;
@@ -284,8 +288,3 @@ h5 {
284
288
  margin-bottom: 16px;
285
289
  }
286
290
  }
287
- @media screen and (max-width: 1023px) {
288
- .mfui-store-banner__links_three .mfui-store-banner__store-link:not(:first-child) {
289
- margin-right: 0;
290
- }
291
- }
@@ -59,6 +59,10 @@ export interface IStoreBannerProps {
59
59
  /** Дополнительные data атрибуты к внутренним элементам */
60
60
  dataAttrs?: {
61
61
  root?: Record<string, string>;
62
+ button?: Record<string, string>;
63
+ linkApple?: Record<string, string>;
64
+ linkGoogle?: Record<string, string>;
65
+ linkHuawei?: Record<string, string>;
62
66
  };
63
67
  }
64
68
  declare const StoreBanner: React.FC<IStoreBannerProps>;
@@ -17,7 +17,6 @@ export var DeviceMask = {
17
17
  BLACK_IPHONE: 'black-iphone',
18
18
  WHITE_IPHONE: 'white-iphone'
19
19
  };
20
- var DEFAULT_TEXT_BUTTON = 'Установите приложение';
21
20
  var cn = cnCreate('mfui-store-banner');
22
21
 
23
22
  var StoreBanner = function StoreBanner(_ref) {
@@ -35,11 +34,11 @@ var StoreBanner = function StoreBanner(_ref) {
35
34
  linkHuawei = _ref.linkHuawei,
36
35
  linkButton = _ref.linkButton,
37
36
  _ref$textButton = _ref.textButton,
38
- textButton = _ref$textButton === void 0 ? DEFAULT_TEXT_BUTTON : _ref$textButton,
37
+ textButton = _ref$textButton === void 0 ? 'Установите приложение' : _ref$textButton,
39
38
  qrCode = _ref.qrCode,
40
39
  imageSrc = _ref.imageSrc,
41
40
  _ref$theme = _ref.theme,
42
- theme = _ref$theme === void 0 ? Theme.DEFAULT : _ref$theme,
41
+ theme = _ref$theme === void 0 ? 'default' : _ref$theme,
43
42
  deviceMask = _ref.deviceMask,
44
43
  rootRef = _ref.rootRef,
45
44
  dataAttrs = _ref.dataAttrs,
@@ -81,6 +80,9 @@ var StoreBanner = function StoreBanner(_ref) {
81
80
  }), !linkButton && /*#__PURE__*/React.createElement("div", {
82
81
  className: cn('stores')
83
82
  }, linkApple && /*#__PURE__*/React.createElement(StoreButton, {
83
+ dataAttrs: {
84
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkApple
85
+ },
84
86
  theme: StoreButtonTheme.APP_STORE,
85
87
  href: linkApple,
86
88
  onClick: onClickApple,
@@ -88,6 +90,9 @@ var StoreBanner = function StoreBanner(_ref) {
88
90
  'app-store': true
89
91
  }, appleLinkClassName)
90
92
  }), linkGoogle && /*#__PURE__*/React.createElement(StoreButton, {
93
+ dataAttrs: {
94
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGoogle
95
+ },
91
96
  theme: StoreButtonTheme.GOOGLE_PLAY,
92
97
  href: linkGoogle,
93
98
  className: cn('store-link', {
@@ -95,6 +100,9 @@ var StoreBanner = function StoreBanner(_ref) {
95
100
  }, googleLinkClassName),
96
101
  onClick: onClickGoogle
97
102
  }), linkHuawei && /*#__PURE__*/React.createElement(StoreButton, {
103
+ dataAttrs: {
104
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkHuawei
105
+ },
98
106
  theme: StoreButtonTheme.HUAWEI_STORE,
99
107
  href: linkHuawei,
100
108
  className: cn('store-link', {
@@ -102,6 +110,9 @@ var StoreBanner = function StoreBanner(_ref) {
102
110
  }, huaweiLinkClassName),
103
111
  onClick: onClickHuawei
104
112
  })), linkButton && /*#__PURE__*/React.createElement(Button, {
113
+ dataAttrs: {
114
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
115
+ },
105
116
  className: cn('button'),
106
117
  href: linkButton,
107
118
  theme: theme === 'green' ? 'purple' : 'green'
@@ -141,7 +152,11 @@ StoreBanner.propTypes = {
141
152
  }), PropTypes.any])]),
142
153
  theme: PropTypes.oneOf(Object.values(Theme)),
143
154
  dataAttrs: PropTypes.shape({
144
- root: PropTypes.objectOf(PropTypes.string.isRequired)
155
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
156
+ button: PropTypes.objectOf(PropTypes.string.isRequired),
157
+ linkApple: PropTypes.objectOf(PropTypes.string.isRequired),
158
+ linkGoogle: PropTypes.objectOf(PropTypes.string.isRequired),
159
+ linkHuawei: PropTypes.objectOf(PropTypes.string.isRequired)
145
160
  })
146
161
  };
147
162
  export default StoreBanner;
@@ -7,7 +7,7 @@ export declare enum Theme {
7
7
  HUAWEI_STORE = "huawei-store"
8
8
  }
9
9
  declare type LinkPropTypes = React.ComponentProps<typeof Link>;
10
- export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick'> & {
10
+ export declare type Props = Required<Pick<LinkPropTypes, 'href'>> & Pick<LinkPropTypes, 'onClick' | 'dataAttrs'> & {
11
11
  /** Тема кнопки */
12
12
  theme: Theme;
13
13
  /** Дополнительный класс */
@@ -1,4 +1,21 @@
1
+ import "core-js/modules/es.symbol";
2
+ import "core-js/modules/es.array.index-of";
1
3
  import "core-js/modules/es.object.values";
4
+ import _extends from "@babel/runtime/helpers/extends";
5
+
6
+ var __rest = this && this.__rest || function (s, e) {
7
+ var t = {};
8
+
9
+ for (var p in s) {
10
+ if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
11
+ }
12
+
13
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
14
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
15
+ }
16
+ return t;
17
+ };
18
+
2
19
  import * as React from 'react';
3
20
  import { Link } from '@megafon/ui-core';
4
21
  import { cnCreate } from '@megafon/ui-helpers';
@@ -14,18 +31,20 @@ export var Theme;
14
31
 
15
32
  var cn = cnCreate('mfui-store-button');
16
33
 
17
- var StoreButton = function StoreButton(_ref) {
18
- var href = _ref.href,
19
- onClick = _ref.onClick,
20
- theme = _ref.theme,
21
- className = _ref.className;
22
- return /*#__PURE__*/React.createElement(Link, {
34
+ var StoreButton = function StoreButton(_a) {
35
+ var href = _a.href,
36
+ onClick = _a.onClick,
37
+ theme = _a.theme,
38
+ className = _a.className,
39
+ rest = __rest(_a, ["href", "onClick", "theme", "className"]);
40
+
41
+ return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
23
42
  href: href,
24
43
  onClick: onClick,
25
44
  className: cn({
26
45
  theme: theme
27
46
  }, className)
28
- });
47
+ }));
29
48
  };
30
49
 
31
50
  StoreButton.propTypes = {
@@ -128,7 +128,7 @@ h5 {
128
128
  line-height: 16px;
129
129
  height: 72px;
130
130
  padding-bottom: 12px;
131
- color: var(--stcBlack5);
131
+ color: var(--spbSky3);
132
132
  vertical-align: bottom;
133
133
  background-color: var(--spbSky0);
134
134
  }
@@ -14,3 +14,12 @@ h5 {
14
14
  .mfui-text-box_text-center {
15
15
  text-align: center;
16
16
  }
17
+ .mfui-text-box .mfui-text-with-icon {
18
+ margin: 24px 0;
19
+ }
20
+ .mfui-text-box .mfui-text-with-icon + .mfui-header {
21
+ margin-top: 32px;
22
+ }
23
+ .mfui-text-box .mfui-text-box-picture + .mfui-text-with-icon {
24
+ margin: 32px 0 24px;
25
+ }
@@ -0,0 +1,15 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-text-with-icon__header {
9
+ margin-bottom: 24px;
10
+ }
11
+ @media screen and (max-width: 767px) {
12
+ .mfui-text-with-icon__header {
13
+ text-align: center;
14
+ }
15
+ }
@@ -0,0 +1,19 @@
1
+ import * as React from 'react';
2
+ import { ITextWithIconItem } from './TextWithIconItem';
3
+ import './TextWithIcon.less';
4
+ export interface ITextWithIconProps {
5
+ /** Заголовок */
6
+ title?: string;
7
+ /** Ссылка на корневой элемент */
8
+ rootRef?: React.Ref<HTMLDivElement>;
9
+ /** Дополнительные data атрибуты к внутренним элементам */
10
+ dataAttrs?: {
11
+ root?: Record<string, string>;
12
+ };
13
+ /** Дополнительный класс для корневого элемента */
14
+ className?: string;
15
+ /** Допустимый дочерний компонент */
16
+ children: React.ReactElement<ITextWithIconItem>[] | React.ReactElement<ITextWithIconItem>;
17
+ }
18
+ declare const TextWithIcon: React.FC<ITextWithIconProps>;
19
+ export default TextWithIcon;
@@ -0,0 +1,40 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import * as React from 'react';
3
+ import { Header, Grid, GridColumn } from '@megafon/ui-core';
4
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
5
+ import * as PropTypes from 'prop-types';
6
+ import "./TextWithIcon.css";
7
+ var cn = cnCreate('mfui-text-with-icon');
8
+
9
+ var TextWithIcon = function TextWithIcon(_ref) {
10
+ var title = _ref.title,
11
+ rootRef = _ref.rootRef,
12
+ dataAttrs = _ref.dataAttrs,
13
+ className = _ref.className,
14
+ children = _ref.children;
15
+ return /*#__PURE__*/React.createElement("div", _extends({
16
+ className: cn([className]),
17
+ ref: rootRef
18
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(GridColumn, {
19
+ mobile: '12',
20
+ tablet: '7',
21
+ desktop: '6',
22
+ wide: '6'
23
+ }, title && /*#__PURE__*/React.createElement(Header, {
24
+ className: cn('header'),
25
+ as: "h5"
26
+ }, title), children)));
27
+ };
28
+
29
+ TextWithIcon.propTypes = {
30
+ title: PropTypes.string,
31
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
32
+ current: PropTypes.elementType
33
+ }), PropTypes.any])]),
34
+ dataAttrs: PropTypes.shape({
35
+ root: PropTypes.objectOf(PropTypes.string.isRequired)
36
+ }),
37
+ children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element.isRequired]).isRequired,
38
+ className: PropTypes.string
39
+ };
40
+ export default TextWithIcon;
@@ -0,0 +1,49 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-text-with-icon-item {
9
+ display: -webkit-box;
10
+ display: -ms-flexbox;
11
+ display: flex;
12
+ -webkit-box-align: center;
13
+ -ms-flex-align: center;
14
+ align-items: center;
15
+ }
16
+ @media screen and (max-width: 767px) {
17
+ .mfui-text-with-icon-item {
18
+ -webkit-box-orient: vertical;
19
+ -webkit-box-direction: normal;
20
+ -ms-flex-direction: column;
21
+ flex-direction: column;
22
+ }
23
+ }
24
+ .mfui-text-with-icon-item:not(:first-of-type) {
25
+ margin-top: 16px;
26
+ }
27
+ @media screen and (max-width: 767px) {
28
+ .mfui-text-with-icon-item:not(:first-of-type) {
29
+ margin-top: 24px;
30
+ }
31
+ }
32
+ .mfui-text-with-icon-item__svg-icon {
33
+ width: 40px;
34
+ min-width: 40px;
35
+ height: 40px;
36
+ min-height: 40px;
37
+ overflow: hidden;
38
+ }
39
+ @media screen and (min-width: 768px) {
40
+ .mfui-text-with-icon-item__svg-icon {
41
+ margin-right: 16px;
42
+ }
43
+ }
44
+ @media screen and (max-width: 767px) {
45
+ .mfui-text-with-icon-item__text {
46
+ margin-top: 12px;
47
+ text-align: center;
48
+ }
49
+ }
@@ -0,0 +1,18 @@
1
+ import * as React from 'react';
2
+ import './TextWithIconItem.less';
3
+ export interface ITextWithIconItem {
4
+ /** Текст */
5
+ text: string | string[];
6
+ /** Иконка */
7
+ icon: React.ReactNode;
8
+ /** Ссылка на корневой элемент */
9
+ rootRef?: React.Ref<HTMLDivElement>;
10
+ /** Дополнительные data атрибуты к внутренним элементам */
11
+ dataAttrs?: {
12
+ root?: Record<string, string>;
13
+ };
14
+ /** Дополнительный класс для корневого элемента */
15
+ className?: string;
16
+ }
17
+ declare const TextWithIconItem: React.FC<ITextWithIconItem>;
18
+ export default TextWithIconItem;
@@ -0,0 +1,35 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import * as React from 'react';
3
+ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
4
+ import * as PropTypes from 'prop-types';
5
+ import "./TextWithIconItem.css";
6
+ var cn = cnCreate('mfui-text-with-icon-item');
7
+
8
+ var TextWithIconItem = function TextWithIconItem(_ref) {
9
+ var text = _ref.text,
10
+ icon = _ref.icon,
11
+ rootRef = _ref.rootRef,
12
+ dataAttrs = _ref.dataAttrs,
13
+ className = _ref.className;
14
+ return /*#__PURE__*/React.createElement("div", _extends({
15
+ className: cn([className]),
16
+ ref: rootRef
17
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
18
+ className: cn('svg-icon')
19
+ }, icon), /*#__PURE__*/React.createElement("div", {
20
+ className: cn('text')
21
+ }, text));
22
+ };
23
+
24
+ TextWithIconItem.propTypes = {
25
+ text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired)]).isRequired,
26
+ icon: PropTypes.node.isRequired,
27
+ rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
28
+ current: PropTypes.elementType
29
+ }), PropTypes.any])]),
30
+ dataAttrs: PropTypes.shape({
31
+ root: PropTypes.objectOf(PropTypes.string.isRequired)
32
+ }),
33
+ className: PropTypes.string
34
+ };
35
+ export default TextWithIconItem;
@@ -52,9 +52,13 @@ export interface IContent {
52
52
  cost?: string;
53
53
  }
54
54
  interface IVideoBannerProps {
55
- /** Дата атрибуты для корневого элемента */
55
+ /** Дополнительные data атрибуты к внутренним элементам */
56
56
  dataAttrs?: {
57
- [key: string]: string;
57
+ root?: Record<string, string>;
58
+ breadcrumbs?: Record<string, string>;
59
+ breadcrumbsLink?: Record<string, string>;
60
+ button?: Record<string, string>;
61
+ link?: Record<string, string>;
58
62
  };
59
63
  /** Дополнительный класс корневого элемента */
60
64
  className?: string;
@@ -64,6 +68,7 @@ interface IVideoBannerProps {
64
68
  button?: string;
65
69
  link?: string;
66
70
  breadcrumbs?: string;
71
+ video?: string;
67
72
  };
68
73
  /** Ссылка на корневой элемент */
69
74
  rootRef?: Ref<HTMLDivElement>;
@@ -122,18 +122,24 @@ var VideoBanner = function VideoBanner(_ref2) {
122
122
  }, convert(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
123
123
  className: cn('btns-wrapper')
124
124
  }, buttonTitle && /*#__PURE__*/React.createElement(Button, {
125
+ dataAttrs: {
126
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
127
+ },
125
128
  className: cn(ClassName.BUTTON, [classes.button]),
126
129
  theme: buttonColor,
127
130
  href: buttonHref,
128
131
  onClick: onButtonClick,
129
132
  download: buttonDownload
130
133
  }, buttonTitle), linkTitle && /*#__PURE__*/React.createElement(TextLink, {
134
+ dataAttrs: {
135
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
136
+ },
131
137
  className: cn(ClassName.LINK, [classes.link]),
132
138
  href: linkUrl,
133
139
  download: linkDownload,
134
140
  onClick: onLinkClick
135
141
  }, linkTitle)))));
136
- }, [classes.button, classes.link]);
142
+ }, [classes.button, classes.link, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link]);
137
143
  var renderVideo = React.useCallback(function () {
138
144
  switch (videoType) {
139
145
  case VideoType.YOUTUBE:
@@ -165,7 +171,7 @@ var VideoBanner = function VideoBanner(_ref2) {
165
171
  /*#__PURE__*/
166
172
  // eslint-disable-next-line jsx-a11y/media-has-caption
167
173
  React.createElement("video", {
168
- className: cn('video'),
174
+ className: cn('video', [classes.video]),
169
175
  autoPlay: true,
170
176
  loop: true,
171
177
  muted: isMuted
@@ -181,7 +187,7 @@ var VideoBanner = function VideoBanner(_ref2) {
181
187
  return null;
182
188
  }
183
189
  }
184
- }, [videoType, videoSrc, isMuted]);
190
+ }, [videoType, videoSrc, isMuted, classes.video]);
185
191
  React.useEffect(function () {
186
192
  var getImageSrc = function getImageSrc() {
187
193
  var windowWidth = window.innerWidth;
@@ -213,12 +219,16 @@ var VideoBanner = function VideoBanner(_ref2) {
213
219
  window.removeEventListener('resize', resizeHandlerThrottled);
214
220
  };
215
221
  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
216
- return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
222
+ return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
217
223
  className: cn([className, classes.root]),
218
224
  ref: rootRef
219
225
  }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
220
226
  className: cn('wrapper')
221
227
  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
228
+ dataAttrs: {
229
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
230
+ link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
231
+ },
222
232
  className: cn('breadcrumbs'),
223
233
  items: breadcrumbs,
224
234
  color: content === null || content === void 0 ? void 0 : content.textColor,
@@ -234,7 +244,13 @@ var VideoBanner = function VideoBanner(_ref2) {
234
244
  };
235
245
 
236
246
  VideoBanner.propTypes = {
237
- dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
247
+ dataAttrs: PropTypes.shape({
248
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
249
+ breadcrumbs: PropTypes.objectOf(PropTypes.string.isRequired),
250
+ breadcrumbsLink: PropTypes.objectOf(PropTypes.string.isRequired),
251
+ button: PropTypes.objectOf(PropTypes.string.isRequired),
252
+ link: PropTypes.objectOf(PropTypes.string.isRequired)
253
+ }),
238
254
  className: PropTypes.string,
239
255
  classes: PropTypes.shape({
240
256
  root: PropTypes.string,
@@ -6,7 +6,7 @@ export interface IContent {
6
6
  /** Текст-описание */
7
7
  description: string | React.ReactNode[] | React.ReactNode;
8
8
  /** Текст кнопки */
9
- buttonTitle: string;
9
+ buttonTitle?: string;
10
10
  /** Добавляет атрибут download для тега <a> компонента Button */
11
11
  buttonDownload?: boolean;
12
12
  /** Ссылка на кнопке */
@@ -20,9 +20,10 @@ export declare const VideoTypes: {
20
20
  };
21
21
  declare type VideoType = typeof VideoTypes[keyof typeof VideoTypes];
22
22
  export interface IVideoBlockProps {
23
- /** Дата атрибуты для корневого элемента */
23
+ /** Дополнительные data атрибуты к внутренним элементам */
24
24
  dataAttrs?: {
25
- [key: string]: string;
25
+ root?: Record<string, string>;
26
+ button?: Record<string, string>;
26
27
  };
27
28
  /** Дополнительный класс корневого элемента */
28
29
  className?: string;