Pass ProjectCard component a size prop (#6030)

* create four sizes in each ProjectCard Story

* handle responsive context in TopProjects

packages/lib-user/src/components/GroupStats/GroupStats.js

@@ -51,7 +51,7 @@ function GroupStats({
 }) {
   // set stats based on selected project or all projects
   const stats = selectedProject === 'AllProjects' ? allProjectsStats : projectStats
-  
+
   // set top projects based on selected date range and all project stats
   let topProjects = []
   const topProjectContributions = allProjectsStats.project_contributions
@@ -104,7 +104,7 @@ function GroupStats({
                   displayName={topProject?.display_name}
                   href={`https://www.zooniverse.org/projects/${topProject?.slug}`}
                   imageSrc={topProject?.avatar_src}
-                  small
+                  size='small'
                 />
               )
             })}

packages/lib-user/src/components/UserStats/components/TopProjects/TopProjects.js

@@ -1,12 +1,15 @@
-import { Box } from 'grommet'
+import { Box, ResponsiveContext } from 'grommet'
 import { arrayOf, string, shape } from 'prop-types'
+import { useContext } from 'react'
 
 import {
   ContentBox,
   ProjectCard
 } from '@components/shared'
 
 function TopProjects ({ topProjects = [] }) {
+  const size = useContext(ResponsiveContext)
+
   return (
     <ContentBox
       linkLabel='See more'
@@ -26,7 +29,8 @@ function TopProjects ({ topProjects = [] }) {
               description={topProject?.description}
               displayName={topProject?.display_name}
               href={`https://www.zooniverse.org/projects/${topProject?.slug}`}
-              imageSrc={topProject?.avatar_src}                
+              imageSrc={topProject?.avatar_src}
+              size={size}
             />
           )
         })}

packages/lib-user/src/components/shared/ContentBox/ContentBox.stories.js

@@ -82,11 +82,11 @@ export const TopProjectsSplit = {
         columns='1/3'
         gap='small'
       >
-        <ProjectCard {...NfnCaliFlowers.args} small />
-        <ProjectCard {...NestQuestGo.args} small />
-        <ProjectCard {...PlanetHuntersTess.args} small />
-        <ProjectCard {...CorrespondingWithQuakers.args} small />
-        <ProjectCard {...WildwatchKenya.args} small />
+        <ProjectCard {...NfnCaliFlowers.args} size='small' />
+        <ProjectCard {...NestQuestGo.args} size='small' />
+        <ProjectCard {...PlanetHuntersTess.args} size='small' />
+        <ProjectCard {...CorrespondingWithQuakers.args} size='small' />
+        <ProjectCard {...WildwatchKenya.args} size='small' />
       </Grid>
     </ContentBox>
   )

packages/lib-user/src/components/shared/ProjectCard/ProjectCard.js

@@ -1,39 +1,11 @@
 import { Box } from 'grommet'
