@synerise/ds-alert 0.8.16 → 0.8.17

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.8.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.16...@synerise/ds-alert@0.8.17) (2024-07-02)
+
+**Note:** Version bump only for package @synerise/ds-alert
+
+
+
+
+
 ## [0.8.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-alert@0.8.15...@synerise/ds-alert@0.8.16) (2024-06-27)
 
 **Note:** Version bump only for package @synerise/ds-alert

package/dist/Toast/Toast.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Props } from './Toast.types';
-declare const Toast: React.FC<Props>;
+declare const Toast: ({ icon, type, message, description, expander, expandedContent, color, withClose, customColor, customColorIcon, customIcon, colorIcon, customColorText, expanded, onExpand, onCloseClick, button, className, }: Props) => React.JSX.Element;
 export default Toast;

package/dist/Toast/Toast.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Icon, { CloseM, WarningFillM, Check3M, HelpFillM, InfoFillM, AngleDownS } from '@synerise/ds-icon';
 import * as S from './Toast.styles';
 var ICONS = {
@@ -27,47 +27,44 @@ var Toast = function Toast(_ref) {
       expanded = _ref.expanded,
       onExpand = _ref.onExpand,
       onCloseClick = _ref.onCloseClick,
-      show = _ref.show,
-      button = _ref.button;
-  var renderMessage = React.useMemo(function () {
-    return /*#__PURE__*/React.createElement(S.AlertContent, null, message && /*#__PURE__*/React.createElement(S.AlertMessage, {
-      customColorText: customColorText,
-      color: color
-    }, message), /*#__PURE__*/React.createElement(S.Text, {
-      customColorText: customColorText,
-      color: color
-    }, description && /*#__PURE__*/React.createElement(S.AlertDescription, {
-      expandedContent: expandedContent,
-      button: button,
-      customColorText: customColorText,
-      color: color
-    }, description)), expandedContent && expanded && /*#__PURE__*/React.createElement(S.ListWrapper, {
-      description: description,
-      visible: expanded
-    }, expandedContent), button);
-  }, [message, description, expandedContent, customColorText, color, expanded, button]);
-  var renderIcon = React.useMemo(function () {
+      button = _ref.button,
+      className = _ref.className;
+  var hasToastContent = button || description || expandedContent;
+  var toastContent = hasToastContent && /*#__PURE__*/React.createElement(S.AlertContent, {
+    hasBottomMargin: Boolean(button || description || expandedContent && expanded)
+  }, description && /*#__PURE__*/React.createElement(S.AlertDescription, {
+    expandedContent: expandedContent,
+    button: button,
+    customColorText: customColorText,
+    color: color
+  }, description), expandedContent && /*#__PURE__*/React.createElement(S.ListWrapper, {
+    description: description,
+    visible: expanded
+  }, expandedContent), button);
+  var renderIcon = useMemo(function () {
     if (icon) return icon;
     if (ICONS[type]) return ICONS[type];
     return DEFAULT_ICON;
   }, [icon, type]);
-  var expandContent = React.useCallback(function () {
+  var expandContent = useCallback(function () {
     onExpand && onExpand(!expanded);
   }, [onExpand, expanded]);
   return /*#__PURE__*/React.createElement(S.Container, {
-    expander: expander,
-    expandedContent: expandedContent,
-    withClose: withClose,
-    visible: show,
-    onCloseClick: onCloseClick,
     color: color,
-    customColor: customColor
-  }, /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AllContent, null, /*#__PURE__*/React.createElement(S.IconWrapper, {
+    customColor: customColor,
+    className: className
+  }, (customIcon || renderIcon) && /*#__PURE__*/React.createElement(S.IconWrapper, {
     colorIcon: colorIcon,
     customColorIcon: customColorIcon
   }, customIcon || /*#__PURE__*/React.createElement(Icon, {
     component: renderIcon
-  })), renderMessage), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, expander && /*#__PURE__*/React.createElement(S.IconExpanderWrapper, {
+  })), /*#__PURE__*/React.createElement(S.WrapperSectionMessage, null, /*#__PURE__*/React.createElement(S.AlertMessage, {
+    noToastContent: !hasToastContent,
+    hasClose: !!withClose,
+    hasExpander: !!expander,
+    customColorText: customColorText,
+    color: color
+  }, message), /*#__PURE__*/React.createElement(S.ButtonWrapper, null, expander && /*#__PURE__*/React.createElement(S.IconExpanderWrapper, {
     onClick: expandContent,
     expanded: expanded,
     customColorText: customColorText,
@@ -81,7 +78,7 @@ var Toast = function Toast(_ref) {
     color: color
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CloseM, null)
-  })))));
+  }))), toastContent));
 };
 
 export default Toast;

