lib-user: Refactor TopProjects with up to 20 items (#6317)

* Refactor TopProjects with up to 20 items * Refactor TopProjects row layout styling
zooniverse · Sep 18, 2024 · 42b775f · 42b775f
1 parent ffaab1e
commit 42b775f
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 17 deletions.
diff --git a/packages/lib-user/src/components/shared/TopProjects/TopProjects.js b/packages/lib-user/src/components/shared/TopProjects/TopProjects.js
@@ -1,22 +1,40 @@
 import { Box, Grid, ResponsiveContext } from 'grommet'
 import { arrayOf, bool, node, number, string, shape } from 'prop-types'
 import { useContext } from 'react'
+import styled from 'styled-components'
 import { Loader, ProjectCard } from '@zooniverse/react-components'
 
 import { ContentBox } from '@components/shared'
 
+const StyledGridList = styled(Grid)`
+  list-style: none;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  max-height: 420px;
+  overflow-x: none;
+  overflow-y: auto;
+  padding-inline-start: 0;
+`
+
+const StyledRowList = styled(Box)`
+  list-style: none;
+  margin-block-end: 0;
+  margin-block-start: 0;
+`
+
 function CardsGrid({ children }) {
   return (
-    <Grid
-      as='ul'
+    <StyledGridList
+      a11yTitle='Top Projects'
       columns={['1fr', '1fr', '1fr']}
+      forwardedAs='ul'
       gap='xsmall'
-      pad='none'
+      justify='center'
+      pad='xxsmall'
       rows={[ 'auto', 'auto' ]}
-      style={{ listStyle: 'none' }}
     >
       {children}
-    </Grid>
+    </StyledGridList>
   )
 }
 
@@ -26,16 +44,20 @@ CardsGrid.propTypes = {
 
 function CardsRow({ children }) {
   return (
-    <Box
-      as='ul'
+    <StyledRowList
+      a11yTitle='Top Projects'
       direction='row'
+      forwardedAs='ul'
       gap='small'
-      pad={{ horizontal: 'xxsmall', bottom: 'xsmall', top: 'xxsmall' }}
       overflow={{ horizontal: 'auto' }}
-      style={{ listStyle: 'none' }}
+      pad={{
+        bottom: 'xsmall',
+        horizontal: 'xxsmall',
+        top: 'xxsmall'
+      }}
     >
       {children}
-    </Box>
+    </StyledRowList>
   )
 }
 
@@ -64,7 +86,7 @@ function TopProjects({
         return projectData
       })
       .filter(project => project)
-      .slice(0, 6)
+      .slice(0, 20)
   }
 
   const Container = grid ? CardsGrid : CardsRow

diff --git a/packages/lib-user/src/components/shared/TopProjects/TopProjects.stories.js b/packages/lib-user/src/components/shared/TopProjects/TopProjects.stories.js
@@ -18,8 +18,8 @@ function ComponentDecorator (Story) {
         dark: 'dark-3',
         light: 'neutral-6'
       }}
-      height='900px'
       pad='30px'
+      width={{ max: '700px' }}
     >
       <Story />
     </Box>

