@megafon/ui-shared 6.3.0 → 6.5.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 (66) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/es/components/Card/Card.css +1 -1
  3. package/dist/es/components/Container/Container.css +934 -7
  4. package/dist/es/components/DarkGradientCards/DarkGradientCards.css +18 -0
  5. package/dist/es/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
  6. package/dist/es/components/DarkGradientCards/DarkGradientCards.js +88 -0
  7. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.css +175 -0
  8. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
  9. package/dist/es/components/DarkGradientCards/components/DarkGradientCard.js +52 -0
  10. package/dist/es/components/DarkGradientCards/types.d.ts +21 -0
  11. package/dist/es/components/DarkGradientCards/types.js +0 -0
  12. package/dist/es/components/InfoCards/InfoCards.css +75 -0
  13. package/dist/es/components/InfoCards/InfoCards.d.ts +21 -0
  14. package/dist/es/components/InfoCards/InfoCards.js +66 -0
  15. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.css +237 -0
  16. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.d.ts +15 -0
  17. package/dist/es/components/InfoCards/components/InfoCard/InfoCard.js +108 -0
  18. package/dist/es/components/InfoCards/types.d.ts +26 -0
  19. package/dist/es/components/InfoCards/types.js +0 -0
  20. package/dist/es/components/SidePictureCards/SidePictureCards.d.ts +22 -0
  21. package/dist/es/components/SidePictureCards/SidePictureCards.js +77 -0
  22. package/dist/es/components/SidePictureCards/components/SidePictureCard.css +183 -0
  23. package/dist/es/components/SidePictureCards/components/SidePictureCard.d.ts +16 -0
  24. package/dist/es/components/SidePictureCards/components/SidePictureCard.js +91 -0
  25. package/dist/es/components/SidePictureCards/types.d.ts +46 -0
  26. package/dist/es/components/SidePictureCards/types.js +0 -0
  27. package/dist/es/components/TextWithIcon/TextWithIconItem.css +16 -7
  28. package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts +2 -0
  29. package/dist/es/components/TextWithIcon/TextWithIconItem.js +6 -1
  30. package/dist/es/hooks/useResolutions.d.ts +1 -0
  31. package/dist/es/hooks/useResolutions.js +12 -1
  32. package/dist/es/index.d.ts +6 -0
  33. package/dist/es/index.js +6 -0
  34. package/dist/lib/components/Card/Card.css +1 -1
  35. package/dist/lib/components/Container/Container.css +934 -7
  36. package/dist/lib/components/DarkGradientCards/DarkGradientCards.css +18 -0
  37. package/dist/lib/components/DarkGradientCards/DarkGradientCards.d.ts +28 -0
  38. package/dist/lib/components/DarkGradientCards/DarkGradientCards.js +104 -0
  39. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.css +175 -0
  40. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.d.ts +15 -0
  41. package/dist/lib/components/DarkGradientCards/components/DarkGradientCard.js +65 -0
  42. package/dist/lib/components/DarkGradientCards/types.d.ts +21 -0
  43. package/dist/lib/components/DarkGradientCards/types.js +1 -0
  44. package/dist/lib/components/InfoCards/InfoCards.css +75 -0
  45. package/dist/lib/components/InfoCards/InfoCards.d.ts +21 -0
  46. package/dist/lib/components/InfoCards/InfoCards.js +88 -0
  47. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.css +237 -0
  48. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.d.ts +15 -0
  49. package/dist/lib/components/InfoCards/components/InfoCard/InfoCard.js +129 -0
  50. package/dist/lib/components/InfoCards/types.d.ts +26 -0
  51. package/dist/lib/components/InfoCards/types.js +1 -0
  52. package/dist/lib/components/SidePictureCards/SidePictureCards.d.ts +22 -0
  53. package/dist/lib/components/SidePictureCards/SidePictureCards.js +95 -0
  54. package/dist/lib/components/SidePictureCards/components/SidePictureCard.css +183 -0
  55. package/dist/lib/components/SidePictureCards/components/SidePictureCard.d.ts +16 -0
  56. package/dist/lib/components/SidePictureCards/components/SidePictureCard.js +108 -0
  57. package/dist/lib/components/SidePictureCards/types.d.ts +46 -0
  58. package/dist/lib/components/SidePictureCards/types.js +1 -0
  59. package/dist/lib/components/TextWithIcon/TextWithIconItem.css +16 -7
  60. package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts +2 -0
  61. package/dist/lib/components/TextWithIcon/TextWithIconItem.js +6 -1
  62. package/dist/lib/hooks/useResolutions.d.ts +1 -0
  63. package/dist/lib/hooks/useResolutions.js +12 -1
  64. package/dist/lib/index.d.ts +6 -0
  65. package/dist/lib/index.js +48 -0
  66. package/package.json +2 -2
