feat: add hover color support for Switch component and refactor styles

Author: AbhishekA1509

src/Shared/Components/Switch/Switch.component.tsx

@@ -13,10 +13,13 @@ import {
     getSwitchIconColor,
     getSwitchThumbClass,
     getSwitchTrackColor,
+    getSwitchTrackHoverColor,
     getThumbPadding,
     getThumbPosition,
 } from './utils'
 
+import './switch.scss'
+
 const Switch = ({
     ariaLabel,
     dataTestId,
@@ -56,14 +59,14 @@ const Switch = ({
             {isLoading ? (
                 <motion.span
                     transition={{ ease: 'easeInOut', duration: 0.2 }}
-                    layoutId="loader"
+                    layoutId={`${name}-loader`}
                     className="flex-grow-1 h-100 dc__fill-available-space dc__no-shrink"
                 >
                     <Icon key="progressing" name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} size={null} />
                 </motion.span>
             ) : (
                 <motion.span
-                    layoutId="thumb"
+                    layoutId={`${name}-thumb`}
                     className={getSwitchThumbClass({ shape, size, showIndeterminateIcon })}
                     layout
                     transition={{ ease: 'easeInOut', duration: 0.2 }}
@@ -129,8 +132,16 @@ const Switch = ({
                     data-testid={dataTestId}
                     disabled={isDisabled || isLoading}
                     aria-disabled={isDisabled}
-                    className={`p-0-imp h-100 flex flex-grow-1 dc__no-border ${shape === 'rounded' ? 'br-12' : 'br-4'} ${getSwitchTrackColor({ shape, variant, isChecked, isLoading })} ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
+                    className={`p-0-imp h-100 flex flex-grow-1 dc__no-border dt-switch__track ${shape === 'rounded' ? 'br-12' : 'br-4'} ${getSwitchTrackColor({ shape, variant, isChecked, isLoading })} ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
                     onClick={onChange}
+                    style={{
+                        // Adding hover styles directly to the button
+                        ['--switch-track-hover-color' as string]: getSwitchTrackHoverColor({
+                            shape,
+                            variant,
+                            isChecked,
+                        }),
+                    }}
                 >
                     {renderContent()}
                 </button>

src/Shared/Components/Switch/constants.ts

@@ -38,11 +38,21 @@ export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<DTSwitchProps['variant'], st
     positive: 'bcg-5',
 }
 
+export const ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP: Record<DTSwitchProps['variant'], `var(--${IconBaseColorType})`> = {
+    theme: 'var(--B600)',
+    positive: 'var(--G600)',
+}
+
 export const SQUARE_SWITCH_TRACK_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_COLOR_MAP = {
     theme: 'bcb-3',
     positive: 'bcg-3',
 }
 
+export const SQUARE_SWITCH_TRACK_HOVER_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP = {
+    theme: 'var(--B400)',
+    positive: 'var(--G400)',
+}
+
 export const ROUNDED_SWITCH_THUMB_SIZE_MAP: Record<DTSwitchProps['size'], string> = {
     [ComponentSizeType.medium]: 'icon-dim-16',
     [ComponentSizeType.small]: 'icon-dim-12',

src/Shared/Components/Switch/switch.scss

@@ -0,0 +1,9 @@
+.dt-switch {
+    &__track {
+        --switch-track-hover-color: 'transparent';
+        
+        &:hover {
+            background-color: var(--switch-track-hover-color);
+        }
+    }
+}

src/Shared/Components/Switch/utils.ts

@@ -4,8 +4,10 @@ import {
     ROUNDED_SWITCH_SIZE_MAP,
     ROUNDED_SWITCH_THUMB_SIZE_MAP,
     ROUNDED_SWITCH_TRACK_COLOR_MAP,
+    ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP,
     SQUARE_SWITCH_SIZE_MAP,
     SQUARE_SWITCH_TRACK_COLOR_MAP,
+    SQUARE_SWITCH_TRACK_HOVER_COLOR_MAP,
     SWITCH_HEIGHT_MAP,
     SWITCH_THUMB_PADDING_MAP,
     THUMB_OUTER_PADDING_MAP,
@@ -32,6 +34,22 @@ export const getSwitchTrackColor = ({
     return shape === 'rounded' ? ROUNDED_SWITCH_TRACK_COLOR_MAP[variant] : SQUARE_SWITCH_TRACK_COLOR_MAP[variant]
 }
 
+export const getSwitchTrackHoverColor = ({
+    shape,
+    variant,
+    isChecked,
+}: Required<
+    Pick<DTSwitchProps, 'shape' | 'variant' | 'isChecked'>
+>): (typeof ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP)[DTSwitchProps['variant']] => {
+    if (!isChecked) {
+        return 'var(--N300)'
+    }
+
+    return shape === 'rounded'
+        ? ROUNDED_SWITCH_TRACK_HOVER_COLOR_MAP[variant]
+        : SQUARE_SWITCH_TRACK_HOVER_COLOR_MAP[variant]
+}
+
 export const getSwitchThumbClass = ({
     shape,
     size,