Merge pull request #1502 from jay-hodgson/PORTALS-3312b

PORTALS-3312 (followup): add a fade and slide to portal feature highlight image
Sage-Bionetworks · Jan 15, 2025 · b37d1df · b37d1df
2 parents 972bd75 + 950bfb4
commit b37d1df
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 13 deletions.
diff --git a/...apse-react-client/src/components/PortalFeatureHighlights/PortalFeatureHighlights.test.tsx b/...apse-react-client/src/components/PortalFeatureHighlights/PortalFeatureHighlights.test.tsx
@@ -3,6 +3,7 @@ import PortalFeatureHighlights, {
 } from './PortalFeatureHighlights'
 import { MemoryRouter } from 'react-router-dom'
 import { render, screen } from '@testing-library/react'
+import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils'
 
 describe('PortalFeatureHighlights component', () => {
   const props: PortalFeatureHighlightsProps = {
@@ -29,6 +30,7 @@ describe('PortalFeatureHighlights component', () => {
 
   it('renders image with correct src', () => {
     renderComponent(props)
+    mockAllIsIntersecting(true)
     const image = screen.getByRole('img')
     expect(image).toHaveAttribute('src', 'test-image.jpg')
   })

diff --git a/...s/synapse-react-client/src/components/PortalFeatureHighlights/PortalFeatureHighlights.tsx b/...s/synapse-react-client/src/components/PortalFeatureHighlights/PortalFeatureHighlights.tsx
@@ -1,5 +1,14 @@
-import { Typography, Button, CardMedia, Stack, Box } from '@mui/material'
+import {
+  Typography,
+  Button,
+  CardMedia,
+  Stack,
+  Box,
+  Fade,
+  Slide,
+} from '@mui/material'
 import React from 'react'
+import { useInView } from 'react-intersection-observer'
 import { Link } from 'react-router-dom'
 
 export type PortalFeatureHighlightsProps = {
@@ -11,11 +20,14 @@ export type PortalFeatureHighlightsProps = {
   link?: string
 }
 
+const transitionTimeoutMs = 400
+
 const PortalFeatureHighlights = (props: PortalFeatureHighlightsProps) => {
   const { reverseOrder, image, title, buttonText, summaryText, link } = props
-
+  const [ref, inView] = useInView({ threshold: 0.3, triggerOnce: true })
   return (
     <Box
+      ref={ref}
       sx={{
         display: 'grid',
         padding: { xs: '40px', lg: '80px' },
@@ -32,17 +44,29 @@ const PortalFeatureHighlights = (props: PortalFeatureHighlightsProps) => {
         },
       }}
     >
-      <CardMedia
-        component="img"
-        image={image}
-        sx={{
-          gridArea: 'image',
-          borderRadius: '12px',
-          height: '100%',
-          width: '100%',
-          objectFit: 'cover',
-        }}
-      />
+      <Fade in={inView} timeout={transitionTimeoutMs}>
+        <div>
+          <Slide
+            direction={reverseOrder ? 'left' : 'right'}
+            timeout={transitionTimeoutMs}
+            in={inView}
+          >
+            <div>
+              <CardMedia
+                component="img"
+                image={image}
+                sx={{
+                  gridArea: 'image',
+                  borderRadius: '12px',
+                  height: '100%',
+                  width: '100%',
+                  objectFit: 'cover',
+                }}
+              />
+            </div>
+          </Slide>
+        </div>
+      </Fade>
       <Stack
         sx={{
           gridArea: 'content',