import {
    AddMajorIcon,
    AlertMajorIcon,
    ArrowMajorIcon,
    ArrowMinorIcon,
    ArrowsUpDownMajorIcon,
    ArrowsUpDownMinorIcon,
    BurgerMajorIcon,
    CalendarMajorIcon,
    CheckMajorIcon,
    ChevronMajorIcon,
    ChevronMinorIcon,
    ChevronUpDownMajorIcon,
    ChevronUpDownMinorIcon,
    CrossMajorIcon,
    CrossMinorIcon,
    DownloadMajorIcon,
    DuplicateMajorIcon,
    EmailMajorIcon,
    ExternalLinkMajorIcon,
    ExternalLinkMinorIcon,
    EyeMajorIcon,
    EyeSlashMajorIcon,
    FileMajorIcon,
    FileCsvMajorIcon,
    FileMusicMajorIcon,
    FilePdfMajorIcon,
    FileVideoMajorIcon,
    FileZipMajorIcon,
    FilterMajorIcon,
    FolderMajorIcon,
    FolderCrossMajorIcon,
    GearMajorIcon,
    GrabMajorIcon,
    GroupMajorIcon,
    HelpMajorIcon,
    HelpCircleMajorIcon,
    HomeMajorIcon,
    HorizontalDotsMajorIcon,
    ImageMajorIcon,
    InfoCircleMajorIcon,
    InfoCircleMinorIcon,
    LightbulbMajorIcon,
    LinkMajorIcon,
    LinkRemoveMajorIcon,
    MagnifierMajorIcon,
    NotificationMajorIcon,
    NotificationOffMajorIcon,
    NotificationRingingMajorIcon,
    PadlockLockedMajorIcon,
    PadlockUnlockedMajorIcon,
    PencilMajorIcon,
    PlaceholderMajorIcon,
    PlaceholderMinorIcon,
    RevertMajorIcon,
    SigninMajorIcon,
    SignoutMajorIcon,
    StarFillMajorIcon,
    StarFillMinorIcon,
    StarOutlineMajorIcon,
    StarOutlineMinorIcon,
    TrashMajorIcon,
    TrashMinorIcon,
    UserMajorIcon,
    UserMinorIcon,
    UserAddMajorIcon,
    UserAddMinorIcon,
    VerticalDotsMajorIcon,
    WarningMajorIcon,
    WarningMinorIcon
} from "@components/icons";
import { CheckeredBackground, Preview } from "@stories/components";
import { IconGallery, renderItem } from "./icon-gallery";
import { Inline } from "@components/layout";
import { Meta } from "@storybook/addon-docs";

<Meta
    title="Materials/Icons"
    id="icon-gallery"
/>

# Icons

