@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.
- package/dist/es/components/Container/Container.css +1 -1
- package/dist/es/components/DarkGradientCards/DarkGradientCards.css +1 -0
- package/dist/es/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
- package/dist/es/components/DarkGradientCards/DarkGradientCards.js +61 -0
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css +1 -0
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
- package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js +50 -0
- package/dist/es/components/DarkGradientCards/types.d.ts +20 -0
- package/dist/es/components/DarkGradientCards/types.js +1 -0
- package/dist/es/components/ImageBanner/ImageBanner.d.ts +2 -0
- package/dist/es/components/ImageBanner/ImageBanner.js +4 -1
- package/dist/es/hooks/useResolutions.d.ts +1 -0
- package/dist/es/hooks/useResolutions.js +11 -1
- package/dist/es/index.d.ts +2 -0
- package/dist/es/index.js +2 -0
- package/dist/lib/components/Container/Container.css +1 -1
- package/dist/lib/components/DarkGradientCards/DarkGradientCards.css +1 -0
- package/dist/lib/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
- package/dist/lib/components/DarkGradientCards/DarkGradientCards.js +70 -0
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.css +1 -0
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
- package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.js +59 -0
- package/dist/lib/components/DarkGradientCards/types.d.ts +20 -0
- package/dist/lib/components/DarkGradientCards/types.js +5 -0
- package/dist/lib/components/ImageBanner/ImageBanner.d.ts +2 -0
- package/dist/lib/components/ImageBanner/ImageBanner.js +4 -1
- package/dist/lib/hooks/useResolutions.d.ts +1 -0
- package/dist/lib/hooks/useResolutions.js +11 -1
- package/dist/lib/index.d.ts +2 -0
- package/dist/lib/index.js +14 -0
- 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 {};
|
@@ -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({
|
@@ -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
|
package/dist/lib/index.d.ts
CHANGED
@@ -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.
|
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": "
|
88
|
+
"gitHead": "986eb3d4044ce40b3322311b711518ed450f036a"
|
89
89
|
}
|