Merge pull request #1437 from kianamcc/PORTALS-3312

PORTALS-3312: New Portal feature highlights component

apps/portals/elportal/src/pages/HomePageV2.tsx

@@ -2,13 +2,42 @@ import { SectionLayout } from '@sage-bionetworks/synapse-portal-framework/compon
 import {
   RecentPublicationsGrid,
   ImageCardGridWithLinks,
+  PortalFeatureHighlights,
 } from 'synapse-react-client'
 import ELContributeYourData from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELContributeYourData'
 import ELGettingStarted from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELGettingStarted'
 import { topPublicationsSql, whatWeDoSql } from '../config/resources'
+import { Link, Typography } from '@mui/material'
+import analyzetheclouds from '../assets/analyzetheclouds.png'
+import computationaltools from '../assets/computationaltools.png'
 import { Box } from '@mui/material'
 
 export default function HomePage() {
+  const styledPortalFeatureHighlightsSummaryText = (
+    <>
+      The portal supports secure access to leading cloud-based analysis
+      platforms, such as{' '}
+      <Typography
+        component="span"
+        sx={{
+          fontWeight: 'bold',
+          color: 'primary.main',
+        }}
+      >
+        <Link
+          href="https://www.cavatica.org/"
+          target="_blank"
+          sx={{ textDecoration: 'none' }}
+        >
+          CAVATICA
+        </Link>
+      </Typography>
+      .<br />
+      <br />
+      This is just the beginning. Future integrations will further expand
+      resources for data analysis and collaboration.
+    </>
+  )
   return (
     <>
       <ImageCardGridWithLinks
@@ -52,6 +81,21 @@ export default function HomePage() {
       >
         <ELGettingStarted />
         <ELContributeYourData />
+        <PortalFeatureHighlights
+          image={analyzetheclouds}
+          title="Analyze on the Cloud"
+          buttonText="Learn About Our Analysis Platforms"
+          summaryText={styledPortalFeatureHighlightsSummaryText}
+          link="/Analysis Platforms"
+        />
+        <PortalFeatureHighlights
+          image={computationaltools}
+          title="Computational Tools"
+          buttonText="Check out our Computational Tools"
+          summaryText="We provide researchers with unique access to toolkits for probing and interpreting longevity-related data. The power of new software, pipelines, and applications are all at your fingertips."
+          reverseOrder={true}
+          link="/Explore/Computational Tools"
+        />
       </SectionLayout>
     </>
   )

apps/portals/elportal/src/themes/HomePageThemeProvider.tsx

@@ -10,9 +10,11 @@ export function HomePageThemeProvider({ children }: React.PropsWithChildren) {
     typography: {
       headline1: {
         fontFamily: "'Merriweather', serif",
+        lineHeight: 'normal',
       },
       headline2: {
         fontFamily: "'Merriweather', serif",
+        lineHeight: 'normal',
       },
       headline3: {
         fontFamily: "'Merriweather', serif",

packages/synapse-react-client/src/components/PortalFeatureHighlights/PortalFeatureHighlights.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react'
+import PortalFeatureHighlights from './PortalFeatureHighlights'
+import { MemoryRouter } from 'react-router-dom'
+
+const meta = {
+  title: 'Home Page/PortalFeatureHighlights',
+  component: PortalFeatureHighlights,
+  parameters: {
+    chromatic: { viewports: [600, 1200] },
+  },
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Demo: Story = {
+  render: args => (
+    <MemoryRouter>
+      <PortalFeatureHighlights {...args} />
+    </MemoryRouter>
+  ),
+  args: {
+    title: 'Section Title',
+    summaryText: 'Section summary text.',
+    buttonText: 'Section button',
+    image: 'https://link-to-image.png',
+    link: 'https://example.com',
+  },
+}

packages/synapse-react-client/src/components/PortalFeatureHighlights/PortalFeatureHighlights.test.tsx

@@ -0,0 +1,42 @@
+import PortalFeatureHighlights, {
+  PortalFeatureHighlightsProps,
+} from './PortalFeatureHighlights'
+import { MemoryRouter } from 'react-router-dom'
+import { render, screen } from '@testing-library/react'
+
+describe('PortalFeatureHighlights component', () => {
+  const props: PortalFeatureHighlightsProps = {
+    title: 'Test Title',
+    image: 'test-image.jpg',
+    buttonText: 'Click me',
+    summaryText: 'This is a test summary',
+    link: '/test-link',
+    reverseOrder: false,
+  }
+
+  const renderComponent = (props: PortalFeatureHighlightsProps) => {
+    return render(
+      <MemoryRouter>
+        <PortalFeatureHighlights {...props} />
+      </MemoryRouter>,
+    )
+  }
+
+  it('renders the title', () => {
+    renderComponent(props)
+    expect(screen.getByText('Test Title'))
+  })
+
+  it('renders image with correct src', () => {
+    renderComponent(props)
+    const image = screen.getByRole('img')
+    expect(image).toHaveAttribute('src', 'test-image.jpg')
+  })
+
+  it('renders the button with the correct text and link', () => {
+    renderComponent(props)
+    const button = screen.getByRole('link', { name: 'Click me' })
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveAttribute('href', '/test-link')
+  })
+})

packages/synapse-react-client/src/components/PortalFeatureHighlights/PortalFeatureHighlights.tsx

@@ -0,0 +1,93 @@
+import { Typography, Button, CardMedia, Stack, Box } from '@mui/material'
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export type PortalFeatureHighlightsProps = {
+  reverseOrder?: boolean
+  title?: string
+  image?: string
+  buttonText?: string
+  summaryText?: React.ReactNode
+  link?: string
+}
+
+const PortalFeatureHighlights = (props: PortalFeatureHighlightsProps) => {
+  const { reverseOrder, image, title, buttonText, summaryText, link } = props
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        padding: { xs: '40px', lg: '80px' },
+        gap: { xs: '38px', md: '80px' },
+        gridTemplateColumns: {
+          xs: 'minmax(100px, 1fr)',
+          lg: reverseOrder
+            ? 'minmax(150px, 1fr) minmax(300px, 2fr)'
+            : 'minmax(300px, 2fr) minmax(150px, 1fr)',
+        },
+        gridTemplateAreas: {
+          xs: `'image' 'content'`,
+          lg: reverseOrder ? `'content image'` : `'image content'`,
+        },
+      }}
+    >
+      <CardMedia
+        component="img"
+        image={image}
+        sx={{
+          gridArea: 'image',
+          borderRadius: '12px',
+          height: '100%',
+          width: '100%',
+          objectFit: 'cover',
+        }}
+      />
+      <Stack
+        sx={{
+          gridArea: 'content',
+          gap: '16px',
+          borderTop: '3px solid',
+          borderColor: 'grey.400',
+        }}
+      >
+        <Typography
+          variant="headline2"
+          paddingTop="30px"
+          paddingBottom="10px"
+          color="grey.1000"
+          fontSize={'31px'}
+        >
+          {title}
+        </Typography>
+        <Button
+          variant="contained"
+          component={Link}
+          to={link || ''}
+          sx={{
+            minWidth: '265px',
+            whiteSpace: 'nowrap',
+            padding: '6px 24px',
+            fontWeight: '600',
+            fontSize: '16px',
+          }}
+        >
+          {buttonText}
+        </Button>
+        <Typography
+          variant="body1"
+          sx={{
+            fontStyle: 'italic',
+            color: 'grey.800',
+            fontSize: '18px',
+            lineHeight: '27px',
+          }}
+        >
+          {summaryText}
+        </Typography>
+      </Stack>
+    </Box>
+  )
+}
+
+export default PortalFeatureHighlights

packages/synapse-react-client/src/components/PortalFeatureHighlights/index.ts

@@ -0,0 +1,4 @@
+import PortalFeatureHighlights from './PortalFeatureHighlights'
+import type { PortalFeatureHighlightsProps } from './PortalFeatureHighlights'
+export { PortalFeatureHighlights, PortalFeatureHighlightsProps }
+export default PortalFeatureHighlights

packages/synapse-react-client/src/components/index.ts

@@ -85,6 +85,7 @@ export * from './SharePageLinkButton'
 export * from './SageResourcesPopover'
 export * from './RecentPublicationsGrid'
 export * from './ImageCardGridWithLinks'
+export * from './PortalFeatureHighlights'
 
 // TODO: Find a better way to expose Icon components
 export { Project as ProjectIcon } from '../assets/themed_icons/Project'