@megafon/ui-shared 5.9.0 → 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 (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/es/components/ImageBanner/ImageBanner.css +6 -0
  3. package/dist/es/components/ImageBanner/ImageBanner.d.ts +10 -3
  4. package/dist/es/components/ImageBanner/ImageBanner.js +13 -5
  5. package/dist/es/helpers/getColumnConfig.d.ts +1 -1
  6. package/dist/lib/components/ImageBanner/ImageBanner.css +6 -0
  7. package/dist/lib/components/ImageBanner/ImageBanner.d.ts +10 -3
  8. package/dist/lib/components/ImageBanner/ImageBanner.js +15 -6
  9. package/dist/lib/helpers/getColumnConfig.d.ts +1 -1
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+
6
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)
7
18
 
8
19
 
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/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.9.0",
3
+ "version": "5.10.0",
4
4
  "files": [
5
5
  "dist"
6
6
  ],
@@ -82,7 +82,7 @@
82
82
  },
83
83
  "dependencies": {
84
84
  "@babel/runtime": "^7.8.4",
85
- "@megafon/ui-core": "^5.11.0",
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": "3450c82e4358cc0decaa76da57c8fb37c774391f"
93
+ "gitHead": "41cea5802cbc51e28d7f4c3d214996b12f3e5439"
94
94
  }