diff --git a/app/src/assets/images/heater-shaker-key-parts.png b/app/src/assets/images/heater-shaker-key-parts.png new file mode 100644 index 00000000000..0ec6c70c8e8 Binary files /dev/null and b/app/src/assets/images/heater-shaker-key-parts.png differ diff --git a/app/src/assets/localization/en/heater_shaker.json b/app/src/assets/localization/en/heater_shaker.json index 5465d193a2b..e2cd7305c97 100644 --- a/app/src/assets/localization/en/heater_shaker.json +++ b/app/src/assets/localization/en/heater_shaker.json @@ -51,5 +51,9 @@ "attach_module_extend_anchors": "Hold the module flat against the deck and turn screws clockwise to extend the anchors.", "attach_module_check_attachment": "Check attachment by gently pulling up and rocking the module.", "step_3_power_on": "Step 3 of 4: Power on the moduleConnect your module to the robot and and power it on.", - "module_is_not_connected": "Module is not connected" + "module_is_not_connected": "Module is not connected", + "heater_shaker_key_parts": "Key Heater Shaker parts and terminology", + "heater_shaker_orient_module": "Orient the module so its power ports face away from you.", + "heater_shaker_latch_description": "The Labware Latch keeps labware secure while the module is shaking. It can be opened or closed manually and with software but is closed and locked while the module is shaking.", + "heater_shaker_anchor_description": "The 2 Anchors keep the module attached to the deck while it is shaking. The screw above each anchor is used to extend and retract them. See animation below. Extending the bolts slightly increases the module’s footprint, which allows it to be more firmly attached to the edges of a slot." } diff --git a/app/src/assets/videos/heater-shaker-setup/HS_Deck_Lock_Anim.webm b/app/src/assets/videos/heater-shaker-setup/HS_Deck_Lock_Anim.webm new file mode 100644 index 00000000000..27df70b5568 Binary files /dev/null and b/app/src/assets/videos/heater-shaker-setup/HS_Deck_Lock_Anim.webm differ diff --git a/app/src/organisms/Devices/HeaterShakerWizard/KeyParts.tsx b/app/src/organisms/Devices/HeaterShakerWizard/KeyParts.tsx index 73a863e5ee2..972ac110f61 100644 --- a/app/src/organisms/Devices/HeaterShakerWizard/KeyParts.tsx +++ b/app/src/organisms/Devices/HeaterShakerWizard/KeyParts.tsx @@ -1,5 +1,99 @@ import React from 'react' +import { Trans, useTranslation } from 'react-i18next' +import { css } from 'styled-components' +import { + ALIGN_FLEX_START, + COLORS, + DIRECTION_COLUMN, + DIRECTION_ROW, + Flex, + JUSTIFY_SPACE_BETWEEN, + SPACING, + Text, + TYPOGRAPHY, +} from '@opentrons/components' +import HeaterShakerKeyParts from '../../../assets/images/heater-shaker-key-parts.png' +import HeaterShakerDeckLock from '../../../assets/videos/heater-shaker-setup/HS_Deck_Lock_Anim.webm' export function KeyParts(): JSX.Element { - return
KeyParts
+ const { t } = useTranslation('heater_shaker') + return ( + <> + + {t('heater_shaker_key_parts')} + + + , + }} + /> + + + Heater Shaker Key Parts + + + , + block: ( + + ), + }} + /> + , + block: ( + + ), + }} + /> + + + + + ) } diff --git a/app/src/organisms/Devices/HeaterShakerWizard/__tests__/KeyParts.test.tsx b/app/src/organisms/Devices/HeaterShakerWizard/__tests__/KeyParts.test.tsx new file mode 100644 index 00000000000..ea124418a56 --- /dev/null +++ b/app/src/organisms/Devices/HeaterShakerWizard/__tests__/KeyParts.test.tsx @@ -0,0 +1,45 @@ +import * as React from 'react' +import { nestedTextMatcher, renderWithProviders } from '@opentrons/components' +import { i18n } from '../../../../i18n' +import { KeyParts } from '../KeyParts' + +const render = () => { + return renderWithProviders(, { + i18nInstance: i18n, + })[0] +} + +describe('KeyParts', () => { + it('renders correct title, image and body', () => { + const { getByText, getByAltText, getByTestId } = render() + + getByText('Key Heater Shaker parts and terminology') + getByText( + nestedTextMatcher( + 'Orient the module so its power ports face away from you.' + ) + ) + getByText( + nestedTextMatcher( + 'The Labware Latch keeps labware secure while the module is shaking.' + ) + ) + getByText( + 'It can be opened or closed manually and with software but is closed and locked while the module is shaking.' + ) + getByText( + nestedTextMatcher( + 'The 2 Anchors keep the module attached to the deck while it is shaking.' + ) + ) + getByText( + 'The screw above each anchor is used to extend and retract them. See animation below.' + ) + getByText( + 'Extending the bolts slightly increases the module’s footprint, which allows it to be more firmly attached to the edges of a slot.' + ) + getByAltText('Heater Shaker Key Parts') + + getByTestId('heater_shaker_deck_lock') + }) +})