2023-11-23 15:25:24 +00:00
import type { Meta , StoryObj } from "@storybook/react" ;
import { Box } from "./index" ;
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" ,
} ;
const meta = {
title : "Components/Box" ,
component : Box ,
argTypes : { } ,
tags : [ "autodocs" ] ,
parameters : {
docs : {
description : {
component :
"A container that lays out its contents in one direction. Box provides general CSS capabilities like flexbox layout, paddings, background color, border, and animation." ,
} ,
} ,
} ,
} satisfies Meta < typeof Box > ;
type Story = StoryObj < typeof Box > ;
export default meta ;
export const Default : Story = {
render : ( args ) = > < Box { ...args } > Example < / Box > ,
args : {
widthProp : "100%" ,
paddingProp : "10px" ,
displayProp : "flex" ,
flexDirection : "column" ,
alignItems : "flex-start" ,
borderProp : "4px dashed gray" ,
} ,
} ;
export const Example : Story = {
2023-11-24 07:43:45 +00:00
render : ( ) = > (
2023-11-23 15:25:24 +00:00
< Box { ...containerProps } >
< Box { ...rowProps } >
< Box { ...commonBoxProps } backgroundProp = "gray" >
color background
< / Box >
< Box
{ . . . commonBoxProps }
backgroundProp = "linear-gradient(90deg, white, gray)"
>
linear gradient background
< / Box >
< Box { ...commonBoxProps } backgroundProp = "radial-gradient(white, gray)" >
radial gradient background
< / Box >
< / Box >
< Box { ...rowProps } >
< Box { ...commonBoxProps } borderProp = "4px solid gray" >
solid border
< / Box >
< Box { ...commonBoxProps } borderProp = "4px dashed gray" >
dashed border
< / Box >
< Box { ...commonBoxProps } borderProp = "4px dotted gray" >
dotted border
< / Box >
< Box { ...commonBoxProps } borderProp = "4px double gray" >
double border
< / Box >
< / Box >
< Box { ...rowProps } >
< Box
{ . . . commonBoxProps }
borderProp = { { style : "solid" , width : "1px 0" , color : "gray" } }
>
Horizontal border
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "0 1px" ,
color : "gray" ,
} }
>
vertical border
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "0 0 0 1px" ,
color : "gray" ,
} }
>
left border
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px 0 0 0" ,
color : "gray" ,
} }
>
top border
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "0 1px 0 0" ,
color : "gray" ,
} }
>
right border
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "0 0 1px 0" ,
color : "gray" ,
} }
>
bottom border
< / Box >
< / Box >
< Box { ...rowProps } >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "100%" ,
} }
>
full round
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "5px" ,
} }
>
round
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "5px 0 0 5px" ,
} }
>
left round
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "5px 5px 0 0" ,
} }
>
top round
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "0 5px 5px 0" ,
} }
>
right round
< / Box >
< Box
{ . . . commonBoxProps }
borderProp = { {
style : "solid" ,
width : "1px" ,
color : "gray" ,
radius : "0 0 5px 5px" ,
} }
>
bottom round
< / Box >
< / Box >
< 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
< / Box >
< / Box >
< / Box >
) ,
} ;