package/dist/Toast/Toast.styles.d.ts

@@ -1,15 +1,12 @@
 import { Keyframes } from 'styled-components';
-import * as React from 'react';
+import { ReactNode } from 'react';
 import 'animate.css';
 import { ColorIconType, ColorType, CustomColorType } from './Toast.types';
-export declare const openingAnimation: () => Keyframes;
 export declare const closingAnimation: () => Keyframes;
-export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AllContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Text: import("styled-components").StyledComponent<"div", any, {
-    customColorText?: CustomColorType | undefined;
-    color?: ColorType | undefined;
+export declare const AlertContent: import("styled-components").StyledComponent<"div", any, {
+    hasBottomMargin?: boolean | undefined;
 }, never>;
+export declare const AllContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {
     colorIcon?: ColorIconType | undefined;
     customColorIcon?: CustomColorType | undefined;
@@ -34,7 +31,7 @@ export declare const NumberWrapper: import("styled-components").StyledComponent<
 }, never>;
 export declare const ListWrapper: import("styled-components").StyledComponent<"div", any, {
     visible?: boolean | undefined;
-    description?: React.ReactNode;
+    description?: ReactNode;
 }, never>;
 export declare const IconOrderWrapper: import("styled-components").StyledComponent<"div", any, {
     customColorText?: CustomColorType | undefined;
@@ -50,21 +47,19 @@ export declare const AnimationContainer: import("styled-components").StyledCompo
 }, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {
     color?: ColorType | undefined;
-    visible?: React.ReactNode | boolean;
     customColor?: CustomColorType | undefined;
-    onCloseClick?: (() => void) | undefined;
-    expandedContent?: React.ReactNode | boolean;
-    expander?: React.ReactNode | boolean;
-    withClose?: React.ReactNode | boolean;
 }, never>;
 export declare const WrapperSectionMessage: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AlertMessage: import("styled-components").StyledComponent<"span", any, {
+export declare const AlertMessage: import("styled-components").StyledComponent<"div", any, {
+    noToastContent?: boolean | undefined;
     customColorText?: CustomColorType | undefined;
     color?: ColorType | undefined;
+    hasClose?: boolean | undefined;
+    hasExpander?: boolean | undefined;
 }, never>;
 export declare const AlertDescription: import("styled-components").StyledComponent<"span", any, {
     customColorText?: CustomColorType | undefined;
     color?: ColorType | undefined;
-    button?: React.ReactNode | boolean;
-    expandedContent?: React.ReactNode | boolean;
+    button?: ReactNode | boolean;
+    expandedContent?: ReactNode | boolean;
 }, never>;

package/dist/Toast/Toast.styles.js

@@ -1,6 +1,20 @@
 import styled, { keyframes } from 'styled-components';
+import { hexToRgba } from '@synerise/ds-utils';
+import { UnorderedList } from '@synerise/ds-unordered-list/dist/Unordered-list.styles';
 import 'animate.css';
 
+var getWidth = function getWidth(hasClose, hasExpander) {
+  if (hasClose && hasExpander) {
+    return '72px';
+  }
+
+  if (hasClose || hasExpander) {
+    return '48px';
+  }
+
+  return '24px';
+};
+
 var getColorIcon = function getColorIcon(props) {
   switch (props.colorIcon) {
     case 'white':
@@ -49,67 +63,56 @@ var getColorBackground = function getColorBackground(props) {
   }
 };
 
-var getWidth = function getWidth(props) {
-  if (props.expandedContent || props.expander && props.withClose) {
-    return '420px';
-  }
-
-  return '354px';
-};
-
-export var openingAnimation = function openingAnimation() {
+var openingAnimation = function openingAnimation() {
   return keyframes(["0%{height:0%;opacity:0;}100%{height:100%;opacity:1;}"]);
 };
+
 export var closingAnimation = function closingAnimation() {
   return keyframes(["0%{height:100%;opacity:1;}100%{height:0%;opacity:0;}"]);
 };
 export var AlertContent = styled.div.withConfig({
   displayName: "Toaststyles__AlertContent",
   componentId: "q5tn0-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:12px 0;"]);
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;margin-right:24px;", " ", "{margin-bottom:8px;}"], function (props) {
+  return props.hasBottomMargin && 'margin-bottom:16px;';
+}, UnorderedList);
 export var AllContent = styled.div.withConfig({
   displayName: "Toaststyles__AllContent",
   componentId: "q5tn0-1"
 })(["display:flex;color:inherit;"]);
-export var Text = styled.div.withConfig({
-  displayName: "Toaststyles__Text",
-  componentId: "q5tn0-2"
-})(["display:flex;color:", ";"], function (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) {
+  componentId: "q5tn0-2"
+})(["margin:12px;display:flex;svg{color:", ";fill:", ";}"], function (props) {
   return props.customColorIcon ? props.theme.palette[props.customColorIcon + "-600"] : getColorIcon;
 }, function (props) {
   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) {
+  componentId: "q5tn0-3"
+})(["cursor:pointer;svg{fill:", ";}"], function (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) {
+  componentId: "q5tn0-4"
+})(["cursor:pointer;svg{fill:", ";transition:transform 0.1s linear;transform:rotateZ(", ");}"], function (props) {
   return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
   return props.expanded ? '180deg' : '0deg';
 });
 export var ButtonWrapper = styled.div.withConfig({
   displayName: "Toaststyles__ButtonWrapper",
-  componentId: "q5tn0-6"
-})(["padding:6px 8px 0 8px;display:flex;"]);
+  componentId: "q5tn0-5"
+})(["position:absolute;right:12px;top:12px;display:flex;"]);
 export var FirstButtonWrapper = styled.div.withConfig({
   displayName: "Toaststyles__FirstButtonWrapper",
-  componentId: "q5tn0-7"
+  componentId: "q5tn0-6"
 })(["margin-right:8px;"]);
 export var NumberWrapper = styled.div.withConfig({
   displayName: "Toaststyles__NumberWrapper",
-  componentId: "q5tn0-8"
+  componentId: "q5tn0-7"
 })(["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) {
@@ -117,22 +120,26 @@ export var NumberWrapper = styled.div.withConfig({
 });
 export var ListWrapper = styled.div.withConfig({
   displayName: "Toaststyles__ListWrapper",
-  componentId: "q5tn0-9"
-})(["display:flex;margin-top:", ";"], function (props) {
-  return !props.description ? '10px' : '0';
+  componentId: "q5tn0-8"
+})(["display:flex;visibility:", ";height:", ";margin-top:", ";"], function (props) {
+  return props.visible ? 'visible' : 'hidden';
+}, function (props) {
+  return props.visible ? 'auto' : '0';
+}, function (props) {
+  return !props.description && props.visible ? '10px' : '0';
 });
 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) {
+  componentId: "q5tn0-9"
+})(["visibility:hidden;margin:-4px 0;svg{fill:", ";}&:hover{svg{fill:", ";cursor:pointer;}}"], function (props) {
   return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 }, function (props) {
   return props.theme.palette['blue-600'];
 });
 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) {
+  componentId: "q5tn0-10"
+})(["display:flex;color:", ";&:hover{", "{visibility:visible;}", "{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[props.customColorText + "-600"] : getColorText(props);
 }, IconOrderWrapper, NumberWrapper, function (props) {
   return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
@@ -141,41 +148,43 @@ export var OrderWrapper = styled.div.withConfig({
 });
 export var Wrapper = styled.div.withConfig({
   displayName: "Toaststyles__Wrapper",
-  componentId: "q5tn0-12"
+  componentId: "q5tn0-11"
 })(["color:", ";"], function (props) {
   return props.theme.palette['grey-050'];
 });
 export var AnimationContainer = styled.div.withConfig({
   displayName: "Toaststyles__AnimationContainer",
-  componentId: "q5tn0-13"
+  componentId: "q5tn0-12"
 })(["animation:", " 0.5s ease-in-out 0s 1;"], function (props) {
   return props.show ? openingAnimation() : closingAnimation();
 });
 export var Container = styled.div.withConfig({
   displayName: "Toaststyles__Container",
-  componentId: "q5tn0-14"
-})(["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) {
+  componentId: "q5tn0-13"
+})(["display:flex;flex-direction:row;max-width:500px;align-items:flex-start;justify-content:center;background-color:", ";border-radius:4px;box-shadow:", ";"], function (props) {
   return props.customColor ? props.theme.palette[props.customColor + "-600"] : getColorBackground(props);
 }, function (props) {
-  return props.color ? "0px 16px 32px 5px " + props.theme.palette["grey-200"] : 'none';
+  return props.color ? "0px 16px 32px 5px " + hexToRgba(props.theme.palette['grey-900'], 0.2) : 'none';
 });
 export var WrapperSectionMessage = styled.div.withConfig({
   displayName: "Toaststyles__WrapperSectionMessage",
-  componentId: "q5tn0-15"
-})(["display:flex;font-size:13px;color:inherit;justify-content:space-between;"]);
-export var AlertMessage = styled.span.withConfig({
+  componentId: "q5tn0-14"
+})(["position:relative;font-size:13px;color:inherit;"]);
+export var AlertMessage = styled.div.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) {
+  componentId: "q5tn0-15"
+})(["font-size:14px;line-height:20px;padding-top:14px;", ";font-weight:500;overflow:hidden;text-overflow:ellipsis;padding-right:", ";color:", ";"], function (props) {
+  return props.noToastContent && 'padding-bottom: 14px;';
+}, function (props) {
+  return getWidth(props.hasClose, props.hasExpander);
+}, function (props) {
   return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });
 export var AlertDescription = styled.span.withConfig({
   displayName: "Toaststyles__AlertDescription",
-  componentId: "q5tn0-17"
-})(["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';
+  componentId: "q5tn0-16"
+})(["display:flex;font-size:13px;line-height:1.39;font-weight:normal;overflow-wrap:anywhere;padding-bottom:", ";margin-top:2px;color:", ";"], function (props) {
+  return props.button || props.expandedContent ? '16px' : '0';
 }, function (props) {
   return props.customColorText ? props.theme.palette[props.customColorText + "-600"] : getColorText(props);
 });

