"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var react_1 = require("@storybook/react");
var addon_actions_1 = require("@storybook/addon-actions");
var storybook_chrome_screenshot_1 = require("storybook-chrome-screenshot");
var with_readme_1 = require("storybook-readme/with-readme");
var FaExpand = require("react-icons/lib/fa/expand");
var FaRecycle = require("react-icons/lib/fa/recycle");
var FaSpinner = require("react-icons/lib/fa/spinner");
var __1 = require("../");
var Readme = require("./README/Button.md");
react_1.storiesOf('Core/Button', module)
    .addDecorator(with_readme_1.default(Readme))
    .addDecorator(storybook_chrome_screenshot_1.withScreenshot())
    .add('Standard', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, primary: true, onClick: addon_actions_1.action('case-1') }, "Primary"),
            React.createElement(__1.Button, { m: 2, secondary: true, onClick: addon_actions_1.action('case-2') }, "Secondary"),
            React.createElement(__1.Button, { m: 2, tertiary: true, onClick: addon_actions_1.action('case-3') }, "Tertiary"),
            React.createElement(__1.Button, { m: 2, success: true, onClick: addon_actions_1.action('case-4') }, "Success"),
            React.createElement(__1.Button, { m: 2, danger: true, onClick: addon_actions_1.action('case-5') }, "Danger"),
            React.createElement(__1.Button, { m: 2, onClick: addon_actions_1.action('case-6') }, "Default"))));
})
    .add('Emphasized', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, emphasized: true, primary: true, onClick: addon_actions_1.action('case-1') }, "Primary"),
            React.createElement(__1.Button, { m: 2, emphasized: true, secondary: true, onClick: addon_actions_1.action('case-2') }, "Secondary"),
            React.createElement(__1.Button, { m: 2, emphasized: true, tertiary: true, onClick: addon_actions_1.action('case-3') }, "Tertiary"),
            React.createElement(__1.Button, { m: 2, emphasized: true, success: true, onClick: addon_actions_1.action('case-4') }, "Success"),
            React.createElement(__1.Button, { m: 2, emphasized: true, danger: true, onClick: addon_actions_1.action('case-5') }, "Danger"),
            React.createElement(__1.Button, { m: 2, emphasized: true, onClick: addon_actions_1.action('case-6') }, "Default"))));
})
    .add('Disabled', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, disabled: true, primary: true, onClick: addon_actions_1.action('case-1') }, "Primary"),
            React.createElement(__1.Button, { m: 2, disabled: true, secondary: true, onClick: addon_actions_1.action('case-2') }, "Secondary"),
            React.createElement(__1.Button, { m: 2, disabled: true, tertiary: true, onClick: addon_actions_1.action('case-3') }, "Tertiary"),
            React.createElement(__1.Button, { m: 2, disabled: true, success: true, onClick: addon_actions_1.action('case-4') }, "Success"),
            React.createElement(__1.Button, { m: 2, disabled: true, danger: true, onClick: addon_actions_1.action('case-5') }, "Danger"),
            React.createElement(__1.Button, { m: 2, disabled: true, onClick: addon_actions_1.action('case-6') }, "Default"))));
})
    .add('Outline', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, outline: true, primary: true, onClick: addon_actions_1.action('case-1') }, "Primary"),
            React.createElement(__1.Button, { m: 2, outline: true, secondary: true, onClick: addon_actions_1.action('case-2') }, "Secondary"),
            React.createElement(__1.Button, { m: 2, outline: true, tertiary: true, onClick: addon_actions_1.action('case-3') }, "Tertiary"),
            React.createElement(__1.Button, { m: 2, outline: true, success: true, onClick: addon_actions_1.action('case-4') }, "Success"),
            React.createElement(__1.Button, { m: 2, outline: true, danger: true, onClick: addon_actions_1.action('case-5') }, "Danger"),
            React.createElement(__1.Button, { m: 2, outline: true, onClick: addon_actions_1.action('case-6') }, "Default"))));
})
    .add('Underline', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, primary: true, underline: true, onClick: addon_actions_1.action('case-1') }, "Button"),
            React.createElement(__1.Button, { m: 2, underline: true, onClick: addon_actions_1.action('case-1') }, "Button"),
            React.createElement(__1.Button, { m: 2, underline: true, disabled: true }, "Underline disabled"))));
})
    .add('Plaintext', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, plaintext: true, primary: true, onClick: addon_actions_1.action('case-1') }, "Button"),
            React.createElement(__1.Button, { m: 2, plaintext: true, color: 'green', onClick: addon_actions_1.action('case-1') }, "Button"),
            React.createElement(__1.Button, { m: 2, plaintext: true, primary: true, iconElement: React.createElement(FaSpinner, null), onClick: addon_actions_1.action('case-2') }, "Button"))));
})
    .add('Width', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { w: 95, m: 2, primary: true, onClick: addon_actions_1.action('case-1') }, "Button"),
            React.createElement(__1.Button, { w: 60, m: 2, secondary: true, onClick: addon_actions_1.action('case-2') }, "Button"),
            React.createElement(__1.Button, { w: 120, m: 2, tertiary: true, onClick: addon_actions_1.action('case-3') }, "Button"),
            React.createElement("div", { style: { width: 300 } },
                React.createElement(__1.Button, { w: '100%', m: 2, onClick: addon_actions_1.action('case-4') }, "Button")))));
})
    .add('With icon', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, tertiary: true, iconElement: React.createElement(FaExpand, null), onClick: addon_actions_1.action('case-3') }, "Expand"),
            React.createElement(__1.Button, { m: 2, iconElement: React.createElement(FaRecycle, null), onClick: addon_actions_1.action('case-4') }, "Recycle"))));
})
    .add('Square', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, tertiary: true, square: true, onClick: addon_actions_1.action('case-3') },
                React.createElement(FaExpand, null)),
            React.createElement(__1.Button, { m: 2, square: true, onClick: addon_actions_1.action('case-4') },
                React.createElement(FaRecycle, null)))));
})
    .add('Square Emphasized', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { m: 2, emphasized: true, tertiary: true, square: true, onClick: addon_actions_1.action('case-3') },
                React.createElement(FaExpand, null)),
            React.createElement(__1.Button, { m: 2, emphasized: true, square: true, onClick: addon_actions_1.action('case-4') },
                React.createElement(FaRecycle, null)))));
})
    .add('Active', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Box, { mb: 2 },
                React.createElement(__1.Button, { m: 2, outline: true }, "Outline"),
                React.createElement(__1.Button, { m: 2, outline: true, active: true }, "Outline active")),
            React.createElement(__1.Box, { mb: 2 },
                React.createElement(__1.Button, { m: 2, underline: true }, "Underline"),
                React.createElement(__1.Button, { m: 2, underline: true, active: true }, "Underline active")),
            React.createElement(__1.Box, { mb: 2 },
                React.createElement(__1.Button, { m: 2 }, "Default"),
                React.createElement(__1.Button, { m: 2, active: true }, "Default active")),
            React.createElement(__1.Box, { mb: 2 },
                React.createElement(__1.Button, { m: 2, primary: true }, "Primary"),
                React.createElement(__1.Button, { m: 2, primary: true, active: true }, "Primary active")))));
})
    .add('Link', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button.a, { m: 2, href: "#", primary: true }, "Primary"),
            React.createElement(__1.Button.a, { m: 2, href: "#", secondary: true }, "Secondary"),
            React.createElement(__1.Button.a, { m: 2, href: "#", tertiary: true }, "Tertiary"),
            React.createElement(__1.Button.a, { m: 2, href: "#", success: true }, "Success"),
            React.createElement(__1.Button.a, { m: 2, href: "#", danger: true }, "Danger"),
            React.createElement(__1.Button.a, { m: 2, href: "#" }, "Default")),
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button.a, { m: 2, underline: true, href: "#", primary: true }, "Link Button"),
            React.createElement(__1.Button.a, { m: 2, underline: true, href: "#" }, "Link Button"))));
});
