@megafon/ui-shared 7.0.0 → 7.1.1

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 (31) hide show
  1. package/dist/es/components/Container/Container.css +1 -1
  2. package/dist/es/components/DarkGradientCards/DarkGradientCards.css +1 -0
  3. package/dist/es/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
  4. package/dist/es/components/DarkGradientCards/DarkGradientCards.js +61 -0
  5. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css +1 -0
  6. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
  7. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js +50 -0
  8. package/dist/es/components/DarkGradientCards/types.d.ts +20 -0
  9. package/dist/es/components/DarkGradientCards/types.js +1 -0
  10. package/dist/es/components/ImageBanner/ImageBanner.d.ts +2 -0
  11. package/dist/es/components/ImageBanner/ImageBanner.js +4 -1
  12. package/dist/es/hooks/useResolutions.d.ts +1 -0
  13. package/dist/es/hooks/useResolutions.js +11 -1
  14. package/dist/es/index.d.ts +2 -0
  15. package/dist/es/index.js +2 -0
  16. package/dist/lib/components/Container/Container.css +1 -1
  17. package/dist/lib/components/DarkGradientCards/DarkGradientCards.css +1 -0
  18. package/dist/lib/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
  19. package/dist/lib/components/DarkGradientCards/DarkGradientCards.js +70 -0
  20. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.css +1 -0
  21. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
  22. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.js +59 -0
  23. package/dist/lib/components/DarkGradientCards/types.d.ts +20 -0
  24. package/dist/lib/components/DarkGradientCards/types.js +5 -0
  25. package/dist/lib/components/ImageBanner/ImageBanner.d.ts +2 -0
  26. package/dist/lib/components/ImageBanner/ImageBanner.js +4 -1
  27. package/dist/lib/hooks/useResolutions.d.ts +1 -0
  28. package/dist/lib/hooks/useResolutions.js +11 -1
  29. package/dist/lib/index.d.ts +2 -0
  30. package/dist/lib/index.js +14 -0
  31. package/package.json +2 -2
