@megafon/ui-shared 5.8.1 → 5.10.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 (26) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/es/components/BenefitsIcons/BenefitsIcons.d.ts +3 -1
  3. package/dist/es/components/BenefitsIcons/BenefitsIcons.js +12 -5
  4. package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
  5. package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js +30 -8
  6. package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css +9 -4
  7. package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css +48 -5
  8. package/dist/es/components/BenefitsIcons/types.d.ts +9 -0
  9. package/dist/es/components/BenefitsIcons/types.js +6 -0
  10. package/dist/es/components/ImageBanner/ImageBanner.css +6 -0
  11. package/dist/es/components/ImageBanner/ImageBanner.d.ts +10 -3
  12. package/dist/es/components/ImageBanner/ImageBanner.js +13 -5
  13. package/dist/es/helpers/getColumnConfig.d.ts +1 -1
  14. package/dist/lib/components/BenefitsIcons/BenefitsIcons.d.ts +3 -1
  15. package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +11 -4
  16. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
  17. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js +29 -7
  18. package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +9 -4
  19. package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +48 -5
  20. package/dist/lib/components/BenefitsIcons/types.d.ts +9 -0
  21. package/dist/lib/components/BenefitsIcons/types.js +9 -2
  22. package/dist/lib/components/ImageBanner/ImageBanner.css +6 -0
  23. package/dist/lib/components/ImageBanner/ImageBanner.d.ts +10 -3
  24. package/dist/lib/components/ImageBanner/ImageBanner.js +15 -6
  25. package/dist/lib/helpers/getColumnConfig.d.ts +1 -1
  26. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [5.10.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.9.0...@megafon/ui-shared@5.10.0) (2024-05-14)
7
+
8
+
9
+ ### Features
10
+
11
+ * **imagebanner:** add radius property, support html tags ([4516190](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/45161905b593c3e21cdcb8f7383dc48d847e20dc))
12
+
13
+
14
+
15
+
16
+
17
+ # [5.9.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.8.1...@megafon/ui-shared@5.9.0) (2024-05-06)
18
+
19
+
20
+ ### Features
21
+
22
+ * **benefitsicons:** add new prop background, set guide colors for svg icon ([9fc17c0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/9fc17c04ddc10fad823849ea10b5101d26bcbada))
23
+
24
+
25
+
26
+
27
+
6
28
  ## [5.8.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.8.0...@megafon/ui-shared@5.8.1) (2024-04-24)
7
29
 
8
30
 
package/dist/es/components/BenefitsIcons/BenefitsIcons.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import * as React from 'react';
2
- import { IconPosition, IBenefit } from './types';
2
+ import { IconPosition, IBenefit, BackgroundType } from './types';
3
3
  import './style/BenefitsIcons.less';
4
4
  export interface IBenefitsIcons {
5
5
  /** Ссылка на корневой элемент */
6
6
  rootRef?: React.Ref<HTMLDivElement>;
7
7
  /** Позиция иконки */
8
8
  iconPosition?: IconPosition;
9
+ /** Цвет фона */
10
+ background?: BackgroundType;
9
11
  /** Выстраивать бенефиты в одну колонку вне зависимости от количества */
10
12
  inOneColumn?: boolean;
11
13
  /** Список бенефитов */
package/dist/es/components/BenefitsIcons/BenefitsIcons.js CHANGED
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
10
10
  import throttleTime from "../../constants/throttleTime";
11
11
  import BenefitsIconsTile from "./BenefitsIconsTile";
12
12
  import getMultiColumnConfig, { getOneColumnConfig } from "./helpers";
13
- import { IconPositionEnum, ItemsAlignEnum } from "./types";
13
+ import { IconPositionEnum, ItemsAlignEnum, BackgroundEnum } from "./types";
14
14
  import "./style/BenefitsIcons.css";
15
15
  var testIdPrefix = 'BenefitsIcons';
16
16
  var cn = cnCreate('mfui-benefits-icons');
@@ -19,6 +19,8 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
19
19
  var rootRef = _ref.rootRef,
20
20
  _ref$iconPosition = _ref.iconPosition,
21
21
  iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _ref$iconPosition,
22
+ _ref$background = _ref.background,
23
+ background = _ref$background === void 0 ? 'transparent' : _ref$background,
22
24
  _ref$inOneColumn = _ref.inOneColumn,
23
25
  inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
24
26
  items = _ref.items,
@@ -59,7 +61,8 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
59
61
  }, [iconPosition, inOneColumn, resizeHandler]);
60
62
  return /*#__PURE__*/React.createElement("div", {
61
63
  className: cn({
62
- 'one-column': inOneColumn
64
+ 'one-column': inOneColumn,
65
+ background: background
63
66
  }, [className, classes.root]),
64
67
  ref: rootRef
65
68
  }, /*#__PURE__*/React.createElement("div", {
@@ -79,10 +82,11 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
79
82
  }, items.map(function (_ref2, i) {
80
83
  var title = _ref2.title,
81
84
  text = _ref2.text,
82
- icon = _ref2.icon;
85
+ icon = _ref2.icon,
86
+ alt = _ref2.alt;
83
87
  var columnConfig = inOneColumn ? getOneColumnConfig(iconPosition) : getMultiColumnConfig(iconPosition, items.length, i);
84
88
  return /*#__PURE__*/React.createElement(GridColumn, _extends({
85
- className: classes.gridColumn,
89
+ className: cn('column', [classes.gridColumn]),
86
90
  key: i,
87
91
  dataAttrs: {
88
92
  root: {
@@ -94,7 +98,9 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
94
98
  title: title,
95
99
  text: text,
96
100
  icon: icon,
97
- iconPosition: localIconPosition
101
+ background: background,
102
+ iconPosition: localIconPosition,
103
+ alt: alt
98
104
  }));
99
105
  }))));
100
106
  };
