"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 TextField_Basic_Example_1 = require("./examples/TextField.Basic.Example");
var TextField_CustomRender_Example_1 = require("./examples/TextField.CustomRender.Example");
var TextField_Placeholder_Example_1 = require("./examples/TextField.Placeholder.Example");
var TextField_Multiline_Example_1 = require("./examples/TextField.Multiline.Example");
var TextField_Underlined_Example_1 = require("./examples/TextField.Underlined.Example");
var TextField_Borderless_Example_1 = require("./examples/TextField.Borderless.Example");
var TextField_ErrorMessage_Example_1 = require("./examples/TextField.ErrorMessage.Example");
var TextField_ImplementationExamples_1 = require("./examples/TextField.ImplementationExamples");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var TextField_checklist_1 = require("./TextField.checklist");
var TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx');
var TextFieldCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx');
var TextFieldPlaceholderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx');
var TextFieldMultilineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx');
var TextFieldUnderlinedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx');
var TextFieldBorderlessExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx');
var TextFieldErrorMessageExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx');
var TextFieldImplementationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.ImplementationExamples.tsx');
var TextFieldPage = (function (_super) {
    tslib_1.__extends(TextFieldPage, _super);
    function TextFieldPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    TextFieldPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'TextField', componentName: 'TextFieldExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'Default TextField with Label', code: TextFieldBasicExampleCode },
                    React.createElement(TextField_Basic_Example_1.TextFieldBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'TextField with Placeholder', code: TextFieldPlaceholderExampleCode },
                    React.createElement(TextField_Placeholder_Example_1.TextFieldPlaceholderExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Multiline TextField', code: TextFieldMultilineExampleCode },
                    React.createElement(TextField_Multiline_Example_1.TextFieldMultilineExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Underlined TextField', code: TextFieldUnderlinedExampleCode },
                    React.createElement(TextField_Underlined_Example_1.TextFieldUnderlinedExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Borderless TextField', code: TextFieldBorderlessExampleCode },
                    React.createElement(TextField_Borderless_Example_1.TextFieldBorderlessExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'TextField error message variations', code: TextFieldErrorMessageExampleCode },
                    React.createElement(TextField_ErrorMessage_Example_1.TextFieldErrorMessageExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'TextField with custom Label', code: TextFieldCustomRenderExampleCode },
                    React.createElement(TextField_CustomRender_Example_1.TextFieldCustomRenderExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Implementation Examples', code: TextFieldImplementationExampleCode },
                    React.createElement(TextField_ImplementationExamples_1.TextFieldImplementationExamples, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use the TextField to accept data input on a form or page."),
                    React.createElement("li", null, "Label the TextField with a helpful name. "),
                    React.createElement("li", null, "Provide concise helper text that specifies what content is expected to be entered."),
                    React.createElement("li", null, "Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error)."),
                    React.createElement("li", null, "When part of a form, provide clear designations for which fields are required vs. optional."),
                    React.createElement("li", null, "Provide all appropriate methods for submitting provided data (onEnter or a dedicated \u2018Submit\u2019 button)."),
                    React.createElement("li", null, "Provide all appropriate methods of clearing provided data (\u2018X\u2019 or something similar)."),
                    React.createElement("li", null, "Allow for selection, copy and paste of field data."),
                    React.createElement("li", null, "Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc)."),
                    React.createElement("li", null, "When long entries are expected, provide a mechanism for overflow or expansion of the control itself."),
                    React.createElement("li", null, "Ensure that the TextField is functional through use of mouse/keyboard or touch when available."),
                    React.createElement("li", null, "Ensure that the TextField is accessible through screen reader and/or other accessibility tools."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don\u2019t use a TextField to render basic copy as part of a body element of a page."),
                    React.createElement("li", null, "Don\u2019t provide an unlabeled TextField and expect that users will know what to do with it."),
                    React.createElement("li", null, "Don\u2019t place a TextField inline with body copy.  "),
                    React.createElement("li", null, "Don\u2019t be overly verbose with helper text."),
                    React.createElement("li", null, "Don\u2019t occlude the entry or allow entry when the active content is not visible."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, TextField_checklist_1.TextFieldStatus)) }));
    };
    return TextFieldPage;
}(React.Component));
exports.TextFieldPage = TextFieldPage;
//# sourceMappingURL=TextFieldPage.js.map