@megafon/ui-shared 3.0.3 → 3.1.2

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 (74) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/dist/es/components/AccordionBox/AccordionBox.d.ts +5 -0
  3. package/dist/es/components/AccordionBox/AccordionBox.js +6 -1
  4. package/dist/es/components/BenefitsIcons/BenefitsIcons.js +1 -1
  5. package/dist/es/components/Breadcrumbs/Breadcrumbs.css +2 -2
  6. package/dist/es/components/Breadcrumbs/Breadcrumbs.d.ts +7 -2
  7. package/dist/es/components/Breadcrumbs/Breadcrumbs.js +48 -18
  8. package/dist/es/components/ButtonBanner/ButtonBanner.d.ts +1 -0
  9. package/dist/es/components/ButtonBanner/ButtonBanner.js +5 -1
  10. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.d.ts +2 -0
  11. package/dist/es/components/ButtonLinkBox/ButtonLinkBox.js +9 -1
  12. package/dist/es/components/Card/Card.d.ts +4 -2
  13. package/dist/es/components/Card/Card.js +16 -6
  14. package/dist/es/components/DownloadLinks/DownloadLink.css +1 -1
  15. package/dist/es/components/DownloadLinks/DownloadLink.d.ts +5 -0
  16. package/dist/es/components/DownloadLinks/DownloadLink.js +14 -6
  17. package/dist/es/components/Instructions/Instructions.d.ts +7 -0
  18. package/dist/es/components/Instructions/Instructions.js +55 -45
  19. package/dist/es/components/PageTitle/PageTitle.d.ts +6 -0
  20. package/dist/es/components/PageTitle/PageTitle.js +15 -4
  21. package/dist/es/components/Partners/Partners.d.ts +5 -4
  22. package/dist/es/components/Partners/Partners.js +15 -7
  23. package/dist/es/components/Property/Property.d.ts +3 -2
  24. package/dist/es/components/Property/Property.js +9 -3
  25. package/dist/es/components/Property/PropertyDescription.js +11 -5
  26. package/dist/es/components/Property/types.d.ts +3 -0
  27. package/dist/es/components/StoreBanner/StoreBanner.d.ts +4 -0
  28. package/dist/es/components/StoreBanner/StoreBanner.js +19 -4
  29. package/dist/es/components/StoreButton/StoreButton.d.ts +1 -1
  30. package/dist/es/components/StoreButton/StoreButton.js +26 -7
  31. package/dist/es/components/Table/Table.css +1 -1
  32. package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +1 -1
  33. package/dist/es/components/TextWithIcon/TextWithIconItem.js +1 -1
  34. package/dist/es/components/VideoBanner/VideoBanner.d.ts +7 -2
  35. package/dist/es/components/VideoBanner/VideoBanner.js +21 -5
  36. package/dist/es/components/VideoBlock/VideoBlock.d.ts +3 -2
  37. package/dist/es/components/VideoBlock/VideoBlock.js +9 -3
  38. package/dist/lib/components/AccordionBox/AccordionBox.d.ts +5 -0
  39. package/dist/lib/components/AccordionBox/AccordionBox.js +6 -1
  40. package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +1 -1
  41. package/dist/lib/components/Breadcrumbs/Breadcrumbs.css +2 -2
  42. package/dist/lib/components/Breadcrumbs/Breadcrumbs.d.ts +7 -2
  43. package/dist/lib/components/Breadcrumbs/Breadcrumbs.js +49 -17
  44. package/dist/lib/components/ButtonBanner/ButtonBanner.d.ts +1 -0
  45. package/dist/lib/components/ButtonBanner/ButtonBanner.js +5 -1
  46. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.d.ts +2 -0
  47. package/dist/lib/components/ButtonLinkBox/ButtonLinkBox.js +9 -1
  48. package/dist/lib/components/Card/Card.d.ts +4 -2
  49. package/dist/lib/components/Card/Card.js +16 -6
  50. package/dist/lib/components/DownloadLinks/DownloadLink.css +1 -1
  51. package/dist/lib/components/DownloadLinks/DownloadLink.d.ts +5 -0
  52. package/dist/lib/components/DownloadLinks/DownloadLink.js +13 -5
  53. package/dist/lib/components/Instructions/Instructions.d.ts +7 -0
  54. package/dist/lib/components/Instructions/Instructions.js +55 -44
  55. package/dist/lib/components/PageTitle/PageTitle.d.ts +6 -0
  56. package/dist/lib/components/PageTitle/PageTitle.js +17 -5
  57. package/dist/lib/components/Partners/Partners.d.ts +5 -4
  58. package/dist/lib/components/Partners/Partners.js +15 -7
  59. package/dist/lib/components/Property/Property.d.ts +3 -2
  60. package/dist/lib/components/Property/Property.js +9 -3
  61. package/dist/lib/components/Property/PropertyDescription.js +11 -4
  62. package/dist/lib/components/Property/types.d.ts +3 -0
  63. package/dist/lib/components/StoreBanner/StoreBanner.d.ts +4 -0
  64. package/dist/lib/components/StoreBanner/StoreBanner.js +19 -4
  65. package/dist/lib/components/StoreButton/StoreButton.d.ts +1 -1
  66. package/dist/lib/components/StoreButton/StoreButton.js +30 -9
  67. package/dist/lib/components/Table/Table.css +1 -1
  68. package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +1 -1
  69. package/dist/lib/components/TextWithIcon/TextWithIconItem.js +1 -1
  70. package/dist/lib/components/VideoBanner/VideoBanner.d.ts +7 -2
  71. package/dist/lib/components/VideoBanner/VideoBanner.js +21 -5
  72. package/dist/lib/components/VideoBlock/VideoBlock.d.ts +3 -2
  73. package/dist/lib/components/VideoBlock/VideoBlock.js +9 -3
  74. package/package.json +5 -5
