"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_button_1 = require("@fluentui/react-button");
var react_theme_provider_1 = require("@fluentui/react-theme-provider");
var classes = require("../Button.stories.scss");
/**
 * Temporary Stack until there's one in its own package.
 */
var Stack = function (props) {
    var horizontal = props.horizontal, rest = tslib_1.__rest(props, ["horizontal"]);
    return React.createElement("div", tslib_1.__assign({}, rest, { className: horizontal ? classes.hStack : classes.vStack }));
};
/**
 * Temporary Text until there's one in its own package.
 */
// eslint-disable-next-line jsx-a11y/heading-has-content -- content passed via children
var Text = function (props) { return React.createElement("h2", tslib_1.__assign({}, props, { className: classes.text })); };
var ButtonExamples = function (props) { return (React.createElement(Stack, { horizontal: true },
    React.createElement(react_button_1.Button, tslib_1.__assign({}, props, { icon: "O" }), "Hello, world"),
    React.createElement(react_button_1.Button, tslib_1.__assign({}, props, { disabled: true, icon: "X" }), "Hello, world"),
    React.createElement(react_button_1.Button, tslib_1.__assign({}, props, { primary: true, icon: "X" }), "Hello, world"),
    React.createElement(react_button_1.Button, tslib_1.__assign({}, props, { primary: true, disabled: true, icon: "X" }), "Hello, world"),
    React.createElement(react_button_1.Button, tslib_1.__assign({}, props, { ghost: true, icon: "X" }), "Hello, world"),
    React.createElement(react_button_1.Button, tslib_1.__assign({}, props, { ghost: true, disabled: true, icon: "X" }), "Hello, world"),
    React.createElement(react_button_1.Button, tslib_1.__assign({}, props, { transparent: true, icon: "X" }), "Hello, world"),
    React.createElement(react_button_1.Button, tslib_1.__assign({}, props, { transparent: true, disabled: true, icon: "X" }), "Hello, world"))); };
exports.Buttons = function () { return (React.createElement(Stack, null,
    React.createElement(Text, null, "A button comes in default and `primary` flavors."),
    React.createElement(ButtonExamples, null),
    React.createElement(Text, null, "A button can appear round using the `circular` prop."),
    React.createElement(ButtonExamples, { circular: true }),
    React.createElement(Text, null, "A button can fill the width of its container using the `block` prop."),
    React.createElement(ButtonExamples, { block: true }),
    React.createElement(Text, null, "A button can contain only an icon using the `iconOnly` prop."),
    React.createElement(ButtonExamples, { iconOnly: true }),
    React.createElement(Text, null, "A button can be both `circular` and `iconOnly`."),
    React.createElement(ButtonExamples, { circular: true, iconOnly: true }),
    React.createElement(Text, null, "An icon button can format its Icon to appear before or after its content."),
    React.createElement(Stack, null,
        React.createElement(ButtonExamples, { iconPosition: "before" }),
        React.createElement(ButtonExamples, { iconPosition: "after" })),
    React.createElement(Text, null, "A button can show a loading indicator using the `loading` prop."),
    React.createElement(ButtonExamples, { loading: true }),
    React.createElement(Text, null, "A button can be sized."),
    React.createElement(Stack, null,
        React.createElement(ButtonExamples, { size: "smallest" }),
        React.createElement(ButtonExamples, { size: "smaller" }),
        React.createElement(ButtonExamples, { size: "small" }),
        React.createElement(ButtonExamples, { size: "large" }),
        React.createElement(ButtonExamples, { size: "larger" }),
        React.createElement(ButtonExamples, { size: "largest" })))); };
