refactor(components): refactor roundtab stories (#14956)

* refactor(components): refactor roundtab stories

components/src/molecules/RoundTab.stories.tsx

@@ -1,55 +1,80 @@
 import * as React from 'react'
 import { SPACING, TYPOGRAPHY } from '../ui-style-constants'
-import { Flex, Text } from '../primitives'
-import { DIRECTION_ROW } from '../styles'
-import { RoundTab } from './RoundTab'
-import type { Story, Meta } from '@storybook/react'
+import { Flex } from '../primitives'
+import { StyledText } from '../atoms/StyledText'
+import { DIRECTION_COLUMN, DIRECTION_ROW } from '../styles'
+import { RoundTab as RoundTabComponent } from './RoundTab'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof RoundTabComponent> = {
   title: 'Library/Molecules/RoundTab',
-  component: RoundTab,
-} as Meta
-
-const Template: Story<
-  React.ComponentProps<typeof RoundTab>
-> = (): JSX.Element => {
-  const [step, setStep] = React.useState<'details' | 'pipette' | 'module'>(
-    'details'
-  )
+  component: RoundTabComponent,
+  decorators: [Story => <Tabs />],
+}
+export default meta
+
+const Tabs = (): JSX.Element => {
+  const [step, setStep] = React.useState<
+    'setup' | 'parameters' | 'module controls' | 'run preview'
+  >('setup')
 
   return (
     <Flex
-      width="100%"
-      height="100%"
-      flexDirection={DIRECTION_ROW}
-      marginLeft={SPACING.spacing16}
+      flexDirection={DIRECTION_COLUMN}
+      gridGap={SPACING.spacing16}
+      padding={SPACING.spacing16}
     >
-      <RoundTab
-        isCurrent={step === 'details'}
-        onClick={() => setStep('details')}
-      >
-        <Text textTransform={TYPOGRAPHY.textTransformCapitalize}>
-          {'Protocol Name and Description'}
-        </Text>
-      </RoundTab>
-
-      <RoundTab
-        isCurrent={step === 'pipette'}
-        onClick={() => setStep('pipette')}
+      <Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing4}>
+        <RoundTabComponent
+          isCurrent={step === 'setup'}
+          onClick={() => setStep('setup')}
+          tabName={'setup'}
+        >
+          <StyledText textTransform={TYPOGRAPHY.textTransformCapitalize}>
+            {'Setup'}
+          </StyledText>
+        </RoundTabComponent>
+
+        <RoundTabComponent
+          isCurrent={step === 'parameters'}
+          onClick={() => setStep('parameters')}
+        >
+          <StyledText textTransform={TYPOGRAPHY.textTransformCapitalize}>
+            {'Parameters'}
+          </StyledText>
+        </RoundTabComponent>
+
+        <RoundTabComponent
+          isCurrent={step === 'module controls'}
+          onClick={() => setStep('module controls')}
+        >
+          <StyledText textTransform={TYPOGRAPHY.textTransformCapitalize}>
+            {'Module Controls'}
+          </StyledText>
+        </RoundTabComponent>
+
+        <RoundTabComponent
+          isCurrent={step === 'run preview'}
+          onClick={() => setStep('run preview')}
+        >
+          <StyledText textTransform={TYPOGRAPHY.textTransformCapitalize}>
+            {'Run Preview'}
+          </StyledText>
+        </RoundTabComponent>
+      </Flex>
+      <StyledText
+        as="h3"
+        fontWeight={TYPOGRAPHY.fontWeightSemiBold}
+        textTransform={TYPOGRAPHY.textTransformCapitalize}
       >
-        <Text textTransform={TYPOGRAPHY.textTransformCapitalize}>
-          {'Pipette Selection'}
-        </Text>
-      </RoundTab>
-
-      <RoundTab isCurrent={step === 'module'} onClick={() => setStep('module')}>
-        <Text textTransform={TYPOGRAPHY.textTransformCapitalize}>
-          {'Module Selection'}
-        </Text>
-      </RoundTab>
+        {step}
+      </StyledText>
     </Flex>
   )
 }
 
-export const Basic = Template.bind({})
-Basic.args = {}
+type Story = StoryObj<typeof RoundTabComponent>
+
+export const RoundTab: Story = {
+  args: {},
+}