import { ArgsTable, Canvas, IconGallery, IconItem, Meta } from '@storybook/addon-docs/blocks'

import { BaseIcon } from '../_utils/icon/BaseIcon'
import { STYLES } from '../_utils/taxonomy'
import * as allIcons from './index'

<Meta title={`${STYLES}/Icons`} />

# ** Icons **

<Canvas>
  <IconGallery>
    {Object.entries(allIcons).map(([name, Component]) => (
      <IconItem name={name}>
        <Component />
      </IconItem>
    ))}
  </IconGallery>
</Canvas>

## Specifications

### Icon size

Icons should be displayed in two sizes only, with a 2px padding:

- 18px
- 24px

### Stroke size

- Navigational icons (e.g. back, cross, chevron…): 2px stroke
- Information icons: 1px stroke
- Clickable icons: 1px stroke

Exceptions:

- Loading icon: 2px stroke

### Colors

- When information: Icon MidnightGey
- When subaction: Icon blue

Exceptions:

- Tab bar: Grey actionable / Blue active
- Checkmark: Green
- Highway: Blue
- Preferences “NO”: LightGrey + Red
- Map pin: MidnightGreen

## Usage

```js
import { WarningIcon } from '@blablacar/ui-library/icons/warningIcon'
;<WarningIcon />
```

<ArgsTable of={BaseIcon} />