import { Canvas, ArgTypes, Meta, Description, Title } from "@storybook/blocks";
import {
	ComponentDetails,
	TaggedReleases,
	PropertiesTable,
} from "@spectrum-css/preview/blocks";

import * as IconStories from "./icon.stories";

<Meta of={IconStories} title="Docs" />

<Title of={IconStories} />
<ComponentDetails />

<Description of={IconStories} />

## Icon sets

The SVG icons used in Spectrum CSS are a part of two different icon sets, "workflow" and "ui". The two sets have different uses and methods of sizing.

### Workflow icons

The workflow icon set contains several hundred icons to choose from.
These icons can be seen in use within Button, Action button, Menu, and many other components.
Here is an example with just a few of these icons:

<Canvas of={IconStories.WorkflowDefault} />

These icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set:

<Canvas of={IconStories.WorkflowSizing} />

### UI icons

UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. The chevron within
the [Combobox component](?path=/docs/components-combobox--docs) is one example.

Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing.
They have unique classes applied that set their size in CSS. For example:

- `.spectrum-UIIcon-Asterisk300`
- `.spectrum-UIIcon-ChevronDown75`

Different UI icons have different number sizes available. The smallest size for some may be "50", while others may start at "100". Some have up to a "600" size.
Some may only have two different sizes, while others have six. Because of this, they can't be mapped one to one to t-shirt sizes. The correct UI icon sizes to use for each of a component's
size options is typically defined on the design spec.

An example of some UI icons in their available sizes:

<Canvas of={IconStories.UIDefault} />

Directional UI icons such as Chevron and Arrow have classes for each direction. They rotate the same base icon with a CSS `transform: rotate`. For example, the `Arrow100.svg` icon is used
with:

- `.spectrum-UIIcon-ArrowRight100`
- `.spectrum-UIIcon-ArrowLeft100`
- `.spectrum-UIIcon-ArrowDown100`
- `.spectrum-UIIcon-ArrowUp100`

<Canvas of={IconStories.UIArrows} />

## Repositories for the icon SVG files

The UI icon SVGs are within the Spectrum CSS repository, which has its own package published to NPM:

- GitHub: [adobe/spectrum-css — ui-icons folder](https://github.com/adobe/spectrum-css/tree/main/ui-icons)
- NPM: [@spectrum-css/ui-icons](https://www.npmjs.com/package/@spectrum-css/ui-icons).

The workflow icon SVGs are within a separate respository, which is also published to NPM:

- GitHub: [adobe/spectrum-css-workflow-icons](https://github.com/adobe/spectrum-css-workflow-icons)
- NPM: [@adobe/spectrum-css-workflow-icons](https://www.npmjs.com/package/@adobe/spectrum-css-workflow-icons).

## Properties

The component accepts the following inputs (properties):

<ArgTypes />

<PropertiesTable />

## Tagged releases

<TaggedReleases />