"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");
require("./ImagePage.scss");
var Image_Default_Example_1 = require("./examples/Image.Default.Example");
var Image_Center_Example_1 = require("./examples/Image.Center.Example");
var Image_Contain_Example_1 = require("./examples/Image.Contain.Example");
var Image_Cover_Example_1 = require("./examples/Image.Cover.Example");
var Image_None_Example_1 = require("./examples/Image.None.Example");
var Image_MaximizeFrame_Example_1 = require("./examples/Image.MaximizeFrame.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var Image_checklist_1 = require("./Image.checklist");
var ImageDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Default.Example.tsx');
var ImageCenterExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx');
var ImageContainExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx');
var ImageCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx');
var ImageNoneExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx');
var ImageMaximizeFrameExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx');
var ImagePage = (function (_super) {
    tslib_1.__extends(ImagePage, _super);
    function ImagePage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ImagePage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'Image', componentName: 'ImageExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Not specified', code: ImageDefaultExampleCode },
                    React.createElement(Image_Default_Example_1.ImageDefaultExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: None', code: ImageNoneExampleCode },
                    React.createElement(Image_None_Example_1.ImageNoneExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Center', code: ImageCenterExampleCode },
                    React.createElement(Image_Center_Example_1.ImageCenterExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Contain', code: ImageContainExampleCode },
                    React.createElement(Image_Contain_Example_1.ImageContainExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'ImageFit: Cover', code: ImageCoverExampleCode },
                    React.createElement(Image_Cover_Example_1.ImageCoverExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'Maximizing the image frame', code: ImageMaximizeFrameExampleCode },
                    React.createElement(Image_MaximizeFrame_Example_1.ImageMaximizeFrameExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Image/Image.Props.ts')
                ] }), overview: React.createElement("div", null, "Images render an image. The borders have been added to these examples in order to help visualize empty space in the image frame."), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null,
                        "Provide descriptive values for the alt text attribute for all images. If alt text isn't provided for images, the image information is inaccessible, for example, to people who cannot see and use a screen reader that reads aloud the information on a page.",
                        React.createElement("ul", null,
                            React.createElement("li", null, "Consider context. If the image represents a function, be sure to indicate that. If it is to be consumed with other objects on the page, consider that as well."),
                            React.createElement("li", null, "Make the description brief but accurate. Use one sentence, two at the most."))))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Repeat information in your alt text that is already on the page. Don't use \"image of\" or \"graphic of\" to describe it, as that is already apparent to the reader."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Image_checklist_1.ImageStatus)) }));
    };
    return ImagePage;
}(React.Component));
exports.ImagePage = ImagePage;
//# sourceMappingURL=ImagePage.js.map