@@ -104,6 +110,7 @@ BenefitsIcons.propTypes = {
104
110
  current: PropTypes.elementType
105
111
  }), PropTypes.any])]),
106
112
  iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
113
+ background: PropTypes.oneOf(Object.values(BackgroundEnum)),
107
114
  inOneColumn: PropTypes.bool,
108
115
  items: PropTypes.arrayOf(PropTypes.shape({
109
116
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
package/dist/es/components/BenefitsIcons/BenefitsIconsTile.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
- import { IBenefit, IconPosition } from './types';
2
+ import { IBenefit, IconPosition, BackgroundType } from './types';
3
3
  import './style/BenefitsIconsTile.less';
4
4
  export interface IBenefitsIconsTile extends IBenefit {
5
5
  iconPosition?: IconPosition;
6
+ background?: BackgroundType;
6
7
  className?: string;
7
8
  }
8
9
  declare const BenefitsIconsTile: React.FC<IBenefitsIconsTile>;
package/dist/es/components/BenefitsIcons/BenefitsIconsTile.js CHANGED
@@ -3,7 +3,7 @@ import * as React from 'react';
3
3
  import { Header } from '@megafon/ui-core';
4
4
  import { cnCreate } from '@megafon/ui-helpers';
5
5
  import PropTypes from 'prop-types';
6
- import { IconPositionEnum } from "./types";
6
+ import { IconPositionEnum, BackgroundEnum } from "./types";
7
7
  import "./style/BenefitsIconsTile.css";
8
8
  var testIdPrefix = 'BenefitsIconsTile';
9
9
  var cn = cnCreate('mfui-benefits-icons-tile');
@@ -12,24 +12,44 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
12
12
  var title = _ref.title,
13
13
  text = _ref.text,
14
14
  icon = _ref.icon,
15
- _ref$iconPosition = _ref.iconPosition,
16
- iconPosition = _ref$iconPosition === void 0 ? IconPositionEnum.LEFT_TOP : _ref$iconPosition,
15
+ iconPosition = _ref.iconPosition,
16
+ background = _ref.background,
17
+ alt = _ref.alt,
17
18
  className = _ref.className;
19
+
20
+ var renderIcon = function renderIcon() {
21
+ if (typeof icon === 'string') {
22
+ return /*#__PURE__*/React.createElement("img", {
23
+ className: cn('img-icon'),
24
+ src: icon,
25
+ alt: alt,
26
+ "data-testid": "".concat(testIdPrefix, "-img")
27
+ });
28
+ }
29
+
30
+ return /*#__PURE__*/React.createElement("div", {
31
+ className: cn('svg-icon'),
32
+ "data-testid": "".concat(testIdPrefix, "-svg")
33
+ }, icon);
34
+ };
35
+
18
36
  return /*#__PURE__*/React.createElement("div", {
19
37
  className: cn({
20
- 'icon-position': iconPosition
38
+ 'icon-position': iconPosition,
39
+ background: background,
40
+ image: typeof icon === 'string'
21
41
  }, [className]),
22
42
  "data-testid": "".concat(testIdPrefix, "-root")
23
43
  }, /*#__PURE__*/React.createElement("div", {
24
- className: cn('svg-icon')
25
- }, icon), /*#__PURE__*/React.createElement("div", {
44
+ className: cn('inner')
45
+ }, renderIcon(), /*#__PURE__*/React.createElement("div", {
26
46
  className: cn('content-wrapper')
27
47
  }, title && /*#__PURE__*/React.createElement(Header, {
28
48
  className: cn('title'),
29
49
  as: "h5"
30
50
  }, title), text && /*#__PURE__*/React.createElement("div", {
31
51
  className: cn('content')
32
- }, text)));
52
+ }, text))));
33
53
  };
34
54
 
