refactor(components): refactor Helix components

app/src/atoms/structure/index.ts

@@ -1,2 +1 @@
 export * from './Divider'
-export * from './Line'

app/src/organisms/Desktop/Devices/ProtocolRun/ProtocolRunSetup.tsx

@@ -7,6 +7,7 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
+  Divider,
   Flex,
   FLEX_MAX_CONTENT,
   Icon,
@@ -23,7 +24,6 @@ import {
   parseAllRequiredModuleModels,
 } from '@opentrons/shared-data'
 
-import { Line } from '/app/atoms/structure'
 import { InfoMessage } from '/app/molecules/InfoMessage'
 import { useLPCFlows } from '/app/organisms/LabwarePositionCheck'
 import { useIsFlex, useRobot } from '/app/redux-resources/robots'
@@ -399,7 +399,7 @@ export function ProtocolRunSetup({
                     </SetupStep>
                   )}
                   {index !== orderedSteps.length - 1 ? (
-                    <Line marginTop={SPACING.spacing24} />
+                    <Divider marginTop={SPACING.spacing24} marginBottom={0} />
                   ) : null}
                 </Flex>
               )

app/src/organisms/Desktop/RobotSettingsCalibration/index.tsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import {
   AlertModal,
+  Divider,
   LegacyStyledText,
   SPACING,
   SpinnerModalPage,
@@ -18,7 +19,6 @@ import {
 } from '@opentrons/react-api-client'
 
 import { getTopPortalEl } from '/app/App/portal'
-import { Line } from '/app/atoms/structure'
 import { useIsFlex, useRobot } from '/app/redux-resources/robots'
 import { CONNECTABLE } from '/app/redux/discovery'
 import * as RobotApi from '/app/redux/robot-api'
@@ -327,20 +327,20 @@ export function RobotSettingsCalibration({
           <CalibrationDataDownload
             {...{ robotName, setShowHowCalibrationWorksModal }}
           />
-          <Line marginTop={SPACING.spacing24} />
+          <Divider marginTop={SPACING.spacing24} marginBottom={0} />
           <RobotSettingsPipetteOffsetCalibration
             formattedPipetteOffsetCalibrations={
               formattedPipetteOffsetCalibrations
             }
             robotName={robotName}
             updateRobotStatus={updateRobotStatus}
           />
-          <Line />
+          <Divider marginY={0} />
           <RobotSettingsGripperCalibration
             gripper={attachedGripper}
             robotName={robotName}
           />
-          <Line />
+          <Divider marginY={0} />
           <RobotSettingsModuleCalibration
             attachedModules={attachedModules}
             updateRobotStatus={updateRobotStatus}
@@ -356,30 +356,30 @@ export function RobotSettingsCalibration({
             {...{ robotName, setShowHowCalibrationWorksModal }}
           />
           <RobotSettingsDeckCalibration robotName={robotName} />
-          <Line />
+          <Divider marginY={0} />
           <RobotSettingsPipetteOffsetCalibration
             formattedPipetteOffsetCalibrations={
               formattedPipetteOffsetCalibrations
             }
             robotName={robotName}
             updateRobotStatus={updateRobotStatus}
           />
-          <Line />
+          <Divider marginY={0} />
           <RobotSettingsTipLengthCalibration
             formattedPipetteOffsetCalibrations={
               formattedPipetteOffsetCalibrations
             }
             robotName={robotName}
             updateRobotStatus={updateRobotStatus}
           />
-          <Line />
+          <Divider marginY={0} />
           <CalibrationHealthCheck
             buttonDisabledReason={buttonDisabledReason}
             dispatchRequests={dispatchRequests}
             isPending={isPending}
             robotName={robotName}
           />
-          <Line marginBottom={SPACING.spacing24} />
+          <Divider marginBottom={SPACING.spacing24} />
           <CalibrationDataDownload
             robotName={robotName}
             setShowHowCalibrationWorksModal={setShowHowCalibrationWorksModal}

app/src/pages/Desktop/AppSettings/index.tsx

@@ -8,13 +8,13 @@ import {
   Box,
   COLORS,
   DIRECTION_ROW,
+  Divider,
   Flex,
   LegacyStyledText,
   SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
-import { Line } from '/app/atoms/structure'
 import { NavTab } from '/app/molecules/NavTab'
 import { FeatureFlags } from '/app/organisms/Desktop/AppSettings/FeatureFlags'
 import * as Config from '/app/redux/config'
@@ -78,7 +78,7 @@ export function AppSettings(): JSX.Element {
             )}
           </Flex>
         </Box>
-        <Line />
+        <Divider marginY="0" />
         {appSettingsContent}
       </Box>
     </Flex>

app/src/pages/Desktop/Devices/RobotSettings/index.tsx

@@ -9,15 +9,14 @@ import {
   Box,
   COLORS,
   DIRECTION_COLUMN,
+  Divider,
   Flex,
   LegacyStyledText,
-  SIZE_6,
   SPACING,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import { ApiHostProvider } from '@opentrons/react-api-client'
 
-import { Line } from '/app/atoms/structure'
 import { NavTab } from '/app/molecules/NavTab'
 import { ReachableBanner } from '/app/organisms/Desktop/Devices/ReachableBanner'
 import { RobotSettingsAdvanced } from '/app/organisms/Desktop/Devices/RobotSettings/RobotSettingsAdvanced'
@@ -100,7 +99,7 @@ export function RobotSettings(): JSX.Element | null {
   )
 
   return (
-    <Box minWidth={SIZE_6} height="max-content" padding={SPACING.spacing16}>
+    <Box minWidth="32rem" height="max-content" padding={SPACING.spacing16}>
       <Flex
         backgroundColor={COLORS.white}
         borderRadius={BORDERS.borderRadius8}
@@ -152,7 +151,7 @@ export function RobotSettings(): JSX.Element | null {
             ) : null}
           </Flex>
         </Box>
-        <Line />
+        <Divider marginY="0" />
         <Box padding={`${SPACING.spacing24} ${SPACING.spacing16}`}>
           <ApiHostProvider
             hostname={robot?.ip ?? null}

components/src/atoms/Chip/index.tsx

@@ -7,6 +7,7 @@
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { LegacyStyledText } from '../StyledText'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
 
@@ -92,48 +93,7 @@
   const icon = iconName ?? CHIP_PROPS_BY_TYPE[type].iconName ?? 'ot-alert'
   const iconColor = CHIP_PROPS_BY_TYPE[type].iconColor
 
-  const MEDIUM_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
-    grid-gap: ${SPACING.spacing4};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing8}
-        ${background === false ? 0 : SPACING.spacing16};
-      grid-gap: ${SPACING.spacing8};
-    }
-  `
-
-  const SMALL_CONTAINER_STYLE = css`
-    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
-    grid-gap: ${SPACING.spacing4};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      padding: ${SPACING.spacing4}
-        ${background === false ? 0 : SPACING.spacing8};
-      grid-gap: ${SPACING.spacing4};
-    }
-  `
-
   const smallSize = iconName === 'connection-status' ? '0.5rem' : '0.75rem'
-  const ICON_STYLE = css`
-    width: ${chipSize === 'medium' ? '1rem' : smallSize};
-    height: ${chipSize === 'medium' ? '1rem' : smallSize};
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
-      height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
-    }
-  `
-
-  const TEXT_STYLE = css`
-    ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      ${chipSize === 'medium'
-        ? TYPOGRAPHY.bodyTextSemiBold
-        : TYPOGRAPHY.smallBodyTextSemiBold}
-    }
-  `
 
   return (
     <Flex
@@ -143,7 +103,9 @@
       flexDirection={DIRECTION_ROW}
       height={FLEX_MAX_CONTENT}
       css={
-        chipSize === 'medium' ? MEDIUM_CONTAINER_STYLE : SMALL_CONTAINER_STYLE
+        chipSize === 'medium'
+          ? MEDIUM_CONTAINER_STYLE(background)
+          : SMALL_CONTAINER_STYLE(background)
       }
       data-testid={`Chip_${type}`}
       {...styleProps}
@@ -153,7 +115,7 @@
           name={icon}
           color={iconColor}
           aria-label={`icon_${text}`}
-          css={ICON_STYLE}
+          css={ICON_STYLE(chipSize, smallSize)}
         >
           {pulseIcon ? (
             <animate
@@ -168,7 +130,7 @@
         </Icon>
       ) : null}
       <LegacyStyledText
-        css={TEXT_STYLE}
+        css={TEXT_STYLE(chipSize)}
         color={CHIP_PROPS_BY_TYPE[type].textColor}
       >
         {text}
@@ -187,3 +149,50 @@
   line-height: ${TYPOGRAPHY.lineHeight16};
   font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
 `
+
+const ICON_STYLE = (
+  chipSize: ChipSize,
+  smallSize: string
+): FlattenSimpleInterpolation => css`
+  width: ${chipSize === 'medium' ? '1rem' : smallSize};
+  height: ${chipSize === 'medium' ? '1rem' : smallSize};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+    height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+  }
+`
+
+const TEXT_STYLE = (chipSize: ChipSize): FlattenSimpleInterpolation => css`
+  ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    ${chipSize === 'medium'
+      ? TYPOGRAPHY.bodyTextSemiBold
+      : TYPOGRAPHY.smallBodyTextSemiBold}
+  }
+`
+
+const MEDIUM_CONTAINER_STYLE = (
+  background?: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
+  grid-gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: ${SPACING.spacing8} ${background === false ? 0 : SPACING.spacing16};
+    grid-gap: ${SPACING.spacing8};
+  }
+`
+
+const SMALL_CONTAINER_STYLE = (
+  background?: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
+  grid-gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing8};
+    grid-gap: ${SPACING.spacing4};
+  }
+`

components/src/atoms/ListButton/index.tsx

@@ -5,6 +5,7 @@ import { Flex } from '../../primitives'
 import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../styles'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 
@@ -13,14 +14,19 @@ export * from './ListButtonChildren/index'
 type ListButtonType = 'noActive' | 'connected' | 'notConnected' | 'onColor'
 
 interface ListButtonProps extends StyleProps {
+  /** ListButton type */
   type: ListButtonType
+  /** ListButton content */
   children: ReactNode
+  /** ListButton disabled state */
   disabled?: boolean
+  /** ListButton onClick event */
   onClick?: () => void
+  /** optional data-testid value for Cypress testing */
   testId?: string
 }
 
-const DESKTOP_LISTBUTTON_PROPS_BY_TYPE: Record<
+const DESKTOP_LIST_BUTTON_PROPS_BY_TYPE: Record<
   ListButtonType,
   { backgroundColor: string; hoverBackgroundColor: string }
 > = {
@@ -42,7 +48,7 @@ const DESKTOP_LISTBUTTON_PROPS_BY_TYPE: Record<
   },
 }
 
