@megafon/ui-shared 4.19.0 → 4.20.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 (14) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/es/components/Container/Container.css +20 -0
  3. package/dist/es/components/Container/Container.d.ts +2 -0
  4. package/dist/es/components/Container/Container.js +6 -2
  5. package/dist/es/components/VideoBanner/VideoBanner.css +10 -0
  6. package/dist/es/components/VideoBanner/VideoBanner.d.ts +2 -0
  7. package/dist/es/components/VideoBanner/VideoBanner.js +10 -4
  8. package/dist/lib/components/Container/Container.css +20 -0
  9. package/dist/lib/components/Container/Container.d.ts +2 -0
  10. package/dist/lib/components/Container/Container.js +6 -2
  11. package/dist/lib/components/VideoBanner/VideoBanner.css +10 -0
  12. package/dist/lib/components/VideoBanner/VideoBanner.d.ts +2 -0
  13. package/dist/lib/components/VideoBanner/VideoBanner.js +10 -4
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
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.20.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.19.0...@megafon/ui-shared@4.20.0) (2023-05-23)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **counterbadge:** fix required props ([6824153](https://github.com/MegafonWebLab/megafon-ui/commit/6824153b4f2543eb3961cd408c447c8bcb9cd83d))
12
+
13
+
14
+ ### Features
15
+
16
+ * **container:** add bottomShadow props ([b8d8249](https://github.com/MegafonWebLab/megafon-ui/commit/b8d82492b7300211548b71049820264bdc54a761))
17
+ * **videobanner:** add bottomShadow prop ([b103f1d](https://github.com/MegafonWebLab/megafon-ui/commit/b103f1defc5562bd50ef1ff5dcd5e568310378cf))
18
+
19
+
20
+
21
+
22
+
6
23
  # [4.19.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.18.3...@megafon/ui-shared@4.19.0) (2023-05-17)
7
24
 
8
25
 
package/dist/es/components/Container/Container.css CHANGED
@@ -6,6 +6,7 @@ h5 {
6
6
  margin: 0;
7
7
  }
8
8
  .mfui-container {
9
+ position: relative;
9
10
  padding-bottom: 96px;
10
11
  }
11
12
  .mfui-container_bg-color_default {
@@ -27,11 +28,17 @@ h5 {
27
28
  .mfui-container {
28
29
  padding-bottom: 72px;
29
30
  }
31
+ .mfui-container_bottom-shadow:after {
32
+ bottom: 72px !important;
33
+ }
30
34
  }
31
35
  @media screen and (max-width: 767px) {
32
36
  .mfui-container {
33
37
  padding-bottom: 48px;
34
38
  }
39
+ .mfui-container_bottom-shadow:after {
40
+ bottom: 48px !important;
41
+ }
35
42
  }
36
43
  .mfui-container_bg-color_default + .mfui-container_bg-color_light-gray {
37
44
  padding-top: 96px;
@@ -3073,9 +3080,22 @@ h5 {
3073
3080
  margin-top: 24px;
3074
3081
  }
3075
3082
  }
3083
+ .mfui-container_bottom-shadow:after {
3084
+ content: '';
3085
+ position: absolute;
3086
+ right: 0;
3087
+ bottom: 96px;
3088
+ width: 100%;
3089
+ height: 100%;
3090
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
3091
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
3092
+ }
3076
3093
  .mfui-container_disable-padding-top {
3077
3094
  padding-top: 0 !important;
3078
3095
  }
3079
3096
  .mfui-container_disable-padding-bottom {
3080
3097
  padding-bottom: 0 !important;
3081
3098
  }
3099
+ .mfui-container_disable-padding-bottom.mfui-container_bottom-shadow:after {
3100
+ bottom: 0 !important;
3101
+ }
package/dist/es/components/Container/Container.d.ts CHANGED
@@ -21,6 +21,8 @@ declare type Props = {
21
21
  disablePaddingTop?: boolean;
22
22
  /** Отключить отступ снизу */
23
23
  disablePaddingBottom?: boolean;
24
+ /** Включить тень в нижней части компонента */
25
+ bottomShadow?: boolean;
24
26
  };
25
27
  declare const Container: React.FC<Props>;
26
28
  export default Container;
package/dist/es/components/Container/Container.js CHANGED
@@ -21,10 +21,13 @@ var Container = function Container(_ref) {
21
21
  className = _ref.className,
22
22
  children = _ref.children,
23
23
  disablePaddingTop = _ref.disablePaddingTop,
24
- disablePaddingBottom = _ref.disablePaddingBottom;
24
+ disablePaddingBottom = _ref.disablePaddingBottom,
25
+ _ref$bottomShadow = _ref.bottomShadow,
26
+ bottomShadow = _ref$bottomShadow === void 0 ? false : _ref$bottomShadow;
25
27
  return /*#__PURE__*/React.createElement("div", {
26
28
  className: cn({
27
29
  'bg-color': backgroundColor,
30
+ 'bottom-shadow': bottomShadow,
28
31
  'disable-padding-top': disablePaddingTop,
29
32
  'disable-padding-bottom': disablePaddingBottom
30
33
  }, [className]),
@@ -41,6 +44,7 @@ Container.propTypes = {
41
44
  current: PropTypes.elementType
42
45
  }), PropTypes.any])]),
43
46
  disablePaddingTop: PropTypes.bool,
44
- disablePaddingBottom: PropTypes.bool
47
+ disablePaddingBottom: PropTypes.bool,
48
+ bottomShadow: PropTypes.bool
45
49
  };
46
50
  export default Container;
package/dist/es/components/VideoBanner/VideoBanner.css CHANGED
@@ -33,6 +33,16 @@ h5 {
33
33
  margin-left: -16px;
34
34
  }
35
35
  }
36
+ .mfui-video-banner_bottom-shadow:after {
37
+ content: '';
38
+ position: absolute;
39
+ right: 0;
40
+ bottom: 0;
41
+ width: 100%;
42
+ height: 100%;
43
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
44
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
45
+ }
36
46
  .mfui-video-banner__wrapper {
37
47
  display: -webkit-box;
38
48
  display: -ms-flexbox;
package/dist/es/components/VideoBanner/VideoBanner.d.ts CHANGED
@@ -104,6 +104,8 @@ interface IVideoBannerProps {
104
104
  breadcrumbs?: BreadCrumbsItemsType;
105
105
  /** Включить микроразметку хлебных крошек */
106
106
  hasBreadcrumbsMicrodata?: boolean;
107
+ /** Включить тень в нижней части компонента */
108
+ bottomShadow?: boolean;
107
109
  }
108
110
  declare const VideoBanner: React.FC<IVideoBannerProps>;
109
111
  export default VideoBanner;
package/dist/es/components/VideoBanner/VideoBanner.js CHANGED
@@ -68,7 +68,9 @@ var VideoBanner = function VideoBanner(_ref2) {
68
68
  _ref2$videoMobile = _ref2.videoMobile,
69
69
  videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile,
70
70
  _ref2$hasBreadcrumbsM = _ref2.hasBreadcrumbsMicrodata,
71
- hasBreadcrumbsMicrodata = _ref2$hasBreadcrumbsM === void 0 ? false : _ref2$hasBreadcrumbsM;
71
+ hasBreadcrumbsMicrodata = _ref2$hasBreadcrumbsM === void 0 ? false : _ref2$hasBreadcrumbsM,
72
+ _ref2$bottomShadow = _ref2.bottomShadow,
73
+ bottomShadow = _ref2$bottomShadow === void 0 ? false : _ref2$bottomShadow;
72
74
 
73
75
  var _React$useState = React.useState(true),
74
76
  _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -208,9 +210,12 @@ var VideoBanner = function VideoBanner(_ref2) {
208
210
  window.removeEventListener('resize', resizeHandlerThrottled);
209
211
  };
210
212
  }, [setIsMobile]);
211
- return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
212
- className: cn([className, classes.root]),
213
+ return /*#__PURE__*/React.createElement("div", _extends({
213
214
  ref: rootRef
215
+ }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
216
+ className: cn({
217
+ 'bottom-shadow': bottomShadow
218
+ }, [className, classes.root])
214
219
  }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
215
220
  className: cn('wrapper')
216
221
  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
@@ -290,6 +295,7 @@ VideoBanner.propTypes = {
290
295
  title: PropTypes.string.isRequired,
291
296
  href: PropTypes.string
292
297
  }).isRequired),
293
- hasBreadcrumbsMicrodata: PropTypes.bool
298
+ hasBreadcrumbsMicrodata: PropTypes.bool,
299
+ bottomShadow: PropTypes.bool
294
300
  };
295
301
  export default VideoBanner;
package/dist/lib/components/Container/Container.css CHANGED
@@ -6,6 +6,7 @@ h5 {
6
6
  margin: 0;
7
7
  }
8
8
  .mfui-container {
9
+ position: relative;
9
10
  padding-bottom: 96px;
10
11
  }
11
12
  .mfui-container_bg-color_default {
@@ -27,11 +28,17 @@ h5 {
27
28
  .mfui-container {
28
29
  padding-bottom: 72px;
29
30
  }
31
+ .mfui-container_bottom-shadow:after {
32
+ bottom: 72px !important;
33
+ }
30
34
  }
31
35
  @media screen and (max-width: 767px) {
32
36
  .mfui-container {
33
37
  padding-bottom: 48px;
34
38
  }
39
+ .mfui-container_bottom-shadow:after {
40
+ bottom: 48px !important;
41
+ }
35
42
  }
36
43
  .mfui-container_bg-color_default + .mfui-container_bg-color_light-gray {
37
44
  padding-top: 96px;
@@ -3073,9 +3080,22 @@ h5 {
3073
3080
  margin-top: 24px;
3074
3081
  }
3075
3082
  }
3083
+ .mfui-container_bottom-shadow:after {
3084
+ content: '';
3085
+ position: absolute;
3086
+ right: 0;
3087
+ bottom: 96px;
3088
+ width: 100%;
3089
+ height: 100%;
3090
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
3091
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
3092
+ }
3076
3093
  .mfui-container_disable-padding-top {
3077
3094
  padding-top: 0 !important;
3078
3095
  }
3079
3096
  .mfui-container_disable-padding-bottom {
3080
3097
  padding-bottom: 0 !important;
3081
3098
  }
3099
+ .mfui-container_disable-padding-bottom.mfui-container_bottom-shadow:after {
3100
+ bottom: 0 !important;
3101
+ }
package/dist/lib/components/Container/Container.d.ts CHANGED
@@ -21,6 +21,8 @@ declare type Props = {
21
21
  disablePaddingTop?: boolean;
22
22
  /** Отключить отступ снизу */
23
23
  disablePaddingBottom?: boolean;
24
+ /** Включить тень в нижней части компонента */
25
+ bottomShadow?: boolean;
24
26
  };
25
27
  declare const Container: React.FC<Props>;
26
28
  export default Container;
package/dist/lib/components/Container/Container.js CHANGED
@@ -35,10 +35,13 @@ var Container = function Container(_ref) {
35
35
  className = _ref.className,
36
36
  children = _ref.children,
37
37
  disablePaddingTop = _ref.disablePaddingTop,
38
- disablePaddingBottom = _ref.disablePaddingBottom;
38
+ disablePaddingBottom = _ref.disablePaddingBottom,
39
+ _ref$bottomShadow = _ref.bottomShadow,
40
+ bottomShadow = _ref$bottomShadow === void 0 ? false : _ref$bottomShadow;
39
41
  return /*#__PURE__*/_react["default"].createElement("div", {
40
42
  className: cn({
41
43
  'bg-color': backgroundColor,
44
+ 'bottom-shadow': bottomShadow,
42
45
  'disable-padding-top': disablePaddingTop,
43
46
  'disable-padding-bottom': disablePaddingBottom
44
47
  }, [className]),
@@ -55,7 +58,8 @@ Container.propTypes = {
55
58
  current: _propTypes["default"].elementType
56
59
  }), _propTypes["default"].any])]),
