feat: add Switch component with customizable shapes and variants

Author: AbhishekA1509

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

@@ -0,0 +1,113 @@
+import { AriaAttributes, HTMLAttributes } from 'react'
+import { AnimatePresence, motion } from 'framer-motion'
+
+import { Tooltip } from '@Common/Tooltip'
+
+import { Icon } from '../Icon'
+import { SwitchProps } from './types'
+import { getSwitchContainerClass, getSwitchIconColor, getSwitchThumbClass, getSwitchTrackColor } from './utils'
+
+const Switch = ({
+    ariaLabel,
+    dataTestId,
+    isDisabled,
+    isLoading,
+    isChecked,
+    tooltipContent,
+    shape = 'rounded',
+    variant = 'positive',
+    iconColor,
+    iconName,
+    indeterminate = false,
+    handleChange,
+}: SwitchProps) => {
+    const getAriaChecked = (): AriaAttributes['aria-checked'] => {
+        if (!isChecked) {
+            return false
+        }
+
+        return indeterminate ? 'mixed' : true
+    }
+
+    const ariaChecked = getAriaChecked()
+
+    const showIndeterminateIcon = ariaChecked === 'mixed'
+    const role: HTMLAttributes<HTMLButtonElement>['role'] = showIndeterminateIcon ? 'checkbox' : 'switch'
+
+    const renderContent = () => {
+        if (isLoading) {
+            return <Icon name="ic-circle-loader" color={null} />
+        }
+
+        return (
+            <motion.span
+                className={`p-1 flex flex-grow-1 ${shape === 'rounded' ? 'br-12' : '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 })}
+                    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"
+                                initial={{ scale: 0, opacity: 0 }}
+                                animate={{ scale: 1, opacity: 1 }}
+                                exit={{ scale: 0, opacity: 0 }}
+                            />
+                        ) : (
+                            iconName && (
+                                <motion.span
+                                    key="icon"
+                                    className="flex icon-dim-12 dc__fill-available-space dc__no-shrink"
+                                    initial={{ scale: 0.8, opacity: 0 }}
+                                    animate={{ scale: 1, opacity: 1 }}
+                                    exit={{ scale: 0.8, opacity: 0 }}
+                                >
+                                    <Icon
+                                        name={iconName}
+                                        color={getSwitchIconColor({
+                                            isChecked,
+                                            iconColor,
+                                            variant,
+                                        })}
+                                        size={12}
+                                    />
+                                </motion.span>
+                            )
+                        )}
+                    </AnimatePresence>
+                </motion.span>
+            </motion.span>
+        )
+    }
+
+    // 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`}>
+                <button
+                    type="button"
+                    role={role}
+                    aria-checked={ariaChecked}
+                    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}
+                >
+                    {renderContent()}
+                </button>
+            </div>
+        </Tooltip>
+    )
+}
+
+export default Switch

src/Shared/Components/Switch/constants.ts

@@ -0,0 +1,11 @@
+import { SwitchProps } from './types'
+
+export const SWITCH_VARIANTS: Record<SwitchProps['variant'], null> = {
+    theme: null,
+    positive: null,
+}
+
+export const SWITCH_SHAPES: Record<SwitchProps['shape'], null> = {
+    rounded: null,
+    square: null,
+}

src/Shared/Components/Switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from './Switch.component'

src/Shared/Components/Switch/types.ts

@@ -0,0 +1,106 @@
+import { IconBaseColorType } from '@Shared/types'
+
+import { IconName } from '../Icon'
+
+/**
+ * Represents the properties for configuring the shape and behavior of a switch component.
+ *
+ * - When `shape` is `rounded`:
+ *   - The switch will have a rounded appearance.
+ *   - `iconName`, `iconColor`, and `indeterminate` are not applicable.
+ *
+ * - When `shape` is `square`:
+ *   - The switch will have a square appearance.
+ *   - `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`.
+ */
+type SwitchShapeProps =
+    | {
+          /**
+           * The shape of the switch. Defaults to `rounded` if not specified.
+           */
+          shape?: 'rounded'
+
+          /**
+           * Icon name is not applicable for the `rounded` shape.
+           */
+          iconName?: never
+
+          /**
+           * Icon color is not applicable for the `rounded` shape.
+           */
+          iconColor?: never
+          indeterminate?: never
+      }
+    | {
+          /**
+           * The shape of the switch. Must be `square` to enable icon-related properties.
+           */
+          shape: 'square'
+
+          /**
+           * The name of the icon to display when the shape is `square`.
+           */
+          iconName: IconName
+
+          /**
+           * 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
+      }
+
+/**
+ * Represents the properties for the `Switch` component.
+ */
+export type SwitchProps = {
+    /**
+     * The ARIA label for the switch, used for accessibility purposes.
+     */
+    ariaLabel: string
+
+    /**
+     * A unique identifier for testing purposes.
+     */
+    dataTestId: string
+
+    /**
+     * The visual variant of the switch.
+     *
+     * @default `positive`
+     */
+    variant?: 'theme' | 'positive'
+
+    handleChange: () => void
+
+    /**
+     * Indicates whether the switch is disabled.
+     */
+    isDisabled?: boolean
+
+    /**
+     * Indicates whether the switch is in a loading state.
+     */
+    isLoading?: boolean
+
+    /**
+     * Indicates whether the switch is currently checked (on).
+     */
+    isChecked: boolean
+
+    /**
+     * Optional tooltip content to display when hovering over the switch.
+     *
+     * @default undefined
+     */
+    tooltipContent?: string
+} & SwitchShapeProps

src/Shared/Components/Switch/utils.ts

@@ -0,0 +1,60 @@
+import { IconBaseColorType } from '@Shared/types'
+
+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 getSwitchTrackColor = ({
+    shape,
+    variant,
+    isChecked,
+}: Required<Pick<SwitchProps, 'shape' | 'variant' | 'isChecked'>>): `var(--${IconBaseColorType})` => {
+    if (!isChecked) {
+        return 'var(--N200)'
+    }
+
+    if (shape === 'rounded') {
+        if (variant === 'theme') {
+            return 'var(--B500)'
+        }
+
+        return 'var(--G500)'
+    }
+
+    if (variant === 'theme') {
+        return 'var(--B300)'
+    }
+
+    return 'var(--G300)'
+}
+
+export const getSwitchThumbClass = ({
+    indeterminate,
+    shape,
+    isChecked,
+}: Pick<SwitchProps, 'indeterminate' | 'shape' | 'isChecked'>) => {
+    if (isChecked && indeterminate) {
+        return 'w-100 h-100 flex'
+    }
+
+    return `flex p-2 ${shape === 'rounded' ? 'dc__border-radius-50-per icon-dim-10' : 'br-3'} bg__white`
+}
+
+export const getSwitchIconColor = ({
+    iconColor,
+    isChecked,
+    variant,
+}: Pick<SwitchProps, 'iconColor' | 'isChecked' | 'variant'>): IconBaseColorType => {
+    if (!isChecked) {
+        return 'N200'
+    }
+
+    return iconColor || (variant === 'theme' ? 'B500' : 'G500')
+}

src/Shared/Components/index.ts

@@ -87,6 +87,7 @@ export * from './SelectPicker'
 export * from './ShowMoreText'
 export * from './SSOProviderIcon'
 export * from './StatusComponent'
+export * from './Switch'
 export * from './TabGroup'
 export * from './Table'
 export * from './TagsKeyValueTable'