import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import RplTag from './RplTag.vue'
import { a11yStoryCheck } from './../../../stories/interactions.js'

export const SingleTemplate = (args) => ({
  components: { RplTag },
  setup() {
    return { args }
  },
  template: '<div class="sb-container"><RplTag v-bind="args" /></div>'
})

<Meta
  title='Core/Containers/Tag'
  component={RplTag}
  argTypes={{
    variant: {
      control: { type: 'radio' },
      options: ['default', 'neutral']
    }
  }}
  args={{
    variant: 'default',
    label: 'Tag'
  }}
/>

# Tag

<ArgsTable of={RplTag} />

## Default

<Canvas>
  <Story
    name='Default'
    play={a11yStoryCheck}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>

## Neutral

<Canvas>
  <Story
    name='Neutral'
    play={a11yStoryCheck}
    args={{
      variant: 'neutral'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
