feat(addon-viewport): added storybook viewport addon

Added the Storybook Viewport addon. The Viewport addon allows stories to be displayed in different
sizes and layouts in Storybook. This helps build responsive components inside of Storybook. Vuetify
has a 12 point grid system. Built using flex-box, the grid is used to layout an application's
content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes
and orientations. These media types can be added to the viewports of the Viewport addon to simplify
testing how Vuetify components respond to different media breakpoints.

README.md

@@ -339,9 +339,9 @@ The following section describes the steps that need to be execute to manually cr
 
 This section only describes those addon's that require special instructions to work correctly with Vue or Vuetify.
 
-### addon-background
+### addon-backgrounds
 
-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:
+The `addon-backgrounds` is used to change background colors inside the preview in Storybook. 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(() => ({
@@ -359,6 +359,64 @@ addDecorator(() => ({
 }))
 ```
 
+### addon-viewport
+
+The Viewport addon allows stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of Storybook. Vuetify has a 12 point grid system. Built using flex-box, the grid is used to layout an application's content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes and orientations. These media types can be added to the viewports of the Viewport addon to simplify testing how Vuetify components respond to different media breakpoints.
+
+ Add the following to the `./config/storybook/config.js` file:
+
+ ```js
+ import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+ const vuetifyViewports = {
+   VuetifyLg: {
+     name: 'Vuetify LG',
+     styles: {
+       width: '1904px'
+     },
+     type: 'desktop'
+   },
+   VuetifyXs: {
+     name: 'Vuetify XS',
+     styles: {
+       width: '600px'
+     },
+     type: 'mobile'
+   },
+   VuetifySm: {
+     name: 'Vuetify SM',
+     styles: {
+       width: '960px'
+     },
+     type: 'mobile'
+   },
+   VuetifyMd: {
+     name: 'Vuetify MD',
+     styles: {
+       width: '1264px'
+     },
+     type: 'tablet'
+   },
+   VuetifyXl: {
+     name: 'Vuetify XL',
+     styles: {
+       width: '4096px'
+     },
+     type: 'desktop'
+   }
+ }
+
+ configureViewport({
+   defaultViewport: 'VuetifyMd',
+   viewports: {
+     ...vuetifyViewports,
+     ...INITIAL_VIEWPORTS
+   }
+ })
+```
+
+**Note** Vuetify MD viewport is set as default, so that it is selected when a story is opened.
+
 ## Project setup
 
 ```

config/storybook/addons.js

@@ -2,3 +2,4 @@
 import '@storybook/addon-actions/register'
 import '@storybook/addon-links/register'
 import '@storybook/addon-backgrounds/register'
+import '@storybook/addon-viewport/register'

config/storybook/config.js

@@ -1,9 +1,58 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import { configure, addDecorator } from '@storybook/vue'
 import '@/plugins/vuetify'
 
 import '@mdi/font/css/materialdesignicons.css'
 
+// Vuetify has a 12 point grid system. Built using flex-box, the grid is used to layout an application's content. It
+// contains 5 types of media breakpoints that are used for targeting specific screen sizes and orientations.
+const vuetifyViewports = {
+  VuetifyLg: {
+    name: 'Vuetify LG',
+    styles: {
+      width: '1904px'
+    },
+    type: 'desktop'
+  },
+  VuetifyXs: {
+    name: 'Vuetify XS',
+    styles: {
+      width: '600px'
+    },
+    type: 'mobile'
+  },
+  VuetifySm: {
+    name: 'Vuetify SM',
+    styles: {
+      width: '960px'
+    },
+    type: 'mobile'
+  },
+  VuetifyMd: {
+    name: 'Vuetify MD',
+    styles: {
+      width: '1264px'
+    },
+    type: 'tablet'
+  },
+  VuetifyXl: {
+    name: 'Vuetify XL',
+    styles: {
+      width: '4096px'
+    },
+    type: 'desktop'
+  }
+}
+
+configureViewport({
+  defaultViewport: 'VuetifyMd',
+  viewports: {
+    ...vuetifyViewports,
+    ...INITIAL_VIEWPORTS
+  }
+})
+
 // 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.

package.json

@@ -50,6 +50,7 @@
     "@storybook/addon-actions": "^4.1.0",
     "@storybook/addon-backgrounds": "^4.1.7",
     "@storybook/addon-links": "^4.1.0",
+    "@storybook/addon-viewport": "^4.1.7",
     "@vue/cli-plugin-babel": "^3.0.4",
     "@vue/cli-plugin-eslint": "^3.0.4",
     "@vue/cli-plugin-unit-jest": "^3.0.4",