Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PORTALS-3312: New Portal feature highlights component #1437

Merged
merged 17 commits into from
Dec 13, 2024
Merged
67 changes: 34 additions & 33 deletions apps/portals/elportal/src/pages/HomePageV2.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,12 @@ import {
PortalFeatureHighlights,
} from 'synapse-react-client'
import ELContributeYourData from '@sage-bionetworks/synapse-portal-framework/components/elportal/ELContributeYourData'
import {
partnersSql,
peopleSql,
topPublicationsSql,
whatWeDoSql,
} from '../config/resources'
import { Typography } from '@mui/material'
import analyzetheclouds from '@sage-bionetworks/synapse-portal-framework/components/elportal/assets/analyzetheclouds.png'
import computationaltools from '@sage-bionetworks/synapse-portal-framework/components/elportal/assets/computationaltools.png'
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 = (
Expand All @@ -22,9 +19,18 @@ export default function HomePage() {
platforms, such as{' '}
<Typography
component="span"
sx={{ fontWeight: 'bold', color: 'primary.main' }}
sx={{
fontWeight: 'bold',
color: 'primary.main',
}}
>
CAVATICA
<Link
href="https://www.cavatica.org/"
target="_blank"
sx={{ textDecoration: 'none' }}
>
CAVATICA
</Link>
</Typography>
.<br />
<br />
Expand Down Expand Up @@ -73,28 +79,23 @@ export default function HomePage() {
style: { maxWidth: '100%', padding: 0 },
}}
>
<SectionLayout ContainerProps={{ className: 'home-spacer' }}>
<ELContributeYourData />
</SectionLayout>
<SectionLayout ContainerProps={{ className: 'home-spacer' }}>
<PortalFeatureHighlights
image={analyzetheclouds}
title="Analyze on the Cloud"
buttonText="Learn About Our Analysis Platforms"
summaryText={styledPortalFeatureHighlightsSummaryText}
link="/Analysis Platforms"
/>
</SectionLayout>
<SectionLayout ContainerProps={{ className: 'home-spacer' }}>
<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>
<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>
</>
)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Meta, StoryObj } from '@storybook/react'
import PortalFeatureHighlights from './PortalFeatureHighlights'
import React from 'react'
import { MemoryRouter } from 'react-router-dom'

const meta = {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import React from 'react'
import PortalFeatureHighlights, {
PortalFeatureHighlightsProps,
} from './PortalFeatureHighlights'
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Typography, Box, Button, CardMedia, Grid } from '@mui/material'
import { Typography, Button, CardMedia, Stack, Box } from '@mui/material'
import React from 'react'
import { Link } from 'react-router-dom'

Expand All @@ -7,79 +7,86 @@ export type PortalFeatureHighlightsProps = {
title?: string
image?: string
buttonText?: string
summaryText?: string | React.ReactNode
summaryText?: React.ReactNode
link?: string
}

const PortalFeatureHighlights = (props: PortalFeatureHighlightsProps) => {
const { reverseOrder, image, title, buttonText, summaryText, link } = props

return (
<Grid
container
gap={{ xs: '38px', md: '80px' }}
padding={{ md: '0 56px 0px 56px' }}
justifyContent="center"
alignItems={{ md: 'center', lg: 'flex-start' }}
<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'`,
},
}}
Comment on lines +29 to +32
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice use of gridTemplateAreas, it's very clear how the layout is switching between sizes and reverseOrder state

>
<Grid
item
order={{ xs: 0, md: reverseOrder ? 1 : 0 }}
xs={12}
md={5}
lg={7.6}
<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',
}}
>
<CardMedia
component="img"
image={image}
style={{
borderRadius: '12px',
objectFit: 'cover',
width: '100%',
<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',
}}
/>
</Grid>
<Grid item xs={12} md={4} lg={3.4}>
<Box
display="flex"
flexDirection="column"
gap="16px"
sx={{ borderTop: '3px solid', borderColor: 'grey.400' }}
>
<Typography
variant="headline2"
paddingTop="26px"
paddingBottom="10px"
color="grey.1000"
fontSize={'32px'}
>
{title}
</Typography>
<Button
variant="contained"
component={Link}
to={link || ''}
sx={{
minWidth: '265px',
whiteSpace: 'nowrap',
padding: '6px 24px',
}}
>
{buttonText}
</Button>
<Typography
variant="body1"
sx={{
fontStyle: 'italic',
color: 'grey.800',
fontSize: '18px',
lineHeight: '27px',
}}
>
{summaryText}
</Typography>
</Box>
</Grid>
</Grid>
{summaryText}
</Typography>
</Stack>
</Box>
)
}

Expand Down
Loading