design-system-simplefi/build/src/components/layout/layout.stories.js

Design System for SimpleFi Applications

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import React from 'react';
import styled from 'styled-components';
import { Col, Container, Row } from './index';
export default {
    title: 'layout/positioning/Grid',
    component: Col,
    parameters: {
        docs: {
            description: {
                component: "\n```js\nimport { Container, Row, Grid } from '@simplefi/design-system';\n```\n      ",
            },
        },
    },
    argTypes: {
        cols: {
            control: { disable: true },
            table: {
                type: { summary: 'number | "auto"' },
            },
        },
        offset: {
            control: { disable: true },
        },
    },
};
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-align: center;\n  background-color: #ebf4fc;\n  border: 1px solid #80baeb;\n  margin-bottom: 15px;\n"], ["\n  text-align: center;\n  background-color: #ebf4fc;\n  border: 1px solid #80baeb;\n  margin-bottom: 15px;\n"])));
export var SetWidthColumns = function () { return (React.createElement(Container, null,
    React.createElement(Row, null,
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1")),
        React.createElement(Col, { cols: 1 },
            React.createElement(Content, null, "1"))),
    React.createElement(Row, null,
        React.createElement(Col, { cols: 2 },
            React.createElement(Content, null, "2")),
        React.createElement(Col, { cols: 2 },
            React.createElement(Content, null, "2")),
        React.createElement(Col, { cols: 2 },
            React.createElement(Content, null, "2")),
        React.createElement(Col, { cols: 2 },
            React.createElement(Content, null, "2")),
        React.createElement(Col, { cols: 2 },
            React.createElement(Content, null, "2")),
        React.createElement(Col, { cols: 2 },
            React.createElement(Content, null, "2"))),
    React.createElement(Row, null,
        React.createElement(Col, { cols: 3 },
            React.createElement(Content, null, "3")),
        React.createElement(Col, { cols: 3 },
            React.createElement(Content, null, "3")),
        React.createElement(Col, { cols: 3 },
            React.createElement(Content, null, "3")),
        React.createElement(Col, { cols: 3 },
            React.createElement(Content, null, "3"))),
    React.createElement(Row, null,
        React.createElement(Col, { cols: 4 },
            React.createElement(Content, null, "4")),
        React.createElement(Col, { cols: 4 },
            React.createElement(Content, null, "4")),
        React.createElement(Col, { cols: 4 },
            React.createElement(Content, null, "4"))),
    React.createElement(Row, null,
        React.createElement(Col, { cols: 6 },
            React.createElement(Content, null, "6")),
        React.createElement(Col, { cols: 6 },
            React.createElement(Content, null, "6"))),
    React.createElement(Row, null,
        React.createElement(Col, { cols: 12 },
            React.createElement(Content, null, "12"))))); };
export var AutoWidthColumns = function () { return (React.createElement(Container, null,
    React.createElement(Row, null,
        React.createElement(Col, { cols: 4 },
            React.createElement(Content, null, "4")),
        React.createElement(Col, { cols: "auto" },
            React.createElement(Content, null, "Auto width (8)"))))); };
export var OffsetColumns = function () { return (React.createElement(Container, null,
    React.createElement(Row, null,
        React.createElement(Col, { cols: 4 },
            React.createElement(Content, null, "4")),
        React.createElement(Col, { cols: 4, offset: 4 },
            React.createElement(Content, null, "4 and offset 4"))),
    React.createElement(Row, null,
        React.createElement(Col, { cols: 3, offset: 3 },
            React.createElement(Content, null, "3 and offset 3")),
        React.createElement(Col, { cols: 3, offset: 3 },
            React.createElement(Content, null, "3 and offset 3"))),
    React.createElement(Row, null,
        React.createElement(Col, { cols: 3, offset: 3 },
            React.createElement(Content, null, "3 and offset 3")),
        React.createElement(Col, { cols: 3 },
            React.createElement(Content, null, "3"))))); };
var templateObject_1;
//# sourceMappingURL=layout.stories.js.map