feat: TabGroup - tabType 'block'

Author: RohitRaj011

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

@@ -50,7 +50,7 @@ const Tab = ({
                     {showIndicator && <span className="tab-group__tab__indicator bcr-5 mt-4 dc__align-self-start" />}
                 </p>
                 {description && (
-                    <p className="m-0 fs-12 lh-16 fw-4 cn-7 flex dc__gap-4">
+                    <p className="m-0 fs-12 lh-16 fw-4 cn-7 flexbox dc__align-items-center dc__gap-4">
                         {Array.isArray(description)
                             ? description.map((desc, idx) => (
                                   <Fragment key={desc}>
@@ -85,6 +85,15 @@ const Tab = ({
                         {content}
                     </NavLink>
                 )
+            case 'block':
+                return (
+                    <div
+                        className={`flexbox-col fw-6 ${tabClassName} ${disabled ? 'cursor-not-allowed' : ''}`}
+                        {...props}
+                    >
+                        {content}
+                    </div>
+                )
             default:
                 return (
                     <button
@@ -101,7 +110,7 @@ const Tab = ({
 
     return (
         <li
-            className={`tab-group__tab cursor lh-20 ${active ? 'tab-group__tab--active cb-5 fw-6' : 'cn-9 fw-4'} ${alignActiveBorderWithContainer ? 'tab-group__tab--align-active-border' : ''}`}
+            className={`tab-group__tab lh-20 ${active ? 'tab-group__tab--active cb-5 fw-6' : 'cn-9 fw-4'} ${alignActiveBorderWithContainer ? 'tab-group__tab--align-active-border' : ''} ${tabType === 'block' ? 'tab-group__tab--block' : 'cursor'}`}
         >
             {getTabComponent()}
         </li>

src/Shared/Components/TabGroup/TabGroup.scss

@@ -21,7 +21,7 @@
             bottom: -1px;
         }
 
-        &:hover {
+        &:hover:not(.tab-group__tab--block) {
             color: var(--B500);
 
             #{$parent-selector}__icon {

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

@@ -8,7 +8,7 @@ type TabComponentProps<TabTypeProps> = TabTypeProps & DataAttributes
 type ConditionalTabType =
     | {
           /**
-           *  Type of the tab, either `button`, `link` or `navLink`.
+           * Type of the tab, either `button`, `link`, `navLink` or `block`.
            */
           tabType: 'button'
           /**
@@ -22,7 +22,7 @@ type ConditionalTabType =
       }
     | {
           /**
-           *  Type of the tab, either `button`, `link` or `navLink`.
+           * Type of the tab, either `button`, `link`, `navLink` or `block`.
            */
           tabType: 'navLink'
           /**
@@ -32,11 +32,11 @@ type ConditionalTabType =
           /**
            * Active state is determined by matching the URL.
            */
-          active?: false
+          active?: never | false
       }
     | {
           /**
-           *  Type of the tab, either `button`, `link` or `navLink`.
+           * Type of the tab, either `button`, `link`, `navLink` or `block`.
            */
           tabType: 'link'
           /**
@@ -48,6 +48,21 @@ type ConditionalTabType =
            */
           active?: boolean
       }
+    | {
+          /**
+           * Type of the tab, either `button`, `link`, `navLink` or `block`.
+           * @note When `tabType` is set to `block`, the tab becomes non-interactive. It won't be active and will not have hover states.
+           */
+          tabType: 'block'
+          /**
+           * Props passed to div component.
+           */
+          props?: TabComponentProps<Omit<React.ComponentProps<'div'>, 'className' | 'style'>>
+          /**
+           * Indicates if the tab is currently active.
+           */
+          active?: never | false
+      }
 
 export type TabProps = {
     /**