"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var example_app_base_1 = require("@uifabric/example-app-base");
var Button_checklist_1 = require("./Button.checklist");
var Button_Default_Example_1 = require("./examples/Button.Default.Example");
var Button_ContextualMenu_Example_1 = require("./examples/Button.ContextualMenu.Example");
var Button_Compound_Example_1 = require("./examples/Button.Compound.Example");
var Button_Action_Example_1 = require("./examples/Button.Action.Example");
var Button_CommandBar_Example_1 = require("./examples/Button.CommandBar.Example");
var Button_Icon_Example_1 = require("./examples/Button.Icon.Example");
var Button_Anchor_Example_1 = require("./examples/Button.Anchor.Example");
var Button_ScreenReader_Example_1 = require("./examples/Button.ScreenReader.Example");
var Button_Swap_Example_1 = require("./examples/Button.Swap.Example");
var Button_Split_Example_1 = require("./examples/Button.Split.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var exampleStylesImport = require("../../common/_exampleStyles.scss");
var exampleStyles = exampleStylesImport;
var ButtonDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx');
var ButtonCompoundExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx');
var ButtonActionExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx');
var ButtonCommandBarExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx');
var ButtonIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx');
var ButtonAnchorExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx');
var ButtonScreenReaderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx');
var ButtonContextualMenuExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx');
var ButtonSwapExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx');
var ButtonSplitExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx');
var ButtonPage = /** @class */ (function (_super) {
    tslib_1.__extends(ButtonPage, _super);
    function ButtonPage(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            areButtonsDisabled: false,
            areButtonsChecked: false
        };
        return _this;
    }
    ButtonPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: "Button", componentName: "ButtonExample", componentUrl: "https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/Button", exampleCards: React.createElement("div", null,
                React.createElement(Checkbox_1.Checkbox, { className: exampleStyles.exampleCheckbox, label: "Disable buttons", checked: this.state.areButtonsDisabled, onChange: this._onDisabledChanged.bind(this) }),
                React.createElement(Checkbox_1.Checkbox, { className: exampleStyles.exampleCheckbox, label: "Mark as checked", checked: this.state.areButtonsChecked, onChange: this._onToggledChanged.bind(this) }),
                React.createElement(example_app_base_1.ExampleCard, { title: "Default Button", code: ButtonDefaultExampleCode },
                    React.createElement(Button_Default_Example_1.ButtonDefaultExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Compound Button", code: ButtonCompoundExampleCode },
                    React.createElement(Button_Compound_Example_1.ButtonCompoundExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Command Bar Button", code: ButtonCommandBarExampleCode },
                    React.createElement(Button_CommandBar_Example_1.ButtonCommandBarExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Split Button", code: ButtonSplitExampleCode },
                    React.createElement(Button_Split_Example_1.ButtonSplitExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Icon Button", code: ButtonIconExampleCode },
                    React.createElement(Button_Icon_Example_1.ButtonIconExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Contextual Menu Button", code: ButtonContextualMenuExampleCode },
                    React.createElement(Button_ContextualMenu_Example_1.ButtonContextualMenuExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Action Button", code: ButtonActionExampleCode },
                    React.createElement(Button_Action_Example_1.ButtonActionExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked }))), implementationExampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: "Button Like Anchor", code: ButtonAnchorExampleCode },
                    React.createElement(Button_Anchor_Example_1.ButtonAnchorExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Button with Aria Description for Screen Reader", code: ButtonScreenReaderExampleCode },
                    React.createElement(Button_ScreenReader_Example_1.ButtonScreenReaderExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Button Swap with Focus State", code: ButtonSwapExampleCode },
                    React.createElement(Button_Swap_Example_1.ButtonSwapExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked })),
                React.createElement(example_app_base_1.ExampleCard, { title: "Custom Split Button", code: ButtonSplitExampleCode },
                    React.createElement(Button_Split_Example_1.ButtonSplitCustomExample, { disabled: this.state.areButtonsDisabled, checked: this.state.areButtonsChecked }))), allowNativeProps: true, nativePropsElement: ['a', 'button'], propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [require('!raw-loader!office-ui-fabric-react/src/components/Button/Button.types.ts')] }), overview: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonOverview.md')), bestPractices: React.createElement("div", null), dos: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonDos.md')), donts: React.createElement(example_app_base_1.PageMarkdown, null, require('!raw-loader!office-ui-fabric-react/src/components/Button/docs/ButtonDonts.md')), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Button_checklist_1.ButtonStatus)) }));
    };
    ButtonPage.prototype._onDisabledChanged = function (ev, disabled) {
        this.setState({
            areButtonsDisabled: disabled
        });
    };
    ButtonPage.prototype._onToggledChanged = function (ev, toggled) {
        this.setState({
            areButtonsChecked: toggled
        });
    };
    return ButtonPage;
}(React.Component));
exports.ButtonPage = ButtonPage;
//# sourceMappingURL=ButtonPage.js.map