"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 Label_Basic_Example_1 = require("./examples/Label.Basic.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Label_checklist_1 = require("./Label.checklist");
var LabelBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Label/examples/Label.Basic.Example.tsx');
var LabelPage = /** @class */ (function (_super) {
    tslib_1.__extends(LabelPage, _super);
    function LabelPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    LabelPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Label', componentName: 'LabelExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Label', code: LabelBasicExampleCode },
                React.createElement(Label_Basic_Example_1.LabelBasicExample, null)), allowNativeProps: true, propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Label/Label.types.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "Labels give a name or title to a component or group of components. Labels should be in close proximity to the component or group they are paired with. Some components, such as TextField, Dropdown, or Toggle, already have Labels incorporated, but other components may optionally add a Label if it helps inform the user of the component\u2019s purpose.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use sentence casing, e.g. \u201CFirst name\u201D."),
                    React.createElement("li", null, "Be short and concise."),
                    React.createElement("li", null, "When adding a Label to components, use the text as a noun or short noun phrase."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use Labels as instructional text, e.g. \u201CClick to get started\u201D."),
                    React.createElement("li", null, "Don\u2019t use full sentences or complex punctuation (colons, semicolons, etc.)."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Label_checklist_1.LabelStatus)) }));
    };
    return LabelPage;
}(React.Component));
exports.LabelPage = LabelPage;
//# sourceMappingURL=LabelPage.js.map