@megafon/ui-shared 5.14.0 → 5.16.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.
@@ -7,26 +7,28 @@ h5 {
7
7
  }
8
8
  .mfui-image-banner {
9
9
  position: relative;
10
+ display: -webkit-box;
11
+ display: -ms-flexbox;
12
+ display: flex;
13
+ -webkit-box-orient: vertical;
14
+ -webkit-box-direction: normal;
15
+ -ms-flex-direction: column;
16
+ flex-direction: column;
17
+ -webkit-box-pack: justify;
18
+ -ms-flex-pack: justify;
19
+ justify-content: space-between;
10
20
  overflow: hidden;
11
21
  }
12
22
  @media screen and (min-width: 1024px) {
13
23
  .mfui-image-banner {
14
- height: 420px;
15
- padding: 0 80px;
16
- }
17
- }
18
- @media screen and (min-width: 1024px) {
19
- .mfui-image-banner__wrapper {
20
- display: -webkit-box;
21
- display: -ms-flexbox;
22
- display: flex;
24
+ -webkit-box-orient: horizontal;
25
+ -webkit-box-direction: normal;
26
+ -ms-flex-direction: row;
27
+ flex-direction: row;
23
28
  -webkit-box-align: center;
24
29
  -ms-flex-align: center;
25
30
  align-items: center;
26
- -webkit-box-pack: justify;
27
- -ms-flex-pack: justify;
28
- justify-content: space-between;
29
- height: 100%;
31
+ height: 420px;
30
32
  }
31
33
  }
