import { ArgsTable, Canvas, Story } from '@storybook/addon-docs/blocks';
import Icon from './Icon';
import ColorScheme, { schemes } from '../ColorScheme/ColorScheme';

<Meta title="Content/Icon" component={Icon} />

# Icon

Renders an icon from the icon library.

Icons in Quartz interfaces are intended to be decorative and not a replacement for textual information. As such, all icons are rendered with `aria-hidden="true"`.

## Usage guidelines

- **Do** use the `themeColor` prop to make the icon theme-aware
- **Do** use the `color` prop to force the icon to be rendered with that color, regardless of theme. For example, you may want a checkmark icon to always display as green.
- **Do** provide your own text label to accompany an icon. This label may be visually hidden.

## Props

<Canvas>
	<Story
		args={{
			name: 'apple',
			size: 30,
			themeColor: 'typography',
		}}
		name="Default"
	>
		{
			args => (
				<>
					<Icon {...args} />
					<ColorScheme {...schemes.LIGHT} type="default" />
				</>
			)
		}
	</Story>
</Canvas>

<ArgsTable story="Default" />

## Library

<Canvas>
	<Story
		args={{
			icons: [
				'apple',
				'arrow-right',
				'check',
				'compass',
				'envelope',
				'facebook',
				'linkedin',
				'twitter',
				'youtube',
			]
		}}
		name="Library"
	>
		{
			args => (
				<table border="1" cellPadding="10">
					<tbody>
						{
							args.icons.map( icon => (
								<tr key={icon}>
									<td>{icon}</td>
									<td><Icon name={icon} /></td>
								</tr>
							) )
						}
					</tbody>
				</table>
			)
		}
	</Story>
</Canvas>