@synerise/ds-alert 0.8.23 → 0.8.25
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 +19 -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 +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
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
|
+
|
|
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)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @synerise/ds-alert
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [0.8.23](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.22...@synerise/ds-alert@0.8.23) (2024-08-19)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -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,10 @@
|
|
|
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.
|
|
36
|
+
"@synerise/ds-button": "^0.21.7",
|
|
37
|
+
"@synerise/ds-icon": "^0.65.2",
|
|
38
|
+
"@synerise/ds-unordered-list": "^0.3.1",
|
|
39
|
+
"@synerise/ds-utils": "^0.28.2",
|
|
39
40
|
"animate.css": "^4.1.1",
|
|
40
41
|
"react-animate-height": "^2.0.23",
|
|
41
42
|
"react-dom": "16.13.0",
|
|
@@ -47,5 +48,5 @@
|
|
|
47
48
|
"react": ">=16.9.0 <= 17.0.2",
|
|
48
49
|
"styled-components": "5.0.1"
|
|
49
50
|
},
|
|
50
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "d5df67eecdc1cbcb56def8c17d04b7d883876fbf"
|
|
51
52
|
}
|