@@ -0,0 +1,15 @@
1
+ import * as React from 'react';
2
+ import { ItemType } from '../types';
3
+ import './DarkGradientCard.scss';
4
+ export type DarkGradientCardType = ItemType & {
5
+ size?: 'small' | 'big';
6
+ className?: string;
7
+ classes?: {
8
+ root?: string;
9
+ };
10
+ dataAttrs?: {
11
+ root?: Record<string, string>;
12
+ };
13
+ };
14
+ declare const DarkGradientCard: React.FC<DarkGradientCardType>;
15
+ export default DarkGradientCard;
@@ -0,0 +1,59 @@
1
+ "use strict";
2
+
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports["default"] = void 0;
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+ var React = _interopRequireWildcard(require("react"));
10
+ var _uiHelpers = require("@megafon/ui-helpers");
11
+ var _setRelAttribute = require("../../../helpers/setRelAttribute");
12
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
14
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
15
+ var cn = (0, _uiHelpers.cnCreate)('mfui-dark-gradient-card');
16
+ var DarkGradientCard = function DarkGradientCard(_ref) {
17
+ var imageSrc = _ref.imageSrc,
18
+ title = _ref.title,
19
+ subtitle = _ref.subtitle,
20
+ moreIcon = _ref.moreIcon,
21
+ moreText = _ref.moreText,
22
+ href = _ref.href,
23
+ _ref$target = _ref.target,
24
+ target = _ref$target === void 0 ? '_self' : _ref$target,
25
+ rel = _ref.rel,
26
+ _ref$size = _ref.size,
27
+ size = _ref$size === void 0 ? 'small' : _ref$size,
28
+ className = _ref.className,
29
+ _ref$classes = _ref.classes,
30
+ classes = _ref$classes === void 0 ? {} : _ref$classes,
31
+ dataAttrs = _ref.dataAttrs;
32
+ var isLink = !!href;
33
+ var ElementType = isLink ? 'a' : 'div';
34
+ var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
35
+ return /*#__PURE__*/React.createElement(ElementType, (0, _extends2["default"])({
36
+ className: cn({
37
+ size: size,
38
+ active: isLink
39
+ }, [className, classes.root])
40
+ }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
41
+ href: href,
42
+ target: isLink ? target : undefined,
43
+ rel: isLink ? currentRel : undefined,
44
+ style: {
45
+ backgroundImage: "url(".concat(imageSrc, ")")
46
+ }
47
+ }), /*#__PURE__*/React.createElement("div", {
48
+ className: cn('inner')
49
+ }, /*#__PURE__*/React.createElement("div", {
50
+ className: cn('title')
51
+ }, (0, _uiHelpers.convert)(title, {})), subtitle && /*#__PURE__*/React.createElement("div", {
52
+ className: cn('subtitle')
53
+ }, (0, _uiHelpers.convert)(subtitle, {})), !!moreText && /*#__PURE__*/React.createElement("div", {
54
+ className: cn('more')
55
+ }, !!moreIcon && /*#__PURE__*/React.createElement("div", {
56
+ className: cn('more-icon')
57
+ }, moreIcon), (0, _uiHelpers.convert)(moreText, {}))));
58
+ };
59
+ var _default = exports["default"] = DarkGradientCard;
@@ -0,0 +1,20 @@
1
+ type TargetType = '_self' | '_blank' | '_parent' | '_top';
2
+ export type ItemType = {
3
+ /** Изображение */
4
+ imageSrc: string;
5
+ /** Заголовок */
6
+ title: string;
7
+ /** Подзаголовок */
8
+ subtitle?: string;
9
+ /** Иконка */
10
+ moreIcon?: JSX.Element;
11
+ /** Текст */
12
+ moreText?: string;
13
+ /** Ссылка */
14
+ href?: string;
15
+ /** Атрибут ссылки target */
16
+ target?: TargetType;
17
+ /** Атрибут ссылки rel */
18
+ rel?: string;
19
+ };
20
+ export {};
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -74,6 +74,8 @@ export interface IImageBannerProps {
74
74
  imageAlt?: string;
75
75
  /** Выравнивание изображения по вертикали (по умолчанию center) */
76
76
  imageVerticalAlign?: ImageVerticalAlignType;
77
+ /** Приоритет загрузки изображения */
78
+ fetchPriority?: 'auto' | 'high' | 'low';
77
79
  /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */
78
80
  autoHeight?: boolean;
79
81
  /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
@@ -77,6 +77,8 @@ var ImageBanner = function ImageBanner(_ref2) {
77
77
  imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
78
78
  _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
79
79
  imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
80
+ _ref2$fetchPriority = _ref2.fetchPriority,
81
+ fetchPriority = _ref2$fetchPriority === void 0 ? 'auto' : _ref2$fetchPriority,
80
82
  title = _ref2.title,
81
83
  description = _ref2.description,
82
84
  cost = _ref2.cost,
@@ -147,7 +149,8 @@ var ImageBanner = function ImageBanner(_ref2) {
147
149
  className: cn('image', [classes.image]),
148
150
  src: imageMobile || imageMobile2x,
149
151
  srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
150
- alt: imageAlt
152
+ alt: imageAlt,
153
+ fetchPriority: fetchPriority
151
154
  })));