diff --git a/packages/lib-user/test/mocks/panoptes/projects.js b/packages/lib-user/test/mocks/panoptes/projects.js
@@ -33,5 +33,110 @@ export const PROJECTS = [
     display_name: 'Wildwatch Kenya is a short project name compared to the longest live project at 80',
     id: '5',
     slug: 'sandiegozooglobal/wildwatch-kenya'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/9f013988-ec58-4bf1-a207-b6b832b5c6d8.jpeg',
+    description: 'Help us track the movements of the endangered North Atlantic right whale.',
+    display_name: 'Right Whale Project',
+    id: '6',
+    slug: 'rightwhaleproject/right-whale-project'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
+    description: 'Join us in the search for new exoplanets!',
+    display_name: 'Exoplanet Explorers',
+    id: '7',
+    slug: 'exoplanetexplorers/exoplanet-explorers'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
+    description: 'Help us classify galaxies and learn about the universe!',
+    display_name: 'Galaxy Zoo',
+    id: '8',
+    slug: 'galaxyzoo/galaxy-zoo'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/546ce22c-f6b2-4fbb-a883-ab4157007659.png',
+    description: 'Join us in mapping the ocean floor!',
+    display_name: 'Ocean Floor Mapping',
+    id: '9',
+    slug: 'oceanfloor/mapping-the-ocean-floor'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/546ce22c-f6b2-4fbb-a883-ab4157007659.png',
+    description: 'Help us monitor the health of coral reefs.',
+    display_name: 'Coral Reef Watch',
+    id: '10',
+    slug: 'coralreefwatch/coral-reef-watch'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/9f013988-ec58-4bf1-a207-b6b832b5c6d8.jpeg',
+    description: 'Join us in the fight against plastic pollution!',
+    display_name: 'Plastic Pollution Tracker',
+    id: '11',
+    slug: 'plasticpollutiontracker/plastic-pollution-tracker'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/d93adaec-c45e-45c8-a88a-ad68bf90020b.jpeg',
+    description: 'Help us track the migration patterns of birds.',
+    display_name: 'Bird Migration Tracker',
+    id: '12',
+    slug: 'birdmigrationtracker/bird-migration-tracker'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/d93adaec-c45e-45c8-a88a-ad68bf90020b.jpeg',
+    description: 'Join us in the search for new species!',
+    display_name: 'Species Discovery Project',
+    id: '13',
+    slug: 'speciesdiscovery/species-discovery-project'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
+    description: 'Help us understand the impact of climate change on wildlife.',
+    display_name: 'Climate Change Impact Study',
+    id: '14',
+    slug: 'climatechangeimpact/climate-change-impact-study'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
+    description: 'Join us in restoring habitats for endangered species.',
+    display_name: 'Habitat Restoration Project',
+    id: '15',
+    slug: 'habitatrestoration/habitat-restoration-project'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/9f013988-ec58-4bf1-a207-b6b832b5c6d8.jpeg',
+    description: 'Help us study the effects of pollution on marine life.',
+    display_name: 'Marine Pollution Study',
+    id: '16',
+    slug: 'marinepollutionstudy/marine-pollution-study'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/5dc89775-a658-4d3a-8295-4d48903e142d.jpeg',
+    description: 'Join us in mapping biodiversity hotspots.',
+    display_name: 'Biodiversity Mapping Project',
+    id: '17',
+    slug: 'biodiversitymapping/biodiversity-mapping-project'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/5dc89775-a658-4d3a-8295-4d48903e142d.jpeg',
+    description: 'Help us track the health of ecosystems.',
+    display_name: 'Ecosystem Health Tracker',
+    id: '18',
+    slug: 'ecosystemhealthtracker/ecosystem-health-tracker'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
+    description: 'Join us in the search for new medicinal plants.',
+    display_name: 'Medicinal Plant Discovery',
+    id: '19',
+    slug: 'medicinalplantdiscovery/medicinal-plant-discovery'
+  },
+  {
+    avatar_src: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
+    description: 'Help us understand the effects of urbanization on wildlife.',
+    display_name: 'Urban Wildlife Study',
+    id: '20',
+    slug: 'urbanwildlifestudy/urban-wildlife-study'
   }
 ]
diff --git a/packages/lib-user/test/mocks/stats.mock.js b/packages/lib-user/test/mocks/stats.mock.js
@@ -112,24 +112,84 @@ const STATS = {
   data: last7DaysFromNow,
   project_contributions: [
     {
-      count: 123,
+      count: 2123,
       project_id: 1
     },
     {
-      count: 234,
+      count: 3234,
       project_id: 2
     },
     {
-      count: 345,
+      count: 2345,
       project_id: 3
     },
     {
-      count: 456,
+      count: 3456,
       project_id: 4
     },
     {
-      count: 567,
+      count: 2567,
       project_id: 5
+    },
+    {
+      count: 3678,
+      project_id: 6
+    },
+    {
+      count: 2789,
+      project_id: 7
+    },
+    {
+      count: 3890,
+      project_id: 8
+    },
+    {
+      count: 2901,
+      project_id: 9
+    },
+    {
+      count: 1000,
+      project_id: 10
+    },
+    {
+      count: 1100,
+      project_id: 11
+    },
+    {
+      count: 1200,
+      project_id: 12
+    },
+    {
+      count: 1300,
+      project_id: 13
+    },
+    {
+      count: 1400,
+      project_id: 14
+    },
+    {
+      count: 1500,
+      project_id: 15
+    },
+    {
+      count: 1600,
+      project_id: 16
+    },
+    {
+      count: 1700,
+      project_id: 17
+    },
+    {
+      count: 1800,
+      project_id: 18
+    },
+    {
+      count: 1900,
+      project_id: 19
+    },
+    {
+      count: 2000,
+      project_id: 20
     }
   ],
   top_contributors: [