@synerise/ds-alert 0.8.24 → 0.8.25
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +11 -0
- package/dist/SectionMessage/SectionMessage.d.ts +1 -1
- package/dist/SectionMessage/SectionMessage.js +4 -11
- package/dist/SectionMessage/SectionMessage.styles.d.ts +1 -0
- package/dist/SectionMessage/SectionMessage.styles.js +14 -10
- package/dist/SectionMessage/SectionMessage.types.d.ts +1 -2
- package/package.json +5 -5
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
|
+
## [0.8.25](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.24...@synerise/ds-alert@0.8.25) (2024-08-30)
|
7
|
+
|
8
|
+
|
9
|
+
### Bug Fixes
|
10
|
+
|
11
|
+
* **alert:** fixes to section message ([b8e40ce](https://github.com/Synerise/synerise-design/commit/b8e40ceb26fc53e91660047e9953600cf09c653d))
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
|
16
|
+
|
6
17
|
## [0.8.24](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.23...@synerise/ds-alert@0.8.24) (2024-08-27)
|
7
18
|
|
8
19
|
**Note:** Version bump only for package @synerise/ds-alert
|
@@ -1,4 +1,4 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { Props } from './SectionMessage.types';
|
3
|
-
declare const SectionMessage: ({ icon, type, message, description, showMoreLabel, onShowMore, onClose,
|
3
|
+
declare const SectionMessage: ({ icon, type, message, description, showMoreLabel, onShowMore, onClose, suffixel, moreButtons, withEmphasis, withLink, unorderedList, color, withClose, customColor, customColorIcon, customIcon, }: Props) => React.JSX.Element;
|
4
4
|
export default SectionMessage;
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import React, { useMemo } from 'react';
|
2
|
-
import Icon, { CloseM, WarningFillM,
|
3
|
-
import Button from '@synerise/ds-button';
|
2
|
+
import Icon, { CloseM, WarningFillM, Check3M, HelpFillM, UserUpM, UpdateDataM, NotificationsReceiveM } from '@synerise/ds-icon';
|
4
3
|
import * as S from './SectionMessage.styles';
|
5
4
|
var ICONS = {
|
6
5
|
positive: /*#__PURE__*/React.createElement(Check3M, null),
|
@@ -21,7 +20,7 @@ var SectionMessage = function SectionMessage(_ref) {
|
|
21
20
|
showMoreLabel = _ref.showMoreLabel,
|
22
21
|
onShowMore = _ref.onShowMore,
|
23
22
|
onClose = _ref.onClose,
|
24
|
-
|
23
|
+
suffixel = _ref.suffixel,
|
25
24
|
moreButtons = _ref.moreButtons,
|
26
25
|
withEmphasis = _ref.withEmphasis,
|
27
26
|
withLink = _ref.withLink,
|
@@ -30,8 +29,7 @@ var SectionMessage = function SectionMessage(_ref) {
|
|
30
29
|
withClose = _ref.withClose,
|
31
30
|
customColor = _ref.customColor,
|
32
31
|
customColorIcon = _ref.customColorIcon,
|
33
|
-
customIcon = _ref.customIcon
|
34
|
-
textButton = _ref.textButton;
|
32
|
+
customIcon = _ref.customIcon;
|
35
33
|
var renderMessage = useMemo(function () {
|
36
34
|
return /*#__PURE__*/React.createElement(S.AlertContent, {
|
37
35
|
withLink: withLink
|
@@ -58,12 +56,7 @@ var SectionMessage = function SectionMessage(_ref) {
|
|
58
56
|
customColorIcon: customColorIcon
|
59
57
|
}, customIcon || /*#__PURE__*/React.createElement(Icon, {
|
60
58
|
component: renderIcon
|
61
|
-
})), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null,
|
62
|
-
type: "ghost",
|
63
|
-
mode: "icon-label"
|
64
|
-
}, /*#__PURE__*/React.createElement(Icon, {
|
65
|
-
component: /*#__PURE__*/React.createElement(UserAddM, null)
|
66
|
-
}), textButton), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
|
59
|
+
})), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, suffixel && /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel), withClose && /*#__PURE__*/React.createElement(S.IconCloseWrapper, {
|
67
60
|
onClick: handleClose
|
68
61
|
}, /*#__PURE__*/React.createElement(Icon, {
|
69
62
|
component: /*#__PURE__*/React.createElement(CloseM, null)
|
@@ -14,6 +14,7 @@ export declare const ButtonWrapper: import("styled-components").StyledComponent<
|
|
14
14
|
export declare const FirstButtonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
15
15
|
export declare const NumberWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
16
16
|
export declare const ButtonsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
17
|
+
export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
17
18
|
export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
18
19
|
export declare const OrderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
19
20
|
export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
@@ -49,9 +49,13 @@ export var ButtonsWrapper = styled.div.withConfig({
|
|
49
49
|
displayName: "SectionMessagestyles__ButtonsWrapper",
|
50
50
|
componentId: "sc-1kuq4h0-8"
|
51
51
|
})(["padding:16px 0 0 0;display:flex;"]);
|
52
|
+
export var SuffixWrapper = styled.div.withConfig({
|
53
|
+
displayName: "SectionMessagestyles__SuffixWrapper",
|
54
|
+
componentId: "sc-1kuq4h0-9"
|
55
|
+
})(["display:flex;"]);
|
52
56
|
export var IconOrderWrapper = styled.div.withConfig({
|
53
57
|
displayName: "SectionMessagestyles__IconOrderWrapper",
|
54
|
-
componentId: "sc-1kuq4h0-
|
58
|
+
componentId: "sc-1kuq4h0-10"
|
55
59
|
})(["display:none;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
|
56
60
|
return props.theme.palette['grey-700'];
|
57
61
|
}, function (props) {
|
@@ -59,7 +63,7 @@ export var IconOrderWrapper = styled.div.withConfig({
|
|
59
63
|
});
|
60
64
|
export var OrderWrapper = styled.div.withConfig({
|
61
65
|
displayName: "SectionMessagestyles__OrderWrapper",
|
62
|
-
componentId: "sc-1kuq4h0-
|
66
|
+
componentId: "sc-1kuq4h0-11"
|
63
67
|
})(["display:flex;&:hover{", "{display:block;}", "{background-image:linear-gradient( to right,", " 20%,rgba(255,255,255,0) 10% );background-color:transparent;background-position:bottom left;background-size:5px 1px;background-repeat:repeat-x;color:", ";}}"], IconOrderWrapper, NumberWrapper, function (props) {
|
64
68
|
return props.theme.palette['grey-400'];
|
65
69
|
}, function (props) {
|
@@ -67,13 +71,13 @@ export var OrderWrapper = styled.div.withConfig({
|
|
67
71
|
});
|
68
72
|
export var Wrapper = styled.div.withConfig({
|
69
73
|
displayName: "SectionMessagestyles__Wrapper",
|
70
|
-
componentId: "sc-1kuq4h0-
|
74
|
+
componentId: "sc-1kuq4h0-12"
|
71
75
|
})(["margin-top:10px;color:", ";"], function (props) {
|
72
76
|
return props.theme.palette['grey-700'];
|
73
77
|
});
|
74
78
|
export var Container = styled.div.withConfig({
|
75
79
|
displayName: "SectionMessagestyles__Container",
|
76
|
-
componentId: "sc-1kuq4h0-
|
80
|
+
componentId: "sc-1kuq4h0-13"
|
77
81
|
})(["width:100%;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-top:2px solid ", ";border-radius:2px;"], function (props) {
|
78
82
|
return props.customColor ? props.theme.palette[props.customColor + "-050"] : props.theme.palette[props.color + "-050"];
|
79
83
|
}, function (props) {
|
@@ -83,29 +87,29 @@ export var Container = styled.div.withConfig({
|
|
83
87
|
});
|
84
88
|
export var WrapperSectionMessage = styled.div.withConfig({
|
85
89
|
displayName: "SectionMessagestyles__WrapperSectionMessage",
|
86
|
-
componentId: "sc-1kuq4h0-
|
90
|
+
componentId: "sc-1kuq4h0-14"
|
87
91
|
})(["display:flex;font-size:13px;color:inherit;justify-content:space-between;"]);
|
88
92
|
export var AlertMessage = styled.span.withConfig({
|
89
93
|
displayName: "SectionMessagestyles__AlertMessage",
|
90
|
-
componentId: "sc-1kuq4h0-
|
94
|
+
componentId: "sc-1kuq4h0-15"
|
91
95
|
})(["font-size:13px;line-height:1.39;font-weight:500;max-width:400px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
|
92
96
|
return props.theme.palette['grey-700'];
|
93
97
|
});
|
94
98
|
export var AlertDescription = styled.span.withConfig({
|
95
99
|
displayName: "SectionMessagestyles__AlertDescription",
|
96
|
-
componentId: "sc-1kuq4h0-
|
100
|
+
componentId: "sc-1kuq4h0-16"
|
97
101
|
})(["display:flex;font-size:13px;line-height:1.39;font-weight:normal;padding-right:3px;margin-top:2px;color:", ";"], function (props) {
|
98
102
|
return props.theme.palette['grey-700'];
|
99
103
|
});
|
100
104
|
export var EmphasisWrapper = styled.span.withConfig({
|
101
105
|
displayName: "SectionMessagestyles__EmphasisWrapper",
|
102
|
-
componentId: "sc-1kuq4h0-
|
106
|
+
componentId: "sc-1kuq4h0-17"
|
103
107
|
})(["display:flex;font-size:13px;line-height:1.39;font-weight:500;margin-top:2px;color:inherit;"]);
|
104
108
|
export var LinkWrapper = styled.span.withConfig({
|
105
109
|
displayName: "SectionMessagestyles__LinkWrapper",
|
106
|
-
componentId: "sc-1kuq4h0-
|
110
|
+
componentId: "sc-1kuq4h0-18"
|
107
111
|
})(["display:flex;font-size:13px;line-height:1.5;font-weight:400;margin-top:2px;color:inherit;text-decoration:underline;cursor:pointer;a{color:inherit;}"]);
|
108
112
|
export var AlertShowMore = styled.span.withConfig({
|
109
113
|
displayName: "SectionMessagestyles__AlertShowMore",
|
110
|
-
componentId: "sc-1kuq4h0-
|
114
|
+
componentId: "sc-1kuq4h0-19"
|
111
115
|
})(["display:flex;font-size:13px;font-weight:500;color:inherit;text-decoration:underline;cursor:pointer;margin-top:6px;"]);
|
@@ -15,12 +15,11 @@ export interface Props extends Omit<AlertProps, 'type' | 'message'> {
|
|
15
15
|
showMoreLabel?: React.ReactNode;
|
16
16
|
onShowMore?: () => void;
|
17
17
|
onClose?: () => void;
|
18
|
-
|
18
|
+
suffixel?: React.ReactNode;
|
19
19
|
moreButtons?: boolean | React.ReactNode;
|
20
20
|
withEmphasis?: React.ReactNode;
|
21
21
|
withLink?: React.ReactNode;
|
22
22
|
unorderedList?: React.ReactNode;
|
23
23
|
withClose?: React.ReactNode;
|
24
24
|
customIcon?: React.ReactElement;
|
25
|
-
textButton?: string;
|
26
25
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@synerise/ds-alert",
|
3
|
-
"version": "0.8.
|
3
|
+
"version": "0.8.25",
|
4
4
|
"description": "Alert UI Component for the Synerise Design System",
|
5
5
|
"license": "ISC",
|
6
6
|
"repository": "Synerise/synerise-design",
|
@@ -33,9 +33,9 @@
|
|
33
33
|
],
|
34
34
|
"types": "dist/index.d.ts",
|
35
35
|
"dependencies": {
|
36
|
-
"@synerise/ds-button": "^0.21.
|
37
|
-
"@synerise/ds-icon": "^0.65.
|
38
|
-
"@synerise/ds-unordered-list": "^0.3.
|
36
|
+
"@synerise/ds-button": "^0.21.7",
|
37
|
+
"@synerise/ds-icon": "^0.65.2",
|
38
|
+
"@synerise/ds-unordered-list": "^0.3.1",
|
39
39
|
"@synerise/ds-utils": "^0.28.2",
|
40
40
|
"animate.css": "^4.1.1",
|
41
41
|
"react-animate-height": "^2.0.23",
|
@@ -48,5 +48,5 @@
|
|
48
48
|
"react": ">=16.9.0 <= 17.0.2",
|
49
49
|
"styled-components": "5.0.1"
|
50
50
|
},
|
51
|
-
"gitHead": "
|
51
|
+
"gitHead": "d5df67eecdc1cbcb56def8c17d04b7d883876fbf"
|
52
52
|
}
|