"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_Basic_Example_1 = require("./examples/Link.Basic.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Link_checklist_1 = require("./Link.checklist");
var LinkBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx');
var LinkPage = /** @class */ (function (_super) {
    tslib_1.__extends(LinkPage, _super);
    function LinkPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    LinkPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Link', componentName: 'LinkExample', exampleCards: React.createElement(example_app_base_1.ExampleCard, { title: 'Link', code: LinkBasicExampleCode },
                React.createElement(Link_Basic_Example_1.LinkBasicExample, null)), allowNativeProps: true, nativePropsElement: ['a', 'button'], propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Link/Link.types.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter."),
                React.createElement("p", null, "A Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use to navigate to another page, window, or help topic; display a definition; initiate a command; or choose an option."),
                    React.createElement("li", null, "Make Links discoverable by visual inspection alone. Users shouldn't have to interact with your program to find links."),
                    React.createElement("li", null, "Use Links that give specific descriptive information about the result of clicking on the link, using as much text as necessary. Users should be able to accurately predict the result of a link from its link text and optional Tooltip."),
                    React.createElement("li", null, "Use text that suggests clicking, such as a command starting with an imperative verb like \"Show\", \"Print\", \"Copy\", or \"Delete\"."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use if the action is destructive or irreversible. Because users associate links with navigation (and the ability to back out), Links aren't appropriate for commands with significant consequences."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Link_checklist_1.LinkStatus)) }));
    };
    return LinkPage;
}(React.Component));
exports.LinkPage = LinkPage;
//# sourceMappingURL=LinkPage.js.map