define(["require", "exports", "tslib", "react", "@uifabric/react-cards", "office-ui-fabric-react"], function (require, exports, tslib_1, React, react_cards_1, office_ui_fabric_react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var alertClicked = function () {
        alert('Clicked');
    };
    var CardVerticalExample = /** @class */ (function (_super) {
        tslib_1.__extends(CardVerticalExample, _super);
        function CardVerticalExample() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        CardVerticalExample.prototype.render = function () {
            var siteTextStyles = {
                root: {
                    color: '#025F52',
                    fontWeight: office_ui_fabric_react_1.FontWeights.semibold,
                },
            };
            var descriptionTextStyles = {
                root: {
                    color: '#333333',
                    fontWeight: office_ui_fabric_react_1.FontWeights.semibold,
                },
            };
            var helpfulTextStyles = {
                root: {
                    color: '#333333',
                    fontWeight: office_ui_fabric_react_1.FontWeights.regular,
                },
            };
            var iconStyles = {
                root: {
                    color: '#0078D4',
                    fontSize: 16,
                    fontWeight: office_ui_fabric_react_1.FontWeights.regular,
                },
            };
            var footerCardSectionStyles = {
                root: {
                    borderTop: '1px solid #F3F2F1',
                },
            };
            var backgroundImageCardSectionStyles = {
                root: {
                    backgroundImage: 'url(https://placehold.it/256x144)',
                    backgroundPosition: 'center center',
                    backgroundSize: 'cover',
                    height: 144,
                },
            };
            var dateTextStyles = {
                root: {
                    color: '#505050',
                    fontWeight: 600,
                },
            };
            var subduedTextStyles = {
                root: {
                    color: '#666666',
                },
            };
            var actionButtonStyles = {
                root: {
                    border: 'none',
                    color: '#333333',
                    height: 'auto',
                    minHeight: 0,
                    minWidth: 0,
                    padding: 0,
                    selectors: {
                        ':hover': {
                            color: '#0078D4',
                        },
                    },
                },
                textContainer: {
                    fontSize: 12,
                    fontWeight: office_ui_fabric_react_1.FontWeights.semibold,
                },
            };
            var sectionStackTokens = { childrenGap: 30 };
            var cardTokens = { childrenMargin: 12 };
            var footerCardSectionTokens = { padding: '12px 0px 0px' };
            var backgroundImageCardSectionTokens = { padding: 12 };
            var agendaCardSectionTokens = { childrenGap: 0 };
            var attendantsCardSectionTokens = { childrenGap: 6 };
            return (React.createElement(office_ui_fabric_react_1.Stack, { horizontal: true, tokens: sectionStackTokens },
                React.createElement(react_cards_1.Card, { "aria-label": "Basic vertical card" },
                    React.createElement(react_cards_1.Card.Item, null,
                        React.createElement(office_ui_fabric_react_1.Text, null, "Basic vertical card"))),
                React.createElement(react_cards_1.Card, { "aria-label": "Clickable vertical card with image bleeding at the center of the card", onClick: alertClicked, tokens: cardTokens },
                    React.createElement(react_cards_1.Card.Item, null,
                        React.createElement(office_ui_fabric_react_1.Persona, { text: "Kevin Jameson", secondaryText: "Feb 2, 2019" })),
                    React.createElement(react_cards_1.Card.Item, { fill: true },
                        React.createElement(office_ui_fabric_react_1.Image, { src: "https://placehold.it/256x144", width: "100%", alt: "Placeholder image." })),
                    React.createElement(react_cards_1.Card.Section, null,
                        React.createElement(office_ui_fabric_react_1.Text, { variant: "small", styles: siteTextStyles }, "Contoso"),
                        React.createElement(office_ui_fabric_react_1.Text, { styles: descriptionTextStyles }, "Contoso Denver expansion design marketing hero guidelines"),
                        React.createElement(office_ui_fabric_react_1.Text, { variant: "small", styles: helpfulTextStyles }, "Is this recommendation helpful?")),
                    React.createElement(react_cards_1.Card.Section, { horizontal: true, styles: footerCardSectionStyles, tokens: footerCardSectionTokens },
                        React.createElement(office_ui_fabric_react_1.Icon, { iconName: "RedEye", styles: iconStyles }),
                        React.createElement(office_ui_fabric_react_1.Icon, { iconName: "SingleBookmark", styles: iconStyles }),
                        React.createElement(office_ui_fabric_react_1.Stack.Item, { grow: 1 },
                            React.createElement("span", null)),
                        React.createElement(office_ui_fabric_react_1.Icon, { iconName: "MoreVertical", styles: iconStyles }))),
                React.createElement(react_cards_1.Card, { "aria-label": "Clickable vertical card with image bleeding at the top of the card", onClick: alertClicked, tokens: cardTokens },
                    React.createElement(react_cards_1.Card.Section, { fill: true, verticalAlign: "end", styles: backgroundImageCardSectionStyles, tokens: backgroundImageCardSectionTokens },
                        React.createElement(office_ui_fabric_react_1.Text, { variant: "large", styles: dateTextStyles }, "NOVEMBER"),
                        React.createElement(office_ui_fabric_react_1.Text, { variant: "superLarge", styles: dateTextStyles }, "26")),
                    React.createElement(react_cards_1.Card.Section, null,
                        React.createElement(office_ui_fabric_react_1.Text, { variant: "small", styles: subduedTextStyles }, "Category"),
                        React.createElement(office_ui_fabric_react_1.Text, { styles: descriptionTextStyles }, "Contoso marketing customer visit and survey results")),
                    React.createElement(react_cards_1.Card.Section, { tokens: agendaCardSectionTokens },
                        React.createElement(office_ui_fabric_react_1.Text, { variant: "small", styles: descriptionTextStyles }, "Tuesday 2:00-4:30 pm"),
                        React.createElement(office_ui_fabric_react_1.Text, { variant: "small", styles: subduedTextStyles }, "Conf Room 34/1301")),
                    React.createElement(react_cards_1.Card.Item, { grow: 1 },
                        React.createElement("span", null)),
                    React.createElement(react_cards_1.Card.Section, { horizontal: true, tokens: attendantsCardSectionTokens },
                        React.createElement(office_ui_fabric_react_1.ActionButton, { text: "12 Attendees", styles: actionButtonStyles }),
                        React.createElement(office_ui_fabric_react_1.ActionButton, { text: "4 Accepted", styles: actionButtonStyles }),
                        React.createElement(office_ui_fabric_react_1.ActionButton, { text: "3 Declined", styles: actionButtonStyles })),
                    React.createElement(react_cards_1.Card.Section, { horizontal: true, styles: footerCardSectionStyles, tokens: footerCardSectionTokens },
                        React.createElement(office_ui_fabric_react_1.Icon, { iconName: "RedEye", styles: iconStyles }),
                        React.createElement(office_ui_fabric_react_1.Icon, { iconName: "SingleBookmark", styles: iconStyles }),
                        React.createElement(office_ui_fabric_react_1.Stack.Item, { grow: 1 },
                            React.createElement("span", null)),
                        React.createElement(office_ui_fabric_react_1.Icon, { iconName: "MoreVertical", styles: iconStyles })))));
        };
        return CardVerticalExample;
    }(React.Component));
    exports.CardVerticalExample = CardVerticalExample;
});
//# sourceMappingURL=Card.Vertical.Example.js.map