@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 +21 -0
- package/dist/es/components/Accordion/Accordion.d.ts +7 -2
- package/dist/es/components/Accordion/Accordion.js +14 -7
- package/dist/es/components/Badges/components/TimerBadge/TimerBadge.d.ts +2 -0
- package/dist/es/components/Badges/components/TimerBadge/TimerBadge.js +5 -4
- package/dist/es/components/Caption/Caption.css +1 -1
- package/dist/es/components/Notification/Notification.js +3 -3
- package/dist/lib/components/Accordion/Accordion.d.ts +7 -2
- package/dist/lib/components/Accordion/Accordion.js +14 -7
- package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.d.ts +2 -0
- package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.js +6 -4
- package/dist/lib/components/Caption/Caption.css +1 -1
- package/dist/lib/components/Notification/Notification.js +2 -2
- package/package.json +4 -4
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,  , 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?:
|
|
23
|
-
|
|
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,
|
|
68
|
-
as: "h5"
|
|
69
|
-
|
|
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,
|
|
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
|
-
}
|
|
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.
|
|
96
|
-
|
|
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;
|
|
@@ -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?:
|
|
23
|
-
|
|
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"],
|
|
88
|
-
as: "h5"
|
|
89
|
-
|
|
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"],
|
|
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
|
-
}
|
|
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.
|
|
116
|
-
|
|
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;
|
|
@@ -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.
|
|
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.
|
|
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.
|
|
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": "
|
|
103
|
+
"gitHead": "fd77e756d2591ad3489e94c585d40bfa05e40710"
|
|
104
104
|
}
|