moira-web

1
// @flow
2
import * as React from "react";
3
import { storiesOf } from "@storybook/react";
4
import Layout from "../Components/Layout/Layout";
5

6
function SpaceFiller(props: { width?: number | string, height?: number | string, label?: string }): React.Node {
7
    return (
8
        <div
9
            style={{
10
                height: props.height || 300,
11
                width: props.width || "100%",
12
                border: "1px solid #dee0e3",
13
                boxSizing: "border-box",
14
                color: "#000",
15
                display: "flex",
16
                flexFlow: "column",
17
                flex: "1 1 auto",
18
                alignItems: "center",
19
                justifyContent: "center",
20
                background:
21
                    "repeating-linear-gradient(45deg, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 10px, rgba(255,255,255,0) 10px, rgba(255,255,255,0) 20px )",
22
            }}>
23
            {props.label || "Children"}
24
        </div>
25
    );
26
}
27

28
storiesOf("Layout", module)
29
    .add("Default", () => (
30
        <Layout>
31
            <Layout.Content>
32
                <SpaceFiller />
33
            </Layout.Content>
34
        </Layout>
35
    ))
36
    .add("With Plate", () => (
37
        <Layout>
38
            <Layout.Plate>
39
                <SpaceFiller height={50} label="Plate" />
40
            </Layout.Plate>
41
            <Layout.Content>
42
                <SpaceFiller />
43
            </Layout.Content>
44
        </Layout>
45
    ))
46
    .add("With Paging", () => (
47
        <Layout>
48
            <Layout.Content>
49
                <SpaceFiller />
50
            </Layout.Content>
51
            <Layout.Paging>
52
                <SpaceFiller height={30} label="Paging" />
53
            </Layout.Paging>
54
        </Layout>
55
    ))
56
    .add("With Plate and paging", () => (
57
        <Layout>
58
            <Layout.Plate>
59
                <SpaceFiller height={50} label="Plate" />
60
            </Layout.Plate>
61
            <Layout.Content>
62
                <SpaceFiller />
63
            </Layout.Content>
64
            <Layout.Paging>
65
                <SpaceFiller height={30} label="Paging" />
66
            </Layout.Paging>
67
        </Layout>
68
    ));
69