-import { bool, string } from 'prop-types'
-import styled, { css } from 'styled-components'
+import { string } from 'prop-types'
+import styled from 'styled-components'
 import { SpacedText } from '@zooniverse/react-components'
 
 const StyledProjectCard = styled(Box)`
-  font-size: 0.625rem;
-  height: 200px;
   text-decoration: none;
-  width: 157px;
-
-  > .project-image {
-    height: 157px;
-  }
-
-  ${props => !props.small && css`
-    @media (768px < width <= 1280px) {
-      font-size: 0.656rem;
-      height: 240px;
-      width: 189px;
-
-      > .project-image {
-        height: 189px;
-      }
-    }
-
-    @media (width > 1280px) {
-      font-size: 0.688rem;
-      height: 280px;
-      width: 220px;
-
-      > .project-image {
-        height: 220px;
-      }
-    }
-  `}
+  font-size: ${props => props.cardFontSize};
 `
 
 const StyledProjectContent = styled(Box)`
@@ -70,12 +42,42 @@ const StyledProjectDescription = styled(SpacedText)`
   }
 `
 
+function cardWidth (size) {
+  switch (size) {
+    case 'small':
+      return 157;
+    case 'medium':
+      return 189;
+    case 'large':
+      return 220;
+    case 'xlarge':
+      return 252;
+    default:
+      return 189;
+  }
+}
+
+function cardFontSize (size) {
+  switch (size) {
+    case 'small':
+      return '0.625rem';
+    case 'medium':
+      return '0.656rem';
+    case 'large':
+      return '0.688rem';
+    case 'xlarge':
+      return '0.688rem';
+    default:
+      return '0.656rem';
+  }
+}
+
 function ProjectCard ({
   description = '',
   displayName = '',
   href = '',
   imageSrc = '',
-  small = false
+  size = 'medium',
 }) {
   return (
     <StyledProjectCard
@@ -84,7 +86,9 @@ function ProjectCard ({
       forwardedAs='a'
       href={href}
       round='8px'
-      small={small}
+      cardFontSize={cardFontSize(size)}
+      height={`${cardWidth(size) * 14 / 11}px`}
+      width={`${cardWidth(size)}px`}
     >
       <Box
         className='project-image'
@@ -93,6 +97,7 @@ function ProjectCard ({
           position: 'top',
           size: 'cover',
         }}
+        height={`${cardWidth(size)}px`}
         round={{ corner: 'top', size: '8px' }}
       >
       </Box>
@@ -128,7 +133,7 @@ ProjectCard.propTypes = {
   displayName: string,
   href: string,
   imageSrc: string,
-  small: bool
+  size: string
 }
 
 export default ProjectCard

packages/lib-user/src/components/shared/ProjectCard/ProjectCard.spec.js

@@ -9,18 +9,19 @@ describe('components > shared > ProjectCard', function () {
   it('should show the project name', function () {
     render(<DefaultStory />)
 
-    expect(screen.getByText('Notes from Nature - Capturing California\'s Flowers')).to.be.ok()
+    // grabbing the first element because each Story renders all four ProjectCard sizes
+    expect(screen.getAllByText('Notes from Nature - Capturing California\'s Flowers')[0]).to.be.ok()
   })
 
   it('should show the project description', function () {
     render(<DefaultStory />)
 
-    expect(screen.getByText('Using digital images to investigate ​phenological change in a biodiversity hotspot​')).to.be.ok()
+    expect(screen.getAllByText('Using digital images to investigate ​phenological change in a biodiversity hotspot​')[0]).to.be.ok()
   })
 
   it('should link to the project', function () {
     render(<DefaultStory />)
 
-    expect(screen.getByRole('link', { href: 'https://www.zooniverse.org/projects/md68135/notes-from-nature-capturing-californias-flowers'})).to.be.ok()
+    expect(screen.getAllByRole('link', { href: 'https://www.zooniverse.org/projects/md68135/notes-from-nature-capturing-californias-flowers'})[0]).to.be.ok()
   })
 })

packages/lib-user/src/components/shared/ProjectCard/ProjectCard.stories.js

@@ -1,90 +1,92 @@
 import { Box } from 'grommet'
 import ProjectCard from './ProjectCard.js'
-
-// TODO: refactor with PROJECTS from panoptes.mock.js
-// import { PROJECTS } from '../../../../test/mocks/panoptes.mock.js'
+import { PROJECTS } from '../../../../test/mocks/panoptes/projects.js'
 
 export default {
   title: 'Components/shared/ProjectCard',
-  component: ProjectCard,
-  decorators: [ComponentDecorator]
-}
-function ComponentDecorator (Story) {
-  return (
-    <Box
-      background={{
-        dark: 'dark-3',
-        light: 'neutral-6'
-      }}
-      fill
-      pad='30px'
-    >
-      <Story />
-    </Box>
-  )
+  component: ProjectCard
 }
 
 export const NfnCaliFlowers = {
   args: {
-    description: 'Using digital images to investigate ​phenological change in a biodiversity hotspot​',
-    displayName: `Notes from Nature - Capturing California's Flowers`,
-    href: 'https://www.zooniverse.org/projects/md68135/notes-from-nature-capturing-californias-flowers',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg'
-  }
+    displayName: PROJECTS[0].display_name,
+    imageSrc: PROJECTS[0].avatar_src,
+    ...PROJECTS[0]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }
 
