feat(addon-background): added storybook addon-background

Added the Storybook background addon including special instructions to get it to work with Vuetify
VApp.

README.md

@@ -74,13 +74,12 @@ The following two points are key to getting Storybook to work correctly with Vue
 - [Storybook addons](https://github.com/storybooks/storybook/tree/next/addons)
 - [Storybook Vue example](https://github.com/storybooks/storybook/tree/next/examples/vue-kitchen-sink)
 - [vue-cli-plugin-storybook](https://github.com/storybooks/vue-cli-plugin-storybook)
-- [storybook-addon-vue-info](https://github.com/pocka/storybook-addon-vue-info)
 
 [Go to Table of Contents](#toc)
 
 ## Create project manually
 
-The following section describes the steps that need to be execute to create a project with Vue, Vuetify and Storybook manually.
+The following section describes the steps that need to be execute to manually create a project with Vue CLI 3, Vuetify and vue-cli-plugin-vuetify.
 
 - Create a Vue project:
 
@@ -248,13 +247,13 @@ The following section describes the steps that need to be execute to create a pr
     $ npm run lint
     ```
 
-- Test:
+- Test if the initial project is working correctly:
 
     ```
     $ npm run serve
     ```
 
-- Add Storybook:
+- Add Storybook using Vue CLI 3 plugin vue-cli-plugin-vuetify. The plugin is installed automatically by Vue CLI 3 when executing the following command:
 
     ```
     $ vue add storybook
@@ -336,6 +335,30 @@ The following section describes the steps that need to be execute to create a pr
 
 [Go to Table of Contents](#toc)
 
+## Addon
+
+This section only describes those addon's that require special instructions to work correctly with Vue or Vuetify.
+
+### addon-background
+
+To get the background addon to work with Vuetify requires a hack to VApp, as it sets and controls the background color. To let the background addon control the background color we need to set the background of VApp to transparent. In `./config/storybook/config.js` change the following:
+
+```js
+addDecorator(() => ({
+  template: '<v-app><story/></v-app>',
+  style: '.theme--light.application { background-color: transparent; }'
+}))
+```
+
+To:
+
+```js
+addDecorator(() => ({
+  template: '<v-app style="background-color: transparent;"><story/></v-app>',
+  style: '.theme--light.application { background-color: transparent; }'
+}))
+```
+
 ## Project setup
 
 ```
@@ -440,8 +463,8 @@ Currently the following is on the roadmap.
 
 - [ ] i18n
 - [ ] Add storybook-addon-vue-info
-- [ ] Add actions-addon
-- [ ] Add backgrounds-addon
+- [x] Add [actions-addon](https://github.com/storybooks/storybook/tree/master/addons/actions)
+- [x] Add [backgrounds-addon](https://github.com/storybooks/storybook/tree/master/addons/backgrounds)
 - [ ] Add chapters-addon
 - [ ] Add console-addon
 - [ ] Add info-addon

config/storybook/addons.js

@@ -1,3 +1,4 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@storybook/addon-actions/register'
 import '@storybook/addon-links/register'
+import '@storybook/addon-backgrounds/register'

config/storybook/config.js

@@ -4,9 +4,12 @@ import '@/plugins/vuetify'
 
 import '@mdi/font/css/materialdesignicons.css'
 
-// Ensures every story is wrapped in a v-app tag
+// Ensures every story is wrapped in a v-app tag. To enable the Storybook background addon to control the background
+// color we need to add a hack to VApp, as it sets and controls the background color. We set the background-color on
+// VApp to transparent.
 addDecorator(() => ({
-  template: '<v-app><story/></v-app>'
+  template: '<v-app style="background-color: transparent;"><story/></v-app>',
+  style: '.theme--light.application { background-color: transparent; }'
 }))
 
 const req = require.context('@/stories', true, /.stories.js$/)

package.json

@@ -48,6 +48,7 @@
     "@commitlint/config-conventional": "^7.3.1",
     "@mdi/font": "^3.3.92",
     "@storybook/addon-actions": "^4.1.0",
+    "@storybook/addon-backgrounds": "^4.1.7",
     "@storybook/addon-links": "^4.1.0",
     "@vue/cli-plugin-babel": "^3.0.4",
     "@vue/cli-plugin-eslint": "^3.0.4",

src/stories/common.stories.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { storiesOf } from '@storybook/vue'
 import { action } from '@storybook/addon-actions'
+import { withBackgrounds } from '@storybook/addon-backgrounds'
 import { wrapComponent } from './helpers/decorators'
 
 import VBtnPlus from '@/components/common/VBtnPlus.vue'
@@ -12,6 +13,9 @@ export const methods = {
 
 storiesOf('VBtnPlus', module)
   .addDecorator(story => wrapComponent(story, 'xl', 'xs2'))
+  .addDecorator(
+    withBackgrounds([{ name: 'twitter', value: '#00aced', default: true }, { name: 'facebook', value: '#3b5998' }])
+  )
   .add('text with defaults', () => ({
     components: { VBtnPlus },
     template: `<div class="text-xs-center">