35
55
  BenefitsIconsTile.propTypes = {
@@ -37,6 +57,8 @@ BenefitsIconsTile.propTypes = {
37
57
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
38
58
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
39
59
  iconPosition: PropTypes.oneOf(Object.values(IconPositionEnum)),
40
- icon: PropTypes.node.isRequired
60
+ background: PropTypes.oneOf(Object.values(BackgroundEnum)),
61
+ icon: PropTypes.node.isRequired,
62
+ alt: PropTypes.string
41
63
  };
42
64
  export default BenefitsIconsTile;
package/dist/es/components/BenefitsIcons/style/BenefitsIcons.css CHANGED
@@ -7,12 +7,17 @@ h5 {
7
7
  }
8
8
  .mfui-benefits-icons {
9
9
  overflow: hidden;
10
- font-size: 10px;
11
10
  }
12
11
  .mfui-benefits-icons__inner {
12
+ margin-bottom: -20px;
13
+ }
14
+ .mfui-benefits-icons_background_transparent .mfui-benefits-icons__inner {
13
15
  margin-bottom: -48px;
14
16
  }
15
- .mfui-benefits-icons__tile {
17
+ .mfui-benefits-icons__column {
18
+ margin-bottom: 20px;
19
+ }
20
+ .mfui-benefits-icons_background_transparent .mfui-benefits-icons__column {
16
21
  margin-bottom: 48px;
17
22
  }
18
23
  .mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
@@ -23,11 +28,11 @@ h5 {
23
28
  margin-bottom: -32px;
24
29
  }
25
30
  }
26
- .mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
31
+ .mfui-benefits-icons_one-column .mfui-benefits-icons__column {
27
32
  margin-bottom: 24px;
28
33
  }
29
34
  @media screen and (max-width: 767px) {
30
- .mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
35
+ .mfui-benefits-icons_one-column .mfui-benefits-icons__column {
31
36
  margin-bottom: 32px;
32
37
  }
33
38
  }
package/dist/es/components/BenefitsIcons/style/BenefitsIconsTile.css CHANGED
@@ -5,6 +5,23 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
+ .mfui-benefits-icons-tile {
9
+ min-height: 100%;
10
+ padding: 24px;
11
+ border-radius: 12px;
12
+ }
13
+ .mfui-benefits-icons-tile_background_transparent {
14
+ padding: 0;
15
+ }
16
+ .mfui-benefits-icons-tile_background_gray {
17
+ background-color: var(--spbSky0);
18
+ }
19
+ .mfui-benefits-icons-tile_background_green {
20
+ background-color: var(--brandGreen20);
21
+ }
22
+ .mfui-benefits-icons-tile_background_purple {
23
+ background-color: var(--brandPurple20);
24
+ }
8
25
  .mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon {
9
26
  margin-bottom: 10px;
10
27
  }
@@ -19,29 +36,55 @@ h5 {
19
36
  .mfui-benefits-icons-tile__text {
20
37
  margin-bottom: 0;
21
38
  }
39
+ .mfui-benefits-icons-tile__img-icon {
40
+ width: 64px;
41
+ height: 64px;
42
+ border-radius: 8px;
43
+ }
22
44
  .mfui-benefits-icons-tile__svg-icon {
23
45
  width: 40px;
24
46
  height: 40px;
25
47
  overflow: hidden;
26
48
  }
27
- .mfui-benefits-icons-tile_icon-position_left-side {
49
+ .mfui-benefits-icons-tile__svg-icon svg {
50
+ fill: var(--brandGreen) !important;
51
+ }
52
+ .mfui-benefits-icons-tile_background_purple .mfui-benefits-icons-tile__svg-icon svg {
53
+ fill: var(--brandPurple) !important;
54
+ }
55
+ .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__inner {
28
56
  display: -webkit-box;
29
57
  display: -ms-flexbox;
30
58
  display: flex;
31
59
  }
32
60
  .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__content-wrapper {
33
- padding-top: 10px;
61
+ padding-top: 8px;
34
62
  }
35
- .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon {
63
+ .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon,
64
+ .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__img-icon {
36
65
  -ms-flex-negative: 0;
37
66
  flex-shrink: 0;
38
67
  margin-right: 14px;
39
68
  margin-bottom: 0;
40
69
  }
41
- .mfui-benefits-icons-tile_icon-position_center-top {
70
+ .mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__inner {
71
+ -webkit-box-align: center;
72
+ -ms-flex-align: center;
73
+ align-items: center;
74
+ }
75
+ .mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__content-wrapper {
76
+ padding-top: 0;
77
+ }
78
+ .mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__svg-icon,
79
+ .mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__img-icon {
80
+ -ms-flex-item-align: start;
81
+ align-self: start;
82
+ }
83
+ .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__inner {
42
84
  text-align: center;
43
85
  }
44
- .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon {
86
+ .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon,
87
+ .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__img-icon {
45
88
  margin-right: auto;
46
89
  margin-left: auto;
47
90
  }
package/dist/es/components/BenefitsIcons/types.d.ts CHANGED
@@ -7,6 +7,8 @@ export interface IBenefit {
7
7
  text?: string | React.ReactNode | React.ReactNode[];
8
8
  /** Иконка */
9
9
  icon: React.ReactNode;
10
+ /** Атрибут alt для изображения */
11
+ alt?: string;
10
12
  }
11
13
  export declare const IconPositionEnum: {
12
14
  readonly LEFT_TOP: "left-top";
@@ -19,6 +21,13 @@ export declare const ItemsAlignEnum: {
19
21
  readonly CENTER: "center";
20
22
  };
21
23
  export declare type ItemsAlignType = typeof ItemsAlignEnum[keyof typeof ItemsAlignEnum];
24
+ export declare const BackgroundEnum: {
25
+ readonly TRANSPARENT: "transparent";
26
+ readonly GRAY: "gray";
27
+ readonly GREEN: "green";
28
+ readonly PURPLE: "purple";
29
+ };
30
+ export declare type BackgroundType = typeof BackgroundEnum[keyof typeof BackgroundEnum];
22
31
  export declare type GridConfig = {
23
32
  wide?: TGridSizeValues;
24
33
  desktop?: TGridSizeValues;
package/dist/es/components/BenefitsIcons/types.js CHANGED
@@ -6,4 +6,10 @@ export var IconPositionEnum = {
6
6
  export var ItemsAlignEnum = {
7
7
  LEFT: 'left',
8
8
  CENTER: 'center'
9
+ };
10
+ export var BackgroundEnum = {
11
+ TRANSPARENT: 'transparent',
12
+ GRAY: 'gray',
13
+ GREEN: 'green',
14
+ PURPLE: 'purple'
9
15
  };
package/dist/es/components/ImageBanner/ImageBanner.css CHANGED
@@ -23,6 +23,9 @@ h5 {
23
23
  -webkit-box-align: center;
24
24
  -ms-flex-align: center;
25
25
  align-items: center;
26
+ -webkit-box-pack: justify;
27
+ -ms-flex-pack: justify;
28
+ justify-content: space-between;
26
29
  height: 100%;
27
30
  }
28
31
  }
@@ -181,6 +184,9 @@ h5 {
181
184
  right: 24px;
182
185
  }
183
186
  }
187
+ .mfui-image-banner_radius_rounded {
188
+ border-radius: 24px;
189
+ }
184
190
  @media screen and (min-width: 1024px) {
185
191
  .mfui-image-banner_auto-height .mfui-image-banner__content {
186
192
  padding: 48px 0;
package/dist/es/components/ImageBanner/ImageBanner.d.ts CHANGED
@@ -10,6 +10,11 @@ export declare const BackgroundColor: {
10
10
  readonly LIGHT: "light";
11
11
  };
12
12
  export declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
13
+ export declare const Radius: {
14
+ readonly CORNERS: "corners";
15
+ readonly ROUNDED: "rounded";
16
+ };
17
+ export declare type RadiusType = typeof Radius[keyof typeof Radius];
13
18
  export declare const NavTheme: {
14
19
  readonly LIGHT: "light";
15
20
  readonly DARK: "dark";
@@ -42,13 +47,15 @@ export interface IImageBannerProps {
42
47
  /** Ссылка на корневой элемент */
43
48
  rootRef?: Ref<HTMLDivElement>;
44
49
  /** Заголовок */
45
- title: string;
50
+ title: string | React.ReactNode | React.ReactNode[];
46
51
  /** Текст-описание */
47
- description?: string;
52
+ description?: string | React.ReactNode | React.ReactNode[];
48
53
  /** Строка со стоимостью услуги */
49
54
  cost?: string;
50
55
  /** Фоновый цвет */
51
56
  backgroundColor?: BackgroundColorType;
57
+ /** Радиус границы */
58
+ radius?: RadiusType;
52
59
  /** Изображение на разрешении экрана 0-1023 */
53
60
  imageMobile?: string;
54
61
  /** Изображение 2x на разрешении экрана 0-1023 */
@@ -59,7 +66,7 @@ export interface IImageBannerProps {
59
66
  imageDesktop2x?: string;
60
67
  /** Значение тега alt для изображения */
61
68
  imageAlt?: string;
62
- /** Значение тега alt для изображения */
69
+ /** Выравнивание изображения по вертикали (по умолчанию center) */
63
70
  imageVerticalAlign?: ImageVerticalAlignType;
64
71
  /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */
65
72
  autoHeight?: boolean;
package/dist/es/components/ImageBanner/ImageBanner.js CHANGED
@@ -17,6 +17,10 @@ export var BackgroundColor = {
17
17
  GRADIENT: 'gradient',
18
18
  LIGHT: 'light'
19
19
  };
20
+ export var Radius = {
21
+ CORNERS: 'corners',
22
+ ROUNDED: 'rounded'
23
+ };
20
24
  export var NavTheme = {
21
25
  LIGHT: 'light',
22
26
  DARK: 'dark'
@@ -75,6 +79,8 @@ var ImageBanner = function ImageBanner(_ref2) {
75
79
  cost = _ref2.cost,
76
80
  _ref2$backgroundColor = _ref2.backgroundColor,
77
81
  backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
82
+ _ref2$radius = _ref2.radius,
83
+ radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
78
84
  autoHeight = _ref2.autoHeight,
79
85
  isImageFullWidth = _ref2.isImageFullWidth,
80
86
  _ref2$badges = _ref2.badges,
@@ -106,11 +112,11 @@ var ImageBanner = function ImageBanner(_ref2) {
106
112
  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(Header, {
107
113
  className: cn('title'),
108
114
  color: "inherit"
109
- }, convert(title, titleConvertConfig)), !!description && /*#__PURE__*/React.createElement(Header, {
115
+ }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(Header, {
110
116
  className: cn('description'),
111
117
  as: "h5",
112
118
  color: "inherit"
113
- }, convert(description, titleConvertConfig)), !!cost && /*#__PURE__*/React.createElement("div", {
119
+ }, typeof description === 'string' ? convert(description, titleConvertConfig) : description), !!cost && /*#__PURE__*/React.createElement("div", {
114
120
  className: cn('cost')
115
121
  }, convert(cost, typographyConfig)), !!children && !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
116
122
  className: cn('children')
@@ -135,7 +141,8 @@ var ImageBanner = function ImageBanner(_ref2) {
135
141
  'has-image': hasImage,
136
142
  'auto-height': autoHeight,
137
143
  'full-width': isImageFullWidth,
138
- 'bottom-offset': hasBottomOffset && !hasImage
144
+ 'bottom-offset': hasBottomOffset && !hasImage,
145
+ radius: radius
139
146
  }, [className, classes.root]),
140
147
  ref: rootRef
141
148
  }), /*#__PURE__*/React.createElement("div", {
@@ -156,10 +163,11 @@ ImageBanner.propTypes = {
156
163
  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
157
164
  current: PropTypes.elementType
158
165
  }), PropTypes.any])]),
159
- title: PropTypes.string.isRequired,
160
- description: PropTypes.string,
166
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
167
+ description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
161
168
  cost: PropTypes.string,
162
169
  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
170
+ radius: PropTypes.oneOf(Object.values(Radius)),
163
171
  imageMobile: PropTypes.string,
164
172
  imageMobile2x: PropTypes.string,
165
173
  imageDesktop: PropTypes.string,
package/dist/es/helpers/getColumnConfig.d.ts CHANGED
@@ -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/dist/lib/components/BenefitsIcons/BenefitsIcons.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import * as React from 'react';
2
- import { IconPosition, IBenefit } from './types';
2
+ import { IconPosition, IBenefit, BackgroundType } from './types';
3
3
  import './style/BenefitsIcons.less';
4
4
  export interface IBenefitsIcons {
5
5
  /** Ссылка на корневой элемент */
6
6
  rootRef?: React.Ref<HTMLDivElement>;
7
7
  /** Позиция иконки */
8
8
  iconPosition?: IconPosition;
9
+ /** Цвет фона */
10
+ background?: BackgroundType;
9
11
  /** Выстраивать бенефиты в одну колонку вне зависимости от количества */
10
12
  inOneColumn?: boolean;
11
13
  /** Список бенефитов */
package/dist/lib/components/BenefitsIcons/BenefitsIcons.js CHANGED
@@ -46,6 +46,8 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
46
46
  var rootRef = _ref.rootRef,
47
47
  _ref$iconPosition = _ref.iconPosition,
48
48
  iconPosition = _ref$iconPosition === void 0 ? 'left-top' : _ref$iconPosition,
49
+ _ref$background = _ref.background,
50
+ background = _ref$background === void 0 ? 'transparent' : _ref$background,
49
51
  _ref$inOneColumn = _ref.inOneColumn,
50
52
  inOneColumn = _ref$inOneColumn === void 0 ? false : _ref$inOneColumn,
51
53
  items = _ref.items,
@@ -86,7 +88,8 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
86
88
  }, [iconPosition, inOneColumn, resizeHandler]);
87
89
  return /*#__PURE__*/React.createElement("div", {
88
90
  className: cn({
89
- 'one-column': inOneColumn
91
+ 'one-column': inOneColumn,
92
+ background: background
90
93
  }, [className, classes.root]),
91
94
  ref: rootRef
92
95
  }, /*#__PURE__*/React.createElement("div", {
@@ -106,10 +109,11 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
106
109
  }, items.map(function (_ref2, i) {
107
110
  var title = _ref2.title,
108
111
  text = _ref2.text,
109
- icon = _ref2.icon;
112
+ icon = _ref2.icon,
113
+ alt = _ref2.alt;
110
114
  var columnConfig = inOneColumn ? (0, _helpers.getOneColumnConfig)(iconPosition) : (0, _helpers["default"])(iconPosition, items.length, i);
111
115
  return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({
112
- className: classes.gridColumn,
116
+ className: cn('column', [classes.gridColumn]),
113
117
  key: i,
114
118
  dataAttrs: {
115
119
  root: {
@@ -121,7 +125,9 @@ var BenefitsIcons = function BenefitsIcons(_ref) {
121
125
  title: title,
122
126
  text: text,
123
127
  icon: icon,
124
- iconPosition: localIconPosition
128
+ background: background,
129
+ iconPosition: localIconPosition,
130
+ alt: alt
125
131
  }));
126
132
  }))));
127
133
  };
@@ -131,6 +137,7 @@ BenefitsIcons.propTypes = {
131
137
  current: _propTypes["default"].elementType
132
138
  }), _propTypes["default"].any])]),
133
139
  iconPosition: _propTypes["default"].oneOf(Object.values(_types.IconPositionEnum)),
140
+ background: _propTypes["default"].oneOf(Object.values(_types.BackgroundEnum)),
134
141
  inOneColumn: _propTypes["default"].bool,
135
142
  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
136
143
  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import * as React from 'react';
2
- import { IBenefit, IconPosition } from './types';
2
+ import { IBenefit, IconPosition, BackgroundType } from './types';
3
3
  import './style/BenefitsIconsTile.less';
4
4
  export interface IBenefitsIconsTile extends IBenefit {
5
5
  iconPosition?: IconPosition;
6
+ background?: BackgroundType;
6
7
  className?: string;
7
8
  }
8
9
  declare const BenefitsIconsTile: React.FC<IBenefitsIconsTile>;
package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js CHANGED
@@ -32,24 +32,44 @@ var BenefitsIconsTile = function BenefitsIconsTile(_ref) {
32
32
  var title = _ref.title,
33
33
  text = _ref.text,
34
34
  icon = _ref.icon,
35
- _ref$iconPosition = _ref.iconPosition,
36
- iconPosition = _ref$iconPosition === void 0 ? _types.IconPositionEnum.LEFT_TOP : _ref$iconPosition,
35
+ iconPosition = _ref.iconPosition,
36
+ background = _ref.background,
37
+ alt = _ref.alt,
37
38
  className = _ref.className;
39
+
40
+ var renderIcon = function renderIcon() {
41
+ if (typeof icon === 'string') {
42
+ return /*#__PURE__*/React.createElement("img", {
43
+ className: cn('img-icon'),
44
+ src: icon,
45
+ alt: alt,
46
+ "data-testid": "".concat(testIdPrefix, "-img")
47
+ });
48
+ }
49
+
50
+ return /*#__PURE__*/React.createElement("div", {
51
+ className: cn('svg-icon'),
52
+ "data-testid": "".concat(testIdPrefix, "-svg")
53
+ }, icon);
54
+ };
55
+
38
56
  return /*#__PURE__*/React.createElement("div", {
39
57
  className: cn({
40
- 'icon-position': iconPosition
58
+ 'icon-position': iconPosition,
59
+ background: background,
60
+ image: typeof icon === 'string'
41
61
  }, [className]),
42
62
  "data-testid": "".concat(testIdPrefix, "-root")
43
63
  }, /*#__PURE__*/React.createElement("div", {
44
- className: cn('svg-icon')
45
- }, icon), /*#__PURE__*/React.createElement("div", {
64
+ className: cn('inner')
65
+ }, renderIcon(), /*#__PURE__*/React.createElement("div", {
46
66
  className: cn('content-wrapper')
47
67
  }, title && /*#__PURE__*/React.createElement(_uiCore.Header, {
48
68
  className: cn('title'),
49
69
  as: "h5"
50
70
  }, title), text && /*#__PURE__*/React.createElement("div", {
51
71
  className: cn('content')
52
- }, text)));
72
+ }, text))));
53
73
  };
