"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 classes = require("../utils/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 ButtonVariants = 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, { primary: true, icon: "X" }), "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, 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"))); };
exports.ButtonFocus = function () {
    var buttonRef = React.useRef(null);
    return (React.createElement(Stack, null,
        React.createElement(react_button_1.Button, { onClick: function () {
                var _a;
                (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            } }, "Focus the other button"),
        React.createElement(react_button_1.Button, { ref: buttonRef }, "I get focused")));
};
exports.ButtonCss = function () { return (React.createElement(Stack, null,
    React.createElement(Text, null, "A button comes in default and `primary` flavors."),
    React.createElement(ButtonVariants, null),
    React.createElement(Text, null, "A button can appear round using the `circular` prop."),
    React.createElement(ButtonVariants, { circular: true }),
    React.createElement(Text, null, "A button can fill the width of its container using the `fluid` prop."),
    React.createElement(Stack, { horizontal: true },
        React.createElement(react_button_1.Button, { fluid: true, icon: "X" }, "Hello, world"),
        React.createElement(react_button_1.Button, { fluid: true, primary: true, icon: "X" }, "Hello, world"),
        React.createElement(react_button_1.Button, { fluid: true, disabled: true, icon: "X" }, "Hello, world"),
        React.createElement(react_button_1.Button, { fluid: true, primary: true, disabled: true, icon: "X" }, "Hello, world"),
        React.createElement(react_button_1.Button, { fluid: true, ghost: true, icon: "X" }, "Hello, world"),
        React.createElement(react_button_1.Button, { fluid: true, ghost: true, disabled: true, icon: "X" }, "Hello, world")),
    React.createElement(Text, null, "A button can contain only an icon using the `iconOnly` prop."),
    React.createElement(ButtonVariants, { iconOnly: true }),
    React.createElement(Text, null, "A button can be both `circular` and `iconOnly`."),
    React.createElement(ButtonVariants, { 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(ButtonVariants, { iconPosition: "before" }),
        React.createElement(ButtonVariants, { iconPosition: "after" })),
    React.createElement(Text, null, "A button can show a loading indicator using the `loading` prop."),
    React.createElement(ButtonVariants, { loading: true }),
    React.createElement(Text, null, "A button can be sized."),
    React.createElement(Stack, null,
        React.createElement(ButtonVariants, { size: "smallest" }),
        React.createElement(ButtonVariants, { size: "smaller" }),
        React.createElement(ButtonVariants, { size: "small" }),
        React.createElement(ButtonVariants, { size: "large" }),
        React.createElement(ButtonVariants, { size: "larger" }),
        React.createElement(ButtonVariants, { size: "largest" })))); };
exports.ButtonTokens = function () { return (React.createElement(Stack, null,
    React.createElement(Text, null, "A button can be colored using inline tokens."),
    React.createElement(Stack, null,
        React.createElement(react_button_1.Button, { icon: "O", tokens: {
                padding: '3px 10px',
                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',
                },
            } }, "Github: Open issue"),
        React.createElement(react_button_1.Button, { tokens: {
                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',
                },
            } }, "Amazon: Proceed to checkout"),
        React.createElement(react_button_1.Button, { tokens: {
                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)',
                    borderColor: '#a88734 #9c7e31 #846a29',
                },
                pressed: {
                    background: 'rgb(229, 9, 20)',
                    borderColor: '#a88734 #9c7e31 #846a29',
                },
            } }, "Netflix: Sign In"),
        React.createElement(react_button_1.Button, { tokens: {
                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)',
                },
            } }, "Spotify: GET PREMIUM"),
        React.createElement(react_button_1.Button, { tokens: {
                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',
            } }, "Spotify: LEARN MORE")),
    React.createElement(Text, null, "A tokenized button can be customized for any size or padding."),
    React.createElement(Stack, { horizontal: true },
        React.createElement(react_button_1.Button, { icon: "O", tokens: {
                height: '24px',
                fontSize: '12px',
                iconSize: '40px',
                padding: '0 8px',
                contentGap: '4px',
            } }, "I'm a small button with a large icon"),
        React.createElement(react_button_1.Button, { icon: "O", tokens: {
                height: '70px',
                fontSize: '24px',
                iconSize: '12px',
                padding: '0 40px',
            } }, "I'm a large button with a small icon")))); };
//# sourceMappingURL=Button.stories.js.map