import { __extends } from "tslib";
import * as React from 'react';
import { Button } from '@uifabric/experiments';
import { Icon, CommandBar, Stack, Text } from 'office-ui-fabric-react';
var tokens = {
    sectionStack: {
        childrenGap: 32,
    },
    headingStack: {
        childrenGap: 16,
        padding: 8,
    },
    buttonStack: {
        childrenGap: 12,
    },
};
var alertClicked = function () {
    alert('Clicked');
};
var ButtonStack = function (props) { return (React.createElement(Stack, { horizontal: true, disableShrink: true, tokens: tokens.buttonStack }, props.children)); };
var ButtonExample = /** @class */ (function (_super) {
    __extends(ButtonExample, _super);
    function ButtonExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ButtonExample.prototype.render = function () {
        return (React.createElement(Stack, { tokens: tokens.sectionStack },
            React.createElement(Stack, { tokens: tokens.headingStack },
                React.createElement(Stack, { tokens: tokens.buttonStack },
                    React.createElement(ButtonStack, null,
                        React.createElement(Button, { content: "Default button", onClick: alertClicked }),
                        React.createElement(Button, { disabled: true, content: "Disabled default button", onClick: alertClicked }),
                        React.createElement(Button, { primary: true, content: "Primary button", onClick: alertClicked }),
                        React.createElement(Button, { primary: true, disabled: true, content: "Disabled primary button", onClick: alertClicked })),
                    React.createElement(ButtonStack, null,
                        React.createElement(Button, { icon: "PeopleAdd", circular: true }),
                        React.createElement(Button, { icon: "Phone", circular: true, disabled: true }),
                        React.createElement(Button, { icon: "FontSize", circular: true, primary: true }),
                        React.createElement(Button, { icon: "Attach", circular: true, primary: true, disabled: true })),
                    React.createElement(ButtonStack, null,
                        React.createElement(Button, { content: "Button as an anchor: Go to Bing", href: "http://bing.com", target: "_blank", title: "Let us bing!" }),
                        React.createElement(Button, { primary: true, content: "Button as an anchor: Go to Bing", href: "http://bing.com", target: "_blank", title: "Let us bing!" })),
                    React.createElement(ButtonStack, null,
                        React.createElement(Button, { icon: "Upload", content: "Button with string icon" }),
                        React.createElement(Button, { icon: { iconName: 'Share' }, content: "Button with iconProps" }),
                        React.createElement(Button, { content: "Button with icon render function", slots: { icon: { render: function () { return React.createElement(Icon, { iconName: "Download" }); } } } })),
                    React.createElement(ButtonStack, null,
                        React.createElement(Button, null,
                            React.createElement(Icon, { iconName: "Upload" }),
                            React.createElement(Text, null, "With custom text/icon")),
                        React.createElement(Button, { primary: true },
                            React.createElement(Text, null, "With custom text/icon right aligned"),
                            React.createElement(Icon, { iconName: "Upload" }))),
                    React.createElement(CommandBar, { items: [{ key: '0', text: 'Button 1', iconProps: { iconName: 'Upload' } }] })))));
    };
    return ButtonExample;
}(React.Component));
export { ButtonExample };
//# sourceMappingURL=Button.Example.js.map