var githubTokens = {
    paddingLeft: '10px',
    paddingRight: '10px',
    paddingTop: '3px',
    paddingBottom: '3px',
    fontSize: '12px',
    fontWeight: '600',
    contentGap: '8px',
    borderRadius: '4px',
    borderWidth: '1px',
    background: 'linear-gradient(-180deg,#34d058,#28a745 90%)',
    contentColor: 'white',
    borderColor: 'rgba(27, 31, 35, 0.2)',
    hovered: {
        background: '#269f42 linear-gradient(-180deg,#2fcb53,#269f42 90%)',
        contentColor: 'white',
        borderColor: 'rgba(27, 31, 35, .5)',
    },
    pressed: {
        background: '#279f43',
        borderColor: 'rgba(27, 31, 35, .5)',
        contentColor: 'white',
        transform: 'none',
    },
};
var amazonTokens = {
    fontFamily: "\"Amazon Ember\", Arial, sans-serif",
    fontSize: '13px',
    fontWeight: '400',
    borderRadius: '3px',
    padding: '0 10px',
    background: 'linear-gradient(to bottom,#f7dfa5,#f0c14b)',
    contentColor: 'rgb(17, 17, 17)',
    borderColor: 'rgb(168, 135, 52) rgb(156, 126, 49) rgb(132, 106, 41)',
    hovered: {
        background: 'linear-gradient(to bottom,#f5d78e,#eeb933)',
        contentColor: 'rgb(17, 17, 17)',
        borderColor: '#a88734 #9c7e31 #846a29',
    },
    pressed: {
        background: '#f0c14b',
        contentColor: 'rgb(17, 17, 17)',
        borderColor: '#a88734 #9c7e31 #846a29',
    },
};
var netflixTokens = {
    borderWidth: '0px',
    padding: '7px 17px',
    borderRadius: '3px',
    fontFamily: '"Netflix Sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
    fontSize: '16px',
    fontWeight: '400',
    background: 'rgb(229, 9, 20)',
    contentColor: 'rgb(255, 255, 255)',
    borderColor: 'rgb(255, 255, 255)',
    hovered: {
        background: 'rgb(255, 50, 61)',
        contentColor: 'rgb(255, 255, 255)',
        borderColor: '#a88734 #9c7e31 #846a29',
    },
    pressed: {
        background: 'rgb(229, 9, 20)',
        borderColor: '#a88734 #9c7e31 #846a29',
    },
};
var spotifyPrimaryTokens = {
    height: '48px',
    borderWidth: '0px',
    padding: '17px 48px',
    borderRadius: '500px',
    fontFamily: 'Circular, Helvetica, Arial, sans-serif',
    fontSize: '14px',
    fontWeight: '700',
    background: 'rgb(29, 185, 84) none repeat scroll 0% 0% / auto padding-box border-box',
    contentColor: 'rgb(255, 255, 255)',
    borderColor: 'rgb(255, 255, 255)',
    hovered: {
        background: 'rgb(30, 215, 96) none repeat scroll 0% 0% / auto padding-box border-box',
        contentColor: 'rgb(255, 255, 255)',
        borderColor: 'rgb(255, 255, 255)',
    },
    pressed: {
        transform: 'none',
        background: '#1aa34a',
        contentColor: 'rgb(255, 255, 255)',
        borderColor: 'rgb(255, 255, 255)',
    },
};
var spotifyTokens = {
    height: '52px',
    background: 'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box',
    contentColor: 'rgb(0, 0, 0)',
    borderColor: 'rgb(0, 0, 0)',
    borderWidth: '2px',
    padding: '17px 48px',
    borderRadius: '500px',
    fontFamily: 'Circular, Helvetica, Arial, sans-serif',
    fontSize: '14px',
    fontWeight: '700',
};
exports.ButtonsWithInlineTokens = function () { return (React.createElement(Stack, null,
    React.createElement(Text, null, "A button can be styled using inline tokens."),
    React.createElement(Stack, null,
        React.createElement(react_button_1.Button, { icon: "O", tokens: githubTokens }, "Github: Open issue"),
        React.createElement(react_button_1.Button, { tokens: amazonTokens }, "Amazon: Proceed to checkout"),
        React.createElement(react_button_1.Button, { tokens: netflixTokens }, "Netflix: Sign In"),
        React.createElement(react_button_1.Button, { tokens: spotifyPrimaryTokens }, "Spotify: GET PREMIUM"),
        React.createElement(react_button_1.Button, { tokens: spotifyTokens }, "Spotify: LEARN MORE")))); };
var theme = {
    components: {
        Button: {
            variants: {
                github: githubTokens,
                amazon: amazonTokens,
                netflix: netflixTokens,
                spotifyPrimary: spotifyPrimaryTokens,
                spotifySecondary: spotifyTokens,
            },
        },
    },
};
exports.ButtonsWithVariants = function () { return (React.createElement(react_theme_provider_1.ThemeProvider, { theme: theme },
    React.createElement(Stack, null,
        React.createElement(Text, null, "A button can be styled using theme variants."),
        React.createElement(Stack, null,
            React.createElement(react_button_1.Button, { icon: "O", variant: "github" }, "Github: Open issue"),
            React.createElement(react_button_1.Button, { variant: "amazon" }, "Amazon: Proceed to checkout"),
            React.createElement(react_button_1.Button, { variant: "netflix" }, "Netflix: Sign In"),
            React.createElement(react_button_1.Button, { variant: "spotifyPrimary" }, "Spotify: GET PREMIUM"),
            React.createElement(react_button_1.Button, { variant: "spotifySecondary" }, "Spotify: LEARN MORE"))))); };
//# sourceMappingURL=Button.stories.js.map