import {
  Canvas,
  Meta,
  Story,
  ArgsTable
} from '@storybook/addon-docs'
import { within } from '@storybook/testing-library';
import { eventCheck, a11yCheck, a11yStoryCheck } from './../../../stories/interactions.js'
import RplAccordion from './RplAccordion.vue'
import { default as RplAccordionItems } from './fixtures/default.js'
const playFunction = async ({ canvasElement }) => {
  const canvas = await within(canvasElement)
  a11yCheck(canvasElement)
}

export const Template = (args) => ({
  components: { RplAccordion },
  setup() {
    return {
      args,
      RplAccordionItems
    }
  },
  template: `
    <RplAccordion
      v-bind="args"
    />
  `
})

<Meta
  title='Core/Containers/Accordion'
  component={RplAccordion}
/>

# Accordion

<ArgsTable of={RplAccordion} />

<Canvas>
  <Story
    name='Accordion'
    play={playFunction}
    args={{
      id: 'example',
      items: RplAccordionItems,
      numbered: false
    }}
  >
    {Template.bind()}
  </Story>
</Canvas>