@@ -57,6 +57,8 @@ var Partners = function Partners(_ref) {
57
57
  onNextClick = _ref.onNextClick,
58
58
  onPrevClick = _ref.onPrevClick;
59
59
  var renderItem = React.useCallback(function (item) {
60
+ var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
61
+
60
62
  if (!item) {
61
63
  return null;
62
64
  }
@@ -65,10 +67,13 @@ var Partners = function Partners(_ref) {
65
67
  href = item.href,
66
68
  alt = item.alt;
67
69
  return /*#__PURE__*/React.createElement(_uiCore.Tile, {
68
- className: cn('tile'),
69
70
  href: href,
70
71
  shadowLevel: "low",
71
- isInteractive: !!href
72
+ isInteractive: !!href,
73
+ className: cn('tile'),
74
+ dataAttrs: {
75
+ root: (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, index + 1))
76
+ }
72
77
  }, /*#__PURE__*/React.createElement("div", {
73
78
  className: cn('tile-inner', [itemClass])
74
79
  }, /*#__PURE__*/React.createElement("div", {
@@ -78,7 +83,7 @@ var Partners = function Partners(_ref) {
78
83
  alt: alt,
79
84
  className: cn('tile-img')
80
85
  }))));
81
- }, [itemClass]);
86
+ }, [itemClass, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item]);
82
87
  var renderGrid = React.useCallback(function () {
83
88
  return /*#__PURE__*/React.createElement(_uiCore.Grid, {
84
89
  guttersLeft: "medium",
@@ -88,7 +93,7 @@ var Partners = function Partners(_ref) {
88
93
  key: i + item.src,
89
94
  all: "3",
90
95
  mobile: "6"
91
- }, renderItem(item));
96
+ }, renderItem(item, i));
92
97
  }));
93
98
  }, [items, renderItem]);
94
99
  var renderCarousel = React.useCallback(function () {
@@ -104,13 +109,13 @@ var Partners = function Partners(_ref) {
104
109
  return /*#__PURE__*/React.createElement("div", {
105
110
  key: i + item.src,
106
111
  className: cn('slide')
107
- }, renderItem(item), renderItem(bottomRow[i]));
112
+ }, renderItem(item, i), renderItem(bottomRow[i], i));
108
113
  }));
109
114
  }, [items, onChange, onNextClick, onPrevClick, renderItem]);
110
115
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
111
116
  ref: rootRef,
112
117
  className: cn([root, className])
113
- }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
118
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), items.length > MAX_GRID_ITEMS_LENGTH ? renderCarousel() : renderGrid());
114
119
  };
115
120
 
116
121
  Partners.propTypes = {
@@ -121,7 +126,10 @@ Partners.propTypes = {
121
126
  root: PropTypes.string,
122
127
  itemClass: PropTypes.string
123
128
  }),
124
- dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
129
+ dataAttrs: PropTypes.shape({
130
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
131
+ item: PropTypes.objectOf(PropTypes.string.isRequired)
132
+ }),
125
133
  className: PropTypes.string,
