@synerise/ds-alert 0.4.1 → 0.4.2
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 +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
|
}
|