@megafon/ui-core 4.5.1 → 4.6.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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
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
+ # [4.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.5.1...@megafon/ui-core@4.6.0) (2022-10-31)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **accordion:** fix dataAttrs props ([bb6e71c](https://github.com/MegafonWebLab/megafon-ui/commit/bb6e71cf36687fdcfb41a9ee40a27e0fdb21940b))
12
+
13
+
14
+ ### Features
15
+
16
+ * **notification:** allow using html: br, &nbsp, font color, a href in title plus b in text ([1661b7b](https://github.com/MegafonWebLab/megafon-ui/commit/1661b7b602532594ed4d1398d9f70870b1e4d852))
17
+ * **timerbadge:** add iconContainer to dataAttrs prop ([fa9b094](https://github.com/MegafonWebLab/megafon-ui/commit/fa9b094b209705c448de63fe0cfbfe52764e6709))
18
+
19
+
20
+
21
+
22
+
6
23
  ## [4.5.1](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@4.5.0...@megafon/ui-core@4.5.1) (2022-10-24)
7
24
 
8
25
 
@@ -171,6 +188,10 @@ new sizes
171
188
  either accept new rules or manually add line-height: 16px in your components
172
189
  * **paragraph:** prop 'size' is no longer exists.
173
190
  use component Caption instead of Paragraph size="small"
191
+ * **header:** rename prop 'hAlign' to 'align'
192
+ * **list:** rename prop 'hAlign' to 'align'
193
+ * **contentarea:** remove value 'DEFAULT' from 'innerBackgroundColor' and 'outerBackgroundColor' props
194
+ * **tabs:** rename prop 'hAlign' to 'align'
174
195
 
175
196
 
176
197
 
@@ -19,8 +19,13 @@ export interface IAccordionProps {
19
19
  /** Дополнительные data атрибуты к внутренним элементам */
20
20
  dataAttrs?: {
21
21
  root?: Record<string, string>;
22
- header?: Record<string, string>;
23
- collapse?: Record<string, string>;
22
+ header?: {
23
+ root: Record<string, string>;
24
+ };
25
+ collapse?: {
26
+ root?: Record<string, string>;
27
+ inner?: Record<string, string>;
28
+ };
24
29
  titleWrap?: Record<string, string>;
25
30
  arrowUp?: Record<string, string>;
26
31
  arrowDown?: Record<string, string>;
@@ -64,17 +64,19 @@ var Accordion = function Accordion(_ref) {
64
64
  onKeyDown: handleClickTitle,
65
65
  tabIndex: 0,
66
66
  role: "button"
67
- }), /*#__PURE__*/React.createElement(Header, _extends({
68
- as: "h5"
69
- }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
67
+ }), /*#__PURE__*/React.createElement(Header, {
68
+ as: "h5",
69
+ dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
70
+ }, title), /*#__PURE__*/React.createElement("div", {
70
71
  className: cn('icon-box')
71
72
  }, /*#__PURE__*/React.createElement(ArrowDown, _extends({
72
73
  className: cn('icon')
73
- }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
74
+ }, filterDataAttrs(arrowDataAttrs))))), /*#__PURE__*/React.createElement(Collapse, {
75
+ dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse,
74
76
  className: cn('content', collapsePropsClasses),
75
77
  classNameContainer: cn('content-inner'),
76
78
  isOpened: isOpenedState
77
- }), children));
79
+ }, children));
78
80
  };
79
81
 
80
82
  Accordion.propTypes = {
@@ -92,8 +94,13 @@ Accordion.propTypes = {
92
94
  }),
