From 9f8f2dd29af406bd128bd426c0f0c2a68728749f Mon Sep 17 00:00:00 2001 From: nidkil Date: Sat, 19 Jan 2019 20:49:49 +0100 Subject: [PATCH] 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 | 62 ++++++++++++++++++++++++++++++++++++-- config/storybook/addons.js | 1 + config/storybook/config.js | 49 ++++++++++++++++++++++++++++++ package-lock.json | 16 ++++++++++ package.json | 1 + 5 files changed, 127 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5cdd062..876a5ea 100644 --- a/README.md +++ b/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 ``` diff --git a/config/storybook/addons.js b/config/storybook/addons.js index 176310c..068359f 100644 --- a/config/storybook/addons.js +++ b/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' diff --git a/config/storybook/config.js b/config/storybook/config.js index 75a8de2..79ca093 100644 --- a/config/storybook/config.js +++ b/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. diff --git a/package-lock.json b/package-lock.json index b03877c..b780972 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1436,6 +1436,22 @@ "prop-types": "^15.6.2" } }, + "@storybook/addon-viewport": { + "version": "4.1.7", + "resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-4.1.7.tgz", + "integrity": "sha512-5Bs22JPYTaszk96y73Hqy9xszsb+S426Ts3sbmOeleouohrWdt6OHtG68qPf+hF3DqemBn2Llf4Qd1WlMthjTA==", + "dev": true, + "requires": { + "@emotion/styled": "^0.10.6", + "@storybook/addons": "4.1.7", + "@storybook/components": "4.1.7", + "@storybook/core-events": "4.1.7", + "core-js": "^2.5.7", + "global": "^4.3.2", + "prop-types": "^15.6.2", + "util-deprecate": "^1.0.2" + } + }, "@storybook/addons": { "version": "4.1.7", "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-4.1.7.tgz", diff --git a/package.json b/package.json index 845b074..1066273 100644 --- a/package.json +++ b/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",