feat: enhance Switch component with size and loading state support

Author: AbhishekA1509

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

@@ -2,8 +2,10 @@ import { AriaAttributes, HTMLAttributes } from 'react'
 import { AnimatePresence, motion } from 'framer-motion'
 
 import { Tooltip } from '@Common/Tooltip'
+import { ComponentSizeType } from '@Shared/constants'
 
 import { Icon } from '../Icon'
+import { INDETERMINATE_ICON_WIDTH_MAP, LOADING_COLOR_MAP, SQUARE_ICON_DIMENSION_MAP } from './constants'
 import { SwitchProps } from './types'
 import { getSwitchContainerClass, getSwitchIconColor, getSwitchThumbClass, getSwitchTrackColor } from './utils'
 
@@ -19,45 +21,46 @@ const Switch = ({
     iconColor,
     iconName,
     indeterminate = false,
-    handleChange,
+    size = ComponentSizeType.medium,
+    onChange,
 }: SwitchProps) => {
-    const getAriaChecked = (): AriaAttributes['aria-checked'] => {
+    const getAriaCheckedValue = (): AriaAttributes['aria-checked'] => {
         if (!isChecked) {
             return false
         }
 
         return indeterminate ? 'mixed' : true
     }
 
-    const ariaChecked = getAriaChecked()
+    const ariaCheckedValue = getAriaCheckedValue()
 
-    const showIndeterminateIcon = ariaChecked === 'mixed'
+    const showIndeterminateIcon = ariaCheckedValue === 'mixed'
     const role: HTMLAttributes<HTMLButtonElement>['role'] = showIndeterminateIcon ? 'checkbox' : 'switch'
 
     const renderContent = () => {
         if (isLoading) {
-            return <Icon name="ic-circle-loader" color={null} />
+            return <Icon name="ic-circle-loader" color={LOADING_COLOR_MAP[variant]} />
         }
 
         return (
             <motion.span
-                className={`p-1 flex flex-grow-1 ${shape === 'rounded' ? 'br-12' : 'br-4'} ${isChecked ? 'right' : 'left'}`}
+                className={`flex flex-grow-1 ${shape === 'rounded' ? 'p-2 br-12' : 'p-1 br-4'} ${isChecked ? 'right' : 'left'}`}
                 layout
                 animate={{
                     backgroundColor: getSwitchTrackColor({ shape, variant, isChecked }),
                 }}
                 transition={{ type: 'spring', stiffness: 300, damping: 30 }}
             >
                 <motion.span
-                    className={getSwitchThumbClass({ indeterminate, shape, isChecked })}
+                    className={getSwitchThumbClass({ shape, size, showIndeterminateIcon })}
                     layout
                     transition={{ type: 'spring', stiffness: 500, damping: 35 }}
                 >
                     <AnimatePresence>
                         {showIndeterminateIcon ? (
                             <motion.span
                                 key="dash"
-                                className="w-8 h-2 br-4 dc__no-shrink bg__white"
+                                className={`${INDETERMINATE_ICON_WIDTH_MAP[size]} h-2 br-4 dc__no-shrink bg__white`}
                                 initial={{ scale: 0, opacity: 0 }}
                                 animate={{ scale: 1, opacity: 1 }}
                                 exit={{ scale: 0, opacity: 0 }}
@@ -66,7 +69,7 @@ const Switch = ({
                             iconName && (
                                 <motion.span
                                     key="icon"
-                                    className="flex icon-dim-12 dc__fill-available-space dc__no-shrink"
+                                    className={`${SQUARE_ICON_DIMENSION_MAP[size]} flex dc__fill-available-space dc__no-shrink`}
                                     initial={{ scale: 0.8, opacity: 0 }}
                                     animate={{ scale: 1, opacity: 1 }}
                                     exit={{ scale: 0.8, opacity: 0 }}
@@ -78,7 +81,6 @@ const Switch = ({
                                             iconColor,
                                             variant,
                                         })}
-                                        size={12}
                                     />
                                 </motion.span>
                             )
@@ -92,16 +94,16 @@ const Switch = ({
     // TODO: Can add hidden input for accessibility in case name [for forms] is given
     return (
         <Tooltip alwaysShowTippyOnHover={!!tooltipContent} content={tooltipContent}>
-            <div className={`${getSwitchContainerClass({ shape })} flex dc__no-shrink`}>
+            <div className={`${getSwitchContainerClass({ shape, size })} flex dc__no-shrink py-2`}>
                 <button
                     type="button"
                     role={role}
-                    aria-checked={ariaChecked}
+                    aria-checked={ariaCheckedValue}
                     aria-label={isLoading ? 'Loading...' : ariaLabel}
                     data-testid={dataTestId}
                     disabled={isDisabled || isLoading}
                     className={`p-0-imp h-100 flex flex-grow-1 dc__transparent ${isDisabled ? 'dc__disabled' : ''} dc__fill-available-space`}
-                    onClick={handleChange}
+                    onClick={onChange}
                 >
                     {renderContent()}
                 </button>

src/Shared/Components/Switch/constants.ts

@@ -1,11 +1,59 @@
+import { ComponentSizeType } from '@Shared/constants'
+import { IconBaseColorType } from '@Shared/types'
+
 import { SwitchProps } from './types'
 
-export const SWITCH_VARIANTS: Record<SwitchProps['variant'], null> = {
+export const SWITCH_VARIANTS: Readonly<Record<SwitchProps['variant'], null>> = {
     theme: null,
     positive: null,
 }
 
-export const SWITCH_SHAPES: Record<SwitchProps['shape'], null> = {
+export const SWITCH_SHAPES: Readonly<Record<SwitchProps['shape'], null>> = {
     rounded: null,
     square: null,
 }
+
+export const ROUNDED_SWITCH_SIZE_MAP: Readonly<Record<SwitchProps['size'], string>> = {
+    [ComponentSizeType.medium]: 'w-32',
+    [ComponentSizeType.small]: 'w-24',
+}
+
+export const SQUARE_SWITCH_SIZE_MAP: typeof ROUNDED_SWITCH_SIZE_MAP = {
+    [ComponentSizeType.medium]: 'w-28',
+    [ComponentSizeType.small]: 'w-24',
+}
+
+export const SWITCH_HEIGHT_MAP: Readonly<Record<SwitchProps['size'], string>> = {
+    [ComponentSizeType.medium]: 'h-24',
+    [ComponentSizeType.small]: 'h-20',
+}
+
+export const LOADING_COLOR_MAP: Record<SwitchProps['variant'], IconBaseColorType> = {
+    theme: 'B500',
+    positive: 'G500',
+}
+
+export const ROUNDED_SWITCH_TRACK_COLOR_MAP: Record<SwitchProps['variant'], `var(--${IconBaseColorType})`> = {
+    theme: 'var(--B500)',
+    positive: 'var(--G500)',
+}
+
+export const SQUARE_SWITCH_TRACK_COLOR_MAP: typeof ROUNDED_SWITCH_TRACK_COLOR_MAP = {
+    theme: 'var(--B300)',
+    positive: 'var(--G300)',
+}
+
+export const ROUNDED_SWITCH_THUMB_SIZE_MAP: Record<SwitchProps['size'], string> = {
+    [ComponentSizeType.medium]: 'icon-dim-16',
+    [ComponentSizeType.small]: 'icon-dim-12',
+}
+
+export const INDETERMINATE_ICON_WIDTH_MAP: Record<SwitchProps['size'], string> = {
+    [ComponentSizeType.medium]: 'w-12',
+    [ComponentSizeType.small]: 'w-10',
+}
+
+export const SQUARE_ICON_DIMENSION_MAP: Record<SwitchProps['size'], string> = {
+    [ComponentSizeType.medium]: 'icon-dim-12',
+    [ComponentSizeType.small]: 'icon-dim-8',
+}

src/Shared/Components/Switch/types.ts

@@ -1,3 +1,4 @@
+import { ComponentSizeType } from '@Shared/constants'
 import { IconBaseColorType } from '@Shared/types'
 
 import { IconName } from '../Icon'
@@ -14,7 +15,7 @@ import { IconName } from '../Icon'
  *   - `iconName` specifies the name of the icon to display.
  *   - `iconColor` allows customization of the icon's color in the active state.
  *   - `indeterminate` indicates whether the switch is in an indeterminate state, typically used for checkboxes to represent a mixed state.
- *     If `indeterminate` is true, the switch will not be fully checked or unchecked, and its role will change to `checkbox`.
+ *     If `indeterminate` is true, the switch will not be fully checked or unchecked.
  */
 type SwitchShapeProps =
     | {
@@ -32,7 +33,14 @@ type SwitchShapeProps =
            * Icon color is not applicable for the `rounded` shape.
            */
           iconColor?: never
-          indeterminate?: never
+          /**
+           * Indicates whether the switch is in an indeterminate state.
+           * This state is typically used for checkboxes to indicate a mixed state.
+           * If true, the switch will not be fully checked or unchecked. Due this state alone we are keeping role as `checkbox` instead of `switch`.
+           * This property is not applicable for the `square` shape.
+           * @default false
+           */
+          indeterminate?: boolean
       }
     | {
           /**
@@ -49,14 +57,7 @@ type SwitchShapeProps =
            * The color of the icon. If provided, this will override the default color in the active state.
            */
           iconColor?: IconBaseColorType
-          /**
-           * Indicates whether the switch is in an indeterminate state.
-           * This state is typically used for checkboxes to indicate a mixed state.
-           * If true, the switch will not be fully checked or unchecked. We will change the role to checkbox in this case since the indeterminate state is not applicable for the switch.
-           * This property is not applicable for the `rounded` shape.
-           * @default false
-           */
-          indeterminate?: boolean
+          indeterminate?: never
       }
 
 /**
@@ -80,7 +81,13 @@ export type SwitchProps = {
      */
     variant?: 'theme' | 'positive'
 
-    handleChange: () => void
+    /**
+     * The size of the switch.
+     * @default `ComponentSizeType.medium`
+     */
+    size?: Extract<ComponentSizeType, ComponentSizeType.medium | ComponentSizeType.small>
+
+    onChange: () => void
 
     /**
      * Indicates whether the switch is disabled.

src/Shared/Components/Switch/utils.ts

@@ -1,15 +1,17 @@
 import { IconBaseColorType } from '@Shared/types'
 
+import {
+    ROUNDED_SWITCH_SIZE_MAP,
+    ROUNDED_SWITCH_THUMB_SIZE_MAP,
+    ROUNDED_SWITCH_TRACK_COLOR_MAP,
+    SQUARE_SWITCH_SIZE_MAP,
+    SQUARE_SWITCH_TRACK_COLOR_MAP,
+    SWITCH_HEIGHT_MAP,
+} from './constants'
 import { SwitchProps } from './types'
 
-// On intro of size there will changes in almost all methods
-export const getSwitchContainerClass = ({ shape }: Required<Pick<SwitchProps, 'shape'>>): string => {
-    if (shape === 'rounded') {
-        return 'py-3 h-24 w-20'
-    }
-
-    return 'w-28 h-18'
-}
+export const getSwitchContainerClass = ({ shape, size }: Required<Pick<SwitchProps, 'shape' | 'size'>>): string =>
+    `${SWITCH_HEIGHT_MAP[size]} ${shape === 'rounded' ? ROUNDED_SWITCH_SIZE_MAP[size] : SQUARE_SWITCH_SIZE_MAP[size]}`
 
 export const getSwitchTrackColor = ({
     shape,
@@ -20,31 +22,19 @@ export const getSwitchTrackColor = ({
         return 'var(--N200)'
     }
 
-    if (shape === 'rounded') {
-        if (variant === 'theme') {
-            return 'var(--B500)'
-        }
-
-        return 'var(--G500)'
-    }
-
-    if (variant === 'theme') {
-        return 'var(--B300)'
-    }
-
-    return 'var(--G300)'
+    return shape === 'rounded' ? ROUNDED_SWITCH_TRACK_COLOR_MAP[variant] : SQUARE_SWITCH_TRACK_COLOR_MAP[variant]
 }
 
 export const getSwitchThumbClass = ({
-    indeterminate,
     shape,
-    isChecked,
-}: Pick<SwitchProps, 'indeterminate' | 'shape' | 'isChecked'>) => {
-    if (isChecked && indeterminate) {
+    size,
+    showIndeterminateIcon,
+}: Pick<SwitchProps, 'shape' | 'size'> & { showIndeterminateIcon: boolean }) => {
+    if (showIndeterminateIcon) {
         return 'w-100 h-100 flex'
     }
 
-    return `flex p-2 ${shape === 'rounded' ? 'dc__border-radius-50-per icon-dim-10' : 'br-3'} bg__white`
+    return `flex p-3 ${shape === 'rounded' ? `dc__border-radius-50-per ${ROUNDED_SWITCH_THUMB_SIZE_MAP[size]}` : 'br-3'} bg__white`
 }
 
 export const getSwitchIconColor = ({