152
155
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
153
156
  className: cn({
@@ -1,4 +1,5 @@
1
1
  export type useResolutionsReturnType = {
2
+ isDesktopWide: boolean;
2
3
  isDesktop: boolean;
3
4
  isMobile: boolean;
4
5
  isTablet: boolean;
@@ -12,7 +12,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default":
12
12
  var MOBILE_MIDDLE_END = _uiHelpers.breakpoints.MOBILE_MIDDLE_END,
13
13
  MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START,
14
14
  MOBILE_BIG_END = _uiHelpers.breakpoints.MOBILE_BIG_END,
15
- DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START;
15
+ DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START,
16
+ DESKTOP_MIDDLE_START = _uiHelpers.breakpoints.DESKTOP_MIDDLE_START;
16
17
  var useResolutions = function useResolutions() {
17
18
  var _React$useState = _react["default"].useState(false),
18
19
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -26,6 +27,10 @@ var useResolutions = function useResolutions() {
26
27
  _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
27
28
  isDesktop = _React$useState6[0],
28
29
  setIsDesktop = _React$useState6[1];
30
+ var _React$useState7 = _react["default"].useState(false),
31
+ _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
32
+ isDesktopWide = _React$useState8[0],
33
+ setIsDesktopWide = _React$useState8[1];
29
34
  _react["default"].useEffect(function () {
30
35
  if (typeof window === 'undefined') {
31
36
  return undefined;
@@ -35,22 +40,27 @@ var useResolutions = function useResolutions() {
35
40
  var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
36
41
  var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
37
42
  var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
43
+ var desktopWideQuery = matchMedia("(min-width: ".concat(DESKTOP_MIDDLE_START, "px)"));
38
44
  var handleResize = function handleResize() {
39
45
  setIsMobile(mobileQuery.matches);
40
46
  setIsTablet(tabletQuery.matches);
41
47
  setIsDesktop(desktopQuery.matches);
48
+ setIsDesktopWide(desktopWideQuery.matches);
42
49
  };
43
50
  handleResize();
44
51
  mobileQuery.addEventListener('change', handleResize);
45
52
  tabletQuery.addEventListener('change', handleResize);
46
53
  desktopQuery.addEventListener('change', handleResize);
54
+ desktopWideQuery.addEventListener('change', handleResize);
47
55
  return function () {
48
56
  mobileQuery.removeEventListener('change', handleResize);
49
57
  tabletQuery.removeEventListener('change', handleResize);
50
58
  desktopQuery.removeEventListener('change', handleResize);
59
+ desktopWideQuery.addEventListener('change', handleResize);
51
60
  };
52
61
  }, []);
53
62
  return {
63
+ isDesktopWide: isDesktopWide,
54
64
  isDesktop: isDesktop,
55
65
  isMobile: isMobile,
56
66
  isTablet: isTablet
@@ -17,6 +17,8 @@ export { default as Card } from './components/Card/Card';
17
17
  export { default as CardsBox } from './components/CardsBox/CardsBox';
18
18
  export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
19
19
  export { default as Container } from './components/Container/Container';
20
+ export { default as DarkGradientCard } from './components/DarkGradientCards/components/DarkGradientCard';
21
+ export { default as DarkGradientCards } from './components/DarkGradientCards/DarkGradientCards';
20
22
  export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
21
23
  export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
22
24
  export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';
package/dist/lib/index.js CHANGED
@@ -117,6 +117,18 @@ Object.defineProperty(exports, "Container", {
117
117
  return _Container["default"];
118
118
  }
119
119
  });
120
+ Object.defineProperty(exports, "DarkGradientCard", {
121
+ enumerable: true,
122
+ get: function get() {
123
+ return _DarkGradientCard["default"];
124
+ }
125
+ });
126
+ Object.defineProperty(exports, "DarkGradientCards", {
127
+ enumerable: true,
128
+ get: function get() {
129
+ return _DarkGradientCards["default"];
130
+ }
131
+ });
120
132
  Object.defineProperty(exports, "DownloadLink", {
121
133
  enumerable: true,
122
134
  get: function get() {
@@ -334,6 +346,8 @@ var _Card = _interopRequireDefault(require("./components/Card/Card"));
334
346
  var _CardsBox = _interopRequireDefault(require("./components/CardsBox/CardsBox"));
335
347
  var _CarouselBox = _interopRequireDefault(require("./components/CarouselBox/CarouselBox"));
336
348
  var _Container = _interopRequireDefault(require("./components/Container/Container"));
349
+ var _DarkGradientCard = _interopRequireDefault(require("./components/DarkGradientCards/components/DarkGradientCard"));
350
+ var _DarkGradientCards = _interopRequireDefault(require("./components/DarkGradientCards/DarkGradientCards"));
337
351
  var _DownloadLink = _interopRequireDefault(require("./components/DownloadLinks/DownloadLink"));
338
352
  var _DownloadLinks = _interopRequireDefault(require("./components/DownloadLinks/DownloadLinks"));
339
353
  var _FaqWrapper = _interopRequireDefault(require("./components/FaqWrapper/FaqWrapper"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "7.0.0",
3
+ "version": "7.1.1",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -85,5 +85,5 @@
85
85
  "lodash.throttle": "^4.1.1",
86
86
  "swiper": "^11.1.1"
87
87
  },
88
- "gitHead": "2c940e898c9fa64896b60bf75c59ff3467cbce4f"
88
+ "gitHead": "986eb3d4044ce40b3322311b711518ed450f036a"
89
89
  }