import React from "react";
import Box from "./";
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: {
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.",
},
},
},
};
const Template = (args) => Example;
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) => (
color background
linear gradient background
radial gradient background
solid border
dashed border
dotted border
double border
Horizontal border
vertical border
left border
top border
right border
bottom border
full round
round
left round
top round
right round
bottom round
Mix border
);
export const Examples = ExamplesTemplate.bind({});