back-ticks not working with add on info

[MelisaDurmaz]

The bug

When I use the add on info it seems to break my template when using back-ticks to pass dynamic data into template.

Example of template with back-ticks (Doesn't work)

import Vue from 'vue'
import { storiesOf } from '@storybook/vue'
import { withInfo } from 'storybook-addon-vue-info'
import Paragraph from './Paragraph.vue'

const copy = `font-size paragraph <br><br/> Lorem ipsum dolor sit amet`

storiesOf('Paragraph', module)
  .addDecorator(withInfo)
  .add(
    'Default',
    () => ({
      components: { 'example-paragraph': Paragraph },
      template: `<example-paragraph>Default medium ${copy}</example-paragraph>`,
      propsDescription: {
        Paragraph: {
          size: 'Allows you to pick size of paragraph text',
          version: 'Allows you to pick color of paragraph text',
        },
      },
    }),
    {
      info: {
        components: {
          Paragraph,
        },
      },
    },
  )

Example of template with single quotes (works but can't pass dynamic data)

import Vue from 'vue'
import { storiesOf } from '@storybook/vue'
import { withInfo } from 'storybook-addon-vue-info'
import Paragraph from './Paragraph.vue'

const copy = `font-size paragraph <br><br/> Lorem ipsum dolor sit amet`

storiesOf('Paragraph', module)
  .addDecorator(withInfo)
  .add(
    'Default',
    () => ({
      components: { 'example-paragraph': Paragraph },
      template: '<example-paragraph>Default medium ${copy}</example-paragraph>',
      propsDescription: {
        Paragraph: {
          size: 'Allows you to pick size of paragraph text',
          version: 'Allows you to pick color of paragraph text',
        },
      },
    }),
    {
      info: {
        components: {
          Paragraph,
        },
      },
    },
  )

Versions

• storybook-addon-vue-info: 1.1.1
• @storybook/vue: 5.0.10

[pocka]

@MelisaDurmaz

When I use the add on info it seems to break my template when using back-ticks to pass dynamic data into template.

Could you provide more detail about how it was? (error messages, screenshots, etc...)

[valgeirb]

@MelisaDurmaz

You can use the data property for this:

storiesOf('Paragraph', module)
  .addDecorator(withInfo)
  .add(
    'Default',
    () => ({
      data() {
        return {
          copy: `Lorem ipsum dolor sit amet`,
        };
      },
      components: { 'example-paragraph': Paragraph },
      template: '<example-paragraph>{{copy}}</example-paragraph>',
      propsDescription: {
        Paragraph: {
          size: 'Allows you to pick size of paragraph text',
          version: 'Allows you to pick color of paragraph text',
        },
      },
    }),
    {
      info: {
        components: {
          Paragraph,
        },
      },
    },
  )```

[pocka]

Closing due to inactivity.