import { ArgsTable, Meta, Story } from "@storybook/addon-docs";
import { AzureIcon, FilterMajorIcon } from "./assets";
import { CheckeredBackground, ComponentInfo, Preview, Tagline } from "@stories/components";
import { Icon, IconList, InnerIcon, InnerIconList } from "@components/icons";
import { Inline } from "@components/layout";
import IndexFileUsage from "./IndexFileUsage.mdx";

<Meta
    title="Components/Icon"
    id="icon"
/>

# Icon

<Tagline>An icon component allow you to render a custom icon.</Tagline>

<ComponentInfo
    usage="import { Icon, IconList } from @components"
    githubPath="/packages/components/src/icons/src"
/>

If you are looking for Orbit official icons, please have a look at the [icons page](?path=/docs/icon-gallery#gallery) in the materials section.

## Guidelines

### Accessibility

- When applicable, an accessible name should be provided through [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) to indicate the **purpose** of the icon in it's **current context**.
- If an icon is [decorative](https://www.w3.org/WAI/tutorials/images/decorative/), use `aria-hidden="true"` in order to have it ignored by screenreaders while displaying in the UI.

## Usage

You can use any type of icons (e.g. _svg_, _image_, _ico-font_) with this component but we recommend using inline `svg` element since they come with [a lot of benefits](https://www.jotform.com/blog/why-you-should-embed-svg-inline-98570).

To use an icon component you must first import your SVG icon as a component by using [`@svgr/webpack`](https://react-svgr.com/docs/getting-started/). If you haven't setup `@svgr/webpack` yet, please have a look at the [icon section of the installation page](?path=/docs/getting-started-installation--page#icons).

To import your SVG icon as a component:

```jsx
import { ReactComponent as AzureIcon } from "./icon-azure.svg";
```

Then you can wrap your icon with an `<Icon />` component:

```jsx
import { Icon } from "@sharegate/orbit-ui";
import { ReactComponent as Azure } from "./icon-azure.svg";

<Icon src={Azure} />
```

Or export your icon as an HOC and render it at a later time:

```jsx
import { createIcon } from "@sharegate/orbit-ui";
import { ReactComponent as Azure } from "./icon-azure.svg";

export const AzureIcon = createIcon(Azure);
```

<IndexFileUsage />

### Default

A default icon will render as an `md` sized icon.

<Preview scope={{ AzureIcon }}>
    <Story name="default">
        <CheckeredBackground>
            <Icon src={AzureIcon} />
        </CheckeredBackground>
    </Story>
</Preview>

### Color

An icon color can be altered with `fill`.

<Preview scope={{ AzureIcon }}>
    <Story name="color">
        <CheckeredBackground>
            <Inline alignY="end" gap={2}>
                <Icon src={AzureIcon} fill="accent-2" />
                <Icon src={AzureIcon} fill="accent-6" />
                <Icon src={AzureIcon} fill="accent-10" />
            </Inline>
        </CheckeredBackground>
    </Story>
</Preview>

## Icon list

To inline multiple icons in a component, wrap your icons in an icon list component.

<Preview scope={{ AzureIcon }}>
    <Story name="icon list">
        <IconList>
            <Icon src={AzureIcon} />
            <Icon src={FilterMajorIcon} />
        </IconList>
    </Story>
</Preview>

## API

### Icon

<ComponentInfo
    usage="import { Icon } from @components"
    inherits={["svg", "styled-component"]}
    compact
/>

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

### IconList

<ComponentInfo
    usage="import { IconList } from @components"
    inherits={[InnerIconList.defaultElement, "styled-component"]}
    compact
/>

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