"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 ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Breadcrumb_checklist_1 = require("./Breadcrumb.checklist");
var Breadcrumb_Basic_Example_1 = require("./examples/Breadcrumb.Basic.Example");
var Breadcrumb_Static_Example_1 = require("./examples/Breadcrumb.Static.Example");
var BreadcrumbBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Basic.Example.tsx');
var BreadcrumbStaticExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/examples/Breadcrumb.Static.Example.tsx');
var BreadcrumbPage = (function (_super) {
    tslib_1.__extends(BreadcrumbPage, _super);
    function BreadcrumbPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    BreadcrumbPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Breadcrumb', componentName: 'BreadcrumbExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'Default Breadcrumb', code: BreadcrumbBasicExampleCode },
                    React.createElement(Breadcrumb_Basic_Example_1.BreadcrumbBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Breadcrumb with static width ', code: BreadcrumbStaticExampleCode },
                    React.createElement(Breadcrumb_Static_Example_1.BreadcrumbStaticExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy. They also afford one-click access to higher levels of that hierarchy."),
                React.createElement("p", null, "Breadcrumbs are typically placed, in horizontal form, under the masthead or navigation of an experience, above the primary content area.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Place Breadcrumbs at the top of a page, above a list of items, or above the main content of a page."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don't use Breadcrumbs as a primary way to navigate an app or site."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Breadcrumb_checklist_1.BreadcrumbStatus)) }));
    };
    return BreadcrumbPage;
}(React.Component));
exports.BreadcrumbPage = BreadcrumbPage;
//# sourceMappingURL=BreadcrumbPage.js.map