created:5/19/2021
updated:5/19/2021
loc
104
comments
30%
todos
2
passed
10
coverage
69%

Starter

This example demonstrates documenting a hypothetical Button component that supports variants, icons, text, and padding

Overview

In the Playground, you can view the source code, apply zoom or background...

Test data

select
#
text
variant
fontSize
icon
iconSize
1
Cecelia Langosh
success
16
none
medium
2
Murl Green I
disabled
26
down-arrow
large
3
Lela McClure
error
24
left-arrow
4
Ms. Jean Barrows
accent
23
up-arrow
5
Tanya Sanford
error
19
up-arrow
5 data rows

Controls

Name
Description
Default
Controls
text

button label of text

string
-
variant

variant kind

disabledprimaryaccentsuccesswarningerror
primary
fontSize

font size for the Button label

number
18
icon

icon kind

nonesearchleft-arrowright-arrowdown-arrowup-arrow
none
iconSide

on which side of the label should the icon be placed

leftright
left
iconSize

icon size

smallmediumlarge
small
padding

padding variants

smallmediumlarge
medium

Tests results

Status
Full name
Title
Time(ms)
VariantButton.test.ts(10 tests)
passed
VariantButton > overview > 1
snapshot
23
passed
VariantButton > overview > 1
accessibility
96
passed
VariantButton > overview > 2
snapshot
18
passed
VariantButton > overview > 2
accessibility
89
passed
VariantButton > overview > 3
snapshot
8
passed
VariantButton > overview > 3
accessibility
87
passed
VariantButton > overview > 4
snapshot
10
passed
VariantButton > overview > 4
accessibility
100
passed
VariantButton > overview > 5
snapshot
7
total 10 tests

Tests coverage

Kind
Total
Covered
Skipped
%
VariantButton.tsx
lines
11
11
0
100%
functions
1
1
0
100%
statements
11
11
0
100%
branches
13
9
0
69.23%

A11y tests

 
impact
id
description
serious
color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

summary
target
Fix any of the following: Element has insufficient color contrast of 3.45 (foreground color: #f2f2f2, background color: #2f80ed, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1
.rah-static--height-auto.rah-static[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > button

Viewport

320px
375px
768px
1024px