2019-12-11 09:50:08 +00:00
import React from "react" ;
2021-03-02 13:27:45 +00:00
2021-03-03 10:25:56 +00:00
import Box from "./" ;
2021-03-02 13:27:45 +00:00
const containerProps = {
widthProp : "100%" ,
paddingProp : "10px" ,
displayProp : "flex" ,
flexDirection : "column" ,
alignItems : "flex-start" ,
} ;
const rowProps = {
displayProp : "flex" ,
flexDirection : "row" ,
} ;
const commonBoxProps = {
textAlign : "center" ,
marginProp : "10px" ,
paddingProp : "10px" ,
} ;
export default {
title : "Components/Box" ,
component : Box ,
parameters : {
docs : {
description : {
2021-03-03 08:53:37 +00:00
component :
2021-03-02 13:27:45 +00:00
"A container that lays out its contents in one direction. Box provides general CSS capabilities like flexbox layout, paddings, background color, border, and animation." ,
} ,
} ,
} ,
} ;
2021-03-04 23:52:14 +00:00
const Template = ( args ) => < Box { ... args } > Example < / B o x > ;
export const Default = Template . bind ( { } ) ;
Default . args = {
widthProp : "100%" ,
paddingProp : "10px" ,
displayProp : "flex" ,
flexDirection : "column" ,
alignItems : "flex-start" ,
borderProp : "4px dashed gray" ,
} ;
const ExamplesTemplate = ( args ) => (
2021-03-02 13:27:45 +00:00
< Box { ... containerProps } >
< Box { ... rowProps } >
< Box { ... commonBoxProps } backgroundProp = "gray" >
color background
< / B o x >
< Box
{ ... commonBoxProps }
backgroundProp = "linear-gradient(90deg, white, gray)"
>
linear gradient background
< / B o x >
< Box { ... commonBoxProps } backgroundProp = "radial-gradient(white, gray)" >
radial gradient background
< / B o x >
< / B o x >
< Box { ... rowProps } >
< Box { ... commonBoxProps } borderProp = "4px solid gray" >
solid border
< / B o x >
< Box { ... commonBoxProps } borderProp = "4px dashed gray" >
dashed border
< / B o x >
< Box { ... commonBoxProps } borderProp = "4px dotted gray" >
dotted border
< / B o x >
< Box { ... commonBoxProps } borderProp = "4px double gray" >
double border
< / B o x >
< / B o x >
< Box { ... rowProps } >
< Box
{ ... commonBoxProps }
borderProp = { { style : "solid" , width : "1px 0" , color : "gray" } }
>
Horizontal border
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "0 1px" ,
color : "gray" ,
} }
>
vertical border
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "0 0 0 1px" ,
color : "gray" ,
} }
>
left border
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px 0 0 0" ,
color : "gray" ,
} }
>
top border
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "0 1px 0 0" ,
color : "gray" ,
} }
>
right border
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "0 0 1px 0" ,
color : "gray" ,
} }
>
bottom border
< / B o x >
< / B o x >
< Box { ... rowProps } >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "100%" ,
} }
>
full round
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "5px" ,
} }
>
round
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "5px 0 0 5px" ,
} }
>
left round
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "5px 5px 0 0" ,
} }
>
top round
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "0 5px 5px 0" ,
} }
>
right round
< / B o x >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "0 0 5px 5px" ,
} }
>
bottom round
< / B o x >
< / B o x >
< Box { ... rowProps } >
< Box
{ ... commonBoxProps }
borderProp = { {
style : "dashed solid double dotted" ,
width : "2em 1rem 1px 2%" ,
color : "red yellow green blue" ,
radius : "10% 30% 50% 70%" ,
} }
>
Mix border
< / B o x >
< / B o x >
< / B o x >
) ;
2021-03-04 23:52:14 +00:00
export const Examples = ExamplesTemplate . bind ( { } ) ;