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 }