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

Reusable React components for building experiences for Office 365.

"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 Persona_Initials_Example_1 = require("./examples/Persona.Initials.Example");
var Persona_Basic_Example_1 = require("./examples/Persona.Basic.Example");
var Persona_Alternate_Example_1 = require("./examples/Persona.Alternate.Example");
var Persona_CustomRender_Example_1 = require("./examples/Persona.CustomRender.Example");
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 PersonaPage = (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 in 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))), propertiesTables: React.createElement(example_app_base_1.PropertiesTableSet, { sources: [
                    require('!raw-loader!office-ui-fabric-react/src/components/Persona/Persona.Props.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 XXS size 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 XS size Persona in text fields in edit mode."),
                    React.createElement("li", null, "Use XS, S and M size Personas in menus and list views."),
                    React.createElement("li", null, "Use L and XXL size 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. "))), related: React.createElement("a", { href: 'https://dev.office.com/fabric-js/Components/Persona/Persona.html' }, "Fabric JS"), isHeaderVisible: this.props.isHeaderVisible }));
    };
    return PersonaPage;
}(React.Component));
exports.PersonaPage = PersonaPage;

//# sourceMappingURL=PersonaPage.js.map