define(["require", "exports", "tslib", "react", "@fluentui/react-button", "office-ui-fabric-react", "../Button.stories.scss"], function (require, exports, tslib_1, React, react_button_1, office_ui_fabric_react_1, classes) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ToggleButtonExamples = function (props) { return (React.createElement("div", { className: classes.hStack },
        React.createElement(react_button_1.ToggleButton, tslib_1.__assign({}, props, { icon: "X" }), "Hello, world"),
        React.createElement(react_button_1.ToggleButton, tslib_1.__assign({}, props, { disabled: true, icon: "X" }), "Hello, world"),
        React.createElement(react_button_1.ToggleButton, tslib_1.__assign({}, props, { primary: true, icon: "X" }), "Hello, world"),
        React.createElement(react_button_1.ToggleButton, tslib_1.__assign({}, props, { primary: true, disabled: true, icon: "X" }), "Hello, world"),
        React.createElement(react_button_1.ToggleButton, tslib_1.__assign({}, props, { ghost: true, icon: "X" }), "Hello, world"),
        React.createElement(react_button_1.ToggleButton, tslib_1.__assign({}, props, { ghost: true, disabled: true, icon: "X" }), "Hello, world"),
        React.createElement(react_button_1.ToggleButton, tslib_1.__assign({}, props, { transparent: true, icon: "X" }), "Hello, world"),
        React.createElement(react_button_1.ToggleButton, tslib_1.__assign({}, props, { transparent: true, disabled: true, icon: "X" }), "Hello, world"))); };
    exports.ToggleButtons = function () { return (React.createElement(office_ui_fabric_react_1.Stack, { gap: 20 },
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button comes in default and `primary` flavors."),
        React.createElement(ToggleButtonExamples, null),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can appear round using the `circular` prop."),
        React.createElement(ToggleButtonExamples, { circular: true }),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can fill the width of its container using the `block` prop."),
        React.createElement("div", { className: classes.vStack },
            React.createElement(ToggleButtonExamples, { block: true })),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can contain only an icon using the `iconOnly` prop."),
        React.createElement(ToggleButtonExamples, { iconOnly: true }),
        React.createElement(office_ui_fabric_react_1.Text, null, "A button can be both `circular` and `iconOnly`."),
        React.createElement(ToggleButtonExamples, { circular: true, iconOnly: true }),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "An icon button can format its Icon to appear before or after its content."),
        React.createElement("div", { className: classes.vStack },
            React.createElement(ToggleButtonExamples, { iconPosition: "before" }),
            React.createElement(ToggleButtonExamples, { iconPosition: "after" })),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can show a loading indicator using the `loading` prop."),
        React.createElement(ToggleButtonExamples, { loading: true }),
        React.createElement(office_ui_fabric_react_1.Text, { variant: "xLarge" }, "A button can be sized."),
        React.createElement("div", { className: classes.vStack },
            React.createElement(ToggleButtonExamples, { size: "smallest" }),
            React.createElement(ToggleButtonExamples, { size: "smaller" }),
            React.createElement(ToggleButtonExamples, { size: "small" }),
            React.createElement(ToggleButtonExamples, { size: "large" }),
            React.createElement(ToggleButtonExamples, { size: "larger" }),
            React.createElement(ToggleButtonExamples, { size: "largest" })))); };
});
//# sourceMappingURL=ToggleButton.stories.js.map