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
@component-controls/components
3.15.0

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

import { Shield } from '@component-controls/components';

Theme Color

color
#227fc0
Name
Description
Default
Controls
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
Name
Description
Default
ShieldProps(4 properties)
label

shield label/text

string
-
value

value displayed with background color

stringnumber
-
percent

if true, treat the value as a percentage number from 0 to 100

boolean
false
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
-(1 properties)
SpaceProps(28 properties)
HTMLAttributes(43 properties)
Attributes(1 properties)
AriaAttributes(48 properties)
DOMAttributes(161 properties)
BoxOwnProps(3 properties)
BackgroundColorProps(2 properties)
OpacityProps(1 properties)

Commits

Date
Author
Commit Message
4/29/2021

atanasster

avatar of atanasster
feat: shield component and tests stats
1 commits
package
imports
peer
getColor
polished
mix
react
^17.0.1
FC
*
theme-ui
^0.8.4
jsxThemeBoxPropsBox
tinycolor
file
imports
"../ThemeContext"
useTheme

Stories

Overview

some text
1.0.0

Fraction

percent
50%

Percent

zero
80%

Zero Value

zero
0