"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var FaPlus = require("react-icons/lib/fa/spinner");
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 __1 = require("..");
var Readme = require("./README/Tooltips.md");
react_1.storiesOf('Core/Tooltips', 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, { tooltip: 'Tooltip on top', m: 2, primary: true, onClick: addon_actions_1.action('case-1') }, "Tooltip on top"),
            React.createElement(__1.Button, { tooltip: { text: 'Tooltip on right', placement: 'right' }, m: 2, secondary: true, onClick: addon_actions_1.action('case-2') }, "Tooltip on right"),
            React.createElement(__1.Button, { tooltip: { text: 'Tooltip on bottom', placement: 'bottom' }, m: 2, success: true, onClick: addon_actions_1.action('case-3') }, "Tooltip on bottom"),
            React.createElement(__1.Button, { tooltip: { text: 'Tooltip on left', placement: 'left' }, m: 2, tertiary: true, onClick: addon_actions_1.action('case-4') }, "Tooltip on left"),
            React.createElement(__1.Button, { tooltip: 'Tooltip on disabled button', m: 2, onClick: addon_actions_1.action('case-5'), disabled: true }, "Tooltip on disabled button"))));
})
    .add('Click', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { tooltip: { text: 'Tooltip on top', trigger: 'click' }, m: 2, primary: true, onClick: addon_actions_1.action('case-1') }, "Tooltip on top"),
            React.createElement(__1.Button, { tooltip: {
                    text: 'Tooltip on right',
                    trigger: 'click',
                    placement: 'right'
                }, m: 2, secondary: true, onClick: addon_actions_1.action('case-2') }, "Tooltip on right"),
            React.createElement(__1.Button, { tooltip: {
                    text: 'Tooltip on bottom',
                    trigger: 'click',
                    placement: 'bottom'
                }, m: 2, success: true, onClick: addon_actions_1.action('case-3') }, "Tooltip on bottom"),
            React.createElement(__1.Button, { tooltip: {
                    text: 'Tooltip on left',
                    trigger: 'click',
                    placement: 'left'
                }, m: 2, tertiary: true, onClick: addon_actions_1.action('case-4') }, "Tooltip on left"))));
})
    .add('Supported Elements', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Heading.h3, null, "Alert"),
            React.createElement(__1.Alert, { tooltip: 'Alert tooltip', warning: true }, "Lorem ipsum dolor sit amet."),
            React.createElement(__1.Heading.h3, { mt: 30 }, "Badge"),
            React.createElement(__1.Badge, { tooltip: 'Badge tooltip', text: 'lorem' }),
            React.createElement(__1.Heading.h3, { mt: 30 }, "BadgeSelect"),
            React.createElement(__1.BadgeSelect, { tooltip: 'BadgeSelect tooltip', items: ['wpe', 'web', 'redis'] }),
            React.createElement(__1.Heading.h3, { mt: 30 }, "Box"),
            React.createElement(__1.Box, { tooltip: 'Box tooltip' }, "Lorem ipsum dolor sit amet."),
            React.createElement(__1.Heading.h3, { mt: 30 }, "Button"),
            React.createElement(__1.Button, { tooltip: 'Button tooltip', mr: 2, mb: 2 }, "Lorem ipsum"),
            React.createElement(__1.Button, { tooltip: 'Button tooltip', iconElement: React.createElement(FaPlus, null), mr: 2, mb: 2 }, "Lorem ipsum"),
            React.createElement(__1.Button, { tooltip: 'Button tooltip', mr: 2, mb: 2, disabled: true }, "Lorem ipsum"),
            React.createElement(__1.Button, { tooltip: 'Button tooltip', iconElement: React.createElement(FaPlus, null), mr: 2, mb: 2, disabled: true },
                React.createElement(__1.Txt, null, "Lorem ipsum")),
            React.createElement(__1.Heading.h3, { mt: 30 }, "CodeWithCopy"),
            React.createElement(__1.CodeWithCopy, { text: 'Lorem', tooltip: 'CodeWithCopy tooltip' }),
            React.createElement(__1.Heading.h3, { mt: 30 }, "DropDownButton"),
            React.createElement(__1.DropDownButton, { tooltip: 'DropDownButton tooltip', mx: 2, primary: true, label: React.createElement("div", null, "DropDown") },
                React.createElement("div", null, "Item"),
                React.createElement("div", null, "Item"),
                React.createElement("div", null, "Item"),
                React.createElement("div", null, "Item")),
            React.createElement(__1.Fixed, { right: '30px', tooltip: 'Fixed tooltip' },
                React.createElement(__1.Heading.h3, { mt: 30 }, "Fixed")),
            React.createElement(__1.Heading.h3, { mt: 30 }, "Flex"),
            React.createElement(__1.Flex, { style: { height: 30 }, bg: 'red', tooltip: 'Flex tooltip' }),
            React.createElement(__1.Heading.h3, { mt: 30 }, "Heading"),
            React.createElement(__1.Heading.h2, { tooltip: 'Heading tooltip' }, "Hello world!"),
            React.createElement(__1.Heading.h3, { mt: 30 }, "Link"),
            React.createElement(__1.Link, { tooltip: 'Link tooltip' }, "Lorem ipsum dolor sit amet"),
            React.createElement(__1.Heading.h3, { mt: 30 }, "Txt"),
            React.createElement(__1.Txt, { tooltip: 'Txt tooltip' }, "Lorem ipsum dolor sit amet"))));
})
    .add('Styled tooltips', function () {
    return (React.createElement(__1.Provider, null,
        React.createElement(__1.Box, { m: 3 },
            React.createElement(__1.Button, { tooltip: {
                    text: 'Lorem ipsum dolor sit amet',
                    containerStyle: {
                        color: 'pink',
                        fontStyle: 'italic'
                    }
                }, m: 2, primary: true, onClick: addon_actions_1.action('case-1') }, "Styled tooltip container"),
            React.createElement(__1.Button, { tooltip: {
                    text: 'Lorem ipsum dolor sit amet',
                    arrowStyle: {
                        marginLeft: -70,
                        borderTopWidth: 10
                    }
                }, m: 2, primary: true, onClick: addon_actions_1.action('case-1') }, "Styled tooltip arrow"),
            React.createElement(__1.Button, { tooltip: {
                    text: 'Lorem ipsum dolor sit amet',
                    innerStyle: {
                        borderRadius: 15
                    }
                }, m: 2, primary: true, onClick: addon_actions_1.action('case-1') }, "Styled tooltip inner"))));
});
