import { __assign, __rest } from "tslib";
import * as React from 'react';
import { CompoundButton } from '@fluentui/react-button';
import * as classes from '../Button.stories.scss';
/**
 * Temporary Stack until there's one in its own package.
 */
var Stack = function (props) {
    var horizontal = props.horizontal, rest = __rest(props, ["horizontal"]);
    return React.createElement("div", __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", __assign({}, props, { className: classes.text })); };
var CompoundButtonExamples = function (props) { return (React.createElement(Stack, { horizontal: true },
    React.createElement(CompoundButton, __assign({}, props, { icon: "O", secondaryContent: "This is some secondary text" }), "Hello, world"),
    React.createElement(CompoundButton, __assign({}, props, { disabled: true, icon: "O", secondaryContent: "This is some secondary text" }), "Hello, world"),
    React.createElement(CompoundButton, __assign({}, props, { primary: true, icon: "O", secondaryContent: "This is some secondary text" }), "Hello, world"),
    React.createElement(CompoundButton, __assign({}, props, { primary: true, disabled: true, icon: "O", secondaryContent: "This is some secondary text" }), "Hello, world"),
    React.createElement(CompoundButton, __assign({}, props, { ghost: true, icon: "O", secondaryContent: "This is some secondary text" }), "Hello, world"),
    React.createElement(CompoundButton, __assign({}, props, { ghost: true, disabled: true, icon: "O", secondaryContent: "This is some secondary text" }), "Hello, world"),
    React.createElement(CompoundButton, __assign({}, props, { transparent: true, icon: "O", secondaryContent: "This is some secondary text" }), "Hello, world"),
    React.createElement(CompoundButton, __assign({}, props, { transparent: true, disabled: true, icon: "O", secondaryContent: "This is some secondary text" }), "Hello, world"))); };
export var CompoundButtons = function () { return (React.createElement(Stack, null,
    React.createElement(Text, null, "A CompoundButton comes in default and `primary` flavors."),
    React.createElement(CompoundButtonExamples, null),
    React.createElement(Text, null, "A CompoundButton can appear round using the `circular` prop."),
    React.createElement(CompoundButtonExamples, { circular: true }),
    React.createElement(Text, null, "A CompoundButton can fill the width of its container using the `block` prop."),
    React.createElement(CompoundButtonExamples, { block: true }),
    React.createElement(Text, null, "A CompoundButton can contain only an icon using the `iconOnly` prop."),
    React.createElement(CompoundButtonExamples, { iconOnly: true }),
    React.createElement(Text, null, "A CompoundButton can be both `circular` and `iconOnly`."),
    React.createElement(CompoundButtonExamples, { circular: true, iconOnly: true }),
    React.createElement(Text, null, "An icon CompoundButton can format its Icon to appear before or after its content."),
    React.createElement(Stack, null,
        React.createElement(CompoundButtonExamples, { iconPosition: "before" }),
        React.createElement(CompoundButtonExamples, { iconPosition: "after" })),
    React.createElement(Text, null, "A CompoundButton can show a loading indicator using the `loading` prop."),
    React.createElement(CompoundButtonExamples, { loading: true }),
    React.createElement(Text, null, "A CompoundButton can be sized."),
    React.createElement(Stack, null,
        React.createElement(CompoundButtonExamples, { size: "smallest" }),
        React.createElement(CompoundButtonExamples, { size: "smaller" }),
        React.createElement(CompoundButtonExamples, { size: "small" }),
        React.createElement(CompoundButtonExamples, { size: "large" }),
        React.createElement(CompoundButtonExamples, { size: "larger" }),
        React.createElement(CompoundButtonExamples, { size: "largest" })))); };
//# sourceMappingURL=CompoundButton.stories.js.map