package/dist/Toast/Toast.types.d.ts

@@ -1,24 +1,23 @@
+import { ReactElement, ReactNode } from 'react';
 import { AlertProps } from 'antd/lib/alert';
-import * as React from 'react';
 export type ToastType = 'success' | 'warning' | 'negative' | 'informative' | 'neutral';
 export type CustomColorType = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
 export type ColorType = 'grey' | 'red' | 'green' | 'yellow' | 'blue';
 export type ColorIconType = 'white' | 'grey' | 'black' | 'yellow' | 'blue';
 export interface Props extends Omit<AlertProps, 'type' | 'message'> {
-    message?: React.ReactNode;
+    message?: ReactNode;
     type: string | ToastType;
     customColor?: CustomColorType;
     customColorText?: CustomColorType;
     customColorIcon?: CustomColorType;
     color?: ColorType;
     colorIcon?: ColorIconType;
-    expander?: boolean | React.ReactNode;
-    expandedContent?: React.ReactNode;
-    withClose?: React.ReactNode;
-    customIcon?: React.ReactElement;
-    button?: React.ReactNode;
+    expander?: ReactNode;
+    expandedContent?: ReactNode;
+    withClose?: ReactNode;
+    customIcon?: ReactElement;
+    button?: ReactNode;
     expanded?: boolean;
     onExpand?: (isExpanded: boolean) => void;
     onCloseClick?: () => void;
-    show?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-alert",
-  "version": "0.8.16",
+  "version": "0.8.17",
   "description": "Alert UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,6 +35,7 @@
   "dependencies": {
     "@synerise/ds-button": "^0.21.1",
     "@synerise/ds-icon": "^0.63.0",
+    "@synerise/ds-unordered-list": "^0.2.88",
     "animate.css": "^4.1.1",
     "react-animate-height": "^2.0.23",
     "react-dom": "16.13.0",
@@ -51,5 +52,5 @@
     "@testing-library/jest-dom": "5.1.1",
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "587eb113074985ae21e4f0c25ec33c3e3e2e072b"
+  "gitHead": "0692552b018dc9c8042f18c773f88890c9ad3270"
 }