"use strict";
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("@storybook/react");
var storybook_chrome_screenshot_1 = require("storybook-chrome-screenshot");
var with_readme_1 = require("storybook-readme/with-readme");
var _1 = require("../");
var styled_components_1 = require("styled-components");
var Readme = require("./README/Swatches.md");
var S = function (_a) {
    var style = _a.style, border = _a.border, theme = _a.theme;
    var _b = theme.colors[style], main = _b.main, light = _b.light, dark = _b.dark, semilight = _b.semilight;
    return (React.createElement(_1.Box, { style: {
            borderRadius: 4,
            overflow: 'hidden',
            border: border ? "1px solid " + main : 'none'
        }, fontSize: 10 },
        React.createElement(_1.Flex, { style: { height: 75, backgroundColor: main }, align: 'center', justify: 'center', flexDirection: 'column' },
            React.createElement("div", null, "main"),
            main),
        semilight && (React.createElement(_1.Flex, { style: { height: 45, backgroundColor: semilight }, align: 'center', justify: 'center', flexDirection: 'column' },
            React.createElement("div", null, "semilight"),
            semilight)),
        React.createElement(_1.Flex, { style: { height: 45 } },
            React.createElement(_1.Flex, { flex: 1, style: { backgroundColor: light }, align: 'center', justify: 'center', flexDirection: 'column' },
                React.createElement("div", null, "light"),
                light),
            React.createElement(_1.Flex, { flex: 1, style: { backgroundColor: dark }, align: 'center', justify: 'center', flexDirection: 'column' },
                React.createElement("div", null, "dark"),
                dark))));
};
var Swatch = styled_components_1.withTheme(function (props) { return (React.createElement(_1.Flex, { style: {
        minWidth: 120,
        maxWidth: 160
    }, m: 15, flexDirection: 'column', flex: 1 },
    React.createElement(_1.Heading.h5, null, props.style),
    React.createElement(S, __assign({}, props)))); });
react_1.storiesOf('Core/Swatches', module)
    .addDecorator(with_readme_1.default(Readme))
    .addDecorator(storybook_chrome_screenshot_1.withScreenshot())
    .add('All', function () {
    return (React.createElement(_1.Provider, null,
        React.createElement(_1.Box, { is: 'section', m: 15 },
            React.createElement(_1.Box, { is: 'h2', mx: 15 }, "Primary"),
            React.createElement(_1.Flex, { wrap: true },
                React.createElement(Swatch, { style: 'primary' }),
                React.createElement(Swatch, { style: 'secondary' }),
                React.createElement(Swatch, { style: 'tertiary' }),
                React.createElement(Swatch, { style: 'quartenary' }))),
        React.createElement(_1.Box, { is: 'section', m: 15 },
            React.createElement(_1.Box, { is: 'h2', mx: 15 }, "Secondary"),
            React.createElement(_1.Flex, { wrap: true },
                React.createElement(Swatch, { border: true, style: 'success' }),
                React.createElement(Swatch, { border: true, style: 'danger' }),
                React.createElement(Swatch, { border: true, style: 'warning' }),
                React.createElement(Swatch, { border: true, style: 'info' }))),
        React.createElement(_1.Box, { is: 'section', m: 15 },
            React.createElement(_1.Box, { is: 'h2', mx: 15 }, "Utility"),
            React.createElement(_1.Flex, { wrap: true },
                React.createElement(Swatch, { border: true, style: 'text' }),
                React.createElement(Swatch, { border: true, style: 'gray' })))));
});
