feat: add intermediate state to Toggle component with corresponding styles

Author: AbhishekA1509

src/Common/Toggle/Toggle.scss

@@ -63,6 +63,12 @@
         background-color: var(--white);
         transition: all 0.4s ease;
     }
+
+    &.intermediate::before {
+        width: 0px;
+        height: 0px;
+    }
+
     &.with-icon {
         background-color: var(--bg-primary) !important;
         svg {

src/Common/Toggle/Toggle.tsx

@@ -17,6 +17,7 @@
 import React, { SyntheticEvent, useCallback } from 'react'
 import { Icon as IconComponent } from '@Shared/Components'
 import { throttle, useEffectAfterMount } from '../Helper'
+import { CHECKBOX_VALUE } from '@Common/Types'
 import './Toggle.scss'
 
 const Toggle = ({
@@ -31,6 +32,7 @@ const Toggle = ({
     throttleOnChange = false,
     shouldToggleValueOnLabelClick = false,
     isLoading = false,
+    value = CHECKBOX_VALUE.CHECKED,
     ...props
 }) => {
     const [active, setActive] = React.useState(selected)
@@ -70,8 +72,26 @@ const Toggle = ({
         }
     }
 
+    const isIntermediateView = selected && value === CHECKBOX_VALUE.INTERMEDIATE
+
+    const renderIcon = () => {
+        if (isIntermediateView) {
+            return (
+                <div className="w-100 h-100 dc__position-abs flex">
+                    <div className="w-8 h-2 br-4 dc__no-shrink bg__white" />
+                </div>
+            )
+        }
+
+        if (Icon) {
+            return <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />
+        }
+
+        return null
+    }
+
     return isLoading ? (
-        <IconComponent name='ic-circle-loader' color='B500' size={20} />
+        <IconComponent name="ic-circle-loader" color="B500" size={20} />
     ) : (
         <label
             {...props}
@@ -80,8 +100,11 @@ const Toggle = ({
             {...(shouldToggleValueOnLabelClick ? { onClick: handleLabelClick } : {})}
         >
             <input type="checkbox" checked={!!active} onChange={handleChange} className="toggle__input" />
-            <span className={`toggle__slider ${Icon ? 'with-icon br-4 dc__border' : 'round'}`} data-testid={dataTestId}>
-                {Icon && <Icon className={`icon-dim-20 br-4 p-2 ${iconClass}`} />}
+            <span
+                className={`toggle__slider ${isIntermediateView ? 'intermediate' : ''} ${Icon ? 'with-icon br-4 dc__border' : 'round'}`}
+                data-testid={dataTestId}
+            >
+                {renderIcon()}
             </span>
         </label>
     )