feat(app): add heater shaker wizard key parts page (#9499)

This PR adds the heater shaker wizard key parts component.

app/src/assets/localization/en/heater_shaker.json

@@ -51,5 +51,9 @@
   "attach_module_extend_anchors": "<block>Hold the module flat against the deck and turn screws <icon></icon> clockwise to <bold>extend the anchors</bold>.",
   "attach_module_check_attachment": "Check attachment by gently pulling up and rocking the module.",
   "step_3_power_on": "<block><strong>Step 3 of 4: Power on the module</strong></block><block>Connect your module to the robot and and power it on.</block>",
-  "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 <bold>away</bold> from you.",
+  "heater_shaker_latch_description": "<block>The <strong>Labware Latch</strong> keeps labware secure while the module is shaking.</block> <block>It can be opened or closed manually and with software but is closed and locked while the module is shaking.</block>",
+  "heater_shaker_anchor_description": "<block>The 2 <strong>Anchors</strong> keep the module attached to the deck while it is shaking.</block> <block>The screw above each anchor is used to extend and retract them. See animation below.</block> <block>Extending the bolts slightly increases the module’s footprint, which allows it to be more firmly attached to the edges of a slot.</block>"
 }

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 <div>KeyParts</div>
+  const { t } = useTranslation('heater_shaker')
+  return (
+    <>
+      <Text
+        color={COLORS.darkBlack}
+        paddingTop={SPACING.spacing3}
+        fontWeight={TYPOGRAPHY.fontWeightBold}
+        data-testid={'heater_shaker_wizard_keyparts_title'}
+      >
+        {t('heater_shaker_key_parts')}
+      </Text>
+      <Text
+        color={COLORS.darkBlack}
+        paddingTop={SPACING.spacing3}
+        fontWeight={TYPOGRAPHY.fontWeightRegular}
+        data-testid={'heater_shaker_wizard_keyparts_subtitle'}
+      >
+        <Trans
+          t={t}
+          i18nKey={'heater_shaker_orient_module'}
+          components={{
+            bold: <strong />,
+          }}
+        />
+      </Text>
+      <Flex
+        flexDirection={DIRECTION_ROW}
+        marginY={SPACING.spacing6}
+        alignItems={ALIGN_FLEX_START}
+      >
+        <img src={HeaterShakerKeyParts} alt="Heater Shaker Key Parts" />
+
+        <Flex
+          flexDirection={DIRECTION_COLUMN}
+          justifyContent={JUSTIFY_SPACE_BETWEEN}
+          marginTop={'8rem'}
+          marginRight={SPACING.spacing6}
+        >
+          <Trans
+            t={t}
+            i18nKey={'heater_shaker_latch_description'}
+            components={{
+              bold: <strong />,
+              block: (
+                <Text
+                  fontSize={TYPOGRAPHY.fontSizeP}
+                  marginBottom={SPACING.spacing4}
+                />
+              ),
+            }}
+          />
+          <Trans
+            t={t}
+            i18nKey={'heater_shaker_anchor_description'}
+            components={{
+              bold: <strong />,
+              block: (
+                <Text
+                  fontSize={TYPOGRAPHY.fontSizeP}
+                  marginBottom={SPACING.spacing4}
+                />
+              ),
+            }}
+          />
+          <video
+            css={css`
+              max-width: 100%;
+              max-height: 10rem;
+            `}
+            autoPlay={true}
+            loop={true}
+            controls={false}
+            data-testid={'heater_shaker_deck_lock'}
+          >
+            <source src={HeaterShakerDeckLock} />
+          </video>
+        </Flex>
+      </Flex>
+    </>
+  )
 }

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(<KeyParts />, {
+    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')
+  })
+})