@synerise/ds-alert 0.4.0 → 0.4.4

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.4.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.4.3...@synerise/ds-alert@0.4.4) (2022-01-17)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
+## [0.4.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.4.2...@synerise/ds-alert@0.4.3) (2021-12-22)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
+## [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)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
+## [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)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
 # [0.4.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.3.25...@synerise/ds-alert@0.4.0) (2021-11-09)
 
 **Note:** Version bump only for package @synerise/ds-alert

package/dist/Alert.styles.js

@@ -7,7 +7,7 @@ var getColor = function getColor(props) {
   var color = props.color,
       theme = props.theme;
   var hue = DARKER_COLORS.includes(color) ? '700' : '600';
-  return theme.palette["".concat(color, "-").concat(hue)];
+  return theme.palette[color + "-" + hue];
 };
 
 export var AntdAlert = styled(function (props) {
@@ -16,7 +16,7 @@ export var AntdAlert = styled(function (props) {
   displayName: "Alertstyles__AntdAlert",
   componentId: "k5v82n-0"
 })(["", ";", ";", ";"], function (props) {
-  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));
+  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));
 }, function (props) {
   return (props.mode === 'background' || props.mode === 'clear' || !props.mode) && css(["&&&{box-shadow:none;}"]);
 }, function (props) {

package/dist/AlertInfo/AlertInfo.js

@@ -2,17 +2,13 @@ var _excluded = ["IconComponent"];
 
 var _mapSizeToPx;
 
-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; }
-
 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; }
 
-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; }
-
 import * as React from 'react';
 import Icon, { CheckL, WarningL, WarningXl, CheckXl } from '@synerise/ds-icon';
 import { AlertSize } from './AlertInfo.types';
 import * as S from './AlertInfo.styles';
-var mapSizeToPx = (_mapSizeToPx = {}, _defineProperty(_mapSizeToPx, AlertSize.SMALL, 48), _defineProperty(_mapSizeToPx, AlertSize.MEDIUM, 96), _mapSizeToPx);
+var mapSizeToPx = (_mapSizeToPx = {}, _mapSizeToPx[AlertSize.SMALL] = 48, _mapSizeToPx[AlertSize.MEDIUM] = 96, _mapSizeToPx);
 
 var AlertInfo = function AlertInfo(_ref) {
   var _ref$size = _ref.size,
@@ -42,7 +38,7 @@ var AlertInfo = function AlertInfo(_ref) {
 
   var _mapTypeToStatus$type = mapTypeToStatus[type],
       IconComponent = _mapTypeToStatus$type.IconComponent,
-      iconContainerStyles = _objectWithoutProperties(_mapTypeToStatus$type, _excluded);
+      iconContainerStyles = _objectWithoutPropertiesLoose(_mapTypeToStatus$type, _excluded);
 
   return /*#__PURE__*/React.createElement(S.AlertWrapper, {
     mode: mode,

package/dist/AlertInfo/AlertInfo.types.js

@@ -1,7 +1,5 @@
 var _IconSize, _FontSize;
 
-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; }
-
 export var AlertSize;
 
 (function (AlertSize) {
@@ -9,5 +7,5 @@ export var AlertSize;
   AlertSize["MEDIUM"] = "medium";
 })(AlertSize || (AlertSize = {}));
 
-export var IconSize = (_IconSize = {}, _defineProperty(_IconSize, AlertSize.SMALL, 48), _defineProperty(_IconSize, AlertSize.MEDIUM, 96), _IconSize);
-export var FontSize = (_FontSize = {}, _defineProperty(_FontSize, AlertSize.SMALL, 14), _defineProperty(_FontSize, AlertSize.MEDIUM, 18), _FontSize);
+export var IconSize = (_IconSize = {}, _IconSize[AlertSize.SMALL] = 48, _IconSize[AlertSize.MEDIUM] = 96, _IconSize);
+export var FontSize = (_FontSize = {}, _FontSize[AlertSize.SMALL] = 14, _FontSize[AlertSize.MEDIUM] = 18, _FontSize);

package/dist/BroadcastBar/BroadcastBar.styles.js

@@ -6,7 +6,7 @@ var getColorBackground = function getColorBackground(props) {
     return props.theme.palette['red-500'];
   }
 
-  return props.theme.palette["".concat(props.color, "-600")];
+  return props.theme.palette[props.color + "-600"];
 };
 
 var getColorIcon = function getColorIcon(props) {

package/dist/ColorSemantic/AlertSemanticColor.styles.js

@@ -5,16 +5,16 @@ var getAlertIconColor = function getAlertIconColor(props) {
     return props.theme.palette.white;
   }
 
-  return props.theme.palette["".concat(props.color, "-600")];
+  return props.theme.palette[props.color + "-600"];
 };
 
 var getAlertColor = function getAlertColor(props) {
   if (props.mode === 'background' || props.mode === 'shadow') {
-    return props.theme.palette["".concat(props.color, "-600")];
+    return props.theme.palette[props.color + "-600"];
   }
 
   if (props.mode === 'background-outline') {
-    return props.theme.palette["".concat(props.color, "-050")];
+    return props.theme.palette[props.color + "-050"];
   }
 
   return props.theme.palette.white;
@@ -28,9 +28,9 @@ export var Container = styled.div.withConfig({
   displayName: "AlertSemanticColorstyles__Container",
   componentId: "sc-1rxl2y2-1"
 })(["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) {
-  return props.mode === 'background-outline' ? props.theme.palette["".concat(props.color, "-200")] : 'none';
+  return props.mode === 'background-outline' ? props.theme.palette[props.color + "-200"] : 'none';
 }, function (props) {
-  return props.mode === 'shadow' ? "0px 16px 32px 5px ".concat(props.theme.palette["grey-300"]) : 'none';
+  return props.mode === 'shadow' ? "0px 16px 32px 5px " + props.theme.palette["grey-300"] : 'none';
 }, function (props) {
-  return props.mode === 'shadow' ? "0px 16px 32px 5px ".concat(props.theme.palette["grey-300"]) : 'none';
+  return props.mode === 'shadow' ? "0px 16px 32px 5px " + props.theme.palette["grey-300"] : 'none';
 });

package/dist/IconAlert/IconAlert.js

@@ -2,8 +2,6 @@ var _excluded = ["type", "iconAlert", "message", "withLink", "withEmphasis", "ho
 
 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); }
 
-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; }
-
 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; }
 
 import Icon, { Check2M, WarningFillM, InfoM } from '@synerise/ds-icon';
