@inspirasia/compex-www

Compex WWW

Branch	Pipeline	Test coverage
Master

How To

Run project

    yarn start

Run storybook

Run storybook will give us more context of each components

    yarn storybook

Run Test

Run test without coverage

    yarn test

Run test with code coverage

    yarn test:coverage

Content

• Card
• Button
• Breadcrumb
• Alert
• Badge
• Image

Card

Property	Description	Type	Option Value	Default
title	Set card header title	string	-	-
hoverable	Set card on hover efect	boolean	-	false
size	Set card size	string	small	-
extra	Set extra component in card header, usually used ad card action in header	node	-	-
cover	Create a card cover with passed image as props	string	-	-
footer	Define card footer	node	-	-
style	Define custom style for card	stylesheet	-	-

Button

Property	Description	Type	Option Value	Default
disabled	Make button disabled	boolean	-	false
type	Set button type	string	default | primary | success | warning | danger	default
icon	Set button icon	node	-	-
iconPosition	Set icon position inside the button	string	left | right	left
size	set size of the button	string	default | small	default
block	Set button width 100% match to parent	boolean	-	false
onClick	Set button onClick function	(event) => void	-	-

Breadcrumb

Property	Description	Type	Option Value	Default
separator	Breadcrumb separator for breadcrumb item list	string	/	/

Alert

Property	Description	Type	Option Value	Default
type	Type of alert	string	default | primary | success | warning | danger	default
title	Show alert title to indicate what kind of alert by their title	string	-	-
closeIcon	Show close icon in right corner of alert box	boolean	-	-
onClose	Action onClick triggered by passed onClose props	event => void	-	-

Badge

Property	Description	Type	Option Value	Default
type	Type of badge	string	default | primary | success | warning | danger	default
hoverable	Make badge hoverable or not	boolean	-	false
children	Child components of badge	node	-	-

Image

Property	Description	Type	Option Value	Default
src	Image soruce url	string	-	-
alt	Alt text for image	string	-	-
type	Image type	string	default | circle | square	default
size	Image size array [width, height] example size={[320,320]}	array	-	-