54
74
 
55
75
  BenefitsIconsTile.propTypes = {
@@ -57,7 +77,9 @@ BenefitsIconsTile.propTypes = {
57
77
  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
58
78
  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
59
79
  iconPosition: _propTypes["default"].oneOf(Object.values(_types.IconPositionEnum)),
60
- icon: _propTypes["default"].node.isRequired
80
+ background: _propTypes["default"].oneOf(Object.values(_types.BackgroundEnum)),
81
+ icon: _propTypes["default"].node.isRequired,
82
+ alt: _propTypes["default"].string
61
83
  };
62
84
  var _default = BenefitsIconsTile;
63
85
  exports["default"] = _default;
package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css CHANGED
@@ -7,12 +7,17 @@ h5 {
7
7
  }
8
8
  .mfui-benefits-icons {
9
9
  overflow: hidden;
10
- font-size: 10px;
11
10
  }
12
11
  .mfui-benefits-icons__inner {
12
+ margin-bottom: -20px;
13
+ }
14
+ .mfui-benefits-icons_background_transparent .mfui-benefits-icons__inner {
13
15
  margin-bottom: -48px;
14
16
  }
15
- .mfui-benefits-icons__tile {
17
+ .mfui-benefits-icons__column {
18
+ margin-bottom: 20px;
19
+ }
20
+ .mfui-benefits-icons_background_transparent .mfui-benefits-icons__column {
16
21
  margin-bottom: 48px;
17
22
  }
18
23
  .mfui-benefits-icons_one-column .mfui-benefits-icons__inner {
@@ -23,11 +28,11 @@ h5 {
23
28
  margin-bottom: -32px;
24
29
  }
25
30
  }
26
- .mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
31
+ .mfui-benefits-icons_one-column .mfui-benefits-icons__column {
27
32
  margin-bottom: 24px;
28
33
  }
29
34
  @media screen and (max-width: 767px) {
30
- .mfui-benefits-icons_one-column .mfui-benefits-icons__tile {
35
+ .mfui-benefits-icons_one-column .mfui-benefits-icons__column {
31
36
  margin-bottom: 32px;
32
37
  }
33
38
  }
package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css CHANGED
@@ -5,6 +5,23 @@ h4,
5
5
  h5 {
6
6
  margin: 0;
7
7
  }
8
+ .mfui-benefits-icons-tile {
9
+ min-height: 100%;
10
+ padding: 24px;
11
+ border-radius: 12px;
12
+ }
13
+ .mfui-benefits-icons-tile_background_transparent {
14
+ padding: 0;
15
+ }
16
+ .mfui-benefits-icons-tile_background_gray {
17
+ background-color: var(--spbSky0);
18
+ }
19
+ .mfui-benefits-icons-tile_background_green {
20
+ background-color: var(--brandGreen20);
21
+ }
22
+ .mfui-benefits-icons-tile_background_purple {
23
+ background-color: var(--brandPurple20);
24
+ }
8
25
  .mfui-benefits-icons-tile .mfui-benefits-icons-tile__svg-icon {
9
26
  margin-bottom: 10px;
10
27
  }
@@ -19,29 +36,55 @@ h5 {
19
36
  .mfui-benefits-icons-tile__text {
20
37
  margin-bottom: 0;
21
38
  }
39
+ .mfui-benefits-icons-tile__img-icon {
40
+ width: 64px;
41
+ height: 64px;
42
+ border-radius: 8px;
43
+ }
22
44
  .mfui-benefits-icons-tile__svg-icon {
23
45
  width: 40px;
24
46
  height: 40px;
25
47
  overflow: hidden;
26
48
  }
27
- .mfui-benefits-icons-tile_icon-position_left-side {
49
+ .mfui-benefits-icons-tile__svg-icon svg {
50
+ fill: var(--brandGreen) !important;
51
+ }
52
+ .mfui-benefits-icons-tile_background_purple .mfui-benefits-icons-tile__svg-icon svg {
53
+ fill: var(--brandPurple) !important;
54
+ }
55
+ .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__inner {
28
56
  display: -webkit-box;
29
57
  display: -ms-flexbox;
30
58
  display: flex;
31
59
  }
32
60
  .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__content-wrapper {
33
- padding-top: 10px;
61
+ padding-top: 8px;
34
62
  }
35
- .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon {
63
+ .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__svg-icon,
64
+ .mfui-benefits-icons-tile_icon-position_left-side .mfui-benefits-icons-tile__img-icon {
36
65
  -ms-flex-negative: 0;
37
66
  flex-shrink: 0;
38
67
  margin-right: 14px;
39
68
  margin-bottom: 0;
40
69
  }
41
- .mfui-benefits-icons-tile_icon-position_center-top {
70
+ .mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__inner {
71
+ -webkit-box-align: center;
72
+ -ms-flex-align: center;
73
+ align-items: center;
74
+ }
75
+ .mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__content-wrapper {
76
+ padding-top: 0;
77
+ }
78
+ .mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__svg-icon,
79
+ .mfui-benefits-icons-tile_icon-position_left-side.mfui-benefits-icons-tile_image .mfui-benefits-icons-tile__img-icon {
80
+ -ms-flex-item-align: start;
81
+ align-self: start;
82
+ }
83
+ .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__inner {
42
84
  text-align: center;
43
85
  }
44
- .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon {
86
+ .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__svg-icon,
87
+ .mfui-benefits-icons-tile_icon-position_center-top .mfui-benefits-icons-tile__img-icon {
45
88
  margin-right: auto;
46
89
  margin-left: auto;
47
90
  }
package/dist/lib/components/BenefitsIcons/types.d.ts CHANGED
@@ -7,6 +7,8 @@ export interface IBenefit {
7
7
  text?: string | React.ReactNode | React.ReactNode[];
8
8
  /** Иконка */
9
9
  icon: React.ReactNode;
10
+ /** Атрибут alt для изображения */
11
+ alt?: string;
10
12
  }
11
13
  export declare const IconPositionEnum: {
12
14
  readonly LEFT_TOP: "left-top";
@@ -19,6 +21,13 @@ export declare const ItemsAlignEnum: {
19
21
  readonly CENTER: "center";
20
22
  };
21
23
  export declare type ItemsAlignType = typeof ItemsAlignEnum[keyof typeof ItemsAlignEnum];
24
+ export declare const BackgroundEnum: {
25
+ readonly TRANSPARENT: "transparent";
26
+ readonly GRAY: "gray";
27
+ readonly GREEN: "green";
28
+ readonly PURPLE: "purple";
29
+ };
30
+ export declare type BackgroundType = typeof BackgroundEnum[keyof typeof BackgroundEnum];
22
31
  export declare type GridConfig = {
23
32
  wide?: TGridSizeValues;
24
33
  desktop?: TGridSizeValues;
package/dist/lib/components/BenefitsIcons/types.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.ItemsAlignEnum = exports.IconPositionEnum = void 0;
6
+ exports.BackgroundEnum = exports.ItemsAlignEnum = exports.IconPositionEnum = void 0;
7
7
  var IconPositionEnum = {
8
8
  LEFT_TOP: 'left-top',
9
9
  CENTER_TOP: 'center-top',
@@ -14,4 +14,11 @@ var ItemsAlignEnum = {
14
14
  LEFT: 'left',
15
15
  CENTER: 'center'
16
16
  };
17
- exports.ItemsAlignEnum = ItemsAlignEnum;
17
+ exports.ItemsAlignEnum = ItemsAlignEnum;
18
+ var BackgroundEnum = {
19
+ TRANSPARENT: 'transparent',
20
+ GRAY: 'gray',
21
+ GREEN: 'green',
22
+ PURPLE: 'purple'
23
+ };
24
+ exports.BackgroundEnum = BackgroundEnum;
package/dist/lib/components/ImageBanner/ImageBanner.css CHANGED
@@ -23,6 +23,9 @@ h5 {
23
23
  -webkit-box-align: center;
24
24
  -ms-flex-align: center;
25
25
  align-items: center;
26
+ -webkit-box-pack: justify;
27
+ -ms-flex-pack: justify;
28
+ justify-content: space-between;
26
29
  height: 100%;
27
30
  }
28
31
  }
@@ -181,6 +184,9 @@ h5 {
181
184
  right: 24px;
182
185
  }
183
186
  }
187
+ .mfui-image-banner_radius_rounded {
188
+ border-radius: 24px;
189
+ }
184
190
  @media screen and (min-width: 1024px) {
185
191
  .mfui-image-banner_auto-height .mfui-image-banner__content {
186
192
  padding: 48px 0;
package/dist/lib/components/ImageBanner/ImageBanner.d.ts CHANGED
@@ -10,6 +10,11 @@ export declare const BackgroundColor: {
10
10
  readonly LIGHT: "light";
11
11
  };
12
12
  export declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
13
+ export declare const Radius: {
14
+ readonly CORNERS: "corners";
15
+ readonly ROUNDED: "rounded";
16
+ };
17
+ export declare type RadiusType = typeof Radius[keyof typeof Radius];
13
18
  export declare const NavTheme: {
14
19
  readonly LIGHT: "light";
15
20
  readonly DARK: "dark";
@@ -42,13 +47,15 @@ export interface IImageBannerProps {
42
47
  /** Ссылка на корневой элемент */
43
48
  rootRef?: Ref<HTMLDivElement>;
44
49
  /** Заголовок */
45
- title: string;
50
+ title: string | React.ReactNode | React.ReactNode[];
46
51
  /** Текст-описание */
47
- description?: string;
52
+ description?: string | React.ReactNode | React.ReactNode[];
48
53
  /** Строка со стоимостью услуги */
49
54
  cost?: string;
50
55
  /** Фоновый цвет */
51
56
  backgroundColor?: BackgroundColorType;
57
+ /** Радиус границы */
58
+ radius?: RadiusType;
52
59
  /** Изображение на разрешении экрана 0-1023 */
53
60
  imageMobile?: string;
54
61
  /** Изображение 2x на разрешении экрана 0-1023 */
@@ -59,7 +66,7 @@ export interface IImageBannerProps {
59
66
  imageDesktop2x?: string;
60
67
  /** Значение тега alt для изображения */
61
68
  imageAlt?: string;
62
- /** Значение тега alt для изображения */
69
+ /** Выравнивание изображения по вертикали (по умолчанию center) */
63
70
  imageVerticalAlign?: ImageVerticalAlignType;
64
71
  /** Высота баннера зависит от высоты контента (по умолчанию фиксированная) */
65
72
  autoHeight?: boolean;
package/dist/lib/components/ImageBanner/ImageBanner.js CHANGED
@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = exports.ImageVerticalAlign = exports.NavTheme = exports.BackgroundColor = void 0;
8
+ exports["default"] = exports.ImageVerticalAlign = exports.NavTheme = exports.Radius = exports.BackgroundColor = void 0;
9
9
 
10
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
11
 
@@ -42,6 +42,11 @@ var BackgroundColor = {
42
42
  LIGHT: 'light'
43
43
  };
44
44
  exports.BackgroundColor = BackgroundColor;
45
+ var Radius = {
46
+ CORNERS: 'corners',
47
+ ROUNDED: 'rounded'
48
+ };
49
+ exports.Radius = Radius;
45
50
  var NavTheme = {
46
51
  LIGHT: 'light',
47
52
  DARK: 'dark'
@@ -102,6 +107,8 @@ var ImageBanner = function ImageBanner(_ref2) {
102
107
  cost = _ref2.cost,
103
108
  _ref2$backgroundColor = _ref2.backgroundColor,
104
109
  backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
110
+ _ref2$radius = _ref2.radius,
111
+ radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
105
112
  autoHeight = _ref2.autoHeight,
106
113
  isImageFullWidth = _ref2.isImageFullWidth,
107
114
  _ref2$badges = _ref2.badges,
@@ -136,11 +143,11 @@ var ImageBanner = function ImageBanner(_ref2) {
136
143
  }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
137
144
  className: cn('title'),
138
145
  color: "inherit"
139
- }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
146
+ }, typeof title === 'string' ? (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig) : title), !!description && /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
140
147
  className: cn('description'),
141
148
  as: "h5",
142
149
  color: "inherit"
143
- }, (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig)), !!cost && /*#__PURE__*/_react["default"].createElement("div", {
150
+ }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.titleConvertConfig) : description), !!cost && /*#__PURE__*/_react["default"].createElement("div", {
144
151
  className: cn('cost')
145
152
  }, (0, _uiHelpers.convert)(cost, typographyConfig)), !!children && !!_react["default"].Children.count(children) && /*#__PURE__*/_react["default"].createElement("div", {
146
153
  className: cn('children')
@@ -167,7 +174,8 @@ var ImageBanner = function ImageBanner(_ref2) {
167
174
  'has-image': hasImage,
168
175
  'auto-height': autoHeight,
169
176
  'full-width': isImageFullWidth,
170
- 'bottom-offset': hasBottomOffset && !hasImage
177
+ 'bottom-offset': hasBottomOffset && !hasImage,
178
+ radius: radius
171
179
  }, [className, classes.root]),
172
180
  ref: rootRef
173
181
  }), /*#__PURE__*/_react["default"].createElement("div", {
@@ -188,10 +196,11 @@ ImageBanner.propTypes = {
188
196
  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
189
197
  current: PropTypes.elementType
190
198
  }), PropTypes.any])]),
191
- title: PropTypes.string.isRequired,
192
- description: PropTypes.string,
199
+ title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
200
+ description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
193
201
  cost: PropTypes.string,
194
202
  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
203
+ radius: PropTypes.oneOf(Object.values(Radius)),
195
204
  imageMobile: PropTypes.string,
196
205
  imageMobile2x: PropTypes.string,
197
206
  imageDesktop: PropTypes.string,
package/dist/lib/helpers/getColumnConfig.d.ts CHANGED
@@ -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.8.1",
3
+ "version": "5.10.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.22.1",
51
+ "@megafon/ui-icons": "^2.23.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.10.1",
85
+ "@megafon/ui-core": "^5.12.0",
86
86
  "@megafon/ui-helpers": "^2.5.5",
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": "88317ae63c14449b3ab9dd1ea8c6215ec3385059"
93
+ "gitHead": "41cea5802cbc51e28d7f4c3d214996b12f3e5439"
94
94
  }