office-ui-fabric-react/lib-amd/components/Persona/PersonaPage.js

Reusable React components for building experiences for Office 365.

define(["require", "exports", "tslib", "react", "@uifabric/example-app-base", "./examples/Persona.Initials.Example", "./examples/Persona.Basic.Example", "./examples/Persona.Alternate.Example", "./examples/Persona.CustomRender.Example", "./examples/Persona.CustomCoinRender.Example", "../../demo/ComponentStatus/ComponentStatus", "./Persona.checklist"], function (require, exports, tslib_1, React, example_app_base_1, Persona_Initials_Example_1, Persona_Basic_Example_1, Persona_Alternate_Example_1, Persona_CustomRender_Example_1, Persona_CustomCoinRender_Example_1, ComponentStatus_1, Persona_checklist_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var PersonaInitialsExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx');
    var PersonaBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx');
    var PersonaAlternateExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx');
    var PersonaCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomRender.Example.tsx');
    var PersonaCustomCoinRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx');
    var PersonaPage = /** @class */ (function (_super) {
        tslib_1.__extends(PersonaPage, _super);
        function PersonaPage() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        PersonaPage.prototype.render = function () {
            return (React.createElement(example_app_base_1.ComponentPage, { title: 'Persona', componentName: 'PersonaExample', exampleCards: React.createElement("div", null,
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Persona in various sizes', code: PersonaBasicExampleCode },
                        React.createElement(Persona_Basic_Example_1.PersonaBasicExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Alternative small personas', code: PersonaAlternateExampleCode },
                        React.createElement(Persona_Alternate_Example_1.PersonaAlternateExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Persona with initials', code: PersonaInitialsExampleCode },
                        React.createElement(Persona_Initials_Example_1.PersonaInitialsExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom persona text', code: PersonaCustomRenderExampleCode },
                        React.createElement(Persona_CustomRender_Example_1.PersonaCustomRenderExample, null)),
                    React.createElement(example_app_base_1.ExampleCard, { title: 'Rendering custom coin', code: PersonaCustomCoinRenderExampleCode },
                        React.createElement(Persona_CustomCoinRender_Example_1.PersonaCustomCoinRenderExample, null))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                        require('!raw-loader!office-ui-fabric-react/src/components/Persona/Persona.types.ts')
                    ] }), overview: React.createElement("div", null,
                    React.createElement("p", null, "Personas are used for rendering an individual's avatar and presence. They are used within the PeoplePicker components.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Use Size 24 Persona in text fields in read mode or in experiences such as multi-column list view which need compact Persona representations."),
                        React.createElement("li", null, "Use Size 32 Persona in text fields in edit mode."),
                        React.createElement("li", null, "Use Size 32, Size 40, and Size 48 Personas in menus and list views."),
                        React.createElement("li", null, "Use Size 72 and Size 100 Personas in profile cards and views."))), donts: React.createElement("div", null,
                    React.createElement("ul", null,
                        React.createElement("li", null, "Change the values of the color swatches in high contrast mode. "))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus_1.ComponentStatus, tslib_1.__assign({}, Persona_checklist_1.PersonaStatus)) }));
        };
        return PersonaPage;
    }(React.Component));
    exports.PersonaPage = PersonaPage;
});
//# sourceMappingURL=PersonaPage.js.map