9522826958

Committed 14 Jun 2024 09:58PM UTC coverage: 79.214% (+0.01%) from 79.201%

Build # 9522826958

Build Type

push

github

Committed by

web-flow

Commit Message

Homepage: Create RecentProjects component, refactor data fetching in RecentSubjects (#6125)

* fetch and display project cards for 'project_contributions' on hompage

* add count badge

* refactor RecentSubjects to fetch data like RecentProjects

* create grid layout in UserHome

* remove edits to Dashboard

* use project_preferences for most recently classified projects

* minor fix for new users with no projectPreferences

* Refactor RecentProjects and RecentSubject containers to throw fetch error

* Refactor Recent projects and subjects components ul and li's

* Refactor Recent projects and subjects stories

* Refactor project and subject cards for improved focus styling

* Refactor recents in RecentSubjectsContainer

* Add await for checkCurrent user

---------

Co-authored-by: Mark Bouslog <mark@zooniverse.org>

Run Details

11450 of 16622 branches covered (68.88%)

Branch coverage included in aggregate %.

13 of 15 new or added lines in 1 file covered. (86.67%)

3 existing lines in 2 files now uncovered.

16979 of 19267 relevant lines covered (88.12%)

417.27 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

81.03

/packages/lib-react-components/src/ProjectCard/ProjectCard.js

import { Box, Text } from 'grommet'
import { number, string } from 'prop-types'
import styled from 'styled-components'
import SpacedText from '../SpacedText'

const StyledProjectCard = styled(Box)`
  text-decoration: none;
  font-size: ${props => props.cardFontSize};
`

const StyledProjectContent = styled(Box)`
  position: static;
  bottom: 0;
  height: 20%;
  transition: height 0.5s ease;

  ${StyledProjectCard}:hover &,
  ${StyledProjectCard}:focus & {
    height: 60%;
  }
`

const StyledProjectName = styled(SpacedText)`
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
`

const StyledProjectDescription = styled(SpacedText)`
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  height: 0;
  margin-top: 0px;
  overflow: hidden;

  ${StyledProjectCard}:hover &,
  ${StyledProjectCard}:focus & {
    height: auto;
    margin-top: 10px;
  }
`

const StyledBadge = styled(Text)`
  display: flex;
  margin: 5px 5px 5px auto;
  border-radius: 50%;
  padding: 3px;
  background: white;
  aspect-ratio: 1 / 1;
  text-align: center;
  align-items: center;
  justify-content: center;
`

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.8rem'
    default:
      return '0.656rem'
  }
}

function ProjectCard({
  badge = undefined,
  description = '',
  displayName = '',
  href = '',
  imageSrc = '',
  size = 'medium'
}) {
  return (
    <StyledProjectCard
      elevation='small'
      flex={false}
      forwardedAs='a'
      href={href}
      round='8px'
      cardFontSize={cardFontSize(size)}
      height={`${(cardWidth(size) * 14) / 11}px`}
      width={`${cardWidth(size)}px`}
    >
      <Box
        className='project-image'
        background={{
          image: `url(${imageSrc})`,
          position: 'top',
          size: 'cover'
        }}
        height={`${cardWidth(size)}px`}
        round={{ corner: 'top', size: '8px' }}
      >
        {badge ? <StyledBadge color='black' size='0.75rem' weight='bold'>
          {badge}
        </StyledBadge> : null}
      </Box>
      <StyledProjectContent
        flex='grow'
        justify='center'
        pad={{ horizontal: 'xsmall' }}
        round={{ corner: 'bottom', size: '8px' }}
      >
        <StyledProjectName
          color={{ dark: 'neutral-6', light: 'dark-5' }}
          size='inherit'
          textAlign='center'
          weight='bold'
        >
          {displayName}
        </StyledProjectName>
        <StyledProjectDescription
          color={{ dark: 'neutral-6', light: 'dark-5' }}
          size='inherit'
          textAlign='center'
          uppercase={false}
        >
          {description}
        </StyledProjectDescription>
      </StyledProjectContent>
    </StyledProjectCard>
  )
}

ProjectCard.propTypes = {
  badge: number,
  description: string,
  displayName: string,
  href: string,
  imageSrc: string,
  size: string
}

export default ProjectCard

