feat(tabstepper): styles

Orfium · Oct 17, 2024 · ad3a9a3 · ad3a9a3
1 parent fb82893
commit ad3a9a3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 17 deletions.
diff --git a/src/components/TabStepper/components/TabStep/TabStep.style.ts b/src/components/TabStepper/components/TabStep/TabStep.style.ts
@@ -6,6 +6,9 @@ import { flex, flexCenterVertical } from '~/theme/functions';
 export const stepStyles = () =>
   css`
     cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
   `;
 
 export const stepContainer = () => (theme: Theme) =>
@@ -20,6 +23,7 @@ export const stepTitle = () => (theme: Theme) =>
   css`
     ${flexCenterVertical};
     justify-content: space-between;
+    gap: ${theme.globals.spacing.get('7')};
 
     ${theme.tokens.typography.get('normal.title02')}
   `;

diff --git a/src/components/TabStepper/components/TabStep/TabStep.tsx b/src/components/TabStepper/components/TabStep/TabStep.tsx
@@ -34,23 +34,27 @@ const TabStep = React.forwardRef<HTMLDivElement, TabStepProps>((props, ref) => {
     <ReactAriaTab id={id} {...rest} ref={ref} css={stepStyles()} data-status={status}>
       {children ?? (
         <div css={stepContainer()}>
-          <div css={stepTitle()} data-role="title" data-testid={`${dataTestPrefixId}_title`}>
-            {title}
-            {hasIcon && (
-              <Icon
-                name={iconName}
-                color={theme.tokens.colors.get(iconColor)}
-                dataTestPrefixId={`${dataTestPrefixId}_icon`}
-              />
-            )}
-          </div>
-          <div
-            css={stepSubtitle()}
-            data-role="subtitle"
-            data-testid={`${dataTestPrefixId}_subtitle`}
-          >
-            {subtitle}
-          </div>
+          {title && (
+            <div css={stepTitle()} data-role="title" data-testid={`${dataTestPrefixId}_title`}>
+              {title}
+              {hasIcon && (
+                <Icon
+                  name={iconName}
+                  color={theme.tokens.colors.get(iconColor)}
+                  dataTestPrefixId={`${dataTestPrefixId}_icon`}
+                />
+              )}
+            </div>
+          )}
+          {subtitle && (
+            <div
+              css={stepSubtitle()}
+              data-role="subtitle"
+              data-testid={`${dataTestPrefixId}_subtitle`}
+            >
+              {subtitle}
+            </div>
+          )}
         </div>
       )}
     </ReactAriaTab>