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

import RplIcon from './RplIcon.vue'
import { RplIconSizes, RplCoreIconNames, RplIconNames, RplCustomIconNames } from './constants'
import { RplColorThemes } from './../../lib/constants'

export const SingleTemplate = (args) => ({
  components: { RplIcon },
  setup() {
    return { args }
  },
  template: '<RplIcon v-bind="args" />'
})


<Meta title='Base styles/Icons' />

# Icon playground

Core icons are delivered through an SVG sprite, capturing all of the most commonly used icons and referenced via `<use>`.

```
<svg class="rpl-icon rpl-icon--download" aria-hidden="true">
  <use xlink:href="#rpl-icon--download"></use>
</svg>
```

<Canvas>
  <Story
    name='Icon playground'
    argTypes={{
      colour: {
        control: { type: 'select' },
        options: RplColorThemes
      },
      name: {
        control: { type: 'select' },
        options: RplIconNames
      },
      size: {
        control: { type: 'select' },
        options: RplIconSizes
      },
      padded: {
        control: { type: 'boolean' }
      }
    }}
    args={{
      colour: RplColorThemes[0],
      name: RplIconNames[0],
      size: 'l',
      padded: false
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
