import { __assign } from "tslib";
import * as React from 'react';
import { Button } from '@fluentui/react-button';
import { Playground } from '../Playground';
// TODO: this is here while waiting for react-icons to merge
var SVGIcon = function () { return (React.createElement("span", { role: "presentation", style: {
        width: '1em',
        height: '1em',
    } },
    React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 2048 2048", style: {
            height: '100%',
            fill: 'currentColor',
            verticalAlign: 'top',
        } },
        React.createElement("path", { d: "M768 768h128v128H768V768zm384 768h128v128h-128v-128zm384-768h128v128h-128V768zm-384 0h128v128h-128V768zm-384 256h128v128H768v-128zm-384 0h128v128H384v-128zm1152 0h128v128h-128v-128zm-384 0h128v128h-128v-128zm-384 256h128v128H768v-128zm-384 0h128v128H384v-128zm1152 0h128v128h-128v-128zm-384 0h128v128h-128v-128zm-384 256h128v128H768v-128zm-384 0h128v128H384v-128zM2048 128v1792H0V128h384V0h128v128h1024V0h128v128h384zM128 256v256h1792V256h-256v128h-128V256H512v128H384V256H128zm1792 1536V640H128v1152h1792z" })))); };
export var Default = function () { return React.createElement(AppearanceExample, null); };
//
// Anatomy & Layout
//
export var TextOnly = function () { return React.createElement(Button, null, "Text"); };
export var TextOnlyLong = function () { return React.createElement(Button, null, "Text truncates after it hits the max width token value"); };
export var IconWithText = function () { return (React.createElement(React.Fragment, null,
    React.createElement(Button, { icon: React.createElement(SVGIcon, null) }, "Text"),
    React.createElement(Button, { icon: React.createElement(SVGIcon, null), iconPosition: "after" }, "Text"))); };
export var IconOnly = function () { return React.createElement(Button, { icon: React.createElement(SVGIcon, null) }); };
//
// Size
//
var SizeExample = function (_a) {
    var size = _a.size;
    return (React.createElement(React.Fragment, null,
        React.createElement("h4", null, size || '(default)'),
        React.createElement(Button, { size: size }, "Text"),
        React.createElement(Button, { size: size, icon: React.createElement(SVGIcon, null) }, "Text"),
        React.createElement(Button, { size: size, icon: React.createElement(SVGIcon, null) })));
};
export var Size = function () { return (React.createElement(React.Fragment, null,
    React.createElement(SizeExample, { size: "small" }),
    React.createElement(SizeExample, null),
    React.createElement(SizeExample, { size: "large" }))); };
//
// Appearance
//
var AppearanceExample = function (props) { return (React.createElement(React.Fragment, null,
    React.createElement(Button, __assign({}, props, { icon: React.createElement(SVGIcon, null) })),
    React.createElement("br", null),
    React.createElement(Button, __assign({}, props), "Text"),
    React.createElement(Button, __assign({}, props, { icon: React.createElement(SVGIcon, null) }), "Text"),
    React.createElement(Button, __assign({}, props, { icon: React.createElement(SVGIcon, null), iconPosition: "after" }), "Text"))); };
export var Primary = function () { return React.createElement(AppearanceExample, { primary: true }); };
//
// States
//
export var Disabled = function () { return (React.createElement(React.Fragment, null,
    React.createElement(Button, { disabled: true, icon: React.createElement(SVGIcon, null) }, "Default disabled"),
    React.createElement(Button, { primary: true, disabled: true, icon: React.createElement(SVGIcon, null) }, "Primary disabled"))); };
export var buttonBaseProps = [
    { propName: 'content', propType: 'string', defaultValue: 'This is a button', dependsOnProps: ['~iconOnly'] },
    { propName: 'disabled', propType: 'boolean' },
    { propName: 'icon', propType: 'boolean' },
    { propName: 'iconOnly', propType: 'boolean', dependsOnProps: ['icon'] },
    {
        propName: 'iconPosition',
        propType: ['before', 'after'],
        defaultValue: 'before',
        dependsOnProps: ['icon', '~iconOnly'],
    },
    { propName: 'primary', propType: 'boolean', dependsOnProps: ['~subtle', '~transparent'] },
    { propName: 'size', propType: ['small', 'medium', 'large'], defaultValue: 'medium' },
    { propName: 'subtle', propType: 'boolean', dependsOnProps: ['~primary', '~transparent'] },
    { propName: 'transparent', propType: 'boolean', dependsOnProps: ['~primary', '~subtle'] },
];
var buttonProps = [
    { sectionName: 'Button props', propList: buttonBaseProps },
];
export var ButtonPlayground = function () { return (React.createElement(Playground, { sections: buttonProps },
    React.createElement(Button, null))); };
//# sourceMappingURL=Button.stories.js.map