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

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

<Meta title='Core/Navigation/In-page navigation' component={RplInPageNavigation} />

# In-page navigation

<ArgsTable of={RplInPageNavigation} />

<Canvas>
  <Story
    name='In-page navigation'
    play={a11yStoryCheck}
    args={{
      title: 'On this page',
      items: [
        { text: 'This is the first anchor link', url: '#', items: [
          { text: 'This is sub heading following first anchor link', url: '#' }
        ]},
        { text: 'Second link to extra content', url: '#' },
        { text: 'Third link goes here', url: '#' },
        { text: 'Link to additional content', url: '#' },
        { text: 'Another link to extra content', url: '#', items: [
          { text: 'This is another sub heading', url: '#' },
          { text: 'And another sub heading', url: '#', items: [
            { text: 'Theoretical 3rd level with an extra long title', url: '#', items: [
              { text: 'Theoretical 4th level', url: '#' }
            ]},
          ]},
        ]},
        { text: 'This is another link', url: '#' }
      ]
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
