"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var experiments_1 = require("@uifabric/experiments");
var office_ui_fabric_react_1 = require("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(office_ui_fabric_react_1.Stack, { horizontal: true, disableShrink: true, tokens: tokens.buttonStack }, props.children)); };
var ButtonExample = /** @class */ (function (_super) {
    tslib_1.__extends(ButtonExample, _super);
    function ButtonExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ButtonExample.prototype.render = function () {
        return (React.createElement(office_ui_fabric_react_1.Stack, { tokens: tokens.sectionStack },
            React.createElement(office_ui_fabric_react_1.Stack, { tokens: tokens.headingStack },
                React.createElement(office_ui_fabric_react_1.Stack, { tokens: tokens.buttonStack },
                    React.createElement(ButtonStack, null,
                        React.createElement(experiments_1.Button, { content: "Default button", onClick: alertClicked }),
                        React.createElement(experiments_1.Button, { disabled: true, content: "Disabled default button", onClick: alertClicked }),
                        React.createElement(experiments_1.Button, { primary: true, content: "Primary button", onClick: alertClicked }),
                        React.createElement(experiments_1.Button, { primary: true, disabled: true, content: "Disabled primary button", onClick: alertClicked })),
                    React.createElement(ButtonStack, null,
                        React.createElement(experiments_1.Button, { icon: "PeopleAdd", circular: true }),
                        React.createElement(experiments_1.Button, { icon: "Phone", circular: true, disabled: true }),
                        React.createElement(experiments_1.Button, { icon: "FontSize", circular: true, primary: true }),
                        React.createElement(experiments_1.Button, { icon: "Attach", circular: true, primary: true, disabled: true })),
                    React.createElement(ButtonStack, null,
                        React.createElement(experiments_1.Button, { content: "Button as an anchor: Go to Bing", href: "http://bing.com", target: "_blank", title: "Let us bing!" }),
                        React.createElement(experiments_1.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(experiments_1.Button, { icon: "Upload", content: "Button with string icon" }),
                        React.createElement(experiments_1.Button, { icon: { iconName: 'Share' }, content: "Button with iconProps" }),
                        React.createElement(experiments_1.Button, { content: "Button with icon render function", slots: { icon: { render: function () { return React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Download" }); } } } })),
                    React.createElement(ButtonStack, null,
                        React.createElement(experiments_1.Button, null,
                            React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Upload" }),
                            React.createElement(office_ui_fabric_react_1.Text, null, "With custom text/icon")),
                        React.createElement(experiments_1.Button, { primary: true },
                            React.createElement(office_ui_fabric_react_1.Text, null, "With custom text/icon right aligned"),
                            React.createElement(office_ui_fabric_react_1.Icon, { iconName: "Upload" }))),
                    React.createElement(office_ui_fabric_react_1.CommandBar, { items: [{ key: '0', text: 'Button 1', iconProps: { iconName: 'Upload' } }] })))));
    };
    return ButtonExample;
}(React.Component));
exports.ButtonExample = ButtonExample;
//# sourceMappingURL=Button.Example.js.map