feat: add Toast warning variation (#1637)

mondaycom · Oct 16, 2023 · e8d242e · e8d242e
1 parent 7e3cb4e
commit e8d242e
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/src/components/Toast/Toast.module.scss b/src/components/Toast/Toast.module.scss
@@ -59,6 +59,21 @@
   background-color: var(--negative-color);
 }
 
+.typeWarning {
+  background-color: var(--warning-color);
+  color: var(--text-color-fixed-dark);
+
+  .closeButton {
+    color: var(--text-color-fixed-dark);
+  }
+
+  .actionButton,
+  .actionLink {
+    color: var(--text-color-fixed-dark);
+    border-color: var(--text-color-fixed-dark);
+  }
+}
+
 // Animation
 .enterActive {
   animation-iteration-count: 1;

diff --git a/src/components/Toast/ToastConstants.ts b/src/components/Toast/ToastConstants.ts
@@ -1,11 +1,13 @@
 import Info from "../Icon/Icons/components/Info";
 import Check from "../Icon/Icons/components/Check";
 import Alert from "../Icon/Icons/components/Alert";
+import Warning from "../Icon/Icons/components/Warning";
 
 export enum ToastType {
   NORMAL = "normal",
   POSITIVE = "positive",
-  NEGATIVE = "negative"
+  NEGATIVE = "negative",
+  WARNING = "warning"
 }
 
 export enum ToastActionType {
@@ -16,7 +18,8 @@ export enum ToastActionType {
 export const defaultIconMap = {
   [ToastType.NORMAL]: Info,
   [ToastType.POSITIVE]: Check,
-  [ToastType.NEGATIVE]: Alert
+  [ToastType.NEGATIVE]: Alert,
+  [ToastType.WARNING]: Warning
 };
 
 export type ToastAction = {

diff --git a/src/components/Toast/__stories__/toast.stories.mdx b/src/components/Toast/__stories__/toast.stories.mdx
@@ -162,6 +162,27 @@ Use when something was deleted, a problem has occured, etc.
   </Story>
 </Canvas>
 
+### Warning message
+
+<Canvas>
+  <Story name="Warning message">
+    {() => {
+      const actions = useMemo(() => [{ type: Toast.actionTypes.BUTTON, content: "Button" }], []);
+      return (
+        <Toast
+          open
+          actions={actions}
+          type={Toast.types.WARNING}
+          autoHideDuration={5000}
+          className="monday-storybook-toast_wrapper"
+        >
+          Warning message toast
+        </Toast>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Do’s and Don’ts
 
 <ComponentRules