diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx
index a9ef84c9f7a8..9a2482d3f008 100644
--- a/components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx
+++ b/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 ? (
diff --git a/protocol-designer/src/assets/localization/en/create_new_protocol.json b/protocol-designer/src/assets/localization/en/create_new_protocol.json
index 0f3a91c0672b..8cfcd3a34007 100644
--- a/protocol-designer/src/assets/localization/en/create_new_protocol.json
+++ b/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"
}
diff --git a/protocol-designer/src/assets/localization/en/shared.json b/protocol-designer/src/assets/localization/en/shared.json
index 1ffd1668da78..cf238a156cfd 100644
--- a/protocol-designer/src/assets/localization/en/shared.json
+++ b/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}}",
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx
index b4c10ba201fd..311c3a932eec 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/PipetteInfoItem.tsx
@@ -28,7 +28,7 @@ interface PipetteInfoItemProps {
watch: UseFormWatch
}
-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 => {
{i18n.format(
- t('pip', { mount: is96Channel ? 'Left+Right' : mount }),
+ t('pip', {
+ mount: is96Channel ? t('left_right') : t(`${mount}`),
+ }),
'capitalize'
)}
@@ -84,7 +86,7 @@ export const PipetteInfoItem = (props: PipetteInfoItemProps): JSX.Element => {
{t('edit')}
- {pipettesByMount[otherMount].pipetteName == null ? null : (
+ {pipettesByMount[oppositeMount].pipetteName == null ? null : (
{
setValue(`pipettesByMount.${mount}.pipetteName`, undefined)
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx
index eed37aeb3bab..552a06f67dd5 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx
+++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx
@@ -9,6 +9,7 @@ import {
ListItemCustomize,
SPACING,
StyledText,
+ TYPOGRAPHY,
WRAP,
} from '@opentrons/components'
import { WizardBody } from './WizardBody'
@@ -16,7 +17,7 @@ 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 => (
(
{
if (page === 'overview') {
proceed(1)
diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/utils.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/utils.tsx
index 0d8aa48856c9..459d64753e77 100644
--- a/protocol-designer/src/pages/CreateNewProtocolWizard/utils.tsx
+++ b/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
}