@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 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
@@ -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["".concat(color, "-").concat(hue)];
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["".concat(props.color, "-600")], props.theme.palette["".concat(props.color, "-050")], getColor(props), getColor(props), getColor(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[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 = {}, _defineProperty(_mapSizeToPx, AlertSize.SMALL, 48), _defineProperty(_mapSizeToPx, AlertSize.MEDIUM, 96), _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 = _objectWithoutProperties(_mapTypeToStatus$type, _excluded);
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 = {}, _defineProperty(_IconSize, AlertSize.SMALL, 48), _defineProperty(_IconSize, AlertSize.MEDIUM, 96), _IconSize);
13
- export var FontSize = (_FontSize = {}, _defineProperty(_FontSize, AlertSize.SMALL, 14), _defineProperty(_FontSize, AlertSize.MEDIUM, 18), _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["".concat(props.color, "-600")];
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["".concat(props.color, "-600")];
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["".concat(props.color, "-600")];
13
+ return props.theme.palette[props.color + "-600"];
14
14
  }
15
15
 
16
16
  if (props.mode === 'background-outline') {
17
- return props.theme.palette["".concat(props.color, "-050")];
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["".concat(props.color, "-200")] : 'none';
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 ".concat(props.theme.palette["grey-300"]) : 'none';
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 ".concat(props.theme.palette["grey-300"]) : 'none';
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 = _objectWithoutProperties(_ref, _excluded);
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["".concat(props.customColorIcon, "-600")] : props.theme.palette["".concat(props.color, "-600")];
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["".concat(props.customColorIcon, "-600")] : props.theme.palette["".concat(props.color, "-600")];
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["".concat(props.customColor, "-050")] : props.theme.palette["".concat(props.color, "-050")];
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["".concat(props.customColor, "-200")] : props.theme.palette["".concat(props.color, "-200")];
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["".concat(props.customColor, "-600")] : props.theme.palette["".concat(props.color, "-600")];
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["".concat(props.color, "-600")];
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["".concat(props.customColorText, "-600")] : getColorText(props);
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["".concat(props.customColorIcon, "-600")] : getColorIcon;
84
+ return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
85
85
  }, function (props) {
86
- return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : getColorIcon;
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["".concat(props.customColorText, "-600")] : getColorText(props);
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["".concat(props.customColorText, "-600")] : getColorText(props);
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["".concat(props.customColorText, "-600")] : getColorText(props);
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["".concat(props.customColorText, "-600")] : getColorText(props);
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["".concat(props.customColorText, "-600")] : getColorText(props);
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["".concat(props.customColorText, "-600")] : getColorText(props);
138
+ return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
139
139
  }, function (props) {
140
- return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
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["".concat(props.customColor, "-600")] : getColorBackground(props);
160
+ return props.customColor ? props.theme.palette[props.customColor + "-600"] : getColorBackground(props);
161
161
  }, function (props) {
162
- return props.color ? "0px 16px 32px 5px ".concat(props.theme.palette["grey-200"]) : 'none';
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["".concat(props.customColorText, "-600")] : getColorText(props);
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["".concat(props.customColorText, "-600")] : getColorText(props);
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.1",
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.1",
36
- "@synerise/ds-icon": "^0.46.1",
37
- "@synerise/ds-typography": "^0.12.1",
38
- "@synerise/ds-unordered-list": "^0.2.1",
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": "14733fd96fcf0727a2baf45444e54e9a490d64f4"
50
+ "gitHead": "2468359677783819939fb9f1ef5acc36667ecd1a"
51
51
  }