refactor: TabGroup - utils refactor

Author: RohitRaj011

src/Shared/Components/TabGroup/TabGroup.component.tsx

@@ -6,7 +6,7 @@ import { ComponentSizeType } from '@Shared/constants'
 
 import { TabGroupProps, TabProps } from './TabGroup.types'
 import './TabGroup.scss'
-import { getClassNameBySize, getIconColorClass } from './TabGroup.utils'
+import { getClassNameBySizeMap, getIconColorClassMap } from './TabGroup.utils'
 
 const Tab = ({
     label,
@@ -24,19 +24,18 @@ const Tab = ({
     showWarning,
     disabled,
 }: TabProps & Pick<TabGroupProps, 'size' | 'alignActiveBorderWithContainer' | 'hideTopPadding'>) => {
-    const { tabClassName, iconClassName, badgeClassName } = getClassNameBySize({
-        size,
+    const { tabClassName, iconClassName, badgeClassName } = getClassNameBySizeMap({
         hideTopPadding,
         alignActiveBorderWithContainer,
-    })
+    })[size]
 
     const getTabComponent = () => {
         const content = (
             <>
                 {showError && <ICErrorExclamation className={`${iconClassName}`} />}
                 {!showError && showWarning && <ICWarning className={`${iconClassName} warning-icon-y7`} />}
                 {!showError && !showWarning && Icon && (
-                    <Icon className={`${iconClassName} ${getIconColorClass({ iconType, active })}`} />
+                    <Icon className={`${iconClassName} ${getIconColorClassMap({ active })[iconType] || ''}`} />
                 )}
                 {label}
                 {badge !== null && (

src/Shared/Components/TabGroup/TabGroup.utils.ts

@@ -1,34 +1,31 @@
 import { ComponentSizeType } from '@Shared/constants'
+
 import { TabGroupProps, TabProps } from './TabGroup.types'
 
-export const getClassNameBySize = ({
-    size,
+export const getClassNameBySizeMap = ({
     hideTopPadding,
     alignActiveBorderWithContainer,
-}: Pick<TabGroupProps, 'size' | 'hideTopPadding' | 'alignActiveBorderWithContainer'>) => {
-    switch (size) {
-        case ComponentSizeType.medium:
-            return {
-                tabClassName: `fs-12 ${!hideTopPadding ? 'pt-6' : ''} ${alignActiveBorderWithContainer ? 'pb-5' : 'pb-6'}`,
-                iconClassName: 'icon-dim-14',
-                badgeClassName: 'fs-11 lh-18 tab-group__tab__badge--medium',
-            }
-        default:
-            return {
-                tabClassName: `fs-13 ${!hideTopPadding ? 'pt-8' : ''} ${alignActiveBorderWithContainer ? 'pb-7' : 'pb-8'}`,
-                iconClassName: 'icon-dim-16',
-                badgeClassName: 'fs-12 lh-20',
-            }
-    }
-}
-
-export const getIconColorClass = ({ iconType, active }: Pick<TabProps, 'iconType' | 'active'>) => {
-    if (iconType === 'fill') {
-        return `tab-group__tab__icon--fill ${active ? 'fcb-5' : 'fcn-7'}`
-    }
-    if (iconType === 'stroke') {
-        return `tab-group__tab__icon--stroke ${active ? 'scb-5' : 'scn-7'}`
+}: Pick<TabGroupProps, 'hideTopPadding' | 'alignActiveBorderWithContainer'>): Record<
+    TabGroupProps['size'],
+    {
+        tabClassName: string
+        iconClassName: string
+        badgeClassName: string
     }
+> => ({
+    [ComponentSizeType.medium]: {
+        tabClassName: `fs-12 ${!hideTopPadding ? 'pt-6' : ''} ${alignActiveBorderWithContainer ? 'pb-5' : 'pb-6'}`,
+        iconClassName: 'icon-dim-14',
+        badgeClassName: 'fs-11 lh-18 tab-group__tab__badge--medium',
+    },
+    [ComponentSizeType.large]: {
+        tabClassName: `fs-13 ${!hideTopPadding ? 'pt-8' : ''} ${alignActiveBorderWithContainer ? 'pb-7' : 'pb-8'}`,
+        iconClassName: 'icon-dim-16',
+        badgeClassName: 'fs-12 lh-20',
+    },
+})
 
-    return ''
-}
+export const getIconColorClassMap = ({ active }: Pick<TabProps, 'active'>): Record<TabProps['iconType'], string> => ({
+    fill: `tab-group__tab__icon--fill ${active ? 'fcb-5' : 'fcn-7'}`,
+    stroke: `tab-group__tab__icon--stroke ${active ? 'scb-5' : 'scn-7'}`,
+})