93
95
  dataAttrs: PropTypes.shape({
94
96
  root: PropTypes.objectOf(PropTypes.string.isRequired),
95
- header: PropTypes.objectOf(PropTypes.string.isRequired),
96
- collapse: PropTypes.objectOf(PropTypes.string.isRequired),
97
+ header: PropTypes.shape({
98
+ root: PropTypes.objectOf(PropTypes.string.isRequired)
99
+ }),
100
+ collapse: PropTypes.shape({
101
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
102
+ inner: PropTypes.objectOf(PropTypes.string.isRequired)
103
+ }),
97
104
  titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
98
105
  arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
99
106
  arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import './TimerBadge.less';
3
+ export declare const TIMEOUT = 1000;
3
4
  export interface ITimerBadgeProps {
4
5
  /** Дата окончания таймера */
5
6
  expirationDate: Date;
@@ -18,6 +19,7 @@ export interface ITimerBadgeProps {
18
19
  root?: Record<string, string>;
19
20
  text?: Record<string, string>;
20
21
  timer?: Record<string, string>;
22
+ iconContainer?: Record<string, string>;
21
23
  };
22
24
  }
23
25
  declare const TimerBadge: React.FC<ITimerBadgeProps>;
@@ -21,7 +21,7 @@ var TimerIcon = function TimerIcon(props) {
21
21
 
22
22
  var SECONDS_IN_HOUR = 3600;
23
23
  var MS_IN_SECOND = 1000;
24
- var TIMEOUT = 1000;
24
+ export var TIMEOUT = 1000;
25
25
  var TimerBadgeTheme = {
26
26
  RED: 'red',
27
27
  GREY: 'grey'
@@ -75,11 +75,11 @@ var TimerBadge = function TimerBadge(_ref) {
75
75
  className: cn({
76
76
  theme: theme
77
77
  }, className)
78
- }), /*#__PURE__*/React.createElement("div", {
78
+ }), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconContainer), {
79
79
  className: cn('icon-container', {
80
80
  shadow: isLastHour && showCountdown
81
81
  })
82
- }, /*#__PURE__*/React.createElement(TimerIcon, {
82
+ }), /*#__PURE__*/React.createElement(TimerIcon, {
83
83
  className: cn('icon')
84
84
  })), /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
85
85
  className: cn('text')
@@ -104,7 +104,8 @@ TimerBadge.propTypes = {
104
104
  dataAttrs: PropTypes.shape({
105
105
  root: PropTypes.objectOf(PropTypes.string.isRequired),
106
106
  text: PropTypes.objectOf(PropTypes.string.isRequired),
107
- timer: PropTypes.objectOf(PropTypes.string.isRequired)
107
+ timer: PropTypes.objectOf(PropTypes.string.isRequired),
108
+ iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
108
109
  })
109
110
  };
110
111
  export default TimerBadge;
@@ -8,7 +8,7 @@
8
8
  font-weight: 400;
9
9
  }
10
10
  .mfui-caption_variant_medium {
11
- font-weight: 600;
11
+ font-weight: 500;
12
12
  }
