"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 Checkbox_Basic_Example_1 = require("./examples/Checkbox.Basic.Example");
var Checkbox_ImplementationExamples_1 = require("./examples/Checkbox.ImplementationExamples");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Checkbox_checklist_1 = require("./Checkbox.checklist");
var CheckboxBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx');
var CheckboxImplementationExamplesCode = require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx');
var CheckboxPage = (function (_super) {
    tslib_1.__extends(CheckboxPage, _super);
    function CheckboxPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CheckboxPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Checkbox', componentName: 'CheckboxExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'Default Checkbox', code: CheckboxBasicExampleCode },
                    React.createElement(Checkbox_Basic_Example_1.CheckboxBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Implementation Examples', code: CheckboxImplementationExamplesCode },
                    React.createElement(Checkbox_ImplementationExamples_1.CheckboxImplementationExamples, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Checkbox/Checkbox.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control."),
                React.createElement("p", null, "A Checkbox is used to select or deselect action items. It can be used for a single item or for a list of multiple items that a user can choose from. The control has two selection states: unselected and selected."),
                React.createElement("p", null, "Use a single Checkbox for a subordinate setting, such as with a \"Remember me?\" login scenario or with a terms of service agreement."),
                React.createElement("p", null, "For a binary choice, the main difference between a Checkbox and a toggle switch is that the Checkbox is for status and the toggle switch is for action. You can delay committing a Checkbox interaction (as part of a form submit, for example), while you should immediately commit a toggle switch interaction. Also, only Checkboxes allow for multi-selection."),
                React.createElement("p", null, "Use multiple Checkboxes for multi-select scenarios in which a user chooses one or more items from a group of choices that are not mutually exclusive.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Allow users to choose any combination of options when several Checkboxes are grouped together."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don't use a Checkbox as an on/off control. Instead use a toggle switch."),
                    React.createElement("li", null, "Don\u2019t use a Checkbox when the user can choose only one option from the group, use radio buttons instead."),
                    React.createElement("li", null, "Don't put two groups of Checkboxes next to each other. Separate the two groups with labels."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Checkbox_checklist_1.CheckboxStatus)) }));
    };
    return CheckboxPage;
}(React.Component));
exports.CheckboxPage = CheckboxPage;
//# sourceMappingURL=CheckboxPage.js.map