@megafon/ui-shared 4.0.3 → 4.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 (4) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/es/components/VideoBanner/VideoBanner.js +78 -42
  3. package/dist/lib/components/VideoBanner/VideoBanner.js +77 -43
  4. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [4.1.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.0.3...@megafon/ui-shared@4.1.0) (2022-10-04)
7
+
8
+
9
+ ### Features
10
+
11
+ * **videobanner:** allow using html tag: br, &nbsp, b, font color, a href in title and description ([31cf562](https://github.com/MegafonWebLab/megafon-ui/commit/31cf562b34f9d6eb30a43fccd1123fdc67393935))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [4.0.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.0.2...@megafon/ui-shared@4.0.3) (2022-09-16)
7
18
 
8
19
  **Note:** Version bump only for package @megafon/ui-shared
package/dist/es/components/VideoBanner/VideoBanner.js CHANGED
@@ -3,8 +3,8 @@ import "core-js/modules/es.symbol.description";
3
3
  import "core-js/modules/es.array.concat";
4
4
  import "core-js/modules/es.object.values";
5
5
  import "core-js/modules/es.string.link";
6
- import _extends from "@babel/runtime/helpers/extends";
7
6
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
7
+ import _extends from "@babel/runtime/helpers/extends";
8
8
  import React from 'react';
9
9
  import { Button, Header, ContentArea, TextLink, Grid, GridColumn } from '@megafon/ui-core';
10
10
  import { breakpoints, cnCreate, filterDataAttrs, convert } from '@megafon/ui-helpers';
@@ -33,6 +33,42 @@ var typographyConfig = {
33
33
  }
34
34
  }
35
35
  };