126
134
  items: PropTypes.arrayOf(PropTypes.shape({
127
135
  href: PropTypes.string,
@@ -18,9 +18,10 @@ export interface IProperty {
18
18
  icon?: React.ReactNode;
19
19
  /** Растягивание компонента на всю доступную ширину */
20
20
  fullWidth?: boolean;
21
- /** Дата атрибуты для корневого элемента */
21
+ /** Дополнительные data атрибуты к внутренним элементам */
22
22
  dataAttrs?: {
23
- [key: string]: string;
23
+ root?: Record<string, string>;
24
+ moreLink?: Record<string, string>;
24
25
  };
25
26
  /** Дополнительные классы для внутренних элементов */
26
27
  classes?: {
@@ -66,13 +66,16 @@ var Property = function Property(_ref) {
66
66
  }, /*#__PURE__*/_react["default"].createElement(_PropertyDescription["default"], {
67
67
  value: value,
68
68
  isCollapsible: isCollapsible,
69
+ dataAttrs: {
70
+ moreLink: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink
71
+ },
69
72
  classes: {
70
73
  open: classes.openedDescription,
71
74
  toggle: classes.toggleDescription
72
75
  }
73
76
  }));
74
77
  });
75
- }, [classes.openedDescription, classes.toggleDescription]);
78
+ }, [classes.openedDescription, classes.toggleDescription, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink]);
76
79
 
