import { __extends } from "tslib";
import * as React from 'react';
import { Stack, Text } from '@fluentui/react';
import { PersonaTestImages } from '@fluentui/react-experiments/lib/common/TestImages';
import { mergeStyles } from '@fluentui/style-utilities';
import { Persona } from '@fluentui/react-experiments';
var tokens = {
    sectionStack: {
        childrenGap: 32,
    },
    headingStack: {
        childrenGap: 16,
    },
    personaCoinStack: {
        childrenGap: 12,
    },
};
var verticalPersonaStackClassName = mergeStyles({ display: 'flex', flexDirection: 'row' });
var VerticalPersonaStack = function (props) { return (React.createElement("div", { className: verticalPersonaStackClassName }, props.children)); };
var VerticalPersonaExample = /** @class */ (function (_super) {
    __extends(VerticalPersonaExample, _super);
    function VerticalPersonaExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    VerticalPersonaExample.prototype.render = function () {
        return (React.createElement(Stack, { tokens: tokens.sectionStack },
            React.createElement(Stack, { tokens: tokens.headingStack, padding: 8 },
                React.createElement(Stack, { tokens: tokens.personaCoinStack },
                    React.createElement(Text, null, "Basic Usage"),
                    React.createElement(VerticalPersonaStack, null,
                        React.createElement(Persona, { vertical: true, text: "Sukhnam Chander", secondaryText: "Principal Program manager" }),
                        React.createElement(Persona, { vertical: true, text: "Kevin Jameson", secondaryText: "Professional traveller" }),
                        React.createElement(Persona, { vertical: true, text: "\u738B\u529B", secondaryText: "Principal Program manager" }),
                        React.createElement(Persona, { vertical: true, text: "Hubert Blaine Wolfeschlegelsteinhausenbergerdorff Sr.", coin: { imageUrl: PersonaTestImages.personMale } }),
                        React.createElement(Persona, { vertical: true, text: "Christian Duncan Claude Sandra Alvin Matilde Eriksson", secondaryText: "Director of global strategy management for the entire worldwide organization", coin: { imageUrl: PersonaTestImages.personMale } }))),
                React.createElement(Stack, { tokens: tokens.personaCoinStack },
                    React.createElement(Text, null, "When passing coinProps"),
                    React.createElement(VerticalPersonaStack, null,
                        React.createElement(Persona, { vertical: true, text: "Eline Page", secondaryText: "eSports commentator", coin: { presence: 4 } }),
                        React.createElement(Persona, { vertical: true, text: "\u8D75\u4E3D\u9896", coin: { imageUrl: PersonaTestImages.personFemale } }),
                        React.createElement(Persona, { vertical: true, text: "Kevin Jameson", coin: { imageUrl: PersonaTestImages.personMale } }))),
                React.createElement(Stack, { tokens: tokens.personaCoinStack },
                    React.createElement(Text, null, "Tokens!"),
                    React.createElement(VerticalPersonaStack, null,
                        React.createElement(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(Persona, { vertical: true, text: "Kevin Jameson", secondaryText: "Professional traveller", tokens: { fontFamily: 'monospace' } }),
                        React.createElement(Persona, { vertical: true, text: "\u738B\u529B", secondaryText: "Principal Program manager", tokens: { primaryTextFontWeight: 100, secondaryTextFontSize: '20px' } }))))));
    };
    return VerticalPersonaExample;
}(React.Component));
export { VerticalPersonaExample };
//# sourceMappingURL=VerticalPersona.Example.js.map