57
60
  disablePaddingTop: _propTypes["default"].bool,
58
- disablePaddingBottom: _propTypes["default"].bool
61
+ disablePaddingBottom: _propTypes["default"].bool,
62
+ bottomShadow: _propTypes["default"].bool
59
63
  };
60
64
  var _default = Container;
61
65
  exports["default"] = _default;
package/dist/lib/components/VideoBanner/VideoBanner.css CHANGED
@@ -33,6 +33,16 @@ h5 {
33
33
  margin-left: -16px;
34
34
  }
35
35
  }
36
+ .mfui-video-banner_bottom-shadow:after {
37
+ content: '';
38
+ position: absolute;
39
+ right: 0;
40
+ bottom: 0;
41
+ width: 100%;
42
+ height: 100%;
43
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
44
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
45
+ }
36
46
  .mfui-video-banner__wrapper {
37
47
  display: -webkit-box;
38
48
  display: -ms-flexbox;
package/dist/lib/components/VideoBanner/VideoBanner.d.ts CHANGED
@@ -104,6 +104,8 @@ interface IVideoBannerProps {
104
104
  breadcrumbs?: BreadCrumbsItemsType;
105
105
  /** Включить микроразметку хлебных крошек */
106
106
  hasBreadcrumbsMicrodata?: boolean;
107
+ /** Включить тень в нижней части компонента */
108
+ bottomShadow?: boolean;
107
109
  }
108
110
  declare const VideoBanner: React.FC<IVideoBannerProps>;
109
111
  export default VideoBanner;
package/dist/lib/components/VideoBanner/VideoBanner.js CHANGED
@@ -100,7 +100,9 @@ var VideoBanner = function VideoBanner(_ref2) {
100
100
  _ref2$videoMobile = _ref2.videoMobile,
101
101
  videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile,
102
102
  _ref2$hasBreadcrumbsM = _ref2.hasBreadcrumbsMicrodata,
103
- hasBreadcrumbsMicrodata = _ref2$hasBreadcrumbsM === void 0 ? false : _ref2$hasBreadcrumbsM;
103
+ hasBreadcrumbsMicrodata = _ref2$hasBreadcrumbsM === void 0 ? false : _ref2$hasBreadcrumbsM,
104
+ _ref2$bottomShadow = _ref2.bottomShadow,
105
+ bottomShadow = _ref2$bottomShadow === void 0 ? false : _ref2$bottomShadow;
104
106
 
105
107
  var _React$useState = _react["default"].useState(true),
106
108
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -244,9 +246,12 @@ var VideoBanner = function VideoBanner(_ref2) {
244
246
  };
245
247
  }, [setIsMobile]);
