refactor: ion tab group with styled-components

src/components/tabGroup/__snapshots__/tabGroup.test.tsx.snap

@@ -1,165 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`IonTabGroup Default should render TabGroup in vertical align by default 1`] = `
-.c1 {
-  font-weight: 600;
-  color: #505566;
-  background: #fcfcfd;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 16px;
-  font-size: 1.2rem;
-  line-height: 1.6rem;
-  border-right: 2px solid;
-  border-radius: 6px 0px 0px 6px;
-  border-color: #ced2db;
-}
-
-.c1:focus-visible {
-  outline: 2px solid #146ff5;
-  outline-offset: 2px;
-}
-
-.c1 svg {
-  fill: #505566;
-}
-
-.c1:hover,
-.c1:focus-visible {
-  color: #146ff5;
-  background: #ebf3fe;
-  border-color: #84b4fa;
-}
-
-.c1:hover svg,
-.c1:focus-visible svg {
-  fill: #146ff5;
-}
-
-.c1:active {
-  color: #06439d;
-  background: #b5d2fc;
-  border-color: #146ff5;
-}
-
-.c1:active svg {
-  fill: #06439d;
-}
-
-.c1:disabled {
-  color: #aeb2bd;
-  background: #e4e6eb;
-  border-color: #aeb2bd;
-  cursor: not-allowed;
-}
-
-.c1:disabled svg {
-  fill: #aeb2bd;
-}
-
-.c0 {
-  font-weight: 600;
-  color: #505566;
-  background: #fcfcfd;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 8px 16px;
-  font-size: 1.2rem;
-  line-height: 1.6rem;
-  border-right: 2px solid;
-  border-radius: 6px 0px 0px 6px;
-  border-color: #ced2db;
-  color: #0858ce;
-  border-color: #0858ce;
-}
-
-.c0:focus-visible {
-  outline: 2px solid #146ff5;
-  outline-offset: 2px;
-}
-
-.c0 svg {
-  fill: #505566;
-}
-
-.c0:hover,
-.c0:focus-visible {
-  color: #146ff5;
-  background: #ebf3fe;
-  border-color: #84b4fa;
-}
-
-.c0:hover svg,
-.c0:focus-visible svg {
-  fill: #146ff5;
-}
-
-.c0:active {
-  color: #06439d;
-  background: #b5d2fc;
-  border-color: #146ff5;
-}
-
-.c0:active svg {
-  fill: #06439d;
-}
-
-.c0:disabled {
-  color: #aeb2bd;
-  background: #e4e6eb;
-  border-color: #aeb2bd;
-  cursor: not-allowed;
-}
-
-.c0:disabled svg {
-  fill: #aeb2bd;
-}
-
-.c0 svg {
-  fill: #0858ce;
-}
-
-<div
-  class="c-gbGNpS c-gbGNpS-kwZaNe-align-vertical"
-  data-testid="ion-tabGroup"
->
-  <div
-    data-testid="ion-tabGroup-container"
-  >
-    <button
-      class="c0"
-      data-testid="ion-tab"
-    >
-      <span>
-        Tab 1
-      </span>
-    </button>
-    <button
-      class="c1"
-      data-testid="ion-tab"
-    >
-      <span>
-        Tab 2
-      </span>
-    </button>
-    <button
-      class="c1"
-      data-testid="ion-tab"
-    >
-      <span>
-        Tab 3
-      </span>
-    </button>
-  </div>
-</div>
-`;
-
 exports[`IonTabGroup Sizes should render tabs with lg size 1`] = `
 .c0 {
   font-weight: 600;

src/components/tabGroup/styles.ts

@@ -1,33 +1,15 @@
-import stitches from '../../stitches.config';
-
-const { styled } = stitches;
-
-export const TabGroupStyles = styled('div', {
-  display: 'flex',
-
-  div: {
-    display: 'flex',
-  },
-
-  variants: {
-    align: {
-      horizontal: {
-        div: {
-          flexDirection: 'row',
-        },
-      },
-      vertical: {
-        width: '100%',
-
-        div: {
-          flexDirection: 'column',
-          textAlign: 'left',
-          'button > div': {
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-          },
-        },
-      },
-    },
-  },
-});
+import { css, styled } from 'styled-components';
+import { TabAlign } from './tabGroup';
+
+type TabGroupStylesProps = {
+  align: TabAlign;
+};
+
+export const TabGroup = styled.div<TabGroupStylesProps>`
+  ${({ align }) =>
+    css`
+      display: flex;
+      flex-direction: ${align === 'horizontal' ? 'row' : 'column'};
+      width: max-content;
+    `}
+`;

src/components/tabGroup/tabGroup.test.tsx

@@ -34,7 +34,7 @@ describe('IonTabGroup', () => {
   describe('Default', () => {
     it('should render TabGroup in horizontal align by default', async () => {
       sut();
-      expect(getTabGroup().className).toContain('align-horizontal');
+      expect(getTabGroup()).toHaveStyleRule('flex-direction', 'row');
     });
 
     it('should render tabs with border bottom by default', async () => {
@@ -46,7 +46,7 @@ describe('IonTabGroup', () => {
 
     it('should render TabGroup in vertical align by default', async () => {
       sut({ ...mockProps, align: 'vertical' });
-      expect(getTabGroup()).toMatchSnapshot();
+      expect(getTabGroup()).toHaveStyleRule('flex-direction', 'column');
     });
 
     it('should render the correct number of tabs', () => {
@@ -100,7 +100,7 @@ describe('IonTabGroup', () => {
     it('should not contain border right when align is horizontal', async () => {
       sut({ ...mockProps, align: 'horizontal', borderDirection: 'right' });
       getTabs().forEach((tab: HTMLElement) => {
-        expect(tab.className).not.toContain('direction-right');
+        expect(tab).not.toHaveStyleRule('border-right', '2px solid');
       });
     });
   });

src/components/tabGroup/tabGroup.tsx

@@ -2,9 +2,9 @@ import { useCallback, useEffect, useState } from 'react';
 import { BorderDirection } from '../../core/types/directions';
 import { SizeType } from '../../core/types/size';
 import { IonTab, TabProps } from '../tab/tab';
-import { TabGroupStyles } from './styles';
+import { TabGroup } from './styles';
 
-type TabAlign = 'vertical' | 'horizontal';
+export type TabAlign = 'vertical' | 'horizontal';
 
 export type TabGroupSizes = Exclude<SizeType, 'xs'>;
 
@@ -46,21 +46,19 @@ export const IonTabGroup = ({
   }, []);
 
   return (
-    <TabGroupStyles align={align} data-testid='ion-tabGroup'>
-      <div data-testid='ion-tabGroup-container'>
-        {tabs.map((tabItem, index) => {
-          return (
-            <IonTab
-              {...tabItem}
-              key={index}
-              handleClick={() => handleTabClick(tabItem, index)}
-              selected={activeTab === index}
-              direction={defineBorderByAlign()}
-              size={size}
-            />
-          );
-        })}
-      </div>
-    </TabGroupStyles>
+    <TabGroup align={align} data-testid='ion-tabGroup'>
+      {tabs.map((tabItem, index) => {
+        return (
+          <IonTab
+            {...tabItem}
+            key={index}
+            handleClick={() => handleTabClick(tabItem, index)}
+            selected={activeTab === index}
+            direction={defineBorderByAlign()}
+            size={size}
+          />
+        );
+      })}
+    </TabGroup>
   );
 };