77
80
  var getColumnConfig = _react["default"].useCallback(function () {
78
81
  return fullWidth ? {
@@ -90,7 +93,7 @@ var Property = function Property(_ref) {
90
93
  'border-bottom': borderBottom
91
94
  }, [className]),
92
95
  ref: rootRef
93
- }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, null, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, getColumnConfig(), /*#__PURE__*/_react["default"].createElement("div", {
96
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, null, /*#__PURE__*/_react["default"].createElement(_uiCore.GridColumn, getColumnConfig(), /*#__PURE__*/_react["default"].createElement("div", {
94
97
  className: cn('wrapper')
95
98
  }, badge && /*#__PURE__*/_react["default"].createElement("div", {
96
99
  className: cn('badge-wrapper')
@@ -141,7 +144,10 @@ Property.propTypes = {
141
144
  mergedValue: _propTypes["default"].string,
142
145
  icon: _propTypes["default"].node,
143
146
  fullWidth: _propTypes["default"].bool,
144
- dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
147
+ dataAttrs: _propTypes["default"].shape({
148
+ root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
149
+ moreLink: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
150
+ }),
145
151
  classes: _propTypes["default"].shape({
146
152
  title: _propTypes["default"].string,
147
153
  openedDescription: _propTypes["default"].string,
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports["default"] = void 0;
9
9
 
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
10
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
13
 
12
14
  var React = _interopRequireWildcard(require("react"));
@@ -33,7 +35,8 @@ var PropertyDescription = function PropertyDescription(_ref) {
33
35
  _ref$isCollapsible = _ref.isCollapsible,
34
36
  isCollapsible = _ref$isCollapsible === void 0 ? false : _ref$isCollapsible,
35
37
  _ref$classes = _ref.classes,
36
- classes = _ref$classes === void 0 ? {} : _ref$classes;
38
+ classes = _ref$classes === void 0 ? {} : _ref$classes,
39
+ dataAttrs = _ref.dataAttrs;
37
40
 
38
41
  var _React$useState = React.useState(false),
39
42
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -47,10 +50,11 @@ var PropertyDescription = function PropertyDescription(_ref) {
47
50
  if (isCollapsible) {
48
51
  return /*#__PURE__*/React.createElement("div", {
49
52
  className: cn([isOpened ? classes.open : undefined])
50
- }, /*#__PURE__*/React.createElement("span", {
51
- className: cn('collapse', classes.toggle),
53
+ }, /*#__PURE__*/React.createElement("span", (0, _extends2["default"])({
52
54
  onClick: handleClickDesc
53
- }, isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(_uiCore.Collapse, {
55
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.moreLink), {
56
+ className: cn('collapse', classes.toggle)
57
+ }), isOpened ? 'Скрыть' : 'Подробнее'), /*#__PURE__*/React.createElement(_uiCore.Collapse, {
54
58
  className: cn('content'),
55
59
  classNameContainer: cn('content-inner'),
56
60
  isOpened: isOpened
@@ -68,6 +72,9 @@ PropertyDescription.propTypes = {
68
72
  classes: _propTypes["default"].shape({
69
73
  open: _propTypes["default"].string,
70
74
  toggle: _propTypes["default"].string
75
+ }),
76
+ dataAttrs: _propTypes["default"].shape({
77
+ moreLink: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
71
78
  })
72
79
  };
73
80
  var _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[];
@@ -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>;
@@ -40,7 +40,6 @@ var DeviceMask = {
40
40
  WHITE_IPHONE: 'white-iphone'
41
41
  };
42
42
  exports.DeviceMask = DeviceMask;
43
- var DEFAULT_TEXT_BUTTON = 'Установите приложение';
44
43
  var cn = (0, _uiHelpers.cnCreate)('mfui-store-banner');
45
44
 
46
45
  var StoreBanner = function StoreBanner(_ref) {
@@ -58,11 +57,11 @@ var StoreBanner = function StoreBanner(_ref) {
58
57
  linkHuawei = _ref.linkHuawei,
59
58
  linkButton = _ref.linkButton,
60
59
  _ref$textButton = _ref.textButton,
61
- textButton = _ref$textButton === void 0 ? DEFAULT_TEXT_BUTTON : _ref$textButton,
60
+ textButton = _ref$textButton === void 0 ? 'Установите приложение' : _ref$textButton,
62
61
  qrCode = _ref.qrCode,
63
62
  imageSrc = _ref.imageSrc,
64
63
  _ref$theme = _ref.theme,
65
- theme = _ref$theme === void 0 ? Theme.DEFAULT : _ref$theme,
64
+ theme = _ref$theme === void 0 ? 'default' : _ref$theme,
66
65
  deviceMask = _ref.deviceMask,
67
66
  rootRef = _ref.rootRef,
68
67
  dataAttrs = _ref.dataAttrs,
@@ -104,6 +103,9 @@ var StoreBanner = function StoreBanner(_ref) {
104
103
  }), !linkButton && /*#__PURE__*/React.createElement("div", {
105
104
  className: cn('stores')
106
105
  }, linkApple && /*#__PURE__*/React.createElement(_StoreButton["default"], {
106
+ dataAttrs: {
107
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkApple
108
+ },
107
109
  theme: _StoreButton.Theme.APP_STORE,
108
110
  href: linkApple,
109
111
  onClick: onClickApple,
@@ -111,6 +113,9 @@ var StoreBanner = function StoreBanner(_ref) {
111
113
  'app-store': true
112
114
  }, appleLinkClassName)
113
115
  }), linkGoogle && /*#__PURE__*/React.createElement(_StoreButton["default"], {
116
+ dataAttrs: {
117
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkGoogle
118
+ },
114
119
  theme: _StoreButton.Theme.GOOGLE_PLAY,
115
120
  href: linkGoogle,
116
121
  className: cn('store-link', {
@@ -118,6 +123,9 @@ var StoreBanner = function StoreBanner(_ref) {
118
123
  }, googleLinkClassName),
119
124
  onClick: onClickGoogle
120
125
  }), linkHuawei && /*#__PURE__*/React.createElement(_StoreButton["default"], {
126
+ dataAttrs: {
127
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.linkHuawei
128
+ },
121
129
  theme: _StoreButton.Theme.HUAWEI_STORE,
122
130
  href: linkHuawei,
123
131
  className: cn('store-link', {
@@ -125,6 +133,9 @@ var StoreBanner = function StoreBanner(_ref) {
125
133
  }, huaweiLinkClassName),
126
134
  onClick: onClickHuawei
127
135
  })), linkButton && /*#__PURE__*/React.createElement(_uiCore.Button, {
136
+ dataAttrs: {
137
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
138
+ },
128
139
  className: cn('button'),
129
140
  href: linkButton,
130
141
  theme: theme === 'green' ? 'purple' : 'green'
@@ -164,7 +175,11 @@ StoreBanner.propTypes = {
164
175
  }), _propTypes["default"].any])]),
165
176
  theme: _propTypes["default"].oneOf(Object.values(Theme)),
166
177
  dataAttrs: _propTypes["default"].shape({
167
- root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
178
+ root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
179
+ button: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
180
+ linkApple: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
181
+ linkGoogle: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
182
+ linkHuawei: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
168
183
  })
169
184
  };
170
185
  var _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
  /** Дополнительный класс */
@@ -7,8 +7,14 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports["default"] = exports.Theme = void 0;
9
9
 
10
+ require("core-js/modules/es.symbol");
11
+
12
+ require("core-js/modules/es.array.index-of");
13
+
10
14
  require("core-js/modules/es.object.values");
11
15
 
16
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
17
+
12
18
  var React = _interopRequireWildcard(require("react"));
13
19
 
14
20
  var _uiCore = require("@megafon/ui-core");
@@ -17,12 +23,25 @@ var _uiHelpers = require("@megafon/ui-helpers");
17
23
 
18
24
  var _propTypes = _interopRequireDefault(require("prop-types"));
19
25
 
20
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
-
22
26
  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
23
27
 
24
28
  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
29
 
30
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
+
32
+ var __rest = void 0 && (void 0).__rest || function (s, e) {
33
+ var t = {};
34
+
35
+ for (var p in s) {
36
+ if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
37
+ }
38
+
39
+ if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
40
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
41
+ }
42
+ return t;
43
+ };
44
+
26
45
  var Theme;
27
46
  exports.Theme = Theme;
28
47
 
@@ -34,18 +53,20 @@ exports.Theme = Theme;
34
53
 
35
54
  var cn = (0, _uiHelpers.cnCreate)('mfui-store-button');
36
55
 
37
- var StoreButton = function StoreButton(_ref) {
38
- var href = _ref.href,
39
- onClick = _ref.onClick,
40
- theme = _ref.theme,
41
- className = _ref.className;
42
- return /*#__PURE__*/React.createElement(_uiCore.Link, {
56
+ var StoreButton = function StoreButton(_a) {
57
+ var href = _a.href,
58
+ onClick = _a.onClick,
59
+ theme = _a.theme,
60
+ className = _a.className,
61
+ rest = __rest(_a, ["href", "onClick", "theme", "className"]);
62
+
63
+ return /*#__PURE__*/React.createElement(_uiCore.Link, (0, _extends2["default"])({}, rest, {
43
64
  href: href,
44
65
  onClick: onClick,
45
66
  className: cn({
46
67
  theme: theme
47
68
  }, className)
48
- });
69
+ }));
49
70
  };
50
71
 
51
72
  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
  }
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import './TextWithIconItem.less';
3
3
  export interface ITextWithIconItem {
4
4
  /** Текст */
5
- text: string;
5
+ text: string | string[];
6
6
  /** Иконка */
7
7
  icon: React.ReactNode;
8
8
  /** Ссылка на корневой элемент */
@@ -40,7 +40,7 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
40
40
  };
41
41
 
42
42
  TextWithIconItem.propTypes = {
43
- text: PropTypes.string.isRequired,
43
+ text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired)]).isRequired,
44
44
  icon: PropTypes.node.isRequired,
45
45
  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
46
46
  current: PropTypes.elementType
@@ -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>;
@@ -155,18 +155,24 @@ var VideoBanner = function VideoBanner(_ref2) {
155
155
  }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/_react["default"].createElement("div", {
156
156
  className: cn('btns-wrapper')
157
157
  }, buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
158
+ dataAttrs: {
159
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
160
+ },
158
161
  className: cn(ClassName.BUTTON, [classes.button]),
159
162
  theme: buttonColor,
160
163
  href: buttonHref,
161
164
  onClick: onButtonClick,
162
165
  download: buttonDownload
163
166
  }, buttonTitle), linkTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
167
+ dataAttrs: {
168
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link
169
+ },
164
170
  className: cn(ClassName.LINK, [classes.link]),
165
171
  href: linkUrl,
166
172
  download: linkDownload,
167
173
  onClick: onLinkClick
168
174
  }, linkTitle)))));
169
- }, [classes.button, classes.link]);
175
+ }, [classes.button, classes.link, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link]);
170
176
 
171
177
  var renderVideo = _react["default"].useCallback(function () {
172
178
  switch (videoType) {
@@ -199,7 +205,7 @@ var VideoBanner = function VideoBanner(_ref2) {
199
205
  /*#__PURE__*/
200
206
  // eslint-disable-next-line jsx-a11y/media-has-caption
201
207
  _react["default"].createElement("video", {
202
- className: cn('video'),
208
+ className: cn('video', [classes.video]),
203
209
  autoPlay: true,
204
210
  loop: true,
205
211
  muted: isMuted
@@ -215,7 +221,7 @@ var VideoBanner = function VideoBanner(_ref2) {
215
221
  return null;
216
222
  }
217
223
  }
218
- }, [videoType, videoSrc, isMuted]);
224
+ }, [videoType, videoSrc, isMuted, classes.video]);
219
225
 
220
226
  _react["default"].useEffect(function () {
221
227
  var getImageSrc = function getImageSrc() {
@@ -249,12 +255,16 @@ var VideoBanner = function VideoBanner(_ref2) {
249
255
  };
250
256
  }, [imageDesktop, imageDesktopWide, imageMobile, imageTablet]);
251
257
 
252
- return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
258
+ return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
253
259
  className: cn([className, classes.root]),
254
260
  ref: rootRef
255
261
  }), /*#__PURE__*/_react["default"].createElement(_uiCore.ContentArea, null, /*#__PURE__*/_react["default"].createElement("div", {
256
262
  className: cn('wrapper')
257
263
  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {
264
+ dataAttrs: {
265
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
266
+ link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
267
+ },
258
268
  className: cn('breadcrumbs'),
259
269
  items: breadcrumbs,
260
270
  color: content === null || content === void 0 ? void 0 : content.textColor,
@@ -270,7 +280,13 @@ var VideoBanner = function VideoBanner(_ref2) {
270
280
  };
271
281
 
272
282
  VideoBanner.propTypes = {
273
- dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
283
+ dataAttrs: PropTypes.shape({
284
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
285
+ breadcrumbs: PropTypes.objectOf(PropTypes.string.isRequired),
286
+ breadcrumbsLink: PropTypes.objectOf(PropTypes.string.isRequired),
287
+ button: PropTypes.objectOf(PropTypes.string.isRequired),
288
+ link: PropTypes.objectOf(PropTypes.string.isRequired)
289
+ }),
274
290
  className: PropTypes.string,
275
291
  classes: PropTypes.shape({
276
292
  root: PropTypes.string,
@@ -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;
@@ -102,12 +102,15 @@ var VideoBlock = function VideoBlock(_ref) {
102
102
  }, title), /*#__PURE__*/_react["default"].createElement("div", {
103
103
  className: cn('description', [classes.description])
104
104
  }, description), buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
105
+ dataAttrs: {
106
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
107
+ },
105
108
  className: cn('button', [classes.button]),
106
109
  href: href,
107
110
  onClick: onButtonClick,
108
111
  download: buttonDownload
109
112
  }, buttonTitle));
110
- }, [classes.button, classes.description]);
113
+ }, [classes.button, classes.description, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
111
114
 
112
115
  var renderGridColumns = _react["default"].useCallback(function () {
113
116
  var columns = [];
@@ -137,7 +140,7 @@ var VideoBlock = function VideoBlock(_ref) {
137
140
  return columns;
138
141
  }, [renderContent, renderVideo, content]);
139
142
 
140
- return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
143
+ return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
141
144
  className: cn([className, classes.root]),
142
145
  ref: rootRef
143
146
  }), /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
@@ -147,7 +150,10 @@ var VideoBlock = function VideoBlock(_ref) {
147
150
  };
148
151
 
149
152
  VideoBlock.propTypes = {
150
- dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
153
+ dataAttrs: _propTypes["default"].shape({
154
+ root: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
155
+ button: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired)
156
+ }),
151
157
  className: _propTypes["default"].string,
152
158
  classes: _propTypes["default"].shape({
153
159
  root: _propTypes["default"].string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "3.0.3",
3
+ "version": "3.1.2",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -52,7 +52,7 @@
52
52
  "@babel/preset-env": "^7.8.6",
53
53
  "@babel/preset-react": "^7.8.3",
54
54
  "@babel/preset-typescript": "^7.8.3",
55
- "@megafon/ui-icons": "^1.0.1",
55
+ "@megafon/ui-icons": "^1.1.0",
56
56
  "@svgr/core": "^2.4.1",
57
57
  "@types/enzyme": "^3.10.5",
58
58
  "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -82,13 +82,13 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@babel/runtime": "^7.8.4",
85
- "@megafon/ui-core": "^3.0.2",
86
- "@megafon/ui-helpers": "^2.0.1",
85
+ "@megafon/ui-core": "^3.3.0",
86
+ "@megafon/ui-helpers": "^2.1.0",
87
87
  "core-js": "^3.6.4",
88
88
  "htmr": "^0.9.2",
89
89
  "lodash.throttle": "^4.1.1",
90
90
  "prop-types": "^15.7.2",
91
91
  "swiper": "^6.5.6"
92
92
  },
93
- "gitHead": "a2f3604929705854de77505d3684640adf2dd8a5"
93
+ "gitHead": "e1007fdaa6e0dd724388f6c5ebae4448cf2732c8"
94
94
  }