"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 ChoiceGroup_Basic_Example_1 = require("./examples/ChoiceGroup.Basic.Example");
var ChoiceGroup_Custom_Example_1 = require("./examples/ChoiceGroup.Custom.Example");
var ChoiceGroup_Image_Example_1 = require("./examples/ChoiceGroup.Image.Example");
var ChoiceGroup_Icon_Example_1 = require("./examples/ChoiceGroup.Icon.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var ChoiceGroup_checklist_1 = require("./ChoiceGroup.checklist");
var ChoiceGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx');
var ChoiceGroupCustomExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Custom.Example.tsx');
var ChoiceGroupImageExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Image.Example.tsx');
var ChoiceGroupIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Icon.Example.tsx');
var ChoiceGroupPage = (function (_super) {
    tslib_1.__extends(ChoiceGroupPage, _super);
    function ChoiceGroupPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ChoiceGroupPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'ChoiceGroup', componentName: 'ChoiceGroupExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'Default ChoiceGroup', code: ChoiceGroupBasicExampleCode },
                    React.createElement(ChoiceGroup_Basic_Example_1.ChoiceGroupBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroup with dropdown', code: ChoiceGroupCustomExampleCode },
                    React.createElement(ChoiceGroup_Custom_Example_1.ChoiceGroupCustomExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroups with images', code: ChoiceGroupImageExampleCode },
                    React.createElement(ChoiceGroup_Image_Example_1.ChoiceGroupImageExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'ChoiceGroup with icons', code: ChoiceGroupIconExampleCode },
                    React.createElement(ChoiceGroup_Icon_Example_1.ChoiceGroupIconExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "The ChoiceGroup component, also known as radio buttons, let users select one option from two or more choices. Each option is represented by one ChoiceGroup button; a user can select only one ChoiceGroup in a button group."),
                React.createElement("p", null, "ChoiceGroup emphasize all options equally, and that may draw more attention to the options than necessary. Consider using other controls, unless the options deserve extra attention from the user. For example, if the default option is recommended for most users in most situations, use a Dropdown component instead."),
                React.createElement("p", null, "If there are only two mutually exclusive options, combine them into a single Checkbox or Toggle switch. For example, use a Checkbox for \"I agree\" instead of ChoiceGroup buttons for \"I agree\" and \"I don't agree.\"")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use when there are 2-7 options, if you have enough screen space and the options are important enough to be a good use of that screen space. Otherwise, use a Checkbox or Dropdown list. "),
                    React.createElement("li", null, "Use on wizard pages to make the alternatives clear, even if a Checkbox is otherwise acceptable."),
                    React.createElement("li", null, "List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable."),
                    React.createElement("li", null, "If none of the options is a valid choice, add another option to reflect this choice, such as \"None\" or \"Does not apply\"."),
                    React.createElement("li", null, "Select the safest (to prevent loss of data or system access) and most secure and private option as the default. If safety and security aren't factors, select the most likely or convenient option."),
                    React.createElement("li", null, "Align radio buttons vertically instead of horizontally, if possible. Horizontal alignment is harder to read and localize."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use when the options are numbers that have fixed steps, like 10, 20, 30. Use a Slider component instead."),
                    React.createElement("li", null, "Use if there are more than 7 options, use a Dropdown instead."),
                    React.createElement("li", null, "Nest with other ChoiceGroup or CheckBoxes. If possible, keep all the options at the same level."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, ChoiceGroup_checklist_1.ChoiceGroupStatus)) }));
    };
    return ChoiceGroupPage;
}(React.Component));
exports.ChoiceGroupPage = ChoiceGroupPage;
//# sourceMappingURL=ChoiceGroupPage.js.map