feat: enhance Toast component with customizable duration and improved styling

Author: nicosammito

src/components/toast/Toast.stories.tsx

@@ -17,16 +17,17 @@ export const ExampleToast = () => {
 
     const renderToast = () => {
         toast({
-            title: "Error",
-            color: "error",
+            title: "Cannot delete the last administrative role",
+            color: "warning",
             dismissible: true,
-            children: "INVALID_LOGIN_DATA",
+            duration: 10000,
+            children: <Text>Some content</Text>
         })
     }
 
     return (
         <div className={"h-screen w-screen flex items-center justify-center"}>
-            <Toaster duration={Infinity} position="top-right"/>
+            <Toaster className={"sdsasa"} duration={Infinity} position="top-right"/>
             <Button onClick={() => renderToast()}>
                 Test
             </Button>

src/components/toast/Toast.style.scss

@@ -1,10 +1,13 @@
 @use "../../styles/helpers";
 @use "../../styles/variables";
 @use "../../styles/box";
+@use "sass:math";
 
 .toast {
 
   padding: variables.$md;
+  width: 100%;
+  overflow: hidden;
 
   & {
     @include helpers.borderRadius();
@@ -14,7 +17,7 @@
   &__header {
     align-items: flex-start;
     justify-content: space-between;
-    gap: variables.$xxs;
+    gap: variables.$xs;
   }
 
   &__icon {
@@ -24,13 +27,13 @@
   }
 
   &__content {
-    margin-top: variables.$xxs;
     box-sizing: border-box;
+    margin-left: 27px;
   }
 
   &__header-wrapper {
-    align-items: center;
-    gap: variables.$xxs;
+    align-items: flex-start;
+    gap: variables.$xs;
 
     > svg {
       min-width: variables.$md;
@@ -51,8 +54,49 @@
     }
 
     svg {
-        min-width: variables.$md;
-        min-height: variables.$md;
+      min-width: variables.$md;
+      min-height: variables.$md;
+    }
+  }
+
+  @keyframes toast-duration {
+    from {
+      width: 0%;
+    }
+    to {
+      width: 100%;
+    }
+  }
+
+  &:hover {
+    .toast__duration {
+      &:after {
+        animation-play-state: paused;
+      }
+    }
+  }
+
+  &__duration {
+    position: relative;
+    margin: variables.$md (-1 * variables.$md) (-1 * variables.$md);
+    padding: variables.$xxs variables.$md (variables.$xxs + 0.25rem);
+
+    & {
+      border-top: 1px solid helpers.borderColor();
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 0%; // Start: leer
+      height: 4px;
+      background: helpers.borderColor();
+      animation-name: toast-duration;
+      animation-duration: var(--toast-duration, 4000ms);
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
     }
   }
 }

src/components/toast/Toast.tsx

@@ -24,25 +24,28 @@ export interface ToastProps extends Omit<Code0Component<HTMLDivElement>, "title"
     //defaults to false
     dismissible?: boolean
     onClose?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
+    duration?: number //defaults to 4000
 }
 
 export function toast(toast: Omit<ToastProps, 'id'>) {
     return sonnerToast.custom((id) => (
         <Toast id={id} {...toast}>
             {toast.children}
         </Toast>
-    ))
+    ), {
+        duration: toast.duration ?? 4000
+    })
 }
 
 export function Toast(props: ToastProps) {
-    const {dismissible = false, color = "secondary", title, onClose = () => {}, children, ...rest} = props
+    const {dismissible = false, color = "secondary", title, onClose = () => {}, children, duration = 4000, ...rest} = props
 
     return (
         <div {...mergeCode0Props(`toast toast--${color}`, rest)}>
             <Flex className={"toast__header"}>
                 <Flex className={"toast__header-wrapper"}>
                     {color && <ToastIcon color={color}/>}
-                    <Text size={"md"} hierarchy={"primary"}>{title}</Text>
+                    <Text size={"md"}>{title}</Text>
                 </Flex>
                 {dismissible &&
                     <span className={"toast__dismissible"} onClick={() => sonnerToast.dismiss(props.id)}>
@@ -55,6 +58,11 @@ export function Toast(props: ToastProps) {
                     {children}
                 </div>
             }
+            <div className={"toast__duration"}  style={{
+                ["--toast-duration" as any]: `${duration}ms`,
+            }}>
+                <Text hierarchy={"tertiary"}>This message will close in <Text hierarchy={"primary"}>{duration / 1000}</Text> seconds</Text>
+            </div>
         </div>
     )
 }