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

Experimental React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { Button, MenuButton } from '@uifabric/experiments';
import { createTheme, Spinner, Stack } from 'office-ui-fabric-react';
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 = 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(Stack, { horizontal: true, disableShrink: true, verticalAlign: "center", gap: 8 },
            React.createElement(Button, tslib_1.__assign({}, props)),
            React.createElement(Button, tslib_1.__assign({}, props, { primary: true })),
            React.createElement(Button, tslib_1.__assign({}, props, { disabled: true })),
            React.createElement(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(Stack, { horizontal: true, disableShrink: true, verticalAlign: "center", gap: 8 },
            React.createElement(MenuButton, tslib_1.__assign({}, props)),
            React.createElement(MenuButton, tslib_1.__assign({}, props, { primary: true })),
            React.createElement(MenuButton, tslib_1.__assign({}, props, { disabled: true })),
            React.createElement(MenuButton, tslib_1.__assign({}, props, { tokens: {
                    backgroundColor: 'red',
                    backgroundColorHovered: 'pink',
                    color: 'white',
                    colorHovered: 'white',
                    iconColor: 'white',
                    iconColorHovered: 'white'
                } })))); };
        return (React.createElement(Stack, { gap: sectionGap },
            React.createElement(ButtonSet, null),
            React.createElement(ButtonSet, { content: "No Icon" }),
            React.createElement(ButtonSet, { content: React.createElement(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(Stack, { horizontal: true, disableShrink: true, verticalAlign: "center", gap: 8 },
                React.createElement(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(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));
export { ButtonTokensExample };
//# sourceMappingURL=Button.Tokens.Example.js.map