@@ -0,0 +1,183 @@
1
+ h1,
2
+ h2,
3
+ h3,
4
+ h4,
5
+ h5 {
6
+ margin: 0;
7
+ }
8
+ .mfui-side-picture-card {
9
+ display: grid;
10
+ grid-template-rows: 1fr auto;
11
+ grid-template-columns: auto;
12
+ gap: 20px;
13
+ min-height: 100%;
14
+ padding: 12px;
15
+ border-radius: 24px;
16
+ color: var(--content);
17
+ text-decoration: none;
18
+ background-color: var(--base);
19
+ -webkit-transition: background-color, -webkit-box-shadow;
20
+ transition: background-color, -webkit-box-shadow;
21
+ transition: background-color, box-shadow;
22
+ transition: background-color, box-shadow, -webkit-box-shadow;
23
+ -webkit-transition-duration: 0.3s;
24
+ transition-duration: 0.3s;
25
+ }
26
+ @media screen and (min-width: 1280px) {
27
+ .mfui-side-picture-card {
28
+ grid-template-rows: none;
29
+ grid-template-columns: 1fr 1fr;
30
+ }
31
+ }
32
+ .mfui-side-picture-card:hover {
33
+ text-decoration: none;
34
+ }
35
+ .mfui-side-picture-card__content {
36
+ display: -webkit-box;
37
+ display: -ms-flexbox;
38
+ display: flex;
39
+ -webkit-box-orient: vertical;
40
+ -webkit-box-direction: normal;
41
+ -ms-flex-direction: column;
42
+ flex-direction: column;
43
+ padding: 12px;
44
+ overflow: hidden;
45
+ }
46
+ @media screen and (min-width: 1280px) {
47
+ .mfui-side-picture-card__content {
48
+ padding: 12px 0 12px 12px;
49
+ }
50
+ }
51
+ .mfui-side-picture-card__title {
52
+ /* stylelint-disable-next-line value-no-vendor-prefix */
53
+ display: -webkit-box;
54
+ overflow: hidden;
55
+ white-space: normal;
56
+ text-overflow: ellipsis;
57
+ -webkit-box-orient: vertical;
58
+ -webkit-line-clamp: 2;
59
+ margin-bottom: 16px;
60
+ }
61
+ @media screen and (min-width: 1280px) {
62
+ .mfui-side-picture-card__title {
63
+ margin-bottom: 24px;
64
+ }
65
+ }
66
+ .mfui-side-picture-card__items {
67
+ display: -webkit-box;
68
+ display: -ms-flexbox;
69
+ display: flex;
70
+ -webkit-box-orient: vertical;
71
+ -webkit-box-direction: normal;
72
+ -ms-flex-direction: column;
73
+ flex-direction: column;
74
+ gap: 12px;
75
+ margin-bottom: auto;
76
+ }
77
+ @media screen and (min-width: 1280px) {
78
+ .mfui-side-picture-card__items {
79
+ gap: 16px;
80
+ }
81
+ }
82
+ .mfui-side-picture-card__item {
83
+ display: -webkit-box;
84
+ display: -ms-flexbox;
85
+ display: flex;
86
+ gap: 12px;
87
+ }
88
+ .mfui-side-picture-card__item-icon {
89
+ display: block;
90
+ width: 32px;
91
+ min-width: 32px;
92
+ max-height: 32px;
93
+ }
94
+ .mfui-side-picture-card__item-icon svg {
95
+ display: block;
96
+ width: 100%;
97
+ height: 100%;
98
+ fill: var(--brandGreen);
99
+ }
100
+ .mfui-side-picture-card__item-description {
101
+ display: -webkit-box;
102
+ display: -ms-flexbox;
103
+ display: flex;
104
+ -webkit-box-orient: vertical;
105
+ -webkit-box-direction: normal;
106
+ -ms-flex-direction: column;
107
+ flex-direction: column;
108
+ gap: 4px;
109
+ -webkit-box-pack: center;
110
+ -ms-flex-pack: center;
111
+ justify-content: center;
112
+ }
113
+ .mfui-side-picture-card__item-text {
114
+ font-size: 15px;
115
+ line-height: 24px;
116
+ font-weight: 400;
117
+ /* stylelint-disable-next-line value-no-vendor-prefix */
118
+ display: -webkit-box;
119
+ overflow: hidden;
120
+ white-space: normal;
121
+ text-overflow: ellipsis;
122
+ -webkit-box-orient: vertical;
123
+ -webkit-line-clamp: 3;
124
+ }
125
+ .mfui-side-picture-card__item-info {
126
+ font-weight: 500;
127
+ font-size: 18px;
128
+ line-height: 24px;
129
+ letter-spacing: 0.5px;
130
+ /* stylelint-disable-next-line value-no-vendor-prefix */
131
+ display: -webkit-box;
132
+ overflow: hidden;
133
+ white-space: normal;
134
+ text-overflow: ellipsis;
135
+ -webkit-box-orient: vertical;
136
+ -webkit-line-clamp: 2;
137
+ }
138
+ @media screen and (min-width: 1280px) {
139
+ .mfui-side-picture-card__item-info {
140
+ font-size: 20px;
141
+ line-height: 28px;
142
+ }
143
+ }
144
+ .mfui-side-picture-card__button {
145
+ margin-top: 32px;
146
+ }
147
+ .mfui-side-picture-card__picture {
148
+ position: relative;
149
+ height: 172px;
150
+ }
151
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
152
+ .mfui-side-picture-card__picture {
153
+ height: 197px;
154
+ }
155
+ }
156
+ @media screen and (min-width: 1024px) and (max-width: 1279px) {
157
+ .mfui-side-picture-card__picture {
158
+ height: 270px;
159
+ }
160
+ }
161
+ @media screen and (min-width: 1280px) {
162
+ .mfui-side-picture-card__picture {
163
+ height: 100%;
164
+ }
165
+ }
166
+ .mfui-side-picture-card__image {
167
+ position: absolute;
168
+ width: 100%;
169
+ height: 100%;
170
+ border-radius: 24px;
171
+ -o-object-fit: cover;
172
+ object-fit: cover;
173
+ }
174
+ .mfui-side-picture-card_active:hover:not(.mfui-side-picture-card_background_gray) {
175
+ -webkit-box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
176
+ box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
177
+ }
178
+ .mfui-side-picture-card_background_gray {
179
+ background-color: var(--spbSky0);
180
+ }
181
+ .mfui-side-picture-card_background_gray.mfui-side-picture-card_active:hover {
182
+ background-color: var(--spbSky1);
183
+ }
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ import { BackgroundType, CardDataType } from '../types';
3
+ import './SidePictureCard.less';
4
+ export declare type SidePictureCardType = CardDataType & {
5
+ background: BackgroundType;
6
+ classes?: {
7
+ root?: string;
8
+ button?: string;
9
+ };
10
+ dataAttrs?: {
11
+ root?: Record<string, string>;
12
+ button?: Record<string, string>;
13
+ };
14
+ };
15
+ declare const SidePictureCard: React.FC<SidePictureCardType>;
16
+ export default SidePictureCard;
@@ -0,0 +1,108 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports["default"] = void 0;
7
+
8
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
+
10
+ require("core-js/modules/es.array.slice.js");
11
+
12
+ require("core-js/modules/es.array.map.js");
13
+
14
+ require("core-js/modules/es.array.concat.js");
15
+
16
+ var _react = _interopRequireDefault(require("react"));
17
+
18
+ var _uiCore = require("@megafon/ui-core");
19
+
20
+ var _uiHelpers = require("@megafon/ui-helpers");
21
+
22
+ var _setRelAttribute = require("../../../helpers/setRelAttribute");
23
+
24
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
25
+
26
+ var MAX_ICON_ITEMS_COUNT = 4;
27
+ var cn = (0, _uiHelpers.cnCreate)('mfui-side-picture-card');
28
+
29
+ var SidePictureCard = function SidePictureCard(_ref) {
30
+ var background = _ref.background,
31
+ title = _ref.title,
32
+ image = _ref.image,
33
+ _ref$iconItems = _ref.iconItems,
34
+ iconItems = _ref$iconItems === void 0 ? [] : _ref$iconItems,
35
+ _ref$button = _ref.button,
36
+ button = _ref$button === void 0 ? {} : _ref$button,
37
+ href = _ref.href,
38
+ target = _ref.target,
39
+ rel = _ref.rel,
40
+ _ref$classes = _ref.classes,
41
+ classes = _ref$classes === void 0 ? {} : _ref$classes,
42
+ dataAttrs = _ref.dataAttrs;
43
+ var buttonTitle = button.title,
44
+ buttonHref = button.href,
45
+ buttonTarget = button.target,
46
+ buttonRel = button.rel;
47
+ var isLink = !!href && !buttonHref;
48
+ var ElementType = isLink ? 'a' : 'div';
49
+ var currentRel = (0, _setRelAttribute.setRelAttribute)(rel, target);
50
+ var currentButtonRel = (0, _setRelAttribute.setRelAttribute)(buttonRel, buttonTarget);
51
+ var visibleIconItems = iconItems.slice(0, MAX_ICON_ITEMS_COUNT);
52
+ var items = visibleIconItems.map(function (item, i) {
53
+ var icon = item.icon,
54
+ _item$text = item.text,
55
+ text = _item$text === void 0 ? '' : _item$text,
56
+ _item$info = item.info,
57
+ info = _item$info === void 0 ? '' : _item$info;
58
+ return /*#__PURE__*/_react["default"].createElement("div", {
59
+ className: cn('item'),
60
+ key: "".concat(text || info, "_").concat(i)
61
+ }, /*#__PURE__*/_react["default"].createElement("div", {
62
+ className: cn('item-icon')
63
+ }, icon), /*#__PURE__*/_react["default"].createElement("div", {
64
+ className: cn('item-description')
65
+ }, !!text && /*#__PURE__*/_react["default"].createElement("div", {
66
+ className: cn('item-text')
67
+ }, (0, _uiHelpers.convert)(text, {})), !!info && /*#__PURE__*/_react["default"].createElement("div", {
68
+ className: cn('item-info')
69
+ }, (0, _uiHelpers.convert)(info, {}))));
70
+ });
71
+ return /*#__PURE__*/_react["default"].createElement(ElementType, (0, _extends2["default"])({
72
+ className: cn({
73
+ background: background,
74
+ active: isLink
75
+ }, [classes.root])
76
+ }, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, {
77
+ href: href,
78
+ target: isLink ? target : undefined,
79
+ rel: isLink ? currentRel : undefined
80
+ }), /*#__PURE__*/_react["default"].createElement("div", {
81
+ className: cn('content')
82
+ }, !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
83
+ className: cn('title'),
84
+ as: "h3"
85
+ }, (0, _uiHelpers.convert)(title, {})), /*#__PURE__*/_react["default"].createElement("div", {
86
+ className: cn('items')
87
+ }, items), !!buttonTitle && /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
88
+ className: cn('button', [classes.button]),
89
+ dataAttrs: {
90
+ root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
91
+ },
92
+ href: buttonHref,
93
+ target: buttonTarget,
94
+ rel: currentButtonRel
95
+ }, buttonTitle)), /*#__PURE__*/_react["default"].createElement("picture", {
96
+ className: cn('picture')
97
+ }, /*#__PURE__*/_react["default"].createElement("source", {
98
+ media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_MIDDLE_START, "px)"),
99
+ srcSet: image.srcWide
100
+ }), /*#__PURE__*/_react["default"].createElement("img", {
101
+ className: cn('image'),
102
+ src: image.src,
103
+ alt: image.alt || 'image'
104
+ })));
105
+ };
106
+
107
+ var _default = SidePictureCard;
108
+ exports["default"] = _default;
@@ -0,0 +1,46 @@
1
+ /// <reference types="react" />
2
+ declare type TargetType = '_self' | '_blank' | '_parent' | '_top';
3
+ declare type ButtonType = {
4
+ /** Название */
5
+ title: string;
6
+ /** Ссылка */
7
+ href: string;
8
+ /** Атрибут ссылки target */
9
+ target?: TargetType;
10
+ /** Атрибут ссылки rel */
11
+ rel?: string;
12
+ };
13
+ declare type ImageType = {
14
+ /** Изображение на разрешении экрана 0-1279 */
15
+ src: string;
16
+ /** Изображение на разрешении экрана 1280+ */
17
+ srcWide: string;
18
+ /** Значение тега alt для изображения */
19
+ alt?: string;
20
+ };
21
+ declare type IconContentType = {
22
+ /** Иконка */
23
+ icon: JSX.Element;
24
+ /** Текст-описание */
25
+ text?: string;
26
+ /** Дополнительная информация, значение */
27
+ info?: string;
28
+ };
29
+ export declare type CardDataType = {
30
+ /** Заголовок */
31
+ title?: string;
32
+ /** Изображение */
33
+ image: ImageType;
34
+ /** Список пунктов с иконками */
35
+ iconItems: IconContentType[];
36
+ /** Кнопка */
37
+ button?: ButtonType;
38
+ /** Ссылка */
39
+ href?: string;
40
+ /** Атрибут ссылки target */
41
+ target?: TargetType;
42
+ /** Атрибут ссылки rel */
43
+ rel?: string;
44
+ };
45
+ export declare type BackgroundType = 'white' | 'gray';
46
+ export {};
@@ -0,0 +1 @@
1
+ "use strict";
@@ -17,13 +17,22 @@ h5 {
17
17
  margin-top: 12px;
18
18
  }
