Add option to add info in a panel instead of in the iframe

[dietergeerts]

Having all extra info in the iframe isn't that good, because your styling/scripts of the actual component and the info around it can interfere with each other. This is something to be avoided. I have been creating toolkit for a long time now, and you really don't want to have this. Therefore two things can be done:

• Make it possible to show the info in a panel instead of the preview area
• Make it so that the info is put around the iframe (which I don't know is possible with Storybook)

I didn't look at the code, but I assume it isn't that much work to add the option to render the info in a side panel?

[pocka]

+1 for first one: I think it's not possible to render component in <iframe> with Vue.

I strongly agree that wrapping actual component with info isn't good, and also Storybook team seems to think so.
We should add options that moves info into addon panel. After storybookjs/storybook#1501 is merged, we can set it as default.

I didn't look at the code, but I assume it isn't that much work to add the option to render the info in a side panel?

Sorry, I don't know whether it's easy or not (I'm not familiar with addon panel...).

[dietergeerts]

As a side note: I don't think having the info around the preview is bad, it's actually the thing you want for styleguides, BUT it's the fact that they are both in the same iframe that's not good. So if only storybook would allow plugins to put things around the iframe...

[kyleoliveiro]

I agree with having it in a panel as opposed to in an iframe. Currently, the addon-a11y plugin throws errors due to the stuff that addon-vue-info adds into the iframe.

[pocka]

Implemented in #70 (version 1.0.0-alpha.7)