import React from "react";
import { storiesOf } from "@storybook/react";
import { Grid, GridCell, GridContainer } from "../Grid/grid";

const storiesForRow = storiesOf("Layout|Grid", module);
storiesForRow.addDecorator(story => <div id="root-preview">{story()}</div>);

const additionalProps = {
    style: { border: "1px solid black" }
}

storiesForRow.add("Default", () => {
    return (
        <GridContainer>
            <Grid>
                <GridCell large={12} medium={8} small={4} {...additionalProps}>
                    Full-width Content
                </GridCell>
                <GridCell large={6} medium={4} small={2} {...additionalProps}>
                    Half-width Content
                </GridCell>
                <GridCell large={6} medium={4} small={2} {...additionalProps}>
                    Half-width Content
                </GridCell>
            </Grid>
        </GridContainer>
    );
});