19
19
  .mfui-text-with-icon-item__svg-icon {
20
- width: 44px;
21
- min-width: 44px;
22
- height: 44px;
23
- min-height: 44px;
24
- margin-right: 16px;
25
- padding: 6px;
20
+ -webkit-box-sizing: border-box;
21
+ box-sizing: border-box;
22
+ width: 40px;
23
+ min-width: 40px;
24
+ height: 40px;
25
+ min-height: 40px;
26
+ margin-right: 12px;
27
+ overflow: hidden;
28
+ }
29
+ .mfui-text-with-icon-item_icon-background_stroke .mfui-text-with-icon-item__svg-icon {
30
+ padding: 3px;
26
31
  border: 1px solid var(--spbSky2);
27
32
  border-radius: 50%;
28
- overflow: hidden;
33
+ }
34
+ .mfui-text-with-icon-item_icon-background_gray .mfui-text-with-icon-item__svg-icon {
35
+ padding: 4px;
36
+ border-radius: 50%;
37
+ background-color: var(--spbSky0);
29
38
  }
@@ -10,6 +10,8 @@ export interface ITextWithIconItem {
10
10
  text: string | string[];
11
11
  /** Иконка */
12
12
  icon: React.ReactNode;
13
+ /** Фон для иконки */
14
+ iconBackground?: 'no' | 'stroke' | 'gray';
13
15
  /** Ссылка на корневой элемент */
14
16
  rootRef?: React.Ref<HTMLDivElement>;
15
17
  /** Дополнительные data атрибуты к внутренним элементам */
@@ -34,6 +34,8 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
34
34
  classes = _ref$classes === void 0 ? {} : _ref$classes,
35
35
  text = _ref.text,
36
36
  icon = _ref.icon,
37
+ _ref$iconBackground = _ref.iconBackground,
38
+ iconBackground = _ref$iconBackground === void 0 ? 'no' : _ref$iconBackground,
37
39
  rootRef = _ref.rootRef,
38
40
  dataAttrs = _ref.dataAttrs;
39
41
  var renderText = React.useMemo(function () {
@@ -46,7 +48,9 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
46
48
  return (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig);
47
49
  }, [text]);
48
50
  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
49
- className: cn([className]),
51
+ className: cn({
52
+ 'icon-background': iconBackground
53
+ }, [className]),
50
54
  ref: rootRef
51
55
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
52
56
  className: cn('svg-icon', [classes.icon]),
@@ -60,6 +64,7 @@ var TextWithIconItem = function TextWithIconItem(_ref) {
60
64
  TextWithIconItem.propTypes = {
61
65
  text: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.string.isRequired)]).isRequired,
