# All files / image examples.data.tsx

100% Statements 8/8
100% Branches 0/0
100% Functions 0/0
100% Lines 8/8

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    441x
    1x
    1x
    1x

    1x

    1x

    1x

    1x
     import * as React from "react";
    import Image, { ImageHandledProps, ImageManagedClasses, ImageSlot, ImageUnhandledProps } from "./image";
    import schema from "./image.schema.json";
    import Documentation from "./.tmp/documentation";
    import { ComponentFactoryExample } from "@microsoft/fast-development-site-react";

    const classes: ImageManagedClasses = {
        managedClasses: {
            image: "image",
            image__picture: "picture",
            image_img: "img"
        }
    };

    const sourceElements: JSX.Element[] = [
        (<source srcSet="https://placehold.it/350x350/2F2F2F/171717" media="(min-width: 1400px)" slot={ImageSlot.source}/>),
        (<source srcSet="https://placehold.it/300x300/2F2F2F/171717" media="(min-width: 1084px)" slot={ImageSlot.source}/>),
        (<source srcSet="https://placehold.it/200x200/2F2F2F/171717" media="(min-width: 768px)" slot={ImageSlot.source}/>),
        (<source srcSet="https://placehold.it/100x100/2F2F2F/171717" media="(min-width: 540px)" slot={ImageSlot.source}/>),
        (<source srcSet="https://placehold.it/75x75/2F2F2F/171717" media="(min-width: 0px)" slot={ImageSlot.source}/>)
    ];

    const examples: ComponentFactoryExample<ImageHandledProps> = {
        name: "Image",
        component: Image,
        schema: schema as any,
        documentation: <Documentation />,
        detailData: {
            ...classes,
            src: "https://placehold.it/539x300/2F2F2F/171717",
            alt: "Placeholder with grey background and dimension watermark without any imagery"
        },
        data: [
            {
                ...classes,
                src: "https://placehold.it/75x75/2F2F2F/171717",
                alt: "Placeholder with grey background and dimension watermark without any imagery",
                children: sourceElements
            }
        ]
    };

    export default examples;