1	import { Box, Text } from 'grommet'	1✔
2	import { number, string } from 'prop-types'	1✔
3	import styled from 'styled-components'	1✔
4	import SpacedText from '../SpacedText'	3✔
5
6	const StyledProjectCard = styled(Box)`	1✔
7	text-decoration: none;
8	font-size: ${props => props.cardFontSize};	24✔
9	`
10
11	const StyledProjectContent = styled(Box)`	1✔
12	position: static;
13	bottom: 0;
14	height: 20%;
15	transition: height 0.5s ease;
16
17	${StyledProjectCard}:hover &,
18	${StyledProjectCard}:focus & {
19	height: 60%;
20	}
21	`
22
23	const StyledProjectName = styled(SpacedText)`	1✔
24	display: -webkit-box;
25	-webkit-line-clamp: 3;
26	-webkit-box-orient: vertical;
27	overflow: hidden;
28	`
29
30	const StyledProjectDescription = styled(SpacedText)`	1✔
31	display: -webkit-box;
32	-webkit-line-clamp: 4;
33	-webkit-box-orient: vertical;
34	height: 0;
35	margin-top: 0px;
36	overflow: hidden;
37
38	${StyledProjectCard}:hover &,
39	${StyledProjectCard}:focus & {
40	height: auto;
41	margin-top: 10px;
42	}
43	`
44
45	const StyledBadge = styled(Text)`	1✔
46	display: flex;
47	margin: 5px 5px 5px auto;
48	border-radius: 50%;
49	padding: 3px;
50	background: white;
51	aspect-ratio: 1 / 1;
52	text-align: center;
53	align-items: center;
54	justify-content: center;
55	`
56
57	function cardWidth(size) {
58	switch (size) {	72!
59	case 'small':
60	return 157	18✔
61	case 'medium':
62	return 189	18✔
63	case 'large':
64	return 220	18✔
65	case 'xlarge':
66	return 252	18✔
67	default:
NEW 68	return 189	×
69	}
70	}
71
72	function cardFontSize(size) {
73	switch (size) {	24!
74	case 'small':
75	return '0.625rem'	6✔
76	case 'medium':
77	return '0.656rem'	6✔
78	case 'large':
79	return '0.688rem'	6✔
80	case 'xlarge':
81	return '0.8rem'	6✔
82	default:
NEW 83	return '0.656rem'	×
84	}
85	}
86
87	function ProjectCard({
88	badge = undefined,	24!
89	description = '',	24!
90	displayName = '',	24!
91	href = '',	24!
92	imageSrc = '',	24!
93	size = 'medium'	24!
94	}) {	24✔
95	return (	24✔
96	<StyledProjectCard
97	elevation='small'
98	flex={false}
99	forwardedAs='a'
100	href={href}
101	round='8px'
102	cardFontSize={cardFontSize(size)}
103	height={`${(cardWidth(size) * 14) / 11}px`}
104	width={`${cardWidth(size)}px`}
105	>
106	<Box
107	className='project-image'
108	background={{
109	image: `url(${imageSrc})`,
110	position: 'top',
111	size: 'cover'
112	}}
113	height={`${cardWidth(size)}px`}
114	round={{ corner: 'top', size: '8px' }}
115	>
116	{badge ? <StyledBadge color='black' size='0.75rem' weight='bold'>	24!
117	{badge}
118	</StyledBadge> : null}
119	</Box>
120	<StyledProjectContent
121	flex='grow'
122	justify='center'
123	pad={{ horizontal: 'xsmall' }}
124	round={{ corner: 'bottom', size: '8px' }}
125	>
126	<StyledProjectName
127	color={{ dark: 'neutral-6', light: 'dark-5' }}
128	size='inherit'
129	textAlign='center'
130	weight='bold'
131	>
132	{displayName}
133	</StyledProjectName>
134	<StyledProjectDescription
135	color={{ dark: 'neutral-6', light: 'dark-5' }}
136	size='inherit'
137	textAlign='center'
138	uppercase={false}
139	>
140	{description}
141	</StyledProjectDescription>
142	</StyledProjectContent>
143	</StyledProjectCard>
144	)
145	}
146
147	ProjectCard.propTypes = {	1✔
148	badge: number,
149	description: string,
150	displayName: string,
151	href: string,
152	imageSrc: string,
153	size: string
154	}	1✔
155
156	export default ProjectCard

zooniverse / front-end-monorepo / 9522826958

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous