refactor: TabGroup - code review changes

Author: RohitRaj011

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

@@ -41,16 +41,23 @@ const Tab = ({
     }
     const { tabClassName, iconClassName, badgeClassName } = getClassNameBySize()
 
+    const getIconColorClass = () => {
+        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'}`
+        }
+
+        return ''
+    }
+
     const getTabComponent = () => {
         const content = (
             <>
                 {showError && <ICErrorExclamation className={`${iconClassName}`} />}
-                {!showError && showWarning && <ICWarning className={`${iconClassName} tab-group__tab__warning-icon`} />}
-                {!showError && !showWarning && Icon && (
-                    <Icon
-                        className={`${iconClassName} ${iconType === 'fill' ? 'tab-group__tab__icon--fill' : 'tab-group__tab__icon--stroke'} ${(active && (iconType === 'fill' ? 'fcb-5' : 'scb-5')) || (iconType === 'fill' ? 'fcn-7' : 'scn-7')}`}
-                    />
-                )}
+                {!showError && showWarning && <ICWarning className={`${iconClassName} warning-icon-y7`} />}
+                {!showError && !showWarning && Icon && <Icon className={`${iconClassName} ${getIconColorClass()}`} />}
                 {label}
                 {badge !== null && (
                     <div className={`tab-group__tab__badge ${badgeClassName} bcn-1 flex cn-7`}>{badge}</div>

src/Shared/Components/TabGroup/TabGroup.scss

@@ -2,6 +2,7 @@
     list-style: none;
 
     &__tab {
+        $parent-selector: &;
         position: relative;
 
         &::after {
@@ -23,7 +24,7 @@
         &:hover {
             color: var(--B500);
 
-            .tab-group__tab__icon {
+            #{$parent-selector}__icon {
                 &--stroke {
                     stroke: var(--B500);
 
@@ -61,26 +62,20 @@
             border-radius: 100%;
         }
 
-        &__warning-icon {
-            > g path:nth-of-type(2) {
-                fill: var(--Y700);
-            }
-        }
-
         &__nav-link {
             &.active {
                 color: var(--B500);
                 font-weight: 600;
 
-                > .tab-group__tab__icon--fill {
+                > #{$parent-selector}__icon--fill {
                     fill: var(--B500);
 
                     path {
                         fill: var(--B500);
                     }
                 }
 
-                > .tab-group__tab__icon--stroke {
+                > #{$parent-selector}__icon--stroke {
                     stroke: var(--B500);
 
                     path {

src/Shared/Components/TabGroup/TabGroup.types.ts

@@ -104,7 +104,7 @@ export interface TabGroupProps {
     /**
      * Optional component to be rendered on the right side of the tab list.
      */
-    rightComponent?: React.ReactNode
+    rightComponent?: React.ReactElement
     /**
      * Set to `true` to align the active tab's border with the bottom border of the parent container.
      * @default false