32
34
  .mfui-image-banner__picture {
@@ -38,18 +40,14 @@ h5 {
38
40
  -webkit-box-pack: center;
39
41
  -ms-flex-pack: center;
40
42
  justify-content: center;
43
+ max-width: 672px;
41
44
  }
42
45
  @media screen and (min-width: 1024px) {
43
46
  .mfui-image-banner__picture {
44
- width: 356px;
47
+ width: 50%;
45
48
  height: 100%;
46
49
  }
47
50
  }
48
- @media screen and (min-width: 1280px) {
49
- .mfui-image-banner__picture {
50
- width: 408px;
51
- }
52
- }
53
51
  .mfui-image-banner__picture_v-align_top {
54
52
  -webkit-box-align: start;
55
53
  -ms-flex-align: start;
@@ -65,18 +63,18 @@ h5 {
65
63
  -ms-flex-align: end;
66
64
  align-items: flex-end;
67
65
  }
68
- .mfui-image-banner__background-image {
66
+ .mfui-image-banner__image {
69
67
  display: block;
70
68
  max-width: 100%;
71
- max-height: 250px;
69
+ max-height: 150px;
72
70
  }
73
71
  @media screen and (min-width: 768px) and (max-width: 1023px) {
74
- .mfui-image-banner__background-image {
75
- max-height: 280px;
72
+ .mfui-image-banner__image {
73
+ max-height: 230px;
76
74
  }
77
75
  }
78
76
  @media screen and (min-width: 1024px) {
79
- .mfui-image-banner__background-image {
77
+ .mfui-image-banner__image {
80
78
  max-height: 100%;
81
79
  -o-object-fit: contain;
82
80
  object-fit: contain;
@@ -84,6 +82,9 @@ h5 {
84
82
  }
85
83
  .mfui-image-banner__content {
86
84
  z-index: 1;
85
+ -webkit-box-flex: 1;
86
+ -ms-flex-positive: 1;
87
+ flex-grow: 1;
87
88
  }
88
89
  @media screen and (max-width: 1023px) {
89
90
  .mfui-image-banner__content {
@@ -95,9 +96,10 @@ h5 {
95
96
  text-align: center;
96
97
  }
97
98
  }
98
- @media screen and (max-width: 1023px) {
99
- .mfui-image-banner_bottom-offset .mfui-image-banner__content {
100
- padding-bottom: 72px;
99
+ @media screen and (min-width: 1024px) {
100
+ .mfui-image-banner__content {
101
+ width: 50%;
102
+ padding: 0 80px;
101
103
  }
102
104
  }
103
105
  .mfui-image-banner__description {
@@ -192,7 +194,7 @@ h5 {
192
194
  }
193
195
  @media screen and (min-width: 1024px) {
194
196
  .mfui-image-banner_auto-height .mfui-image-banner__content {
195
- padding: 48px 0;
197
+ padding: 48px 80px;
196
198
  }
197
199
  }
198
200
  @media screen and (min-width: 1024px) {
@@ -201,7 +203,12 @@ h5 {
201
203
  }
202
204
  }
203
205
  @media screen and (min-width: 1024px) {
204
- .mfui-image-banner_full-width .mfui-image-banner__background-image {
206
+ .mfui-image-banner_has-image .mfui-image-banner__content {
207
+ padding-right: 0;
208
+ }
209
+ }
210
+ @media screen and (min-width: 1024px) {
211
+ .mfui-image-banner_full-width .mfui-image-banner__image {
205
212
  position: absolute;
206
213
  right: 0;
207
214
  bottom: 0;
@@ -210,7 +217,7 @@ h5 {
210
217
  }
211
218
  }
212
219
  @media screen and (min-width: 1024px) {
213
- .mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__background-image {
220
+ .mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image {
214
221
  width: 100%;
215
222
  height: 100%;
216
223
  -o-object-fit: cover;
@@ -1,5 +1,4 @@
1
1
  import React, { Ref } from 'react';
2
- import { PriceBadge } from '@megafon/ui-core';
3
2
  import './ImageBanner.less';
4
3
  export declare const BackgroundColor: {
5
4
  readonly TRANSPARENT: "transparent";
@@ -26,11 +25,6 @@ export declare const ImageVerticalAlign: {
26
25
  readonly BOTTOM: "bottom";
27
26
  };
28
27
  export declare type ImageVerticalAlignType = typeof ImageVerticalAlign[keyof typeof ImageVerticalAlign];
29
- declare type PriceBadgeTypes = React.ComponentProps<typeof PriceBadge>;
30
- export declare type PriceBadgePropsType = Pick<PriceBadgeTypes, 'iconType'> & {
31
- /** Текст бейджа */
32
- text: string;
33
- };
34
28
  export interface IImageBannerProps {
35
29
  /** Дополнительные data атрибуты к внутренним элементам */
36
30
  dataAttrs?: {
@@ -43,22 +37,26 @@ export interface IImageBannerProps {
43
37
  classes?: {
44
38
  root?: string;
45
39
  image?: string;
40
+ imageSource?: string;
46
41
  title?: string;
47
42
  description?: string;
48
43
  cost?: string;
49
44
  badgesContainer?: string;
50
45
  badges?: string;
51
- badge?: string;
52
46
  adBlock?: string;
53
47
  };
54
48
  /** Ссылка на корневой элемент */
55
49
  rootRef?: Ref<HTMLDivElement>;
56
50
  /** Заголовок */
57
- title: string | React.ReactNode | React.ReactNode[];
51
+ title?: string | React.ReactNode | React.ReactNode[];
58
52
  /** Текст-описание */
59
53
  description?: string | React.ReactNode | React.ReactNode[];
60
54
  /** Строка со стоимостью услуги */
61
55
  cost?: string;
56
+ /** Тег заголовка на разрешении экрана 0-767 */
57
+ headerLevelMobile?: 'h1' | 'h2';
58
+ /** Тег заголовка на разрешении экрана 768+ */
59
+ headerLevel?: 'h1' | 'h2';
62
60
  /** Фоновый цвет */
63
61
  backgroundColor?: BackgroundColorType;
64
62
  /** Радиус границы */
@@ -79,12 +77,10 @@ export interface IImageBannerProps {
79
77
  autoHeight?: boolean;
80
78
  /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
81
79
  isImageFullWidth?: boolean;
82
- /** Данные для блока с бейджами */
83
- badges?: PriceBadgePropsType[];
84
- /** Дополнительный отступ снизу при использовании в баннере */
85
- hasBottomOffset?: boolean;
80
+ /** Бейджи */
81
+ badges?: JSX.Element[] | JSX.Element;
86
82
  /** Элемент блока с рекламой */
87
- adBlock?: JSX.Element;
83
+ adBlock?: JSX.Element | null;
88
84
  }
89
85
  declare const ImageBanner: React.FC<IImageBannerProps>;
90
86
  export default ImageBanner;
@@ -9,12 +9,12 @@ exports["default"] = exports.ImageVerticalAlign = exports.NavTheme = exports.Rad
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
12
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
13
+
12
14
  require("core-js/modules/es.symbol.js");
13
15
 
14
16
  require("core-js/modules/es.symbol.description.js");
15
17
 
16
- require("core-js/modules/es.array.map.js");
17
-
18
18
  require("core-js/modules/es.array.concat.js");
19
19
 
20
20
  require("core-js/modules/es.object.values.js");
@@ -105,33 +105,47 @@ var ImageBanner = function ImageBanner(_ref2) {
105
105
  title = _ref2.title,
106
106
  description = _ref2.description,
107
107
  cost = _ref2.cost,
108
+ _ref2$headerLevelMobi = _ref2.headerLevelMobile,
109
+ headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
110
+ _ref2$headerLevel = _ref2.headerLevel,
111
+ headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
108
112
  _ref2$backgroundColor = _ref2.backgroundColor,
109
113
  backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
110
114
  _ref2$radius = _ref2.radius,
111
115
  radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
112
116
  autoHeight = _ref2.autoHeight,
113
117
  isImageFullWidth = _ref2.isImageFullWidth,
114
- _ref2$badges = _ref2.badges,
115
- badges = _ref2$badges === void 0 ? [] : _ref2$badges,
116
- hasBottomOffset = _ref2.hasBottomOffset,
118
+ badges = _ref2.badges,
117
119
  adBlock = _ref2.adBlock,
118
120
  _ref2$children = _ref2.children,
119
121
  children = _ref2$children === void 0 ? [] : _ref2$children;
122
+
123
+ var _React$useState = _react["default"].useState(false),
124
+ _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
125
+ isMobile = _React$useState2[0],
126
+ setIsMobile = _React$useState2[1];
127
+
128
+ _react["default"].useEffect(function () {
129
+ var mediaQuery = window.matchMedia("(max-width: ".concat(_uiHelpers.breakpoints.MOBILE_MIDDLE_END, "px)"));
130
+
131
+ var handleMediaChange = function handleMediaChange(_ref3) {
132
+ var matches = _ref3.matches;
133
+ setIsMobile(matches);
134
+ };
135
+
136
+ setIsMobile(mediaQuery.matches);
137
+ mediaQuery.addEventListener('change', handleMediaChange);
138
+ return function () {
139
+ mediaQuery.removeEventListener('change', handleMediaChange);
140
+ };
141
+ }, []);
142
+
120
143
  var navTheme = getTheme(backgroundColor);
121
144
  var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
122
145
 
123
- var renderBadges = !!badges.length && /*#__PURE__*/_react["default"].createElement("div", {
146
+ var renderBadges = !!badges && /*#__PURE__*/_react["default"].createElement("div", {
124
147
  className: cn('badges', [classes.badges])
125
- }, badges.map(function (_ref3) {
126
- var text = _ref3.text,
127
- iconType = _ref3.iconType;
128
- return /*#__PURE__*/_react["default"].createElement(_uiCore.PriceBadge, {
129
- className: classes.badge,
130
- theme: navTheme,
131
- iconType: iconType,
132
- key: text
133
- }, text);
134
- }));
148
+ }, badges);
135
149
 
136
150
  var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
137
151
  className: cn('ad-block', [classes.adBlock])
@@ -143,7 +157,8 @@ var ImageBanner = function ImageBanner(_ref2) {
143
157
  className: cn('badges-container', [classes.badgesContainer])
144
158
  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
145
159
  className: cn('title', [classes.title]),
146
- color: "inherit"
160
+ color: "inherit",
161
+ as: isMobile ? headerLevelMobile : headerLevel
147
162
  }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
148
163
  className: cn('description', [classes.description]),
149
164
  as: "h5",
@@ -159,10 +174,11 @@ var ImageBanner = function ImageBanner(_ref2) {
159
174
  'v-align': imageVerticalAlign
160
175
  })
161
176
  }, /*#__PURE__*/_react["default"].createElement("source", {
177
+ className: classes.imageSource,
162
178
  media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
163
179
  srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
164
180
  }), /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
165
- className: cn('background-image', [classes.image]),
181
+ className: cn('image', [classes.image]),
166
182
  src: imageMobile || imageMobile2x,
167
183
  srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
168
184
  alt: imageAlt
@@ -175,13 +191,10 @@ var ImageBanner = function ImageBanner(_ref2) {
175
191
  'has-image': hasImage,
176
192
  'auto-height': autoHeight,
177
193
  'full-width': isImageFullWidth,
178
- 'bottom-offset': hasBottomOffset && !hasImage,
179
194
  radius: radius
180
195
  }, [className, classes.root]),
181
196
  ref: rootRef
182
- }), /*#__PURE__*/_react["default"].createElement("div", {
183
- className: cn('wrapper')
184
- }, renderContent, hasImage && renderImage));
197
+ }), renderContent, hasImage && renderImage);
185
198
  };
186
199
 
187
200
  ImageBanner.propTypes = {
@@ -193,6 +206,7 @@ ImageBanner.propTypes = {
193
206
  classes: PropTypes.shape({
194
207
  root: PropTypes.string,
195
208
  image: PropTypes.string,
209
+ imageSource: PropTypes.string,
196
210
  title: PropTypes.string,
197
211
  description: PropTypes.string,
198
212
  cost: PropTypes.string,
@@ -204,9 +218,11 @@ ImageBanner.propTypes = {
204
218
  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
205
219
  current: PropTypes.elementType
206
220
  }), PropTypes.any])]),
207
- title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
221
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
208
222
  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
209
223
  cost: PropTypes.string,
224
+ headerLevelMobile: PropTypes.oneOf(['h1', 'h2']),
225
+ headerLevel: PropTypes.oneOf(['h1', 'h2']),
210
226
  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
211
227
  radius: PropTypes.oneOf(Object.values(Radius)),
212
228
  imageMobile: PropTypes.string,
@@ -217,11 +233,7 @@ ImageBanner.propTypes = {
217
233
  imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
218
234
  autoHeight: PropTypes.bool,
219
235
  isImageFullWidth: PropTypes.bool,
220
- badges: PropTypes.arrayOf(PropTypes.shape({
221
- iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
222
- text: PropTypes.string.isRequired
223
- }).isRequired),
224
- hasBottomOffset: PropTypes.bool,
236
+ badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
225
237
  adBlock: PropTypes.element
226
238
  };
227
239
  var _default = ImageBanner;
@@ -14,18 +14,16 @@ h5 {
14
14
  align-items: center;
15
15
  }
16
16
  .mfui-text-with-icon-item:not(:first-of-type) {
17
- margin-top: 16px;
18
- }
19
- @media screen and (max-width: 767px) {
20
- .mfui-text-with-icon-item:not(:first-of-type) {
21
- margin-top: 24px;
22
- }
17
+ margin-top: 12px;
23
18
  }
24
19
  .mfui-text-with-icon-item__svg-icon {
25
- width: 40px;
26
- min-width: 40px;
27
- height: 40px;
28
- min-height: 40px;
20
+ width: 44px;
21
+ min-width: 44px;
22
+ height: 44px;
23
+ min-height: 44px;
29
24
  margin-right: 16px;
25
+ padding: 6px;
26
+ border: 1px solid var(--spbSky2);
27
+ border-radius: 50%;
30
28
  overflow: hidden;
31
29
  }
@@ -1,2 +1,2 @@
1
1
  import React from 'react';
2
- export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("../../../ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
2
+ export declare const getColumnConfig: (isFullWidth: boolean) => Pick<React.PropsWithChildren<import("@megafon/ui-core/dist/lib/components/Grid/GridColumn").IGridColumn>, "all" | "wide" | "mobile" | "desktop" | "tablet">;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "5.14.0",
3
+ "version": "5.16.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -48,7 +48,7 @@
48
48
  "@babel/preset-env": "^7.8.6",
49
49
  "@babel/preset-react": "^7.8.3",
50
50
  "@babel/preset-typescript": "^7.8.3",
51
- "@megafon/ui-icons": "^2.25.0",
51
+ "@megafon/ui-icons": "^2.26.0",
52
52
  "@svgr/core": "^2.4.1",
53
53
  "@testing-library/jest-dom": "5.16.2",
54
54
  "@testing-library/react": "12.1.2",
@@ -82,7 +82,7 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@babel/runtime": "^7.8.4",
85
- "@megafon/ui-core": "^5.16.0",
85
+ "@megafon/ui-core": "^5.18.0",
86
86
  "@megafon/ui-helpers": "^2.6.0",
87
87
  "core-js": "^3.6.4",
88
88
  "htmr": "^0.9.2",
@@ -90,5 +90,5 @@
90
90
  "prop-types": "^15.7.2",
91
91
  "swiper": "^6.5.6"
92
92
  },
93
- "gitHead": "0d4f96ecbc805db6a1b2200dd9adbb707349d474"
93
+ "gitHead": "083ea89de7d915f3d2d74aff90e4ec8213a235f5"
94
94
  }