-const ODD_LISTBUTTON_PROPS_BY_TYPE: Record<
+const ODD_LIST_BUTTON_PROPS_BY_TYPE: Record<
   ListButtonType,
   { backgroundColor: string; hoverBackgroundColor: string }
 > = {
@@ -75,44 +81,11 @@ export function ListButton(props: ListButtonProps): JSX.Element {
     children,
     disabled = false,
     onClick,
-    testId, // optional data-testid value for Cypress testing
+    testId,
     ...styleProps
   } = props
-  const desktopListButtonProps = DESKTOP_LISTBUTTON_PROPS_BY_TYPE[type]
-  const oddListButtonProps = ODD_LISTBUTTON_PROPS_BY_TYPE[type]
-
-  const LIST_BUTTON_STYLE = css`
-    cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
-    background-color: ${disabled
-      ? COLORS.grey20
-      : desktopListButtonProps.backgroundColor};
-    padding: ${styleProps.padding ??
-    `${SPACING.spacing20} ${SPACING.spacing24}`};
-    border-radius: ${BORDERS.borderRadius8};
-
-    &:hover {
-      background-color: ${disabled
-        ? COLORS.grey20
-        : desktopListButtonProps.hoverBackgroundColor};
-    }
-
-    &:focus-visible {
-      outline: 2px solid ${COLORS.blue50};
-      outline-offset: 0.125rem;
-    }
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      background-color: ${disabled
-        ? COLORS.grey35
-        : oddListButtonProps.backgroundColor};
-
-      &:hover {
-        background-color: ${disabled
-          ? COLORS.grey35
-          : oddListButtonProps.hoverBackgroundColor};
-      }
-    }
-  `
+  const desktopListButtonProps = DESKTOP_LIST_BUTTON_PROPS_BY_TYPE[type]
+  const oddListButtonProps = ODD_LIST_BUTTON_PROPS_BY_TYPE[type]
 
   return (
     <Flex
@@ -121,7 +94,12 @@ export function ListButton(props: ListButtonProps): JSX.Element {
         onClick?.()
         e.stopPropagation()
       }}
-      css={LIST_BUTTON_STYLE}
+      css={LIST_BUTTON_STYLE(
+        disabled,
+        styleProps,
+        desktopListButtonProps,
+        oddListButtonProps
+      )}
       tabIndex={0}
       max-width="26.875rem"
       {...styleProps}
@@ -130,3 +108,40 @@ export function ListButton(props: ListButtonProps): JSX.Element {
     </Flex>
   )
 }
