From fec1a98acf387cda453167d1ebc97ac232186f3c Mon Sep 17 00:00:00 2001 From: Seth Foster Date: Fri, 21 Jun 2024 12:54:07 -0400 Subject: [PATCH] feat(components): add helix product typography (#15459) This PR implements the new helix product typography system. You can find it here: https://www.figma.com/design/1ot18My22DALIcjdLl5LJh/Helix-Design-System?node-id=3571-46578&t=B4pPbtL9mapki2Jg-4 The Product type system is distinct from at least the Web type system, which will have different styles for readability in a different context. It is currently only defined for places other than the ODD. This ended up being a big PR because our usage of the `StyledText` atom had to be changed somewhat. The change was necessary because the helix product styles do not and are not intended to align with the semantic styling presented by the `StyledText` component - there is no direct alignment that "when you're making a `

`, you use this style". Instead, the intent is that higher level components will use the style by the name it has in helix, without an explicit semantic link outside of the designs. That makes the way the old styled text works kind of nonsense. In addition, there are no helix product styles for the ODD, and there is no current map and possibly no intention to have a future map between the semantic styles of the ODD and Desktop. That means that having a `StyledText` component that maps from a single semantic element to a set of appropriate styles just doesn't really make sense. So, `StyledText` is renamed to `LegacyStyledText` including at all callsites. The new `StyledText` requires you to specify styles separately for ODD and Desktop, though it gives you a handy type system integrated hint towards which styles should be allowed. Well, not quite required, more like you have no way to specify both in one prop. You can view it commit by commit: - https://github.com/Opentrons/opentrons/pull/15459/commits/07dae4b338d5b0966fc186fa27a944005a2e3fda adds the actual data for the helix product typography styling, and stories for viewing them as design components (and for viewing the old typography styles). This is more or less the only commit there was during the initial review, though it didn't then have the stories for the old typography - https://github.com/Opentrons/opentrons/pull/15459/commits/a36f50178c93d95f9cf86610fe8313ae643afdaa is a repo-wide find and replace to change `StyledText` to `LegacyStyledText` - https://github.com/Opentrons/opentrons/pull/15459/commits/acec9340bcc955921c5007eb388ffec06ce6ac3c implements the new `StyledText`. Stories here: https://s3-us-west-2.amazonaws.com/opentrons-components/EXEC-566-add-helix-product-typography/index.html?path=/docs/design-tokens-typography--docs Closes EXEC-566 --- app/src/App/DesktopAppFallback.tsx | 10 +- app/src/App/Navbar.tsx | 6 +- app/src/App/OnDeviceDisplayAppFallback.tsx | 6 +- .../BorderRadius/BorderRadius.stories.tsx | 6 +- .../DesignTokens/Colors/Colors.stories.tsx | 10 +- .../DesignTokens/Spacing/Spacing.stories.tsx | 6 +- .../Typography/Typography.stories.tsx | 230 +++++++++++++++ app/src/atoms/Banner/Banner.stories.tsx | 9 +- app/src/atoms/GlobalStyle/index.ts | 4 +- app/src/atoms/InlineNotification/index.tsx | 6 +- app/src/atoms/InputField/index.tsx | 14 +- app/src/atoms/InstrumentContainer/index.tsx | 6 +- .../Interstitial/InterstitiallTitleBar.tsx | 6 +- app/src/atoms/ListItem/ListItem.stories.tsx | 14 +- app/src/atoms/MenuList/DropdownMenu.tsx | 14 +- .../atoms/ProgressBar/ProgressBar.stories.tsx | 6 +- app/src/atoms/SelectField/index.tsx | 6 +- .../atoms/Slideout/MultiSlideout.stories.tsx | 10 +- app/src/atoms/Slideout/Slideout.stories.tsx | 10 +- app/src/atoms/Slideout/index.tsx | 10 +- app/src/atoms/Snackbar/Snackbar.stories.tsx | 10 +- app/src/atoms/Snackbar/index.tsx | 6 +- app/src/atoms/StatusLabel/index.tsx | 6 +- app/src/atoms/Toast/ODDToast.stories.tsx | 10 +- app/src/atoms/Toast/Toast.stories.tsx | 10 +- app/src/atoms/Toast/index.tsx | 12 +- .../atoms/buttons/FloatingActionButton.tsx | 4 +- app/src/atoms/buttons/LargeButton.tsx | 10 +- app/src/atoms/buttons/MediumButton.tsx | 6 +- app/src/atoms/buttons/RadioButton.tsx | 10 +- app/src/atoms/buttons/SmallButton.tsx | 6 +- app/src/atoms/buttons/buttons.stories.tsx | 6 +- app/src/atoms/structure/Divider.stories.tsx | 24 +- app/src/atoms/structure/Line.stories.tsx | 24 +- .../BackgroundOverlay.stories.tsx | 6 +- app/src/molecules/CardButton/index.tsx | 10 +- .../molecules/CollapsibleSection/index.tsx | 9 +- app/src/molecules/Command/CommandText.tsx | 104 +++---- app/src/molecules/FileUpload/index.tsx | 10 +- .../GenericWizardTile.stories.tsx | 16 +- app/src/molecules/GenericWizardTile/index.tsx | 6 +- .../InProgressModal/InProgressModal.tsx | 10 +- app/src/molecules/InfoMessage/index.tsx | 10 +- app/src/molecules/InstrumentCard/index.tsx | 8 +- .../InterventionModal.stories.tsx | 16 +- .../InterventionStep/Move.tsx | 4 +- .../ModalContentOneColSimpleButtons.tsx | 6 +- .../InterventionModal/OneColumn.stories.tsx | 6 +- .../InterventionModal/TwoColumn.stories.tsx | 4 +- .../JogControls/ControlContainer.tsx | 6 +- .../JogControls/DirectionControl.tsx | 10 +- .../molecules/JogControls/StepSizeControl.tsx | 22 +- .../LegacyModal/LegacyModal.stories.tsx | 10 +- .../LegacyModal/LegacyModalHeader.tsx | 6 +- .../molecules/MiniCard/MiniCard.stories.tsx | 6 +- app/src/molecules/Modal/ModalHeader.tsx | 6 +- .../molecules/Modal/SmallModalChildren.tsx | 10 +- .../ModuleIcon/ModuleIcon.stories.tsx | 4 +- app/src/molecules/ODDBackButton/index.tsx | 6 +- app/src/molecules/OffsetVector/index.tsx | 33 ++- app/src/molecules/ReleaseNotes/index.tsx | 10 +- app/src/molecules/SimpleWizardBody/index.tsx | 8 +- app/src/molecules/UnorderedList/index.tsx | 4 +- .../UploadInput/UploadInput.stories.tsx | 8 +- .../__tests__/UploadInput.test.tsx | 4 +- app/src/molecules/UploadInput/index.tsx | 6 +- app/src/molecules/WizardHeader/index.tsx | 17 +- .../WizardRequiredEquipmentList/index.tsx | 24 +- .../AddCustomLabwareSlideout/index.tsx | 6 +- .../AdditionalCustomLabwareSourceFolder.tsx | 16 +- .../ClearUnavailableRobots.tsx | 14 +- .../AdvancedSettings/EnableDevTools.tsx | 10 +- .../AdvancedSettings/OT2AdvancedSettings.tsx | 10 +- .../AdvancedSettings/OverridePathToPython.tsx | 16 +- .../AdvancedSettings/PreventRobotCaching.tsx | 12 +- .../ShowHeaterShakerAttachmentModal.tsx | 10 +- .../ShowLabwareOffsetSnippets.tsx | 10 +- .../AdvancedSettings/U2EInformation.tsx | 42 +-- .../AdvancedSettings/UpdatedChannel.tsx | 18 +- .../AppSettings/ConnectRobotSlideout.tsx | 22 +- .../organisms/AppSettings/FeatureFlags.tsx | 6 +- .../AppSettings/ManualIpHostnameForm.tsx | 6 +- .../AppSettings/ManualIpHostnameItem.tsx | 10 +- .../AppSettings/PreviousVersionModal.tsx | 6 +- .../organisms/ApplyHistoricOffsets/index.tsx | 15 +- .../AskForCalibrationBlockModal.tsx | 14 +- .../CalibrationPanels/ChooseTipRack.tsx | 20 +- .../CalibrationPanels/ChosenTipRackRender.tsx | 6 +- .../CompleteConfirmation.tsx | 10 +- .../ConfirmCrashRecovery.tsx | 14 +- .../CalibrationPanels/ConfirmExit.tsx | 10 +- .../organisms/CalibrationPanels/DeckSetup.tsx | 22 +- .../CalibrationPanels/Introduction/Body.tsx | 18 +- .../Introduction/InvalidationWarning.tsx | 19 +- .../CalibrationPanels/Introduction/index.tsx | 6 +- .../CalibrationPanels/LoadingState.tsx | 8 +- .../CalibrationPanels/MeasureNozzle.tsx | 10 +- .../CalibrationPanels/MeasureTip.tsx | 10 +- .../CalibrationPanels/SaveXYPoint.tsx | 10 +- .../CalibrationPanels/SaveZPoint.tsx | 10 +- .../CalibrationPanels/TipConfirmation.tsx | 6 +- .../organisms/CalibrationPanels/TipPickUp.tsx | 10 +- .../useConfirmCrashRecovery.tsx | 4 +- .../organisms/CalibrationStatusCard/index.tsx | 10 +- .../organisms/CalibrationTaskList/index.tsx | 10 +- .../ChangePipette/CheckPipettesButton.tsx | 6 +- .../ChangePipette/ClearDeckModal.tsx | 6 +- .../organisms/ChangePipette/Instructions.tsx | 16 +- .../organisms/ChangePipette/LevelPipette.tsx | 6 +- .../ChangePipette/PipetteSelection.tsx | 9 +- app/src/organisms/ChangePipette/index.tsx | 6 +- .../CalibrationHealthCheckResults.tsx | 6 +- .../ResultsSummary/CalibrationResult.tsx | 6 +- .../ResultsSummary/RenderMountInformation.tsx | 15 +- .../ResultsSummary/RenderResult.tsx | 6 +- .../organisms/CheckCalibration/ReturnTip.tsx | 6 +- app/src/organisms/ChildNavigation/index.tsx | 6 +- .../ChooseProtocolSlideout/index.tsx | 50 ++-- .../AvailableRobotOption.tsx | 14 +- .../ChooseRobotSlideout/FileCard.tsx | 10 +- .../organisms/ChooseRobotSlideout/index.tsx | 42 +-- .../ConfigurePipette/ConfigFormGroup.tsx | 13 +- .../ConfigFormResetButton.tsx | 4 +- .../AddFixtureModal.tsx | 24 +- .../DeckConfigurationDiscardChangesModal.tsx | 6 +- .../DeckFixtureSetupInstructionsModal.tsx | 18 +- .../DeviceDetailsDeckConfiguration/index.tsx | 28 +- .../Devices/CalibrationStatusBanner.tsx | 10 +- .../ConnectionTroubleshootingModal.tsx | 16 +- .../organisms/Devices/DevicesEmptyState.tsx | 6 +- app/src/organisms/Devices/EstopBanner.tsx | 8 +- .../HeaterShakerIsRunningModal/index.tsx | 6 +- .../HeaterShakerModuleCard.tsx | 10 +- .../Devices/HistoricalProtocolRun.tsx | 22 +- .../HistoricalProtocolRunOffsetDrawer.tsx | 34 ++- .../Devices/InstrumentsAndModules.tsx | 10 +- app/src/organisms/Devices/ModuleInfo.tsx | 14 +- .../PipetteCard/AboutPipetteSlideout.tsx | 18 +- .../Devices/PipetteCard/FlexPipetteCard.tsx | 8 +- .../PipetteRecalibrationWarning.tsx | 13 +- .../organisms/Devices/PipetteCard/index.tsx | 10 +- .../Devices/ProtocolRun/EmptySetupStep.tsx | 18 +- .../ProtocolRun/LabwareInfoOverlay.tsx | 10 +- .../ProtocolAnalysisErrorBanner.tsx | 14 +- .../ProtocolAnalysisErrorModal.tsx | 14 +- .../ProtocolRun/ProtocolDropTipBanner.tsx | 14 +- .../Devices/ProtocolRun/ProtocolRunHeader.tsx | 31 +- .../ProtocolRunRunTimeParameters.tsx | 32 +- .../Devices/ProtocolRun/ProtocolRunSetup.tsx | 14 +- .../Devices/ProtocolRun/RunFailedModal.tsx | 14 +- .../Devices/ProtocolRun/RunTimer.tsx | 10 +- .../ProtocolRun/SetupCalibrationItem.tsx | 16 +- .../ProtocolRun/SetupDeckCalibration.tsx | 6 +- .../SetupInstrumentCalibration.tsx | 6 +- .../SetupLabware/LabwareListItem.tsx | 45 +-- .../SetupLabware/OffDeckLabwareList.tsx | 6 +- .../SetupLabware/SecureLabwareModal.tsx | 8 +- .../SetupLabware/SetupLabwareList.tsx | 14 +- .../CurrentOffsetsTable.tsx | 6 +- .../HowLPCWorksModal.tsx | 10 +- .../SetupLabwarePositionCheck/index.tsx | 6 +- .../SetupLiquids/LiquidDetailCard.tsx | 45 +-- .../LiquidsLabwareDetailsModal.tsx | 18 +- .../SetupLiquids/SetupLiquidsList.tsx | 42 +-- .../ChooseModuleToConfigureModal.tsx | 25 +- .../LocationConflictModal.tsx | 59 ++-- .../SetupModuleAndDeck/NotConfiguredModal.tsx | 10 +- .../OT2MultipleModulesHelp.tsx | 24 +- .../SetupModuleAndDeck/SetupFixtureList.tsx | 18 +- .../SetupModuleAndDeck/SetupModulesList.tsx | 30 +- .../UnMatchedModuleWarning.tsx | 10 +- .../ProtocolRun/SetupModuleAndDeck/index.tsx | 14 +- .../Devices/ProtocolRun/SetupStep.tsx | 14 +- .../ProtocolRun/SetupTipLengthCalibration.tsx | 6 +- .../organisms/Devices/RecentProtocolRuns.tsx | 30 +- app/src/organisms/Devices/RobotCard.tsx | 10 +- app/src/organisms/Devices/RobotOverview.tsx | 10 +- .../AdvancedTabSlideouts/DeviceResetModal.tsx | 10 +- .../DeviceResetSlideout.tsx | 41 +-- .../FactoryModeSlideout.tsx | 30 +- .../RenameRobotSlideout.tsx | 14 +- .../RobotSettings/AdvancedTab/DeviceReset.tsx | 10 +- .../AdvancedTab/DisplayRobotName.tsx | 14 +- .../AdvancedTab/EnableStatusLight.tsx | 10 +- .../RobotSettings/AdvancedTab/FactoryMode.tsx | 6 +- .../AdvancedTab/GantryHoming.tsx | 10 +- .../AdvancedTab/LegacySettings.tsx | 14 +- .../AdvancedTab/OpenJupyterControl.tsx | 10 +- .../AdvancedTab/RobotInformation.tsx | 24 +- .../AdvancedTab/RobotServerVersion.tsx | 22 +- .../AdvancedTab/ShortTrashBin.tsx | 10 +- .../AdvancedTab/Troubleshooting.tsx | 10 +- .../AdvancedTab/UpdateRobotSoftware.tsx | 10 +- .../AdvancedTab/UsageSettings.tsx | 14 +- .../AdvancedTab/UseOlderAspirateBehavior.tsx | 10 +- .../ConnectNetwork/ConnectModal/FormModal.tsx | 4 +- .../ConnectNetwork/DisconnectModal.tsx | 14 +- .../RobotSettings/RobotSettingsAdvanced.tsx | 11 +- .../RobotSettingsFeatureFlags.tsx | 11 +- .../RobotSettings/RobotSettingsNetworking.tsx | 77 ++--- .../Devices/RobotSettings/SettingToggle.tsx | 11 +- .../RobotUpdateProgressModal.tsx | 12 +- .../organisms/Devices/RobotStatusHeader.tsx | 14 +- .../DropTipWizardFlows/BeforeBeginning.tsx | 10 +- .../DropTipWizardFlows/ChooseLocation.tsx | 19 +- .../DropTipWizardFlows/DropTipWizard.tsx | 4 +- .../DropTipWizardFlows/JogToPosition.tsx | 8 +- .../DropTipWizardFlows/TipsAttachedModal.tsx | 6 +- .../EmergencyStop/EstopMissingModal.tsx | 18 +- .../EmergencyStop/EstopPressedModal.tsx | 14 +- .../ErrorRecoveryFlows/BeforeBeginning.tsx | 10 +- .../ErrorRecoveryWizard.tsx | 8 +- .../ErrorRecoveryFlows/RecoveryError.tsx | 6 +- .../RecoveryOptions/CancelRun.tsx | 14 +- .../RecoveryOptions/FillWellAndSkip.tsx | 4 +- .../RecoveryOptions/IgnoreErrorSkipStep.tsx | 6 +- .../RecoveryOptions/ManageTips.tsx | 6 +- .../RecoveryOptions/RetryNewTips.tsx | 4 +- .../RecoveryOptions/RetrySameTips.tsx | 4 +- .../RecoveryOptions/RetryStep.tsx | 4 +- .../RecoveryOptions/SelectRecoveryOption.tsx | 6 +- .../RecoveryOptions/SkipStepNewTips.tsx | 4 +- .../RecoveryOptions/SkipStepSameTips.tsx | 4 +- .../shared/FailedStepNextStep.tsx | 6 +- .../shared/LeftColumnLabwareInfo.tsx | 4 +- .../ErrorRecoveryFlows/shared/StepInfo.tsx | 8 +- .../TwoColTextAndFailedStepNextStep.tsx | 4 +- .../UpdateInProgressModal.tsx | 6 +- .../FirmwareUpdateModal/UpdateNeededModal.tsx | 6 +- .../UpdateResultsModal.tsx | 14 +- .../organisms/FirmwareUpdateModal/index.tsx | 6 +- .../GripperCard/AboutGripperSlideout.tsx | 18 +- app/src/organisms/GripperCard/index.tsx | 8 +- .../GripperWizardFlows/BeforeBeginning.tsx | 4 +- .../GripperWizardFlows/MountGripper.tsx | 10 +- .../organisms/GripperWizardFlows/MovePin.tsx | 11 +- .../GripperWizardFlows/UnmountGripper.tsx | 10 +- .../HowCalibrationWorksModal/index.tsx | 24 +- .../IncompatibleModuleDesktopModalBody.tsx | 10 +- .../IncompatibleModuleODDModalBody.tsx | 10 +- app/src/organisms/InstrumentInfo/index.tsx | 10 +- .../InstrumentMountItem/LabeledMount.tsx | 10 +- .../InterventionCommandMessage.tsx | 10 +- .../MoveLabwareInterventionContent.tsx | 10 +- .../PauseInterventionContent.tsx | 8 +- app/src/organisms/InterventionModal/index.tsx | 4 +- .../LabwareCard/CustomLabwareOverflowMenu.tsx | 14 +- app/src/organisms/LabwareCard/index.tsx | 32 +- .../LabwareDetails/InsertDetails.tsx | 6 +- .../LabwareDetails/ManufacturerDetails.tsx | 16 +- .../StyledComponents/ExpandingTitle.tsx | 6 +- .../StyledComponents/LabeledValue.tsx | 8 +- .../organisms/LabwareDetails/WellCount.tsx | 8 +- .../LabwareDetails/WellProperties.tsx | 14 +- app/src/organisms/LabwareDetails/index.tsx | 16 +- app/src/organisms/LabwareOffsetTabs/index.tsx | 8 +- .../LabwarePositionCheck/AttachProbe.tsx | 6 +- .../LabwarePositionCheck/CheckItem.tsx | 22 +- .../LabwarePositionCheck/DetachProbe.tsx | 6 +- .../LabwarePositionCheck/ExitConfirmation.tsx | 6 +- .../LabwarePositionCheck/FatalErrorModal.tsx | 10 +- .../IntroScreen/index.tsx | 15 +- .../LabwarePositionCheck/JogToWell.tsx | 6 +- .../LabwarePositionCheck/LiveOffsetValue.tsx | 12 +- .../LabwarePositionCheck/PickUpTip.tsx | 12 +- .../LabwarePositionCheck/ResultsSummary.tsx | 36 +-- .../LabwarePositionCheck/ReturnTip.tsx | 7 +- .../RobotMotionLoader.tsx | 4 +- .../LabwarePositionCheck/TipConfirmation.tsx | 6 +- .../ModuleCard/AboutModuleSlideout.tsx | 22 +- .../ModuleCard/AbsorbanceReaderData.tsx | 6 +- .../ModuleCard/AbsorbanceReaderSlideout.tsx | 6 +- app/src/organisms/ModuleCard/Collapsible.tsx | 4 +- .../ModuleCard/ConfirmAttachmentModal.tsx | 14 +- app/src/organisms/ModuleCard/ErrorInfo.tsx | 16 +- .../ModuleCard/FirmwareUpdateFailedModal.tsx | 12 +- .../ModuleCard/HeaterShakerModuleData.tsx | 49 ++-- .../ModuleCard/HeaterShakerSlideout.tsx | 10 +- .../ModuleCard/MagneticModuleData.tsx | 6 +- .../ModuleCard/MagneticModuleSlideout.tsx | 34 +-- .../organisms/ModuleCard/ModuleSetupModal.tsx | 6 +- .../ModuleCard/TemperatureModuleData.tsx | 10 +- .../ModuleCard/TemperatureModuleSlideout.tsx | 10 +- .../ModuleCard/TestShakeSlideout.tsx | 22 +- .../ModuleCard/ThermocyclerModuleData.tsx | 29 +- .../ModuleCard/ThermocyclerModuleSlideout.tsx | 10 +- app/src/organisms/ModuleCard/index.tsx | 18 +- .../ModuleWizardFlows/AttachProbe.tsx | 6 +- .../ModuleWizardFlows/BeforeBeginning.tsx | 4 +- .../ModuleWizardFlows/DetachProbe.tsx | 6 +- .../ModuleWizardFlows/PlaceAdapter.tsx | 14 +- .../ModuleWizardFlows/SelectLocation.tsx | 6 +- app/src/organisms/ModuleWizardFlows/index.tsx | 4 +- .../organisms/Navigation/NavigationMenu.tsx | 18 +- .../RestartRobotConfirmationModal.tsx | 4 +- .../AlternativeSecurityTypeModal.tsx | 6 +- .../NetworkSettings/ConnectingNetwork.tsx | 6 +- .../NetworkSettings/DisplaySearchNetwork.tsx | 6 +- .../NetworkSettings/DisplayWifiList.tsx | 6 +- .../NetworkSettings/FailedToConnect.tsx | 10 +- .../SelectAuthenticationType.tsx | 10 +- .../organisms/NetworkSettings/SetWifiCred.tsx | 11 +- .../organisms/NetworkSettings/SetWifiSsid.tsx | 6 +- .../NetworkSettings/WifiConnectionDetails.tsx | 6 +- .../NameRobot/ConfirmRobotName.tsx | 10 +- .../RobotDashboard/EmptyRecentRun.tsx | 10 +- .../RobotDashboard/RecentRunProtocolCard.tsx | 10 +- .../RobotDashboard/ServerInitializing.tsx | 6 +- .../RunningProtocol/CancelingRunModal.tsx | 6 +- .../RunningProtocol/ConfirmCancelRunModal.tsx | 10 +- .../CurrentRunningProtocolCommand.tsx | 12 +- .../RunningProtocol/RunFailedModal.tsx | 14 +- .../RunningProtocolCommandList.tsx | 10 +- .../organisms/OpenDoorAlertModal/index.tsx | 10 +- .../PipetteWizardFlows/AttachProbe.tsx | 17 +- .../PipetteWizardFlows/BeforeBeginning.tsx | 8 +- .../organisms/PipetteWizardFlows/Carriage.tsx | 7 +- .../PipetteWizardFlows/ChoosePipette.tsx | 12 +- .../PipetteWizardFlows/DetachPipette.tsx | 10 +- .../PipetteWizardFlows/DetachProbe.tsx | 6 +- .../PipetteWizardFlows/MountPipette.tsx | 6 +- .../PipetteWizardFlows/MountingPlate.tsx | 11 +- .../PipetteWizardFlows/ProbeNotAttached.tsx | 6 +- .../organisms/PipetteWizardFlows/Results.tsx | 6 +- .../ProtocolAnalysisStale.tsx | 10 +- .../ProtocolAnalysisFailure/index.tsx | 14 +- .../ProtocolLabwareDetails.tsx | 16 +- .../ProtocolLiquidsDetails.tsx | 6 +- .../ProtocolParameters/index.tsx | 13 +- .../ProtocolDetails/ProtocolStats.tsx | 14 +- .../RobotConfigurationDetails.tsx | 26 +- app/src/organisms/ProtocolDetails/index.tsx | 85 +++--- .../organisms/ProtocolSetupLabware/index.tsx | 41 +-- .../ProtocolSetupLiquids/LiquidDetails.tsx | 6 +- .../organisms/ProtocolSetupLiquids/index.tsx | 6 +- .../FixtureTable.tsx | 6 +- .../ModuleTable.tsx | 14 +- .../SetupInstructionsModal.tsx | 10 +- .../ProtocolSetupModulesAndDeck/index.tsx | 10 +- .../AnalysisFailedModal.tsx | 14 +- .../ProtocolSetupParameters/ChooseEnum.tsx | 6 +- .../ProtocolSetupParameters/ChooseNumber.tsx | 6 +- .../ProtocolSetupParameters/EmptyFile.tsx | 6 +- .../ResetValuesModal.tsx | 6 +- .../ViewOnlyParameters.tsx | 16 +- .../organisms/ProtocolStatusBanner/index.tsx | 4 +- .../ConfirmDeleteProtocolModal.tsx | 6 +- .../ProtocolsLanding/EmptyStateLinks.tsx | 18 +- .../ProtocolsLanding/ProtocolCard.tsx | 46 +-- .../ProtocolsLanding/ProtocolList.tsx | 12 +- .../ProtocolsLanding/ProtocolUploadInput.tsx | 6 +- .../ProtocolsLanding/ProtocolsEmptyState.tsx | 6 +- .../QuickTransferFlow/ConfirmExitModal.tsx | 6 +- .../QuickTransferFlow/CreateNewTransfer.tsx | 4 +- .../QuickTransferFlow/NameQuickTransfer.tsx | 10 +- .../organisms/QuickTransferFlow/Overview.tsx | 13 +- .../QuickTransferFlow/SaveOrRunModal.tsx | 6 +- .../QuickTransferFlow/SelectDestWells.tsx | 6 +- .../QuickTransferFlow/SelectPipette.tsx | 6 +- .../QuickTransferFlow/TipManagement/index.tsx | 13 +- .../CalibrationDataDownload.tsx | 12 +- .../ModuleCalibrationItems.tsx | 14 +- .../PipetteOffsetCalibrationItems.tsx | 26 +- .../TipLengthCalibrationItems.tsx | 18 +- .../CalibrationHealthCheck.tsx | 10 +- .../DeckCalibrationConfirmModal.tsx | 10 +- .../RobotSettingsDeckCalibration.tsx | 14 +- .../RobotSettingsGripperCalibration.tsx | 26 +- .../RobotSettingsModuleCalibration.tsx | 14 +- .../RobotSettingsPipetteOffsetCalibration.tsx | 14 +- .../RobotSettingsTipLengthCalibration.tsx | 6 +- .../RobotSettingsCalibration/index.tsx | 10 +- .../RobotSettingsDashboard/DeviceReset.tsx | 25 +- .../EthernetConnectionDetails.tsx | 14 +- .../NetworkSettings/NetworkDetailsModal.tsx | 10 +- .../NetworkSettings/WifiConnectionDetails.tsx | 24 +- .../NetworkSettings/index.tsx | 10 +- .../RobotSettingsDashboard/Privacy.tsx | 6 +- .../RobotSettingsDashboard/RobotName.tsx | 6 +- .../RobotSystemVersion.tsx | 12 +- .../RobotSettingsDashboard/TextSize.tsx | 13 +- .../RobotSettingsDashboard/UpdateChannel.tsx | 14 +- app/src/organisms/RobotSetupHeader/index.tsx | 6 +- .../RunDetails/ConfirmCancelModal.tsx | 10 +- app/src/organisms/RunPreview/index.tsx | 26 +- app/src/organisms/RunProgressMeter/Tick.tsx | 16 +- app/src/organisms/RunProgressMeter/index.tsx | 11 +- .../organisms/TakeoverModal/TakeoverModal.tsx | 18 +- app/src/organisms/TaskList/index.tsx | 29 +- app/src/organisms/UpdateAppModal/index.tsx | 6 +- app/src/organisms/UpdateRobotBanner/index.tsx | 6 +- .../UpdateRobotSoftware/CheckUpdates.tsx | 6 +- .../CompleteUpdateSoftware.tsx | 10 +- .../ErrorUpdateSoftware.tsx | 10 +- .../UpdateRobotSoftware/NoUpdateFound.tsx | 6 +- .../UpdateRobotSoftware/UpdateSoftware.tsx | 10 +- .../WellSelection/Selection384Wells.tsx | 14 +- app/src/pages/AppSettings/GeneralSettings.tsx | 34 ++- app/src/pages/AppSettings/PrivacySettings.tsx | 13 +- app/src/pages/AppSettings/index.tsx | 6 +- .../DisplayConnectionStatus.tsx | 10 +- .../pages/ConnectViaEthernet/TitleHeader.tsx | 6 +- app/src/pages/ConnectViaUSB/index.tsx | 36 ++- .../DevicesLanding/NewRobotSetupHelp.tsx | 6 +- .../pages/Devices/DevicesLanding/index.tsx | 8 +- .../Devices/ProtocolRunDetails/index.tsx | 6 +- app/src/pages/Devices/RobotSettings/index.tsx | 6 +- app/src/pages/EmergencyStop/index.tsx | 17 +- .../InstrumentDetailOverflowMenu.tsx | 10 +- .../PipetteRecalibrationODDWarning.tsx | 6 +- app/src/pages/Labware/index.tsx | 18 +- app/src/pages/NameRobot/index.tsx | 21 +- app/src/pages/NetworkSetupMenu/index.tsx | 10 +- .../ProtocolDashboard/LongPressModal.tsx | 14 +- .../pages/ProtocolDashboard/NoProtocols.tsx | 10 +- .../ProtocolDashboard/PinnedProtocol.tsx | 12 +- .../pages/ProtocolDashboard/ProtocolCard.tsx | 24 +- app/src/pages/ProtocolDashboard/index.tsx | 6 +- .../pages/ProtocolDetails/EmptySection.tsx | 6 +- app/src/pages/ProtocolDetails/Hardware.tsx | 16 +- app/src/pages/ProtocolDetails/Labware.tsx | 18 +- app/src/pages/ProtocolDetails/Liquids.tsx | 10 +- app/src/pages/ProtocolDetails/Parameters.tsx | 14 +- app/src/pages/ProtocolDetails/index.tsx | 26 +- .../ProtocolSetup/ConfirmAttachedModal.tsx | 6 +- app/src/pages/ProtocolSetup/index.tsx | 25 +- .../RobotDashboard/AnalyticsOptInModal.tsx | 6 +- app/src/pages/RobotDashboard/WelcomeModal.tsx | 10 +- app/src/pages/RobotDashboard/index.tsx | 6 +- .../RobotSettingButton.tsx | 10 +- .../RobotSettingsList.tsx | 13 +- app/src/pages/Welcome/index.tsx | 10 +- components/src/atoms/Checkbox/index.tsx | 6 +- components/src/atoms/Chip/index.tsx | 9 +- .../StyledText/LegacyStyledText.stories.tsx | 107 +++++++ .../{index.tsx => LegacyStyledText.tsx} | 6 +- .../atoms/StyledText/StyledText.stories.tsx | 98 ++----- .../src/atoms/StyledText/StyledText.tsx | 275 ++++++++++++++++++ .../StyledText/__tests__/StyledText.test.tsx | 8 +- components/src/atoms/StyledText/index.ts | 2 + components/src/atoms/Tag/index.tsx | 4 +- components/src/helix-design-system/index.ts | 1 + .../src/helix-design-system/product/index.ts | 1 + .../helix-design-system/product/typography.ts | 142 +++++++++ components/src/instrument/InstrumentInfo.tsx | 26 +- components/src/lists/TitledList.tsx | 10 +- .../molecules/ParametersTable/InfoScreen.tsx | 6 +- .../src/molecules/ParametersTable/index.tsx | 14 +- components/src/molecules/RoundTab.stories.tsx | 22 +- components/src/primitives/Flex.stories.tsx | 10 +- .../components/sections/StackingOffsets.tsx | 16 +- .../src/molecules/ChatDisplay/index.tsx | 14 +- .../src/molecules/ChatFooter/index.tsx | 6 +- .../src/molecules/InputPrompt/index.tsx | 4 +- .../src/molecules/Loading/index.tsx | 4 +- .../molecules/PrimaryFloatingButton/index.tsx | 6 +- .../src/molecules/PromptGuide/index.tsx | 34 ++- .../src/molecules/SidePanel/index.tsx | 18 +- .../organisms/MainContentContainer/index.tsx | 4 +- .../TipPositionField/TipPositionModal.tsx | 14 +- .../CreateFileWizard/EquipmentOption.tsx | 6 +- .../FilePipettesModal/TiprackOption.tsx | 4 +- 462 files changed, 3850 insertions(+), 2697 deletions(-) create mode 100644 app/src/DesignTokens/Typography/Typography.stories.tsx create mode 100644 components/src/atoms/StyledText/LegacyStyledText.stories.tsx rename components/src/atoms/StyledText/{index.tsx => LegacyStyledText.tsx} (93%) create mode 100644 components/src/atoms/StyledText/StyledText.tsx create mode 100644 components/src/atoms/StyledText/index.ts create mode 100644 components/src/helix-design-system/product/index.ts create mode 100644 components/src/helix-design-system/product/typography.ts diff --git a/app/src/App/DesktopAppFallback.tsx b/app/src/App/DesktopAppFallback.tsx index beca77227ca..03c5c367b3c 100644 --- a/app/src/App/DesktopAppFallback.tsx +++ b/app/src/App/DesktopAppFallback.tsx @@ -13,7 +13,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -45,12 +45,12 @@ export function DesktopAppFallback({ error }: FallbackProps): JSX.Element { > - + {t('error_boundary_desktop_app_description')} - - + + {error.message} - + {navRoutes.map(({ name, navLinkTo }: RouteProps) => ( - {name} - + ))} diff --git a/app/src/App/OnDeviceDisplayAppFallback.tsx b/app/src/App/OnDeviceDisplayAppFallback.tsx index 5c9735fb736..c5509cd60c9 100644 --- a/app/src/App/OnDeviceDisplayAppFallback.tsx +++ b/app/src/App/OnDeviceDisplayAppFallback.tsx @@ -14,7 +14,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { MediumButton } from '../atoms/buttons' @@ -59,9 +59,9 @@ export function OnDeviceDisplayAppFallback({ alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_CENTER} > - + {t('branded:error_boundary_description')} - + = args => { width="100%" height="6rem" > - + {`${br[0]}" ${br[1]}`} - + = args => { border: `1px solid ${COLORS.grey20}`, }} > - {color[0]} - - + {color[1]} - + ))} diff --git a/app/src/DesignTokens/Spacing/Spacing.stories.tsx b/app/src/DesignTokens/Spacing/Spacing.stories.tsx index 88f055e39ea..5a0d0d4da81 100644 --- a/app/src/DesignTokens/Spacing/Spacing.stories.tsx +++ b/app/src/DesignTokens/Spacing/Spacing.stories.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -44,9 +44,9 @@ const Template: Story = args => { width="100%" height="6rem" > - + {`${spacing[0]} - ${spacing[1]}: ${convertToPx(spacing[1])}`} - + { + const pxVal = Number(remFormat.replace('rem', '')) * 16 + return `${pxVal}px` +} +const styleForPairForHelix = (style: string, weight: string): string => { + const fontPayload = PRODUCT.TYPOGRAPHY[`fontStyle${style}${weight}`] + return css` + font: ${fontPayload}; + ` +} +const fontSizeForPairForHelix = (style: string, weight: string): string => { + const fontSize = PRODUCT.TYPOGRAPHY[`fontSize${style}${weight}`] as string + const fontSizeInPx = convertToPx(fontSize) + return `font-size: ${fontSize}/${fontSizeInPx}` +} +const lineHeightForPairForHelix = (style: string, weight: string): string => { + const lineHeight = PRODUCT.TYPOGRAPHY[`lineHeight${style}${weight}`] as string + const lineHeightInPx = convertToPx(lineHeight) + return `line-height: ${lineHeight}/${lineHeightInPx}` +} +const fontWeightForPairForHelix = (style: string, weight: string): string => { + const fontWeight = PRODUCT.TYPOGRAPHY[`fontWeight${style}${weight}`] + return `font-weight: ${fontWeight}` +} + +const styleForPairForLegacy = (style: string, weight: string): string => { + return TYPOGRAPHY[`${style}${weight}`] +} + +const fontSizeForPairForLegacy = (style: string, weight: string): string => { + const stylePayload = styleForPairForLegacy(style, weight) + const sizeStr = valueFromFlattenedInterp(stylePayload, 'font-size:') + const sizeInPx = convertToPx(sizeStr) + + return `font-size: ${sizeStr}/${sizeInPx}` +} + +const lineHeightForPairForLegacy = (style: string, weight: string): string => { + const stylePayload = styleForPairForLegacy(style, weight) + const sizeStr = valueFromFlattenedInterp(stylePayload, 'line-height:') + const sizeInPx = convertToPx(sizeStr) + return `line-height: ${sizeStr}/${sizeInPx}` +} + +const fontWeightForPairForLegacy = (style: string, weight: string): string => { + const stylePayload = styleForPairForLegacy(style, weight) + const fontWeight = valueFromFlattenedInterp(stylePayload, 'font-weight:') + return `font-weight: ${fontWeight}` +} + +const valueFromFlattenedInterp = ( + style: FlattenSimpleInterpolation, + valueName: str +): string => { + return style.reduce( + ([sawKey, value]: [boolean, null | string], el) => { + const thisEl = el.trim() + if (sawKey && value == null) { + return [sawKey, el] + } + if (sawKey && value != null) { + return [sawKey, value] + } + if (thisEl.includes(valueName)) { + return [true, null] + } + return [false, null] + }, + [false, null] + )[1] +} + +const styleForPair = ( + style: string, + weight: string, + which: TypographyStandard +): string => + which === 'Helix Product (Desktop)' + ? styleForPairForHelix(style, weight) + : styleForPairForLegacy(style, weight) + +const fontSizeForPair = ( + style: string, + weight: string, + which: TypographyStandard +): string => + which === 'Helix Product (Desktop)' + ? fontSizeForPairForHelix(style, weight) + : fontSizeForPairForLegacy(style, weight) + +const lineHeightForPair = ( + style: string, + weight: string, + which: TypographyStandard +): string => + which === 'Helix Product (Desktop)' + ? lineHeightForPairForHelix(style, weight) + : lineHeightForPairForLegacy(style, weight) + +const fontWeightForPair = ( + style: string, + weight: string, + which: TypographyStandard +): string => + which === 'Helix Product (Desktop)' + ? fontWeightForPairForHelix(style, weight) + : fontWeightForPairForLegacy(style, weight) + +const Template: Story = args => { + const fonts = fontStyles[args.styles] + return ( + + {fonts.map(([style, weight]) => ( + + + {`${style} ${weight} (${fontWeightForPair( + style, + weight, + args.styles + )}, ${fontSizeForPair( + style, + weight, + args.styles + )}, ${lineHeightForPair(style, weight, args.styles)}): ${ + args.text + }`} + + + ))} + + ) +} + +export const AllTypographyStyles = Template.bind({}) +AllTypographyStyles.args = { + text: 'The quick brown fox jumped over the lazy dog.', + styles: 'Helix Product (Desktop)', +} diff --git a/app/src/atoms/Banner/Banner.stories.tsx b/app/src/atoms/Banner/Banner.stories.tsx index d8b6b648900..de756b10de6 100644 --- a/app/src/atoms/Banner/Banner.stories.tsx +++ b/app/src/atoms/Banner/Banner.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { StyledText, TYPOGRAPHY } from '@opentrons/components' +import { LegacyStyledText, TYPOGRAPHY } from '@opentrons/components' import { Banner } from './index' import type { Meta, StoryObj } from '@storybook/react' @@ -35,9 +35,12 @@ export const OverriddenExitIcon: Story = { console.log('close') }, closeButton: ( - + {'Exit'} - + ), }, } diff --git a/app/src/atoms/GlobalStyle/index.ts b/app/src/atoms/GlobalStyle/index.ts index 47cf6bfcfcc..069f28eecbc 100644 --- a/app/src/atoms/GlobalStyle/index.ts +++ b/app/src/atoms/GlobalStyle/index.ts @@ -1,5 +1,5 @@ import { createGlobalStyle } from 'styled-components' -import { COLORS } from '@opentrons/components' +import { COLORS, PRODUCT } from '@opentrons/components' import 'typeface-open-sans' import '@fontsource/dejavu-sans' import '@fontsource/public-sans' @@ -15,7 +15,7 @@ export const GlobalStyle = createGlobalStyle<{}>` box-sizing: border-box; margin: 0; padding: 0; - font-family: 'Public Sans', 'DejaVu Sans', sans-serif; + font-family: ${PRODUCT.TYPOGRAPHY.fontFamily}, 'DejaVu Sans', sans-serif; } html, diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx index f491ced14ce..a9b5fe7b9ad 100644 --- a/app/src/atoms/InlineNotification/index.tsx +++ b/app/src/atoms/InlineNotification/index.tsx @@ -9,7 +9,7 @@ import { Icon, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -81,7 +81,7 @@ export function InlineNotification( > - {message != null && fullmessage} - + {onCloseClick && ( ( {title != null ? ( - {title} - + {tooltipText != null ? ( <> @@ -299,18 +299,18 @@ export const InputField = React.forwardRef( {props.caption != null ? ( - {props.caption} - + ) : null} {hasError ? ( - + {props.error} - + ) : null} diff --git a/app/src/atoms/InstrumentContainer/index.tsx b/app/src/atoms/InstrumentContainer/index.tsx index 075023a64e1..3efb742fa76 100644 --- a/app/src/atoms/InstrumentContainer/index.tsx +++ b/app/src/atoms/InstrumentContainer/index.tsx @@ -5,7 +5,7 @@ import { COLORS, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' interface InstrumentContainerProps { @@ -26,9 +26,9 @@ export const InstrumentContainer = ( paddingY={SPACING.spacing2} width="max-content" > - + {displayName} - + ) } diff --git a/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx b/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx index 233fe67f8d1..00c77a8c1cb 100644 --- a/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx +++ b/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx @@ -9,7 +9,7 @@ import { JUSTIFY_SPACE_BETWEEN, POSITION_ABSOLUTE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -65,7 +65,7 @@ export function InterstitialTitleBar( paddingRight={TYPOGRAPHY.fontSizeH6} data-testid={`titlebar_${exit.title}`} > - {exit.title} - + - + Slot Component: Replace me using the component panel. - - + + Slot Component: Replace me using the component panel. - - + + Slot Component: Replace me using the component panel. - + ), }, diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx index 7b016448c73..ebc25f5e7a4 100644 --- a/app/src/atoms/MenuList/DropdownMenu.tsx +++ b/app/src/atoms/MenuList/DropdownMenu.tsx @@ -11,7 +11,7 @@ import { JUSTIFY_SPACE_BETWEEN, POSITION_ABSOLUTE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useOnClickOutside, POSITION_RELATIVE, @@ -170,13 +170,13 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element { {title !== null ? ( - {title} - + {tooltipText != null ? ( <> @@ -200,7 +200,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element { css={DROPDOWN_STYLE} tabIndex={tabIndex} > - {currentOption.name} - + {showDropdownMenu ? ( ) : ( @@ -248,13 +248,13 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element { )} {caption != null ? ( - {caption} - + ) : null} ) diff --git a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx index 398752a8116..620bed41f1b 100644 --- a/app/src/atoms/ProgressBar/ProgressBar.stories.tsx +++ b/app/src/atoms/ProgressBar/ProgressBar.stories.tsx @@ -6,7 +6,7 @@ import { Flex, SecondaryButton, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { ProgressBar } from './index' @@ -38,7 +38,9 @@ const Template: Story> = args => { backgroundColor={COLORS.grey30} padding={SPACING.spacing16} > - {'Add 5% to the current progress every 0.2 sec'} + + {'Add 5% to the current progress every 0.2 sec'} + { diff --git a/app/src/atoms/SelectField/index.tsx b/app/src/atoms/SelectField/index.tsx index b0571cd4f02..36c425cbeae 100644 --- a/app/src/atoms/SelectField/index.tsx +++ b/app/src/atoms/SelectField/index.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { css } from 'styled-components' @@ -87,13 +87,13 @@ export function SelectField(props: SelectFieldProps): JSX.Element { return ( {title != null ? ( - {title} - + ) : null} ), - block: , + block: , }} /> - + {t('branded:opentrons_tip_racks_recommended')} - + - + {t('branded:calibration_on_opentrons_tips_is_important')} - + - + {displayName} - + ) diff --git a/app/src/organisms/CalibrationPanels/CompleteConfirmation.tsx b/app/src/organisms/CalibrationPanels/CompleteConfirmation.tsx index 903431f616d..7d11b2243a9 100644 --- a/app/src/organisms/CalibrationPanels/CompleteConfirmation.tsx +++ b/app/src/organisms/CalibrationPanels/CompleteConfirmation.tsx @@ -12,7 +12,7 @@ import { PrimaryButton, SIZE_3, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -45,13 +45,13 @@ export function CompleteConfirmation( ) : ( )} - + {t('flow_complete', { flowName })} - + {body != null ? ( - + {body} - + ) : null} - + {t('start_over_question')} - - {t('starting_over_loses_progress')} - {t('if_tip_bent_replace_it')} + + + {t('starting_over_loses_progress')} + + + {t('if_tip_bent_replace_it')} + {heading != null ? ( - + {heading} - + + ) : null} + {body != null ? ( + {body} ) : null} - {body != null ? {body} : null} - + {t('prepare_the_space')} - + {isHealthCheck ? ( - + {t('to_check', { mount: activePipette?.mount })} - + ) : null}

diff --git a/app/src/organisms/CalibrationPanels/Introduction/Body.tsx b/app/src/organisms/CalibrationPanels/Introduction/Body.tsx index df8ed6c8c17..5ad643dd412 100644 --- a/app/src/organisms/CalibrationPanels/Introduction/Body.tsx +++ b/app/src/organisms/CalibrationPanels/Introduction/Body.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { Trans, useTranslation } from 'react-i18next' -import { StyledText } from '@opentrons/components' +import { LegacyStyledText } from '@opentrons/components' import * as Sessions from '../../../redux/sessions' import type { SessionType } from '../../../redux/sessions/types' @@ -17,20 +17,26 @@ export function Body(props: BodyProps): JSX.Element | null { }} + components={{ block: }} /> ) case Sessions.SESSION_TYPE_DECK_CALIBRATION: - return {t('deck_calibration_intro_body')} + return ( + + {t('deck_calibration_intro_body')} + + ) case Sessions.SESSION_TYPE_PIPETTE_OFFSET_CALIBRATION: return ( - + {t('pipette_offset_calibration_intro_body')} - + ) case Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION: return ( - {t('tip_length_calibration_intro_body')} + + {t('tip_length_calibration_intro_body')} + ) default: // this case should never be reached diff --git a/app/src/organisms/CalibrationPanels/Introduction/InvalidationWarning.tsx b/app/src/organisms/CalibrationPanels/Introduction/InvalidationWarning.tsx index 0f02a167188..95c345e45fd 100644 --- a/app/src/organisms/CalibrationPanels/Introduction/InvalidationWarning.tsx +++ b/app/src/organisms/CalibrationPanels/Introduction/InvalidationWarning.tsx @@ -1,5 +1,10 @@ import * as React from 'react' -import { Flex, SPACING, TYPOGRAPHY, StyledText } from '@opentrons/components' +import { + Flex, + SPACING, + TYPOGRAPHY, + LegacyStyledText, +} from '@opentrons/components' import { useTranslation } from 'react-i18next' import { Banner } from '../../../atoms/Banner' import * as Sessions from '../../../redux/sessions' @@ -20,19 +25,19 @@ export function InvalidationWarning( if (sessionType === Sessions.SESSION_TYPE_DECK_CALIBRATION) { warningBody = ( <> - + {t('deck_invalidates_pipette_offset')} - - + + {t('pipette_offset_recalibrate_both_mounts')} - + ) } else { warningBody = ( - + {t('tip_length_invalidates_pipette_offset')} - + ) } diff --git a/app/src/organisms/CalibrationPanels/Introduction/index.tsx b/app/src/organisms/CalibrationPanels/Introduction/index.tsx index cf12528244e..c72ef897af8 100644 --- a/app/src/organisms/CalibrationPanels/Introduction/index.tsx +++ b/app/src/organisms/CalibrationPanels/Introduction/index.tsx @@ -9,7 +9,7 @@ import { ALIGN_CENTER, PrimaryButton, SecondaryButton, - StyledText, + LegacyStyledText, } from '@opentrons/components' import * as Sessions from '../../../redux/sessions' @@ -140,9 +140,9 @@ export function Introduction(props: CalibrationPanelProps): JSX.Element { flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8} > - + {t('before_you_begin')} - + {(sessionType === Sessions.SESSION_TYPE_DECK_CALIBRATION || sessionType === Sessions.SESSION_TYPE_TIP_LENGTH_CALIBRATION) && diff --git a/app/src/organisms/CalibrationPanels/LoadingState.tsx b/app/src/organisms/CalibrationPanels/LoadingState.tsx index a647cb52502..03e491af459 100644 --- a/app/src/organisms/CalibrationPanels/LoadingState.tsx +++ b/app/src/organisms/CalibrationPanels/LoadingState.tsx @@ -7,7 +7,7 @@ import { Icon, JUSTIFY_CENTER, SIZE_4, - StyledText, + LegacyStyledText, } from '@opentrons/components' interface LoadingStateProps { @@ -25,8 +25,10 @@ export function LoadingState(props: LoadingStateProps): JSX.Element { minHeight="32rem" > - {header != null ? {header} : null} - {body != null ? {body} : null} + {header != null ? ( + {header} + ) : null} + {body != null ? {body} : null} ) } diff --git a/app/src/organisms/CalibrationPanels/MeasureNozzle.tsx b/app/src/organisms/CalibrationPanels/MeasureNozzle.tsx index 3f4d0e391f3..c0a16f60719 100644 --- a/app/src/organisms/CalibrationPanels/MeasureNozzle.tsx +++ b/app/src/organisms/CalibrationPanels/MeasureNozzle.tsx @@ -11,7 +11,7 @@ import { JUSTIFY_SPACE_BETWEEN, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { @@ -138,14 +138,14 @@ export function MeasureNozzle(props: CalibrationPanelProps): JSX.Element { gridGap={SPACING.spacing8} > - + {titleText} - - + + {calBlock != null ? t('jog_nozzle_to_block', { slotName: calBlock.slot }) : t('jog_nozzle_to_trash')} - + ) @@ -98,10 +100,12 @@ export function HistoricalProtocolRunOffsetDrawer( iconMarginLeft={SPACING.spacing4} > - + {t('data_out_of_date')} - - {t('robot_was_recalibrated')} + + + {t('robot_was_recalibrated')} + ) : null} @@ -110,34 +114,34 @@ export function HistoricalProtocolRunOffsetDrawer( width="25.25%" padding={`${SPACING.spacing4} ${SPACING.spacing8} ${SPACING.spacing4} ${SPACING.spacing4}`} > - {t('location')} - + - {t('labware')} - + - {t('labware_offset_data')} - + {uniqueLabwareOffsets.map((offset, index) => { @@ -165,16 +169,16 @@ export function HistoricalProtocolRunOffsetDrawer( gridGap={SPACING.spacing24} > - + {t('slot', { slotName: offset.location.slotName })} {offset.location.moduleModel != null && ` - ${getModuleDisplayName(offset.location.moduleModel)}`} - + - + {labwareName} - + - {t('instruments_and_modules')} - + {/* TODO(bh, 2022-10-20): insert "offline" image when provided by illustrator */} - {t('offline_instruments_and_modules')} - + )} diff --git a/app/src/organisms/Devices/ModuleInfo.tsx b/app/src/organisms/Devices/ModuleInfo.tsx index 50b158dc0c1..b7e678310f4 100644 --- a/app/src/organisms/Devices/ModuleInfo.tsx +++ b/app/src/organisms/Devices/ModuleInfo.tsx @@ -11,7 +11,7 @@ import { RobotCoordsForeignObject, SPACING, TYPOGRAPHY, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { getModuleDisplayName, @@ -78,22 +78,22 @@ export const ModuleInfo = (props: ModuleInfoProps): JSX.Element => { marginRight={SPACING.spacing4} /> - {!isAttached ? t('module_not_connected') : t('module_connected')} - + ) : null} - {getModuleDisplayName(moduleModel)} - - + { {runHasStarted ? t('connection_info_not_available') : connectionStatus} - + ) diff --git a/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx b/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx index 5905eeafa4d..e6a54d9152e 100644 --- a/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx +++ b/app/src/organisms/Devices/PipetteCard/AboutPipetteSlideout.tsx @@ -6,7 +6,7 @@ import { Flex, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Slideout } from '../../../atoms/Slideout' @@ -52,37 +52,37 @@ export const AboutPipetteSlideout = ( {firmwareVersion != null && ( <> - {i18n.format(t('current_version'), 'upperCase')} - - + {firmwareVersion} - + )} - {i18n.format(t('serial_number'), 'upperCase')} - - + {pipetteId} - + ) diff --git a/app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx b/app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx index 62ade3883c4..6c847f8f2de 100644 --- a/app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx +++ b/app/src/organisms/Devices/PipetteCard/FlexPipetteCard.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Trans, useTranslation } from 'react-i18next' import { css } from 'styled-components' -import { SPACING, TYPOGRAPHY, StyledText } from '@opentrons/components' +import { SPACING, TYPOGRAPHY, LegacyStyledText } from '@opentrons/components' import { NINETY_SIX_CHANNEL, SINGLE_MOUNT_PIPETTES, @@ -204,16 +204,16 @@ export function FlexPipetteCard({ attachedPipette.data.calibratedOffset?.last_modified == null ? ( {isEstopNotDisengaged ? ( - + {t('calibration_needed_without_link')} - + ) : ( { }} > - {t('pipette_recalibration_recommended')} - + - + {`${t('pipette_calibrations_differ')}`} - + diff --git a/app/src/organisms/Devices/PipetteCard/index.tsx b/app/src/organisms/Devices/PipetteCard/index.tsx index d94a7d90a79..b5a267dac7a 100644 --- a/app/src/organisms/Devices/PipetteCard/index.tsx +++ b/app/src/organisms/Devices/PipetteCard/index.tsx @@ -12,7 +12,7 @@ import { Flex, InstrumentDiagram, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useOnClickOutside, } from '@opentrons/components' @@ -157,7 +157,7 @@ export const PipetteCard = (props: PipetteCardProps): JSX.Element => { ) : null} - { {t('mount', { side: mount === LEFT ? t('left') : t('right'), })} - + - + {pipetteDisplayName ?? t('empty')} - + diff --git a/app/src/organisms/Devices/ProtocolRun/EmptySetupStep.tsx b/app/src/organisms/Devices/ProtocolRun/EmptySetupStep.tsx index 8c049d0661a..7f17d80c7f2 100644 --- a/app/src/organisms/Devices/ProtocolRun/EmptySetupStep.tsx +++ b/app/src/organisms/Devices/ProtocolRun/EmptySetupStep.tsx @@ -4,7 +4,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -18,13 +18,19 @@ export function EmptySetupStep(props: EmptySetupStepProps): JSX.Element { const { title, description, label } = props return ( - + {label} - - + + {title} - - {description} + + {description} ) } diff --git a/app/src/organisms/Devices/ProtocolRun/LabwareInfoOverlay.tsx b/app/src/organisms/Devices/ProtocolRun/LabwareInfoOverlay.tsx index de838dcd720..df7f886ebd2 100644 --- a/app/src/organisms/Devices/ProtocolRun/LabwareInfoOverlay.tsx +++ b/app/src/organisms/Devices/ProtocolRun/LabwareInfoOverlay.tsx @@ -15,7 +15,7 @@ import { JUSTIFY_SPACE_BETWEEN, RobotCoordsForeignDiv, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { OffsetVector } from '../../../molecules/OffsetVector' @@ -60,26 +60,26 @@ const LabwareInfo = (props: LabwareInfoProps): JSX.Element | null => { alignItems={ALIGN_FLEX_START} gridGap={SPACING.spacing4} > - {displayName ?? definitionDisplayName} - + {props.labwareHasLiquid && ( )} {vector != null && ( <> - {t('offset_data')} - + )} diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorBanner.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorBanner.tsx index 7b2b87e123b..5864092f0ce 100644 --- a/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorBanner.tsx +++ b/app/src/organisms/Devices/ProtocolRun/ProtocolAnalysisErrorBanner.tsx @@ -10,7 +10,7 @@ import { JUSTIFY_SPACE_BETWEEN, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -44,8 +44,10 @@ export function ProtocolAnalysisErrorBanner( alignItems={ALIGN_CENTER} width="100%" > - {t('protocol_analysis_failed')} - + + {t('protocol_analysis_failed')} + + - + {showErrorDetails ? createPortal( @@ -71,9 +73,9 @@ export function ProtocolAnalysisErrorBanner( onClose={handleToggleDetails} > {errors.map((error, index) => ( - + {error?.detail} - + ))} - + {t('analysis_failure_on_robot', { protocolName: displayName, robotName, })} - + {errors?.map((error, index) => ( - + {error?.detail} - + ))} - {t('shared:close')} - + , diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolDropTipBanner.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolDropTipBanner.tsx index 6c735aff8da..7344d160510 100644 --- a/app/src/organisms/Devices/ProtocolRun/ProtocolDropTipBanner.tsx +++ b/app/src/organisms/Devices/ProtocolRun/ProtocolDropTipBanner.tsx @@ -8,7 +8,7 @@ import { DIRECTION_ROW, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -29,14 +29,14 @@ export function ProtocolDropTipBanner(props: { paddingRight={SPACING.spacing16} > - + {t('tips_may_be_attached')} - + - + {t('remove_the_tips_from_pipette')} - + { @@ -44,12 +44,12 @@ export function ProtocolDropTipBanner(props: { }} aria-label="remove-tips" > - {t('remove_tips')} - + diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx index 92b92396300..e1a4326acd4 100644 --- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx +++ b/app/src/organisms/Devices/ProtocolRun/ProtocolRunHeader.tsx @@ -41,7 +41,7 @@ import { SecondaryButton, SIZE_1, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useConditionalConfirm, useHoverTooltip, @@ -318,18 +318,21 @@ export function ProtocolRunHeader({ {protocolKey != null ? ( - {displayName} - + ) : ( - + {displayName} - + )} {analysisErrors != null && analysisErrors.length > 0 && ( @@ -470,11 +473,11 @@ interface LabeledValueProps { function LabeledValue(props: LabeledValueProps): JSX.Element { return ( - + {props.label} - + {typeof props.value === 'string' ? ( - {props.value} + {props.value} ) : ( props.value )} @@ -507,9 +510,9 @@ function DisplayRunStatus(props: DisplayRunStatusProps): JSX.Element { /> ) : null} - + {props.runStatus != null ? t(`status_${String(props.runStatus)}`) : ''} - + ) } @@ -749,7 +752,9 @@ function ActionButton(props: ActionButtonProps): JSX.Element { } /> ) : null} - {buttonText} + + {buttonText} + {disableReason != null && ( @@ -829,12 +834,12 @@ function TerminalRunBanner(props: TerminalRunProps): JSX.Element | null { return ( - + {t('error_info', { errorType: highestPriorityError?.errorType, errorCode: highestPriorityError?.errorCode, })} - + {hasRunTimeParameters ? ( - + {t('parameters')} - + ) : null} {hasRunTimeParameters ? ( - + {hasCustomRunTimeParameterValues ? t('custom_values') : t('default_values')} - + ) : null} {hasRunTimeParameters ? ( @@ -104,10 +107,15 @@ export function ProtocolRunRuntimeParameters({ iconMarginLeft={SPACING.spacing4} > - + {t('values_are_view_only')} - - {t('cancel_and_restart_to_edit')} + + + {t('cancel_and_restart_to_edit')} + ) : null} @@ -166,7 +174,7 @@ const StyledTableRowComponent = ( return ( - + {parameter.description != null ? ( <> - + {parameter.type === 'csv_file' ? parameter.file?.file?.name ?? '' : formatRunTimeParameterValue(parameter, t)} - + {parameter.type === 'csv_file' || parameter.default !== parameter.value ? ( ) : null} {analysisErrors != null && analysisErrors?.length > 0 ? ( - + {t('protocol_analysis_failed')} - + ) : ( stepsKeysInOrder.map((stepKey, index) => { const setupStepTitle = t(`${stepKey}_title`) @@ -323,9 +323,9 @@ export function ProtocolRunSetup({ )} ) : ( - + {t('loading_data')} - + )} ) @@ -392,7 +392,7 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null { name={calibrationStatus?.complete ? 'ot-check' : 'alert-circle'} id="RunSetupCard_calibrationIcon" /> - {statusText} - + ) : null } else if (stepKey === LPC_KEY) { diff --git a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx index 2e973225bdd..cabf46391be 100644 --- a/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/RunFailedModal.tsx @@ -16,7 +16,7 @@ import { OVERFLOW_WRAP_ANYWHERE, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -79,20 +79,20 @@ export function RunFailedModal({ return ( - + {t('error_info', { errorType: highestPriorityError.errorType, errorCode: highestPriorityError.errorCode, })} - + - + {highestPriorityError.detail} - + - + {t('branded:run_failed_modal_description_desktop')} - + + {runTime} - + ) } diff --git a/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx index 1dcd3a24395..89bec05607c 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupCalibrationItem.tsx @@ -12,7 +12,7 @@ import { JUSTIFY_SPACE_BETWEEN, SIZE_1, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -50,7 +50,7 @@ export function SetupCalibrationItem({ : t('not_calibrated') const calibrationDataNotAvailableText = runHasStarted ? ( - {t('calibration_data_not_available')} + {t('calibration_data_not_available')} ) : null return ( {label != null && ( - {label} - + )} {title != null && ( - + {title} - + )} - + {calibrationDataNotAvailableText ?? subText ?? calibratedText} - + diff --git a/app/src/organisms/Devices/ProtocolRun/SetupDeckCalibration.tsx b/app/src/organisms/Devices/ProtocolRun/SetupDeckCalibration.tsx index 5a032080594..f8c880133d6 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupDeckCalibration.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupDeckCalibration.tsx @@ -10,7 +10,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -46,13 +46,13 @@ export function SetupDeckCalibration({ alignItems={ALIGN_CENTER} justifyContent={JUSTIFY_SPACE_BETWEEN} > - {t('deck_calibration_title')} - + )} - {i18n.format(t('required_instrument_calibrations'), 'titleCase')} - + {PipetteConstants.PIPETTE_MOUNTS.map((mount, index) => { const pipetteInfo = runPipetteInfoByMount[mount] if (pipetteInfo != null && !isFlex) { diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx index 69f54d53e2c..eabf0f12cea 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx @@ -17,7 +17,7 @@ import { LabwareRender, SIZE_AUTO, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WELL_LABEL_OPTIONS, } from '@opentrons/components' @@ -177,13 +177,13 @@ export function LabwareListItem( size="0.75rem" marginTop={SPACING.spacing4} /> - {t('secure_labware_instructions')} - + ) @@ -192,9 +192,9 @@ export function LabwareListItem( case HEATERSHAKER_MODULE_TYPE: isHeaterShakerInProtocol = true extraAttentionText = ( - + {t('heater_shaker_labware_list_view')} - + ) const matchingHeaterShaker = attachedModuleInfo != null && @@ -257,9 +257,9 @@ export function LabwareListItem( return ( - + {slotInfo} - + @@ -270,12 +270,12 @@ export function LabwareListItem( marginLeft={SPACING.spacing16} marginRight={SPACING.spacing24} > - + {labwareDisplayName} - - + + {nickName} - + {nestedLabwareInfo != null && @@ -292,12 +292,15 @@ export function LabwareListItem( marginLeft={SPACING.spacing16} marginRight={SPACING.spacing24} > - + {nestedLabwareInfo.nestedLabwareDisplayName} - - + + {nestedLabwareInfo.nestedLabwareNickName} - + ) : null} @@ -308,19 +311,19 @@ export function LabwareListItem( gridGap={SPACING.spacing8} > - + {moduleDisplayName != null ? moduleDisplayName : t(initialLocation === 'offDeck' ? 'off_deck' : 'on_deck')} - + {extraAttentionText != null ? extraAttentionText : null} {isHeaterShakerInProtocol ? ( - + {t('labware_latch')} - + - + {hsLatchText} - + ) : null} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/OffDeckLabwareList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/OffDeckLabwareList.tsx index 7bbf43ffc1b..47c6df4bbb7 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabware/OffDeckLabwareList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabware/OffDeckLabwareList.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' -import { SPACING, TYPOGRAPHY, StyledText } from '@opentrons/components' +import { SPACING, TYPOGRAPHY, LegacyStyledText } from '@opentrons/components' import { LabwareListItem } from './LabwareListItem' import type { RunTimeCommand } from '@opentrons/shared-data' import type { LabwareSetupItem } from '../../../../pages/Protocols/utils' @@ -18,14 +18,14 @@ export function OffDeckLabwareList( if (labwareItems.length < 1) return null return ( <> - {t('additional_off_deck_labware')} - + {labwareItems.map((labwareItem, index) => ( - + {t(`branded:secure_labware_explanation_${snakeCase(moduleName)}`)} - + - + {t('location')} - - + + {t('labware_name')} - - + + {t('placement')} - + {onDeckItems.map((labwareItem, index) => { const labwareOnAdapter = onDeckItems.find( diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx index 531729b8281..f965488e607 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLabwarePositionCheck/CurrentOffsetsTable.tsx @@ -15,7 +15,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -146,9 +146,9 @@ export function CurrentOffsetsTable( flexDirection={DIRECTION_COLUMN} justifyContent={JUSTIFY_SPACE_BETWEEN} > - + {i18n.format(t('applied_offset_data'), 'upperCase')} - + {isLabwareOffsetCodeSnippetsOn ? ( { width="31.25rem" > - + {t('what_labware_offset_is')} - + { size="0.5rem" /> - + {t('branded:why_use_lpc')} - + - + {i18n.format(t('no_labware_offset_data'), 'capitalize')} - + )} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx index 025dd2507fb..60044410e76 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx @@ -14,7 +14,7 @@ import { JUSTIFY_SPACE_BETWEEN, SIZE_1, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { MICRO_LITERS } from '@opentrons/shared-data' @@ -118,21 +118,21 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { > - {displayName} - - + {description != null ? description : null} - + - prev + curr, 0) .toFixed(1)}{' '} {MICRO_LITERS} - + {selectedValue === liquidId ? ( @@ -174,19 +174,19 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { : '0' } > - {well.wellName} - - + {well.volume} {MICRO_LITERS} - + ) })} @@ -218,16 +218,16 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { > - {displayName} - - + + {description != null ? description : null} - + - @@ -246,7 +246,7 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { .reduce((prev, curr) => prev + curr, 0) .toFixed(1)}{' '} {MICRO_LITERS} - + {selectedValue === liquidId ? ( @@ -268,16 +268,19 @@ export function LiquidDetailCard(props: LiquidDetailCardProps): JSX.Element { : '0' } > - {well.wellName} - - + + {well.volume.toFixed(1)} {MICRO_LITERS} - + ) })} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx index 0c3e6beb7da..a2ed940a8e8 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidsLabwareDetailsModal.tsx @@ -14,7 +14,7 @@ import { Flex, LabwareRender, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Modal } from '../../../../molecules/Modal' @@ -193,39 +193,39 @@ export const LiquidsLabwareDetailsModal = ( > - {t('slot_number')} - - + {slotName} - + - {t('labware_name')} - - + {labwareName} - + diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx index 4dc032bbf59..dd3d242510c 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx @@ -20,7 +20,7 @@ import { SIZE_1, SIZE_AUTO, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { getModuleDisplayName, MICRO_LITERS } from '@opentrons/shared-data' @@ -171,22 +171,22 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element { marginTop={SPACING.spacing16} marginBottom={SPACING.spacing8} > - {t('location')} - - + {t('labware_name')} - - + {t('volume')} - + {labwareByLiquidId[liquidId].map((labware, index) => { const { @@ -227,24 +227,24 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element { gridGap={SPACING.spacing16} > - {slotName} - + - {labwareName} - + {adapterName != null ? ( - + ) : null} - + ) @@ -313,21 +313,21 @@ export const LiquidsListItemDetails = ( - {displayName} - - + {description != null ? description : null} - + - + {getTotalVolumePerLiquidId(liquidId, labwareByLiquidId).toFixed(1)}{' '} {MICRO_LITERS} - + ) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx index ebeaa0101fb..10eaee47a41 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/ChooseModuleToConfigureModal.tsx @@ -13,7 +13,7 @@ import { Icon, SPACING, SecondaryButton, - StyledText, + LegacyStyledText, TEXT_ALIGN_CENTER, TYPOGRAPHY, } from '@opentrons/components' @@ -118,7 +118,9 @@ export const ChooseModuleToConfigureModal = ( const contents = fixtureOptions.length > 0 ? ( - {t('add_this_deck_hardware')} + + {t('add_this_deck_hardware')} + {fixtureOptions} @@ -155,9 +157,12 @@ export const ChooseModuleToConfigureModal = ( gridGap={SPACING.spacing10} alignItems={ALIGN_CENTER} > - + {t('add_to_slot', { slotName: displaySlotName })} - + } onClose={onCloseClick} @@ -225,13 +230,13 @@ function NoUnconfiguredModules(props: NoUnconfiguredModulesProps): JSX.Element { name="ot-spinner" spin /> - {t('plug_in_module_to_configure', { module: moduleDisplayName })} - + ) return ( @@ -241,22 +246,22 @@ function NoUnconfiguredModules(props: NoUnconfiguredModulesProps): JSX.Element { > {configuredModuleMatches.length > 0 ? ( <> - + {t('there_are_other_configured_modules', { module: moduleDisplayName, })} - + {loadingBlock} {exitButton} ) : ( <> - + {t('there_are_no_unconfigured_modules', { module: moduleDisplayName, slot: displaySlotName, })} - + {loadingBlock} )} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx index f8c19df00a2..16742e8564b 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/LocationConflictModal.tsx @@ -15,7 +15,7 @@ import { PrimaryButton, SecondaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -198,18 +198,18 @@ export const LocationConflictModal = ( cutout: getCutoutDisplayName(cutoutId), }} components={{ - block: , + block: , strong: , }} /> - {t('slot_location', { slotName: displaySlotName })} - + - + {t('protocol_specifies')} - + - + {protocolSpecifiesDisplayName} - + - + {t('currently_configured')} - + - + {currentFixtureDisplayName} - + @@ -277,9 +283,12 @@ export const LocationConflictModal = ( alignItems={ALIGN_CENTER} > - + {t('deck_conflict')} - + } onClose={onCloseClick} @@ -298,17 +307,17 @@ export const LocationConflictModal = ( cutout: getCutoutDisplayName(cutoutId), }} components={{ - block: , + block: , strong: , }} /> - {t('slot_location', { slotName: displaySlotName })} - + - + {t('protocol_specifies')} - - + + {protocolSpecifiesDisplayName} - + - + {t('currently_configured')} - - + + {isThermocycler ? currentThermocyclerFixtureDisplayName : currentFixtureDisplayName} - + diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx index c5cef1823b0..63a47ba67e7 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/NotConfiguredModal.tsx @@ -10,7 +10,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -59,7 +59,9 @@ export const NotConfiguredModal = ( width="27.75rem" > - {t('add_this_deck_hardware')} + + {t('add_this_deck_hardware')} + - + {getFixtureDisplayName(requiredFixtureId)} - + {i18n.format(t('shared:add'), 'capitalize')} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx index 6c53fbeb797..876bd060922 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/OT2MultipleModulesHelp.tsx @@ -11,7 +11,7 @@ import { Link, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { getTopPortalEl } from '../../../../App/portal' @@ -44,20 +44,20 @@ export function OT2MultipleModulesHelp(): JSX.Element { setShowMultipleModulesModal(true) }} closeButton={ - {t('learn_more')} - + } > - + {t('multiple_modules')} - - {t('view_moam')} + + {t('view_moam')} @@ -71,9 +71,9 @@ export function OT2MultipleModulesHelp(): JSX.Element { - + {t('multiple_modules_explanation')} - + - {t('example')} - + - + {t('multiple_modules_example')} - + - {isCurrentFixtureCompatible || isRequiredSingleSlotMissing ? getFixtureDisplayName(cutoutFixtureId) : getFixtureDisplayName(compatibleCutoutFixtureIds?.[0])} - + - + {t('view_setup_instructions')} - + - + {getCutoutDisplayName(cutoutId)} - + - + {t('resolve')} - + ) : null} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx index 95ce2213872..69481c18fe3 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/SetupModulesList.tsx @@ -14,7 +14,7 @@ import { JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TOOLTIP_LEFT, TYPOGRAPHY, useHoverTooltip, @@ -219,15 +219,21 @@ export function ModulesListItem({ }} > - {t('view_setup_instructions')} + + {t('view_setup_instructions')} + ) } else if (moduleModel === MAGNETIC_BLOCK_V1) { subText = ( - + {t('no_usb_connection_required')} - + ) } @@ -337,12 +343,12 @@ export function ModulesListItem({ - {displayName} - + {subText} @@ -351,19 +357,19 @@ export function ModulesListItem({ flexDirection={DIRECTION_COLUMN} justifyContent={JUSTIFY_CENTER} > - + {getModuleType(moduleModel) === 'thermocyclerModuleType' ? isFlex ? TC_MODULE_LOCATION_OT3 : TC_MODULE_LOCATION_OT2 : slotName} - + {attachedModuleMatch?.usbPort.port != null ? ( - + {t('usb_port_number', { port: attachedModuleMatch.usbPort.port, })} - + ) : null} - + {t('resolve')} - + ) : moduleModel === MAGNETIC_BLOCK_V1 ? ( diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx index d007f53064f..fadb5c92758 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/UnMatchedModuleWarning.tsx @@ -4,7 +4,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Banner } from '../../../../atoms/Banner' @@ -25,17 +25,17 @@ export const UnMatchedModuleWarning = (): JSX.Element | null => { }} > - {t('extra_module_attached')} - + - + {`${t('module_mismatch_body')}.`} - + ) diff --git a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/index.tsx b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/index.tsx index c3cd7dbcf3e..23de51cac30 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/index.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupModuleAndDeck/index.tsx @@ -9,7 +9,7 @@ import { PrimaryButton, DIRECTION_ROW, JUSTIFY_SPACE_BETWEEN, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -86,23 +86,23 @@ export const SetupModuleAndDeck = ({ marginLeft={SPACING.spacing20} marginBottom={SPACING.spacing12} > - + {i18n.format(t('deck_hardware'), 'capitalize')} - - + {t('location')} - - + {t('status')} - + - {label} - - + {title} - - + {description} - + {rightElement} diff --git a/app/src/organisms/Devices/ProtocolRun/SetupTipLengthCalibration.tsx b/app/src/organisms/Devices/ProtocolRun/SetupTipLengthCalibration.tsx index f1bda7a4265..faeeb9eda9e 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupTipLengthCalibration.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupTipLengthCalibration.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -28,13 +28,13 @@ export function SetupTipLengthCalibration({ return ( - {t('required_tip_racks_title')} - + {PipetteConstants.PIPETTE_MOUNTS.map(mount => { const pipetteInfo = runPipetteInfoByMount[mount] if (pipetteInfo == null) { diff --git a/app/src/organisms/Devices/RecentProtocolRuns.tsx b/app/src/organisms/Devices/RecentProtocolRuns.tsx index 60ae2fdbcfb..1050f67f901 100644 --- a/app/src/organisms/Devices/RecentProtocolRuns.tsx +++ b/app/src/organisms/Devices/RecentProtocolRuns.tsx @@ -12,7 +12,7 @@ import { JUSTIFY_SPACE_AROUND, SIZE_4, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -48,7 +48,7 @@ export function RecentProtocolRuns({ width="100%" marginBottom="6rem" > - {t('recent_protocol_runs')} - + - {t('run')} - + - {t('protocol')} - + - {t('status')} - - + {t('run_duration')} - + {runs .sort( @@ -140,7 +140,7 @@ export function RecentProtocolRuns({ )} {!isRobotViewable && ( - {t('offline_recent_protocol_runs')} - + )} {isRobotViewable && (runs == null || runs.length === 0) && ( - {t('no_protocol_runs')} - + )} diff --git a/app/src/organisms/Devices/RobotCard.tsx b/app/src/organisms/Devices/RobotCard.tsx index c375e55dc7f..5910ea8e8cc 100644 --- a/app/src/organisms/Devices/RobotCard.tsx +++ b/app/src/organisms/Devices/RobotCard.tsx @@ -16,7 +16,7 @@ import { POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP, } from '@opentrons/components' @@ -131,13 +131,13 @@ function AttachedModules(props: { robotName: string }): JSX.Element | null { return !isModulesQueryLoading && attachedModules.length > 0 ? ( - {t('modules')} - + {attachedModules.map((module, i) => ( - + {t('shared:instruments')} - + {isPipetteQueryLoading || isInstrumentsQueryLoading ? null : ( diff --git a/app/src/organisms/Devices/RobotOverview.tsx b/app/src/organisms/Devices/RobotOverview.tsx index 272a04aac81..85ae49581cb 100644 --- a/app/src/organisms/Devices/RobotOverview.tsx +++ b/app/src/organisms/Devices/RobotOverview.tsx @@ -15,7 +15,7 @@ import { POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useAuthorization } from '@opentrons/react-api-client' @@ -124,7 +124,7 @@ export function RobotOverview({ flexDirection={DIRECTION_COLUMN} paddingRight={SPACING.spacing16} > - {t('controls')} - + - {t('lights')} - + diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetModal.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetModal.tsx index 201d6b3e28a..e2e429d2507 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetModal.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/DeviceResetModal.tsx @@ -13,7 +13,7 @@ import { Link, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { LegacyModal } from '../../../../../molecules/LegacyModal' @@ -98,9 +98,9 @@ export function DeviceResetModal({ onClose={closeModal} > - + {t('factory_reset_modal_description')} - + - {t('branded:connection_lost_description')} - + - {t('resets_cannot_be_undone')} + + {t('resets_cannot_be_undone')} + {isFlex ? ( <> - + {t('clear_all_data')} - - + + {t('clear_all_stored_data_description')} - + { setResetOptions( @@ -216,12 +221,12 @@ export function DeviceResetSlideout({ ) : null} - + {t('clear_individual_data')} - - + + {t('device_reset_slideout_description')} - + - + {t('robot_calibration_data')} - + - + {t('protocol_run_history')} - + - {t('boot_scripts')} - + {bootScriptOption.map(opt => ( - {t('ssh_public_keys')} - + {sshKeyOption.map(opt => ( - {t('oem_mode')} - + - + {toggleValue ? t('on') : t('off')} - + - {t('branded:oem_mode_description')} + + {t('branded:oem_mode_description')} + {toggleValue ? ( - + {t('upload_custom_logo')} - - + + {t('upload_custom_logo_description')} - - + + {t('upload_custom_logo_dimensions')} - + {file == null ? ( + , }} /> - + } /> ) : ( diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx index 81ebe7790b4..5c68bdceabd 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/RenameRobotSlideout.tsx @@ -9,7 +9,7 @@ import { Flex, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { useUpdateRobotNameMutation } from '@opentrons/react-api-client' import { @@ -181,9 +181,9 @@ export function RenameRobotSlideout({ {t('rename_robot_prefer_usb_connection')} )} - + {t('rename_robot_input_limitation_detail')} - + )} /> - + {t('characters_max')} - + {errors.newRobotName != null ? ( - {errors.newRobotName.message} - + ) : null} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx index 2d67905c27c..d76aa144097 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/DeviceReset.tsx @@ -8,7 +8,7 @@ import { JUSTIFY_SPACE_BETWEEN, SPACING_AUTO, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -37,14 +37,16 @@ export function DeviceReset({ return ( - {t('device_reset')} - - {t('device_reset_description')} + + + {t('device_reset_description')} + - {t('about_advanced')} - - + {t('robot_name')} - - + + {robotName} - + - {t('enable_status_light')} - - {t('enable_status_light_description')} + + + {t('enable_status_light_description')} + - + {t('factory_mode')} - + - {t('gantry_homing')} - - {t('gantry_homing_description')} + + + {t('gantry_homing_description')} + - {t('legacy_settings')} - - + + {t('calibrate_deck_to_dots')} - - {t('calibrate_deck_description')} + + + {t('calibrate_deck_description')} + - {t('jupyter_notebook')} - - + + {t('jupyter_notebook_description')} - + {t('jupyter_notebook_link')} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotInformation.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotInformation.tsx index 9d20db339c7..55f53c84413 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotInformation.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotInformation.tsx @@ -6,7 +6,7 @@ import { Flex, JUSTIFY_FLEX_START, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useRobot } from '../../../../organisms/Devices/hooks' @@ -52,30 +52,30 @@ export function RobotInformation({ marginTop={SPACING.spacing16} > - + {t('robot_serial_number')} - - + + {serialNumber != null ? serialNumber : t('robot_settings_advanced_unknown')} - + - + {t('firmware_version')} - - + + {firmwareVersion != null ? firmwareVersion : t('robot_settings_advanced_unknown')} - + - + {t('supported_protocol_api_versions')} - - {formatApiVersionMinMax()} + + {formatApiVersionMinMax()} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx index e37b3ea51f9..c0cc302d19b 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/RobotServerVersion.tsx @@ -10,7 +10,7 @@ import { JUSTIFY_SPACE_BETWEEN, Link, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { TertiaryButton } from '../../../../atoms/buttons' @@ -51,24 +51,24 @@ export function RobotServerVersion({ ) : null} - {t('robot_server_version')} - - + + {robotServerVersion != null ? `v${robotServerVersion}` : t('robot_settings_advanced_unknown')} - + {isFlex ? ( - + {t('branded:robot_server_version_ot3_description')} - + ) : null} - + {t('shared:view_latest_release_notes')} {` ${t('shared:github')}`} - + {autoUpdateAction !== 'reinstall' && robot != null ? null : ( - {t('up_to_date')} - + { handleUpdateBuildroot(robot) diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx index d965c2f9c98..4fda1e54a7a 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/ShortTrashBin.tsx @@ -8,7 +8,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -43,16 +43,16 @@ export function ShortTrashBin({ return ( - {t('short_trash_bin')} - - + + {t('short_trash_bin_description')} - + - {t('troubleshooting')} - - + {t('download_logs')} - + - {t('update_robot_software')} - - + + {t('branded:update_robot_software_description')} - + {t('branded:update_robot_software_link')} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx index 8b08af3ae23..77d70a66382 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/UsageSettings.tsx @@ -8,7 +8,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -47,21 +47,23 @@ export function UsageSettings({ marginTop={SPACING.spacing24} > - {t('usage_settings')} - - + {t('pause_protocol')} - - {t('pause_protocol_description')} + + + {t('pause_protocol_description')} + - {t('use_older_aspirate')} - - {t('use_older_aspirate_description')} + + + {t('use_older_aspirate_description')} + { // @ts-expect-error: ts can't tell that name is the correct value name={name} render={({ field, fieldState }) => ( - {isError ? ( - + {requestState != null && 'error' in requestState && 'message' in requestState?.error ? requestState?.error?.message : t('shared:unknown_error')} - + ) : null} - + {disconnectModalBody} - + {isError ? ( - + {t('branded:general_error_message')} - + ) : null} {isDisconnected ? ( diff --git a/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx b/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx index a591ad69b29..9ae9afdcee4 100644 --- a/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx +++ b/app/src/organisms/Devices/RobotSettings/RobotSettingsAdvanced.tsx @@ -9,7 +9,7 @@ import { JUSTIFY_SPACE_BETWEEN, SPACING, TYPOGRAPHY, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { Divider } from '../../../atoms/structure' @@ -292,10 +292,13 @@ export function FeatureFlagToggle({ marginBottom={SPACING.spacing16} > - + {title} - - {description} + + {description} - + {title} - - {description} + + {description} - + {t('wifi')} {ssid != null && ` - ${ssid}`} - + {wifi?.ipAddress != null ? ( @@ -162,35 +162,35 @@ export function RobotSettingsNetworking({ flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4} > - + {t('wireless_ip')} - - + + {wifi?.ipAddress} - + - + {t('wireless_subnet_mask')} - - + + {wifi?.subnetMask} - + - + {t('wireless_mac_address')} - - + + {wifi?.macAddress} - + @@ -219,9 +219,9 @@ export function RobotSettingsNetworking({ marginRight={SPACING.spacing12} data-testid="RobotSettings_Networking_usb_icon" /> - + {isFlex ? t('ethernet') : t('wired_usb')} - + @@ -231,42 +231,42 @@ export function RobotSettingsNetworking({ flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4} > - + {t('wired_ip')} - - + + {ethernet?.ipAddress} - + - + {t('wired_subnet_mask')} - - + + {ethernet?.subnetMask} - + - + {t('wired_mac_address')} - - + + {ethernet?.macAddress} - + ) : ( - + {isFlex ? t('not_connected_via_ethernet') : t('not_connected_via_wired_usb')} - + )} {isFlex ? null : ( @@ -277,13 +277,13 @@ export function RobotSettingsNetworking({ {t('wired_usb_description')} - {t('usb_to_ethernet_description')} - + {t('go_to_advanced_settings')} @@ -311,16 +311,19 @@ export function RobotSettingsNetworking({ marginRight={SPACING.spacing12} data-testid="RobotSettings_Networking_wifi_icon" /> - + {t('usb')} - + - + {isFlexConnectedViaUSB ? t('directly_connected_to_this_computer') : t('not_connected_via_usb')} - + ) : null} diff --git a/app/src/organisms/Devices/RobotSettings/SettingToggle.tsx b/app/src/organisms/Devices/RobotSettings/SettingToggle.tsx index ff738a0f713..e63025142a8 100644 --- a/app/src/organisms/Devices/RobotSettings/SettingToggle.tsx +++ b/app/src/organisms/Devices/RobotSettings/SettingToggle.tsx @@ -7,7 +7,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -49,10 +49,13 @@ export function SettingToggle({ marginBottom={SPACING.spacing16} > - + {title} - - {description} + + {description} - {modalBodyText} + {modalBodyText} - + {letUserExitUpdate && updateStep !== 'restart' && updateStep !== 'finished' ? ( @@ -164,7 +164,7 @@ export function RobotUpdateProgressModal({ ) : ( subProgressBarText )} - + )} @@ -218,9 +218,9 @@ function SuccessOrError({ errorMessage }: SuccessOrErrorProps): JSX.Element { return ( <> {renderedImg} - + {!errorMessage ? t('robot_update_success') : errorMessage} - + ) } diff --git a/app/src/organisms/Devices/RobotStatusHeader.tsx b/app/src/organisms/Devices/RobotStatusHeader.tsx index 681cf1f1324..32ef7c4da90 100644 --- a/app/src/organisms/Devices/RobotStatusHeader.tsx +++ b/app/src/organisms/Devices/RobotStatusHeader.tsx @@ -16,7 +16,7 @@ import { JUSTIFY_SPACE_BETWEEN, OVERFLOW_WRAP_ANYWHERE, SPACING, - StyledText, + LegacyStyledText, truncateString, TYPOGRAPHY, useHoverTooltip, @@ -84,7 +84,7 @@ export function RobotStatusHeader(props: RobotStatusHeaderProps): JSX.Element { e.stopPropagation() }} > - + - {robotModel} - + - {name} - + {iconName != null ? ( - {t('yes_blow_out_liquid')} + + {t('yes_blow_out_liquid')} + { @@ -156,7 +158,9 @@ export const BeforeBeginning = ({ > - {t('no_proceed_to_drop_tip')} + + {t('no_proceed_to_drop_tip')} + diff --git a/app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx b/app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx index 7079b946cc9..7eb619dc619 100644 --- a/app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx +++ b/app/src/organisms/DropTipWizardFlows/ChooseLocation.tsx @@ -15,7 +15,7 @@ import { PrimaryButton, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useDeckLocationSelect, } from '@opentrons/components' @@ -77,10 +77,13 @@ export const ChooseLocation = ( width="100%" flex="1" > - + {title} - - {body} + + {body} - + {t('shared:go_back')} - + - + {t('shared:go_back')} - + {i18n.format(t('move_to_slot'), 'capitalize')} diff --git a/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx b/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx index 50f21ea18a7..5bb5390e0d6 100644 --- a/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx +++ b/app/src/organisms/DropTipWizardFlows/DropTipWizard.tsx @@ -12,7 +12,7 @@ import { JUSTIFY_SPACE_BETWEEN, POSITION_ABSOLUTE, SPACING, - StyledText, + LegacyStyledText, useConditionalConfirm, } from '@opentrons/components' @@ -283,7 +283,7 @@ export const DropTipWizardContent = ( }} + components={{ block: }} /> } moveToAddressableArea={moveToAddressableArea} diff --git a/app/src/organisms/DropTipWizardFlows/JogToPosition.tsx b/app/src/organisms/DropTipWizardFlows/JogToPosition.tsx index c3d46fefac7..72adeb1b9cc 100644 --- a/app/src/organisms/DropTipWizardFlows/JogToPosition.tsx +++ b/app/src/organisms/DropTipWizardFlows/JogToPosition.tsx @@ -17,7 +17,7 @@ import { RESPONSIVENESS, SecondaryButton, SPACING, - StyledText, + LegacyStyledText, TEXT_ALIGN_CENTER, TYPOGRAPHY, } from '@opentrons/components' @@ -72,14 +72,14 @@ const ConfirmPosition = (props: ConfirmPositionProps): JSX.Element | null => { aria-label="ot-alert" /> - {currentStep === POSITION_AND_BLOWOUT ? t('confirm_blowout_location', { flow: flowTitle }) : t('confirm_drop_tip_location', { flow: flowTitle })} - + @@ -243,7 +243,7 @@ export const JogToPosition = (
{i18n.format(t('position_the_pipette'), 'capitalize')}
- {body} + {body} {/* no animations */} - + , }} /> - + - + {t('connect_the_estop_to_continue')} - - + + {t('estop_missing_description', { robotName: robotName })} - + ) @@ -118,10 +118,12 @@ function DesktopModal({ return ( - {t('connect_the_estop_to_continue')} - + + {t('connect_the_estop_to_continue')} + + {t('estop_missing_description', { robotName: robotName })} - + ) diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx index 3cd06ff2fd8..78b0c440931 100644 --- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx +++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx @@ -15,7 +15,7 @@ import { JUSTIFY_SPACE_BETWEEN, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -93,9 +93,9 @@ function TouchscreenModal({ return ( - + {t('branded:estop_pressed_description')} - + - + {t('estop')} - + {isEngaged ? t('estop_engaged') : t('estop_disengaged')} - + {t('branded:estop_pressed_description')} - + - + {t('before_you_begin')} - + }} + components={{ + block: , + }} /> {titleText} + return {titleText} } const buildIconHeading = (): JSX.Element => ( - {t('view_error_details')} + + {t('view_error_details')} + ) if (props.isOnDevice) { diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryError.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryError.tsx index 2e7ae06b9a4..6d21c129a49 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryError.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryError.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, Icon, - StyledText, + LegacyStyledText, SPACING, ALIGN_CENTER, JUSTIFY_END, @@ -190,8 +190,8 @@ export function ErrorContent({ alignItems={ALIGN_CENTER} textAlign={ALIGN_CENTER} > - {title} - {subTitle} + {title} + {subTitle} diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx index cd58002e2c1..578bca1f134 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/CancelRun.tsx @@ -8,7 +8,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { RECOVERY_MAP } from '../constants' @@ -75,12 +75,16 @@ function CancelRunConfirmation({ marginTop={SPACING.spacing24} color={COLORS.red50} /> - + {t('are_you_sure_you_want_to_cancel')} - - + + {t('if_tips_are_attached')} - + , + block: , }} /> ) diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx index ae2f8c6b4ae..7e5cf100b6e 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/IgnoreErrorSkipStep.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { ODD_SECTION_TITLE_STYLE, RECOVERY_MAP } from '../constants' @@ -81,9 +81,9 @@ export function IgnoreErrorStepHome({ if (isOnDevice) { return ( - + {t('ignore_similar_errors_later_in_run')} - + - + {t('you_may_want_to_remove', { mount })} - + , + block: , }} /> ) diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetrySameTips.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetrySameTips.tsx index 18d20cc5a26..1d8fa933c42 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetrySameTips.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetrySameTips.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Trans, useTranslation } from 'react-i18next' -import { StyledText } from '@opentrons/components' +import { LegacyStyledText } from '@opentrons/components' import { TwoColTextAndFailedStepNextStep } from '../shared' import { RECOVERY_MAP } from '../constants' @@ -48,7 +48,7 @@ export function RetrySameTipsInfo(props: RecoveryContentProps): JSX.Element { t={t} i18nKey="robot_will_retry_with_same_tips" components={{ - block: , + block: , }} /> ) diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetryStep.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetryStep.tsx index 5c534341ef3..ddaf6b5ee3c 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetryStep.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/RetryStep.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Trans, useTranslation } from 'react-i18next' -import { StyledText } from '@opentrons/components' +import { LegacyStyledText } from '@opentrons/components' import { RECOVERY_MAP } from '../constants' import { TwoColTextAndFailedStepNextStep } from '../shared' @@ -49,7 +49,7 @@ export function RetryStepInfo(props: RecoveryContentProps): JSX.Element { t={t} i18nKey="first_take_any_necessary_actions" components={{ - block: , + block: , }} /> ) diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx index d0b2e3ac67e..959b31d524d 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SelectRecoveryOption.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { @@ -61,9 +61,9 @@ export function SelectRecoveryOptionHome({ if (isOnDevice) { return ( - + {t('choose_a_recovery_action')} - + , + block: , }} /> ) diff --git a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SkipStepSameTips.tsx b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SkipStepSameTips.tsx index 06b073b7415..9a679ba8d17 100644 --- a/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SkipStepSameTips.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/RecoveryOptions/SkipStepSameTips.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Trans, useTranslation } from 'react-i18next' -import { StyledText } from '@opentrons/components' +import { LegacyStyledText } from '@opentrons/components' import { TwoColTextAndFailedStepNextStep } from '../shared' import { RECOVERY_MAP } from '../constants' @@ -48,7 +48,7 @@ export function SkipStepSameTipsInfo(props: RecoveryContentProps): JSX.Element { t={t} i18nKey="failed_dispense_step_not_completed" components={{ - block: , + block: , }} /> ) diff --git a/app/src/organisms/ErrorRecoveryFlows/shared/FailedStepNextStep.tsx b/app/src/organisms/ErrorRecoveryFlows/shared/FailedStepNextStep.tsx index 2cd70e568a6..7f3f9539534 100644 --- a/app/src/organisms/ErrorRecoveryFlows/shared/FailedStepNextStep.tsx +++ b/app/src/organisms/ErrorRecoveryFlows/shared/FailedStepNextStep.tsx @@ -5,7 +5,7 @@ import { Flex, DIRECTION_COLUMN, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { Command } from '../../../molecules/Command' @@ -25,7 +25,7 @@ export function FailedStepNextStep({ return ( - {t('failed_step')} + {t('failed_step')} {failedCommand != null && protocolAnalysis != null ? ( - {t('next_step')} + {t('next_step')} {commandAfterFailedCommand != null && protocolAnalysis != null ? ( - {title} + {title} ['as'] + as: React.ComponentProps['as'] stepCounts: RecoveryContentProps['stepCounts'] failedCommand: RecoveryContentProps['failedCommand'] robotType: RecoveryContentProps['robotType'] @@ -37,9 +37,9 @@ export function StepInfo({ return ( - + {`${t('at_step')} ${currentCopy}/${totalCopy}: `} - + {analysisCommand != null && protocolAnalysis != null ? ( - {leftColTitle} + {leftColTitle} {leftColBodyText} - {t('updating_firmware', { subsystem: t(subsystem) })} - + - + , }} /> - + { setInitiatedSubsystemUpdate(subsystem) diff --git a/app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx b/app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx index 967d9a0632f..8eb1783d908 100644 --- a/app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx +++ b/app/src/organisms/FirmwareUpdateModal/UpdateResultsModal.tsx @@ -8,7 +8,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' @@ -53,9 +53,9 @@ export function UpdateResultsModal( {!isSuccess ? ( - + {t('branded:firmware_update_download_logs')} - + - {t('successful_update')} - - + + , }} /> - + )} - + {firmwareText ?? 'Checking for updates...'} - + ) } diff --git a/app/src/organisms/GripperCard/AboutGripperSlideout.tsx b/app/src/organisms/GripperCard/AboutGripperSlideout.tsx index 8eea030d615..8c583cf75ea 100644 --- a/app/src/organisms/GripperCard/AboutGripperSlideout.tsx +++ b/app/src/organisms/GripperCard/AboutGripperSlideout.tsx @@ -6,7 +6,7 @@ import { Flex, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Slideout } from '../../atoms/Slideout' @@ -42,32 +42,32 @@ export const AboutGripperSlideout = ( {firmwareVersion != null && ( <> - {i18n.format(t('current_version'), 'upperCase')} - - + {firmwareVersion} - + )} - {i18n.format(t('serial_number'), 'upperCase')} - - + + {serialNumber} - + ) diff --git a/app/src/organisms/GripperCard/index.tsx b/app/src/organisms/GripperCard/index.tsx index afc289d2841..389ce296df4 100644 --- a/app/src/organisms/GripperCard/index.tsx +++ b/app/src/organisms/GripperCard/index.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Trans, useTranslation } from 'react-i18next' import { css } from 'styled-components' -import { SPACING, TYPOGRAPHY, StyledText } from '@opentrons/components' +import { SPACING, TYPOGRAPHY, LegacyStyledText } from '@opentrons/components' import { getGripperDisplayName } from '@opentrons/shared-data' import { useCurrentSubsystemUpdateQuery } from '@opentrons/react-api-client' import { Banner } from '../../atoms/Banner' @@ -139,16 +139,16 @@ export function GripperCard({ attachedGripper?.ok && !isCalibrated ? ( {isEstopNotDisengaged ? ( - + {t('calibration_needed_without_link')} - + ) : ( }} + components={{ block: }} /> } proceedButtonText={t('move_gantry_to_front')} diff --git a/app/src/organisms/GripperWizardFlows/MountGripper.tsx b/app/src/organisms/GripperWizardFlows/MountGripper.tsx index d045ea3dafa..da7d9a6c14e 100644 --- a/app/src/organisms/GripperWizardFlows/MountGripper.tsx +++ b/app/src/organisms/GripperWizardFlows/MountGripper.tsx @@ -9,7 +9,7 @@ import { PrimaryButton, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useInstrumentsQuery } from '@opentrons/react-api-client' @@ -104,9 +104,9 @@ export const MountGripper = ( setShowUnableToDetect(false) }} > - + {t('shared:go_back')} - + {isOnDevice ? ( } bodyText={ - {t('attached_gripper_and_screw_in')} + + {t('attached_gripper_and_screw_in')} + } proceedButtonText={t('continue')} proceedIsDisabled={isPending} diff --git a/app/src/organisms/GripperWizardFlows/MovePin.tsx b/app/src/organisms/GripperWizardFlows/MovePin.tsx index eaaf8ae9332..1a0b42ebc7b 100644 --- a/app/src/organisms/GripperWizardFlows/MovePin.tsx +++ b/app/src/organisms/GripperWizardFlows/MovePin.tsx @@ -6,7 +6,7 @@ import { TYPOGRAPHY, SPACING, Flex, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { css } from 'styled-components' import { SimpleWizardBody } from '../../molecules/SimpleWizardBody' @@ -273,9 +273,12 @@ export const MovePin = (props: MovePinProps): JSX.Element | null => { i18nKey={'return_pin_error'} values={{ error: errorMessage }} components={{ - block: , + block: , bold: ( - + ), }} /> @@ -285,7 +288,7 @@ export const MovePin = (props: MovePinProps): JSX.Element | null => { {body}} + bodyText={{body}} proceedButtonText={buttonText} proceed={handleOnClick} proceedIsDisabled={maintenanceRunId == null} diff --git a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx index 9f4cae7bf7a..c91514b9fe9 100644 --- a/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx +++ b/app/src/organisms/GripperWizardFlows/UnmountGripper.tsx @@ -11,7 +11,7 @@ import { PrimaryButton, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useInstrumentsQuery } from '@opentrons/react-api-client' @@ -115,9 +115,9 @@ export const UnmountGripper = ( setShowGripperStillDetected(false) }} > - + {t('shared:go_back')} - + {isOnDevice ? ( } bodyText={ - {t('hold_gripper_and_loosen_screws')} + + {t('hold_gripper_and_loosen_screws')} + } proceedButtonText={t('continue')} proceed={handleContinue} diff --git a/app/src/organisms/HowCalibrationWorksModal/index.tsx b/app/src/organisms/HowCalibrationWorksModal/index.tsx index 42fceb41dd3..3c73fce3d3f 100644 --- a/app/src/organisms/HowCalibrationWorksModal/index.tsx +++ b/app/src/organisms/HowCalibrationWorksModal/index.tsx @@ -13,7 +13,7 @@ import { SPACING, TEXT_TRANSFORM_CAPITALIZE, TYPOGRAPHY, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { getTopPortalEl } from '../../App/portal' @@ -39,9 +39,9 @@ export function HowCalibrationWorksModal({ maxHeight="28.125rem" > - + {t('robot_cal_description')} - + {/* deck calibration */} - {t('deck_calibration_title')} - + - {t('tip_length_cal_title')} - + {/* pipette offset calibration */} - {t('pipette_offset_cal')} - + - + {description} - +
    {steps.map(step => (
  • - {step} + {step}
    • ))}
diff --git a/app/src/organisms/IncompatibleModule/IncompatibleModuleDesktopModalBody.tsx b/app/src/organisms/IncompatibleModule/IncompatibleModuleDesktopModalBody.tsx index 020ad066760..0161a75cd05 100644 --- a/app/src/organisms/IncompatibleModule/IncompatibleModuleDesktopModalBody.tsx +++ b/app/src/organisms/IncompatibleModule/IncompatibleModuleDesktopModalBody.tsx @@ -7,7 +7,7 @@ import { JUSTIFY_FLEX_START, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, OVERFLOW_SCROLL, Icon, @@ -64,7 +64,7 @@ export function IncompatibleModuleDesktopModalBody({ size={SPACING.spacing32} color={COLORS.red50} /> - - + ))} - + - + ) diff --git a/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx b/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx index f1be6b125b5..54883f2546c 100644 --- a/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx +++ b/app/src/organisms/IncompatibleModule/IncompatibleModuleODDModalBody.tsx @@ -5,7 +5,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, OVERFLOW_SCROLL, } from '@opentrons/components' @@ -28,9 +28,9 @@ export function IncompatibleModuleODDModalBody({ return ( - + - + {modules.map(module => ( - {getModuleDisplayName(module.moduleModel)} - + ))} diff --git a/app/src/organisms/InstrumentInfo/index.tsx b/app/src/organisms/InstrumentInfo/index.tsx index 85bbe7cd3fa..d87491a21bf 100644 --- a/app/src/organisms/InstrumentInfo/index.tsx +++ b/app/src/organisms/InstrumentInfo/index.tsx @@ -9,7 +9,7 @@ import { JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -191,22 +191,22 @@ function InfoItem(props: InfoItemProps): JSX.Element { lineHeight={TYPOGRAPHY.lineHeight36} {...props} > - {props.label} - - + {props.value} - + ) } diff --git a/app/src/organisms/InstrumentMountItem/LabeledMount.tsx b/app/src/organisms/InstrumentMountItem/LabeledMount.tsx index 65d562543af..515d0ab0c54 100644 --- a/app/src/organisms/InstrumentMountItem/LabeledMount.tsx +++ b/app/src/organisms/InstrumentMountItem/LabeledMount.tsx @@ -11,7 +11,7 @@ import { Icon, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TEXT_TRANSFORM_CAPITALIZE, TYPOGRAPHY, } from '@opentrons/components' @@ -54,7 +54,7 @@ export function LabeledMount(props: LabeledMountProps): JSX.Element { alignItems={ALIGN_CENTER} gridGap={SPACING.spacing24} > - {isNinetySixChannel ? t('left_right') : t('mount', { side: mount })} - - + {instrumentName == null ? t('empty') : instrumentName} - + diff --git a/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx b/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx index 90025d8a663..97fc9e7f69c 100644 --- a/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx +++ b/app/src/organisms/InterventionModal/InterventionCommandMessage.tsx @@ -8,7 +8,7 @@ import { Flex, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TEXT_TRANSFORM_CAPITALIZE, TEXT_TRANSFORM_UPPERCASE, TYPOGRAPHY, @@ -51,16 +51,16 @@ export function InterventionCommandMessage({ return ( - + {t('notes')} - - + + {commandMessage != null && commandMessage !== '' ? commandMessage.length > 220 ? `${commandMessage.substring(0, 217)}...` : commandMessage : t('wait_for_resume')} - + ) } diff --git a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx index 0def54f3dcb..469e5e9f2d7 100644 --- a/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx +++ b/app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx @@ -17,7 +17,7 @@ import { MoveLabwareOnDeck, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TEXT_TRANSFORM_UPPERCASE, TYPOGRAPHY, } from '@opentrons/components' @@ -165,12 +165,12 @@ export function MoveLabwareInterventionContent({ > - + {t('labware_name')} - - + + {labwareName} - + diff --git a/app/src/organisms/InterventionModal/PauseInterventionContent.tsx b/app/src/organisms/InterventionModal/PauseInterventionContent.tsx index 38f19579228..f3f617f20fd 100644 --- a/app/src/organisms/InterventionModal/PauseInterventionContent.tsx +++ b/app/src/organisms/InterventionModal/PauseInterventionContent.tsx @@ -12,7 +12,7 @@ import { SPACING, TYPOGRAPHY, useInterval, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { EMPTY_TIMESTAMP } from '../Devices/constants' @@ -95,10 +95,10 @@ function PauseHeader({ startedAt }: PauseHeaderProps): JSX.Element { return ( - + {i18n.format(t('paused_for'), 'capitalize')} - - {runTime} + + {runTime} ) } diff --git a/app/src/organisms/InterventionModal/index.tsx b/app/src/organisms/InterventionModal/index.tsx index 7c7e00416f8..1e7cb9e8475 100644 --- a/app/src/organisms/InterventionModal/index.tsx +++ b/app/src/organisms/InterventionModal/index.tsx @@ -17,7 +17,7 @@ import { PrimaryButton, SPACING, TYPOGRAPHY, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' @@ -144,7 +144,7 @@ export function InterventionModal({ ) : ( {headerTitle}} + iconHeading={{headerTitle}} iconName={iconName} type="intervention-required" > diff --git a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx index d37e9710530..d84dcd1e2bc 100644 --- a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx +++ b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx @@ -19,7 +19,7 @@ import { POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useConditionalConfirm, useOnClickOutside, @@ -126,14 +126,14 @@ export function CustomLabwareOverflowMenu( {t('delete')} - + {t('open_labware_creator')} - + )} @@ -145,10 +145,12 @@ export function CustomLabwareOverflowMenu( onClose={handleCancelModal} > - {t('def_moved_to_trash')} - + + {t('def_moved_to_trash')} + + {t('cannot-run-python-missing-labware')} - + {/* labware category name min:7.5 rem for the longest, Aluminum Block */} - + {displayCategory} - + {/* labware info */} @@ -77,17 +77,17 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element { justifyContent={JUSTIFY_SPACE_BETWEEN} > - + {displayName} - + {isCustomDefinition ? ( - {t('custom_def')} - + ) : ( - {t('branded:opentrons_def')} - + )} - {t('api_name')} - + - {apiName} + {apiName} @@ -134,20 +134,20 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element { > - {t('date_added')} - - + {format(new Date(modified), 'MM/dd/yyyy')} - + )} diff --git a/app/src/organisms/LabwareDetails/InsertDetails.tsx b/app/src/organisms/LabwareDetails/InsertDetails.tsx index f1eacc69b8e..06120b3a3cf 100644 --- a/app/src/organisms/LabwareDetails/InsertDetails.tsx +++ b/app/src/organisms/LabwareDetails/InsertDetails.tsx @@ -3,7 +3,7 @@ import { BORDERS, Box, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { getUniqueWellProperties } from '@opentrons/shared-data' @@ -35,12 +35,12 @@ export function InsertDetails(props: InsertDetailsProps): JSX.Element { marginY={SPACING.spacing16} > - {wellProps.metadata.displayName} - + - {t('manufacturer')} - {manufacturerValue} + {t('manufacturer')} + {manufacturerValue} {links != null && links.length > 0 && links.map((href, index) => ( - + website - + ))} {brandId != null && brandId.length > 0 && ( - {t('manufacturer_number')} - {brandId.join(', ')} + + {t('manufacturer_number')} + + {brandId.join(', ')} )} diff --git a/app/src/organisms/LabwareDetails/StyledComponents/ExpandingTitle.tsx b/app/src/organisms/LabwareDetails/StyledComponents/ExpandingTitle.tsx index 1e5b1c12930..9863829f079 100644 --- a/app/src/organisms/LabwareDetails/StyledComponents/ExpandingTitle.tsx +++ b/app/src/organisms/LabwareDetails/StyledComponents/ExpandingTitle.tsx @@ -8,7 +8,7 @@ import { JUSTIFY_SPACE_BETWEEN, Link, SIZE_1, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Divider } from '../../../atoms/structure' @@ -32,9 +32,9 @@ export function ExpandingTitle(props: ExpandingTitleProps): JSX.Element { justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER} > - + {label} - + {diagram != null && ( - + {label} - - {value} + + {value} ) } diff --git a/app/src/organisms/LabwareDetails/WellCount.tsx b/app/src/organisms/LabwareDetails/WellCount.tsx index bcb1b7b9389..b9ce2823489 100644 --- a/app/src/organisms/LabwareDetails/WellCount.tsx +++ b/app/src/organisms/LabwareDetails/WellCount.tsx @@ -7,7 +7,7 @@ import { JUSTIFY_SPACE_BETWEEN, SPACING, TYPOGRAPHY, - StyledText, + LegacyStyledText, } from '@opentrons/components' export interface WellCountProps { @@ -26,10 +26,10 @@ export function WellCount(props: WellCountProps): JSX.Element { alignItems={ALIGN_CENTER} marginBottom={SPACING.spacing16} > - + {t(wellLabel)} {t('count')} - - {count} + + {count} ) } diff --git a/app/src/organisms/LabwareDetails/WellProperties.tsx b/app/src/organisms/LabwareDetails/WellProperties.tsx index c08ee5a61d7..aa20ad8f0dd 100644 --- a/app/src/organisms/LabwareDetails/WellProperties.tsx +++ b/app/src/organisms/LabwareDetails/WellProperties.tsx @@ -9,7 +9,7 @@ import { DIRECTION_ROW, JUSTIFY_SPACE_BETWEEN, DIRECTION_COLUMN, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { getDisplayVolume } from '@opentrons/shared-data' @@ -59,12 +59,12 @@ export function WellProperties(props: WellPropertiesProps): JSX.Element { flexDirection={DIRECTION_COLUMN} justifyContent={JUSTIFY_SPACE_BETWEEN} > - {t('max_volume')} - + {t('max_volume')} + {vol != null ? `${String(getDisplayVolume(vol, units, 2))} ${String(units)}` : t('various')} - + {wellBottomShape != null && wellBottomValue && ( @@ -73,10 +73,10 @@ export function WellProperties(props: WellPropertiesProps): JSX.Element { justifyContent={JUSTIFY_SPACE_BETWEEN} marginRight={SPACING.spacing16} > - + {t(wellLabel)} {t('shape')} - - {wellBottomValue} + + {wellBottomValue} - + {props.labware.definition.metadata.displayName} - + {' '} - {t('branded:opentrons_def')} - + )} {modified != null && filename != null && ( @@ -142,13 +142,13 @@ export function LabwareDetails(props: LabwareDetailsProps): JSX.Element { paddingRight={SPACING.spacing2} alignItems={ALIGN_CENTER} > - {t('last_updated')} {format(new Date(modified), 'MM/dd/yyyy')} - + - {t('api_name')} + {t('api_name')} - {t('table_view')} + {t('table_view')} - {t('jupyter_notebook')} + {t('jupyter_notebook')} - {t('cli_ssh')} + {t('cli_ssh')} { } bodyText={ - + { bold: , }} /> - + } proceedButtonText={i18n.format(t('shared:continue'), 'capitalize')} proceed={handleProbeAttached} diff --git a/app/src/organisms/LabwarePositionCheck/CheckItem.tsx b/app/src/organisms/LabwarePositionCheck/CheckItem.tsx index 00a2d181cdf..4d3e6af1a94 100644 --- a/app/src/organisms/LabwarePositionCheck/CheckItem.tsx +++ b/app/src/organisms/LabwarePositionCheck/CheckItem.tsx @@ -5,7 +5,7 @@ import { Trans, useTranslation } from 'react-i18next' import { DIRECTION_COLUMN, Flex, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { RobotMotionLoader } from './RobotMotionLoader' @@ -165,7 +165,10 @@ export const CheckItem = (props: CheckItemProps): JSX.Element | null => { tOptions={{ labware: labwareDisplayName, location: displayLocation }} components={{ bold: ( - + ), }} /> @@ -179,7 +182,10 @@ export const CheckItem = (props: CheckItemProps): JSX.Element | null => { tOptions={{ tip_rack: labwareDisplayName, location: displayLocation }} components={{ bold: ( - + ), }} /> @@ -201,7 +207,10 @@ export const CheckItem = (props: CheckItemProps): JSX.Element | null => { }} components={{ bold: ( - + ), }} /> @@ -454,7 +463,10 @@ export const CheckItem = (props: CheckItemProps): JSX.Element | null => { ? t('check_tip_location') : t('check_well_location'), }} - components={{ block: , bold: }} + components={{ + block: , + bold: , + }} /> } labwareDef={labwareDef} diff --git a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx index 4e5a45a965b..303fbf4f84e 100644 --- a/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx +++ b/app/src/organisms/LabwarePositionCheck/DetachProbe.tsx @@ -4,7 +4,7 @@ import { css } from 'styled-components' import { RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { RobotMotionLoader } from './RobotMotionLoader' @@ -134,9 +134,9 @@ export const DetachProbe = (props: DetachProbeProps): JSX.Element | null => { } bodyText={ - + {i18n.format(t('remove_probe'), 'capitalize')} - + } proceedButtonText={t('confirm_detached')} proceed={handleProbeDetached} diff --git a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx index 4ee467d742b..1f03223c0c7 100644 --- a/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx +++ b/app/src/organisms/LabwarePositionCheck/ExitConfirmation.tsx @@ -14,7 +14,7 @@ import { SecondaryButton, SIZE_3, SPACING, - StyledText, + LegacyStyledText, TEXT_ALIGN_CENTER, TYPOGRAPHY, } from '@opentrons/components' @@ -66,9 +66,9 @@ export const ExitConfirmation = (props: ExitConfirmationProps): JSX.Element => { ? t('remove_probe_before_exit') : t('exit_screen_title')} - + {t('exit_screen_subtitle')} - + )} diff --git a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx index ddeeb006ce6..e6a57928419 100644 --- a/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx +++ b/app/src/organisms/LabwarePositionCheck/FatalErrorModal.tsx @@ -14,7 +14,7 @@ import { PrimaryButton, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TEXT_ALIGN_CENTER, TEXT_TRANSFORM_CAPITALIZE, TYPOGRAPHY, @@ -61,19 +61,19 @@ export function FatalErrorModal(props: FatalErrorModalProps): JSX.Element { {i18n.format(t('shared:something_went_wrong'), 'sentenceCase')} {shouldUseMetalProbe ? ( - {t('remove_probe_before_exit')} - + ) : null} - + {t('branded:help_us_improve_send_error_report', { support_email: SUPPORT_EMAIL, })} - + }} + components={{ block: }} /> } rightElement={ @@ -175,9 +175,9 @@ function ViewOffsets(props: ViewOffsetsProps): JSX.Element { aria-label="show labware offsets" > - + {i18n.format(t('view_current_offsets'), 'capitalize')} - + {showOffsetsTable ? createPortal( @@ -189,9 +189,12 @@ function ViewOffsets(props: ViewOffsetsProps): JSX.Element { flexDirection={DIRECTION_COLUMN} justifyContent={JUSTIFY_SPACE_BETWEEN} header={ - + {i18n.format(t('labware_offset_data'), 'capitalize')} - + } footer={ { flexDirection={DIRECTION_COLUMN} justifyContent={JUSTIFY_SPACE_BETWEEN} header={ - { `} > {t('move_to_a1_position')} - + } footer={ - {i18n.format(t('labware_offset_data'), 'capitalize')} - + {[x, y, z].map((axis, index) => ( - {axisLabels[index]} - - {axis.toFixed(1)} + + {axis.toFixed(1)} ))} diff --git a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx index f7a0af90904..4df41813983 100644 --- a/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx +++ b/app/src/organisms/LabwarePositionCheck/PickUpTip.tsx @@ -4,7 +4,7 @@ import isEqual from 'lodash/isEqual' import { DIRECTION_COLUMN, Flex, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -107,7 +107,10 @@ export const PickUpTip = (props: PickUpTipProps): JSX.Element | null => { tOptions={{ tip_rack: labwareDisplayName, location: displayLocation }} components={{ bold: ( - + ), }} />, @@ -419,7 +422,10 @@ export const PickUpTip = (props: PickUpTipProps): JSX.Element | null => { ? 'ensure_nozzle_position_odd' : 'ensure_nozzle_position_desktop' } - components={{ block: , bold: }} + components={{ + block: , + bold: , + }} values={{ tip_type: t('pipette_nozzle'), item_location: t('check_tip_location'), diff --git a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx index 235a395a03a..65320d3cc36 100644 --- a/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx +++ b/app/src/organisms/LabwarePositionCheck/ResultsSummary.tsx @@ -27,7 +27,7 @@ import { PrimaryButton, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { PythonLabwareOffsetSnippet } from '../../molecules/PythonLabwareOffsetSnippet' @@ -217,9 +217,9 @@ export const ResultsSummary = ( marginRight={SPACING.spacing8} /> ) : null} - + {i18n.format(t('apply_offsets'), 'capitalize')} - + @@ -295,7 +295,7 @@ const OffsetTable = (props: OffsetTableProps): JSX.Element => { ${BORDERS.borderRadius4}; `} > - @@ -305,10 +305,10 @@ const OffsetTable = (props: OffsetTableProps): JSX.Element => { t as TFunction, i18n )} - + - {labwareDisplayName} + {labwareDisplayName} { `} > {isEqual(vector, IDENTITY_VECTOR) ? ( - {t('no_labware_offsets')} + {t('no_labware_offsets')} ) : ( {[vector.x, vector.y, vector.z].map((axis, index) => ( - 0 ? SPACING.spacing8 : 0} marginRight={SPACING.spacing4} fontWeight={TYPOGRAPHY.fontWeightSemiBold} > {['X', 'Y', 'Z'][index]} - - {axis.toFixed(1)} + + + {axis.toFixed(1)} + ))} @@ -383,21 +385,21 @@ export const TerseOffsetTable = (props: OffsetTableProps): JSX.Element => { ) : null} - {labwareDisplayName} - + {isEqual(vector, IDENTITY_VECTOR) ? ( - {t('no_labware_offsets')} + {t('no_labware_offsets')} ) : ( {[vector.x, vector.y, vector.z].map((axis, index) => ( - 0 ? SPACING.spacing8 : 0} @@ -405,13 +407,13 @@ export const TerseOffsetTable = (props: OffsetTableProps): JSX.Element => { fontWeight={TYPOGRAPHY.fontWeightSemiBold} > {['X', 'Y', 'Z'][index]} - - + {axis.toFixed(1)} - + ))} diff --git a/app/src/organisms/LabwarePositionCheck/ReturnTip.tsx b/app/src/organisms/LabwarePositionCheck/ReturnTip.tsx index 2192562654c..d3b56d9f88f 100644 --- a/app/src/organisms/LabwarePositionCheck/ReturnTip.tsx +++ b/app/src/organisms/LabwarePositionCheck/ReturnTip.tsx @@ -3,7 +3,7 @@ import { Trans, useTranslation } from 'react-i18next' import { DIRECTION_COLUMN, Flex, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -78,7 +78,10 @@ export const ReturnTip = (props: ReturnTipProps): JSX.Element | null => { tOptions={{ tip_rack: labwareDisplayName, location: displayLocation }} components={{ bold: ( - + ), }} />, diff --git a/app/src/organisms/LabwarePositionCheck/RobotMotionLoader.tsx b/app/src/organisms/LabwarePositionCheck/RobotMotionLoader.tsx index d3d0d237f27..dbb5f6973f2 100644 --- a/app/src/organisms/LabwarePositionCheck/RobotMotionLoader.tsx +++ b/app/src/organisms/LabwarePositionCheck/RobotMotionLoader.tsx @@ -10,7 +10,7 @@ import { RESPONSIVENESS, SIZE_4, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -31,7 +31,7 @@ export function RobotMotionLoader(props: RobotMotionLoaderProps): JSX.Element { > {header != null ? {header} : null} - {body != null ? {body} : null} + {body != null ? {body} : null} ) } diff --git a/app/src/organisms/LabwarePositionCheck/TipConfirmation.tsx b/app/src/organisms/LabwarePositionCheck/TipConfirmation.tsx index 4b10e779567..f34d64ed1b1 100644 --- a/app/src/organisms/LabwarePositionCheck/TipConfirmation.tsx +++ b/app/src/organisms/LabwarePositionCheck/TipConfirmation.tsx @@ -9,7 +9,7 @@ import { PrimaryButton, SecondaryButton, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { useTranslation } from 'react-i18next' @@ -62,9 +62,9 @@ export function TipConfirmation(props: TipConfirmationProps): JSX.Element { padding={SPACING.spacing32} minHeight="29.5rem" > - + {t('did_pipette_pick_up_tip')} - + - {t('shared:close')} - + } > @@ -100,23 +100,23 @@ export const AboutModuleSlideout = ( flexDirection={DIRECTION_COLUMN} data-testid={`alert_item_version_${String(module.moduleModel)}`} > - {i18n.format(t('current_version'), 'upperCase')} - - + {module.firmwareVersion} - + - {i18n.format(t('serial_number'), 'upperCase')} - - + {module.serialNumber} - + ) diff --git a/app/src/organisms/ModuleCard/AbsorbanceReaderData.tsx b/app/src/organisms/ModuleCard/AbsorbanceReaderData.tsx index 8bcb496e7fa..e6a30b742d7 100644 --- a/app/src/organisms/ModuleCard/AbsorbanceReaderData.tsx +++ b/app/src/organisms/ModuleCard/AbsorbanceReaderData.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' -import { TYPOGRAPHY, StyledText } from '@opentrons/components' +import { TYPOGRAPHY, LegacyStyledText } from '@opentrons/components' import type { AbsorbanceReaderModule } from '../../redux/modules/types' interface AbsorbanceReaderProps { @@ -15,14 +15,14 @@ export const AbsorbanceReaderData = ( return ( <> - {t('abs_reader_status', { status: moduleData.status, })} - + ) } diff --git a/app/src/organisms/ModuleCard/AbsorbanceReaderSlideout.tsx b/app/src/organisms/ModuleCard/AbsorbanceReaderSlideout.tsx index 1224357435c..fd04a4730a7 100644 --- a/app/src/organisms/ModuleCard/AbsorbanceReaderSlideout.tsx +++ b/app/src/organisms/ModuleCard/AbsorbanceReaderSlideout.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { getModuleDisplayName } from '@opentrons/shared-data' -import { SPACING, StyledText, TYPOGRAPHY } from '@opentrons/components' +import { SPACING, LegacyStyledText, TYPOGRAPHY } from '@opentrons/components' import { Slideout } from '../../atoms/Slideout' import type { AbsorbanceReaderModule } from '../../redux/modules/types' @@ -31,14 +31,14 @@ export const AbsorbanceReaderSlideout = ( onCloseClick={handleCloseSlideout} isExpanded={isExpanded} > - {t('set_absorbance_reader')} - + ) } diff --git a/app/src/organisms/ModuleCard/Collapsible.tsx b/app/src/organisms/ModuleCard/Collapsible.tsx index d307a4789f9..44b7c883b8a 100644 --- a/app/src/organisms/ModuleCard/Collapsible.tsx +++ b/app/src/organisms/ModuleCard/Collapsible.tsx @@ -9,7 +9,7 @@ import { JUSTIFY_SPACE_BETWEEN, SIZE_1, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import type { IconName } from '@opentrons/components' @@ -53,7 +53,7 @@ export function Collapsible({ onClick={toggleExpanded} > - {title} + {title} - + {t( isProceedToRunModal ? 'module_anchors_extended' : 'module_should_have_anchors' )} - - {t('thermal_adapter_attached_to_module')} + + + {t('thermal_adapter_attached_to_module')} + - {t('dont_show_me_again', { ns: 'shared' })} - + - + {t('view')} - + - {t('error_details')} - + @@ -93,11 +93,11 @@ export function ErrorInfo(props: ErrorInfoProps): JSX.Element | null { > {errorDetails != null ? ( - {errorDetails} + {errorDetails} ) : null} - + {t('branded:module_error_contact_support')} - + - + {t('firmware_update_failed')} - + ) @@ -48,12 +48,12 @@ export const FirmwareUpdateFailedModal = ( flexDirection={DIRECTION_COLUMN} data-testid={`FirmwareUpdateFailedModal_body_text_${module.serialNumber}`} > - + {t('an_error_occurred_while_updating_module', { moduleName: getModuleDisplayName(module.moduleModel), })} - - {errorMessage} + + {errorMessage} + {t('open', { ns: 'shared' })} - + ) } case 'closing': case 'idle_closed': { if (isShaking) { return ( - + {t('closed_and_locked', { ns: 'heater_shaker' })} - + ) } else { return ( - + {t('closed', { ns: 'heater_shaker' })} - + ) } } @@ -113,7 +117,7 @@ export const HeaterShakerModuleData = ( flexDirection={DIRECTION_COLUMN} data-testid="heater_shaker_module_data_temp" > - {t('heater')} - + - - + + {t('current_temp', { temp: moduleData.currentTemperature })} - + )} - {t('shaker')} - + - - + {t('current_speed', { speed: moduleData.currentSpeed })} - + - {t('labware_latch', { ns: 'heater_shaker' })} - + } > - {t('set_target_temp_of_hs')} - + - {t('set_block_temp')} - +
- @@ -38,7 +38,7 @@ export const MagneticModuleData = ( height: moduleHeight, } )} - + ) } diff --git a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx index 627e9889e07..8f413ddd7a6 100644 --- a/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/MagneticModuleSlideout.tsx @@ -10,7 +10,7 @@ import { JUSTIFY_END, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -138,7 +138,7 @@ export const MagneticModuleSlideout = ( /> } > - - + {t('height_ranges', { gen: info.version })} - + - + {t('max_engage_height')} - - + + {t('labware_bottom')} - - {t('disengaged')} + + {t('disengaged')} - {max} - - + {labwareBottom} - - {disengageHeight} + + {disengageHeight} - {t('set_engage_height')} - + { marginRight="3.625rem" width="50%" > - + {t('branded:modal_instructions')} - + - + {t(targetTemp == null ? 'na_temp' : 'target_temp', { temp: targetTemp, })} - - {t('current_temp', { temp: currentTemp })} + + + {t('current_temp', { temp: currentTemp })} + ) diff --git a/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx b/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx index 5337dc158e7..2e1650bb4fe 100644 --- a/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/TemperatureModuleSlideout.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -77,7 +77,7 @@ export const TemperatureModuleSlideout = ( /> } > - + - {t('set_temperature')} - + - + {t('heater_shaker:test_shake_slideout_banner_info')} - + - {t('labware_latch')} - - + {getLatchStatus(module.data.labwareLatchStatus)} - + - {t('shake_speed')} - + - + > - {t('tc_lid')} - + @@ -102,7 +102,7 @@ export const ThermocyclerModuleData = ( id="lidTempStatus" /> - - + + {t('current_temp', { temp: data.lidTemperature })} - + - {t('tc_block')} - + - - + {t('current_temp', { temp: data.currentTemperature })} - + ) diff --git a/app/src/organisms/ModuleCard/ThermocyclerModuleSlideout.tsx b/app/src/organisms/ModuleCard/ThermocyclerModuleSlideout.tsx index a8d3438d6b5..6cf2bbfa1f1 100644 --- a/app/src/organisms/ModuleCard/ThermocyclerModuleSlideout.tsx +++ b/app/src/organisms/ModuleCard/ThermocyclerModuleSlideout.tsx @@ -14,7 +14,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Slideout } from '../../atoms/Slideout' @@ -110,7 +110,7 @@ export const ThermocyclerModuleSlideout = ( /> } > - + - {t(isSecondaryTemp ? 'set_lid_temperature' : 'set_block_temperature')} - + { i18nKey="hot_to_the_touch" components={{ bold: , - block: , + block: ( + + ), }} /> @@ -401,13 +403,13 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => { aria-label="ot-spinner" color={COLORS.grey60} /> - + {t('updating_firmware')} - + ) : ( <> - { port: module?.usbPort?.port, }) : t('usb_port_not_connected')} - + { marginRight={SPACING.spacing2} color={COLORS.grey60} /> - + {getModuleDisplayName(module.moduleModel)} - + )} diff --git a/app/src/organisms/ModuleWizardFlows/AttachProbe.tsx b/app/src/organisms/ModuleWizardFlows/AttachProbe.tsx index 4a8f70656e4..b509abfc6dd 100644 --- a/app/src/organisms/ModuleWizardFlows/AttachProbe.tsx +++ b/app/src/organisms/ModuleWizardFlows/AttachProbe.tsx @@ -5,7 +5,7 @@ import { Flex, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { LEFT, WASTE_CHUTE_FIXTURES } from '@opentrons/shared-data' @@ -97,7 +97,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { const bodyText = ( <> - + { bold: , }} /> - + {wasteChuteConflictWith96Channel && ( }} + components={{ block: }} /> } proceedButtonText={t('start_setup')} diff --git a/app/src/organisms/ModuleWizardFlows/DetachProbe.tsx b/app/src/organisms/ModuleWizardFlows/DetachProbe.tsx index 6d43d7b7b96..c95d515c4f8 100644 --- a/app/src/organisms/ModuleWizardFlows/DetachProbe.tsx +++ b/app/src/organisms/ModuleWizardFlows/DetachProbe.tsx @@ -8,7 +8,7 @@ import { Flex, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { GenericWizardTile } from '../../molecules/GenericWizardTile' @@ -61,7 +61,9 @@ export const DetachProbe = ( ) const bodyText = ( - {t('detach_probe_description')} + + {t('detach_probe_description')} + ) return ( diff --git a/app/src/organisms/ModuleWizardFlows/PlaceAdapter.tsx b/app/src/organisms/ModuleWizardFlows/PlaceAdapter.tsx index b5d5e5cf80d..f349c15239c 100644 --- a/app/src/organisms/ModuleWizardFlows/PlaceAdapter.tsx +++ b/app/src/organisms/ModuleWizardFlows/PlaceAdapter.tsx @@ -12,7 +12,7 @@ import { Flex, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -152,15 +152,21 @@ export const PlaceAdapter = (props: PlaceAdapterProps): JSX.Element | null => { } const moduleType = attachedModule.moduleType - let bodyText = {t('place_flush')} + let bodyText = ( + {t('place_flush')} + ) if (moduleType === HEATERSHAKER_MODULE_TYPE) { bodyText = ( - {t('place_flush_heater_shaker')} + + {t('place_flush_heater_shaker')} + ) } if (moduleType === THERMOCYCLER_MODULE_TYPE) { bodyText = ( - {t('place_flush_thermocycler')} + + {t('place_flush_thermocycler')} + ) } diff --git a/app/src/organisms/ModuleWizardFlows/SelectLocation.tsx b/app/src/organisms/ModuleWizardFlows/SelectLocation.tsx index 2c78ecfb26b..0b110f3bce4 100644 --- a/app/src/organisms/ModuleWizardFlows/SelectLocation.tsx +++ b/app/src/organisms/ModuleWizardFlows/SelectLocation.tsx @@ -21,7 +21,7 @@ import { RESPONSIVENESS, SIZE_1, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Banner } from '../../atoms/Banner' @@ -69,9 +69,9 @@ export const SelectLocation = ( ) const bodyText = ( <> - + {t('select_the_slot', { module: moduleName })} - + {t('module_secured')} diff --git a/app/src/organisms/ModuleWizardFlows/index.tsx b/app/src/organisms/ModuleWizardFlows/index.tsx index 8c4bb1e8e97..01bb358101b 100644 --- a/app/src/organisms/ModuleWizardFlows/index.tsx +++ b/app/src/organisms/ModuleWizardFlows/index.tsx @@ -3,7 +3,7 @@ import { createPortal } from 'react-dom' import { useSelector } from 'react-redux' import { Trans, useTranslation } from 'react-i18next' import { useDeleteMaintenanceRunMutation } from '@opentrons/react-api-client' -import { COLORS, StyledText } from '@opentrons/components' +import { COLORS, LegacyStyledText } from '@opentrons/components' import { getModuleType, getModuleDisplayName, @@ -288,7 +288,7 @@ export const ModuleWizardFlows = ( i18nKey={'branded:module_calibration_failed'} values={{ error: errorMessage }} components={{ - block: , + block: , }} /> ) diff --git a/app/src/organisms/Navigation/NavigationMenu.tsx b/app/src/organisms/Navigation/NavigationMenu.tsx index 83abd272a56..9c933f31a38 100644 --- a/app/src/organisms/Navigation/NavigationMenu.tsx +++ b/app/src/organisms/Navigation/NavigationMenu.tsx @@ -9,7 +9,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -68,13 +68,13 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { aria-label="reset-position_icon" size="2.5rem" /> - {t('home_gantry')} - + @@ -85,13 +85,13 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { color={COLORS.black90} aria-label="restart_icon" /> - {t('robot_controls:restart_label')} - + - {t('deck_configuration')} - + @@ -119,7 +119,7 @@ export function NavigationMenu(props: NavigationMenuProps): JSX.Element { color={COLORS.black90} aria-label="light_icon" /> - + diff --git a/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx b/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx index d231f2deda5..d0ac255b744 100644 --- a/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx +++ b/app/src/organisms/Navigation/RestartRobotConfirmationModal.tsx @@ -8,7 +8,7 @@ import { DIRECTION_ROW, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' @@ -50,7 +50,7 @@ export function RestartRobotConfirmationModal({ components={{ bold: , span: ( - diff --git a/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx b/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx index 375476f2a2e..50a9a05b074 100644 --- a/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx +++ b/app/src/organisms/NetworkSettings/AlternativeSecurityTypeModal.tsx @@ -8,7 +8,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -53,13 +53,13 @@ export function AlternativeSecurityTypeModal({ width="100%" > - {t('branded:alternative_security_types_description')} - + - + {t('connecting_to', { ssid: ssid })} - + diff --git a/app/src/organisms/NetworkSettings/DisplaySearchNetwork.tsx b/app/src/organisms/NetworkSettings/DisplaySearchNetwork.tsx index 68b6528f69c..195c9d7799d 100644 --- a/app/src/organisms/NetworkSettings/DisplaySearchNetwork.tsx +++ b/app/src/organisms/NetworkSettings/DisplaySearchNetwork.tsx @@ -9,7 +9,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -29,14 +29,14 @@ export function DisplaySearchNetwork(): JSX.Element { alignItems={ALIGN_CENTER} flexDirection={DIRECTION_COLUMN} > - {t('searching_for_networks')} - + ) diff --git a/app/src/organisms/NetworkSettings/DisplayWifiList.tsx b/app/src/organisms/NetworkSettings/DisplayWifiList.tsx index 56398e83b82..137391618c5 100644 --- a/app/src/organisms/NetworkSettings/DisplayWifiList.tsx +++ b/app/src/organisms/NetworkSettings/DisplayWifiList.tsx @@ -14,7 +14,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants' @@ -102,7 +102,7 @@ export function DisplayWifiList({ }} > - {nw.ssid} + {nw.ssid} )) : null} @@ -120,7 +120,7 @@ export function DisplayWifiList({ gridGap={SPACING.spacing4} > - {t('join_other_network')} + {t('join_other_network')} {list != null && list.length > 0 ? null : } diff --git a/app/src/organisms/NetworkSettings/FailedToConnect.tsx b/app/src/organisms/NetworkSettings/FailedToConnect.tsx index fe0c7ca1261..aa334813352 100644 --- a/app/src/organisms/NetworkSettings/FailedToConnect.tsx +++ b/app/src/organisms/NetworkSettings/FailedToConnect.tsx @@ -10,7 +10,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -60,7 +60,7 @@ export function FailedToConnect({ justifyContent={JUSTIFY_CENTER} alignItems={ALIGN_CENTER} > - + {!isInvalidPassword && requestState != null && 'error' in requestState && requestState.error != null && 'message' in requestState.error && requestState.error.message != null && ( - + {requestState.error.message} - + )} diff --git a/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx b/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx index 01c20afac8c..2a6050aaed3 100644 --- a/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx +++ b/app/src/organisms/NetworkSettings/SelectAuthenticationType.tsx @@ -11,7 +11,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -102,13 +102,13 @@ export function SelectAuthenticationType({ ))} - {t('your_mac_address_is', { macAddress: wifi?.macAddress })} - + - {t('need_another_security_type')} - + diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx index be272475d56..28bec52ab66 100644 --- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx @@ -13,7 +13,7 @@ import { JUSTIFY_SPACE_BETWEEN, POSITION_FIXED, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -55,7 +55,7 @@ export function SetWifiCred({ marginTop={isUnboxingFlowOngoing ? undefined : '7.75rem'} > - {t('enter_password')} + {t('enter_password')} - + {showPassword ? t('hide') : t('show')} - + diff --git a/app/src/organisms/NetworkSettings/SetWifiSsid.tsx b/app/src/organisms/NetworkSettings/SetWifiSsid.tsx index cc0489b404e..46ed84d5f09 100644 --- a/app/src/organisms/NetworkSettings/SetWifiSsid.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiSsid.tsx @@ -8,7 +8,7 @@ import { POSITION_FIXED, SPACING, TYPOGRAPHY, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { InputField } from '../../atoms/InputField' @@ -38,13 +38,13 @@ export function SetWifiSsid({ gridGap={SPACING.spacing8} marginTop={isUnboxingFlowOngoing ? undefined : '7.75rem'} > - {t('enter_network_name')} - + - + {t('successfully_connected_to_network', { ssid })} - + ) } diff --git a/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx b/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx index 80974a53d59..449d31105f0 100644 --- a/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx +++ b/app/src/organisms/OnDeviceDisplay/NameRobot/ConfirmRobotName.tsx @@ -9,7 +9,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -40,9 +40,9 @@ export function ConfirmRobotName({ flexDirection={DIRECTION_COLUMN} > - + {t('name_love_it', { name: robotName })} - + - {t('your_robot_is_ready_to_go')} - + - {t('no_recent_runs')} - - + {t('no_recent_runs_description')} - + ) } diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx index 786a6192584..29ad4a159cd 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx @@ -15,7 +15,7 @@ import { JUSTIFY_SPACE_BETWEEN, OVERFLOW_WRAP_BREAK_WORD, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -217,16 +217,16 @@ export function ProtocolWithLastRun({ )} - {protocolName} - + - + ) } diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/ServerInitializing.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/ServerInitializing.tsx index bc2333b25d0..fc363f22b02 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/ServerInitializing.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/ServerInitializing.tsx @@ -10,7 +10,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -27,13 +27,13 @@ export function ServerInitializing(): JSX.Element { gridGap={SPACING.spacing32} > - {t('robot_initializing')} - + ) } diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx index f414c7b7d01..6e732ce55f9 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/CancelingRunModal.tsx @@ -10,7 +10,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Modal } from '../../../molecules/Modal' @@ -37,9 +37,9 @@ export function CancelingRunModal(): JSX.Element { color={COLORS.grey60} aria-label="CancelingRunModal_icon" /> - + {i18n.format(t('canceling_run_dot'), 'capitalize')} - + ) diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx index a7f3436e300..8bd583f7a74 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/ConfirmCancelRunModal.tsx @@ -10,7 +10,7 @@ import { DIRECTION_ROW, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { useStopRunMutation, @@ -100,8 +100,12 @@ export function ConfirmCancelRunModal({ paddingBottom={SPACING.spacing32} paddingTop={`${isActiveRun ? SPACING.spacing32 : '0'}`} > - {t('cancel_run_alert_info_flex')} - {t('cancel_run_module_info')} + + {t('cancel_run_alert_info_flex')} + + + {t('cancel_run_module_info')} + - {currentRunStatus} - - {protocolName} + + + {protocolName} + - {stepCounterCopy} + {stepCounterCopy} diff --git a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx index 0f31c36692b..d4e0b056b5a 100644 --- a/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx +++ b/app/src/organisms/OnDeviceDisplay/RunningProtocol/RunFailedModal.tsx @@ -11,7 +11,7 @@ import { Flex, OVERFLOW_AUTO, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useStopRunMutation } from '@opentrons/react-api-client' @@ -80,12 +80,12 @@ export function RunFailedModal({ gridGap={SPACING.spacing16} alignItems={ALIGN_FLEX_START} > - + {t('error_info', { errorType: highestPriorityError.errorType, errorCode: highestPriorityError.errorCode, })} - + - + {highestPriorityError.detail} - + - {t('branded:contact_information')} - + - + {currentRunStatus} - - {protocolName} + + + {protocolName} + diff --git a/app/src/organisms/OpenDoorAlertModal/index.tsx b/app/src/organisms/OpenDoorAlertModal/index.tsx index 78db7539a19..e8771b5ef9e 100644 --- a/app/src/organisms/OpenDoorAlertModal/index.tsx +++ b/app/src/organisms/OpenDoorAlertModal/index.tsx @@ -10,7 +10,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { getTopPortalEl } from '../../App/portal' @@ -37,16 +37,16 @@ export function OpenDoorAlertModal(): JSX.Element { alignItems={ALIGN_CENTER} width="100%" > - + {t('door_is_open')} - - + {t('close_door_to_resume')} - + , diff --git a/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx b/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx index d9b4e8baa49..a03067f45a7 100644 --- a/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx +++ b/app/src/organisms/PipetteWizardFlows/AttachProbe.tsx @@ -6,7 +6,7 @@ import { Flex, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { LEFT, WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data' @@ -168,9 +168,9 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { > {isExiting ? undefined : ( - + {t('calibration_probe_touching', { slotNumber: calSlotNum })} - + )} @@ -195,9 +195,12 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { i18nKey={'return_probe_error'} values={{ error: errorMessage }} components={{ - block: , + block: , bold: ( - + ), }} /> @@ -212,7 +215,7 @@ export const AttachProbe = (props: AttachProbeProps): JSX.Element | null => { })} bodyText={ <> - + { bold: , }} /> - + {is96Channel && ( , + block: , }} /> {selectedPipette === NINETY_SIX_CHANNEL && flowType === FLOWS.ATTACH && !Boolean(isOnDevice) && ( - + {t('pipette_heavy', { weight: WEIGHT_OF_96_CHANNEL })} - + )} {selectedPipette === NINETY_SIX_CHANNEL && diff --git a/app/src/organisms/PipetteWizardFlows/Carriage.tsx b/app/src/organisms/PipetteWizardFlows/Carriage.tsx index b32a04a8adf..a827db87581 100644 --- a/app/src/organisms/PipetteWizardFlows/Carriage.tsx +++ b/app/src/organisms/PipetteWizardFlows/Carriage.tsx @@ -5,7 +5,7 @@ import { COLORS, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' import { GenericWizardTile } from '../../molecules/GenericWizardTile' @@ -72,7 +72,10 @@ export const Carriage = (props: PipetteWizardStepProps): JSX.Element | null => { } components={{ block: ( - + ), }} /> diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx index 0bd95be038d..6740c2234e5 100644 --- a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx @@ -21,7 +21,7 @@ import { PrimaryButton, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -222,7 +222,7 @@ export const ChoosePipette = (props: ChoosePipetteProps): JSX.Element => { justifyContent={JUSTIFY_SPACE_BETWEEN} > - {t('choose_pipette')} + {t('choose_pipette')} { height="160px" alt={singleMount} /> - {singleMount} - + { height="160px" alt={bothMounts} /> - {bothMounts} - + diff --git a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx index fcd9df95266..3b0f287a99b 100644 --- a/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/DetachPipette.tsx @@ -14,7 +14,7 @@ import { RESPONSIVENESS, SIZE_1, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Banner } from '../../atoms/Banner' @@ -159,7 +159,9 @@ export const DetachPipette = (props: DetachPipetteProps): JSX.Element => { } else { bodyText = ( <> - {t('hold_and_loosen')} + + {t('hold_and_loosen')} + {is96ChannelPipette && ( { }} marginLeft={SPACING.spacing32} > - + {t('shared:go_back')} - + {Boolean(isOnDevice) ? ( { channel, })} bodyText={ - + {i18n.format(t('remove_probe'), 'capitalize')} - + } proceedButtonText={ errorMessage != null ? t('exit_cal') : t('complete_cal') diff --git a/app/src/organisms/PipetteWizardFlows/MountPipette.tsx b/app/src/organisms/PipetteWizardFlows/MountPipette.tsx index fcedfedfa1f..62a0d08d24b 100644 --- a/app/src/organisms/PipetteWizardFlows/MountPipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/MountPipette.tsx @@ -9,7 +9,7 @@ import { JUSTIFY_CENTER, SIZE_1, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { Banner } from '../../atoms/Banner' import { GenericWizardTile } from '../../molecules/GenericWizardTile' @@ -60,11 +60,11 @@ export const MountPipette = (props: MountPipetteProps): JSX.Element => { } else { bodyText = ( <> - + {isSingleMountPipette ? t('align_the_connector') : t('hold_pipette_carefully')} - + {!isSingleMountPipette ? ( + ), }} /> ) : ( - + {t('detach_mounting_plate_instructions')} - + ) } proceedButtonText={i18n.format(t('shared:continue'), 'capitalize')} diff --git a/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx b/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx index 221a280cbab..0b00e64fad7 100644 --- a/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx +++ b/app/src/organisms/PipetteWizardFlows/ProbeNotAttached.tsx @@ -10,7 +10,7 @@ import { PrimaryButton, RESPONSIVENESS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { css } from 'styled-components' @@ -54,9 +54,9 @@ export const ProbeNotAttached = ( setShowUnableToDetect(false) }} > - + {t('shared:go_back')} - + {isOnDevice ? ( { <> {Boolean(isOnDevice) ? ( - + {t('shared:go_back')} - + ) : ( - {t('protocol_analysis_outdated')} - + + {t('protocol_analysis_outdated')} + + - + ) diff --git a/app/src/organisms/ProtocolAnalysisFailure/index.tsx b/app/src/organisms/ProtocolAnalysisFailure/index.tsx index f1b438094c9..0552db6b8bf 100644 --- a/app/src/organisms/ProtocolAnalysisFailure/index.tsx +++ b/app/src/organisms/ProtocolAnalysisFailure/index.tsx @@ -11,7 +11,7 @@ import { JUSTIFY_SPACE_BETWEEN, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP_REVERSE, } from '@opentrons/components' @@ -60,8 +60,10 @@ export function ProtocolAnalysisFailure( alignItems={ALIGN_CENTER} width="100%" > - {t('protocol_analysis_failure')} - + + {t('protocol_analysis_failure')} + + - + {showErrorDetails ? createPortal( @@ -94,9 +96,9 @@ export function ProtocolAnalysisFailure( onClose={handleClickHideDetails} > {errors.map((error, index) => ( - + {error} - + ))} 0 ? ( - {t('labware_name')} - - + {t('quantity')} - + {labwareDetails?.map((labware, index) => ( )} - + {displayName} - + - {quantity} + {quantity} diff --git a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx index 52ddf497bb7..c1737e73307 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx @@ -13,7 +13,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Divider } from '../../atoms/structure' @@ -81,9 +81,9 @@ export const ProtocolLiquidsDetails = ( name="ot-alert" aria-label="ProtocolLIquidsDetails_noLiquidsIcon" /> - + {i18n.format(t('liquids_not_in_protocol'), 'capitalize')} - + )} diff --git a/app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx b/app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx index 797e18b930d..a75b1d7f58e 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolParameters/index.tsx @@ -7,7 +7,7 @@ import { InfoScreen, ParametersTable, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { Banner } from '../../../atoms/Banner' @@ -37,12 +37,15 @@ export function ProtocolParameters({ iconMarginLeft={SPACING.spacing4} > - + {t('listed_values_are_view_only')} - - + + {t('start_setup_customize_values')} - + diff --git a/app/src/organisms/ProtocolDetails/ProtocolStats.tsx b/app/src/organisms/ProtocolDetails/ProtocolStats.tsx index feef03553a4..935636690c7 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolStats.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolStats.tsx @@ -11,7 +11,7 @@ import { JUSTIFY_CENTER, SIZE_AUTO, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { getPipetteNameSpecs } from '@opentrons/shared-data' @@ -176,21 +176,21 @@ export const StatRow = (props: StatRowProps): JSX.Element => { return ( - {displayName} - - + {description} - + { alignSelf={ALIGN_CENTER} marginLeft={SIZE_AUTO} > - + {datum} - + ) diff --git a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx index 1e9060ba04d..aef14b44298 100644 --- a/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx +++ b/app/src/organisms/ProtocolDetails/RobotConfigurationDetails.tsx @@ -10,7 +10,7 @@ import { ModuleIcon, SIZE_1, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -63,11 +63,13 @@ export const RobotConfigurationDetails = ( } = props const { t } = useTranslation(['protocol_details', 'shared']) - const loadingText = {t('shared:loading')} + const loadingText = ( + {t('shared:loading')} + ) const emptyText = ( - + {t('shared:empty')} - + ) const is96PipetteUsed = leftMountPipetteName === 'p1000_96' @@ -115,7 +117,9 @@ export const RobotConfigurationDetails = ( isLoading ? ( loadingText ) : ( - {getRobotTypeDisplayName(robotType)} + + {getRobotTypeDisplayName(robotType)} + ) } /> @@ -164,9 +168,9 @@ export const RobotConfigurationDetails = ( minWidth={SIZE_1} minHeight={SIZE_1} /> - + {getModuleDisplayName(module.params.model)} - + } /> @@ -193,9 +197,9 @@ export const RobotConfigurationDetails = ( minHeight={SIZE_1} /> ) : null} - + {getFixtureDisplayName(fixture.cutoutFixtureId)} - + } /> @@ -221,7 +225,7 @@ export const RobotConfigurationDetailsItem = ( flexDirection={DIRECTION_ROW} alignItems={ALIGN_CENTER} > - {label} - + {item} ) diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx index 29adcd24c98..21fbe1c325c 100644 --- a/app/src/organisms/ProtocolDetails/index.tsx +++ b/app/src/organisms/ProtocolDetails/index.tsx @@ -32,7 +32,7 @@ import { SIZE_1, SIZE_5, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -119,7 +119,7 @@ function MetadataDetails({ protocolType, }: MetadataDetailsProps): JSX.Element { if (protocolType === 'json') { - return {description} + return {description} } else { const filteredMetaData = Object.entries( omit(metadata, ['description', 'protocolName', 'author', 'apiLevel']) @@ -131,18 +131,18 @@ function MetadataDetails({ flexDirection={DIRECTION_COLUMN} data-testid="ProtocolDetails_description" > - {description} + {description} {filteredMetaData.map((item, index) => { return ( - {startCase(item.label)} - - {item.value} + + {item.value} ) })} @@ -168,7 +168,7 @@ const ReadMoreContent = (props: ReadMoreContentProps): JSX.Element => { return ( {isReadMore ? ( - {description.slice(0, 160)} + {description.slice(0, 160)} ) : ( e.detail)} /> ) : null} - {protocolDisplayName} - + - + {t('creation_method')} - - + + {analysisStatus === 'loading' ? t('shared:loading') : creationMethod} - + - + {t('last_updated')} - - + + {analysisStatus === 'loading' ? t('shared:loading') : format(new Date(modified), 'M/d/yy HH:mm')} - + - + {t('last_analyzed')} - - + + {analysisStatus === 'loading' ? t('shared:loading') : lastAnalyzed} - + - + {t('org_or_author')} - - + + - + {t('description')} - + {analysisStatus === 'loading' ? ( - {t('shared:loading')} + + {t('shared:loading')} + ) : null} {mostRecentAnalysis != null ? ( - + {t('deck_view')} - + - + {i18n.format(t('parameters'), 'capitalize')} - + )} - + {i18n.format(t('hardware'), 'capitalize')} - + - + {i18n.format(t('labware'), 'capitalize')} - + {mostRecentAnalysis != null && ( - + {i18n.format(t('liquids'), 'capitalize')} - + )} {enableProtocolStats && mostRecentAnalysis != null && ( @@ -673,9 +678,9 @@ export function ProtocolDetails( setCurrentTab('stats') }} > - + {i18n.format(t('stats'), 'capitalize')} - + )} diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx index 992b5ef1a25..01004aac6c0 100644 --- a/app/src/organisms/ProtocolSetupLabware/index.tsx +++ b/app/src/organisms/ProtocolSetupLabware/index.tsx @@ -19,7 +19,7 @@ import { LocationIcon, MODULE_ICON_NAME_BY_TYPE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -250,13 +250,13 @@ export function ProtocolSetupLabware({ gridGap={SPACING.spacing12} > {location} - {getLabwareDisplayName(selectedLabware)} - - + + {selectedLabware.nickName} {selectedLabwareLocation != null && selectedLabwareLocation !== 'offDeck' && @@ -267,7 +267,7 @@ export function ProtocolSetupLabware({ )?.displayName, }) : null} - + @@ -294,10 +294,10 @@ export function ProtocolSetupLabware({ lineHeight={TYPOGRAPHY.lineHeight28} > - {t('location')} + {t('location')} - {t('labware_name')} + {t('labware_name')} {[...onDeckItems, ...offDeckItems].map((labware, i) => { @@ -441,9 +441,9 @@ function LabwareLatch({ onClick={toggleLatch} padding={SPACING.spacing12} > - + {t('protocol_setup:labware_latch')} - + {hsLatchText != null && icon != null ? ( <> - + {hsLatchText} - + - + {getLabwareDisplayName(definition)} - - + + {nickName} - + {nestedLabwareInfo != null ? ( - + {nestedLabwareInfo.nestedLabwareDisplayName} - - + + {nestedLabwareInfo.nestedLabwareNickName} - + ) : null} diff --git a/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx b/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx index 5005d872ac4..4b9b87534bc 100644 --- a/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx +++ b/app/src/organisms/ProtocolSetupLiquids/LiquidDetails.tsx @@ -9,7 +9,7 @@ import { Icon, LocationIcon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP, } from '@opentrons/components' @@ -109,13 +109,13 @@ export function LiquidDetails(props: LiquidDetailsProps): JSX.Element { - {labwareName} - + diff --git a/app/src/organisms/ProtocolSetupLiquids/index.tsx b/app/src/organisms/ProtocolSetupLiquids/index.tsx index ad717ae64c8..16e9e837c30 100644 --- a/app/src/organisms/ProtocolSetupLiquids/index.tsx +++ b/app/src/organisms/ProtocolSetupLiquids/index.tsx @@ -9,7 +9,7 @@ import { Icon, JUSTIFY_FLEX_END, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -114,9 +114,9 @@ export function LiquidsList(props: LiquidsListProps): JSX.Element { flexDirection={DIRECTION_COLUMN} alignItems={TYPOGRAPHY.textAlignCenter} > - + {liquid.displayName} - + - + {cutoutFixtureId != null && (isCurrentFixtureCompatible || isRequiredSingleSlotMissing) ? getFixtureDisplayName(cutoutFixtureId) : getFixtureDisplayName(compatibleCutoutFixtureIds?.[0])} - + diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx index c9aab7b61ac..a5c1ff906dc 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx @@ -11,7 +11,7 @@ import { JUSTIFY_SPACE_BETWEEN, LocationIcon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -195,9 +195,9 @@ function ModuleTableItem({ ) } else if (isNonConnectingModule) { moduleStatus = ( - + {t('n_a')} - + ) } else if ( isModuleReady && @@ -225,11 +225,11 @@ function ModuleTableItem({ ) } else if (!calibrationStatus?.complete) { moduleStatus = ( - + {calibrationStatus?.reason === 'attach_pipette_failure_reason' ? t('calibration_required_attach_pipette_first') : t('calibration_required_calibrate_pipette_first')} - + ) } @@ -276,9 +276,9 @@ function ModuleTableItem({ padding={`${SPACING.spacing16} ${SPACING.spacing24}`} > - + {getModuleDisplayName(module.moduleDef.model)} - + - + {t('branded:setup_instructions_description')} - + - + {INSTRUCTIONS_URL} - + - + {i18n.format(t('deck_hardware'), 'titleCase')} - - {t('location')} - {t('status')} + + {t('location')} + {t('status')} {hasModules ? ( diff --git a/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx b/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx index 26a5120620d..82195197903 100644 --- a/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx +++ b/app/src/organisms/ProtocolSetupParameters/AnalysisFailedModal.tsx @@ -7,7 +7,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' @@ -52,7 +52,9 @@ export function AnalysisFailedModal({ width="100%" > - {t('with_the_chosen_value')} + + {t('with_the_chosen_value')} + {errors.map((error, index) => ( - + {error} - + ))} - {t('restart_setup_and_try')} + + {t('restart_setup_and_try')} + - {parameter.description} - + {options?.map(option => { return ( diff --git a/app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx b/app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx index 1f5fcc1db19..dfe02416778 100644 --- a/app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx +++ b/app/src/organisms/ProtocolSetupParameters/ChooseNumber.tsx @@ -5,7 +5,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { InputField } from '../../atoms/InputField' @@ -116,9 +116,9 @@ export function ChooseNumber({ flexDirection={DIRECTION_COLUMN} marginTop="7.75rem" > - + {parameter.description} - + - {t('no_files_found')} - + ) } diff --git a/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.tsx b/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.tsx index 70d494f1007..6f79a24534b 100644 --- a/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.tsx +++ b/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.tsx @@ -8,7 +8,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' @@ -54,7 +54,9 @@ export function ResetValuesModal({ return ( - {t('reset_parameter_values_body')} + + {t('reset_parameter_values_body')} + - + {t('name')} - - {t('value')} + + {t('value')} {sortRuntimeParameters(parameters).map((parameter, index) => { return ( @@ -81,21 +81,21 @@ export function ViewOnlyParameters({ padding={`${SPACING.spacing16} ${SPACING.spacing24}`} gridGap={SPACING.spacing24} > - {parameter.displayName} - + - + {formatRunTimeParameterValue(parameter, t)} - + {parameter.type === 'csv_file' || parameter.value !== parameter.default ? ( - {t('csv_file_required')} + {t('csv_file_required')} ) } diff --git a/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx b/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx index d41690ca3b1..c9b7c4bb2b6 100644 --- a/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx +++ b/app/src/organisms/ProtocolsLanding/ConfirmDeleteProtocolModal.tsx @@ -9,7 +9,7 @@ import { JUSTIFY_FLEX_END, Link, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { LegacyModal } from '../../molecules/LegacyModal' @@ -30,9 +30,9 @@ export function ConfirmDeleteProtocolModal( title={t('delete_this_protocol')} > - + {t('this_protocol_will_be_trashed')} - + - {props.title} - + - + - - + + - - + + - + ) diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx index b784215e2c0..3843fd64239 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx @@ -27,7 +27,7 @@ import { SIZE_2, SIZE_3, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP, } from '@opentrons/components' @@ -229,20 +229,20 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element { {analysisStatus === 'stale' ? ( ) : null} - {protocolDisplayName} - + {/* data section */} {analysisStatus === 'loading' ? ( - + {t('loading_data')} - + ) : ( @@ -253,12 +253,12 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element { flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4} > - + {t('robot')} - - + + {getRobotTypeDisplayName(robotType)} - + - + {t('shared:instruments')} - + { { - missing: {t('no_data')}, - loading: {t('no_data')}, - error: {t('no_data')}, - stale: {t('no_data')}, + missing: ( + {t('no_data')} + ), + loading: ( + {t('no_data')} + ), + error: ( + {t('no_data')} + ), + stale: ( + {t('no_data')} + ), complete: ( {/* TODO(bh, 2022-10-14): insert 96-channel pipette if found */} @@ -313,9 +321,9 @@ function AnalysisInfo(props: AnalysisInfoProps): JSX.Element { > {requiredModuleTypes.length > 0 ? ( <> - + {t('modules')} - + {requiredModuleTypes.map((moduleType, index) => ( - + {`${t('updated')} ${format( new Date(modified), 'M/d/yy HH:mm' )}`} - + )} diff --git a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx index e571e6eb924..84f498332d2 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx @@ -17,7 +17,7 @@ import { POSITION_ABSOLUTE, SecondaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -157,20 +157,20 @@ export function ProtocolList(props: ProtocolListProps): JSX.Element | null { justifyContent={JUSTIFY_SPACE_BETWEEN} marginBottom={SPACING.spacing24} > - {t('protocols')} + {t('protocols')} - {t('shared:sort_by')} - + - {sortByLabelType[sortBy].label} - + + , }} /> - + } /> diff --git a/app/src/organisms/ProtocolsLanding/ProtocolsEmptyState.tsx b/app/src/organisms/ProtocolsLanding/ProtocolsEmptyState.tsx index d0daed07cd4..cc5d7b4fd08 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolsEmptyState.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolsEmptyState.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { ProtocolUploadInput } from './ProtocolUploadInput' @@ -22,9 +22,9 @@ export function ProtocolsEmptyState(): JSX.Element | null { paddingTop={SPACING.spacing32} transform="translateY(25%)" > - + {t('import_a_file')} - + diff --git a/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx b/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx index 817e9fe9a1d..4577fb3c5a8 100644 --- a/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx +++ b/app/src/organisms/QuickTransferFlow/ConfirmExitModal.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next' import { SPACING, COLORS, - StyledText, + LegacyStyledText, Flex, DIRECTION_COLUMN, TYPOGRAPHY, @@ -32,9 +32,9 @@ export const ConfirmExitModal = (props: ConfirmExitModalProps): JSX.Element => { gridGap={SPACING.spacing10} width="100%" > - + {t('lose_all_progress')} - + diff --git a/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx b/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx index 4418a70d41b..6c255680200 100644 --- a/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx +++ b/app/src/organisms/QuickTransferFlow/NameQuickTransfer.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next' import { createPortal } from 'react-dom' import { Flex, - StyledText, + LegacyStyledText, SPACING, DIRECTION_COLUMN, POSITION_FIXED, @@ -53,22 +53,22 @@ export function NameQuickTransfer(props: NameQuickTransferProps): JSX.Element { value={name} textAlign={TYPOGRAPHY.textAlignCenter} /> - {t('enter_characters')} - - + {error} - + { diff --git a/app/src/organisms/QuickTransferFlow/Overview.tsx b/app/src/organisms/QuickTransferFlow/Overview.tsx index fc660f400fc..a71bf2004f6 100644 --- a/app/src/organisms/QuickTransferFlow/Overview.tsx +++ b/app/src/organisms/QuickTransferFlow/Overview.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { Flex, - StyledText, + LegacyStyledText, SPACING, TYPOGRAPHY, DIRECTION_COLUMN, @@ -65,16 +65,19 @@ export function Overview(props: OverviewProps): JSX.Element | null { {displayItems.map(displayItem => ( - + {displayItem.option} - - + {displayItem.value} - + ))} diff --git a/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx b/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx index 4b1af7f4d4a..2ec9d1e8b51 100644 --- a/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx +++ b/app/src/organisms/QuickTransferFlow/SaveOrRunModal.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next' import { SPACING, COLORS, - StyledText, + LegacyStyledText, Flex, DIRECTION_COLUMN, TYPOGRAPHY, @@ -36,12 +36,12 @@ export const SaveOrRunModal = (props: SaveOrRunModalProps): JSX.Element => { gridGap={SPACING.spacing10} width="100%" > - {t('save_to_run_later')} - + - + {t('number_wells_selected_error_learn_more', { wellCount, selectionUnit, selectionUnits, })} - + ) } diff --git a/app/src/organisms/QuickTransferFlow/SelectPipette.tsx b/app/src/organisms/QuickTransferFlow/SelectPipette.tsx index 98042f1e361..546000e286d 100644 --- a/app/src/organisms/QuickTransferFlow/SelectPipette.tsx +++ b/app/src/organisms/QuickTransferFlow/SelectPipette.tsx @@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next' import { Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, DIRECTION_COLUMN, } from '@opentrons/components' @@ -82,12 +82,12 @@ export function SelectPipette(props: SelectPipetteProps): JSX.Element { padding={`${SPACING.spacing16} ${SPACING.spacing60} ${SPACING.spacing40} ${SPACING.spacing60}`} gridGap={SPACING.spacing4} > - {t('pipette_currently_attached')} - + {leftPipetteSpecs != null ? ( - + {displayItem.option} - + - {displayItem.value} - + diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDataDownload.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDataDownload.tsx index d24a71d0857..8d32509367d 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDataDownload.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDataDownload.tsx @@ -10,7 +10,7 @@ import { JUSTIFY_SPACE_BETWEEN, Link, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -99,18 +99,18 @@ export function CalibrationDataDownload({ gridGap={SPACING.spacing40} > - + {isFlex ? t('about_calibration_title') : t('robot_calibration:download_calibration_title')} - + {isFlex ? ( <> , + block: , }} /> ) : ( - + {t( ot2DownloadIsPossible ? 'robot_calibration:download_calibration_data_available' : 'robot_calibration:download_calibration_data_unavailable' )} - + )} ( - + {getModuleDisplayName(attachedModule.moduleModel)} - + - {attachedModule.serialNumber} + + {attachedModule.serialNumber} + - + {attachedModule.moduleOffset?.last_modified != null ? formatLastCalibrated( attachedModule.moduleOffset?.last_modified ) : t('not_calibrated_short')} - + - {calibration.modelName} - {calibration.serialNumber} + + {calibration.modelName} + + + {calibration.serialNumber} + - {is96Attached ? t('both') : calibration.mount} - + {isFlex ? null : ( - + {calibration.tiprack != null && getDisplayNameForTipRack( calibration.tiprack, customLabwareDefs )} - + )} @@ -120,12 +124,12 @@ export function PipetteOffsetCalibrationItems({ {calibration.lastCalibrated != null && !(calibration.markedBad ?? false) ? ( <> - + {formatLastCalibrated(calibration.lastCalibrated)} - + ) : ( - + {calibration.lastCalibrated != null && calibration.markedBad === true ? ( <> @@ -134,7 +138,7 @@ export function PipetteOffsetCalibrationItems({ ) : ( <>{t('not_calibrated_short')} )} - + )} diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx index 2157aa76bd7..5fb899a28b7 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/TipLengthCalibrationItems.tsx @@ -7,7 +7,7 @@ import { BORDERS, COLORS, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -99,24 +99,28 @@ export function TipLengthCalibrationItems({ {tipLengthCalibrations.map((calibration, index) => ( - + {calibration.tiprackDefURI && getDisplayNameForTipRack( calibration.tiprackDefURI, customLabwareDefs )} - + - {calibration.modelName} - {calibration.serialNumber} + + {calibration.modelName} + + + {calibration.serialNumber} + - + {calibration.lastCalibrated !== undefined ? formatLastCalibrated(calibration.lastCalibrated) : 'Not calibrated'} - + - + {t('calibration_health_check_title')} - - + + {t('calibration_health_check_description')} - + - + {t('deck_calibration_modal_description')} - - + {t('deck_calibration_modal_pipette_description')} - + - + {t('deck_calibration_title')} - - {t('deck_calibration_description')} - + + + {t('deck_calibration_description')} + + {deckLastModified} - + ) } diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx index 526eb07c074..1c1c6fcb4a1 100644 --- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx +++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx @@ -11,7 +11,7 @@ import { POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useOnClickOutside, } from '@opentrons/components' @@ -85,14 +85,16 @@ export function RobotSettingsGripperCalibration( paddingY={SPACING.spacing24} gridGap={SPACING.spacing8} > - + {t('gripper_calibration_title')} - - {t('gripper_calibration_description')} + + + {t('gripper_calibration_description')} + {gripper == null ? ( - + {t('no_gripper_attached')} - + ) : ( @@ -106,16 +108,20 @@ export function RobotSettingsGripperCalibration( - {gripper.serialNumber} + + {gripper.serialNumber} + {gripperCalibrationLastModified != null ? ( - + {formatLastCalibrated(gripperCalibrationLastModified)} - + ) : ( - {t('not_calibrated_short')} + + {t('not_calibrated_short')} + )} diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsModuleCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsModuleCalibration.tsx index 53060b105e4..c6cec90fbba 100644 --- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsModuleCalibration.tsx +++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsModuleCalibration.tsx @@ -5,7 +5,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -35,10 +35,12 @@ export function RobotSettingsModuleCalibration({ paddingY={SPACING.spacing24} gridGap={SPACING.spacing8} > - + {t('module_calibration')} - - {t('module_calibration_description')} + + + {t('module_calibration_description')} + {attachedModules.length > 0 ? ( ) : ( - + {t('no_modules_attached')} - + )} ) diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsPipetteOffsetCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsPipetteOffsetCalibration.tsx index 5f5cc493eb5..b59b6be3d03 100644 --- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsPipetteOffsetCalibration.tsx +++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsPipetteOffsetCalibration.tsx @@ -5,7 +5,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useInstrumentsQuery } from '@opentrons/react-api-client' @@ -61,13 +61,15 @@ export function RobotSettingsPipetteOffsetCalibration({ paddingY={SPACING.spacing24} gridGap={SPACING.spacing8} > - + {isFlex ? t('pipette_calibrations_title') : t('pipette_offset_calibrations_title')} - + {isFlex ? ( - {t('pipette_calibrations_description')} + + {t('pipette_calibrations_description')} + ) : null} {getShowPipetteCalibrationWarning(instrumentsData) && ( @@ -81,9 +83,9 @@ export function RobotSettingsPipetteOffsetCalibration({ updateRobotStatus={updateRobotStatus} /> ) : ( - + {t('no_pipette_attached')} - + )} ) diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsTipLengthCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsTipLengthCalibration.tsx index 721568d38c0..75d6aa73153 100644 --- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsTipLengthCalibration.tsx +++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsTipLengthCalibration.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useAllTipLengthCalibrationsQuery } from '@opentrons/react-api-client' @@ -84,9 +84,9 @@ export function RobotSettingsTipLengthCalibration({ paddingY={SPACING.spacing24} gridGap={SPACING.spacing8} > - + {t('tip_length_calibrations_title')} - + - {t('deck_calibration_error_occurred')} - + + {t('deck_calibration_error_occurred')} + + {createRequest != null && 'error' in createRequest && createRequest.error != null && RobotApi.getErrorResponseMessage(createRequest.error)} - + )} , diff --git a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx index 94104eadee9..0a41d19f07b 100644 --- a/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx +++ b/app/src/organisms/RobotSettingsDashboard/DeviceReset.tsx @@ -10,7 +10,7 @@ import { DIRECTION_ROW, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useConditionalConfirm, } from '@opentrons/components' @@ -222,14 +222,14 @@ export function DeviceReset({ isSelected={resetOptions[option.id]} > - {optionText} - + {subText != null ? ( - {subText} - + ) : null} @@ -276,10 +276,13 @@ export function DeviceReset({ } > - + {t('clear_all_stored_data')} - - + {t('clear_all_stored_data_description')} - + @@ -341,9 +344,9 @@ export const ConfirmClearDataModal = ({ gridGap={SPACING.spacing12} paddingBottom={SPACING.spacing32} > - + {t('confirm_device_reset_description')} - + {ethernet?.ipAddress === null || ethernet?.macAddress === null ? ( - {t('ethernet_connection_description')} - + ) : null} @@ -112,21 +112,21 @@ const EthernetDetailsRow = ({ flexDirection={DIRECTION_ROW} justifyContent={JUSTIFY_SPACE_BETWEEN} > - {title} - - + {detail} - + ) } diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx index 86a4c8bd21f..1433ac39729 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/NetworkDetailsModal.tsx @@ -10,7 +10,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -82,12 +82,12 @@ function ListItem({ itemName, itemValue }: ListItemProps): JSX.Element { justifyContent={JUSTIFY_SPACE_BETWEEN} borderRadius={BORDERS.borderRadius8} > - + {itemName} - - + + {itemValue} - + ) } diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx index b3165509e56..4c944458be2 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/WifiConnectionDetails.tsx @@ -14,7 +14,7 @@ import { Icon, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -76,13 +76,13 @@ export function WifiConnectionDetails({ gridGap={SPACING.spacing8} padding={`0 ${SPACING.spacing40} ${SPACING.spacing40}`} > - {t('connected_network')} - + - + {activeSsid} - + @@ -128,16 +131,19 @@ export function WifiConnectionDetails({ aria-label={`${activeSsid}_info_icon`} color={COLORS.black90} /> - + {t('view_details')} - + ) : null} {activeSsid != null ? ( - {t('other_networks')} - + ) : null} - {buttonTitle} - + {networkName != null ? ( - {networkName} - + ) : null} diff --git a/app/src/organisms/RobotSettingsDashboard/Privacy.tsx b/app/src/organisms/RobotSettingsDashboard/Privacy.tsx index fadb78c12fc..ca92061b234 100644 --- a/app/src/organisms/RobotSettingsDashboard/Privacy.tsx +++ b/app/src/organisms/RobotSettingsDashboard/Privacy.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -59,13 +59,13 @@ export function Privacy({ paddingX={SPACING.spacing40} marginTop="7.75rem" > - {t('branded:opentrons_cares_about_privacy')} - + - + {t('robot_name')} - + ) } diff --git a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx index b0214343560..61e36d7ca18 100644 --- a/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx +++ b/app/src/organisms/RobotSettingsDashboard/RobotSystemVersion.tsx @@ -9,7 +9,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -78,9 +78,9 @@ export function RobotSystemVersion({ marginTop="7.75rem" > - + {t('branded:view_latest_release_notes_at', { url: GITHUB_URL })} - + - {`${t('device_details:current_version')}`} - {currentVersion} + >{`${t('device_details:current_version')}`} + {currentVersion} diff --git a/app/src/organisms/RobotSettingsDashboard/TextSize.tsx b/app/src/organisms/RobotSettingsDashboard/TextSize.tsx index 94d6b2623a8..dd0bf31910e 100644 --- a/app/src/organisms/RobotSettingsDashboard/TextSize.tsx +++ b/app/src/organisms/RobotSettingsDashboard/TextSize.tsx @@ -14,7 +14,7 @@ import { Icon, JUSTIFY_CENTER, JUSTIFY_FLEX_START, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -54,12 +54,15 @@ export function TextSize({ setCurrentOption }: TextSizeProps): JSX.Element { > - + {t('text_size')} - + - {t('text_size_description')} - + - {t('update_channel_description')} - + - {radio.label} - + {radio.label === 'Alpha' ? ( - {t('alpha_description')} - + ) : null} diff --git a/app/src/organisms/RobotSetupHeader/index.tsx b/app/src/organisms/RobotSetupHeader/index.tsx index b4cd57166a8..b68011f2224 100644 --- a/app/src/organisms/RobotSetupHeader/index.tsx +++ b/app/src/organisms/RobotSetupHeader/index.tsx @@ -10,7 +10,7 @@ import { POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -52,9 +52,9 @@ export function RobotSetupHeader({ ) : null} - + {header} - + {onClickButton != null && buttonText != null ? ( - + {cancelRunAlertInfo} - - + + {t('cancel_run_module_info')} - + {isCanceling ? null : ( - + {t('protocol_setup:loading_data')} - + ) } @@ -128,16 +128,16 @@ export const RunPreviewComponent = ( > <> - + {t('run_preview')} - - + + {t('steps_total', { count: commands.length })} - + - + {t('preview_of_protocol_steps')} - + - {index + 1} - + ) : null} {currentRunCommandIndex === commands.length - 1 ? ( - + {t('end_of_protocol')} - + ) : null} diff --git a/app/src/organisms/RunProgressMeter/Tick.tsx b/app/src/organisms/RunProgressMeter/Tick.tsx index ade1f3c877f..2aacd054a68 100644 --- a/app/src/organisms/RunProgressMeter/Tick.tsx +++ b/app/src/organisms/RunProgressMeter/Tick.tsx @@ -9,7 +9,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, useHoverTooltip, } from '@opentrons/components' @@ -83,7 +83,9 @@ export function Tick(props: TickProps): JSX.Element { left={`${percent}%`} transform={`translateX(-${percent}%)`} > - {isAggregatedTick ? count : null} + + {isAggregatedTick ? count : null} + {createPortal( ) : null} - + {t('step_number', { step_number: isAggregatedTick ? `${stepNumber} - ${stepNumber + range}` : stepNumber, })} - - + + {commandTKey != null ? t(commandTKey) : null} - + {isAggregatedTick ? ( - {t('plus_more', { count })} + {t('plus_more', { count })} ) : null} diff --git a/app/src/organisms/RunProgressMeter/index.tsx b/app/src/organisms/RunProgressMeter/index.tsx index b532e9391aa..2914e07cf53 100644 --- a/app/src/organisms/RunProgressMeter/index.tsx +++ b/app/src/organisms/RunProgressMeter/index.tsx @@ -14,7 +14,7 @@ import { Link, SIZE_1, SPACING, - StyledText, + LegacyStyledText, TOOLTIP_LEFT, TYPOGRAPHY, useHoverTooltip, @@ -114,7 +114,7 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element { let currentStepContents: React.ReactNode = null if (runHasNotBeenStarted) { currentStepContents = ( - {t('not_started_yet')} + {t('not_started_yet')} ) } else if (analysis != null && !hasRunDiverged) { currentStepContents = ( @@ -181,7 +181,10 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element { - {`${ + {`${ runStatus != null && TERMINAL_RUN_STATUSES.includes(runStatus) ? t('final_step') : t('current_step') @@ -189,7 +192,7 @@ export function RunProgressMeter(props: RunProgressMeterProps): JSX.Element { runStatus === RUN_STATUS_IDLE ? ':' : ` ${stepCountStr}${currentStepContents != null ? ': ' : ''}` - }`} + }`} {currentStepContents} diff --git a/app/src/organisms/TakeoverModal/TakeoverModal.tsx b/app/src/organisms/TakeoverModal/TakeoverModal.tsx index 8d54c777022..3c927b6783d 100644 --- a/app/src/organisms/TakeoverModal/TakeoverModal.tsx +++ b/app/src/organisms/TakeoverModal/TakeoverModal.tsx @@ -9,7 +9,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { getTopPortalEl } from '../../App/portal' @@ -45,9 +45,9 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element { // confirm terminate modal - + {t('branded:confirm_terminate')} - + { @@ -90,18 +90,18 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element { size="2.5rem" marginBottom={SPACING.spacing16} /> - {i18n.format(t('robot_is_busy'), 'capitalize')} - - + + {t('branded:computer_in_app_is_controlling_robot')} - + - { @@ -109,7 +109,7 @@ export function TakeoverModal(props: TakeoverModalProps): JSX.Element { }} > {t('terminate')} - + ), diff --git a/app/src/organisms/TaskList/index.tsx b/app/src/organisms/TaskList/index.tsx index f39ac7e4094..7773a055112 100644 --- a/app/src/organisms/TaskList/index.tsx +++ b/app/src/organisms/TaskList/index.tsx @@ -14,7 +14,7 @@ import { JUSTIFY_SPACE_BETWEEN, Link, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useHoverTooltip, } from '@opentrons/components' @@ -94,7 +94,9 @@ function ProgressTrackerItem({ width="1.25rem" borderRadius="0.625rem" > - {(taskIndex + 1).toString()} + + {(taskIndex + 1).toString()} + )} {!hasSubTasks ? ( @@ -232,7 +234,7 @@ function SubTask({ flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4} > - + {title} - - {description} + + {description} {footer != null ? ( - + - + ) : null} {(isTaskListComplete || isPastSubTask) && cta != null ? ( @@ -384,7 +386,10 @@ function Task({ flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4} > - + - - {description} + + {description} {footer != null ? ( - + {footer} - + ) : null} {/* if subtasks, caret, otherwise show cta as link or button */} diff --git a/app/src/organisms/UpdateAppModal/index.tsx b/app/src/organisms/UpdateAppModal/index.tsx index 486b666cdd6..be41d6ed597 100644 --- a/app/src/organisms/UpdateAppModal/index.tsx +++ b/app/src/organisms/UpdateAppModal/index.tsx @@ -15,7 +15,7 @@ import { PrimaryButton, SecondaryButton, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { @@ -168,9 +168,9 @@ export function UpdateAppModal(props: UpdateAppModalProps): JSX.Element { alignItems={ALIGN_CENTER} padding={SPACING.spacing48} > - + {downloading ? t('download_update') : t('restarting_app')} - + - + {t('branded:robot_software_update_required')} - + { handleUpdateBuildroot(robot) diff --git a/app/src/organisms/UpdateRobotSoftware/CheckUpdates.tsx b/app/src/organisms/UpdateRobotSoftware/CheckUpdates.tsx index f04540897da..e23ff5417f6 100644 --- a/app/src/organisms/UpdateRobotSoftware/CheckUpdates.tsx +++ b/app/src/organisms/UpdateRobotSoftware/CheckUpdates.tsx @@ -10,7 +10,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -28,9 +28,9 @@ export function CheckUpdates(): JSX.Element { borderRadius={BORDERS.borderRadius12} > - + {t('checking_for_updates')} - + ) } diff --git a/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx b/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx index af6fecf7ae0..d35891880a5 100644 --- a/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx +++ b/app/src/organisms/UpdateRobotSoftware/CompleteUpdateSoftware.tsx @@ -10,7 +10,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -35,16 +35,16 @@ export function CompleteUpdateSoftware({ justifyContent={JUSTIFY_CENTER} borderRadius={BORDERS.borderRadius12} > - {t('update_complete')} - - + + {t('restarting_robot')} - + diff --git a/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx b/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx index bb42701b701..22324c25b95 100644 --- a/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx +++ b/app/src/organisms/UpdateRobotSoftware/ErrorUpdateSoftware.tsx @@ -10,7 +10,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -45,16 +45,16 @@ export function ErrorUpdateSoftware({ gridGap={SPACING.spacing4} alignItems={ALIGN_CENTER} > - {t('software_update_error')} - - + + {errorMessage} - + {children} diff --git a/app/src/organisms/UpdateRobotSoftware/NoUpdateFound.tsx b/app/src/organisms/UpdateRobotSoftware/NoUpdateFound.tsx index e81f2330c32..2f173cf0eda 100644 --- a/app/src/organisms/UpdateRobotSoftware/NoUpdateFound.tsx +++ b/app/src/organisms/UpdateRobotSoftware/NoUpdateFound.tsx @@ -10,7 +10,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -45,9 +45,9 @@ export function NoUpdateFound(props: NoUpdateFoundProps): JSX.Element { color={COLORS.green50} data-testid="NoUpdateFound_check_circle_icon" /> - + {t('software_is_up_to_date')} - + - + {t('update_found')} - - + {renderText()} - + ) diff --git a/app/src/organisms/WellSelection/Selection384Wells.tsx b/app/src/organisms/WellSelection/Selection384Wells.tsx index 51a29848d3a..0c20c61d416 100644 --- a/app/src/organisms/WellSelection/Selection384Wells.tsx +++ b/app/src/organisms/WellSelection/Selection384Wells.tsx @@ -9,7 +9,7 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -186,9 +186,9 @@ function SelectBy({ return ( - + {i18n.format(t('select_by'), 'capitalize')} - + - + {i18n.format(t('starting_well'), 'capitalize')} - + {checkboxWellOptions.map(well => ( - + {i18n.format( t(channels === 8 ? 'add_or_remove_columns' : 'add_or_remove'), 'capitalize' )} - + )} - {t('software_version')} - - + {CURRENT_VERSION} - - + + {t('shared:view_latest_release_notes')} {` ${t('shared:github')}`} - + {updateAvailable ? ( ) : ( - {t('up_to_date')} - + )} - + {t('manage_versions')} - + @@ -217,18 +217,20 @@ export function GeneralSettings(): JSX.Element { - {t('update_alerts')} - + - {t('branded:receive_alert')} + + {t('branded:receive_alert')} + - {t('connect_ip')} - + - {t('share_app_analytics')} - - + + {t('share_app_analytics_description')} - + - {t('app_settings')} - + - + {isConnected ? t('successfully_connected') : t('no_network_found')} - + {isConnected ? null : ( - {t('ethernet_connection_description')} - + )} diff --git a/app/src/pages/ConnectViaEthernet/TitleHeader.tsx b/app/src/pages/ConnectViaEthernet/TitleHeader.tsx index eea0f6e28cd..40c3bf27fe8 100644 --- a/app/src/pages/ConnectViaEthernet/TitleHeader.tsx +++ b/app/src/pages/ConnectViaEthernet/TitleHeader.tsx @@ -11,7 +11,7 @@ import { POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -46,9 +46,9 @@ export function TitleHeader({ title }: TitleHeaderProps): JSX.Element { - + {title} - + ) } diff --git a/app/src/pages/ConnectViaUSB/index.tsx b/app/src/pages/ConnectViaUSB/index.tsx index 75dee402cf0..a28b97af85c 100644 --- a/app/src/pages/ConnectViaUSB/index.tsx +++ b/app/src/pages/ConnectViaUSB/index.tsx @@ -14,7 +14,7 @@ import { POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useConnectionsQuery } from '@opentrons/react-api-client' @@ -63,9 +63,9 @@ export function ConnectViaUSB(): JSX.Element { - + {t('usb')} - + {isConnected ? ( @@ -86,16 +86,19 @@ export function ConnectViaUSB(): JSX.Element { flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4} > - + {t('successfully_connected')} - - + {t('branded:find_your_robot')} - + - + {t('no_connection_found')} - + - + {t('connect_via_usb_description_1')} - - + + {t('connect_via_usb_description_2')} - - + + {t('branded:connect_via_usb_description_3')} - + diff --git a/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx b/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx index e9f571a9131..dd02af14a64 100644 --- a/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx +++ b/app/src/pages/Devices/DevicesLanding/NewRobotSetupHelp.tsx @@ -8,7 +8,7 @@ import { Link, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -45,9 +45,9 @@ export function NewRobotSetupHelp(): JSX.Element { }} > - + {t('use_usb_cable_for_new_robot')} - + {t('learn_more_about_new_robot_setup')} diff --git a/app/src/pages/Devices/DevicesLanding/index.tsx b/app/src/pages/Devices/DevicesLanding/index.tsx index 700a18a631f..1b17556882a 100644 --- a/app/src/pages/Devices/DevicesLanding/index.tsx +++ b/app/src/pages/Devices/DevicesLanding/index.tsx @@ -16,7 +16,7 @@ import { POSITION_ABSOLUTE, SIZE_6, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { ApiHostProvider } from '@opentrons/react-api-client' @@ -75,9 +75,9 @@ export function DevicesLanding(): JSX.Element { marginTop={SPACING.spacing8} height="2.25rem" > - + {t('devices')} - + {isScanning && noRobots ? : null} @@ -146,7 +146,7 @@ function DevicesLoadingState(): JSX.Element { marginTop="10vh" marginBottom="10vh" > - {t('looking_for_robots')} + {t('looking_for_robots')} - + {tabName} - + {tabDisabledReason != null ? ( {tabDisabledReason} ) : null} diff --git a/app/src/pages/Devices/RobotSettings/index.tsx b/app/src/pages/Devices/RobotSettings/index.tsx index e18854fc65d..b93fc441d74 100644 --- a/app/src/pages/Devices/RobotSettings/index.tsx +++ b/app/src/pages/Devices/RobotSettings/index.tsx @@ -10,7 +10,7 @@ import { Flex, SIZE_6, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { ApiHostProvider } from '@opentrons/react-api-client' @@ -128,9 +128,9 @@ export function RobotSettings(): JSX.Element | null { )} {showRobotBusyBanner && ( - + {t('some_robot_controls_are_not_available')} - + )} diff --git a/app/src/pages/EmergencyStop/index.tsx b/app/src/pages/EmergencyStop/index.tsx index 2e0d60077ca..c0d430ce12a 100644 --- a/app/src/pages/EmergencyStop/index.tsx +++ b/app/src/pages/EmergencyStop/index.tsx @@ -11,7 +11,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { useEstopQuery } from '@opentrons/react-api-client' @@ -49,9 +49,9 @@ export function EmergencyStop(): JSX.Element { justifyContent={JUSTIFY_CENTER} alignItems={ALIGN_CENTER} > - + {t('install_e_stop')} - + - + {t('e_stop_connected')} - + ) : ( <> E-stop button - {t('e_stop_not_connected')} - + )} diff --git a/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx b/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx index 6d31de429ce..8d0541e041f 100644 --- a/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx +++ b/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx @@ -7,7 +7,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { @@ -109,13 +109,13 @@ const InstrumentDetailsOverflowMenu = NiceModal.create( color={COLORS.black90} aria-label="restart_icon" /> - {t('recalibrate')} - + ) : null} @@ -127,13 +127,13 @@ const InstrumentDetailsOverflowMenu = NiceModal.create( aria-label="reset-position_icon" size="2.5rem" /> - {t('drop_tips')} - + ) : null} diff --git a/app/src/pages/InstrumentsDashboard/PipetteRecalibrationODDWarning.tsx b/app/src/pages/InstrumentsDashboard/PipetteRecalibrationODDWarning.tsx index 074ce108a62..95031cf91c5 100644 --- a/app/src/pages/InstrumentsDashboard/PipetteRecalibrationODDWarning.tsx +++ b/app/src/pages/InstrumentsDashboard/PipetteRecalibrationODDWarning.tsx @@ -10,7 +10,7 @@ import { JUSTIFY_FLEX_START, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' export const PipetteRecalibrationODDWarning = (): JSX.Element | null => { @@ -36,13 +36,13 @@ export const PipetteRecalibrationODDWarning = (): JSX.Element | null => { marginRight={SPACING.spacing12} aria-label="alert-circle_icon" /> - + }} /> - + { diff --git a/app/src/pages/Labware/index.tsx b/app/src/pages/Labware/index.tsx index ae35a39fbed..21473c7255e 100644 --- a/app/src/pages/Labware/index.tsx +++ b/app/src/pages/Labware/index.tsx @@ -18,7 +18,7 @@ import { POSITION_ABSOLUTE, SecondaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useOnClickOutside, } from '@opentrons/components' @@ -129,12 +129,12 @@ export function Labware(): JSX.Element { alignItems={ALIGN_CENTER} paddingBottom={SPACING.spacing24} > - {t('labware')} - + { setShowAddLabwareSlideout(true) @@ -158,9 +158,9 @@ export function Labware(): JSX.Element { title={t('category')} /> - + {t('shared:sort_by')} - + - + - {t('create_new_def')} - + - + {isUnboxingFlowOngoing ? t('name_your_robot') : t('rename_robot')} - + {Boolean(isNaming) ? ( @@ -246,14 +249,14 @@ export function NameRobot(): JSX.Element { width="100%" > {isUnboxingFlowOngoing ? ( - {t('name_your_robot_description')} - + ) : null} - {t('name_rule_description')} - + {errors.newRobotName != null ? ( - {errors.newRobotName.message} - + ) : null} diff --git a/app/src/pages/NetworkSetupMenu/index.tsx b/app/src/pages/NetworkSetupMenu/index.tsx index 11909bdb77f..293107b7505 100644 --- a/app/src/pages/NetworkSetupMenu/index.tsx +++ b/app/src/pages/NetworkSetupMenu/index.tsx @@ -9,7 +9,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -54,27 +54,27 @@ export function NetworkSetupMenu(): JSX.Element { alignItems={ALIGN_CENTER} marginBottom="3.09375rem" > - {t('choose_network_type')} - + - {t('branded:network_setup_menu_description')} - + - + {t('run_protocol')} - + - + {pinned ? t('unpin_protocol') : t('pin_protocol')} - + - + {t('delete_protocol')} - + diff --git a/app/src/pages/ProtocolDashboard/NoProtocols.tsx b/app/src/pages/ProtocolDashboard/NoProtocols.tsx index ebaeceae9b1..dd12382e38f 100644 --- a/app/src/pages/ProtocolDashboard/NoProtocols.tsx +++ b/app/src/pages/ProtocolDashboard/NoProtocols.tsx @@ -9,7 +9,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -32,17 +32,17 @@ export function NoProtocols(): JSX.Element { width="284px" height="166px" /> - {t('nothing_here_yet')} - - + + {t('branded:send_a_protocol_to_store')} - + ) } diff --git a/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx b/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx index 75bc1676326..67148e85719 100644 --- a/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx +++ b/app/src/pages/ProtocolDashboard/PinnedProtocol.tsx @@ -16,7 +16,7 @@ import { SPACING, TYPOGRAPHY, useLongPress, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { LongPressModal } from './LongPressModal' @@ -134,16 +134,16 @@ export function PinnedProtocol(props: { width="100%" color={COLORS.grey60} > - + {lastRun !== undefined ? `${formatDistance(new Date(lastRun), new Date(), { addSuffix: true, }).replace('about ', '')}` : t('no_history')} - - + + {formatTimeWithUtcLabel(protocol.createdAt)} - + {longpress.isLongPressed && ( diff --git a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx index f6497d8899a..f3d45b0e90a 100644 --- a/app/src/pages/ProtocolDashboard/ProtocolCard.tsx +++ b/app/src/pages/ProtocolDashboard/ProtocolCard.tsx @@ -19,7 +19,7 @@ import { OVERFLOW_WRAP_BREAK_WORD, SIZE_2, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, useLongPress, } from '@opentrons/components' @@ -213,32 +213,32 @@ export function ProtocolCard(props: { size="1.5rem" aria-label="failedAnalysis_icon" /> - + {i18n.format(t('failed_analysis'), 'capitalize')} - + ) : null} - {protocolName} - + - + {lastRun != null ? formatDistance(new Date(lastRun), new Date(), { addSuffix: true, }).replace('about ', '') : t('no_history')} - + - + {formatTimeWithUtcLabel(protocol.createdAt)} - + {longpress.isLongPressed && !isFailedAnalysis && ( - + {t('branded:delete_protocol_from_app')} - + - {t('pinned_protocols')} - + { marginBottom={SPACING.spacing32} aria-label="EmptySection_ot-alert" /> - + {i18n.format(sectionText, 'capitalize')} - + ) } diff --git a/app/src/pages/ProtocolDetails/Hardware.tsx b/app/src/pages/ProtocolDetails/Hardware.tsx index 113647dbda8..d3a7c026014 100644 --- a/app/src/pages/ProtocolDetails/Hardware.tsx +++ b/app/src/pages/ProtocolDetails/Hardware.tsx @@ -9,7 +9,7 @@ import { LocationIcon, ModuleIcon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP, } from '@opentrons/components' @@ -110,9 +110,9 @@ function HardwareItem({ const hardwareName = useHardwareName(hardware) let location: JSX.Element = ( - + {i18n.format(getHardwareLocation(hardware, t as TFunction), 'titleCase')} - + ) if (hardware.hardwareType === 'module') { location = @@ -148,7 +148,7 @@ function HardwareItem({ ) : null} - {hardwareName} + {hardwareName} @@ -168,24 +168,24 @@ export const Hardware = (props: { protocolId: string }): JSX.Element => { - {i18n.format(t('location'), 'capitalize')} - + - {i18n.format(t('hardware'), 'capitalize')} - + diff --git a/app/src/pages/ProtocolDetails/Labware.tsx b/app/src/pages/ProtocolDetails/Labware.tsx index 43682b0ab20..d496b236439 100644 --- a/app/src/pages/ProtocolDetails/Labware.tsx +++ b/app/src/pages/ProtocolDetails/Labware.tsx @@ -9,7 +9,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP, } from '@opentrons/components' @@ -76,17 +76,17 @@ export const Labware = (props: { protocolId: string }): JSX.Element => { - {i18n.format(t('labware_name'), 'titleCase')} - + - { textAlign={TYPOGRAPHY.textAlignCenter} > {i18n.format(t('quantity'), 'sentenceCase')} - + @@ -123,19 +123,19 @@ export const Labware = (props: { protocolId: string }): JSX.Element => { ) : ( )} - + {name} - + - {count} - + ) diff --git a/app/src/pages/ProtocolDetails/Liquids.tsx b/app/src/pages/ProtocolDetails/Liquids.tsx index d0509177e6f..f51ddadbc11 100644 --- a/app/src/pages/ProtocolDetails/Liquids.tsx +++ b/app/src/pages/ProtocolDetails/Liquids.tsx @@ -11,7 +11,7 @@ import { Flex, Icon, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP, } from '@opentrons/components' @@ -120,12 +120,12 @@ export const Liquids = (props: { protocolId: string }): JSX.Element => { /> - + {i18n.format(liquid.displayName, 'titleCase')} - - + + {i18n.format(liquid.description, 'titleCase')} - + diff --git a/app/src/pages/ProtocolDetails/Parameters.tsx b/app/src/pages/ProtocolDetails/Parameters.tsx index 7d28277d26c..23b99faf884 100644 --- a/app/src/pages/ProtocolDetails/Parameters.tsx +++ b/app/src/pages/ProtocolDetails/Parameters.tsx @@ -12,7 +12,7 @@ import { COLORS, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP, } from '@opentrons/components' @@ -97,19 +97,19 @@ export const Parameters = (props: { protocolId: string }): JSX.Element => { - + {i18n.format(t('name'), 'capitalize')} - + - + {i18n.format(t('default_value'), 'capitalize')} - + - + {i18n.format(t('range'), 'capitalize')} - + diff --git a/app/src/pages/ProtocolDetails/index.tsx b/app/src/pages/ProtocolDetails/index.tsx index a7c6a715bfe..86a870d07cf 100644 --- a/app/src/pages/ProtocolDetails/index.tsx +++ b/app/src/pages/ProtocolDetails/index.tsx @@ -20,7 +20,7 @@ import { OVERFLOW_WRAP_ANYWHERE, POSITION_STICKY, SPACING, - StyledText, + LegacyStyledText, truncateString, TYPOGRAPHY, } from '@opentrons/components' @@ -136,14 +136,14 @@ const ProtocolHeader = ({ )} {!isProtocolFetching ? ( - {displayedTitle} - + ) : ( )} @@ -228,20 +228,20 @@ const Summary = ({ author, description, date }: SummaryProps): JSX.Element => { fontWeight={TYPOGRAPHY.fontWeightSemiBold} gridGap={SPACING.spacing4} > - {`${i18n.format(t('author'), 'capitalize')}: `} - + >{`${i18n.format(t('author'), 'capitalize')}: `} + {author} - + - {description ?? i18n.format(t('no_summary'), 'capitalize')} - + { width="max-content" padding={`${SPACING.spacing8} ${SPACING.spacing12}`} > - {`${t('protocol_info:date_added')}: ${ + {`${t('protocol_info:date_added')}: ${ date != null ? formatTimeWithUtcLabel(date) : t('shared:no_data') - }`} + }`} ) @@ -473,13 +473,13 @@ export function ProtocolDetails(): JSX.Element | null { header={deleteModalHeader} > - {t('delete_protocol_perm', { name: displayName })} - + { diff --git a/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx b/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx index 13eb691a81d..2ce3f4f7c2f 100644 --- a/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx +++ b/app/src/pages/ProtocolSetup/ConfirmAttachedModal.tsx @@ -5,7 +5,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' @@ -38,9 +38,9 @@ export function ConfirmAttachedModal({ return ( - + {t('confirm_heater_shaker_module_modal_description')} - + - {title} - + {description != null ? ( - {description} - + ) : null} - : null} {subDetail} - + {disabled || !hasRightIcon ? null : ( {!isLoading ? ( <> - + {t('prepare_to_run')} - - + {truncateString(protocolName, 100)} - + ) : ( diff --git a/app/src/pages/RobotDashboard/AnalyticsOptInModal.tsx b/app/src/pages/RobotDashboard/AnalyticsOptInModal.tsx index 4073a356aee..10c11229a0b 100644 --- a/app/src/pages/RobotDashboard/AnalyticsOptInModal.tsx +++ b/app/src/pages/RobotDashboard/AnalyticsOptInModal.tsx @@ -8,7 +8,7 @@ import { DIRECTION_ROW, Flex, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' @@ -64,9 +64,9 @@ export function AnalyticsOptInModal({ gridGap={SPACING.spacing12} paddingBottom={SPACING.spacing32} > - + {t('opt_in_description')} - + - {t('welcome_to_your_dashboard')} - - + {t('welcome_modal_description')} - + diff --git a/app/src/pages/RobotDashboard/index.tsx b/app/src/pages/RobotDashboard/index.tsx index 86cb9b693f7..55235064158 100644 --- a/app/src/pages/RobotDashboard/index.tsx +++ b/app/src/pages/RobotDashboard/index.tsx @@ -7,7 +7,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -65,13 +65,13 @@ export function RobotDashboard(): JSX.Element { } else if (recentRunsOfUniqueProtocols.length > 0) { contents = ( <> - {t('run_again')} - + diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx index 6e035af67d5..d8390ee7941 100644 --- a/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx +++ b/app/src/pages/RobotSettingsDashboard/RobotSettingButton.tsx @@ -16,7 +16,7 @@ import { JUSTIFY_SPACE_BETWEEN, SPACING, TYPOGRAPHY, - StyledText, + LegacyStyledText, } from '@opentrons/components' import type { IconName } from '@opentrons/components' @@ -76,18 +76,18 @@ export function RobotSettingButton({ alignItems={ALIGN_FLEX_START} justifyContent={JUSTIFY_CENTER} > - + {settingName} - + {settingInfo != null ? ( - {settingInfo} - + ) : null} diff --git a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx index 3cd0b477ec9..8fe6e3a5719 100644 --- a/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx +++ b/app/src/pages/RobotSettingsDashboard/RobotSettingsList.tsx @@ -17,7 +17,7 @@ import { JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -250,9 +250,12 @@ function FeatureFlags(): JSX.Element { justifyContent={JUSTIFY_CENTER} width="46.25rem" > - + {t(`__dev_internal__${flag}`)} - + @@ -273,9 +276,9 @@ export function OnOffToggle(props: { isOn: boolean }): JSX.Element { padding={`${SPACING.spacing12} ${SPACING.spacing4}`} borderRadius={BORDERS.borderRadius16} > - + {props.isOn ? t('on') : t('off')} - + ) } diff --git a/app/src/pages/Welcome/index.tsx b/app/src/pages/Welcome/index.tsx index ac8356b1072..867af7c3fd1 100644 --- a/app/src/pages/Welcome/index.tsx +++ b/app/src/pages/Welcome/index.tsx @@ -7,7 +7,7 @@ import { Flex, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { MediumButton } from '../../atoms/buttons' @@ -29,19 +29,19 @@ export function Welcome(): JSX.Element { > {IMAGE_ALT} - + {t('branded:welcome_title')} - + - {t('welcome_description')} - + - + {labelText} - + ) diff --git a/components/src/atoms/Chip/index.tsx b/components/src/atoms/Chip/index.tsx index 5582613168f..71e2a1b4510 100644 --- a/components/src/atoms/Chip/index.tsx +++ b/components/src/atoms/Chip/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { css } from 'styled-components' import { BORDERS, COLORS } from '../../helix-design-system' import { Flex } from '../../primitives' -import { StyledText } from '../StyledText' +import { LegacyStyledText } from '../StyledText' import { ALIGN_CENTER, DIRECTION_ROW } from '../../styles' import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' import { Icon } from '../../icons' @@ -146,9 +146,12 @@ export function Chip(props: ChipProps): JSX.Element { css={ICON_STYLE} /> ) : null} - + {text} - + ) } diff --git a/components/src/atoms/StyledText/LegacyStyledText.stories.tsx b/components/src/atoms/StyledText/LegacyStyledText.stories.tsx new file mode 100644 index 00000000000..0f5648751ed --- /dev/null +++ b/components/src/atoms/StyledText/LegacyStyledText.stories.tsx @@ -0,0 +1,107 @@ +/* eslint-disable storybook/prefer-pascal-case */ +import * as React from 'react' +import { SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { Flex } from '../../primitives' +import { LegacyStyledText } from './index' +import type { Meta, StoryObj } from '@storybook/react' + +const meta: Meta = { + title: 'Library/Atoms/LegacyStyledText', + component: LegacyStyledText, + decorators: [ + Story => ( + + + + ), + ], +} + +export default meta + +type Story = StoryObj + +const dummyText = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus sapien nunc dolor, aliquet nibh placerat et nisl, arcu. Pellentesque blandit sollicitudin vitae morbi morbi vulputate cursus tellus. Amet proin donec proin id aliquet in nullam.' + +export const h1: Story = { + args: { + as: 'h1', + children: dummyText, + }, +} + +export const h2: Story = { + args: { + as: 'h2', + children: dummyText, + }, +} + +export const h3: Story = { + args: { + as: 'h3', + children: dummyText, + }, +} + +export const h6: Story = { + args: { + as: 'h6', + children: dummyText, + }, +} + +export const p: Story = { + args: { + as: 'p', + children: dummyText, + }, +} + +export const label: Story = { + args: { + as: 'label', + children: dummyText, + }, +} + +export const h2SemiBold: Story = { + args: { + as: 'h2', + fontWeight: TYPOGRAPHY.fontWeightSemiBold, + children: dummyText, + }, +} + +export const h3SemiBold: Story = { + args: { + as: 'h3', + fontWeight: TYPOGRAPHY.fontWeightSemiBold, + children: dummyText, + }, +} + +export const h6SemiBold: Story = { + args: { + as: 'h6', + fontWeight: TYPOGRAPHY.fontWeightSemiBold, + children: dummyText, + }, +} + +export const pSemiBold: Story = { + args: { + as: 'p', + fontWeight: TYPOGRAPHY.fontWeightSemiBold, + children: dummyText, + }, +} + +export const labelSemiBold: Story = { + args: { + as: 'label', + fontWeight: TYPOGRAPHY.fontWeightSemiBold, + children: dummyText, + }, +} diff --git a/components/src/atoms/StyledText/index.tsx b/components/src/atoms/StyledText/LegacyStyledText.tsx similarity index 93% rename from components/src/atoms/StyledText/index.tsx rename to components/src/atoms/StyledText/LegacyStyledText.tsx index aa1eb16c29f..83df2c69e06 100644 --- a/components/src/atoms/StyledText/index.tsx +++ b/components/src/atoms/StyledText/LegacyStyledText.tsx @@ -5,7 +5,7 @@ import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants' import type * as React from 'react' import type { FlattenSimpleInterpolation } from 'styled-components' -export interface Props extends React.ComponentProps { +export interface LegacyProps extends React.ComponentProps { children?: React.ReactNode } @@ -80,7 +80,9 @@ const styleMap: { [tag: string]: FlattenSimpleInterpolation } = { labelBold: TYPOGRAPHY.smallBodyTextBold, } -export const StyledText: (props: Props) => JSX.Element = styled(Text)` +export const LegacyStyledText: (props: LegacyProps) => JSX.Element = styled( + Text +)` ${props => { let fontWeight = '' if (props.fontWeight === TYPOGRAPHY.fontWeightSemiBold) { diff --git a/components/src/atoms/StyledText/StyledText.stories.tsx b/components/src/atoms/StyledText/StyledText.stories.tsx index 388f7e79bdf..11b198698c5 100644 --- a/components/src/atoms/StyledText/StyledText.stories.tsx +++ b/components/src/atoms/StyledText/StyledText.stories.tsx @@ -1,13 +1,27 @@ /* eslint-disable storybook/prefer-pascal-case */ import * as React from 'react' -import { SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { SPACING } from '../../ui-style-constants' import { Flex } from '../../primitives' -import { StyledText } from './index' +import { StyledText, ODD_STYLES, HELIX_STYLES } from './index' import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { title: 'Library/Atoms/StyledText', component: StyledText, + argTypes: { + oddStyle: { + control: { + type: 'select', + }, + options: ODD_STYLES, + }, + desktopStyle: { + control: { + type: 'select', + }, + options: HELIX_STYLES, + }, + }, decorators: [ Story => ( @@ -24,84 +38,10 @@ type Story = StoryObj const dummyText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus sapien nunc dolor, aliquet nibh placerat et nisl, arcu. Pellentesque blandit sollicitudin vitae morbi morbi vulputate cursus tellus. Amet proin donec proin id aliquet in nullam.' -export const h1: Story = { - args: { - as: 'h1', - children: dummyText, - }, -} - -export const h2: Story = { - args: { - as: 'h2', - children: dummyText, - }, -} - -export const h3: Story = { - args: { - as: 'h3', - children: dummyText, - }, -} - -export const h6: Story = { - args: { - as: 'h6', - children: dummyText, - }, -} - -export const p: Story = { - args: { - as: 'p', - children: dummyText, - }, -} - -export const label: Story = { - args: { - as: 'label', - children: dummyText, - }, -} - -export const h2SemiBold: Story = { - args: { - as: 'h2', - fontWeight: TYPOGRAPHY.fontWeightSemiBold, - children: dummyText, - }, -} - -export const h3SemiBold: Story = { - args: { - as: 'h3', - fontWeight: TYPOGRAPHY.fontWeightSemiBold, - children: dummyText, - }, -} - -export const h6SemiBold: Story = { - args: { - as: 'h6', - fontWeight: TYPOGRAPHY.fontWeightSemiBold, - children: dummyText, - }, -} - -export const pSemiBold: Story = { - args: { - as: 'p', - fontWeight: TYPOGRAPHY.fontWeightSemiBold, - children: dummyText, - }, -} - -export const labelSemiBold: Story = { +export const Example: Story = { args: { - as: 'label', - fontWeight: TYPOGRAPHY.fontWeightSemiBold, + oddStyle: 'level1Header', + desktopStyle: 'displayBold', children: dummyText, }, } diff --git a/components/src/atoms/StyledText/StyledText.tsx b/components/src/atoms/StyledText/StyledText.tsx new file mode 100644 index 00000000000..a4bbf610328 --- /dev/null +++ b/components/src/atoms/StyledText/StyledText.tsx @@ -0,0 +1,275 @@ +import styled, { css } from 'styled-components' +import { Text } from '../../primitives' +import { TYPOGRAPHY, RESPONSIVENESS } from '../../ui-style-constants' +import { TYPOGRAPHY as HELIX_TYPOGRAPHY } from '../../helix-design-system/product' + +import type * as React from 'react' +import type { FlattenSimpleInterpolation } from 'styled-components' + +const helixProductStyleMap = { + displayBold: { + as: 'h1', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleDisplayBold}; + } + `, + }, + headingLargeRegular: { + as: 'h2', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleHeadingLargeRegular}; + } + `, + }, + headingLargeBold: { + as: 'h2', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleHeadingLargeBold}; + } + `, + }, + headingMediumSemiBold: { + as: 'h3', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleHeadingMediumSemiBold}; + } + `, + }, + headingSmallRegular: { + as: 'h4', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleHeadingSmallRegular}; + } + `, + }, + headingSmallBold: { + as: 'h4', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleHeadingSmallBold}; + } + `, + }, + bodyLargeSemiBold: { + as: 'p', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleBodyLargeSemiBold}; + } + `, + }, + bodyLargeRegular: { + as: 'p', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleBodyLargeRegular}; + } + `, + }, + bodyDefaultSemiBold: { + as: 'p', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleBodyDefaultSemiBold}; + } + `, + }, + bodyDefaultRegular: { + as: 'p', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleBodyDefaultRegular}; + } + `, + }, + captionSemiBold: { + as: 'label', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleCaptionSemiBold}; + } + `, + }, + captionRegular: { + as: 'label', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleCaptionRegular}; + } + `, + }, + codeRegular: { + as: 'p', + style: css` + @media not (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { + font: ${HELIX_TYPOGRAPHY.fontStyleCodeRegular}; + } + `, + }, +} as const + +const ODDStyleMap = { + level1Header: { + as: 'h1', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level1Header}; + } + `, + }, + level2HeaderRegular: { + as: 'h2', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level2HeaderRegular}; + } + `, + }, + level2HeaderSemiBold: { + as: 'h2', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level2HeaderSemiBold} + } + `, + }, + level2HeaderBold: { + as: 'h2', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level2HeaderBold} + } + `, + }, + + level3HeaderRegular: { + as: 'h3', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level3HeaderRegular}; + } + `, + }, + level3HeaderSemiBold: { + as: 'h3', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level3HeaderSemiBold} + } + `, + }, + + level3HeaderBold: { + as: 'h3', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level3HeaderBold} + } + `, + }, + + level4HeaderRegular: { + as: 'h4', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level4HeaderRegular}; + } + `, + }, + level4HeaderBold: { + as: 'h4', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.level4HeaderBold} + } + `, + }, + + bodyTextRegular: { + as: 'p', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.bodyTextRegular} + } + `, + }, + bodyTextSemiBold: { + as: 'p', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.bodyTextSemiBold} + } + `, + }, + bodyTextBold: { + as: 'p', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.bodyTextBold} + } + `, + }, + smallBodyTextRegular: { + as: 'label', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.smallBodyTextRegular} + } + `, + }, + + smallBodyTextSemiBold: { + as: 'label', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + font-size: ${TYPOGRAPHY.fontSize20}; + line-height: ${TYPOGRAPHY.lineHeight24}; + } + `, + }, + + smallBodyTextBold: { + as: 'label', + style: css` + @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { + ${TYPOGRAPHY.smallBodyTextBold} + } + `, + }, +} as const + +export interface Props extends React.ComponentProps { + oddStyle?: ODDStyles + desktopStyle?: HelixStyles + children?: React.ReactNode +} +export const ODD_STYLES = Object.keys(ODDStyleMap) +export const HELIX_STYLES = Object.keys(helixProductStyleMap) +export type HelixStyles = keyof typeof helixProductStyleMap +export type ODDStyles = keyof typeof ODDStyleMap + +function styleForDesktopName(name?: HelixStyles): FlattenSimpleInterpolation { + return name ? helixProductStyleMap[name].style : css`` +} + +function styleForODDName(name?: ODDStyles): FlattenSimpleInterpolation { + return name ? ODDStyleMap[name].style : css`` +} + +// this is some artifact of the way styled-text forwards arguments. +/* eslint-disable @typescript-eslint/no-unsafe-argument */ +const DesktopStyledText: (props: Props) => JSX.Element = styled(Text)` + ${props => styleForDesktopName(props.desktopStyle)} +` +/* eslint-enable @typescript-eslint/no-unsafe-argument */ + +export const StyledText: (props: Props) => JSX.Element = styled( + DesktopStyledText +)` + ${props => styleForODDName(props.oddStyle)} +` diff --git a/components/src/atoms/StyledText/__tests__/StyledText.test.tsx b/components/src/atoms/StyledText/__tests__/StyledText.test.tsx index 3bf459da6a6..b6e0a3909f2 100644 --- a/components/src/atoms/StyledText/__tests__/StyledText.test.tsx +++ b/components/src/atoms/StyledText/__tests__/StyledText.test.tsx @@ -4,14 +4,14 @@ import '@testing-library/jest-dom/vitest' import { screen } from '@testing-library/react' import { TYPOGRAPHY } from '../../../ui-style-constants' import { renderWithProviders } from '../../../testing/utils' -import { StyledText } from '..' +import { LegacyStyledText } from '..' -const render = (props: React.ComponentProps) => { - return renderWithProviders()[0] +const render = (props: React.ComponentProps) => { + return renderWithProviders()[0] } describe('StyledText', () => { - let props: React.ComponentProps + let props: React.ComponentProps // testing styles (font size, font weight, and line height) it('should render h1 default style', () => { props = { diff --git a/components/src/atoms/StyledText/index.ts b/components/src/atoms/StyledText/index.ts new file mode 100644 index 00000000000..20e12b7d3c6 --- /dev/null +++ b/components/src/atoms/StyledText/index.ts @@ -0,0 +1,2 @@ +export * from './StyledText' +export * from './LegacyStyledText' diff --git a/components/src/atoms/Tag/index.tsx b/components/src/atoms/Tag/index.tsx index ad445ac1b07..e3cd620c17b 100644 --- a/components/src/atoms/Tag/index.tsx +++ b/components/src/atoms/Tag/index.tsx @@ -5,7 +5,7 @@ import { Flex } from '../../primitives' import { ALIGN_CENTER, DIRECTION_ROW } from '../../styles' import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' import { Icon } from '../../icons' -import { StyledText } from '../StyledText' +import { LegacyStyledText } from '../StyledText' import type { IconName } from '../../icons' @@ -102,7 +102,7 @@ export function Tag(props: TagProps): JSX.Element { css={ICON_STYLE} /> ) : null} - {text} + {text} {iconName != null && iconPosition === 'right' ? ( - {showMountLabel && !has96Channel ? `${mount} pipette` : 'pipette'} - - + + {description} - + - + {'Tip rack'} - +
    {tiprackModels != null && tiprackModels.length > 0 ? ( tiprackModels.map((model, index) => (
  • - + {model} - +
    • )) ) : ( - + {'None'} - + )}
diff --git a/components/src/lists/TitledList.tsx b/components/src/lists/TitledList.tsx index 4fbe4ab58ee..777b11cc511 100644 --- a/components/src/lists/TitledList.tsx +++ b/components/src/lists/TitledList.tsx @@ -3,7 +3,7 @@ import * as React from 'react' import cx from 'classnames' import { Icon } from '../icons' -import { StyledText } from '../atoms' +import { LegacyStyledText } from '../atoms' import { COLORS } from '../helix-design-system' import type { IconName, IconProps } from '../icons' @@ -121,9 +121,13 @@ export function TitledList(props: TitledListProps): JSX.Element { {iconName && ( )} - + {props.title} - + {collapsible && (
- + {bodyText} - + ) } diff --git a/components/src/molecules/ParametersTable/index.tsx b/components/src/molecules/ParametersTable/index.tsx index 0e1f0a43719..275b494c2ce 100644 --- a/components/src/molecules/ParametersTable/index.tsx +++ b/components/src/molecules/ParametersTable/index.tsx @@ -8,7 +8,7 @@ import { import { BORDERS, COLORS } from '../../helix-design-system' import { SPACING, TYPOGRAPHY } from '../../ui-style-constants/index' import { Chip } from '../../atoms/Chip' -import { StyledText } from '../../atoms/StyledText' +import { LegacyStyledText } from '../../atoms/StyledText' import { Tooltip, useHoverTooltip } from '../../tooltips' import { Icon } from '../../icons' import { Flex } from '../../primitives' @@ -89,17 +89,17 @@ export function ParametersTable({ width={FLEX_MAX_CONTENT} /> ) : ( - + {formatRunTimeParameterDefaultValue(parameter, t)} - + )} - + {parameter.type === 'csv_file' ? t('n_a') : formatRange(parameter)} - + ) @@ -122,7 +122,7 @@ const ParameterName = (props: ParameterNameProps): JSX.Element => { return ( - { `} > {displayName} - + {description != null ? ( <> diff --git a/components/src/molecules/RoundTab.stories.tsx b/components/src/molecules/RoundTab.stories.tsx index 340aedeccbd..6c5bfbf8848 100644 --- a/components/src/molecules/RoundTab.stories.tsx +++ b/components/src/molecules/RoundTab.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { SPACING, TYPOGRAPHY } from '../ui-style-constants' import { Flex } from '../primitives' -import { StyledText } from '../atoms/StyledText' +import { LegacyStyledText } from '../atoms/StyledText' import { DIRECTION_COLUMN, DIRECTION_ROW } from '../styles' import { RoundTab as RoundTabComponent } from './RoundTab' import type { Meta, StoryObj } from '@storybook/react' @@ -32,9 +32,9 @@ const Tabs = (): JSX.Element => { }} tabName={'setup'} > - + {'Setup'} - + { setStep('parameters') }} > - + {'Parameters'} - + { setStep('module controls') }} > - + {'Module Controls'} - + { setStep('run preview') }} > - + {'Run Preview'} - + - {step} - + ) } diff --git a/components/src/primitives/Flex.stories.tsx b/components/src/primitives/Flex.stories.tsx index 1335fa52919..b48befe947e 100644 --- a/components/src/primitives/Flex.stories.tsx +++ b/components/src/primitives/Flex.stories.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { BORDERS, COLORS } from '../helix-design-system' import { SPACING } from '../ui-style-constants' import { DIRECTION_COLUMN, JUSTIFY_SPACE_AROUND } from '../styles' -import { StyledText } from '../atoms/StyledText' +import { LegacyStyledText } from '../atoms/StyledText' import { Box, Flex as FlexComponent } from '../primitives' import type { Meta, StoryObj } from '@storybook/react' @@ -25,9 +25,9 @@ export const Flex: Story = { padding={SPACING.spacing16} borderRadius={BORDERS.borderRadius4} > - + This is a flex child - + , - + This is a flex child - + , ], flexDirection: DIRECTION_COLUMN, diff --git a/labware-library/src/labware-creator/components/sections/StackingOffsets.tsx b/labware-library/src/labware-creator/components/sections/StackingOffsets.tsx index 78f9e298f9b..c85ea22c257 100644 --- a/labware-library/src/labware-creator/components/sections/StackingOffsets.tsx +++ b/labware-library/src/labware-creator/components/sections/StackingOffsets.tsx @@ -15,7 +15,7 @@ import { JUSTIFY_SPACE_BETWEEN, SPACING, TYPOGRAPHY, - StyledText, + LegacyStyledText, AlertItem, Box, } from '@opentrons/components' @@ -180,9 +180,12 @@ export function StackingOffsets(): JSX.Element | null {
{modifiedAdapterDefinitions.length === 0 ? null : ( - + Adapters - + {modifiedAdapterDefinitions.map((definition, index) => { const key = definition.parameters.loadName const fieldName = `compatibleAdapters.${key}` @@ -263,9 +266,12 @@ export function StackingOffsets(): JSX.Element | null { marginTop={SPACING.spacing4} gridGap={SPACING.spacing4} > - + Modules - + {modifiedModuleModels.map((model, index) => { const fieldName = `compatibleModules.${model}` const isChecked = diff --git a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx index f6a995d963b..b92c5745163 100644 --- a/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx +++ b/opentrons-ai-client/src/molecules/ChatDisplay/index.tsx @@ -16,7 +16,7 @@ import { POSITION_RELATIVE, PrimaryButton, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -52,7 +52,9 @@ export function ChatDisplay({ chat, chatId }: ChatDisplayProps): JSX.Element { paddingRight={isUser ? undefined : SPACING.spacing40} > - {isUser ? t('you') : t('opentronsai')} + + {isUser ? t('you') : t('opentronsai')} + {/* text should be markdown so this component will have a package or function to parse markdown */} + return } function ListItemText(props: JSX.IntrinsicAttributes): JSX.Element { - return + return } function UnnumberedListText(props: JSX.IntrinsicAttributes): JSX.Element { - return + return } const CodeWrapper = styled(Flex)` diff --git a/opentrons-ai-client/src/molecules/ChatFooter/index.tsx b/opentrons-ai-client/src/molecules/ChatFooter/index.tsx index f206f57407f..ae1653c0708 100644 --- a/opentrons-ai-client/src/molecules/ChatFooter/index.tsx +++ b/opentrons-ai-client/src/molecules/ChatFooter/index.tsx @@ -6,7 +6,7 @@ import { DIRECTION_COLUMN, Flex, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { InputPrompt } from '../InputPrompt' @@ -21,7 +21,9 @@ export function ChatFooter(): JSX.Element { paddingBottom={SPACING.spacing24} > - {t('disclaimer')} + + {t('disclaimer')} + ) } diff --git a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx index 1eb38a07841..8820c759c8b 100644 --- a/opentrons-ai-client/src/molecules/InputPrompt/index.tsx +++ b/opentrons-ai-client/src/molecules/InputPrompt/index.tsx @@ -91,7 +91,7 @@ export function InputPrompt(): JSX.Element { return ( - - {t('loading')} + {t('loading')} ) diff --git a/opentrons-ai-client/src/molecules/PrimaryFloatingButton/index.tsx b/opentrons-ai-client/src/molecules/PrimaryFloatingButton/index.tsx index 056e4aee2b4..fd5a11a6fbc 100644 --- a/opentrons-ai-client/src/molecules/PrimaryFloatingButton/index.tsx +++ b/opentrons-ai-client/src/molecules/PrimaryFloatingButton/index.tsx @@ -10,7 +10,7 @@ import { Icon, JUSTIFY_CENTER, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -36,13 +36,13 @@ export function PrimaryFloatingButton({ color={COLORS.white} data-testid="PrimaryFloatingButton_Icon" /> - {buttonText} - + ) } diff --git a/opentrons-ai-client/src/molecules/PromptGuide/index.tsx b/opentrons-ai-client/src/molecules/PromptGuide/index.tsx index 2515f76bd6f..a7b76694911 100644 --- a/opentrons-ai-client/src/molecules/PromptGuide/index.tsx +++ b/opentrons-ai-client/src/molecules/PromptGuide/index.tsx @@ -8,7 +8,7 @@ import { Flex, Link, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -25,15 +25,17 @@ export function PromptGuide(): JSX.Element { borderRadius={BORDERS.borderRadius12} gridGap={SPACING.spacing32} > - + {t('what_typeof_protocol')} - + - + {t('make_sure_your_prompt')} - - {t('key_info')} + + + {t('key_info')} +
  • - {t('robot_type')} + {t('robot_type')}
  • - {t('modules_and_adapters')} + {t('modules_and_adapters')}
  • , - span: , + span: , }} />
  • - {t('pipettes')} + {t('pipettes')}
  • - {t('liquid_locations')} + {t('liquid_locations')}
  • - {t('commands')} + {t('commands')}
    • - {t('notes')} + {t('notes')}
  • - {t('example')} + {t('example')}
  • - {t('simulate_description')} + {t('simulate_description')}
  • - {t('reload_page')} + {t('reload_page')}
    • diff --git a/opentrons-ai-client/src/molecules/SidePanel/index.tsx b/opentrons-ai-client/src/molecules/SidePanel/index.tsx index c5798376f67..da56e89b53f 100644 --- a/opentrons-ai-client/src/molecules/SidePanel/index.tsx +++ b/opentrons-ai-client/src/molecules/SidePanel/index.tsx @@ -9,7 +9,7 @@ import { OVERFLOW_AUTO, POSITION_FIXED, SPACING, - StyledText, + LegacyStyledText, TYPOGRAPHY, WRAP, } from '@opentrons/components' @@ -38,17 +38,19 @@ export function SidePanel(): JSX.Element { {/* body text */} - + {t('side_panel_header')} - - {t('side_panel_body')} + + + {t('side_panel_body')} + {/* buttons */} - + {t('try_example_prompts')} - + @@ -58,13 +60,13 @@ export function SidePanel(): JSX.Element { - {t('got_feedback')} - + {t('share_your_thoughts')} diff --git a/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx b/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx index c09166d67c5..79a989417fa 100644 --- a/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx +++ b/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx @@ -9,7 +9,7 @@ import { Flex, OVERFLOW_AUTO, SPACING, - StyledText, + LegacyStyledText, } from '@opentrons/components' import { PromptGuide } from '../../molecules/PromptGuide' import { ChatDisplay } from '../../molecules/ChatDisplay' @@ -51,7 +51,7 @@ export function MainContentContainer(): JSX.Element { > {/* Prompt Guide remain as a reference for users. */} - {t('opentronsai')} + {t('opentronsai')} diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx index f4df9bd2425..3c90930da75 100644 --- a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx +++ b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx @@ -9,7 +9,7 @@ import { InputField, RadioGroup, SPACING, - StyledText, + LegacyStyledText, Tooltip, useHoverTooltip, } from '@opentrons/components' @@ -242,9 +242,9 @@ export const TipPositionModal = ( const TipPositionInputField = !isDefault ? ( - + {t('tip_position.field_titles.x_position')} - + - + {t('tip_position.field_titles.y_position')} - + {t('tooltip:y_position_value')} - + {t('tip_position.field_titles.z_position')} - + - {text} - + {multiples != null ? ( <> diff --git a/protocol-designer/src/components/modals/FilePipettesModal/TiprackOption.tsx b/protocol-designer/src/components/modals/FilePipettesModal/TiprackOption.tsx index 086966230e3..ccf786fffd1 100644 --- a/protocol-designer/src/components/modals/FilePipettesModal/TiprackOption.tsx +++ b/protocol-designer/src/components/modals/FilePipettesModal/TiprackOption.tsx @@ -7,7 +7,7 @@ import { COLORS, SPACING, ALIGN_CENTER, - StyledText, + LegacyStyledText, BORDERS, useHoverTooltip, Tooltip, @@ -89,7 +89,7 @@ export function TiprackOption(props: TiprackOptionProps): JSX.Element { cursor={isDisabled ? 'auto' : 'pointer'} {...targetProps} > - {text} + {text} {isDisabled ? ( {t('disabled_no_space_pipette')}