address feedbacl

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { ALIGN_CENTER } from '../../../styles'
+import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
 import { COLORS } from '../../../helix-design-system'
 import { Flex, Link } from '../../../primitives'
 import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants'
@@ -20,9 +20,7 @@ interface ListItemCustomizeProps {
   tag?: TagProps
 }
 
-export const ListItemCustomize = (
-  props: ListItemCustomizeProps
-): JSX.Element => {
+export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
   const {
     header,
     leftHeaderItem,
@@ -44,7 +42,7 @@ export const ListItemCustomize = (
         width={onClick != null && linkText != null ? '40%' : '50%'}
         gridGap={SPACING.spacing8}
         alignItems={ALIGN_CENTER}
-        justifyContent="center"
+        justifyContent={JUSTIFY_CENTER}
       >
         {label != null ? (
           <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>

protocol-designer/src/assets/localization/en/create_new_protocol.json

@@ -31,11 +31,11 @@
   "stagingArea_cutoutD3": "Staging area D3",
   "swap": "Swap pipettes",
   "tell_us": "Tell us about your protocol",
-  "trashBin": "Trash bin",
+  "trashBin": "Trash Bin",
   "vol_label": "{{volume}} uL",
-  "wasteChute": "Waste chute",
+  "wasteChute": "Waste Chute",
   "which_fixtures": "Which fixtures will you be using?",
   "which_mods": "Select modules to use in your protocol.",
-  "which_pip": "Pick your first pipette. If you need a second pipette, you can add it next.",
+  "which_pipette": "Pick your first pipette. If you need a second pipette, you can add it next.",
   "your_pips": "Your pipettes"
 }

protocol-designer/src/assets/localization/en/shared.json

@@ -15,6 +15,8 @@
   "import_existing": "Import existing protocol",
   "import": "Import",
   "labware": "Labware",
+  "left_right": "Left+Right",
+  "left": "Left",
   "liquid": "Liquid",
   "module": "Module",
   "next": "next",
@@ -28,6 +30,7 @@
   "ot2": "Opentrons OT-2",
   "protocol_designer": "Protocol Designer",
   "remove": "remove",
+  "right": "Right",
   "slot_stack_information": "Slot Stack Information",
   "step_count": "Step {{current}}",
   "step": "Step {{current}} / {{max}}",

protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx

@@ -28,7 +28,7 @@ interface PipetteInfoItemProps {
   watch: UseFormWatch<WizardFormState>
 }
 
-export const PipetteInfoItem = (props: PipetteInfoItemProps): JSX.Element => {
+export function PipetteInfoItem(props: PipetteInfoItemProps): JSX.Element {
   const {
     mount,
     pipetteName,
@@ -40,7 +40,7 @@ export const PipetteInfoItem = (props: PipetteInfoItemProps): JSX.Element => {
   } = props
   const pipettesByMount = watch('pipettesByMount')
   const { t, i18n } = useTranslation('create_new_protocol')
-  const otherMount = mount === 'left' ? 'right' : 'left'
+  const oppositeMount = mount === 'left' ? 'right' : 'left'
   const allLabware = useSelector(getLabwareDefsByURI)
   const is96Channel = pipetteName === 'p1000_96'
   return (
@@ -53,7 +53,9 @@ export const PipetteInfoItem = (props: PipetteInfoItemProps): JSX.Element => {
         <Flex gridGap={SPACING.spacing4} flexDirection={DIRECTION_COLUMN}>
           <StyledText desktopStyle="bodyDefaultSemiBold">
             {i18n.format(
-              t('pip', { mount: is96Channel ? 'Left+Right' : mount }),
+              t('pip', {
+                mount: is96Channel ? t('left_right') : t(`${mount}`),
+              }),
               'capitalize'
             )}
           </StyledText>
@@ -84,7 +86,7 @@ export const PipetteInfoItem = (props: PipetteInfoItemProps): JSX.Element => {
               {t('edit')}
             </StyledText>
           </Btn>
-          {pipettesByMount[otherMount].pipetteName == null ? null : (
+          {pipettesByMount[oppositeMount].pipetteName == null ? null : (
             <Btn
               onClick={() => {
                 setValue(`pipettesByMount.${mount}.pipetteName`, undefined)

protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx

@@ -9,14 +9,15 @@ import {
   ListItemCustomize,
   SPACING,
   StyledText,
+  TYPOGRAPHY,
   WRAP,
 } from '@opentrons/components'
 import { WizardBody } from './WizardBody'
 import { AdditionalEquipmentDiagram } from './utils'
 
 import type { AdditionalEquipment, WizardTileProps } from './types'
 
-const ADDITIONAL_EQUIPMENT: AdditionalEquipment[] = [
+const ADDITIONAL_EQUIPMENTS: AdditionalEquipment[] = [
   'wasteChute',
   'trashBin',
   'stagingArea_cutoutA3',
@@ -31,7 +32,7 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
   const filteredAdditionalEquipmentWithoutGripper = additionalEquipment.filter(
     ae => ae !== 'gripper'
   )
-  const filteredAdditionalEquipment = ADDITIONAL_EQUIPMENT.filter(
+  const filteredAdditionalEquipment = ADDITIONAL_EQUIPMENTS.filter(
     equipment => !filteredAdditionalEquipmentWithoutGripper.includes(equipment)
   )
 
@@ -61,7 +62,7 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
           {filteredAdditionalEquipment.map(equipment => (
             <EmptySelectorButton
               key={equipment}
-              textAlignment="left"
+              textAlignment={TYPOGRAPHY.textAlignLeft}
               size="small"
               iconName="plus"
               text={t(`${equipment}`)}

protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx

@@ -9,6 +9,7 @@ import {
   ListItemCustomize,
   SPACING,
   StyledText,
+  TYPOGRAPHY,
   WRAP,
 } from '@opentrons/components'
 import {
@@ -132,7 +133,7 @@ export function SelectModules(props: WizardTileProps): JSX.Element | null {
               .map(moduleModel => (
                 <EmptySelectorButton
                   key={moduleModel}
-                  textAlignment="left"
+                  textAlignment={TYPOGRAPHY.textAlignLeft}
                   size="small"
                   iconName="plus"
                   text={getModuleDisplayName(moduleModel)}

protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx

@@ -83,7 +83,7 @@ export function SelectPipettes(props: WizardTileProps): JSX.Element | null {
     <WizardBody
       stepNumber={2}
       header={page === 'add' ? t('add_pip') : t('robot_pips')}
-      subHeader={page === 'add' ? t('which_pip') : undefined}
+      subHeader={page === 'add' ? t('which_pipette') : undefined}
       proceed={() => {
         if (page === 'overview') {
           proceed(1)

protocol-designer/src/pages/CreateNewProtocolWizard/utils.tsx

@@ -10,6 +10,7 @@ import stagingAreaImage from '../../images/staging_area.png'
 import type { AdditionalEquipment, WizardFormState } from './types'
 
 const TOTAL_MODULE_SLOTS = 8
+const MIDDLE_SLOT_NUM = 4
 
 export const getNumSlotsAvailable = (
   modules: WizardFormState['modules'],
@@ -31,7 +32,8 @@ export const getNumSlotsAvailable = (
   if (magneticBlocks.length > 0) {
     //  once blocks exceed 4, then we dont' want to subtract the amount available
     //  because block can go into the center slots where all other modules/trashes can not
-    const numBlocks = magneticBlocks.length > 4 ? 4 : magneticBlocks.length
+    const numBlocks =
+      magneticBlocks.length > 4 ? MIDDLE_SLOT_NUM : magneticBlocks.length
     filteredModuleLength = filteredModuleLength - numBlocks
   }