13
13
  .mfui-caption_space_wide {
14
14
  line-height: 18px;
@@ -4,7 +4,7 @@ import "core-js/modules/web.timers";
4
4
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
5
5
  import _extends from "@babel/runtime/helpers/extends";
6
6
  import React, { useEffect, useRef, useState } from 'react';
7
- import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
7
+ import { cnCreate, filterDataAttrs, convert, titleConvertConfig, textConvertConfig } from '@megafon/ui-helpers';
8
8
  import * as PropTypes from 'prop-types';
9
9
  import Button from "../Button/Button";
10
10
  import TextLink from "../TextLink/TextLink";
@@ -299,7 +299,7 @@ var Notification = function Notification(_ref) {
299
299
  className: cn('text-container')
300
300
  }, title && /*#__PURE__*/React.createElement("span", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
301
301
  className: cn('title')
302
- }), title), /*#__PURE__*/React.createElement("div", _extends({
302
+ }), convert(title, titleConvertConfig)), /*#__PURE__*/React.createElement("div", _extends({
303
303
  ref: wrapTextRef
304
304
  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
305
305
  className: cn('text', {
@@ -308,7 +308,7 @@ var Notification = function Notification(_ref) {
308
308
  }), /*#__PURE__*/React.createElement("div", {
309
309
  ref: shortTextRef,
310
310
  className: cn('short-text', textClasses["short"])
311
- }, shortText || children), shortText && /*#__PURE__*/React.createElement("div", {
311
+ }, shortText && convert(shortText, textConvertConfig) || children), shortText && /*#__PURE__*/React.createElement("div", {
312
312
  ref: fullTextRef,
313
313
  className: cn('full-text', textClasses.full)
314
314
  }, children))), hasBottom && /*#__PURE__*/React.createElement("div", {
@@ -19,8 +19,13 @@ export interface IAccordionProps {
19
19
  /** Дополнительные data атрибуты к внутренним элементам */
20
20
  dataAttrs?: {
21
21
  root?: Record<string, string>;
22
- header?: Record<string, string>;
23
- collapse?: Record<string, string>;
22
+ header?: {
23
+ root: Record<string, string>;
24
+ };
25
+ collapse?: {
26
+ root?: Record<string, string>;
27
+ inner?: Record<string, string>;
28
+ };
24
29
  titleWrap?: Record<string, string>;
25
30
  arrowUp?: Record<string, string>;
26
31
  arrowDown?: Record<string, string>;
@@ -84,17 +84,19 @@ var Accordion = function Accordion(_ref) {
84
84
  onKeyDown: handleClickTitle,
85
85
  tabIndex: 0,
86
86
  role: "button"
87
- }), /*#__PURE__*/React.createElement(_Header["default"], (0, _extends2["default"])({
88
- as: "h5"
89
- }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header)), title), /*#__PURE__*/React.createElement("div", {
87
+ }), /*#__PURE__*/React.createElement(_Header["default"], {
88
+ as: "h5",
89
+ dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.header
90
+ }, title), /*#__PURE__*/React.createElement("div", {
90
91
  className: cn('icon-box')
91
92
  }, /*#__PURE__*/React.createElement(ArrowDown, (0, _extends2["default"])({
92
93
  className: cn('icon')
93
- }, (0, _uiHelpers.filterDataAttrs)(arrowDataAttrs))))), /*#__PURE__*/React.createElement(_Collapse["default"], (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse), {
94
+ }, (0, _uiHelpers.filterDataAttrs)(arrowDataAttrs))))), /*#__PURE__*/React.createElement(_Collapse["default"], {
95
+ dataAttrs: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.collapse,
94
96
  className: cn('content', collapsePropsClasses),
95
97
  classNameContainer: cn('content-inner'),
96
98
  isOpened: isOpenedState
97
- }), children));
99
+ }, children));
98
100
  };
99
101
 
100
102
  Accordion.propTypes = {
@@ -112,8 +114,13 @@ Accordion.propTypes = {
112
114
  }),