36
+
37
+ var textConfig = _extends(_extends({}, typographyConfig), {
38
+ br: {
39
+ component: function component() {
40
+ return /*#__PURE__*/React.createElement("br", null);
41
+ }
42
+ },
43
+ '&nbsp': {
44
+ component: function component() {
45
+ return /*#__PURE__*/React.createElement(React.Fragment, null, "String.fromCharCode(160)");
46
+ }
47
+ },
48
+ a: {
49
+ component: function component(_ref2) {
50
+ var href = _ref2.href,
51
+ children = _ref2.children;
52
+ return /*#__PURE__*/React.createElement("a", {
53
+ href: href
54
+ }, children);
55
+ },
56
+ props: ['href']
57
+ },
58
+ font: {
59
+ component: function component(_ref3) {
60
+ var color = _ref3.color,
61
+ children = _ref3.children;
62
+ return /*#__PURE__*/React.createElement("span", {
63
+ style: {
64
+ color: color
65
+ }
66
+ }, children);
67
+ },
68
+ props: ['color']
69
+ }
70
+ });
71
+
36
72
  export var VideoType = {
37
73
  YOUTUBE: 'youtube',
38
74
  VIDEO: 'video'
@@ -46,26 +82,26 @@ export var TextColor = {
46
82
  WHITE: 'white'
47
83
  };
48
84
 
49
- var VideoBanner = function VideoBanner(_ref2) {
50
- var dataAttrs = _ref2.dataAttrs,
51
- className = _ref2.className,
52
- _ref2$classes = _ref2.classes,
53
- classes = _ref2$classes === void 0 ? {} : _ref2$classes,
54
- rootRef = _ref2.rootRef,
55
- videoSrc = _ref2.videoSrc,
56
- videoType = _ref2.videoType,
57
- imageMobile = _ref2.imageMobile,
58
- imageTablet = _ref2.imageTablet,
59
- _ref2$imageDesktop = _ref2.imageDesktop,
60
- imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
61
- _ref2$imageDesktopWid = _ref2.imageDesktopWide,
62
- imageDesktopWide = _ref2$imageDesktopWid === void 0 ? '' : _ref2$imageDesktopWid,
63
- content = _ref2.content,
64
- _ref2$isMuted = _ref2.isMuted,
65
- isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
66
- breadcrumbs = _ref2.breadcrumbs,
67
- _ref2$videoMobile = _ref2.videoMobile,
68
- videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
85
+ var VideoBanner = function VideoBanner(_ref4) {
86
+ var dataAttrs = _ref4.dataAttrs,
87
+ className = _ref4.className,
88
+ _ref4$classes = _ref4.classes,
89
+ classes = _ref4$classes === void 0 ? {} : _ref4$classes,
90
+ rootRef = _ref4.rootRef,
91
+ videoSrc = _ref4.videoSrc,
92
+ videoType = _ref4.videoType,
93
+ imageMobile = _ref4.imageMobile,
94
+ imageTablet = _ref4.imageTablet,
95
+ _ref4$imageDesktop = _ref4.imageDesktop,
96
+ imageDesktop = _ref4$imageDesktop === void 0 ? '' : _ref4$imageDesktop,
97
+ _ref4$imageDesktopWid = _ref4.imageDesktopWide,
98
+ imageDesktopWide = _ref4$imageDesktopWid === void 0 ? '' : _ref4$imageDesktopWid,
99
+ content = _ref4.content,
100
+ _ref4$isMuted = _ref4.isMuted,
101
+ isMuted = _ref4$isMuted === void 0 ? true : _ref4$isMuted,
102
+ breadcrumbs = _ref4.breadcrumbs,
103
+ _ref4$videoMobile = _ref4.videoMobile,
104
+ videoMobile = _ref4$videoMobile === void 0 ? false : _ref4$videoMobile;
69
105
 
70
106
  var _React$useState = React.useState(true),
71
107
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -74,25 +110,25 @@ var VideoBanner = function VideoBanner(_ref2) {
74
110
 
75
111
  var isVideoData = !!videoSrc && !!videoType;
76
112
  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
77
- var renderContent = React.useCallback(function (_ref3) {
78
- var title = _ref3.title,
79
- description = _ref3.description,
80
- buttonTitle = _ref3.buttonTitle,
81
- buttonHref = _ref3.buttonHref,
82
- buttonTarget = _ref3.buttonTarget,
83
- buttonDownload = _ref3.buttonDownload,
84
- _ref3$buttonColor = _ref3.buttonColor,
85
- buttonColor = _ref3$buttonColor === void 0 ? ButtonColor.GREEN : _ref3$buttonColor,
86
- onButtonClick = _ref3.onButtonClick,
87
- onLinkClick = _ref3.onLinkClick,
88
- _ref3$textColor = _ref3.textColor,
89
- textColor = _ref3$textColor === void 0 ? TextColor.BLACK : _ref3$textColor,
90
- textColorMobile = _ref3.textColorMobile,
91
- linkTitle = _ref3.linkTitle,
92
- linkUrl = _ref3.linkUrl,
93
- linkTarget = _ref3.linkTarget,
94
- linkDownload = _ref3.linkDownload,
95
- cost = _ref3.cost;
113
+ var renderContent = React.useCallback(function (_ref5) {
114
+ var title = _ref5.title,
115
+ description = _ref5.description,
116
+ buttonTitle = _ref5.buttonTitle,
117
+ buttonHref = _ref5.buttonHref,
118
+ buttonTarget = _ref5.buttonTarget,
119
+ buttonDownload = _ref5.buttonDownload,
120
+ _ref5$buttonColor = _ref5.buttonColor,
121
+ buttonColor = _ref5$buttonColor === void 0 ? ButtonColor.GREEN : _ref5$buttonColor,
122
+ onButtonClick = _ref5.onButtonClick,
123
+ onLinkClick = _ref5.onLinkClick,
124
+ _ref5$textColor = _ref5.textColor,
125
+ textColor = _ref5$textColor === void 0 ? TextColor.BLACK : _ref5$textColor,
126
+ textColorMobile = _ref5.textColorMobile,
127
+ linkTitle = _ref5.linkTitle,
128
+ linkUrl = _ref5.linkUrl,
129
+ linkTarget = _ref5.linkTarget,
130
+ linkDownload = _ref5.linkDownload,
131
+ cost = _ref5.cost;
96
132
  return /*#__PURE__*/React.createElement(Grid, {
97
133
  className: cn('grid'),
98
134
  guttersLeft: "medium"
@@ -110,13 +146,13 @@ var VideoBanner = function VideoBanner(_ref2) {
110
146
  className: cn('title'),
111
147
  as: "h1",
112
148
  color: "inherit"
113
- }, title), /*#__PURE__*/React.createElement("div", {
149
+ }, convert(title, textConfig)), /*#__PURE__*/React.createElement("div", {
114
150
  className: cn('text')
115
151
  }, /*#__PURE__*/React.createElement(Header, {
116
152
  as: "h5",
117
153
  color: "inherit",
118
154
  className: cn('description')
119
- }, description), cost && /*#__PURE__*/React.createElement("div", {
155
+ }, convert(description, textConfig)), cost && /*#__PURE__*/React.createElement("div", {
120
156
  className: cn('cost')
121
157
  }, convert(cost, typographyConfig))), /*#__PURE__*/React.createElement("div", {
122
158
  className: cn('btns-wrapper')
package/dist/lib/components/VideoBanner/VideoBanner.js CHANGED
@@ -17,10 +17,10 @@ require("core-js/modules/es.object.values");
17
17
 
18
18
  require("core-js/modules/es.string.link");
19
19
 
20
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
21
-
22
20
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
23
21
 
22
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
23
+
24
24
  var _react = _interopRequireDefault(require("react"));
25
25
 
26
26
  var _uiCore = require("@megafon/ui-core");
@@ -62,6 +62,40 @@ var typographyConfig = {
62
62
  }
63
63
  }
64
64
  };
65
+ var textConfig = (0, _extends2["default"])((0, _extends2["default"])({}, typographyConfig), {
66
+ br: {
67
+ component: function component() {
68
+ return /*#__PURE__*/_react["default"].createElement("br", null);
69
+ }
70
+ },
71
+ '&nbsp': {
72
+ component: function component() {
73
+ return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "String.fromCharCode(160)");
74
+ }
75
+ },
76
+ a: {
77
+ component: function component(_ref2) {
78
+ var href = _ref2.href,
79
+ children = _ref2.children;
80
+ return /*#__PURE__*/_react["default"].createElement("a", {
81
+ href: href
82
+ }, children);
83
+ },
84
+ props: ['href']
85
+ },
86
+ font: {
87
+ component: function component(_ref3) {
88
+ var color = _ref3.color,
89
+ children = _ref3.children;
90
+ return /*#__PURE__*/_react["default"].createElement("span", {
91
+ style: {
92
+ color: color
93
+ }
94
+ }, children);
95
+ },
96
+ props: ['color']
97
+ }
98
+ });
65
99
  var VideoType = {
66
100
  YOUTUBE: 'youtube',
67
101
  VIDEO: 'video'
@@ -78,26 +112,26 @@ var TextColor = {
78
112
  };
79
113
  exports.TextColor = TextColor;
80
114
 
81
- var VideoBanner = function VideoBanner(_ref2) {
82
- var dataAttrs = _ref2.dataAttrs,
83
- className = _ref2.className,
84
- _ref2$classes = _ref2.classes,
85
- classes = _ref2$classes === void 0 ? {} : _ref2$classes,
86
- rootRef = _ref2.rootRef,
87
- videoSrc = _ref2.videoSrc,
88
- videoType = _ref2.videoType,
89
- imageMobile = _ref2.imageMobile,
90
- imageTablet = _ref2.imageTablet,
91
- _ref2$imageDesktop = _ref2.imageDesktop,
92
- imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
93
- _ref2$imageDesktopWid = _ref2.imageDesktopWide,
94
- imageDesktopWide = _ref2$imageDesktopWid === void 0 ? '' : _ref2$imageDesktopWid,
95
- content = _ref2.content,
96
- _ref2$isMuted = _ref2.isMuted,
97
- isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
98
- breadcrumbs = _ref2.breadcrumbs,
99
- _ref2$videoMobile = _ref2.videoMobile,
100
- videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
115
+ var VideoBanner = function VideoBanner(_ref4) {
116
+ var dataAttrs = _ref4.dataAttrs,
117
+ className = _ref4.className,
118
+ _ref4$classes = _ref4.classes,
119
+ classes = _ref4$classes === void 0 ? {} : _ref4$classes,
120
+ rootRef = _ref4.rootRef,
121
+ videoSrc = _ref4.videoSrc,
122
+ videoType = _ref4.videoType,
123
+ imageMobile = _ref4.imageMobile,
124
+ imageTablet = _ref4.imageTablet,
125
+ _ref4$imageDesktop = _ref4.imageDesktop,
126
+ imageDesktop = _ref4$imageDesktop === void 0 ? '' : _ref4$imageDesktop,
127
+ _ref4$imageDesktopWid = _ref4.imageDesktopWide,
128
+ imageDesktopWide = _ref4$imageDesktopWid === void 0 ? '' : _ref4$imageDesktopWid,
129
+ content = _ref4.content,
130
+ _ref4$isMuted = _ref4.isMuted,
131
+ isMuted = _ref4$isMuted === void 0 ? true : _ref4$isMuted,
132
+ breadcrumbs = _ref4.breadcrumbs,
133
+ _ref4$videoMobile = _ref4.videoMobile,
134
+ videoMobile = _ref4$videoMobile === void 0 ? false : _ref4$videoMobile;
101
135
 
102
136
  var _React$useState = _react["default"].useState(true),
103
137
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -107,25 +141,25 @@ var VideoBanner = function VideoBanner(_ref2) {
107
141
  var isVideoData = !!videoSrc && !!videoType;
108
142
  var isRenderVideo = (!isMobile || videoMobile) && isVideoData;
109
143
 
110
- var renderContent = _react["default"].useCallback(function (_ref3) {
111
- var title = _ref3.title,
112
- description = _ref3.description,
113
- buttonTitle = _ref3.buttonTitle,
114
- buttonHref = _ref3.buttonHref,
115
- buttonTarget = _ref3.buttonTarget,
116
- buttonDownload = _ref3.buttonDownload,
117
- _ref3$buttonColor = _ref3.buttonColor,
118
- buttonColor = _ref3$buttonColor === void 0 ? ButtonColor.GREEN : _ref3$buttonColor,
119
- onButtonClick = _ref3.onButtonClick,
120
- onLinkClick = _ref3.onLinkClick,
121
- _ref3$textColor = _ref3.textColor,
122
- textColor = _ref3$textColor === void 0 ? TextColor.BLACK : _ref3$textColor,
123
- textColorMobile = _ref3.textColorMobile,
124
- linkTitle = _ref3.linkTitle,
125
- linkUrl = _ref3.linkUrl,
126
- linkTarget = _ref3.linkTarget,
127
- linkDownload = _ref3.linkDownload,
128
- cost = _ref3.cost;
144
+ var renderContent = _react["default"].useCallback(function (_ref5) {
145
+ var title = _ref5.title,
146
+ description = _ref5.description,
147
+ buttonTitle = _ref5.buttonTitle,
148
+ buttonHref = _ref5.buttonHref,
149
+ buttonTarget = _ref5.buttonTarget,
150
+ buttonDownload = _ref5.buttonDownload,
151
+ _ref5$buttonColor = _ref5.buttonColor,
152
+ buttonColor = _ref5$buttonColor === void 0 ? ButtonColor.GREEN : _ref5$buttonColor,
153
+ onButtonClick = _ref5.onButtonClick,
154
+ onLinkClick = _ref5.onLinkClick,
155
+ _ref5$textColor = _ref5.textColor,
156
+ textColor = _ref5$textColor === void 0 ? TextColor.BLACK : _ref5$textColor,
157
+ textColorMobile = _ref5.textColorMobile,
158
+ linkTitle = _ref5.linkTitle,
159
+ linkUrl = _ref5.linkUrl,
160
+ linkTarget = _ref5.linkTarget,
161
+ linkDownload = _ref5.linkDownload,
162
+ cost = _ref5.cost;
129
163
  return /*#__PURE__*/_react["default"].createElement(_uiCore.Grid, {
130
164
  className: cn('grid'),
131
165
  guttersLeft: "medium"
@@ -143,13 +177,13 @@ var VideoBanner = function VideoBanner(_ref2) {
143
177
  className: cn('title'),
144
178
  as: "h1",
145
179
  color: "inherit"
146
- }, title), /*#__PURE__*/_react["default"].createElement("div", {
180
+ }, (0, _uiHelpers.convert)(title, textConfig)), /*#__PURE__*/_react["default"].createElement("div", {
147
181
  className: cn('text')
148
182
  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
149
183
  as: "h5",
150
184
  color: "inherit",
151
185
  className: cn('description')
152
- }, description), cost && /*#__PURE__*/_react["default"].createElement("div", {
186
+ }, (0, _uiHelpers.convert)(description, textConfig)), cost && /*#__PURE__*/_react["default"].createElement("div", {
153
187
  className: cn('cost')
154
188
  }, (0, _uiHelpers.convert)(cost, typographyConfig))), /*#__PURE__*/_react["default"].createElement("div", {
155
189
  className: cn('btns-wrapper')
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "4.0.3",
3
+ "version": "4.1.0",
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": "^2.0.1",
55
+ "@megafon/ui-icons": "^2.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,7 +82,7 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@babel/runtime": "^7.8.4",
85
- "@megafon/ui-core": "^4.1.0",
85
+ "@megafon/ui-core": "^4.2.0",
86
86
  "@megafon/ui-helpers": "^2.2.0",
87
87
  "core-js": "^3.6.4",
88
88
  "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
90
90
  "prop-types": "^15.7.2",
91
91
  "swiper": "^6.5.6"
92
92
  },
93
- "gitHead": "1429e7a01a2f0e9558a6f4085d6dd22170bc1ff7"
93
+ "gitHead": "d76f8b81ccbaeff41c2aaebc099a79298ed6deaa"
94
94
  }