import { __extends } from "tslib";
// @codepen
import * as React from 'react';
import { Card } from '@uifabric/react-cards';
import { FontWeights, Icon, Image, Stack, Text } from 'office-ui-fabric-react';
/* eslint-disable deprecation/deprecation */
var alertClicked = function () {
    alert('Clicked');
};
var CardHorizontalExample = /** @class */ (function (_super) {
    __extends(CardHorizontalExample, _super);
    function CardHorizontalExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    CardHorizontalExample.prototype.render = function () {
        var siteTextStyles = {
            root: {
                color: '#025F52',
                fontWeight: FontWeights.semibold,
            },
        };
        var descriptionTextStyles = {
            root: {
                color: '#333333',
                fontWeight: FontWeights.regular,
            },
        };
        var helpfulTextStyles = {
            root: {
                color: '#333333',
                fontWeight: FontWeights.regular,
            },
        };
        var iconStyles = {
            root: {
                color: '#0078D4',
                fontSize: 16,
                fontWeight: 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(Stack, { tokens: sectionStackTokens },
            React.createElement(Card, { "aria-label": "Basic horizontal card", horizontal: true, tokens: cardTokens },
                React.createElement(Card.Item, null,
                    React.createElement(Text, null, "Basic horizontal card"))),
            React.createElement(Card, { "aria-label": "Clickable horizontal card ", horizontal: true, onClick: alertClicked, tokens: cardTokens },
                React.createElement(Card.Item, { fill: true },
                    React.createElement(Image, { src: "https://placehold.it/180x135", alt: "Placeholder image." })),
                React.createElement(Card.Section, null,
                    React.createElement(Text, { variant: "small", styles: siteTextStyles }, "Contoso"),
                    React.createElement(Text, { styles: descriptionTextStyles }, "Contoso Denver expansion design marketing hero guidelines"),
                    React.createElement(Text, { variant: "small", styles: helpfulTextStyles }, "Is this recommendation helpful?")),
                React.createElement(Card.Section, { styles: footerCardSectionStyles, tokens: footerCardSectionTokens },
                    React.createElement(Icon, { iconName: "RedEye", styles: iconStyles }),
                    React.createElement(Icon, { iconName: "SingleBookmark", styles: iconStyles }),
                    React.createElement(Stack.Item, { grow: 1 },
                        React.createElement("span", null)),
                    React.createElement(Icon, { iconName: "MoreVertical", styles: iconStyles })))));
    };
    return CardHorizontalExample;
}(React.Component));
export { CardHorizontalExample };
//# sourceMappingURL=Card.Horizontal.Example.js.map