113
115
  dataAttrs: PropTypes.shape({
114
116
  root: PropTypes.objectOf(PropTypes.string.isRequired),
115
- header: PropTypes.objectOf(PropTypes.string.isRequired),
116
- collapse: PropTypes.objectOf(PropTypes.string.isRequired),
117
+ header: PropTypes.shape({
118
+ root: PropTypes.objectOf(PropTypes.string.isRequired)
119
+ }),
120
+ collapse: PropTypes.shape({
121
+ root: PropTypes.objectOf(PropTypes.string.isRequired),
122
+ inner: PropTypes.objectOf(PropTypes.string.isRequired)
123
+ }),
117
124
  titleWrap: PropTypes.objectOf(PropTypes.string.isRequired),
118
125
  arrowUp: PropTypes.objectOf(PropTypes.string.isRequired),
119
126
  arrowDown: PropTypes.objectOf(PropTypes.string.isRequired)
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import './TimerBadge.less';
3
+ export declare const TIMEOUT = 1000;
3
4
  export interface ITimerBadgeProps {
4
5
  /** Дата окончания таймера */
5
6
  expirationDate: Date;
@@ -18,6 +19,7 @@ export interface ITimerBadgeProps {
18
19
  root?: Record<string, string>;
19
20
  text?: Record<string, string>;
20
21
  timer?: Record<string, string>;
22
+ iconContainer?: Record<string, string>;
21
23
  };
22
24
  }
23
25
  declare const TimerBadge: React.FC<ITimerBadgeProps>;
@@ -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"] = void 0;
8
+ exports["default"] = exports.TIMEOUT = void 0;
9
9
 
10
10
  require("core-js/modules/es.date.now");
11
11
 
@@ -44,6 +44,7 @@ var TimerIcon = function TimerIcon(props) {
44
44
  var SECONDS_IN_HOUR = 3600;
45
45
  var MS_IN_SECOND = 1000;
46
46
  var TIMEOUT = 1000;
47
+ exports.TIMEOUT = TIMEOUT;
47
48
  var TimerBadgeTheme = {
48
49
  RED: 'red',
49
50
  GREY: 'grey'
@@ -97,11 +98,11 @@ var TimerBadge = function TimerBadge(_ref) {
97
98
  className: cn({
98
99
  theme: theme
99
100
  }, className)
100
- }), /*#__PURE__*/_react["default"].createElement("div", {
101
+ }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconContainer), {
101
102
  className: cn('icon-container', {
102
103
  shadow: isLastHour && showCountdown
103
104
  })
104
- }, /*#__PURE__*/_react["default"].createElement(TimerIcon, {
105
+ }), /*#__PURE__*/_react["default"].createElement(TimerIcon, {
105
106
  className: cn('icon')
106
107
  })), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
107
108
  className: cn('text')
@@ -126,7 +127,8 @@ TimerBadge.propTypes = {
126
127
  dataAttrs: PropTypes.shape({
127
128
  root: PropTypes.objectOf(PropTypes.string.isRequired),
128
129
  text: PropTypes.objectOf(PropTypes.string.isRequired),
129
- timer: PropTypes.objectOf(PropTypes.string.isRequired)
130
+ timer: PropTypes.objectOf(PropTypes.string.isRequired),
131
+ iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
130
132
  })
131
133
  };
132
134
  var _default = TimerBadge;
@@ -8,7 +8,7 @@
8
8
  font-weight: 400;
9
9
  }
10
10
  .mfui-caption_variant_medium {
11
- font-weight: 600;
11
+ font-weight: 500;
12
12
  }
13
13
  .mfui-caption_space_wide {
14
14
  line-height: 18px;
@@ -325,7 +325,7 @@ var Notification = function Notification(_ref) {
325
325
  className: cn('text-container')
326
326
  }, title && /*#__PURE__*/_react["default"].createElement("span", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.title), {
327
327
  className: cn('title')
328
- }), title), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
328
+ }), (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
329
329
  ref: wrapTextRef
330
330
  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
331
331
  className: cn('text', {
@@ -334,7 +334,7 @@ var Notification = function Notification(_ref) {
334
334
  }), /*#__PURE__*/_react["default"].createElement("div", {
335
335
  ref: shortTextRef,
336
336
  className: cn('short-text', textClasses["short"])
337
- }, shortText || children), shortText && /*#__PURE__*/_react["default"].createElement("div", {
337
+ }, shortText && (0, _uiHelpers.convert)(shortText, _uiHelpers.textConvertConfig) || children), shortText && /*#__PURE__*/_react["default"].createElement("div", {
338
338
  ref: fullTextRef,
339
339
  className: cn('full-text', textClasses.full)
340
340
  }, children))), hasBottom && /*#__PURE__*/_react["default"].createElement("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@megafon/ui-core",
3
- "version": "4.5.1",
3
+ "version": "4.6.0",
4
4
  "files": [
5
5
  "dist",
6
6
  "styles"
@@ -54,7 +54,7 @@
54
54
  "@babel/preset-env": "^7.8.6",
55
55
  "@babel/preset-react": "^7.8.3",
56
56
  "@babel/preset-typescript": "^7.8.3",
57
- "@megafon/ui-icons": "^2.2.0",
57
+ "@megafon/ui-icons": "^2.3.0",
58
58
  "@svgr/core": "^2.4.1",
59
59
  "@testing-library/jest-dom": "5.16.2",
60
60
  "@testing-library/react": "12.1.2",
@@ -89,7 +89,7 @@
89
89
  "dependencies": {
90
90
  "@babel/runtime": "^7.8.4",
91
91
  "@datepicker-react/hooks": "^2.7.0",
92
- "@megafon/ui-helpers": "^2.2.0",
92
+ "@megafon/ui-helpers": "^2.3.0",
93
93
  "@popperjs/core": "^2.5.3",
94
94
  "core-js": "^3.6.4",
95
95
  "date-fns": "^2.16.1",
@@ -100,5 +100,5 @@
100
100
  "react-popper": "^2.2.3",
101
101
  "swiper": "^6.5.6"
102
102
  },
103
- "gitHead": "08dd535c268cf6cd4f7c30d66845e5f16aa7b14d"
103
+ "gitHead": "fd77e756d2591ad3489e94c585d40bfa05e40710"
104
104
  }