@synerise/ds-alert 0.4.1 → 0.4.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +8 -0
- package/dist/Alert.styles.js +2 -2
- package/dist/AlertInfo/AlertInfo.js +2 -6
- package/dist/AlertInfo/AlertInfo.types.js +2 -4
- package/dist/BroadcastBar/BroadcastBar.styles.js +1 -1
- package/dist/ColorSemantic/AlertSemanticColor.styles.js +6 -6
- package/dist/IconAlert/IconAlert.js +1 -3
- package/dist/SectionMessage/SectionMessage.styles.js +5 -5
- package/dist/Toast/Toast.styles.js +15 -15
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,14 @@
|
|
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.4.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.4.1...@synerise/ds-alert@0.4.2) (2021-11-22)
|
7
|
+
|
8
|
+
**Note:** Version bump only for package @synerise/ds-alert
|
9
|
+
|
10
|
+
|
11
|
+
|
12
|
+
|
13
|
+
|
6
14
|
## [0.4.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.25...@synerise/ds-alert@0.4.1) (2021-11-09)
|
7
15
|
|
8
16
|
**Note:** Version bump only for package @synerise/ds-alert
|
package/dist/Alert.styles.js
CHANGED
@@ -7,7 +7,7 @@ var getColor = function getColor(props) {
|
|
7
7
|
var color = props.color,
|
8
8
|
theme = props.theme;
|
9
9
|
var hue = DARKER_COLORS.includes(color) ? '700' : '600';
|
10
|
-
return theme.palette[
|
10
|
+
return theme.palette[color + "-" + hue];
|
11
11
|
};
|
12
12
|
|
13
13
|
export var AntdAlert = styled(function (props) {
|
@@ -16,7 +16,7 @@ export var AntdAlert = styled(function (props) {
|
|
16
16
|
displayName: "Alertstyles__AntdAlert",
|
17
17
|
componentId: "k5v82n-0"
|
18
18
|
})(["", ";", ";", ";"], function (props) {
|
19
|
-
return Boolean(props.color) && css(["&&&{box-shadow:0 0 0 1px ", ";background-color:", ";color:", ";.ant-alert-icon{svg{color:", ";fill:", ";}}}"], props.theme.palette[
|
19
|
+
return Boolean(props.color) && css(["&&&{box-shadow:0 0 0 1px ", ";background-color:", ";color:", ";.ant-alert-icon{svg{color:", ";fill:", ";}}}"], props.theme.palette[props.color + "-600"], props.theme.palette[props.color + "-050"], getColor(props), getColor(props), getColor(props));
|
20
20
|
}, function (props) {
|
21
21
|
return (props.mode === 'background' || props.mode === 'clear' || !props.mode) && css(["&&&{box-shadow:none;}"]);
|
22
22
|
}, function (props) {
|
@@ -2,17 +2,13 @@ var _excluded = ["IconComponent"];
|
|
2
2
|
|
3
3
|
var _mapSizeToPx;
|
4
4
|
|
5
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
6
|
-
|
7
5
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
8
6
|
|
9
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
10
|
-
|
11
7
|
import * as React from 'react';
|
12
8
|
import Icon, { CheckL, WarningL, WarningXl, CheckXl } from '@synerise/ds-icon';
|
13
9
|
import { AlertSize } from './AlertInfo.types';
|
14
10
|
import * as S from './AlertInfo.styles';
|
15
|
-
var mapSizeToPx = (_mapSizeToPx = {},
|
11
|
+
var mapSizeToPx = (_mapSizeToPx = {}, _mapSizeToPx[AlertSize.SMALL] = 48, _mapSizeToPx[AlertSize.MEDIUM] = 96, _mapSizeToPx);
|
16
12
|
|
17
13
|
var AlertInfo = function AlertInfo(_ref) {
|
18
14
|
var _ref$size = _ref.size,
|
@@ -42,7 +38,7 @@ var AlertInfo = function AlertInfo(_ref) {
|
|
42
38
|
|
43
39
|
var _mapTypeToStatus$type = mapTypeToStatus[type],
|
44
40
|
IconComponent = _mapTypeToStatus$type.IconComponent,
|
45
|
-
iconContainerStyles =
|
41
|
+
iconContainerStyles = _objectWithoutPropertiesLoose(_mapTypeToStatus$type, _excluded);
|
46
42
|
|
47
43
|
return /*#__PURE__*/React.createElement(S.AlertWrapper, {
|
48
44
|
mode: mode,
|
@@ -1,7 +1,5 @@
|
|
1
1
|
var _IconSize, _FontSize;
|
2
2
|
|
3
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
4
|
-
|
5
3
|
export var AlertSize;
|
6
4
|
|
7
5
|
(function (AlertSize) {
|
@@ -9,5 +7,5 @@ export var AlertSize;
|
|
9
7
|
AlertSize["MEDIUM"] = "medium";
|
10
8
|
})(AlertSize || (AlertSize = {}));
|
11
9
|
|
12
|
-
export var IconSize = (_IconSize = {},
|
13
|
-
export var FontSize = (_FontSize = {},
|
10
|
+
export var IconSize = (_IconSize = {}, _IconSize[AlertSize.SMALL] = 48, _IconSize[AlertSize.MEDIUM] = 96, _IconSize);
|
11
|
+
export var FontSize = (_FontSize = {}, _FontSize[AlertSize.SMALL] = 14, _FontSize[AlertSize.MEDIUM] = 18, _FontSize);
|
@@ -6,7 +6,7 @@ var getColorBackground = function getColorBackground(props) {
|
|
6
6
|
return props.theme.palette['red-500'];
|
7
7
|
}
|
8
8
|
|
9
|
-
return props.theme.palette[
|
9
|
+
return props.theme.palette[props.color + "-600"];
|
10
10
|
};
|
11
11
|
|
12
12
|
var getColorIcon = function getColorIcon(props) {
|
@@ -5,16 +5,16 @@ var getAlertIconColor = function getAlertIconColor(props) {
|
|
5
5
|
return props.theme.palette.white;
|
6
6
|
}
|
7
7
|
|
8
|
-
return props.theme.palette[
|
8
|
+
return props.theme.palette[props.color + "-600"];
|
9
9
|
};
|
10
10
|
|
11
11
|
var getAlertColor = function getAlertColor(props) {
|
12
12
|
if (props.mode === 'background' || props.mode === 'shadow') {
|
13
|
-
return props.theme.palette[
|
13
|
+
return props.theme.palette[props.color + "-600"];
|
14
14
|
}
|
15
15
|
|
16
16
|
if (props.mode === 'background-outline') {
|
17
|
-
return props.theme.palette[
|
17
|
+
return props.theme.palette[props.color + "-050"];
|
18
18
|
}
|
19
19
|
|
20
20
|
return props.theme.palette.white;
|
@@ -28,9 +28,9 @@ export var Container = styled.div.withConfig({
|
|
28
28
|
displayName: "AlertSemanticColorstyles__Container",
|
29
29
|
componentId: "sc-1rxl2y2-1"
|
30
30
|
})(["width:100px;height:100px;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-radius:4px;-webkit-box-shadow:", ";box-shadow:", ";"], getAlertColor, function (props) {
|
31
|
-
return props.mode === 'background-outline' ? props.theme.palette[
|
31
|
+
return props.mode === 'background-outline' ? props.theme.palette[props.color + "-200"] : 'none';
|
32
32
|
}, function (props) {
|
33
|
-
return props.mode === 'shadow' ? "0px 16px 32px 5px "
|
33
|
+
return props.mode === 'shadow' ? "0px 16px 32px 5px " + props.theme.palette["grey-300"] : 'none';
|
34
34
|
}, function (props) {
|
35
|
-
return props.mode === 'shadow' ? "0px 16px 32px 5px "
|
35
|
+
return props.mode === 'shadow' ? "0px 16px 32px 5px " + props.theme.palette["grey-300"] : 'none';
|
36
36
|
});
|
@@ -2,8 +2,6 @@ var _excluded = ["type", "iconAlert", "message", "withLink", "withEmphasis", "ho
|
|
2
2
|
|
3
3
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
4
4
|
|
5
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
6
|
-
|
7
5
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
8
6
|
|
9
7
|
import Icon, { Check2M, WarningFillM, InfoM } from '@synerise/ds-icon';
|
@@ -25,7 +23,7 @@ var IconAlert = function IconAlert(_ref) {
|
|
25
23
|
withEmphasis = _ref.withEmphasis,
|
26
24
|
hoverButton = _ref.hoverButton,
|
27
25
|
disabled = _ref.disabled,
|
28
|
-
rest =
|
26
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
29
27
|
|
30
28
|
var icon = React.useMemo(function () {
|
31
29
|
return ICONS[type];
|
@@ -17,9 +17,9 @@ export var IconWrapper = styled.div.withConfig({
|
|
17
17
|
displayName: "SectionMessagestyles__IconWrapper",
|
18
18
|
componentId: "sc-1kuq4h0-3"
|
19
19
|
})(["margin:10px 12px;display:flex;svg{color:", ";fill:", ";}"], function (props) {
|
20
|
-
return props.customColorIcon ? props.theme.palette[
|
20
|
+
return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
|
21
21
|
}, function (props) {
|
22
|
-
return props.customColorIcon ? props.theme.palette[
|
22
|
+
return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
|
23
23
|
});
|
24
24
|
export var IconCloseWrapper = styled.div.withConfig({
|
25
25
|
displayName: "SectionMessagestyles__IconCloseWrapper",
|
@@ -75,11 +75,11 @@ export var Container = styled.div.withConfig({
|
|
75
75
|
displayName: "SectionMessagestyles__Container",
|
76
76
|
componentId: "sc-1kuq4h0-12"
|
77
77
|
})(["width:100%;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-top:2px solid ", ";border-radius:2px;"], function (props) {
|
78
|
-
return props.customColor ? props.theme.palette[
|
78
|
+
return props.customColor ? props.theme.palette[props.customColor + "-050"] : props.theme.palette[props.color + "-050"];
|
79
79
|
}, function (props) {
|
80
|
-
return props.customColor ? props.theme.palette[
|
80
|
+
return props.customColor ? props.theme.palette[props.customColor + "-200"] : props.theme.palette[props.color + "-200"];
|
81
81
|
}, function (props) {
|
82
|
-
return props.customColor ? props.theme.palette[
|
82
|
+
return props.customColor ? props.theme.palette[props.customColor + "-600"] : props.theme.palette[props.color + "-600"];
|
83
83
|
});
|
84
84
|
export var WrapperSectionMessage = styled.div.withConfig({
|
85
85
|
displayName: "SectionMessagestyles__WrapperSectionMessage",
|
@@ -45,7 +45,7 @@ var getColorBackground = function getColorBackground(props) {
|
|
45
45
|
return props.theme.palette['red-500'];
|
46
46
|
|
47
47
|
default:
|
48
|
-
return props.theme.palette[
|
48
|
+
return props.theme.palette[props.color + "-600"];
|
49
49
|
}
|
50
50
|
};
|
51
51
|
|
@@ -75,27 +75,27 @@ export var Text = styled.div.withConfig({
|
|
75
75
|
displayName: "Toaststyles__Text",
|
76
76
|
componentId: "q5tn0-2"
|
77
77
|
})(["display:flex;color:", ";"], function (props) {
|
78
|
-
return props.customColorText ? props.theme.palette[
|
78
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
79
79
|
});
|
80
80
|
export var IconWrapper = styled.div.withConfig({
|
81
81
|
displayName: "Toaststyles__IconWrapper",
|
82
82
|
componentId: "q5tn0-3"
|
83
83
|
})(["margin:10px 12px;display:flex;svg{color:", ";fill:", ";}"], function (props) {
|
84
|
-
return props.customColorIcon ? props.theme.palette[
|
84
|
+
return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
|
85
85
|
}, function (props) {
|
86
|
-
return props.customColorIcon ? props.theme.palette[
|
86
|
+
return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
|
87
87
|
});
|
88
88
|
export var IconCloseWrapper = styled.div.withConfig({
|
89
89
|
displayName: "Toaststyles__IconCloseWrapper",
|
90
90
|
componentId: "q5tn0-4"
|
91
91
|
})(["margin:3px 5px 2px;cursor:pointer;svg{fill:", ";}"], function (props) {
|
92
|
-
return props.customColorText ? props.theme.palette[
|
92
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
93
93
|
});
|
94
94
|
export var IconExpanderWrapper = styled.div.withConfig({
|
95
95
|
displayName: "Toaststyles__IconExpanderWrapper",
|
96
96
|
componentId: "q5tn0-5"
|
97
97
|
})(["margin:3px 5px 2px;cursor:pointer;svg{fill:", ";transition:transform 0.1s linear;transform:rotateZ(", ");}"], function (props) {
|
98
|
-
return props.customColorText ? props.theme.palette[
|
98
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
99
99
|
}, function (props) {
|
100
100
|
return props.expanded ? '180deg' : '0deg';
|
101
101
|
});
|
@@ -113,7 +113,7 @@ export var NumberWrapper = styled.div.withConfig({
|
|
113
113
|
})(["margin-left:4px;color:inherit;opacity:0.6;cursor:pointer;&:hover{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;opacity:1;color:", ";}"], function (props) {
|
114
114
|
return props.theme.palette['grey-400'];
|
115
115
|
}, function (props) {
|
116
|
-
return props.customColorText ? props.theme.palette[
|
116
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
117
117
|
});
|
118
118
|
export var ListWrapper = styled.div.withConfig({
|
119
119
|
displayName: "Toaststyles__ListWrapper",
|
@@ -125,7 +125,7 @@ export var IconOrderWrapper = styled.div.withConfig({
|
|
125
125
|
displayName: "Toaststyles__IconOrderWrapper",
|
126
126
|
componentId: "q5tn0-10"
|
127
127
|
})(["display:none;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
|
128
|
-
return props.customColorText ? props.theme.palette[
|
128
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
129
129
|
}, function (props) {
|
130
130
|
return props.theme.palette['blue-600'];
|
131
131
|
});
|
@@ -133,11 +133,11 @@ export var OrderWrapper = styled.div.withConfig({
|
|
133
133
|
displayName: "Toaststyles__OrderWrapper",
|
134
134
|
componentId: "q5tn0-11"
|
135
135
|
})(["display:flex;color:", ";&: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;opacity:1;color:", ";}}"], function (props) {
|
136
|
-
return props.customColorText ? props.theme.palette[
|
136
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
137
137
|
}, IconOrderWrapper, NumberWrapper, function (props) {
|
138
|
-
return props.customColorText ? props.theme.palette[
|
138
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
139
139
|
}, function (props) {
|
140
|
-
return props.customColorText ? props.theme.palette[
|
140
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
141
141
|
});
|
142
142
|
export var Wrapper = styled.div.withConfig({
|
143
143
|
displayName: "Toaststyles__Wrapper",
|
@@ -157,9 +157,9 @@ export var Container = styled.div.withConfig({
|
|
157
157
|
})(["width:", ";align-items:center;justify-content:center;background-color:", ";border-radius:4px;box-shadow:", ";"], function (props) {
|
158
158
|
return props.expander && props.expandedContent && props.withClose ? '460px' : getWidth(props);
|
159
159
|
}, function (props) {
|
160
|
-
return props.customColor ? props.theme.palette[
|
160
|
+
return props.customColor ? props.theme.palette[props.customColor + "-600"] : getColorBackground(props);
|
161
161
|
}, function (props) {
|
162
|
-
return props.color ? "0px 16px 32px 5px "
|
162
|
+
return props.color ? "0px 16px 32px 5px " + props.theme.palette["grey-200"] : 'none';
|
163
163
|
});
|
164
164
|
export var WrapperSectionMessage = styled.div.withConfig({
|
165
165
|
displayName: "Toaststyles__WrapperSectionMessage",
|
@@ -169,7 +169,7 @@ export var AlertMessage = styled.span.withConfig({
|
|
169
169
|
displayName: "Toaststyles__AlertMessage",
|
170
170
|
componentId: "q5tn0-16"
|
171
171
|
})(["font-size:16px;line-height:1.25;font-weight:500;max-width:400px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
|
172
|
-
return props.customColorText ? props.theme.palette[
|
172
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
173
173
|
});
|
174
174
|
export var AlertDescription = styled.span.withConfig({
|
175
175
|
displayName: "Toaststyles__AlertDescription",
|
@@ -177,5 +177,5 @@ export var AlertDescription = styled.span.withConfig({
|
|
177
177
|
})(["display:flex;font-size:13px;line-height:1.39;font-weight:normal;padding:", ";margin-top:2px;color:", ";"], function (props) {
|
178
178
|
return props.button || props.expandedContent ? ' 0 3px 10px 0' : '0px';
|
179
179
|
}, function (props) {
|
180
|
-
return props.customColorText ? props.theme.palette[
|
180
|
+
return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
|
181
181
|
});
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@synerise/ds-alert",
|
3
|
-
"version": "0.4.
|
3
|
+
"version": "0.4.2",
|
4
4
|
"description": "Alert UI Component for the Synerise Design System",
|
5
5
|
"license": "ISC",
|
6
6
|
"repository": "Synerise/synerise-design",
|
@@ -32,10 +32,10 @@
|
|
32
32
|
],
|
33
33
|
"types": "dist/index.d.ts",
|
34
34
|
"dependencies": {
|
35
|
-
"@synerise/ds-button": "^0.16.
|
36
|
-
"@synerise/ds-icon": "^0.46.
|
37
|
-
"@synerise/ds-typography": "^0.12.
|
38
|
-
"@synerise/ds-unordered-list": "^0.2.
|
35
|
+
"@synerise/ds-button": "^0.16.2",
|
36
|
+
"@synerise/ds-icon": "^0.46.2",
|
37
|
+
"@synerise/ds-typography": "^0.12.2",
|
38
|
+
"@synerise/ds-unordered-list": "^0.2.2",
|
39
39
|
"animate.css": "^4.1.1",
|
40
40
|
"react-animate-height": "^2.0.23",
|
41
41
|
"react-mount-animation": "0.0.9"
|
@@ -47,5 +47,5 @@
|
|
47
47
|
"devDependencies": {
|
48
48
|
"@synerise/ds-utils": "^0.19.0"
|
49
49
|
},
|
50
|
-
"gitHead": "
|
50
|
+
"gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
|
51
51
|
}
|