Using controls in storybook

I wanted to share this with the team as I think it shows why working with controls in Storybook is useful. Here's a short video of demo why this approach has value:

Screen.Recording.2021-04-30.at.9.59.31.PM.mp4

This kind of thing could be very useful for the more complex components we have and it simplifies the tests as well. Let me know what you think.

Cheers, —Casey

---

Q. @drewbaker Yeah this is good, I like the self docs stuff it generates.

Are there docs anywhere on how to connect up all the controls to the props? I only saw them for React and it's not obvious how it translates to our stories.

A. @z3cka Using v-bind="$props" in the template property of the story connects all the props, but I think you have to set up each control explicitly in the exported default using the argTypes property. All the docs for this is on: https://storybook.js.org/docs/vue/essentials/controls ...which I noticed uses some convention from the essentials intro

Further reading about ArgTypes can be found here: https://storybook.js.org/docs/vue/api/argtypes

I converted this to a Draft as this is just a proof of concept and now would have to resolve some conflicts to get it merged; although that should not be difficult, I'm not sure if there is much of a value add here.

---