@megafon/ui-shared 4.2.1 → 4.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/es/components/VideoBlock/VideoBlock.css +16 -0
- package/dist/es/components/VideoBlock/VideoBlock.d.ts +2 -0
- package/dist/es/components/VideoBlock/VideoBlock.js +18 -7
- package/dist/lib/components/VideoBlock/VideoBlock.css +16 -0
- package/dist/lib/components/VideoBlock/VideoBlock.d.ts +2 -0
- package/dist/lib/components/VideoBlock/VideoBlock.js +18 -7
- package/package.json +7 -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.3.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.2.1...@megafon/ui-shared@4.3.0) (2022-10-24)
|
7
|
+
|
8
|
+
|
9
|
+
### Features
|
10
|
+
|
11
|
+
* **videoblock:** add prop contentPositionRight ([6f1e603](https://github.com/MegafonWebLab/megafon-ui/commit/6f1e603c1cd3489a18a9ccf5da5e1e0785c4f0cf))
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
6
17
|
## [4.2.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.2.0...@megafon/ui-shared@4.2.1) (2022-10-17)
|
7
18
|
|
8
19
|
**Note:** Version bump only for package @megafon/ui-shared
|
@@ -42,6 +42,12 @@ h5 {
|
|
42
42
|
padding-right: 20px;
|
43
43
|
}
|
44
44
|
}
|
45
|
+
@media screen and (min-width: 768px) {
|
46
|
+
.mfui-video-block__content_position-right {
|
47
|
+
margin: 0 0 0 20px;
|
48
|
+
padding: 0 0 0 20px;
|
49
|
+
}
|
50
|
+
}
|
45
51
|
.mfui-video-block__header {
|
46
52
|
margin-bottom: 24px;
|
47
53
|
}
|
@@ -125,3 +131,13 @@ h5 {
|
|
125
131
|
.mfui-video-block__grid {
|
126
132
|
width: 100%;
|
127
133
|
}
|
134
|
+
.mfui-video-block__content-column_position-right {
|
135
|
+
-webkit-box-ordinal-group: 3;
|
136
|
+
-ms-flex-order: 2;
|
137
|
+
order: 2;
|
138
|
+
}
|
139
|
+
.mfui-video-block__video-column_position-left {
|
140
|
+
-webkit-box-ordinal-group: 2;
|
141
|
+
-ms-flex-order: 1;
|
142
|
+
order: 1;
|
143
|
+
}
|
@@ -45,6 +45,8 @@ export interface IVideoBlockProps {
|
|
45
45
|
isMuted?: boolean;
|
46
46
|
/** Автоматическое проигрывание видео */
|
47
47
|
isAutoplay?: boolean;
|
48
|
+
/** Расположение контента справа от видео. Только для десктопа */
|
49
|
+
contentPositionRight?: boolean;
|
48
50
|
}
|
49
51
|
declare const VideoBlock: React.FC<IVideoBlockProps>;
|
50
52
|
export default VideoBlock;
|
@@ -27,7 +27,9 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
27
27
|
_ref$isMuted = _ref.isMuted,
|
28
28
|
isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
|
29
29
|
_ref$isAutoplay = _ref.isAutoplay,
|
30
|
-
isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay
|
30
|
+
isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
|
31
|
+
_ref$contentPositionR = _ref.contentPositionRight,
|
32
|
+
contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR;
|
31
33
|
var renderVideo = React.useCallback(function () {
|
32
34
|
switch (videoType) {
|
33
35
|
case VideoTypes.YOUTUBE:
|
@@ -75,7 +77,9 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
75
77
|
buttonTitle = _ref2.buttonTitle,
|
76
78
|
onButtonClick = _ref2.onButtonClick;
|
77
79
|
return /*#__PURE__*/React.createElement("div", {
|
78
|
-
className: cn('content'
|
80
|
+
className: cn('content', {
|
81
|
+
'position-right': contentPositionRight
|
82
|
+
})
|
79
83
|
}, /*#__PURE__*/React.createElement(Header, {
|
80
84
|
as: "h2",
|
81
85
|
className: cn('header')
|
@@ -90,7 +94,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
90
94
|
onClick: onButtonClick,
|
91
95
|
download: buttonDownload
|
92
96
|
}, buttonTitle));
|
93
|
-
}, [classes.button, classes.description, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
|
97
|
+
}, [classes.button, classes.description, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, contentPositionRight]);
|
94
98
|
var renderGridColumns = React.useCallback(function () {
|
95
99
|
var columns = [];
|
96
100
|
var columnWidth = content ? '7' : '10';
|
@@ -102,7 +106,10 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
102
106
|
mobile: "12",
|
103
107
|
orderTablet: "2",
|
104
108
|
orderMobile: "2",
|
105
|
-
key: "column-content"
|
109
|
+
key: "column-content",
|
110
|
+
className: cn('content-column', {
|
111
|
+
'position-right': contentPositionRight
|
112
|
+
})
|
106
113
|
}, renderContent(content)));
|
107
114
|
}
|
108
115
|
|
@@ -110,14 +117,17 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
110
117
|
all: columnWidth,
|
111
118
|
tablet: "12",
|
112
119
|
mobile: "12",
|
113
|
-
key: "column-video"
|
120
|
+
key: "column-video",
|
121
|
+
className: cn('video-column', {
|
122
|
+
'position-left': contentPositionRight
|
123
|
+
})
|
114
124
|
}, /*#__PURE__*/React.createElement("div", {
|
115
125
|
className: cn('video-wrapper', {
|
116
126
|
'with-content': !!content
|
117
127
|
})
|
118
128
|
}, renderVideo())));
|
119
129
|
return columns;
|
120
|
-
}, [renderContent, renderVideo, content]);
|
130
|
+
}, [renderContent, renderVideo, content, contentPositionRight]);
|
121
131
|
return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
122
132
|
className: cn([className, classes.root]),
|
123
133
|
ref: rootRef
|
@@ -152,6 +162,7 @@ VideoBlock.propTypes = {
|
|
152
162
|
videoType: PropTypes.oneOf(Object.values(VideoTypes)),
|
153
163
|
videoSrc: PropTypes.string.isRequired,
|
154
164
|
isMuted: PropTypes.bool,
|
155
|
-
isAutoplay: PropTypes.bool
|
165
|
+
isAutoplay: PropTypes.bool,
|
166
|
+
contentPositionRight: PropTypes.bool
|
156
167
|
};
|
157
168
|
export default VideoBlock;
|
@@ -42,6 +42,12 @@ h5 {
|
|
42
42
|
padding-right: 20px;
|
43
43
|
}
|
44
44
|
}
|
45
|
+
@media screen and (min-width: 768px) {
|
46
|
+
.mfui-video-block__content_position-right {
|
47
|
+
margin: 0 0 0 20px;
|
48
|
+
padding: 0 0 0 20px;
|
49
|
+
}
|
50
|
+
}
|
45
51
|
.mfui-video-block__header {
|
46
52
|
margin-bottom: 24px;
|
47
53
|
}
|
@@ -125,3 +131,13 @@ h5 {
|
|
125
131
|
.mfui-video-block__grid {
|
126
132
|
width: 100%;
|
127
133
|
}
|
134
|
+
.mfui-video-block__content-column_position-right {
|
135
|
+
-webkit-box-ordinal-group: 3;
|
136
|
+
-ms-flex-order: 2;
|
137
|
+
order: 2;
|
138
|
+
}
|
139
|
+
.mfui-video-block__video-column_position-left {
|
140
|
+
-webkit-box-ordinal-group: 2;
|
141
|
+
-ms-flex-order: 1;
|
142
|
+
order: 1;
|
143
|
+
}
|
@@ -45,6 +45,8 @@ export interface IVideoBlockProps {
|
|
45
45
|
isMuted?: boolean;
|
46
46
|
/** Автоматическое проигрывание видео */
|
47
47
|
isAutoplay?: boolean;
|
48
|
+
/** Расположение контента справа от видео. Только для десктопа */
|
49
|
+
contentPositionRight?: boolean;
|
48
50
|
}
|
49
51
|
declare const VideoBlock: React.FC<IVideoBlockProps>;
|
50
52
|
export default VideoBlock;
|
@@ -45,7 +45,9 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
45
45
|
_ref$isMuted = _ref.isMuted,
|
46
46
|
isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
|
47
47
|
_ref$isAutoplay = _ref.isAutoplay,
|
48
|
-
isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay
|
48
|
+
isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
|
49
|
+
_ref$contentPositionR = _ref.contentPositionRight,
|
50
|
+
contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR;
|
49
51
|
|
50
52
|
var renderVideo = _react["default"].useCallback(function () {
|
51
53
|
switch (videoType) {
|
@@ -95,7 +97,9 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
95
97
|
buttonTitle = _ref2.buttonTitle,
|
96
98
|
onButtonClick = _ref2.onButtonClick;
|
97
99
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
98
|
-
className: cn('content'
|
100
|
+
className: cn('content', {
|
101
|
+
'position-right': contentPositionRight
|
102
|
+
})
|
99
103
|
}, /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
|
100
104
|
as: "h2",
|
101
105
|
className: cn('header')
|
@@ -110,7 +114,7 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
110
114
|
onClick: onButtonClick,
|
111
115
|
download: buttonDownload
|
112
116
|
}, buttonTitle));
|
113
|
-
}, [classes.button, classes.description, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button]);
|
117
|
+
}, [classes.button, classes.description, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, contentPositionRight]);
|
114
118
|
|
115
119
|
var renderGridColumns = _react["default"].useCallback(function () {
|
116
120
|
var columns = [];
|
@@ -123,7 +127,10 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
123
127
|
mobile: "12",
|
124
128
|
orderTablet: "2",
|
125
129
|
orderMobile: "2",
|
126
|
-
key: "column-content"
|
130
|
+
key: "column-content",
|
131
|
+
className: cn('content-column', {
|
132
|
+
'position-right': contentPositionRight
|
133
|
+
})
|
127
134
|
}, renderContent(content)));
|
128
135
|
}
|
129
136
|
|
@@ -131,14 +138,17 @@ var VideoBlock = function VideoBlock(_ref) {
|
|
131
138
|
all: columnWidth,
|
132
139
|
tablet: "12",
|
133
140
|
mobile: "12",
|
134
|
-
key: "column-video"
|
141
|
+
key: "column-video",
|
142
|
+
className: cn('video-column', {
|
143
|
+
'position-left': contentPositionRight
|
144
|
+
})
|
135
145
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
136
146
|
className: cn('video-wrapper', {
|
137
147
|
'with-content': !!content
|
138
148
|
})
|
139
149
|
}, renderVideo())));
|
140
150
|
return columns;
|
141
|
-
}, [renderContent, renderVideo, content]);
|
151
|
+
}, [renderContent, renderVideo, content, contentPositionRight]);
|
142
152
|
|
143
153
|
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
|
144
154
|
className: cn([className, classes.root]),
|
@@ -174,7 +184,8 @@ VideoBlock.propTypes = {
|
|
174
184
|
videoType: _propTypes["default"].oneOf(Object.values(VideoTypes)),
|
175
185
|
videoSrc: _propTypes["default"].string.isRequired,
|
176
186
|
isMuted: _propTypes["default"].bool,
|
177
|
-
isAutoplay: _propTypes["default"].bool
|
187
|
+
isAutoplay: _propTypes["default"].bool,
|
188
|
+
contentPositionRight: _propTypes["default"].bool
|
178
189
|
};
|
179
190
|
var _default = VideoBlock;
|
180
191
|
exports["default"] = _default;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@megafon/ui-shared",
|
3
|
-
"version": "4.
|
3
|
+
"version": "4.3.0",
|
4
4
|
"files": [
|
5
5
|
"dist"
|
6
6
|
],
|
@@ -52,8 +52,11 @@
|
|
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.
|
55
|
+
"@megafon/ui-icons": "^2.2.0",
|
56
56
|
"@svgr/core": "^2.4.1",
|
57
|
+
"@testing-library/jest-dom": "5.16.2",
|
58
|
+
"@testing-library/react": "12.1.2",
|
59
|
+
"@testing-library/user-event": "13.5.0",
|
57
60
|
"@types/enzyme": "^3.10.5",
|
58
61
|
"@types/enzyme-adapter-react-16": "^1.0.6",
|
59
62
|
"@types/jest": "^25.1.3",
|
@@ -82,7 +85,7 @@
|
|
82
85
|
},
|
83
86
|
"dependencies": {
|
84
87
|
"@babel/runtime": "^7.8.4",
|
85
|
-
"@megafon/ui-core": "^4.5.
|
88
|
+
"@megafon/ui-core": "^4.5.1",
|
86
89
|
"@megafon/ui-helpers": "^2.2.0",
|
87
90
|
"core-js": "^3.6.4",
|
88
91
|
"htmr": "^0.9.2",
|
@@ -90,5 +93,5 @@
|
|
90
93
|
"prop-types": "^15.7.2",
|
91
94
|
"swiper": "^6.5.6"
|
92
95
|
},
|
93
|
-
"gitHead": "
|
96
|
+
"gitHead": "08dd535c268cf6cd4f7c30d66845e5f16aa7b14d"
|
94
97
|
}
|