skip to main content

skip to navigation sidebar

skip to context sidebar

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

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%

Viewport

320px

375px

768px

1024px