import { __assign, __rest } from "tslib";
import * as React from 'react';
import { Image } from '@fluentui/react-image';
import * as classes from './Image.stories.scss';
/**
 * Temporary Stack until there's one in its own package.
 */
var Stack = function (props) {
    var horizontal = props.horizontal, rest = __rest(props, ["horizontal"]);
    return React.createElement("div", __assign({}, rest, { className: horizontal ? classes.hStack : classes.vStack }));
};
export var ImageAppearanceShape = function () { return (React.createElement(Stack, { horizontal: true },
    React.createElement(Image, { alt: "Allan's avatar", src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg", height: 200, width: 200 }),
    React.createElement(Image, { alt: "Amanda's avatar", rounded: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg", height: 200, width: 200 }),
    React.createElement(Image, { alt: "Erik's avatar", circular: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/ErikNason.jpg", height: 200, width: 200 }))); };
export var ImageVariationsBorder = function () { return (React.createElement(Stack, { horizontal: true },
    React.createElement(Stack, { horizontal: true },
        React.createElement(Image, { alt: "Allan's avatar", src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg", height: 200, width: 200 }),
        React.createElement(Image, { alt: "Amanda's avatar", rounded: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg", height: 200, width: 200 }),
        React.createElement(Image, { alt: "Erik's avatar", circular: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/ErikNason.jpg", height: 200, width: 200 })),
    React.createElement(Stack, { horizontal: true },
        React.createElement(Image, { alt: "Allan's avatar", bordered: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg", height: 200, width: 200 }),
        React.createElement(Image, { alt: "Amanda's avatar", bordered: true, rounded: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AmandaBrady.jpg", height: 200, width: 200 }),
        React.createElement(Image, { alt: "Erik's avatar", bordered: true, circular: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/ErikNason.jpg", height: 200, width: 200 })))); };
export var ImageVariationsFallback = function () { return (React.createElement(Stack, { horizontal: true },
    React.createElement(Image, { alt: "Allan's avatar", bordered: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/AllanMunger.jpg", height: 200, width: 200 }),
    React.createElement(Image, { alt: "Non-existing avatar", bordered: true, src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/non-existing-png.jpg", height: 200, width: 200 }))); };
export var 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(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(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(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(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(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(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(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(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(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(Image, { src: "https://via.placeholder.com/600x200", fit: "cover" })))); };
export var ImageFluid = function () { return (React.createElement(Stack, { horizontal: true },
    React.createElement(Image, { fluid: true, src: "https://via.placeholder.com/900x50" }),
    React.createElement(Image, { fluid: true, src: "https://via.placeholder.com/100x100" }))); };
//# sourceMappingURL=Image.stories.js.map