feat: pr comments

src/components/TabStepper/components/TabStep/TabStep.tsx

@@ -1,11 +1,24 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Tab as ReactAriaTab } from 'react-aria-components';
 
 import { stepContainer, stepStyles, stepSubtitle, stepTitle } from './TabStep.style';
 import type { TabStepProps } from '../../types';
 
+import type { AcceptedIconNames } from '~/components/Icon';
 import Icon from '~/components/Icon';
 import useTheme from '~/hooks/useTheme';
+import type { SemanticColorsKey } from '~/theme/tokens/semantic/colors';
+
+const STATUS_ICON = {
+  done: {
+    name: 'success' as AcceptedIconNames,
+    color: 'indicators.brand' as SemanticColorsKey,
+  },
+  warning: {
+    name: 'warning' as AcceptedIconNames,
+    color: 'indicators.error' as SemanticColorsKey,
+  },
+};
 
 const TabStep = React.forwardRef<HTMLDivElement, TabStepProps>((props, ref) => {
   const { children, id, title, subtitle, status = 'pending', dataTestPrefixId, ...rest } = props;
@@ -14,21 +27,7 @@ const TabStep = React.forwardRef<HTMLDivElement, TabStepProps>((props, ref) => {
 
   const theme = useTheme();
 
-  const iconName = useMemo(() => {
-    if (status === 'done') {
-      return 'success';
-    }
-
-    return 'warning';
-  }, [status]);
-
-  const iconColor = useMemo(() => {
-    if (status === 'done') {
-      return 'indicators.brand';
-    }
-
-    return 'indicators.error';
-  }, [status]);
+  const icon = status !== 'pending' ? STATUS_ICON[status] : null;
 
   return (
     <ReactAriaTab id={id} {...rest} ref={ref} css={stepStyles()} data-status={status}>
@@ -39,8 +38,8 @@ const TabStep = React.forwardRef<HTMLDivElement, TabStepProps>((props, ref) => {
               {title}
               {hasIcon && (
                 <Icon
-                  name={iconName}
-                  color={theme.tokens.colors.get(iconColor)}
+                  name={icon.name}
+                  color={theme.tokens.colors.get(icon.color)}
                   dataTestPrefixId={`${dataTestPrefixId}_icon`}
                 />
               )}