import React from "react";
import Grid from "./";
import Box from "../box";
import Text from "../text";
export default {
title: "Components/Grid",
component: Grid,
subcomponents: { Box },
argTypes: {},
parameters: {
docs: {
description: {
component:
"A container that lays out its contents in a 2-dimensional grid system. Use Box components to define rows and columns",
},
},
},
};
const gridProps = {
marginProp: "0 0 20px 0",
};
const boxProps = {
paddingProp: "10px",
displayProp: "flex",
alignItems: "center",
justifyContent: "center",
};
const Template = (args) => {
return (
200px
minmax(100px,1fr)
auto
);
};
const TemplateColumns = (args) => {
return (
<>
200px
minmax(100px,1fr)
auto
25%
25%
25%
100px
100px
100px
minmax(100px,1fr)
minmax(100px,1fr)
minmax(100px,1fr)
>
);
};
const TemplateRows = (args) => {
return (
<>
100px
minmax(100px,1fr)
auto
50px
50px
50px
>
);
};
const TemplateLayout = (args) => {
return (
header
navbar
main
sidebar
footer
);
};
export const Default = Template.bind({});
Default.args = {
columnsProp: ["200px", ["100px", "1fr"], "auto"],
};
export const Columns = TemplateColumns.bind({});
export const Rows = TemplateRows.bind({});
export const Layout = TemplateLayout.bind({});