A pack of extensions for grommet 2
created:7/7/2021
updated:7/7/2021
loc
98
comments
12%
passed
6
failed
10
coverage
88%

Card

avatar of atanasster

A Card-type container, all props of Box apply

Main

Info card

sub-title info
({
border,
align,
direction,
pad,
imageStamp,
title,
level,
fit,
image,
height,
}) => (
<Card>
<Card.CardTitle
border={border}
align={align}
direction={direction}
pad={pad}
>
<Box direction="row">
<ImageStamp {...imageStamp} />
<Heading level={level} margin="xsmall">
{title}
</Heading>
</Box>
<Box direction="row">
<Bitcoin color="plain" />
<Text>sub-title info</Text>
</Box>
</Card.CardTitle>
<Card.CardContent>
<Image fit={fit} src={image} height={`${height}`} />
</Card.CardContent>
<Card.CardActions justify="center">
{actions.map((action, index) => (
<Button
key={`actions_${index}`}
label={action.label}
onClick={action.onClick}
/>
))}
</Card.CardActions>
</Card>
)

Controls

Name
Description
Default
Controls
Heading(3 properties)
imageStamp
object
{
  "src": "https://s3.amazonaws.com/uifaces/faces/twitter/shadeed9/128.jpg",
  "round": "full"
}
title
text
Info card
level
number
3
Content(3 properties)
Card.CardTitle(4 properties)

Tests results

Status
Full name
Title
Time(ms)
Card.test.ts(16 tests)
failed
Card > main
snapshot
153
failed
Card > main
accessibility
487
failed
Card > animation
snapshot
72
failed
Card > animation
accessibility
89
failed
Card > background
snapshot
24
passed
Card > background
accessibility
90
failed
Card > border
snapshot
20
passed
Card > border
accessibility
72
failed
Card > elevation
snapshot
22
total 16 tests

Tests coverage

Kind
Total
Covered
Skipped
%
Card.tsx
lines
26
26
0
100%
functions
5
5
0
100%
statements
33
33
0
100%
branches
8
7
0
87.5%

A11y tests

Info card

sub-title info
 
impact
id
description
critical
image-alt

Ensures <img> elements have alternate text or a role of none or presentation...

summary
target
Fix any of the following: Element does not have an alt attribute aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"
.rah-static--height-auto.rah-static[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .cBTKAc.sc-gtsrHT.hslKve > .grupIl.StyledBox-sc-13pk1d4-0 > .itMhhB.StyledBox-sc-13pk1d4-0:nth-child(1)
Fix any of the following: Element does not have an alt attribute aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element's default semantics were not overridden with role="none" or role="presentation"
.rah-static--height-auto.rah-static[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .StyledGrommet-sc-19lkkz7-0.jXYINV > .cBTKAc.sc-gtsrHT.hslKve > .etFDPB.StyledBox-sc-13pk1d4-0

Viewport

Info card

sub-title info
320px

Info card

sub-title info
375px

Info card

sub-title info
768px

Info card

sub-title info
1024px