14579949148

Committed 21 Apr 2025 07:30PM UTC coverage: 75.617% (+0.02%) from 75.594%

Build # 14579949148

Build Type

push

github

Committed by

web-flow

Commit Message

lib-react-components, lib-user: Refactor ProjectCard with project state (paused, finished) overlay (#6845)

* Add initial CardHeader component

* Refactor CardHeader background color

* Add CardHeader translations

* Update CHANGELOG per ProjectCard changes

* Update lib-user ProjectCard instances with project state

* Refactor project card a11yTitle

* Apply suggestions from code review

Coverage Stats

11197 of 17072 branches covered (65.59%)

Branch coverage included in aggregate %.

30 of 36 new or added lines in 3 files covered. (83.33%)

17353 of 20684 relevant lines covered (83.9%)

385.7 hits per line

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

73.68

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

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

import { useTranslation } from '../../translations/i18n'
import SpacedText from '../../SpacedText'

const StyledBox = styled(Box)`
  background: ${props => props.state === 'paused' ? 
    'rgba(67, 187, 253, 0.5)'
    : props.state === 'finished' ?
    'rgba(228, 89, 80, 0.5)'
    : undefined};
  position: relative;
`

const StyledBadge = styled(Text)`
  background: white;
  border-radius: 0.5rem;
  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25);
  height: fit-content;
  min-width: 0.75rem;
  padding: 2px 3px;
  position: absolute;
  right: 5px;
  text-align: center;
  top: 5px;
`

function CardHeader({
  badge,
  state = 'live'
}) {
  // project.state can be 'live', 'paused', 'finished', or 'development'
  if ((state !== 'paused' && state !== 'finished') && !badge) return null
  
  const { t } = useTranslation()

  let stateText
  if (state === 'paused') {
    stateText = t('ProjectCard.paused')
  } else if (state === 'finished') {
    stateText = t('ProjectCard.finished')
  }

  return (
    <StyledBox
      direction='row'
      align='center'
      height='30px'
      justify='center'
      round={{ corner: 'top', size: '8px' }}
      state={state}
    >
      {stateText ? (
        <SpacedText
          color='white'
          size='0.75rem'
          weight='bold'
        >
          {stateText}
        </SpacedText>
      ) : null}
      {badge ? (
        <StyledBadge
          color='black'
          size='0.75rem'
          weight='bold'
          elevation='small'
        >
          {badge}
        </StyledBadge>
      ) : null}
    </StyledBox>
  )
}

CardHeader.propTypes = {
  badge: number,
  state: string
}

export default CardHeader

1	import { Box, Text } from 'grommet'	1✔
2	import { number, string } from 'prop-types'	1✔
3	import styled from 'styled-components'	1✔
4
5	import { useTranslation } from '../../translations/i18n'	1✔
6	import SpacedText from '../../SpacedText'	3✔
7
8	const StyledBox = styled(Box)`	1✔
9	background: ${props => props.state === 'paused' ?	24!
10	'rgba(67, 187, 253, 0.5)'
11	: props.state === 'finished' ?	24!
12	'rgba(228, 89, 80, 0.5)'
13	: undefined};
14	position: relative;
15	`
16
17	const StyledBadge = styled(Text)`	1✔
18	background: white;
19	border-radius: 0.5rem;
20	box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.25);
21	height: fit-content;
22	min-width: 0.75rem;
23	padding: 2px 3px;
24	position: absolute;
25	right: 5px;
26	text-align: center;
27	top: 5px;
28	`
29
30	function CardHeader({
31	badge,	24✔
32	state = 'live'	24!
33	}) {
34	// project.state can be 'live', 'paused', 'finished', or 'development'
35	if ((state !== 'paused' && state !== 'finished') && !badge) return null	24!
36
37	const { t } = useTranslation()	24✔
38
39	let stateText
40	if (state === 'paused') {	24!
NEW 41	stateText = t('ProjectCard.paused')	×
42	} else if (state === 'finished') {	24!
NEW 43	stateText = t('ProjectCard.finished')	×
44	}
45
46	return (	24✔
47	<StyledBox
48	direction='row'
49	align='center'
50	height='30px'
51	justify='center'
52	round={{ corner: 'top', size: '8px' }}
53	state={state}
54	>
55	{stateText ? (	24!
56	<SpacedText
57	color='white'
58	size='0.75rem'
59	weight='bold'
60	>
61	{stateText}
62	</SpacedText>
63	) : null}
64	{badge ? (	24!
65	<StyledBadge
66	color='black'
67	size='0.75rem'
68	weight='bold'
69	elevation='small'
70	>
71	{badge}
72	</StyledBadge>
73	) : null}
74	</StyledBox>
75	)
76	}
77
78	CardHeader.propTypes = {	1✔
79	badge: number,
80	state: string
81	}	1✔
82
83	export default CardHeader

zooniverse / front-end-monorepo / 14579949148

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