"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 Link_1 = require("office-ui-fabric-react/lib/Link");
var Modal_Basic_Example_1 = require("./examples/Modal.Basic.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Modal_checklist_1 = require("./Modal.checklist");
var ModalBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Modal/examples/Modal.Basic.Example.tsx');
var ModalPage = (function (_super) {
    tslib_1.__extends(ModalPage, _super);
    function ModalPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ModalPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Modal', componentName: 'ModalExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'Modal', code: ModalBasicExampleCode },
                    React.createElement(Modal_Basic_Example_1.ModalBasicExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Modal/Modal.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "Modals are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input, or can be used to advertise new app features. In some cases, Modals block interactions with the web page or application until being explicitly dismissed. They are can be used for lightweight creation or edit tasks and simple management tasks, or for hosting heavier temporary content."),
                React.createElement("p", null,
                    "For usage requiring a quick choice from the user, ",
                    React.createElement(Link_1.Link, { href: '#/components/dialog' }, "Dialog"),
                    " may be a more appropriate control.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use Modals for actionable interactions, such as needing the user to provide information or change settings."),
                    React.createElement("li", null, "When possible, try a non-blocking Modal before resorting to a blocking Modal."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don\u2019t overuse Modals. In some cases they can be perceived as interrupting workflow, and too many can be a bad user experience."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Modal_checklist_1.ModalStatus)) }));
    };
    return ModalPage;
}(React.Component));
exports.ModalPage = ModalPage;
//# sourceMappingURL=ModalPage.js.map