import { Meta, Canvas, Props } from '@storybook/addon-docs/blocks';
import { theme, Stack } from '@veeqo/ui';

import Glyph from './Glyph';
import glyphs from './glyphs';
import legacyIconMap from './legacyIconMap';

<Meta title="Components/Common/Glyph" component={Glyph} />

# Glyph

The glyph component is used to display icons in the UI, whilst aiming to be reusable and to streamline integration within our apps.

<Canvas>
  <Glyph name="info" />
  <Glyph name="add" />
  <Glyph name="cross" />
  <Glyph name="help" />
  <Glyph name="dropdown" />
</Canvas>

## Usage

```jsx
import { VeeqoCommon } from '@veeqo/components';
const { Glyph } = VeeqoCommon;

<Glyph name="info" />
```

## Accessibility Considerations

Usually event handlers should not be used on non-interactive elements, and shouldn't with a Glyph either. In a use-case where you would
like the glyph to be interactive, you should render it within our `Button` component (or a standard `button`).

You should use the `ariaLabel` prop when the element provides meaning to the page and is not purely presentational. If this has not been provided
we assume it is presentational and hide it from the screenreader (you could instead put the label on the parent).

Example (read out as "Infinite available stock, image"):

<Canvas>
  <Glyph name="infinity" ariaLabel="Infinite available stock" />
</Canvas>

## Props

<Props of={Glyph} />

## Color

By default glyphs inherit the current text color, making them really easy to override when used to compose bigger components.

<Canvas>
  <div style={{ color: theme.colors.secondary.red.base }}>
    <Stack direction="horizontal" alignY="center">
      <Glyph name="fail" />
      <Text variant="body">Something went wrong</Text>
    </Stack>
  </div>
</Canvas>

You can also pass a `color` prop directly to the component which will take priority over text color.

<Canvas>
  <div style={{ color: theme.colors.secondary.red.base }}>
    <Stack direction="horizontal" alignY="center">
      <Glyph name="fail" color={theme.colors.neutral.ink.base} />
      <Text variant="body">Something went wrong</Text>
    </Stack>
  </div>
</Canvas>

## Sizes

To change the glyph size you can use the `size` prop which accepts a sizing scale value or alias (see Theme/Sizes).

The default glyph size is `md` or `24px`.

<Canvas>
  <Glyph name="add" size="lg" />
  <Glyph name="add" />
  <Glyph name="add" size="4" />
</Canvas>

## List of available glyphs

<table>
  <tr>
    <th>Name</th>
    <th>Component</th>
  </tr>
  {Object.keys(glyphs).map(name => (
    <tr>
      <td>{name}</td>
      <td>
        <Glyph name={name} />
      </td>
    </tr>
  ))}
</table>


## List of deprecated glyphs

<table>
  <tr>
    <th>Name</th>
    <th>Component</th>
  </tr>
  {Object.keys(legacyIconMap).map(name => (
    <tr>
      <td>{name}</td>
      <td>
        <Glyph name={name} />
      </td>
    </tr>
  ))}
</table>