+
+const LIST_BUTTON_STYLE = (
+  disabled: boolean,
+  styleProps: StyleProps,
+  desktopListButtonProps: Record<string, string>,
+  oddListButtonProps: Record<string, string>
+): FlattenSimpleInterpolation => css`
+  cursor: ${disabled ? CURSOR_DEFAULT : CURSOR_POINTER};
+  background-color: ${disabled
+    ? COLORS.grey20
+    : desktopListButtonProps.backgroundColor};
+  padding: ${styleProps.padding ?? `${SPACING.spacing20} ${SPACING.spacing24}`};
+  border-radius: ${BORDERS.borderRadius8};
+
+  &:hover {
+    background-color: ${disabled
+      ? COLORS.grey20
+      : desktopListButtonProps.hoverBackgroundColor};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${COLORS.blue50};
+    outline-offset: 0.125rem;
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    background-color: ${disabled
+      ? COLORS.grey35
+      : oddListButtonProps.backgroundColor};
+
+    &:hover {
+      background-color: ${disabled
+        ? COLORS.grey35
+        : oddListButtonProps.hoverBackgroundColor};
+    }
+  }
+`

components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx

@@ -66,21 +66,19 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
         {tag != null ? <Tag {...tag} /> : null}
       </Flex>
       {onClick != null && linkText != null ? (
-        <Link
-          role="button"
-          onClick={onClick}
-          css={css`
-            width: 10%;
-            text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
-            color: ${COLORS.grey60};
-            &:hover {
-              color: ${COLORS.grey40};
-            }
-          `}
-        >
+        <Link role="button" onClick={onClick} css={LINK_STYLE}>
           <StyledText desktopStyle="bodyDefaultRegular">{linkText}</StyledText>
         </Link>
       ) : null}
     </Flex>
   )
 }
