@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 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.2.1",
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.1.0",
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.0",
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": "1767b434f1650a100aa2aca6f5c795f8b549a184"
96
+ "gitHead": "08dd535c268cf6cd4f7c30d66845e5f16aa7b14d"
94
97
  }