"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
// @codepen
var React = require("react");
var react_cards_1 = require("@uifabric/react-cards");
var office_ui_fabric_react_1 = require("office-ui-fabric-react");
var alertClicked = function () {
    alert('Clicked');
};
var CardHorizontalExample = /** @class */ (function (_super) {
    tslib_1.__extends(CardHorizontalExample, _super);
    function CardHorizontalExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CardHorizontalExample.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.regular,
            },
        };
        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: {
                alignSelf: 'stretch',
                borderLeft: '1px solid #F3F2F1',
            },
        };
        var sectionStackTokens = { childrenGap: 20 };
        var cardTokens = { childrenMargin: 12 };
        var footerCardSectionTokens = { padding: '0px 0px 0px 12px' };
        return (React.createElement(office_ui_fabric_react_1.Stack, { tokens: sectionStackTokens },
            React.createElement(react_cards_1.Card, { "aria-label": "Basic horizontal card", horizontal: true, tokens: cardTokens },
                React.createElement(react_cards_1.Card.Item, null,
                    React.createElement(office_ui_fabric_react_1.Text, null, "Basic horizontal card"))),
            React.createElement(react_cards_1.Card, { "aria-label": "Clickable horizontal card ", horizontal: true, onClick: alertClicked, tokens: cardTokens },
                React.createElement(react_cards_1.Card.Item, { fill: true },
                    React.createElement(office_ui_fabric_react_1.Image, { src: "https://placehold.it/180x135", 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, { 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 CardHorizontalExample;
}(React.Component));
exports.CardHorizontalExample = CardHorizontalExample;
//# sourceMappingURL=Card.Horizontal.Example.js.map