"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 DocumentCard_Basic_Example_1 = require("./examples/DocumentCard.Basic.Example");
var DocumentCard_Complete_Example_1 = require("./examples/DocumentCard.Complete.Example");
var DocumentCard_Compact_Example_1 = require("./examples/DocumentCard.Compact.Example");
var ComponentStatus_1 = require("../../demo/ComponentStatus/ComponentStatus");
var DocumentCard_checklist_1 = require("./DocumentCard.checklist");
var DocumentCardBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx');
var DocumentCardCompleteExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx');
var DocumentCardCompactExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx');
var DocumentCardPage = (function (_super) {
    tslib_1.__extends(DocumentCardPage, _super);
    function DocumentCardPage() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    DocumentCardPage.prototype.render = function () {
        return (React.createElement(example_app_base_1.ComponentPage, { title: 'DocumentCard', componentName: 'DocumentCardExample', exampleCards: React.createElement("div", null,
                React.createElement(example_app_base_1.ExampleCard, { title: 'Default DocumentCard', code: DocumentCardBasicExampleCode },
                    React.createElement("p", null, "The default configuration for a card represents a single file, with space to denote the last significant event and the person involved."),
                    React.createElement(DocumentCard_Basic_Example_1.DocumentCardBasicExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'DocumentCard with multiple items, commands, and views', code: DocumentCardCompleteExampleCode },
                    React.createElement("p", null, "This example shows a couple of optional abilities, including being able to have a card represent multiple items, being able to expose up to three relevant commands, and showing the number of views in the bottom right corner."),
                    React.createElement(DocumentCard_Complete_Example_1.DocumentCardCompleteExample, null)),
                React.createElement(example_app_base_1.ExampleCard, { title: 'DocumentCard with compact layout ', code: DocumentCardCompactExampleCode },
                    React.createElement("p", null, "When showing a card on a mobile device or a similarly narrow layout, you may choose this Compact layout which helps the filename remain scannable while giving roomy space for a preview thumbnail."),
                    React.createElement(DocumentCard_Compact_Example_1.DocumentCardCompactExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/DocumentCard/DocumentCard.Props.ts')
                ] }), overview: React.createElement("div", null,
                React.createElement("p", null, "A DocumentCard is a card representation of a file. This is usually richer than just seeing the file in a grid view, as the card can contain additional metadata or actions.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Use this control to represent Office documents or other user-relevant files in aggregate views, such as when you are showing the user\u2019s most trending document."),
                    React.createElement("li", null, "Incorporate metadata that is relevant and useful in this particular view. A card can be specialized to be about the document\u2019s latest changes, or about the document\u2019s popularity, as you see fit."),
                    React.createElement("li", null, "Use the DocumentCard when you are illustrating an event that encompasses multiple files. For example, a card can be configured to represent a single upload action that consisted in adding more than one file."))), donts: React.createElement("div", null,
                React.createElement("ul", null,
                    React.createElement("li", null, "Don\u2019t use the DocumentCard in views where the user is likely to be performing bulk operations in files, or when the list may get very long. Specifically, if you are showing all the items inside an actual folder, a card may be overkill because the majority of the items in the folder may not have interesting metadata."),
                    React.createElement("li", null, "Don\u2019t use the DocumentCard if space is at a premium or you can\u2019t show relevant and timely commands or metadata. Cards are useful because they can expose on-item interactions like \u201CShare\u201D buttons or view counts. If your app does not need this, show a simple grid or list of items instead, which are easier to scan."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, DocumentCard_checklist_1.DocumentCardStatus)) }));
    };
    return DocumentCardPage;
}(React.Component));
exports.DocumentCardPage = DocumentCardPage;
//# sourceMappingURL=DocumentCardPage.js.map