feat(protocol-designer): onboarding animations

protocol-designer/src/pages/CreateNewProtocolWizard/WizardBody.tsx

@@ -1,6 +1,6 @@
-import type * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import { css } from 'styled-components'
+import { useState, useLayoutEffect } from 'react'
 import {
   ALIGN_CENTER,
   ALIGN_END,
@@ -18,7 +18,12 @@
   TYPOGRAPHY,
   useHoverTooltip,
 } from '@opentrons/components'
-import temporaryImg from '../../assets/images/placeholder_image_delete.png'
+import one from '../../assets/images/onboarding_animation_1.webm'
+import two from '../../assets/images/onboarding_animation_2.webm'
+import three from '../../assets/images/onboarding_animation_3.webm'
+import four from '../../assets/images/onboarding_animation_4.webm'
+import five from '../../assets/images/onboarding_animation_5.webm'
+import six from '../../assets/images/onboarding_animation_6.webm'
 import { BUTTON_LINK_STYLE } from '../../atoms'
 
 interface WizardBodyProps {
@@ -29,9 +34,18 @@
   disabled?: boolean
   goBack?: () => void
   subHeader?: string
-  imgSrc?: string
   tooltipOnDisabled?: string
 }
+
+const ONBOARDING_ANIMATIONS: Record<number, string> = {
+  1: one,
+  2: two,
+  3: three,
+  4: four,
+  5: five,
+  6: six,
+}
+
 export function WizardBody(props: WizardBodyProps): JSX.Element {
   const {
     stepNumber,
@@ -41,13 +55,22 @@
     subHeader,
     proceed,
     disabled = false,
-    imgSrc,
     tooltipOnDisabled,
   } = props
   const { t } = useTranslation('shared')
   const [targetProps, tooltipProps] = useHoverTooltip({
     placement: 'top',
   })
+  const [asset, setAsset] = useState<string | null>(null)
+  const [loaded, setLoaded] = useState<boolean>(false)
+
+  useLayoutEffect(() => {
+    const videoAsset = ONBOARDING_ANIMATIONS[stepNumber]
+    setLoaded(false)
+    setAsset(videoAsset)
+    const timeout = setTimeout(() => setLoaded(true), 100)
+    return () => clearTimeout(timeout)
+  }, [stepNumber])
 
   return (
     <Flex
@@ -119,19 +142,29 @@
           ) : null}
         </Flex>
       </Flex>
-      <Flex>
-        <StyledImg
-          //    TODO(ja, 8/7/24): delete this and add real images!!
-          src={imgSrc ?? temporaryImg}
-          width="100%"
-          height="100%"
-        />
+      <Flex
+        width="40%"
+        css={css`
+          opacity: ${loaded ? 1 : 0};
+          transition: opacity 0.5s ease-in-out;
+        `}
+      >
+        <video
+          preload="auto"
+          css={css`
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            border-radius: ${BORDERS.borderRadius16};
+          `}
+          autoPlay={true}
+          loop={false}
+          controls={false}
+          aria-label={`onboarding animation for page ${stepNumber}`}
+        >
+          <source src={asset ?? ''} type="video/mp4" />
+        </video>
       </Flex>
     </Flex>
   )
 }
-
-const StyledImg = styled.img`
-  border-radius: ${BORDERS.borderRadius16};
-  max-height: 844px;
-`

protocol-designer/src/pages/CreateNewProtocolWizard/__tests__/WizardBody.test.tsx

@@ -37,6 +37,6 @@ describe('WizardBody', () => {
     expect(props.proceed).toHaveBeenCalled()
     fireEvent.click(screen.getByRole('button', { name: 'Go back' }))
     expect(props.goBack).toHaveBeenCalled()
-    screen.getByRole('img', { name: '' })
+    screen.getByLabelText('onboarding animation for page 1')
   })
 })

yarn.lock

@@ -20526,7 +20526,16 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20656,7 +20665,7 @@ stringify-object@^3.2.1:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -20677,6 +20686,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -22905,7 +22921,7 @@ worker-plugin@^5.0.0:
   dependencies:
     loader-utils "^1.1.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -22932,6 +22948,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"