@megafon/ui-shared 5.8.0 → 5.9.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 (18) 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/lib/components/BenefitsIcons/BenefitsIcons.d.ts +3 -1
  11. package/dist/lib/components/BenefitsIcons/BenefitsIcons.js +11 -4
  12. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.d.ts +2 -1
  13. package/dist/lib/components/BenefitsIcons/BenefitsIconsTile.js +29 -7
  14. package/dist/lib/components/BenefitsIcons/style/BenefitsIcons.css +9 -4
  15. package/dist/lib/components/BenefitsIcons/style/BenefitsIconsTile.css +48 -5
  16. package/dist/lib/components/BenefitsIcons/types.d.ts +9 -0
  17. package/dist/lib/components/BenefitsIcons/types.js +9 -2
  18. 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.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)
7
+
8
+
9
+ ### Features
10
+
11
+ * **benefitsicons:** add new prop background, set guide colors for svg icon ([9fc17c0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/9fc17c04ddc10fad823849ea10b5101d26bcbada))
12
+
13
+
14
+
15
+
16
+
17
+ ## [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)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * **banner:** fix children background ([a6e3d12](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/a6e3d127dd5b73dcea4d54e96e95ae8189f61824))
23
+
24
+
25
+
26
+
27
+
6
28
  # [5.8.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-shared@5.7.7...@megafon/ui-shared@5.8.0) (2024-04-22)
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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-shared",
3
- "version": "5.8.0",
3
+ "version": "5.9.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.0",
85
+ "@megafon/ui-core": "^5.11.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": "01efef995bd43c230a099a002906f61bfa44c730"
93
+ "gitHead": "3450c82e4358cc0decaa76da57c8fb37c774391f"
94
94
  }