A next-generation tool to create blazing-fast documentation sites
API
created:4/29/2021
updated:4/29/2021
loc
71
comments
24%
passed
26
coverage
79%

Shield

avatar of atanasster

A container component to display label/value pairs, where the value is colord. Similar design to github shields.

Overview

some text
1.0.0

Test data

select
#
label
color
1
Cecelia Langosh
#531c15
2
Ms. Alysha Daniel
#5e2519
3
Pearlie Altenwerth
#79096c
4
Krista Zulauf
#4d3d65
5
Ms. Ayla Swift
#033c34
5 data rows
Name
Description
Default
Controls
label

shield label/text

string
-
color
background color for the value. The color utility parses a component's
color
and
bg
props and converts them into CSS declarations. By default the raw value of the prop is returned.

Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. Array values are converted into responsive values.

string
#227fc0

Tests results

Status
Full name
Title
Time(ms)
Shield.test.ts(26 tests)
passed
Shield > overview > 1
snapshot
83
passed
Shield > overview > 1
accessibility
122
passed
Shield > overview > 2
snapshot
50
passed
Shield > overview > 2
accessibility
88
passed
Shield > overview > 3
snapshot
59
passed
Shield > overview > 3
accessibility
111
passed
Shield > overview > 4
snapshot
69
passed
Shield > overview > 4
accessibility
124
passed
Shield > overview > 5
snapshot
87
total 26 tests

Tests coverage

Kind
Total
Covered
Skipped
%
Shield.tsx
lines
23
21
0
91.3%
functions
1
1
0
100%
statements
24
22
0
91.66%
branches
24
19
0
79.16%

A11y tests

some text
1.0.0

Viewport

some text
1.0.0
320px
some text
1.0.0
375px
some text
1.0.0
768px
some text
1.0.0
1024px