import { __extends } from "tslib";
import * as React from 'react';
import { Button, MenuButton } from '@uifabric/experiments';
import { createTheme, mergeStyles, Stack } from 'office-ui-fabric-react';
var testTheme = createTheme({
    semanticColors: {
        buttonText: '#E20000',
    },
    fonts: {
        medium: {
            color: 'purple',
        },
    },
});
var tokens = {
    sectionStack: {
        childrenGap: 32,
    },
    headingStack: {
        childrenGap: 16,
        padding: 8,
    },
    buttonStack: {
        childrenGap: 12,
    },
};
var menuProps = {
    items: [
        {
            key: 'a',
            name: 'Item a',
        },
        {
            key: 'b',
            name: 'Item b',
        },
    ],
};
var ButtonStack = function (props) { return (React.createElement(Stack, { horizontal: true, disableShrink: true, tokens: tokens.buttonStack }, props.children)); };
/* eslint-disable react/jsx-no-bind */
var ButtonStylesExample = /** @class */ (function (_super) {
    __extends(ButtonStylesExample, _super);
    function ButtonStylesExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ButtonStylesExample.prototype.render = function () {
        var testClassName = mergeStyles({ color: 'blue' });
        return (React.createElement(Stack, { tokens: tokens.sectionStack },
            React.createElement(Stack, { tokens: tokens.headingStack },
                React.createElement("div", null,
                    React.createElement(Stack, { tokens: tokens.buttonStack },
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", content: "Button Theme: Red Icon and Text", theme: testTheme }),
                            React.createElement(Button, { icon: "PeopleAdd", content: { children: 'Slot Theme: Purple Text', theme: testTheme } })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Object: Red Text (root)", styles: { root: { color: '#E20000' } } }),
                            React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Object: Red Text (content)", styles: { content: { color: '#E20000' } } })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Object: Pink Icon", styles: { icon: { color: 'pink ' } } }),
                            React.createElement(Button, { icon: { iconName: 'PeopleAdd', style: { color: 'pink ' } }, content: "Icon Style Object: Pink Icon" })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Function: Golden Brown Content", styles: function (props, theme) { return ({ content: { color: '#8F6800' } }); } })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Function: Purple Icon via Button Theme", styles: function (props, theme) { return ({ icon: { color: theme.fonts.medium.color } }); }, theme: testTheme })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", content: {
                                    children: 'Content Styles Function: Golden Brown Text',
                                    styles: function (props, theme) { return ({ root: { color: '#8F6800' } }); },
                                } })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", content: {
                                    children: 'Content Styles Function: Red Text via Content Theme',
                                    styles: function (props, theme) { return ({ root: { color: theme.semanticColors.buttonText } }); },
                                    theme: testTheme,
                                } })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { content: "Button Classname", className: "button-classname" }),
                            React.createElement(Button, { content: "Icon Classname", icon: {
                                    iconName: 'PeopleAdd',
                                    className: 'icon-classname',
                                } }),
                            React.createElement(Button, { content: {
                                    children: 'Content Classname',
                                    className: 'content-classname',
                                } }),
                            React.createElement(MenuButton, { content: "All Classnames", icon: "PeopleAdd", menu: menuProps, styles: {
                                    root: 'root-classname',
                                    content: 'content-classname',
                                    icon: 'icon-classname',
                                    menu: 'menu-classname',
                                    menuIcon: 'menuIcon-classname',
                                } })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { content: "Icon ClassName Overrides Button Styles: Blue Icon", styles: {
                                    icon: {
                                        color: '#E20000',
                                    },
                                }, icon: {
                                    iconName: 'PeopleAdd',
                                    className: testClassName,
                                } })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { icon: "PeopleAdd", content: {
                                    children: 'Text ClassName: Blue Text',
                                    className: testClassName,
                                } }),
                            React.createElement(Button, { icon: "PeopleAdd", content: {
                                    children: 'Text Styles Overrides ClassName: Red Text',
                                    styles: { root: { color: '#E20000' } },
                                    className: testClassName,
                                } })),
                        React.createElement(ButtonStack, null,
                            React.createElement(Button, { content: "Icon ClassName: Blue Icon", icon: {
                                    iconName: 'PeopleAdd',
                                    className: testClassName,
                                } }),
                            React.createElement(Button, { content: "Icon Style Overrides ClassName: Red Icon", icon: {
                                    iconName: 'PeopleAdd',
                                    style: { color: '#E20000' },
                                    className: testClassName,
                                } })))))));
    };
    return ButtonStylesExample;
}(React.Component));
export { ButtonStylesExample };
//# sourceMappingURL=Button.Styles.Example.js.map