+
+const LINK_STYLE = css`
+  width: 10%;
+  text-decoration: ${TYPOGRAPHY.textDecorationUnderline};
+  color: ${COLORS.grey60};
+  &:hover {
+    color: ${COLORS.grey40};
+  }
+`

components/src/atoms/ListItem/ListItemChildren/ListItemDescriptor.tsx

@@ -9,9 +9,13 @@ import {
 import { SPACING } from '../../../ui-style-constants'
 
 interface ListItemDescriptorProps {
+  /** ListItemDescriptor size type */
   type: 'default' | 'large'
+  /** ListItemDescriptor description */
   description: JSX.Element
+  /** ListItemDescriptor content */
   content: JSX.Element
+  /** ListItemDescriptor flex direction */
   changeFlexDirection?: boolean
 }
 

components/src/atoms/StepMeter/__tests__/StepMeter.test.tsx

@@ -0,0 +1,45 @@
+import { screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { StepMeter } from '../'
+import { COLORS } from '../../../helix-design-system'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const renderer = (props: ComponentProps<typeof StepMeter>) => {
+  return renderWithProviders(<StepMeter {...props} />)
+}
+
+describe('StepMeter', () => {
+  let props: ComponentProps<typeof StepMeter>
+
+  beforeEach(() => {
+    props = {
+      totalSteps: 10,
+      currentStep: 5,
+    }
+  })
+
+  it('should render StepMeterContainer', () => {
+    renderer(props)
+
+    const stepMeterContainer = screen.getByTestId(
+      'StepMeter_StepMeterContainer'
+    )
+    expect(stepMeterContainer).toHaveStyle({
+      height: '0.25rem',
+      backgroundColor: COLORS.grey30,
+    })
+  })
+  it('should render StepMeterBar 50%', () => {
+    renderer(props)
+
+    const stepMeterBar = screen.getByTestId('StepMeter_StepMeterBar')
+    expect(stepMeterBar).toHaveStyle({
+      width: '50%',
+      height: '100%',
+      backgroundColor: COLORS.blue50,
+    })
+  })
+})

components/src/atoms/StepMeter/index.tsx

@@ -5,6 +5,7 @@
 import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
 import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 
+import type { FlattenSimpleInterpolation } from 'styled-components'
 import type { StyleProps } from '../../primitives'
 
 interface StepMeterProps extends StyleProps {
@@ -22,33 +23,40 @@
       : (progress / totalSteps) * 100
   }%`
 
-  const StepMeterContainer = css`
-    position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
-    height: ${SPACING.spacing4};
-    background-color: ${COLORS.grey30};
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      height: ${SPACING.spacing12};
-    }
-  `
-  const StepMeterBar = css`
-    position: ${POSITION_ABSOLUTE};
-    top: 0;
-    height: 100%;
-    background-color: ${COLORS.blue50};
-    width: ${percentComplete};
-    webkit-transition: width 0.5s ease-in-out;
-    moz-transition: width 0.5s ease-in-out;
-    o-transition: width 0.5s ease-in-out;
-    transition: width 0.5s ease-in-out;
-  `
-
   return (
     <Box
       data-testid="StepMeter_StepMeterContainer"
-      css={StepMeterContainer}
+      css={StepMeterContainer(styleProps)}
       {...styleProps}
     >
-      <Box data-testid="StepMeter_StepMeterBar" css={StepMeterBar} />
+      <Box
+        data-testid="StepMeter_StepMeterBar"
+        css={StepMeterBar(percentComplete)}
+      />
     </Box>
   )
 }
+
+const StepMeterContainer = (
+  styleProps: StyleProps
+): FlattenSimpleInterpolation => css`
+  position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
+  height: ${SPACING.spacing4};
+  background-color: ${COLORS.grey30};
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    height: ${SPACING.spacing12};
+  }
+`
+const StepMeterBar = (
+  percentComplete: string
+): FlattenSimpleInterpolation => css`
+  position: ${POSITION_ABSOLUTE};
+  top: 0;
+  height: 100%;
+  background-color: ${COLORS.blue50};
+  width: ${percentComplete};
+  webkit-transition: width 0.5s ease-in-out;
+  moz-transition: width 0.5s ease-in-out;
+  o-transition: width 0.5s ease-in-out;
+  transition: width 0.5s ease-in-out;
+`