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

export const SingleTemplate = (args) => ({
  components: { RplErrorMessage, RplContent },
  setup() {
    return { args }
  },
  template: `
    <RplErrorMessage v-bind="args">
      <RplContent html="${args.content}" />
    </RplErrorMessage>
  `
})

<Meta
  title='Core/Containers/Error message'
  component={ RplErrorMessage }
  args={{
    title: 'Error',
    intro: "Sorry, we couldn't find the page you were looking for.",
    content: `<p>Have a look at the web address to make sure it was typed correctly.</p><p>We may also have deleted this page. If none of our suggestions help you find the information you were looking for, please contact us.</p>`,
    link: {
      text: 'Go to home page',
      url: '/'
    }
  }}
/>

# Error message

<ArgsTable of={RplErrorMessage} />

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