@uifabric/experiments/lib-amd/components/Button/examples/Button.Tokens.Example.js

Experimental React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/experiments", "office-ui-fabric-react"], function (require, exports, tslib_1, React, experiments_1, office_ui_fabric_react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
    var buttonMenu = function (render) { return render(function (MenuType, props) { return React.createElement(MenuType, tslib_1.__assign({}, props, { items: menuItems })); }); };
    var sectionGap = 32;
    var testTheme = office_ui_fabric_react_1.createTheme({
        semanticColors: {
            buttonText: 'red'
        },
        fonts: {
            medium: {
                color: 'purple'
            }
        }
    });
    // tslint:disable:jsx-no-lambda
    var ButtonTokensExample = /** @class */ (function (_super) {
        tslib_1.__extends(ButtonTokensExample, _super);
        function ButtonTokensExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        ButtonTokensExample.prototype.render = function () {
            var ButtonSet = function (props) { return (React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, disableShrink: true, verticalAlign: "center", gap: 8 },
                React.createElement(experiments_1.Button, tslib_1.__assign({}, props)),
                React.createElement(experiments_1.Button, tslib_1.__assign({}, props, { primary: true })),
                React.createElement(experiments_1.Button, tslib_1.__assign({}, props, { disabled: true })),
                React.createElement(experiments_1.Button, tslib_1.__assign({}, props, { tokens: {
                        backgroundColor: 'red',
                        backgroundColorHovered: 'pink',
                        color: 'white',
                        colorHovered: 'white',
                        iconColor: 'white',
                        iconColorHovered: 'white'
                    } })))); };
            var MenuButtonSet = function (props) { return (React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, disableShrink: true, verticalAlign: "center", gap: 8 },
                React.createElement(experiments_1.MenuButton, tslib_1.__assign({}, props)),
                React.createElement(experiments_1.MenuButton, tslib_1.__assign({}, props, { primary: true })),
                React.createElement(experiments_1.MenuButton, tslib_1.__assign({}, props, { disabled: true })),
                React.createElement(experiments_1.MenuButton, tslib_1.__assign({}, props, { tokens: {
                        backgroundColor: 'red',
                        backgroundColorHovered: 'pink',
                        color: 'white',
                        colorHovered: 'white',
                        iconColor: 'white',
                        iconColorHovered: 'white'
                    } })))); };
            return (React.createElement(office_ui_fabric_react_1.Stack, { gap: sectionGap },
                React.createElement(ButtonSet, null),
                React.createElement(ButtonSet, { content: "No Icon" }),
                React.createElement(ButtonSet, { content: React.createElement(office_ui_fabric_react_1.Spinner, null) }),
                React.createElement(ButtonSet, { icon: "upload", content: "Button with Icon" }),
                React.createElement(ButtonSet, { icon: "upload", href: "http://www.microsoft.com", content: "Button with href" }),
                React.createElement(ButtonSet, { circular: true }),
                React.createElement(ButtonSet, { circular: true, icon: "share" }),
                React.createElement(MenuButtonSet, { icon: function (render) { return render(function (IconType, iconProps) { return React.createElement(IconType, tslib_1.__assign({}, iconProps, { iconName: "upload" })); }); }, content: "Menu button with icon", menu: buttonMenu }),
                React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, disableShrink: true, verticalAlign: "center", gap: 8 },
                    React.createElement(experiments_1.Button, { primary: true, icon: "PeopleAdd", content: "Token Function: Red BG, White Text", tokens: function (props, theme) {
                            return props.primary && {
                                backgroundColor: 'red',
                                backgroundColorHovered: 'pink',
                                color: 'white',
                                colorHovered: 'white',
                                iconColor: 'white',
                                iconColorHovered: 'white'
                            };
                        } }),
                    React.createElement(experiments_1.Button, { icon: "PeopleAdd", content: "Token Function: Red Icon (via theme), Purple Text", theme: testTheme, tokens: function (props, theme) { return ({
                            color: theme.fonts.medium.color
                        }); } }))));
        };
        return ButtonTokensExample;
    }(React.Component));
    exports.ButtonTokensExample = ButtonTokensExample;
});
//# sourceMappingURL=Button.Tokens.Example.js.map