@@ -25,7 +23,7 @@ var IconAlert = function IconAlert(_ref) {
       withEmphasis = _ref.withEmphasis,
       hoverButton = _ref.hoverButton,
       disabled = _ref.disabled,
-      rest = _objectWithoutProperties(_ref, _excluded);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var icon = React.useMemo(function () {
     return ICONS[type];

package/dist/SectionMessage/SectionMessage.styles.js

@@ -17,9 +17,9 @@ export var IconWrapper = styled.div.withConfig({
   displayName: "SectionMessagestyles__IconWrapper",
   componentId: "sc-1kuq4h0-3"
 })(["margin:10px 12px;display:flex;svg{color:", ";fill:", ";}"], function (props) {
-  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : props.theme.palette["".concat(props.color, "-600")];
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
 }, function (props) {
-  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : props.theme.palette["".concat(props.color, "-600")];
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : props.theme.palette[props.color + "-600"];
 });
 export var IconCloseWrapper = styled.div.withConfig({
   displayName: "SectionMessagestyles__IconCloseWrapper",
@@ -75,11 +75,11 @@ export var Container = styled.div.withConfig({
   displayName: "SectionMessagestyles__Container",
   componentId: "sc-1kuq4h0-12"
 })(["width:100%;align-items:center;justify-content:center;background-color:", ";border:1px solid ", ";border-top:2px solid ", ";border-radius:2px;"], function (props) {
-  return props.customColor ? props.theme.palette["".concat(props.customColor, "-050")] : props.theme.palette["".concat(props.color, "-050")];
+  return props.customColor ? props.theme.palette[props.customColor + "-050"] : props.theme.palette[props.color + "-050"];
 }, function (props) {
-  return props.customColor ? props.theme.palette["".concat(props.customColor, "-200")] : props.theme.palette["".concat(props.color, "-200")];
+  return props.customColor ? props.theme.palette[props.customColor + "-200"] : props.theme.palette[props.color + "-200"];
 }, function (props) {
-  return props.customColor ? props.theme.palette["".concat(props.customColor, "-600")] : props.theme.palette["".concat(props.color, "-600")];
+  return props.customColor ? props.theme.palette[props.customColor + "-600"] : props.theme.palette[props.color + "-600"];
 });
 export var WrapperSectionMessage = styled.div.withConfig({
   displayName: "SectionMessagestyles__WrapperSectionMessage",

package/dist/Toast/Toast.styles.js

@@ -45,7 +45,7 @@ var getColorBackground = function getColorBackground(props) {
       return props.theme.palette['red-500'];
 
     default:
-      return props.theme.palette["".concat(props.color, "-600")];
+      return props.theme.palette[props.color + "-600"];
   }
 };
 
@@ -75,27 +75,27 @@ export var Text = styled.div.withConfig({
   displayName: "Toaststyles__Text",
   componentId: "q5tn0-2"
 })(["display:flex;color:", ";"], function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var IconWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconWrapper",
   componentId: "q5tn0-3"
 })(["margin:10px 12px;display:flex;svg{color:", ";fill:", ";}"], function (props) {
-  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : getColorIcon;
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
 }, function (props) {
-  return props.customColorIcon ? props.theme.palette["".concat(props.customColorIcon, "-600")] : getColorIcon;
+  return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
 });
 export var IconCloseWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconCloseWrapper",
   componentId: "q5tn0-4"
 })(["margin:3px 5px 2px;cursor:pointer;svg{fill:", ";}"], function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var IconExpanderWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconExpanderWrapper",
   componentId: "q5tn0-5"
 })(["margin:3px 5px 2px;cursor:pointer;svg{fill:", ";transition:transform 0.1s linear;transform:rotateZ(", ");}"], function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
   return props.expanded ? '180deg' : '0deg';
 });
@@ -113,7 +113,7 @@ export var NumberWrapper = styled.div.withConfig({
 })(["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) {
   return props.theme.palette['grey-400'];
 }, function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var ListWrapper = styled.div.withConfig({
   displayName: "Toaststyles__ListWrapper",
@@ -125,7 +125,7 @@ export var IconOrderWrapper = styled.div.withConfig({
   displayName: "Toaststyles__IconOrderWrapper",
   componentId: "q5tn0-10"
 })(["display:none;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
   return props.theme.palette['blue-600'];
 });
@@ -133,11 +133,11 @@ export var OrderWrapper = styled.div.withConfig({
   displayName: "Toaststyles__OrderWrapper",
   componentId: "q5tn0-11"
 })(["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) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, IconOrderWrapper, NumberWrapper, function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var Wrapper = styled.div.withConfig({
   displayName: "Toaststyles__Wrapper",
@@ -157,9 +157,9 @@ export var Container = styled.div.withConfig({
 })(["width:", ";align-items:center;justify-content:center;background-color:", ";border-radius:4px;box-shadow:", ";"], function (props) {
   return props.expander && props.expandedContent && props.withClose ? '460px' : getWidth(props);
 }, function (props) {
-  return props.customColor ? props.theme.palette["".concat(props.customColor, "-600")] : getColorBackground(props);
+  return props.customColor ? props.theme.palette[props.customColor + "-600"] : getColorBackground(props);
 }, function (props) {
-  return props.color ? "0px 16px 32px 5px ".concat(props.theme.palette["grey-200"]) : 'none';
+  return props.color ? "0px 16px 32px 5px " + props.theme.palette["grey-200"] : 'none';
 });
 export var WrapperSectionMessage = styled.div.withConfig({
   displayName: "Toaststyles__WrapperSectionMessage",
@@ -169,7 +169,7 @@ export var AlertMessage = styled.span.withConfig({
   displayName: "Toaststyles__AlertMessage",
   componentId: "q5tn0-16"
 })(["font-size:16px;line-height:1.25;font-weight:500;max-width:400px;overflow:hidden;text-overflow:ellipsis;color:", ";"], function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var AlertDescription = styled.span.withConfig({
   displayName: "Toaststyles__AlertDescription",
@@ -177,5 +177,5 @@ export var AlertDescription = styled.span.withConfig({
 })(["display:flex;font-size:13px;line-height:1.39;font-weight:normal;padding:", ";margin-top:2px;color:", ";"], function (props) {
   return props.button || props.expandedContent ? ' 0 3px 10px 0' : '0px';
 }, function (props) {
-  return props.customColorText ? props.theme.palette["".concat(props.customColorText, "-600")] : getColorText(props);
+  return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "0.4.0",
+  "version": "0.4.4",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,10 +32,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^0.16.0",
-    "@synerise/ds-icon": "^0.46.0",
-    "@synerise/ds-typography": "^0.12.0",
-    "@synerise/ds-unordered-list": "^0.2.0",
+    "@synerise/ds-button": "^0.16.4",
+    "@synerise/ds-icon": "^0.47.0",
+    "@synerise/ds-typography": "^0.12.2",
+    "@synerise/ds-unordered-list": "^0.2.4",
     "animate.css": "^4.1.1",
     "react-animate-height": "^2.0.23",
     "react-mount-animation": "0.0.9"
@@ -47,5 +47,5 @@
   "devDependencies": {
     "@synerise/ds-utils": "^0.19.0"
   },
-  "gitHead": "a797e1d5e1233f121f8f7dfbeaf97b48a8195d25"
+  "gitHead": "56c08eca6e2a1e41b8a39e28a9ec657ac1bdec83"
 }