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

57.89

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

import { Box } from 'grommet'
import ProjectCard from './ProjectCard.js'

export default {
  title: 'Components / ProjectCard',
  component: ProjectCard
}

export const NfnCaliFlowers = {
  args: {
    badge: 3,
    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 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',
    displayName: 'Planet Hunters TESS',
    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
    slug: 'nora-dot-eisner/planet-hunters-tess'
  },
  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 PausedProject = {
  args: {
    badge: 42,
    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',
    state: 'paused',
    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 FinishedProject = {
  args: {
    description: 'Join the Search for Undiscovered Worlds',
    displayName: 'Planet Hunters TESS',
    imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
    state: 'finished',
    slug: 'nora-dot-eisner/planet-hunters-tess'
  },
  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>
  )
}

1	import { Box } from 'grommet'	1✔
2	import ProjectCard from './ProjectCard.js'	1,203!
3
4	export default {
5	title: 'Components / ProjectCard',
6	component: ProjectCard
7	}
8
9	export const NfnCaliFlowers = {	1✔
10	args: {
11	badge: 3,
12	description: 'Using digital images to investigate phenological change in a biodiversity hotspot',
13	displayName: `Notes from Nature - Capturing California's Flowers`,
14	imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
15	slug: 'md68135/notes-from-nature-capturing-californias-flowers'
16	},
17	render: args => (	6✔
18	<Box gap='medium' pad='medium' direction='row'>
19	<ProjectCard size='xlarge' {...args} />
20	<ProjectCard size='large' {...args} />
21	<ProjectCard size='medium' {...args} />
22	<ProjectCard size='small' {...args} />
23	</Box>
24	)
25	}
26
27	export const LargeNumbers = {	1✔
28	args: {
29	badge: 3758947489327,
30	description: 'Using digital images to investigate phenological change in a biodiversity hotspot',
31	displayName: `Notes from Nature - Capturing California's Flowers`,
32	imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
33	slug: 'md68135/notes-from-nature-capturing-californias-flowers'
34	},
35	render: args => (	×
36	<Box gap='medium' pad='medium' direction='row'>
37	<ProjectCard size='xlarge' {...args} />
38	<ProjectCard size='large' {...args} />
39	<ProjectCard size='medium' {...args} />
40	<ProjectCard size='small' {...args} />
41	</Box>
42	)
43	}
44
45	export const PlanetHuntersTess = {	1✔
46	args: {
47	description: 'Join the Search for Undiscovered Worlds',
48	displayName: 'Planet Hunters TESS',
49	imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
50	slug: 'nora-dot-eisner/planet-hunters-tess'
51	},
52	render: args => (	×
53	<Box gap='medium' pad='medium' direction='row'>
54	<ProjectCard size='xlarge' {...args} />
55	<ProjectCard size='large' {...args} />
56	<ProjectCard size='medium' {...args} />
57	<ProjectCard size='small' {...args} />
58	</Box>
59	)
60	}
61
62	export const PausedProject = {	1✔
63	args: {
64	badge: 42,
65	description: 'Using digital images to investigate phenological change in a biodiversity hotspot',
66	displayName: `Notes from Nature - Capturing California's Flowers`,
67	imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/0c4cfec1-a15b-468e-9f57-e9133993532d.jpeg',
68	state: 'paused',
69	slug: 'md68135/notes-from-nature-capturing-californias-flowers'
70	},
NEW 71	render: args => (	×
72	<Box gap='medium' pad='medium' direction='row'>
73	<ProjectCard size='xlarge' {...args} />
74	<ProjectCard size='large' {...args} />
75	<ProjectCard size='medium' {...args} />
76	<ProjectCard size='small' {...args} />
77	</Box>
78	)
79	}
80
81	export const FinishedProject = {	1✔
82	args: {
83	description: 'Join the Search for Undiscovered Worlds',
84	displayName: 'Planet Hunters TESS',
85	imageSrc: 'https://panoptes-uploads.zooniverse.org/project_avatar/442e8392-6c46-4481-8ba3-11c6613fba56.jpeg',
86	state: 'finished',
87	slug: 'nora-dot-eisner/planet-hunters-tess'
88	},
NEW 89	render: args => (	×
90	<Box gap='medium' pad='medium' direction='row'>
91	<ProjectCard size='xlarge' {...args} />
92	<ProjectCard size='large' {...args} />
93	<ProjectCard size='medium' {...args} />
94	<ProjectCard size='small' {...args} />
95	</Box>
96	)
97	}

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