62
66
  icon: PropTypes.node.isRequired,
67
+ iconBackground: PropTypes.oneOf(['no', 'stroke', 'gray']),
63
68
  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
64
69
  current: PropTypes.elementType
65
70
  }), PropTypes.any])]),
@@ -1,4 +1,5 @@
1
1
  export declare type useResolutionsReturnType = {
2
+ isDesktopWide: boolean;
2
3
  isDesktop: boolean;
3
4
  isMobile: boolean;
4
5
  isTablet: boolean;
@@ -18,7 +18,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
18
18
  var MOBILE_MIDDLE_END = _uiHelpers.breakpoints.MOBILE_MIDDLE_END,
19
19
  MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START,
20
20
  MOBILE_BIG_END = _uiHelpers.breakpoints.MOBILE_BIG_END,
21
- DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START;
21
+ DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START,
22
+ DESKTOP_MIDDLE_START = _uiHelpers.breakpoints.DESKTOP_MIDDLE_START;
22
23
 
23
24
  var useResolutions = function useResolutions() {
24
25
  var _React$useState = _react["default"].useState(false),
@@ -36,6 +37,11 @@ var useResolutions = function useResolutions() {
36
37
  isDesktop = _React$useState6[0],
37
38
  setIsDesktop = _React$useState6[1];
38
39
 
40
+ var _React$useState7 = _react["default"].useState(false),
41
+ _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
42
+ isDesktopWide = _React$useState8[0],
43
+ setIsDesktopWide = _React$useState8[1];
44
+
39
45
  _react["default"].useEffect(function () {
40
46
  if (typeof window === 'undefined') {
41
47
  return undefined;
@@ -46,25 +52,30 @@ var useResolutions = function useResolutions() {
46
52
  var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
47
53
  var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
48
54
  var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
55
+ var desktopWideQuery = matchMedia("(min-width: ".concat(DESKTOP_MIDDLE_START, "px)"));
49
56
 
50
57
  var handleResize = function handleResize() {
51
58
  setIsMobile(mobileQuery.matches);
52
59
  setIsTablet(tabletQuery.matches);
53
60
  setIsDesktop(desktopQuery.matches);
61
+ setIsDesktopWide(desktopWideQuery.matches);
54
62
  };
55
63
 
56
64
  handleResize();
57
65
  mobileQuery.addEventListener('change', handleResize);
58
66
  tabletQuery.addEventListener('change', handleResize);
59
67
  desktopQuery.addEventListener('change', handleResize);
68
+ desktopWideQuery.addEventListener('change', handleResize);
60
69
  return function () {
61
70
  mobileQuery.removeEventListener('change', handleResize);
62
71
  tabletQuery.removeEventListener('change', handleResize);
63
72
  desktopQuery.removeEventListener('change', handleResize);
73
+ desktopWideQuery.addEventListener('change', handleResize);
64
74
  };
65
75
  }, []);
66
76
 
67
77
  return {
78
+ isDesktopWide: isDesktopWide,
68
79
  isDesktop: isDesktop,
69
80
  isMobile: isMobile,
70
81
  isTablet: isTablet
@@ -17,10 +17,14 @@ 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';
23
25
  export { default as ImageBanner } from './components/ImageBanner/ImageBanner';
26
+ export { default as InfoCard } from './components/InfoCards/components/InfoCard/InfoCard';
27
+ export { default as InfoCards } from './components/InfoCards/InfoCards';
24
28
  export { default as Instructions } from './components/Instructions/Instructions';
25
29
  export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
26
30
  export { default as PageTitle } from './components/PageTitle/PageTitle';
@@ -28,6 +32,8 @@ export { default as Partners } from './components/Partners/Partners';
28
32
  export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
29
33
  export { default as Property } from './components/Property/Property';
30
34
  export { default as PropertyDescription } from './components/Property/PropertyDescription';
35
+ export { default as SidePictureCard } from './components/SidePictureCards/components/SidePictureCard';
36
+ export { default as SidePictureCards } from './components/SidePictureCards/SidePictureCards';
31
37
  export { default as Steps } from './components/Steps/Steps';
32
38
  export { default as StepsItem } from './components/Steps/StepsItem';
33
39
  export { default as StoreBanner } from './components/StoreBanner/StoreBanner';
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() {
@@ -141,6 +153,18 @@ Object.defineProperty(exports, "ImageBanner", {
141
153
  return _ImageBanner["default"];
142
154
  }
143
155
  });
156
+ Object.defineProperty(exports, "InfoCard", {
157
+ enumerable: true,
158
+ get: function get() {
159
+ return _InfoCard["default"];
160
+ }
161
+ });
162
+ Object.defineProperty(exports, "InfoCards", {
163
+ enumerable: true,
164
+ get: function get() {
165
+ return _InfoCards["default"];
166
+ }
167
+ });
144
168
  Object.defineProperty(exports, "Instructions", {
145
169
  enumerable: true,
146
170
  get: function get() {
@@ -183,6 +207,18 @@ Object.defineProperty(exports, "PropertyDescription", {
183
207
  return _PropertyDescription["default"];
184
208
  }
185
209
  });
210
+ Object.defineProperty(exports, "SidePictureCard", {
211
+ enumerable: true,
212
+ get: function get() {
213
+ return _SidePictureCard["default"];
214
+ }
215
+ });
216
+ Object.defineProperty(exports, "SidePictureCards", {
217
+ enumerable: true,
218
+ get: function get() {
219
+ return _SidePictureCards["default"];
220
+ }
221
+ });
186
222
  Object.defineProperty(exports, "Steps", {
187
223
  enumerable: true,
188
224
  get: function get() {
@@ -330,6 +366,10 @@ var _CarouselBox = _interopRequireDefault(require("./components/CarouselBox/Caro
330
366
 
331
367
  var _Container = _interopRequireDefault(require("./components/Container/Container"));
332
368
 
369
+ var _DarkGradientCard = _interopRequireDefault(require("./components/DarkGradientCards/components/DarkGradientCard"));
370
+
371
+ var _DarkGradientCards = _interopRequireDefault(require("./components/DarkGradientCards/DarkGradientCards"));
372
+
333
373
  var _DownloadLink = _interopRequireDefault(require("./components/DownloadLinks/DownloadLink"));
334
374
 
335
375
  var _DownloadLinks = _interopRequireDefault(require("./components/DownloadLinks/DownloadLinks"));
@@ -338,6 +378,10 @@ var _FaqWrapper = _interopRequireDefault(require("./components/FaqWrapper/FaqWra
338
378
 
339
379
  var _ImageBanner = _interopRequireDefault(require("./components/ImageBanner/ImageBanner"));
340
380
 
381
+ var _InfoCard = _interopRequireDefault(require("./components/InfoCards/components/InfoCard/InfoCard"));
382
+
383
+ var _InfoCards = _interopRequireDefault(require("./components/InfoCards/InfoCards"));
384
+
341
385
  var _Instructions = _interopRequireDefault(require("./components/Instructions/Instructions"));
342
386
 
343
387
  var _NotificationBox = _interopRequireDefault(require("./components/NotificationBox/NotificationBox"));
@@ -352,6 +396,10 @@ var _Property = _interopRequireDefault(require("./components/Property/Property")
352
396
 
353
397
  var _PropertyDescription = _interopRequireDefault(require("./components/Property/PropertyDescription"));
354
398
 
399
+ var _SidePictureCard = _interopRequireDefault(require("./components/SidePictureCards/components/SidePictureCard"));
400
+
401
+ var _SidePictureCards = _interopRequireDefault(require("./components/SidePictureCards/SidePictureCards"));
402
+
355
403
  var _Steps = _interopRequireDefault(require("./components/Steps/Steps"));
356
404
 
357
405
  var _StepsItem = _interopRequireDefault(require("./components/Steps/StepsItem"));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "6.3.0",
3
+ "version": "6.5.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -90,5 +90,5 @@
90
90
  "prop-types": "^15.7.2",
91
91
  "swiper": "^6.5.6"
92
92
  },
93
- "gitHead": "fe62002ae1623a7f9316553d35c8c2fa4df36bd7"
93
+ "gitHead": "aeabd8b477419a82c0446c18d275951ac86227ab"
94
94
  }