refactor(app): Refactor LPC flows in preparation for LPC redesign

api-client/src/maintenance_runs/createMaintenanceRunLabwareDefinition.ts

@@ -3,14 +3,20 @@ import { POST, request } from '../request'
 import type { ResponsePromise } from '../request'
 import type { HostConfig } from '../types'
 import type { LabwareDefinitionSummary } from './types'
-import type { LabwareDefinition2 } from '@opentrons/shared-data'
+import type {
+  LabwareDefinition2,
+  LabwareDefinition3,
+} from '@opentrons/shared-data'
 
 export function createMaintenanceRunLabwareDefinition(
   config: HostConfig,
   maintenanceRunId: string,
-  data: LabwareDefinition2
+  data: LabwareDefinition2 | LabwareDefinition3
 ): ResponsePromise<LabwareDefinitionSummary> {
-  return request<LabwareDefinitionSummary, { data: LabwareDefinition2 }>(
+  return request<
+    LabwareDefinitionSummary,
+    { data: LabwareDefinition2 | LabwareDefinition3 }
+  >(
     POST,
     `/maintenance_runs/${maintenanceRunId}/labware_definitions`,
     { data },

app/src/atoms/buttons/SubmitPrimaryButton.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import styled from 'styled-components'
 import {
   SPACING,
   COLORS,
@@ -15,37 +15,39 @@ interface SubmitPrimaryButtonProps {
   onClick?: (event: MouseEvent<HTMLInputElement>) => unknown
   disabled?: boolean
 }
+
+const StyledSubmitInput = styled.input`
+  background-color: ${COLORS.blue50};
+  border-radius: ${BORDERS.borderRadius8};
+  padding: ${SPACING.spacing8} ${SPACING.spacing16};
+  color: ${COLORS.white};
+  ${TYPOGRAPHY.pSemiBold}
+  width: 100%;
+  border: none;
+
+  ${styleProps}
+
+  &:focus-visible {
+    box-shadow: 0 0 0 3px ${COLORS.yellow50};
+  }
+
+  &:hover {
+    background-color: ${COLORS.blue55};
+    box-shadow: 0 0 0;
+  }
+
+  &:active {
+    background-color: ${COLORS.blue60};
+  }
+
+  &:disabled {
+    background-color: ${COLORS.grey30};
+    color: ${COLORS.grey40};
+  }
+`
+
 export const SubmitPrimaryButton = (
   props: SubmitPrimaryButtonProps
 ): JSX.Element => {
-  const SUBMIT_INPUT_STYLE = css`
-    background-color: ${COLORS.blue50};
-    border-radius: ${BORDERS.borderRadius8};
-    padding: ${SPACING.spacing8} ${SPACING.spacing16};
-    color: ${COLORS.white};
-    ${TYPOGRAPHY.pSemiBold}
-    width: 100%;
-    border: none;
-
-    ${styleProps}
-
-    &:focus-visible {
-      box-shadow: 0 0 0 3px ${COLORS.yellow50};
-    }
-
-    &:hover {
-      background-color: ${COLORS.blue55};
-      box-shadow: 0 0 0;
-    }
-
-    &:active {
-      background-color: ${COLORS.blue60};
-    }
-
-    &:disabled {
-      background-color: ${COLORS.grey30};
-      color: ${COLORS.grey40};
-    }
-  `
-  return <input {...props} css={SUBMIT_INPUT_STYLE} type="submit" />
+  return <StyledSubmitInput {...props} type="submit" />
 }

app/src/molecules/InProgressModal/InProgressModal.tsx

@@ -1,4 +1,4 @@
-import { css } from 'styled-components'
+import styled from 'styled-components'
 import {
   ALIGN_CENTER,
   COLORS,
@@ -22,7 +22,7 @@ interface Props {
   children?: JSX.Element
 }
 
-const DESCRIPTION_STYLE = css`
+const StyledDescription = styled(LegacyStyledText)`
   ${TYPOGRAPHY.h1Default}
   margin-top: ${SPACING.spacing24};
   margin-bottom: ${SPACING.spacing8};
@@ -38,7 +38,8 @@ const DESCRIPTION_STYLE = css`
     line-height: ${TYPOGRAPHY.lineHeight42};
   }
 `
-const BODY_STYLE = css`
+
+const StyledBody = styled(LegacyStyledText)`
   ${TYPOGRAPHY.pRegular}
   text-align: ${TYPOGRAPHY.textAlignCenter};
 
@@ -47,7 +48,8 @@ const BODY_STYLE = css`
     color: ${COLORS.grey60}
   }
 `
-const MODAL_STYLE = css`
+
+const StyledModal = styled(Flex)`
   align-items: ${ALIGN_CENTER};
   flex-direction: ${DIRECTION_COLUMN};
   justify-content: ${JUSTIFY_CENTER};
@@ -59,7 +61,8 @@ const MODAL_STYLE = css`
     height: 100%;
   }
 `
-const SPINNER_STYLE = css`
+
+const StyledSpinner = styled(Icon)`
   color: ${COLORS.grey60};
   width: 5.125rem;
   height: 5.125rem;
@@ -69,11 +72,13 @@ const SPINNER_STYLE = css`
   }
 `
 
-const DESCRIPTION_CONTAINER_STYLE = css`
-  padding-x: 6.5625rem;
+const DescriptionContainer = styled(Flex)`
+  padding-left: 6.5625rem;
+  padding-right: 6.5625rem;
   gap: ${SPACING.spacing8};
   @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    padding-x: ${SPACING.spacing40};
+    padding-left: ${SPACING.spacing40};
+    padding-right: ${SPACING.spacing40};
     gap: ${SPACING.spacing4};
   }
 `
@@ -82,25 +87,20 @@ export function InProgressModal(props: Props): JSX.Element {
   const { alternativeSpinner, children, description, body } = props
 
   return (
-    <Flex css={MODAL_STYLE}>
+    <StyledModal>
       {alternativeSpinner ?? (
-        <Icon name="ot-spinner" aria-label="spinner" css={SPINNER_STYLE} spin />
+        <StyledSpinner name="ot-spinner" aria-label="spinner" spin />
       )}
-      <Flex
+      <DescriptionContainer
         flexDirection={DIRECTION_COLUMN}
         alignItems={ALIGN_CENTER}
-        css={DESCRIPTION_CONTAINER_STYLE}
       >
         {description != null && (
-          <LegacyStyledText css={DESCRIPTION_STYLE}>
-            {description}
-          </LegacyStyledText>
-        )}
-        {body != null && (
-          <LegacyStyledText css={BODY_STYLE}>{body}</LegacyStyledText>
+          <StyledDescription>{description}</StyledDescription>
         )}
-      </Flex>
+        {body != null && <StyledBody>{body}</StyledBody>}
+      </DescriptionContainer>
       {children}
-    </Flex>
+    </StyledModal>
   )
 }

app/src/molecules/JogControls/DirectionControl.tsx

@@ -397,7 +397,8 @@ const ARROW_BUTTON_STYLES = css`
     }
   }
 `
-const ARROW_ICON_STYLES = css`
+
+const StyledIcon = styled(Icon)`
   height: 1.125rem;
   width: 1.125rem;
 
@@ -427,21 +428,19 @@ export const ArrowKeys = (props: ArrowKeysProps): JSX.Element => {
 
   return (
     <Box css={ARROW_GRID_STYLES}>
-      {controls.map(
-        ({ bearing, iconName, axis, sign, gridColumn, keyName, disabled }) => (
-          <PrimaryButton
-            key={bearing}
-            onClick={() => jog(axis, sign, stepSize)}
-            css={ARROW_BUTTON_STYLES}
-            title={bearing}
-            gridArea={keyName}
-            alignSelf={BUTTON_ALIGN_BY_KEY_NAME[keyName] ?? 'center'}
-            disabled={disabled}
-          >
-            <Icon css={ARROW_ICON_STYLES} name={iconName} />
-          </PrimaryButton>
-        )
-      )}
+      {controls.map(({ bearing, iconName, axis, sign, keyName, disabled }) => (
+        <PrimaryButton
+          key={bearing}
+          onClick={() => jog(axis, sign, stepSize)}
+          css={ARROW_BUTTON_STYLES}
+          title={bearing}
+          gridArea={keyName}
+          alignSelf={BUTTON_ALIGN_BY_KEY_NAME[keyName] ?? 'center'}
+          disabled={disabled}
+        >
+          <StyledIcon name={iconName} />
+        </PrimaryButton>
+      ))}
     </Box>
   )
 }

app/src/molecules/JogControls/StepSizeControl.tsx

@@ -25,7 +25,8 @@ import type { MouseEvent } from 'react'
 import type { StepSize } from './types'
 
 const JUMP_SIZE_SUBTITLE = '- / +'
-const JUMP_SIZE_ICON_STYLE = css`
+
+const StyledIcon = styled(Icon)`
   flex-shrink: 0;
 `
 
@@ -77,6 +78,7 @@ const DEFAULT_BUTTON_STYLE = css`
     color: ${COLORS.grey40};
   }
 `
+
 const ACTIVE_BUTTON_STYLE = css`
   ${DEFAULT_BUTTON_STYLE}
   color: ${COLORS.blue50};
@@ -88,11 +90,13 @@ const ACTIVE_BUTTON_STYLE = css`
     outline: 0;
   }
 `
+
 interface StepSizeControlProps {
   stepSizes: StepSize[]
   currentStepSize: StepSize
   setCurrentStepSize: (stepSize: StepSize) => void
 }
+
 export function StepSizeControl(props: StepSizeControlProps): JSX.Element {
   const { stepSizes, currentStepSize, setCurrentStepSize } = props
   const { t } = useTranslation(['robot_calibration'])
@@ -125,7 +129,7 @@ export function StepSizeControl(props: StepSizeControlProps): JSX.Element {
       >
         <Flex flexDirection={DIRECTION_COLUMN} flex="1">
           <Flex flexDirection={DIRECTION_ROW}>
-            <Icon name="jump-size" width="1.2rem" css={JUMP_SIZE_ICON_STYLE} />
+            <StyledIcon name="jump-size" width="1.2rem" />
             <LegacyStyledText
               textTransform={TEXT_TRANSFORM_CAPITALIZE}
               css={TYPOGRAPHY.pSemiBold}

app/src/molecules/UnorderedList/index.tsx

@@ -1,24 +1,24 @@
-import { css } from 'styled-components'
+import styled from 'styled-components'
 import { SPACING, LegacyStyledText } from '@opentrons/components'
 
 import type { ReactNode } from 'react'
 
+const ListItem = styled.li`
+  margin-left: ${SPACING.spacing24};
+`
+
 interface UnorderedListProps {
   items: ReactNode[]
 }
+
 export function UnorderedList(props: UnorderedListProps): JSX.Element {
   const { items } = props
   return (
     <ul>
       {items.map((item, index) => (
-        <li
-          key={index}
-          css={css`
-            margin-left: ${SPACING.spacing24};
-          `}
-        >
+        <ListItem key={index}>
           <LegacyStyledText as="p">{item}</LegacyStyledText>
-        </li>
+        </ListItem>
       ))}
     </ul>
   )

app/src/molecules/WizardRequiredEquipmentList/index.tsx

@@ -1,6 +1,6 @@
 import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { css } from 'styled-components'
+import styled from 'styled-components'
 import {
   ALIGN_CENTER,
   BORDERS,
@@ -24,10 +24,19 @@ import { equipmentImages } from './equipmentImages'
 
 import type { ComponentProps } from 'react'
 import type { StyleProps } from '@opentrons/components'
+
 interface WizardRequiredEquipmentListProps extends StyleProps {
   equipmentList: Array<ComponentProps<typeof RequiredEquipmentCard>>
   footer?: string
 }
+
+const StyledEquipmentImage = styled.img<{ isEquipmentImage: boolean }>`
+  max-width: 100%;
+  max-height: 100%;
+  flex: ${props => (props.isEquipmentImage ? '0' : '0 1 5rem')};
+  display: block;
+`
+
 export function WizardRequiredEquipmentList(
   props: WizardRequiredEquipmentListProps
 ): JSX.Element {
@@ -142,13 +151,8 @@ function RequiredEquipmentCard(props: RequiredEquipmentCardProps): JSX.Element {
             alignItems={ALIGN_CENTER}
             marginRight={SPACING.spacing16}
           >
-            <img
-              css={css`
-                max-width: 100%;
-                max-height: 100%;
-                flex: ${loadName in equipmentImages ? `0` : `0 1 5rem`};
-                display: block;
-              `}
+            <StyledEquipmentImage
+              isEquipmentImage={loadName in equipmentImages}
               src={imageSrc}
               alt={displayName}
             />

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

@@ -107,7 +107,7 @@ export function ChooseProtocolSlideoutComponent(
   const { robot, showSlideout, onCloseClick } = props
   const { name } = robot
 
-  const isNewLpc = useFeatureFlag('lpcRedesign')
+  const isNewLPC = useFeatureFlag('lpcRedesign')
 
   const [
     selectedProtocol,
@@ -655,7 +655,7 @@ export function ChooseProtocolSlideoutComponent(
           }
         >
           {currentPage === 1
-            ? !isNewLpc && (
+            ? !isNewLPC && (
                 <LegacyApplyHistoricOffsets
                   offsetCandidates={offsetCandidates}
                   shouldApplyOffsets={shouldApplyOffsets}

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

@@ -68,7 +68,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
     setSelectedRobot,
   } = props
   const navigate = useNavigate()
-  const isNewLpc = useFeatureFlag('lpcRedesign')
+  const isNewLPC = useFeatureFlag('lpcRedesign')
   const [shouldApplyOffsets, setShouldApplyOffsets] = useState<boolean>(true)
   const {
     protocolKey,
@@ -221,7 +221,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
     </PrimaryButton>
   )
 
-  const offsetsComponent = isNewLpc ? null : (
+  const offsetsComponent = isNewLPC ? null : (
     <LegacyApplyHistoricOffsets
       offsetCandidates={offsetCandidates}
       shouldApplyOffsets={shouldApplyOffsets}