import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { ComponentInfo, Preview, Tagline } from "@stories/components";
import { GalaxyImage, GalaxyImage2x, GalaxyImageLg, NoResults } from "./assets";
import { Image, InnerImage, InnerSvgImage, SvgImage } from "@components/image";
import { Inline } from "@components/layout";

<Meta
    title="Components/Image"
    id="image"
/>

# Image

<Tagline>Use this component to display an image.</Tagline>

<ComponentInfo
    usage={"import { Image, SvgImage } from \"@sharegate/orbit-ui\";"}
    githubPath="/packages/components/src/image/src"
/>

## Guidelines

### Accessibility

- An image must have an [`alt`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt) attribute.
- If the image does not add more information to the existing context(decorative), use `alt=""`.

## Usage

### Shape

An image can use a different shape.

<Preview scope={{ GalaxyImage }}>
    <Story name="shape">
        <Inline>
            <Image shape="rounded" src={GalaxyImage} alt="Galaxy" width={12} height={12} />
            <Image shape="circular" src={GalaxyImage} alt="Galaxy" width={12} height={12} />
        </Inline>
    </Story>
</Preview>

### Size

An image size can be specifyied with the `width` and `height` props.

<Preview scope={{ GalaxyImageLg }}>
    <Story name="size">
        <Image width="200px" height="200px" src={GalaxyImageLg} alt="Galaxy" />
    </Story>
</Preview>

### Retina

You can let the browser decide which image is best to serve according to the user device screen pixel density.

It is highly recommended to serve a _1x_ image as well as a _2x_ image, twice the intended size. This assures the user has the best looking image possible.

_Avoid serving images that are unecessary big, images should be resized to the intended final image display size. This assures we don't waste bandwith for the user._

<Preview scope={{ GalaxyImage, GalaxyImage2x }}>
    <Story name="retina">
        <Image width="200px" height="200px" srcSet={`${GalaxyImage} 1x, ${GalaxyImage2x} 2x`} alt="Galaxy" />
    </Story>
</Preview>

## SvgImage

For some use cases, like dark mode support, an SVG image is a better fit than a standard PNG or JPG image. Orbit provide a component for these images which will take care for you of the accessibility attributes and enforce a mandatory `aria-label` attribute.

<Preview scope={{ NoResults }}>
    <Story name="svg image">
        <SvgImage src={NoResults} stroke="purple-6" aria-label="No results" />
    </Story>
</Preview>

### Size

An SVG image size can be specified with the `width` and `height` props.

<Preview scope={{ NoResults }}>
    <Story name="svg image size">
        <SvgImage width="150px" height="150px"stroke="purple-6" src={NoResults} aria-label="No results" />
    </Story>
</Preview>

### Color

An SVG image `stroke` and `fill` color can vary.

<Preview scope={{ NoResults }}>
    <Story name="svg image color">
        <SvgImage stroke="purple-6" fill="warning-1" src={NoResults} aria-label="No results" />
    </Story>
</Preview>

## API

### Image

<ComponentInfo
    usage={"import { Image } from \"@sharegate/orbit-ui\";"}
    inherits={[InnerImage.defaultElement, "styled-component"]}
    compact
/>

<ArgsTable of={InnerImage} sort="alpha" />

### SvgImage

<ComponentInfo
    usage={"import { SvgImage } from \"@sharegate/orbit-ui\";"}
    inherits={["svg", "styled-component"]}
    compact
/>

<ArgsTable of={InnerSvgImage} sort="alpha" />