246
248
 
247
- return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
248
- className: cn([className, classes.root]),
249
+ return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
249
250
  ref: rootRef
251
+ }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
252
+ className: cn({
253
+ 'bottom-shadow': bottomShadow
254
+ }, [className, classes.root])
250
255
  }), /*#__PURE__*/_react["default"].createElement(_uiCore.ContentArea, null, /*#__PURE__*/_react["default"].createElement("div", {
251
256
  className: cn('wrapper')
252
257
  }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/_react["default"].createElement(_Breadcrumbs["default"], {
@@ -326,7 +331,8 @@ VideoBanner.propTypes = {
326
331
  title: PropTypes.string.isRequired,
327
332
  href: PropTypes.string
328
333
  }).isRequired),
329
- hasBreadcrumbsMicrodata: PropTypes.bool
334
+ hasBreadcrumbsMicrodata: PropTypes.bool,
335
+ bottomShadow: PropTypes.bool
330
336
  };
331
337
  var _default = VideoBanner;
332
338
  exports["default"] = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "4.19.0",
3
+ "version": "4.20.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -86,7 +86,7 @@
86
86
  },
87
87
  "dependencies": {
88
88
  "@babel/runtime": "^7.8.4",
89
- "@megafon/ui-core": "^4.16.0",
89
+ "@megafon/ui-core": "^4.16.1",
90
90
  "@megafon/ui-helpers": "^2.5.0",
91
91
  "core-js": "^3.6.4",
92
92
  "htmr": "^0.9.2",
@@ -94,5 +94,5 @@
94
94
  "prop-types": "^15.7.2",
95
95
  "swiper": "^6.5.6"
96
96
  },
97
- "gitHead": "7e5ec2880019da52a81060df8e96320269ab5f2f"
97
+ "gitHead": "511c2426a2f60050064028622ccbd0312198286a"
98
98
  }