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

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

<Meta
  title='Core/Navigation/Campaign banner'
  component={RplSecondaryCampaign}
  parameters={{
    layout: 'fullscreen',
    chromatic: {
      viewports: [bpMin.s, bpMin.l]
    }
  }}
  args={{
    title: 'Secondary campaign banner title',
    default: '<p>In do dolore dolore sint ipsum est est, commodo ex laborum Lorem ut deserunt dolore ullamco.</p>',
    link: { text: 'Campaign link', url: '#' },
  }}
/>

# Campaign banner

<ArgsTable of={RplSecondaryCampaign} />

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

## Example / With Image

This is an example the secondary campaign banner with optional image

<Canvas>
  <Story
    name='Secondary/Image'
    play={a11yStoryCheck}
    args={{
      image: {
        src: '/img/image-landscape-m.jpg',
      },
      meta: '<span>Image meta data, i.e. caption</span>'
    }}
  >
    {SingleTemplate.bind()}
  </Story>
</Canvas>