Official collection of icons to promote a consistent experience across the ShareGate ecosystem. All icons are available in two ways, [React components](#react-components) and [static files](#static-files).

> If you are looking for documentation about integrating a *custom icons* (ex: Azure specific icons) in your application, please refer to the [icon component](?path=/docs/icon--default-story) documentation.

## Orbit

### Major icons

Major icons are `16x16` in a `20x20` bounding box. Use them to draw attention to an area.

<IconGallery>
    {renderItem("Add", <AddMajorIcon />)}
    {renderItem("Alert", <AlertMajorIcon />)}
    {renderItem("Arrow", <ArrowMajorIcon />)}
    {renderItem("ArrowsUpDown", <ArrowsUpDownMajorIcon />)}
    {renderItem("Burger", <BurgerMajorIcon />)}
    {renderItem("Calendar", <CalendarMajorIcon />)}
    {renderItem("Check", <CheckMajorIcon />)}
    {renderItem("Chevron", <ChevronMajorIcon />)}
    {renderItem("ChevronUpDown", <ChevronUpDownMajorIcon />)}
    {renderItem("Cross", <CrossMajorIcon />)}
    {renderItem("Duplicate", <DuplicateMajorIcon />)}
    {renderItem("Download", <DownloadMajorIcon />)}
    {renderItem("Email", <EmailMajorIcon />)}
    {renderItem("ExternalLink", <ExternalLinkMajorIcon />)}
    {renderItem("Eye", <EyeMajorIcon />)}
    {renderItem("EyeSlash", <EyeSlashMajorIcon />)}
    {renderItem("File", <FileMajorIcon />)}
    {renderItem("FileCsv", <FileCsvMajorIcon />)}
    {renderItem("FileMusic", <FileMusicMajorIcon />)}
    {renderItem("FilePdf", <FilePdfMajorIcon />)}
    {renderItem("FileVideo", <FileVideoMajorIcon />)}
    {renderItem("FileZip", <FileZipMajorIcon />)}
    {renderItem("Filter", <FilterMajorIcon />)}
    {renderItem("Folder", <FolderMajorIcon />)}
    {renderItem("FolderCross", <FolderCrossMajorIcon />)}
    {renderItem("Gear", <GearMajorIcon />)}
    {renderItem("Grab", <GrabMajorIcon />)}
    {renderItem("Group", <GroupMajorIcon />)}
    {renderItem("Help", <HelpMajorIcon />)}
    {renderItem("HelpCircle", <HelpCircleMajorIcon />)}
    {renderItem("Home", <HomeMajorIcon />)}
    {renderItem("HorizontalDots", <HorizontalDotsMajorIcon />)}
    {renderItem("Image", <ImageMajorIcon />)}
    {renderItem("InfoCircle", <InfoCircleMajorIcon />)}
    {renderItem("Lightbulb", <LightbulbMajorIcon />)}
    {renderItem("Link", <LinkMajorIcon />)}
    {renderItem("LinkRemove", <LinkRemoveMajorIcon />)}
    {renderItem("Magnifier", <MagnifierMajorIcon />)}
    {renderItem("Notification", <NotificationMajorIcon />)}
    {renderItem("NotificationOff", <NotificationOffMajorIcon />)}
    {renderItem("NotificationRinging", <NotificationRingingMajorIcon />)}
    {renderItem("PadlockLocked", <PadlockLockedMajorIcon />)}
    {renderItem("PadlockUnlocked", <PadlockUnlockedMajorIcon />)}
    {renderItem("Pencil", <PencilMajorIcon />)}
    {renderItem("Placeholder", <PlaceholderMajorIcon />)}
    {renderItem("Revert", <RevertMajorIcon />)}
    {renderItem("Signin", <SigninMajorIcon />)}
    {renderItem("Signout", <SignoutMajorIcon />)}
    {renderItem("StarFill", <StarFillMajorIcon />)}
    {renderItem("StarOutline", <StarOutlineMajorIcon />)}
    {renderItem("Trash", <TrashMajorIcon />)}
    {renderItem("User", <UserMajorIcon />)}
    {renderItem("UserAdd", <UserAddMajorIcon />)}
    {renderItem("VerticalDots", <VerticalDotsMajorIcon />)}
    {renderItem("Warning", <WarningMajorIcon />)}
</IconGallery>

### Minor icons

Minor icons are 12x12 in a 20x20 bounding box. Use them to prevent an icon from taking too much the center stage in a component.

<IconGallery>
    {renderItem("Arrow", <ArrowMinorIcon />)}
    {renderItem("ArrowsUpDown", <ArrowsUpDownMinorIcon />)}
    {renderItem("Chevron", <ChevronMinorIcon />)}
    {renderItem("ChevronUpDown", <ChevronUpDownMinorIcon />)}
    {renderItem("Cross", <CrossMinorIcon />)}
    {renderItem("ExternalLink", <ExternalLinkMinorIcon />)}
    {renderItem("InfoCircle", <InfoCircleMinorIcon />)}
    {renderItem("StarFill", <StarFillMinorIcon />)}
    {renderItem("StarOutline", <StarOutlineMinorIcon />)}
    {renderItem("Placeholder", <PlaceholderMinorIcon />)}
    {renderItem("Trash", <TrashMinorIcon />)}
    {renderItem("User", <UserMinorIcon />)}
    {renderItem("UserAdd", <UserAddMinorIcon />)}
</IconGallery>

## Design specifications

All official SVG icons are available as major icons. Some icons have a minor version to avoid overpowering more important elements in a component.

## Icon dimensions

All icons are available as 20x20 SVGs. They should not be resized as they have been crafted to look their best in this particular size.

#### Major

All icons are provided as Major icons, which serve as the primary variation of the icon and are suitable for the majority of usage scenarios.

#### Minor

To keep your icon from taking up too much space compared to text or other elements surrounding it, use a smaller version of the icon. The overall icon size remains the same 20x20, but the icon within the component is reduced in size. If a minor version of an icon is not available in Orbit and you need one, please request it by submitting an issue on [Github](https://github.com/gsoft-inc/sg-orbit/issues).

#### Usage

```jsx
import { CalendarMajorIcon } from "@sharegate/orbit-ui";

function render() {
    return <CalendarMajorIcon aria-label="Calendar" />;
}
```

### Static files

Icons SVG files are available from the root of `@orbit-ui/icons` package. These files are useful for non React apps or any use cases which cannot be done using a component. Whenever you can, you should prefer React components to static files.

Orbit Design provide icons with default dimensions, e.g. a `20px` variant will have a default viewport of 20x20 and a viewbox of `0 0 20 20`.

Although frowned upon, you can customize an icon dimensions with the `width` and `height` props of Orbit [styled-system](?path=/docs/style-props--page).

#### Image source

```jsx
import CalendarMajorIcon from "@orbit-ui/icons/icon-calendar-major.svg";

function render() {
    return <Img src={CalendarMajorIcon24} alt="Calendar" width={6} height={6} />;
}
```

## Color

An SVG object get it's color from the [fill attribute](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes). When an SVG object doesn't define a `fill` attribute on his elements, CSS can be use to style the internal color of the elements of the objects with the `fill` property.

This means you can alter the color of an icon by specifying a new `fill` value. If the SVG already contains a `fill` attribute, please [fill an issue](https://github.com/gsoft-inc/sg-orbit/issues).

### React components

To set the color of an icon component, you can set the `fill` prop of Orbit [styled-system](?path=/docs/style-props--page).

```jsx
import { CalendarMajorIcon } from "@sharegate/orbit-ui";

function render() {
    return <CalendarMajorIcon aria-label="Calendar" fill="purple-8" />
}
```

### Image source

To set the color of an image, you can set the `fill` prop of Orbit [styled-system](?path=/docs/style-props--page).

```jsx
import CalendarMajorIcon from "@orbit-ui/icons/icon-calendar-major.svg";

function render() {
    return <Img src={CalendarMajorIcon} alt="calendar" fill="purple-8" />;
}
```
