@megafon/ui-shared 5.15.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.
@@ -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,12 +37,12 @@ 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
  /** Ссылка на корневой элемент */
@@ -83,8 +77,8 @@ export interface IImageBannerProps {
83
77
  autoHeight?: boolean;
84
78
  /** Изображение растягивается на всю ширину или вписывается в фиксированный фрейм (по умолчанию фрейм) */
85
79
  isImageFullWidth?: boolean;
86
- /** Данные для блока с бейджами */
87
- badges?: PriceBadgePropsType[];
80
+ /** Бейджи */
81
+ badges?: JSX.Element[] | JSX.Element;
88
82
  /** Элемент блока с рекламой */
89
83
  adBlock?: JSX.Element | null;
90
84
  }
@@ -15,8 +15,6 @@ require("core-js/modules/es.symbol.js");
15
15
 
16
16
  require("core-js/modules/es.symbol.description.js");
17
17
 
18
- require("core-js/modules/es.array.map.js");
19
-
20
18
  require("core-js/modules/es.array.concat.js");
21
19
 
22
20
  require("core-js/modules/es.object.values.js");
@@ -117,8 +115,7 @@ var ImageBanner = function ImageBanner(_ref2) {
117
115
  radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
118
116
  autoHeight = _ref2.autoHeight,
119
117
  isImageFullWidth = _ref2.isImageFullWidth,
120
- _ref2$badges = _ref2.badges,
121
- badges = _ref2$badges === void 0 ? [] : _ref2$badges,
118
+ badges = _ref2.badges,
122
119
  adBlock = _ref2.adBlock,
123
120
  _ref2$children = _ref2.children,
124
121
  children = _ref2$children === void 0 ? [] : _ref2$children;
@@ -146,18 +143,9 @@ var ImageBanner = function ImageBanner(_ref2) {
146
143
  var navTheme = getTheme(backgroundColor);
147
144
  var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
148
145
 
149
- var renderBadges = !!badges.length && /*#__PURE__*/_react["default"].createElement("div", {
146
+ var renderBadges = !!badges && /*#__PURE__*/_react["default"].createElement("div", {
150
147
  className: cn('badges', [classes.badges])
151
- }, badges.map(function (_ref4) {
152
- var text = _ref4.text,
153
- iconType = _ref4.iconType;
154
- return /*#__PURE__*/_react["default"].createElement(_uiCore.PriceBadge, {
155
- className: classes.badge,
156
- theme: navTheme,
157
- iconType: iconType,
158
- key: text
159
- }, text);
160
- }));
148
+ }, badges);
161
149
 
162
150
  var renderAdBlock = !!adBlock && /*#__PURE__*/_react["default"].createElement("div", {
163
151
  className: cn('ad-block', [classes.adBlock])
@@ -186,10 +174,11 @@ var ImageBanner = function ImageBanner(_ref2) {
186
174
  'v-align': imageVerticalAlign
187
175
  })
188
176
  }, /*#__PURE__*/_react["default"].createElement("source", {
177
+ className: classes.imageSource,
189
178
  media: "(min-width: ".concat(_uiHelpers.breakpoints.DESKTOP_SMALL_START, "px)"),
190
179
  srcSet: "".concat(imageDesktop, ", ").concat(imageDesktop2x, " 2x")
191
180
  }), /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.image), {
192
- className: cn('background-image', [classes.image]),
181
+ className: cn('image', [classes.image]),
193
182
  src: imageMobile || imageMobile2x,
194
183
  srcSet: imageMobile2x ? "".concat(imageMobile2x, " 2x") : undefined,
195
184
  alt: imageAlt
@@ -217,6 +206,7 @@ ImageBanner.propTypes = {
217
206
  classes: PropTypes.shape({
218
207
  root: PropTypes.string,
219
208
  image: PropTypes.string,
209
+ imageSource: PropTypes.string,
220
210
  title: PropTypes.string,
221
211
  description: PropTypes.string,
222
212
  cost: PropTypes.string,
@@ -243,10 +233,7 @@ ImageBanner.propTypes = {
243
233
  imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
244
234
  autoHeight: PropTypes.bool,
245
235
  isImageFullWidth: PropTypes.bool,
246
- badges: PropTypes.arrayOf(PropTypes.shape({
247
- iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
248
- text: PropTypes.string.isRequired
249
- }).isRequired),
236
+ badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
250
237
  adBlock: PropTypes.element
251
238
  };
252
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
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "5.15.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.17.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": "426c7d8e65c13746f9cc1c895a2e7e1b4b08316a"
93
+ "gitHead": "083ea89de7d915f3d2d74aff90e4ec8213a235f5"
94
94
  }