+/* This code looks repetitive instead of mapping over PROJECTS,
+   but Storybook requires named exports, so each project
+   is explicitely written out below */
+
 export const NestQuestGo = {
   args: {
-    description: 'Help us understand the historical nesting patterns of these beloved bluebirds!',
-    displayName: 'NEST QUEST GO: EASTERN BLUEBIRDS',
-    href: 'https://www.zooniverse.org/projects/brbcornell/nest-quest-go-eastern-bluebirds',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/d93adaec-c45e-45c8-a88a-ad68bf90020b.jpeg'
-  }
+    displayName: PROJECTS[1].display_name,
+    imageSrc: PROJECTS[1].avatar_src,
+    ...PROJECTS[1]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }
 
 export const PlanetHuntersTess = {
   args: {
-    description: 'Join the Search for Undiscovered Worlds',
-    displayName: 'Planet Hunters TESS',
-    href: 'https://www.zooniverse.org/projects/nora-dot-eisner/planet-hunters-tess',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg'
-  }
+    displayName: PROJECTS[2].display_name,
+    imageSrc: PROJECTS[2].avatar_src,
+    ...PROJECTS[2]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }
 
 export const CorrespondingWithQuakers = {
   args: {
-    description: 'Investigating race, gender, class, and religion in 18th- and 19th-Century Irish Quaker Documents',
-    displayName: 'Corresponding with Quakers',
-    href: 'https://www.zooniverse.org/projects/rachaelsking/corresponding-with-quakers',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/252e7e80-949b-4324-8af4-8d3ad7aafbde.jpeg'
-  }
+    displayName: PROJECTS[3].display_name,
+    imageSrc: PROJECTS[3].avatar_src,
+    ...PROJECTS[3]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }
 
 export const WildwatchKenya = {
   args: {
-    description: 'We need your help to count, identify, and track the giraffes and other wildlife living in our field conservation sites in northern Kenya! We need your help to count, identify, and track the giraffes and other wildlife living in our field conservation sites in northern Kenya!',
-    displayName: 'Wildwatch Kenya is a short project name compared to the longest live project at 80',
-    href: 'https://www.zooniverse.org/projects/sandiegozooglobal/wildwatch-kenya',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/5dc89775-a658-4d3a-8295-4d48903e142d.jpeg'
-  }
-}
-
-export const NfnCaliFlowersSmall = {
-  args: {
-    description: 'Using digital images to investigate ​phenological change in a biodiversity hotspot​',
-    displayName: `Notes from Nature - Capturing California's Flowers`,
-    href: 'https://www.zooniverse.org/projects/md68135/notes-from-nature-capturing-californias-flowers',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
-    small: true
-  }
-}
-
-export const WildwatchKenyaSmall = {
-  args: {
-    description: 'We need your help to count, identify, and track the giraffes and other wildlife living in our field conservation sites in northern Kenya! We need your help to count, identify, and track the giraffes and other wildlife living in our field conservation sites in northern Kenya!',
-    displayName: 'Wildwatch Kenya is a short project name compared to the longest live project at 80',
-    href: 'https://www.zooniverse.org/projects/sandiegozooglobal/wildwatch-kenya',
-    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/5dc89775-a658-4d3a-8295-4d48903e142d.jpeg',
-    small: true
-  }
+    displayName: PROJECTS[4].display_name,
+    imageSrc: PROJECTS[4].avatar_src,
+    ...PROJECTS[4]
+  },
+  render: args => (
+    <Box gap='medium' pad='medium' direction='row'>
+      <ProjectCard size='xlarge' {...args} />
+      <ProjectCard size='large' {...args} />
+      <ProjectCard size='medium' {...args} />
+      <ProjectCard size='small' {...args} />
+    </Box>
+  )
 }