lib-user: Add classification count to ProjectCard badge in TopProjects (

#6326) * Add classification count to ProjectCard badge * change styling of badge in ProjectCard * make badge background white --------- Co-authored-by: Delilah <23665803+goplayoutside3@users.noreply.github.com>
zooniverse · Sep 19, 2024 · a4fba3d · a4fba3d
1 parent dcd380a
commit a4fba3d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/packages/lib-react-components/CHANGELOG.md b/packages/lib-react-components/CHANGELOG.md
@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - ZooFooter and ZooHeader styling to include `display: none;` when printing (`@media print`)
 - PlainButton has text-decoration underline on hover even for links.
 - ZooFooter links and labels updated to reflect newly launched FEM pages.
+- Updated styling in ProjectCard's badge component.
 
 ### Fixed
 

diff --git a/packages/lib-react-components/src/ProjectCard/ProjectCard.js b/packages/lib-react-components/src/ProjectCard/ProjectCard.js
@@ -45,15 +45,15 @@ const StyledProjectDescription = styled(SpacedText)`
 const StyledBadge = styled(Text)`
   display: flex;
   margin: 5px 5px 5px auto;
-  border-radius: 50%;
-  padding: 3px;
+  border-radius: 0.5rem;
+  padding: 2px 3px;
   background: white;
-  aspect-ratio: 1 / 1;
   text-align: center;
   align-items: center;
   justify-content: center;
-  min-width: 1rem;
+  min-width: 0.75rem;
   height: auto;
+  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25);
 `
 
 function cardWidth(size) {
@@ -115,7 +115,7 @@ function ProjectCard({
         height={`${cardWidth(size)}px`}
         round={{ corner: 'top', size: '8px' }}
       >
-        {badge ? <StyledBadge color='black' size='0.75rem' weight='bold'>
+        {badge !== undefined ? <StyledBadge color='black' size='0.75rem' weight='bold' elevation='small'>
           {badge}
         </StyledBadge> : null}
       </Box>

diff --git a/packages/lib-react-components/src/ProjectCard/ProjectCard.stories.js b/packages/lib-react-components/src/ProjectCard/ProjectCard.stories.js
@@ -24,6 +24,24 @@ export const NfnCaliFlowers = {
   )
 }
 
+export const LargeNumbers = {
+  args: {
+    badge: 3758947489327,
+    description: 'Using digital images to investigate phenological change in a biodiversity hotspot',
+    displayName: `Notes from Nature - Capturing California's Flowers`,
+    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
+    slug: 'md68135/notes-from-nature-capturing-californias-flowers'
+  },
+  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',

diff --git a/packages/lib-user/src/components/shared/TopProjects/TopProjects.js b/packages/lib-user/src/components/shared/TopProjects/TopProjects.js
@@ -83,9 +83,12 @@ function TopProjects({
     topProjects = topProjectContributions
       ?.map(projectContribution => {
         const projectData = projects?.find(project => project.id === projectContribution.project_id.toString())
-        return projectData
+        return {
+          count: projectContribution.count,
+          ...projectData
+        }
       })
-      .filter(project => project)
+      .filter(project => project?.id)
       .slice(0, 20)
   }
 
@@ -110,6 +113,7 @@ function TopProjects({
             return (
               <li key={topProject?.id}>
                 <ProjectCard
+                  badge={topProject?.count}
                   description={topProject?.description}
                   displayName={topProject?.display_name}
                   href={`https://www.zooniverse.org/projects/${topProject?.slug}`}