"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var react_image_1 = require("@fluentui/react-image");
var classes = require("./Image.stories.scss");
/**
 * Temporary Stack until there's one in its own package.
 */
var Stack = function (props) {
    var horizontal = props.horizontal, rest = tslib_1.__rest(props, ["horizontal"]);
    return React.createElement("div", tslib_1.__assign({}, rest, { className: horizontal ? classes.hStack : classes.vStack }));
};
exports.ImageAppearanceShape = function () { return (React.createElement(Stack, { horizontal: true },
    React.createElement(react_image_1.Image, { alt: "Ade's avatar", src: "images/avatar/ade.jpg", height: 200, width: 200 }),
    React.createElement(react_image_1.Image, { alt: "Chris's avatar", rounded: true, src: "images/avatar/chris.jpg", height: 200, width: 200 }),
    React.createElement(react_image_1.Image, { alt: "Laura's avatar", circular: true, src: "images/avatar/laura.jpg", height: 200, width: 200 }))); };
exports.ImageVariationsBorder = function () { return (React.createElement(Stack, { horizontal: true },
    React.createElement(Stack, { horizontal: true },
        React.createElement(react_image_1.Image, { alt: "Ade's avatar", src: "images/avatar/ade.jpg", height: 200, width: 200 }),
        React.createElement(react_image_1.Image, { alt: "Chris's avatar", rounded: true, src: "images/avatar/chris.jpg", height: 200, width: 200 }),
        React.createElement(react_image_1.Image, { alt: "Laura's avatar", circular: true, src: "images/avatar/laura.jpg", height: 200, width: 200 })),
    React.createElement(Stack, { horizontal: true },
        React.createElement(react_image_1.Image, { alt: "Ade's avatar", bordered: true, src: "images/avatar/ade.jpg", height: 200, width: 200 }),
        React.createElement(react_image_1.Image, { alt: "Chris's avatar", bordered: true, rounded: true, src: "images/avatar/chris.jpg", height: 200, width: 200 }),
        React.createElement(react_image_1.Image, { alt: "Laura's avatar", bordered: true, circular: true, src: "images/avatar/laura.jpg", height: 200, width: 200 })))); };
exports.ImageVariationsFallback = function () { return (React.createElement(Stack, { horizontal: true },
    React.createElement(react_image_1.Image, { alt: "Ade's avatar", bordered: true, src: "images/avatar/ade.jpg", height: 200, width: 200 }),
    React.createElement(react_image_1.Image, { alt: "Non-existing avatar", bordered: true, src: "images/avatar/non-existing-png.jpg", height: 200, width: 200 }))); };
exports.ImageLayoutFit = function () { return (React.createElement(React.Fragment, null,
    React.createElement("h1", null, "None"),
    React.createElement("div", { style: { border: '1px solid green', height: 150, width: 300 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/600x200", fit: "none" })),
    React.createElement("br", null),
    React.createElement("div", { style: { border: '1px solid green', height: 150, width: 300 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/200x100", fit: "none" })),
    React.createElement("h1", null, "Center"),
    React.createElement("div", { style: { border: '1px solid green', height: 150, width: 300 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/600x200", fit: "center" })),
    React.createElement("br", null),
    React.createElement("div", { style: { border: '1px solid green', height: 150, width: 300 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/200x100", fit: "center" })),
    React.createElement("h1", null, "Contain"),
    React.createElement("div", { style: { border: '1px solid green', height: 200, width: 400 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/400x200", fit: "contain" })),
    React.createElement("br", null),
    React.createElement("div", { style: { border: '1px solid green', height: 250, width: 400 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/400x200", fit: "contain" })),
    React.createElement("br", null),
    React.createElement("div", { style: { border: '1px solid green', height: 200, width: 450 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/400x200", fit: "contain" })),
    React.createElement("h1", null, "Cover"),
    React.createElement("div", { style: { border: '1px solid green', height: 250, width: 400 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/400x250", fit: "cover" })),
    React.createElement("br", null),
    React.createElement("div", { style: { border: '1px solid green', height: 200, width: 400 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/400x300", fit: "cover" })),
    React.createElement("br", null),
    React.createElement("div", { style: { border: '1px solid green', height: 200, width: 400 } },
        React.createElement(react_image_1.Image, { src: "https://via.placeholder.com/600x200", fit: "cover" })))); };
exports.ImageFluid = function () { return (React.createElement(Stack, { horizontal: true },
    React.createElement(react_image_1.Image, { fluid: true, src: "https://via.placeholder.com/900x50" }),
    React.createElement(react_image_1.Image, { fluid: true, src: "https://via.placeholder.com/100x100" }))); };
//# sourceMappingURL=Image.stories.js.map