A pack of extensions for grommet 2
created:7/7/2021
updated:7/7/2021
loc
18
comments
17%
failed
2
coverage
100%

Avatar

avatar of atanasster

An image with some text, can be used as a user Avatar image

Main

Adam Smithadmin
({
size,
title,
subTitle,
image,
}) => <Avatar image={image} title={title} subTitle={subTitle} size={size} />

Controls

Name
Description
Default
Controls
IAvatarOwnProps(3 properties)
Image

Image to be displayed

string
-
Title

Main title(name) for the Avatar

string
-
Sub-title

Secondary title for the Avatar

string
-
IImageStampProps(1 properties)

Tests results

Status
Full name
Title
Time(ms)
Avatar.test.ts(2 tests)
failed
Avatar > main
snapshot
74
failed
Avatar > main
accessibility
185
total 2 tests

Tests coverage

Kind
Total
Covered
Skipped
%
Avatar.tsx
lines
5
5
0
100%
functions
1
1
0
100%
statements
8
8
0
100%
branches
0
0
0
100%

A11y tests

Adam Smithadmin
 
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 > .jpchgt.StyledBox-sc-13pk1d4-0

Viewport

Adam Smithadmin
320px
Adam Smithadmin
375px
Adam Smithadmin
768px
Adam Smithadmin
1024px