"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var TestImages_1 = require("@uifabric/experiments/lib-commonjs/common/TestImages");
var styling_1 = require("@uifabric/styling");
var experiments_1 = require("@uifabric/experiments");
var tokens = {
    sectionStack: {
        childrenGap: 32,
    },
    headingStack: {
        childrenGap: 16,
    },
    personaCoinStack: {
        childrenGap: 12,
    },
};
var verticalPersonaStackClassName = styling_1.mergeStyles({ display: 'flex', flexDirection: 'row' });
var VerticalPersonaStack = function (props) { return (React.createElement("div", { className: verticalPersonaStackClassName }, props.children)); };
var VerticalPersonaExample = /** @class */ (function (_super) {
    tslib_1.__extends(VerticalPersonaExample, _super);
    function VerticalPersonaExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    VerticalPersonaExample.prototype.render = function () {
        return (React.createElement(office_ui_fabric_react_1.Stack, { tokens: tokens.sectionStack },
            React.createElement(office_ui_fabric_react_1.Stack, { tokens: tokens.headingStack, padding: 8 },
                React.createElement(office_ui_fabric_react_1.Stack, { tokens: tokens.personaCoinStack },
                    React.createElement(office_ui_fabric_react_1.Text, null, "Basic Usage"),
                    React.createElement(VerticalPersonaStack, null,
                        React.createElement(experiments_1.Persona, { vertical: true, text: "Sukhnam Chander", secondaryText: "Principal Program manager" }),
                        React.createElement(experiments_1.Persona, { vertical: true, text: "Kevin Jameson", secondaryText: "Professional traveller" }),
                        React.createElement(experiments_1.Persona, { vertical: true, text: "\u738B\u529B", secondaryText: "Principal Program manager" }),
                        React.createElement(experiments_1.Persona, { vertical: true, text: "Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.", coin: { imageUrl: TestImages_1.PersonaTestImages.personMale } }),
                        React.createElement(experiments_1.Persona, { vertical: true, text: "Christian Duncan Claude Sandra Alvin Matilde Eriksson", secondaryText: "Director of global strategy management for the entire worldwide organization", coin: { imageUrl: TestImages_1.PersonaTestImages.personMale } }))),
                React.createElement(office_ui_fabric_react_1.Stack, { tokens: tokens.personaCoinStack },
                    React.createElement(office_ui_fabric_react_1.Text, null, "When passing coinProps"),
                    React.createElement(VerticalPersonaStack, null,
                        React.createElement(experiments_1.Persona, { vertical: true, text: "Eline Page", secondaryText: "eSports commentator", coin: { presence: 4 } }),
                        React.createElement(experiments_1.Persona, { vertical: true, text: "\u8D75\u4E3D\u9896", coin: { imageUrl: TestImages_1.PersonaTestImages.personFemale } }),
                        React.createElement(experiments_1.Persona, { vertical: true, text: "Kevin Jameson", coin: { imageUrl: TestImages_1.PersonaTestImages.personMale } }))),
                React.createElement(office_ui_fabric_react_1.Stack, { tokens: tokens.personaCoinStack },
                    React.createElement(office_ui_fabric_react_1.Text, null, "Tokens!"),
                    React.createElement(VerticalPersonaStack, null,
                        React.createElement(experiments_1.Persona, { vertical: true, text: "Sukhnam Chander", secondaryText: "Principal Program manager", tokens: {
                                verticalPersonaWidth: 200,
                                fontFamily: 'cursive',
                                horizontalTextPadding: 10,
                                primaryTextPaddingTop: '20px',
                                primaryTextFontSize: '22px',
                                primaryTextFontWeight: 800,
                                secondaryTextFontSize: '18px',
                                secondaryTextPaddingTop: '12px',
                            } }),
                        React.createElement(experiments_1.Persona, { vertical: true, text: "Kevin Jameson", secondaryText: "Professional traveller", tokens: { fontFamily: 'monospace' } }),
                        React.createElement(experiments_1.Persona, { vertical: true, text: "\u738B\u529B", secondaryText: "Principal Program manager", tokens: { primaryTextFontWeight: 100, secondaryTextFontSize: '20px' } }))))));
    };
    return VerticalPersonaExample;
}(React.Component));
exports.VerticalPersonaExample = VerticalPersonaExample;
//# sourceMappingURL=VerticalPersona.Example.js.map