feat: add support for persistant progress bar

Author: eshankvaish

src/Shared/Services/ToastManager/ToastContent.tsx

@@ -2,7 +2,11 @@ import { Button, ButtonStyleType, ButtonVariantType } from '@Shared/Components'
 import { ComponentSizeType } from '@Shared/constants'
 import { ToastProps } from './types'
 
-export const ToastContent = ({ title, description, buttonProps }: Omit<ToastProps, 'variant'>) => (
+export const ToastContent = ({
+    title,
+    description,
+    buttonProps,
+}: Pick<ToastProps, 'title' | 'description' | 'buttonProps'>) => (
     <div className="flexbox-col dc__gap-8">
         <div className="flexbox-col dc__gap-4">
             <h3 className="m-0 fs-13 fw-6 lh-20 cn-0 dc__truncate">{title}</h3>

src/Shared/Services/ToastManager/constants.tsx

@@ -27,31 +27,36 @@ export const TOAST_BASE_CONFIG: ToastContainerProps = {
 
 export const TOAST_VARIANT_TO_CONFIG_MAP: Record<
     ToastVariantType,
-    Required<Pick<ToastProps, 'icon' | 'title'>> & Pick<ToastOptions, 'type'>
+    Required<Pick<ToastProps, 'icon' | 'title' | 'progressBarBg'>> & Pick<ToastOptions, 'type'>
 > = {
     [ToastVariantType.info]: {
         icon: <ICInfoFilled />,
         type: 'info',
         title: 'Information',
+        progressBarBg: 'var(--B500)',
     },
     [ToastVariantType.success]: {
         icon: <ICSuccess />,
         type: 'success',
         title: 'Success',
+        progressBarBg: 'var(--G500)',
     },
     [ToastVariantType.error]: {
         icon: <ICError />,
         type: 'error',
         title: 'Error',
+        progressBarBg: 'var(--R500)',
     },
     [ToastVariantType.warn]: {
         icon: <ICWarning className="warning-icon-y5-imp" />,
         type: 'warning',
         title: 'Warning',
+        progressBarBg: 'var(--Y500)',
     },
     [ToastVariantType.notAuthorized]: {
         icon: <ICLocked />,
         type: 'warning',
         title: 'Not authorized',
+        progressBarBg: 'var(--Y500)',
     },
 }

src/Shared/Services/ToastManager/toastManager.service.tsx

@@ -19,10 +19,17 @@ class ToastManager {
 
     // eslint-disable-next-line class-methods-use-this
     showToast = (
-        { variant = ToastVariantType.info, icon: customIcon, title, description, buttonProps }: ToastProps,
+        {
+            variant = ToastVariantType.info,
+            icon: customIcon,
+            title,
+            description,
+            buttonProps,
+            progressBarBg: customProgressBarBg,
+        }: ToastProps,
         options: Pick<ToastOptions, 'autoClose'> = {},
     ) => {
-        const { icon, type, title: defaultTitle } = TOAST_VARIANT_TO_CONFIG_MAP[variant]
+        const { icon, type, title: defaultTitle, progressBarBg } = TOAST_VARIANT_TO_CONFIG_MAP[variant]
 
         return toast(
             <ToastContent title={title || defaultTitle} description={description} buttonProps={buttonProps} />,
@@ -32,6 +39,15 @@ class ToastManager {
                     <div className="dc__no-shrink flex dc__fill-available-space icon-dim-20">{customIcon ?? icon}</div>
                 ),
                 type,
+                // Show the progress bar if the auto close is disabled
+                ...(options.autoClose === false
+                    ? {
+                          progress: 1,
+                          progressStyle: {
+                              background: customProgressBarBg || progressBarBg,
+                          },
+                      }
+                    : {}),
             },
         )
     }

src/Shared/Services/ToastManager/types.ts

@@ -15,4 +15,5 @@ export interface ToastProps {
     icon?: ReactElement
     variant?: ToastVariantType
     buttonProps?: ButtonProps
+    progressBarBg?: `var(--${string})`
 }