From 28f75ecffbd46a66cbf1036a36913afcb8bf6ddd Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Sun, 25 Feb 2018 22:41:20 +0100
Subject: [PATCH 1/9] Move manager related files to manager directory

---
 addons/viewport/src/{ => manager}/components/Panel.js           | 0
 addons/viewport/src/{ => manager}/components/RotateViewport.js  | 0
 addons/viewport/src/{ => manager}/components/SelectViewport.js  | 0
 addons/viewport/src/{ => manager}/components/styles.js          | 0
 .../viewport/src/{ => manager}/components/tests/Panel.test.js   | 0
 .../src/{ => manager}/components/tests/RotateViewport.test.js   | 0
 .../src/{ => manager}/components/tests/SelectViewport.test.js   | 0
 .../src/{ => manager}/components/tests/viewportInfo.spec.js     | 0
 addons/viewport/src/{ => manager}/components/viewportInfo.js    | 0
 addons/viewport/src/{manager.js => manager/index.js}            | 0
 .../src/{tests/manager.test.js => manager/tests/index.test.js}  | 2 +-
 11 files changed, 1 insertion(+), 1 deletion(-)
 rename addons/viewport/src/{ => manager}/components/Panel.js (100%)
 rename addons/viewport/src/{ => manager}/components/RotateViewport.js (100%)
 rename addons/viewport/src/{ => manager}/components/SelectViewport.js (100%)
 rename addons/viewport/src/{ => manager}/components/styles.js (100%)
 rename addons/viewport/src/{ => manager}/components/tests/Panel.test.js (100%)
 rename addons/viewport/src/{ => manager}/components/tests/RotateViewport.test.js (100%)
 rename addons/viewport/src/{ => manager}/components/tests/SelectViewport.test.js (100%)
 rename addons/viewport/src/{ => manager}/components/tests/viewportInfo.spec.js (100%)
 rename addons/viewport/src/{ => manager}/components/viewportInfo.js (100%)
 rename addons/viewport/src/{manager.js => manager/index.js} (100%)
 rename addons/viewport/src/{tests/manager.test.js => manager/tests/index.test.js} (92%)

diff --git a/addons/viewport/src/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
similarity index 100%
rename from addons/viewport/src/components/Panel.js
rename to addons/viewport/src/manager/components/Panel.js
diff --git a/addons/viewport/src/components/RotateViewport.js b/addons/viewport/src/manager/components/RotateViewport.js
similarity index 100%
rename from addons/viewport/src/components/RotateViewport.js
rename to addons/viewport/src/manager/components/RotateViewport.js
diff --git a/addons/viewport/src/components/SelectViewport.js b/addons/viewport/src/manager/components/SelectViewport.js
similarity index 100%
rename from addons/viewport/src/components/SelectViewport.js
rename to addons/viewport/src/manager/components/SelectViewport.js
diff --git a/addons/viewport/src/components/styles.js b/addons/viewport/src/manager/components/styles.js
similarity index 100%
rename from addons/viewport/src/components/styles.js
rename to addons/viewport/src/manager/components/styles.js
diff --git a/addons/viewport/src/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
similarity index 100%
rename from addons/viewport/src/components/tests/Panel.test.js
rename to addons/viewport/src/manager/components/tests/Panel.test.js
diff --git a/addons/viewport/src/components/tests/RotateViewport.test.js b/addons/viewport/src/manager/components/tests/RotateViewport.test.js
similarity index 100%
rename from addons/viewport/src/components/tests/RotateViewport.test.js
rename to addons/viewport/src/manager/components/tests/RotateViewport.test.js
diff --git a/addons/viewport/src/components/tests/SelectViewport.test.js b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
similarity index 100%
rename from addons/viewport/src/components/tests/SelectViewport.test.js
rename to addons/viewport/src/manager/components/tests/SelectViewport.test.js
diff --git a/addons/viewport/src/components/tests/viewportInfo.spec.js b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
similarity index 100%
rename from addons/viewport/src/components/tests/viewportInfo.spec.js
rename to addons/viewport/src/manager/components/tests/viewportInfo.spec.js
diff --git a/addons/viewport/src/components/viewportInfo.js b/addons/viewport/src/manager/components/viewportInfo.js
similarity index 100%
rename from addons/viewport/src/components/viewportInfo.js
rename to addons/viewport/src/manager/components/viewportInfo.js
diff --git a/addons/viewport/src/manager.js b/addons/viewport/src/manager/index.js
similarity index 100%
rename from addons/viewport/src/manager.js
rename to addons/viewport/src/manager/index.js
diff --git a/addons/viewport/src/tests/manager.test.js b/addons/viewport/src/manager/tests/index.test.js
similarity index 92%
rename from addons/viewport/src/tests/manager.test.js
rename to addons/viewport/src/manager/tests/index.test.js
index 6f5bf00af8a5..815824c6e603 100644
--- a/addons/viewport/src/tests/manager.test.js
+++ b/addons/viewport/src/manager/tests/index.test.js
@@ -1,5 +1,5 @@
 import addons from '@storybook/addons';
-import { init, addChannel } from '../manager';
+import { init, addChannel } from '../';
 
 jest.mock('@storybook/addons');
 

From e2daecf4b4878835725fd93d0e2462304479b438 Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Sun, 25 Feb 2018 22:48:51 +0100
Subject: [PATCH 2/9] Move addon IDs to shared directory

---
 addons/viewport/src/manager/components/Panel.js | 5 +++--
 addons/viewport/src/manager/index.js            | 3 +--
 addons/viewport/src/shared/index.js             | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)
 create mode 100644 addons/viewport/src/shared/index.js

diff --git a/addons/viewport/src/manager/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
index 39d080912ff2..1056888938d4 100644
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@@ -6,6 +6,7 @@ import { document } from 'global';
 import { viewports, defaultViewport, resetViewport } from './viewportInfo';
 import { SelectViewport } from './SelectViewport';
 import { RotateViewport } from './RotateViewport';
+import { UPDATE_VIEWPORT_EVENT_ID } from '../../shared';
 
 import * as styles from './styles';
 
@@ -29,7 +30,7 @@ export class Panel extends Component {
       isLandscape: false,
     };
 
-    this.props.channel.on('addon:viewport:update', this.changeViewport);
+    this.props.channel.on(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
   }
 
   componentDidMount() {
@@ -37,7 +38,7 @@ export class Panel extends Component {
   }
 
   componentWillUnmount() {
-    this.props.channel.removeListener('addon:viewport:update', this.changeViewport);
+    this.props.channel.removeListener(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
   }
 
   iframe = undefined;
diff --git a/addons/viewport/src/manager/index.js b/addons/viewport/src/manager/index.js
index 9f86b6d02f80..77cc056e1b6e 100644
--- a/addons/viewport/src/manager/index.js
+++ b/addons/viewport/src/manager/index.js
@@ -3,8 +3,7 @@ import addons from '@storybook/addons';
 
 import { Panel } from './components/Panel';
 
-const ADDON_ID = 'storybook-addon-viewport';
-const PANEL_ID = `${ADDON_ID}/addon-panel`;
+import { ADDON_ID, PANEL_ID } from '../shared';
 
 const addChannel = api => {
   const channel = addons.getChannel();
diff --git a/addons/viewport/src/shared/index.js b/addons/viewport/src/shared/index.js
new file mode 100644
index 000000000000..b08d06bc1644
--- /dev/null
+++ b/addons/viewport/src/shared/index.js
@@ -0,0 +1,3 @@
+export const ADDON_ID = 'storybook-addon-viewport';
+export const PANEL_ID = `${ADDON_ID}/addon-panel`;
+export const UPDATE_VIEWPORT_EVENT_ID = `addon:viewport:update`;

From 7ad2e8cc9f5a65c37d74c74ff5a8434a531a354a Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Sun, 25 Feb 2018 23:10:35 +0100
Subject: [PATCH 3/9] Decouple initial viewports from SelectViewport component

---
 .../viewport/src/manager/components/Panel.js  |  9 +++++---
 .../src/manager/components/SelectViewport.js  |  5 ++--
 .../manager/components/tests/Panel.test.js    | 23 ++++++++++++++++---
 .../components/tests/SelectViewport.test.js   | 10 ++++----
 .../components/tests/viewportInfo.spec.js     |  8 +++----
 .../src/manager/components/viewportInfo.js    |  2 +-
 6 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/addons/viewport/src/manager/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
index 1056888938d4..122c03472669 100644
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { baseFonts } from '@storybook/components';
 import { document } from 'global';
 
-import { viewports, defaultViewport, resetViewport } from './viewportInfo';
+import { initialViewports, defaultViewport, resetViewport } from './viewportInfo';
 import { SelectViewport } from './SelectViewport';
 import { RotateViewport } from './RotateViewport';
 import { UPDATE_VIEWPORT_EVENT_ID } from '../../shared';
@@ -27,6 +27,7 @@ export class Panel extends Component {
     super(props, context);
     this.state = {
       viewport: defaultViewport,
+      viewports: initialViewports,
       isLandscape: false,
     };
 
@@ -64,7 +65,7 @@ export class Panel extends Component {
   };
 
   updateIframe = () => {
-    const { viewport: viewportKey, isLandscape } = this.state;
+    const { viewports, viewport: viewportKey, isLandscape } = this.state;
     const viewport = viewports[viewportKey] || resetViewport;
 
     if (!this.iframe) {
@@ -82,7 +83,7 @@ export class Panel extends Component {
   };
 
   render() {
-    const { isLandscape, viewport } = this.state;
+    const { isLandscape, viewport, viewports } = this.state;
 
     const disableDefault = viewport === defaultViewport;
     const disabledStyles = disableDefault ? styles.disabled : {};
@@ -97,6 +98,8 @@ export class Panel extends Component {
     return (
       <div style={containerStyles}>
         <SelectViewport
+          viewports={viewports}
+          defaultViewport={defaultViewport}
           activeViewport={viewport}
           onChange={e => this.changeViewport(e.target.value)}
         />
diff --git a/addons/viewport/src/manager/components/SelectViewport.js b/addons/viewport/src/manager/components/SelectViewport.js
index 230e360239d8..0312a06263cd 100644
--- a/addons/viewport/src/manager/components/SelectViewport.js
+++ b/addons/viewport/src/manager/components/SelectViewport.js
@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { viewports, defaultViewport } from './viewportInfo';
 import * as styles from './styles';
 
-export function SelectViewport({ activeViewport, onChange }) {
+export function SelectViewport({ viewports, defaultViewport, activeViewport, onChange }) {
   return (
     <div style={styles.row}>
       <label htmlFor="device" style={styles.label}>
@@ -25,4 +24,6 @@ export function SelectViewport({ activeViewport, onChange }) {
 SelectViewport.propTypes = {
   onChange: PropTypes.func.isRequired,
   activeViewport: PropTypes.string.isRequired,
+  viewports: PropTypes.shape({}).isRequired,
+  defaultViewport: PropTypes.string.isRequired,
 };
diff --git a/addons/viewport/src/manager/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
index 4ad4a189185a..e2ae6939722b 100644
--- a/addons/viewport/src/manager/components/tests/Panel.test.js
+++ b/addons/viewport/src/manager/components/tests/Panel.test.js
@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { document } from 'global';
 
 import { Panel } from '../Panel';
-import { viewports, defaultViewport, resetViewport } from '../viewportInfo';
+import { initialViewports, defaultViewport, resetViewport } from '../viewportInfo';
 import * as styles from '../styles';
 
 describe('Viewport/Panel', () => {
@@ -24,6 +24,7 @@ describe('Viewport/Panel', () => {
     it('creates the initial state', () => {
       expect(subject.instance().state).toEqual({
         viewport: defaultViewport,
+        viewports: initialViewports,
         isLandscape: false,
       });
     });
@@ -76,13 +77,13 @@ describe('Viewport/Panel', () => {
 
     describe('new viewport', () => {
       beforeEach(() => {
-        subject.instance().changeViewport(viewports[0]);
+        subject.instance().changeViewport(initialViewports[0]);
       });
 
       it('sets the state with the new information', () => {
         expect(subject.instance().setState).toHaveBeenCalledWith(
           {
-            viewport: viewports[0],
+            viewport: initialViewports[0],
             isLandscape: false,
           },
           subject.instance().updateIframe
@@ -204,6 +205,22 @@ describe('Viewport/Panel', () => {
         );
       });
 
+      it('passes the defaultViewport', () => {
+        expect(select.props()).toEqual(
+          expect.objectContaining({
+            defaultViewport,
+          })
+        );
+      });
+
+      it('passes the initialViewports', () => {
+        expect(select.props()).toEqual(
+          expect.objectContaining({
+            viewports: initialViewports,
+          })
+        );
+      });
+
       it('onChange it updates the viewport', () => {
         const e = { target: { value: 'iphone6' } };
         select.simulate('change', e);
diff --git a/addons/viewport/src/manager/components/tests/SelectViewport.test.js b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
index f43d30763d5c..067c87659a9c 100644
--- a/addons/viewport/src/manager/components/tests/SelectViewport.test.js
+++ b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { SelectViewport } from '../SelectViewport';
-import { viewports, defaultViewport } from '../viewportInfo';
+import { initialViewports, defaultViewport } from '../viewportInfo';
 import * as styles from '../styles';
 
 describe('Viewport/SelectViewport', () => {
@@ -12,6 +12,8 @@ describe('Viewport/SelectViewport', () => {
     props = {
       onChange: jest.fn(),
       activeViewport: defaultViewport,
+      viewports: initialViewports,
+      defaultViewport,
     };
 
     subject = shallow(<SelectViewport {...props} />);
@@ -35,7 +37,7 @@ describe('Viewport/SelectViewport', () => {
     });
 
     describe('dynamic options', () => {
-      const viewportKeys = Object.keys(viewports);
+      const viewportKeys = Object.keys(initialViewports);
       it('has at least 1 option', () => {
         expect(viewportKeys.length).toBeGreaterThan(0);
       });
@@ -43,9 +45,9 @@ describe('Viewport/SelectViewport', () => {
       viewportKeys.forEach(key => {
         let option;
 
-        it(`renders an option for ${viewports[key].name}`, () => {
+        it(`renders an option for ${initialViewports[key].name}`, () => {
           option = subject.find(`[value="${key}"]`);
-          expect(option.text()).toEqual(viewports[key].name);
+          expect(option.text()).toEqual(initialViewports[key].name);
         });
       });
     });
diff --git a/addons/viewport/src/manager/components/tests/viewportInfo.spec.js b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
index a2baa2fd03bf..c6c24ed50bcd 100644
--- a/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
+++ b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
@@ -1,12 +1,12 @@
-import { viewports, resetViewport, configuredStyles } from '../viewportInfo';
+import { initialViewports, resetViewport, configuredStyles } from '../viewportInfo';
 
 describe('Viewport/constants', () => {
-  describe('viewports', () => {
+  describe('initialViewports', () => {
     it('includes the default styles on every custom viewport', () => {
-      const keys = Object.keys(viewports);
+      const keys = Object.keys(initialViewports);
 
       keys.forEach(key => {
-        expect(viewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
+        expect(initialViewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
       });
     });
   });
diff --git a/addons/viewport/src/manager/components/viewportInfo.js b/addons/viewport/src/manager/components/viewportInfo.js
index df969539910d..6a2bdd525527 100644
--- a/addons/viewport/src/manager/components/viewportInfo.js
+++ b/addons/viewport/src/manager/components/viewportInfo.js
@@ -18,7 +18,7 @@ export const resetViewport = {
   },
 };
 
-export const viewports = {
+export const initialViewports = {
   iphone5: {
     name: 'iPhone 5',
     styles: {

From 9b1370f3d6cb545afd910ef8bd47916550e5bf4c Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Sun, 25 Feb 2018 23:46:15 +0100
Subject: [PATCH 4/9] Add support to configure viewport addon  - By default,
 viewport addon is reading both initial viewports' set and default viewport
 from `INITIAL_VIEWPORTS` and `DEFAULT_VIEWPORT` respectively which are
 exported by the addon  - `configure` function is exported which accepts an
 object with `defaultViewport` and `viewports`  - Change the default viewport
 by setting `defaultViewport` property to the key of the viewport (e.g.
 `configure({ defaultViewport: 'iphone5' })`)  - Replace the entire viewports
 by setting brand new viewports to `viewports` property (e.g. `configure({
 viewports: { brandNewDevice: { ... } } })`)  - Add custom viewports by first
 merging both the `INITIAL_VIEWPORTS` and your custom viewports, and then pass
 the result as `viewports` to configure function

---
 addons/viewport/package.json                  |  2 +-
 addons/viewport/preview.js                    |  5 +
 .../viewport/src/manager/components/Panel.js  | 55 +++++++++--
 .../manager/components/tests/Panel.test.js    | 95 ++++++++++++++++---
 .../components/tests/SelectViewport.test.js   | 16 ++--
 .../components/tests/viewportInfo.spec.js     | 64 +++++++++++--
 .../src/manager/components/viewportInfo.js    | 85 +++++------------
 addons/viewport/src/preview/index.js          | 12 +++
 .../viewport/src/preview/tests/index.test.js  | 27 ++++++
 addons/viewport/src/shared/index.js           | 55 ++++++++++-
 10 files changed, 315 insertions(+), 101 deletions(-)
 create mode 100644 addons/viewport/preview.js
 create mode 100644 addons/viewport/src/preview/index.js
 create mode 100644 addons/viewport/src/preview/tests/index.test.js

diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 554ab96c3414..3ac45cfa3016 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -6,7 +6,7 @@
     "storybook"
   ],
   "license": "MIT",
-  "main": "register.js",
+  "main": "preview.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
diff --git a/addons/viewport/preview.js b/addons/viewport/preview.js
new file mode 100644
index 000000000000..1a2ee6e366df
--- /dev/null
+++ b/addons/viewport/preview.js
@@ -0,0 +1,5 @@
+const preview = require('./dist/preview');
+
+exports.configure = preview.configure;
+exports.DEFAULT_VIEWPORT = preview.DEFAULT_VIEWPORT;
+exports.INITIAL_VIEWPORTS = preview.INITIAL_VIEWPORTS;
diff --git a/addons/viewport/src/manager/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
index 122c03472669..38bea0e3a66c 100644
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@@ -3,10 +3,15 @@ import PropTypes from 'prop-types';
 import { baseFonts } from '@storybook/components';
 import { document } from 'global';
 
-import { initialViewports, defaultViewport, resetViewport } from './viewportInfo';
+import { resetViewport, viewportsTransformer } from './viewportInfo';
 import { SelectViewport } from './SelectViewport';
 import { RotateViewport } from './RotateViewport';
-import { UPDATE_VIEWPORT_EVENT_ID } from '../../shared';
+import {
+  CONFIGURE_VIEWPORT_EVENT_ID,
+  UPDATE_VIEWPORT_EVENT_ID,
+  INITIAL_VIEWPORTS,
+  DEFAULT_VIEWPORT,
+} from '../../shared';
 
 import * as styles from './styles';
 
@@ -20,14 +25,16 @@ const containerStyles = {
 
 export class Panel extends Component {
   static propTypes = {
-    channel: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+    channel: PropTypes.shape({}).isRequired,
+    api: PropTypes.shape({}).isRequired,
   };
 
   constructor(props, context) {
     super(props, context);
     this.state = {
-      viewport: defaultViewport,
-      viewports: initialViewports,
+      viewport: DEFAULT_VIEWPORT,
+      defaultViewport: DEFAULT_VIEWPORT,
+      viewports: viewportsTransformer(INITIAL_VIEWPORTS),
       isLandscape: false,
     };
 
@@ -35,13 +42,47 @@ export class Panel extends Component {
   }
 
   componentDidMount() {
+    const { channel, api } = this.props;
+
     this.iframe = document.getElementById(storybookIframe);
+
+    channel.on(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
+
+    this.unsubscribeFromOnStory = api.onStory(() => {
+      this.changeViewport(this.state.defaultViewport);
+    });
   }
 
   componentWillUnmount() {
-    this.props.channel.removeListener(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
+    const { channel } = this.props;
+
+    if (this.unsubscribeFromOnStory) {
+      this.unsubscribeFromOnStory();
+    }
+    
+    channel.removeListener(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
+    channel.removeListener(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
   }
 
+  configure = ({ viewports = INITIAL_VIEWPORTS, defaultViewport = DEFAULT_VIEWPORT }) => {
+    if (Object.keys(viewports).length === 0) {
+      viewports = INITIAL_VIEWPORTS;
+    }
+
+    if (!(defaultViewport in viewports)) {
+      defaultViewport = Object.keys(viewports)[0];
+    }
+
+    this.setState(
+      {
+        defaultViewport,
+        viewport: defaultViewport,
+        viewports: viewportsTransformer(viewports),
+      },
+      this.updateIframe
+    );
+  };
+
   iframe = undefined;
 
   changeViewport = viewport => {
@@ -83,7 +124,7 @@ export class Panel extends Component {
   };
 
   render() {
-    const { isLandscape, viewport, viewports } = this.state;
+    const { isLandscape, defaultViewport, viewport, viewports } = this.state;
 
     const disableDefault = viewport === defaultViewport;
     const disabledStyles = disableDefault ? styles.disabled : {};
diff --git a/addons/viewport/src/manager/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
index e2ae6939722b..c366ad1c606f 100644
--- a/addons/viewport/src/manager/components/tests/Panel.test.js
+++ b/addons/viewport/src/manager/components/tests/Panel.test.js
@@ -3,8 +3,9 @@ import { shallow } from 'enzyme';
 import { document } from 'global';
 
 import { Panel } from '../Panel';
-import { initialViewports, defaultViewport, resetViewport } from '../viewportInfo';
+import { resetViewport, viewportsTransformer, configuredStyles } from '../viewportInfo';
 import * as styles from '../styles';
+import { DEFAULT_VIEWPORT, INITIAL_VIEWPORTS } from '../../../shared';
 
 describe('Viewport/Panel', () => {
   const props = {
@@ -12,6 +13,9 @@ describe('Viewport/Panel', () => {
       on: jest.fn(),
       removeListener: jest.fn(),
     },
+    api: {
+      onStory: jest.fn()
+    }
   };
 
   let subject;
@@ -23,13 +27,14 @@ describe('Viewport/Panel', () => {
   describe('construct', () => {
     it('creates the initial state', () => {
       expect(subject.instance().state).toEqual({
-        viewport: defaultViewport,
-        viewports: initialViewports,
+        viewport: DEFAULT_VIEWPORT,
+        defaultViewport: DEFAULT_VIEWPORT,
+        viewports: viewportsTransformer(INITIAL_VIEWPORTS),
         isLandscape: false,
       });
     });
 
-    it('listens on the channel', () => {
+    it('listens on `update` channel', () => {
       expect(props.channel.on).toHaveBeenCalledWith(
         'addon:viewport:update',
         subject.instance().changeViewport
@@ -54,6 +59,13 @@ describe('Viewport/Panel', () => {
     it('gets the iframe', () => {
       expect(subject.instance().iframe).toEqual('iframe');
     });
+
+    it('listens on the `configure` topic', () => {
+      expect(props.channel.on).toHaveBeenCalledWith(
+        'addon:viewport:configure',
+        subject.instance().configure
+      );
+    });
   });
 
   describe('componentWillUnmount', () => {
@@ -61,12 +73,65 @@ describe('Viewport/Panel', () => {
       subject.instance().componentWillUnmount();
     });
 
-    it('removes the channel listener', () => {
+    it('removes `update` channel listener', () => {
       expect(props.channel.removeListener).toHaveBeenCalledWith(
         'addon:viewport:update',
         subject.instance().changeViewport
       );
     });
+
+    it('removes `configure` channel listener', () => {
+      expect(props.channel.removeListener).toHaveBeenCalledWith(
+        'addon:viewport:configure',
+        subject.instance().configure
+      );
+    });
+  });
+
+  describe('configure', () => {
+    beforeEach(() => {
+      subject.instance().setState = jest.fn();
+      subject.instance().updateIframe = jest.fn();
+      subject.instance().configure({
+        defaultViewport: 'iphone6',
+        viewports: {
+          foo: {
+            styles: {
+              width: '50px'
+            }
+          },
+          bar: {
+            styles: {
+              width: '100px'
+            }
+          }
+        }
+      });
+    });
+
+    it('sets the state with the new information', () => {
+      expect(subject.instance().setState).toHaveBeenCalledWith(
+        {
+          defaultViewport: 'iphone6',
+          viewport: 'iphone6',
+          viewports: {
+            foo: {
+              styles: {
+                width: '50px',
+                ...configuredStyles
+              }
+            },
+            bar: {
+              styles: {
+                width: '100px',
+                ...configuredStyles
+              }
+            }
+          }
+        },
+        subject.instance().updateIframe
+      );
+    });
   });
 
   describe('changeViewport', () => {
@@ -77,13 +142,13 @@ describe('Viewport/Panel', () => {
 
     describe('new viewport', () => {
       beforeEach(() => {
-        subject.instance().changeViewport(initialViewports[0]);
+        subject.instance().changeViewport(INITIAL_VIEWPORTS[0]);
       });
 
       it('sets the state with the new information', () => {
         expect(subject.instance().setState).toHaveBeenCalledWith(
           {
-            viewport: initialViewports[0],
+            viewport: INITIAL_VIEWPORTS[0],
             isLandscape: false,
           },
           subject.instance().updateIframe
@@ -93,7 +158,7 @@ describe('Viewport/Panel', () => {
 
     describe('same as previous viewport', () => {
       beforeEach(() => {
-        subject.instance().changeViewport(defaultViewport);
+        subject.instance().changeViewport(DEFAULT_VIEWPORT);
       });
 
       it('doesnt update the state', () => {
@@ -185,7 +250,7 @@ describe('Viewport/Panel', () => {
 
       it('toggles the landscape on click', () => {
         resetBtn.simulate('click');
-        expect(subject.instance().changeViewport).toHaveBeenCalledWith(defaultViewport);
+        expect(subject.instance().changeViewport).toHaveBeenCalledWith(DEFAULT_VIEWPORT);
       });
     });
 
@@ -200,7 +265,7 @@ describe('Viewport/Panel', () => {
       it('passes the activeViewport', () => {
         expect(select.props()).toEqual(
           expect.objectContaining({
-            activeViewport: defaultViewport,
+            activeViewport: DEFAULT_VIEWPORT,
           })
         );
       });
@@ -208,15 +273,15 @@ describe('Viewport/Panel', () => {
       it('passes the defaultViewport', () => {
         expect(select.props()).toEqual(
           expect.objectContaining({
-            defaultViewport,
+            defaultViewport: DEFAULT_VIEWPORT,
           })
         );
       });
 
-      it('passes the initialViewports', () => {
+      it('passes the INITIAL_VIEWPORTS', () => {
         expect(select.props()).toEqual(
           expect.objectContaining({
-            viewports: initialViewports,
+            viewports: viewportsTransformer(INITIAL_VIEWPORTS),
           })
         );
       });
@@ -243,7 +308,7 @@ describe('Viewport/Panel', () => {
 
       describe('is on the default viewport', () => {
         beforeEach(() => {
-          subject.setState({ viewport: defaultViewport });
+          subject.setState({ viewport: DEFAULT_VIEWPORT });
         });
 
         it('sets the disabled property', () => {
@@ -251,7 +316,7 @@ describe('Viewport/Panel', () => {
         });
       });
 
-      describe('is on a responsive viewport', () => {
+      describe('is on a non-default viewport', () => {
         beforeEach(() => {
           subject.setState({ viewport: 'iphone6' });
           toggle = subject.find('RotateViewport');
diff --git a/addons/viewport/src/manager/components/tests/SelectViewport.test.js b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
index 067c87659a9c..f79ac46645ae 100644
--- a/addons/viewport/src/manager/components/tests/SelectViewport.test.js
+++ b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { SelectViewport } from '../SelectViewport';
-import { initialViewports, defaultViewport } from '../viewportInfo';
+import { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../../../shared';
 import * as styles from '../styles';
 
 describe('Viewport/SelectViewport', () => {
@@ -11,9 +11,9 @@ describe('Viewport/SelectViewport', () => {
   beforeEach(() => {
     props = {
       onChange: jest.fn(),
-      activeViewport: defaultViewport,
-      viewports: initialViewports,
-      defaultViewport,
+      activeViewport: DEFAULT_VIEWPORT,
+      viewports: INITIAL_VIEWPORTS,
+      defaultViewport: DEFAULT_VIEWPORT,
     };
 
     subject = shallow(<SelectViewport {...props} />);
@@ -33,11 +33,11 @@ describe('Viewport/SelectViewport', () => {
   describe('select', () => {
     it('has a default option first', () => {
       const firstOption = subject.find('option').first();
-      expect(firstOption.props().value).toEqual(defaultViewport);
+      expect(firstOption.props().value).toEqual(DEFAULT_VIEWPORT);
     });
 
     describe('dynamic options', () => {
-      const viewportKeys = Object.keys(initialViewports);
+      const viewportKeys = Object.keys(INITIAL_VIEWPORTS);
       it('has at least 1 option', () => {
         expect(viewportKeys.length).toBeGreaterThan(0);
       });
@@ -45,9 +45,9 @@ describe('Viewport/SelectViewport', () => {
       viewportKeys.forEach(key => {
         let option;
 
-        it(`renders an option for ${initialViewports[key].name}`, () => {
+        it(`renders an option for ${INITIAL_VIEWPORTS[key].name}`, () => {
           option = subject.find(`[value="${key}"]`);
-          expect(option.text()).toEqual(initialViewports[key].name);
+          expect(option.text()).toEqual(INITIAL_VIEWPORTS[key].name);
         });
       });
     });
diff --git a/addons/viewport/src/manager/components/tests/viewportInfo.spec.js b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
index c6c24ed50bcd..c154632f8dbd 100644
--- a/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
+++ b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
@@ -1,19 +1,63 @@
-import { initialViewports, resetViewport, configuredStyles } from '../viewportInfo';
+import {
+  resetViewport,
+  configuredStyles,
+  applyStyles,
+  viewportsTransformer
+} from '../viewportInfo';
 
 describe('Viewport/constants', () => {
-  describe('initialViewports', () => {
-    it('includes the default styles on every custom viewport', () => {
-      const keys = Object.keys(initialViewports);
+  describe('resetViewport', () => {
+    it('does not include the styles for a responsive iframe', () => {
+      expect(resetViewport).not.toEqual(expect.objectContaining(configuredStyles));
+    });
+  });
 
-      keys.forEach(key => {
-        expect(initialViewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
-      });
+  describe('applyStyles', () => {
+    it('creates a new viewport with all given styles applied', () => {
+      const viewport = {
+        styles: {
+          width: '50px',
+        },
+      };
+      const styles = {
+        foo: 'bar',
+        john: 'doe',
+      };
+      const newViewport = applyStyles(viewport, styles);
+
+      expect(newViewport.styles).toEqual(
+        expect.objectContaining({
+          width: '50px',
+          foo: 'bar',
+          john: 'doe',
+        })
+      );
     });
   });
 
-  describe('resetViewport', () => {
-    it('does not include the styles for a responsive iframe', () => {
-      expect(resetViewport).not.toEqual(expect.objectContaining(configuredStyles));
+  describe('viewportsTransformer', () => {
+    it('includes the default styles on every viewport', () => {
+      const viewports = {
+        foo: {
+          styles: {
+            width: '50px'
+          }
+        },
+        bar: {
+          styles: {
+            width: '100px'
+          }
+        }
+      };
+
+      const transformedViewports = viewportsTransformer(viewports);
+      const keys = Object.keys(transformedViewports);
+
+      keys.forEach(key => {
+        expect(transformedViewports[key].styles).toEqual(
+          expect.objectContaining(configuredStyles)
+        );
+      });
     });
   });
 });
diff --git a/addons/viewport/src/manager/components/viewportInfo.js b/addons/viewport/src/manager/components/viewportInfo.js
index 6a2bdd525527..b101c211ba5c 100644
--- a/addons/viewport/src/manager/components/viewportInfo.js
+++ b/addons/viewport/src/manager/components/viewportInfo.js
@@ -5,7 +5,6 @@ export const configuredStyles = {
   boxShadow: 'rgba(0,0,0,0.2) 0px 0px 60px 12px',
 };
 
-export const defaultViewport = 'default';
 export const resetViewport = {
   name: 'Reset',
   styles: {
@@ -18,61 +17,29 @@ export const resetViewport = {
   },
 };
 
-export const initialViewports = {
-  iphone5: {
-    name: 'iPhone 5',
-    styles: {
-      height: '568px',
-      width: '320px',
-      ...configuredStyles,
-    },
-  },
-  iphone6: {
-    name: 'iPhone 6',
-    styles: {
-      height: '667px',
-      width: '375px',
-      ...configuredStyles,
-    },
-  },
-  iphone6p: {
-    name: 'iPhone 6 Plus',
-    styles: {
-      height: '736px',
-      width: '414px',
-      ...configuredStyles,
-    },
-  },
-  ipad: {
-    name: 'iPad',
-    styles: {
-      height: '1024px',
-      width: '768px',
-      ...configuredStyles,
-    },
-  },
-  galaxys5: {
-    name: 'Galaxy S5',
-    styles: {
-      height: '640px',
-      width: '360px',
-      ...configuredStyles,
-    },
-  },
-  nexus5x: {
-    name: 'Nexus 5X',
-    styles: {
-      height: '660px',
-      width: '412px',
-      ...configuredStyles,
-    },
-  },
-  nexus6p: {
-    name: 'Nexus 6P',
-    styles: {
-      height: '732px',
-      width: '412px',
-      ...configuredStyles,
-    },
-  },
-};
+export function applyStyles(viewport, styles) {
+  const mixedStyles = {
+    ...viewport.styles,
+    ...styles,
+  };
+
+  return {
+    ...viewport,
+    styles: mixedStyles,
+  };
+}
+
+export function applyDefaultStyles(viewport) {
+  return applyStyles(viewport, configuredStyles);
+}
+
+export const transformViewports = transformer => viewports =>
+  Object.keys(viewports).reduce(
+    (all, key) => ({
+      ...all,
+      [key]: transformer(viewports[key]),
+    }),
+    {}
+  );
+
+export const viewportsTransformer = transformViewports(applyDefaultStyles);
diff --git a/addons/viewport/src/preview/index.js b/addons/viewport/src/preview/index.js
new file mode 100644
index 000000000000..47bd4ae35d2b
--- /dev/null
+++ b/addons/viewport/src/preview/index.js
@@ -0,0 +1,12 @@
+import addons from '@storybook/addons';
+import { CONFIGURE_VIEWPORT_EVENT_ID } from '../shared';
+
+export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../shared';
+
+export function configure(configs = {}) {
+  const channel = addons.getChannel();
+
+  if (channel) {
+    channel.emit(CONFIGURE_VIEWPORT_EVENT_ID, configs);
+  }
+}
diff --git a/addons/viewport/src/preview/tests/index.test.js b/addons/viewport/src/preview/tests/index.test.js
new file mode 100644
index 000000000000..727b1aaa5744
--- /dev/null
+++ b/addons/viewport/src/preview/tests/index.test.js
@@ -0,0 +1,27 @@
+import addons from '@storybook/addons';
+import { configure } from '../';
+
+jest.mock('@storybook/addons');
+
+describe('Viewport preview', () => {
+  const channel = {
+    emit: jest.fn(),
+  };
+  addons.getChannel.mockReturnValue(channel);
+
+  describe('configure', () => {
+    it('publishes configure event with all passed configurations', () => {
+      const configs = {
+        foo: 'bar',
+        john: 'Doe'
+      };
+      configure(configs);
+
+      expect(channel.emit).toHaveBeenCalledTimes(1);
+      expect(channel.emit).toHaveBeenCalledWith('addon:viewport:configure', {
+        foo: 'bar',
+        john: 'Doe'
+      });
+    });
+  });
+});
diff --git a/addons/viewport/src/shared/index.js b/addons/viewport/src/shared/index.js
index b08d06bc1644..dec4a571dfd4 100644
--- a/addons/viewport/src/shared/index.js
+++ b/addons/viewport/src/shared/index.js
@@ -1,3 +1,56 @@
 export const ADDON_ID = 'storybook-addon-viewport';
 export const PANEL_ID = `${ADDON_ID}/addon-panel`;
-export const UPDATE_VIEWPORT_EVENT_ID = `addon:viewport:update`;
+export const UPDATE_VIEWPORT_EVENT_ID = 'addon:viewport:update';
+export const CONFIGURE_VIEWPORT_EVENT_ID = 'addon:viewport:configure';
+export const INITIAL_VIEWPORTS = {
+  iphone5: {
+    name: 'iPhone 5',
+    styles: {
+      height: '568px',
+      width: '320px',
+    },
+  },
+  iphone6: {
+    name: 'iPhone 6',
+    styles: {
+      height: '667px',
+      width: '375px',
+    },
+  },
+  iphone6p: {
+    name: 'iPhone 6 Plus',
+    styles: {
+      height: '736px',
+      width: '414px',
+    },
+  },
+  ipad: {
+    name: 'iPad',
+    styles: {
+      height: '1024px',
+      width: '768px',
+    },
+  },
+  galaxys5: {
+    name: 'Galaxy S5',
+    styles: {
+      height: '640px',
+      width: '360px',
+    },
+  },
+  nexus5x: {
+    name: 'Nexus 5X',
+    styles: {
+      height: '660px',
+      width: '412px',
+    },
+  },
+  nexus6p: {
+    name: 'Nexus 6P',
+    styles: {
+      height: '732px',
+      width: '412px',
+    },
+  },
+};
+export const DEFAULT_VIEWPORT = 'default';

From 39ca2b14a8472753dec3d88c81846294b92353de Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Fri, 9 Mar 2018 02:14:52 +0100
Subject: [PATCH 5/9] Add responsive viewport and make it default

---
 .../src/manager/components/SelectViewport.js       | 14 ++++++++------
 .../components/tests/SelectViewport.test.js        |  8 +++++---
 .../src/manager/components/viewportInfo.js         |  2 +-
 addons/viewport/src/shared/index.js                | 13 ++++++++++++-
 4 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/addons/viewport/src/manager/components/SelectViewport.js b/addons/viewport/src/manager/components/SelectViewport.js
index 0312a06263cd..6b14cf161402 100644
--- a/addons/viewport/src/manager/components/SelectViewport.js
+++ b/addons/viewport/src/manager/components/SelectViewport.js
@@ -10,12 +10,14 @@ export function SelectViewport({ viewports, defaultViewport, activeViewport, onC
         Device
       </label>
       <select style={styles.action} id="device" value={activeViewport} onChange={onChange}>
-        <option value={defaultViewport}>Default</option>
-        {Object.keys(viewports).map(key => (
-          <option value={key} key={key}>
-            {viewports[key].name}
-          </option>
-        ))}
+        {Object.keys(viewports).map(key => {
+          const { name } = viewports[key];
+          return (
+            <option value={key} key={key}>
+              {key === defaultViewport ? `(Default) ${name}` : name}
+            </option>
+          );
+        })}
       </select>
     </div>
   );
diff --git a/addons/viewport/src/manager/components/tests/SelectViewport.test.js b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
index f79ac46645ae..69e7efe855cf 100644
--- a/addons/viewport/src/manager/components/tests/SelectViewport.test.js
+++ b/addons/viewport/src/manager/components/tests/SelectViewport.test.js
@@ -44,10 +44,12 @@ describe('Viewport/SelectViewport', () => {
 
       viewportKeys.forEach(key => {
         let option;
+        const { name } = INITIAL_VIEWPORTS[key];
+        const expectedText = key === DEFAULT_VIEWPORT ? `(Default) ${name}` : name;
 
-        it(`renders an option for ${INITIAL_VIEWPORTS[key].name}`, () => {
-          option = subject.find(`[value="${key}"]`);
-          expect(option.text()).toEqual(INITIAL_VIEWPORTS[key].name);
+        it(`renders an option for ${name}`, () => {
+          option = subject.find(`option[value="${key}"]`);
+          expect(option.text()).toEqual(expectedText);
         });
       });
     });
diff --git a/addons/viewport/src/manager/components/viewportInfo.js b/addons/viewport/src/manager/components/viewportInfo.js
index b101c211ba5c..1953b89ee5c3 100644
--- a/addons/viewport/src/manager/components/viewportInfo.js
+++ b/addons/viewport/src/manager/components/viewportInfo.js
@@ -19,8 +19,8 @@ export const resetViewport = {
 
 export function applyStyles(viewport, styles) {
   const mixedStyles = {
-    ...viewport.styles,
     ...styles,
+    ...viewport.styles,
   };
 
   return {
diff --git a/addons/viewport/src/shared/index.js b/addons/viewport/src/shared/index.js
index dec4a571dfd4..f89ec05751d3 100644
--- a/addons/viewport/src/shared/index.js
+++ b/addons/viewport/src/shared/index.js
@@ -3,6 +3,17 @@ export const PANEL_ID = `${ADDON_ID}/addon-panel`;
 export const UPDATE_VIEWPORT_EVENT_ID = 'addon:viewport:update';
 export const CONFIGURE_VIEWPORT_EVENT_ID = 'addon:viewport:configure';
 export const INITIAL_VIEWPORTS = {
+  responsive: {
+    name: 'Responsive',
+    styles: {
+      width: '100%',
+      height: '100%',
+      border: 'none',
+      display: 'block',
+      margin: '0',
+      boxShadow: 'none',
+    },
+  },
   iphone5: {
     name: 'iPhone 5',
     styles: {
@@ -53,4 +64,4 @@ export const INITIAL_VIEWPORTS = {
     },
   },
 };
-export const DEFAULT_VIEWPORT = 'default';
+export const DEFAULT_VIEWPORT = 'responsive';

From 5a2c5a024cb6df47e6e278356b463fb71722058d Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Sun, 25 Feb 2018 23:49:15 +0100
Subject: [PATCH 6/9] Register all channel listeners on componentDidMount

---
 addons/viewport/src/manager/components/Panel.js  |  3 +--
 .../src/manager/components/tests/Panel.test.js   | 16 ++++++++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/addons/viewport/src/manager/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
index 38bea0e3a66c..d27986fac110 100644
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@@ -37,8 +37,6 @@ export class Panel extends Component {
       viewports: viewportsTransformer(INITIAL_VIEWPORTS),
       isLandscape: false,
     };
-
-    this.props.channel.on(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
   }
 
   componentDidMount() {
@@ -46,6 +44,7 @@ export class Panel extends Component {
 
     this.iframe = document.getElementById(storybookIframe);
 
+    channel.on(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
     channel.on(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
 
     this.unsubscribeFromOnStory = api.onStory(() => {
diff --git a/addons/viewport/src/manager/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
index c366ad1c606f..89001cc78117 100644
--- a/addons/viewport/src/manager/components/tests/Panel.test.js
+++ b/addons/viewport/src/manager/components/tests/Panel.test.js
@@ -33,13 +33,6 @@ describe('Viewport/Panel', () => {
         isLandscape: false,
       });
     });
-
-    it('listens on `update` channel', () => {
-      expect(props.channel.on).toHaveBeenCalledWith(
-        'addon:viewport:update',
-        subject.instance().changeViewport
-      );
-    });
   });
 
   describe('componentDidMount', () => {
@@ -60,12 +53,19 @@ describe('Viewport/Panel', () => {
       expect(subject.instance().iframe).toEqual('iframe');
     });
 
-    it('listens on the `configure` topic', () => {
+    it('listens on `configure` channel', () => {
       expect(props.channel.on).toHaveBeenCalledWith(
         'addon:viewport:configure',
         subject.instance().configure
       );
     });
+
+    it('listens on `update` channel', () => {
+      expect(props.channel.on).toHaveBeenCalledWith(
+        'addon:viewport:update',
+        subject.instance().changeViewport
+      );
+    });
   });
 
   describe('componentWillUnmount', () => {

From 29c81a738acaaf4b4b4ae41ebae4c551f771806d Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Mon, 26 Feb 2018 00:00:28 +0100
Subject: [PATCH 7/9] Add custom viewports to the official-storybook example

---
 examples/official-storybook/config.js            | 12 ++++++++++++
 examples/official-storybook/extra-viewports.json | 16 ++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 examples/official-storybook/extra-viewports.json

diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index e53df3b35d7e..1a106e18eb0c 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,7 +1,12 @@
 import { configure } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
+import {
+  configure as configureViewport,
+  INITIAL_VIEWPORTS
+} from '@storybook/addon-viewport';
 import 'react-chromatic/storybook-addon';
 import addHeadWarning from './head-warning';
+import extraViewports from './extra-viewports.json';
 
 addHeadWarning('Preview head not loaded', 'preview-head-not-loaded');
 addHeadWarning('Dotenv file not loaded', 'dotenv-file-not-loaded');
@@ -11,6 +16,13 @@ setOptions({
   hierarchyRootSeparator: /\|/,
 });
 
+configureViewport({
+  viewports: {
+    ...INITIAL_VIEWPORTS,
+    ...extraViewports
+  }
+});
+
 function importAll(req) {
   req.keys().forEach(filename => req(filename));
 }
diff --git a/examples/official-storybook/extra-viewports.json b/examples/official-storybook/extra-viewports.json
new file mode 100644
index 000000000000..27bc68170b0f
--- /dev/null
+++ b/examples/official-storybook/extra-viewports.json
@@ -0,0 +1,16 @@
+{
+  "kindleFire2": {
+    "name": "Kindle Fire 2",
+    "styles": {
+      "width": "600px",
+      "height": "963px"
+    }
+  },
+  "kindleFireHD": {
+    "name": "Kindle Fire HD",
+    "styles": {
+      "width": "533px",
+      "height": "801px"
+    }
+  }
+}

From 8a0d5b49a554cee16266d294d233e6c24df2e4be Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Mon, 26 Feb 2018 20:59:18 +0100
Subject: [PATCH 8/9] Update viewport addon documentation

---
 addons/viewport/README.md | 97 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 91 insertions(+), 6 deletions(-)

diff --git a/addons/viewport/README.md b/addons/viewport/README.md
index 5f8705db9c9e..6838d5aaa42d 100644
--- a/addons/viewport/README.md
+++ b/addons/viewport/README.md
@@ -16,7 +16,26 @@ or with yarn:
 
     yarn add -D @storybook/addon-viewport
 
-## Basic Usage
+
+## Configuration
+
+Import and use the `configure` function in your `config.js` file.
+
+```js
+import { configure } from '@storybook/addon-viewport';
+```
+
+### defaultViewport : String
+----
+Setting this property to, let say `iphone6`, will make `iPhone 6` the default device/viewport for all stories. Default is `'responsive'` which fills 100% of the preview area.
+
+### viewports : Object
+----
+A key-value pair of viewport's key and properties for all viewports to be displayed. Default is [`INITIAL_VIEWPORTS`](src/shared/index.js)
+
+## Examples
+
+### Basic Usage
 
 Simply import the Storybook Viewport Addon in the `addons.js` file in your `.storybook` directory.
 
@@ -26,12 +45,78 @@ import '@storybook/addon-viewport/register'
 
 This will register the Viewport Addon to Storybook and will show up in the action area.
 
-## FAQ
 
-#### How do I add a new device?
+### Use Custom Set of Devices
 
-Unfortunately, this is currently not supported.
+This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `configure` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
+
+```js
+import { configure } from '@storybook/addon-viewport';
+
+const newViewports = {
+  kindleFire2: {
+    name: 'Kindle Fire 2',
+    styles: {
+      width: '600px',
+      height: '963px'
+    }
+  },
+  kindleFireHD: {
+    name: 'Kindle Fire HD',
+    styles: {
+      width: '533px',
+      height: '801px'
+    }
+  }
+};
+
+configure({
+  viewports: newViewports
+});
+```
 
-#### How can I make a custom screen size?
 
-Unfortunately, this is currently not supported.
+### Add New Device
+
+This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is acheived by making use of the exported [`INITIAL_VIEWPORTS`](src/shared/index.js) property, by merging it with the new viewports and pass the result as `viewports` to `configure` function
+
+```js
+import { configure, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+const newViewports = {
+  kindleFire2: {
+    name: 'Kindle Fire 2',
+    styles: {
+      width: '600px',
+      height: '963px'
+    }
+  },
+  kindleFireHD: {
+    name: 'Kindle Fire HD',
+    styles: {
+      width: '533px',
+      height: '801px'
+    }
+  }
+};
+
+configure({
+  viewports: {
+    ...INITIAL_VIEWPORTS,
+    ...newViewports
+  }
+});
+```
+
+
+### Change The Default Viewport
+
+This will make `iPhone 6` the default viewport for all stories.
+
+```js
+import { configure } from '@storybook/addon-viewport';
+
+configure({
+  defaultViewport: 'iphone6'
+});
+```

From d3046596bac2bbb6fd01b56f24426aad97560286 Mon Sep 17 00:00:00 2001
From: Mohamed Shaaban <topcoder.fci@gmail.com>
Date: Fri, 9 Mar 2018 00:51:35 +0100
Subject: [PATCH 9/9] Allow setting custom default viewport per story

Fix linting issues
---
 addons/viewport/preview.js                    |   2 +
 .../viewport/src/manager/components/Panel.js  |  67 ++++++--
 .../manager/components/tests/Panel.test.js    | 152 ++++++++++++++----
 .../components/tests/viewportInfo.spec.js     |  16 +-
 addons/viewport/src/preview/index.js          |  37 ++++-
 .../viewport/src/preview/tests/index.test.js  |  43 ++++-
 addons/viewport/src/shared/index.js           |   2 +
 examples/official-storybook/config.js         |   9 +-
 examples/official-storybook/package.json      |   1 +
 .../addon-viewport.stories.storyshot          |  33 ++++
 .../stories/addon-viewport.stories.js         |  27 ++++
 11 files changed, 323 insertions(+), 66 deletions(-)
 create mode 100644 examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
 create mode 100644 examples/official-storybook/stories/addon-viewport.stories.js

diff --git a/addons/viewport/preview.js b/addons/viewport/preview.js
index 1a2ee6e366df..c78f8bab3217 100644
--- a/addons/viewport/preview.js
+++ b/addons/viewport/preview.js
@@ -3,3 +3,5 @@ const preview = require('./dist/preview');
 exports.configure = preview.configure;
 exports.DEFAULT_VIEWPORT = preview.DEFAULT_VIEWPORT;
 exports.INITIAL_VIEWPORTS = preview.INITIAL_VIEWPORTS;
+exports.withViewport = preview.withViewport;
+exports.Viewport = preview.Viewport;
diff --git a/addons/viewport/src/manager/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
index d27986fac110..c3fc43d88961 100644
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@@ -7,6 +7,8 @@ import { resetViewport, viewportsTransformer } from './viewportInfo';
 import { SelectViewport } from './SelectViewport';
 import { RotateViewport } from './RotateViewport';
 import {
+  SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
+  UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
   CONFIGURE_VIEWPORT_EVENT_ID,
   UPDATE_VIEWPORT_EVENT_ID,
   INITIAL_VIEWPORTS,
@@ -23,12 +25,23 @@ const containerStyles = {
   ...baseFonts,
 };
 
+const getDefaultViewport = (viewports, candidateViewport) =>
+  candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
+
+const getViewports = viewports =>
+  Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS;
+
 export class Panel extends Component {
   static propTypes = {
     channel: PropTypes.shape({}).isRequired,
     api: PropTypes.shape({}).isRequired,
   };
 
+  static defaultOptions = {
+    viewports: INITIAL_VIEWPORTS,
+    defaultViewport: DEFAULT_VIEWPORT,
+  };
+
   constructor(props, context) {
     super(props, context);
     this.state = {
@@ -46,6 +59,8 @@ export class Panel extends Component {
 
     channel.on(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
     channel.on(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
+    channel.on(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
+    channel.on(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.unsetStoryDefaultViewport);
 
     this.unsubscribeFromOnStory = api.onStory(() => {
       this.changeViewport(this.state.defaultViewport);
@@ -58,19 +73,39 @@ export class Panel extends Component {
     if (this.unsubscribeFromOnStory) {
       this.unsubscribeFromOnStory();
     }
-    
+
     channel.removeListener(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
     channel.removeListener(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
+    channel.removeListener(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
+    channel.removeListener(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.unsetStoryDefaultViewport);
   }
 
-  configure = ({ viewports = INITIAL_VIEWPORTS, defaultViewport = DEFAULT_VIEWPORT }) => {
-    if (Object.keys(viewports).length === 0) {
-      viewports = INITIAL_VIEWPORTS;
-    }
+  setStoryDefaultViewport = viewport => {
+    const { viewports } = this.state;
+    const defaultViewport = getDefaultViewport(viewports, viewport);
 
-    if (!(defaultViewport in viewports)) {
-      defaultViewport = Object.keys(viewports)[0];
-    }
+    this.setState(
+      {
+        storyDefaultViewport: defaultViewport,
+        viewport: defaultViewport,
+      },
+      this.updateIframe
+    );
+  };
+
+  unsetStoryDefaultViewport = () => {
+    this.setState(
+      {
+        storyDefaultViewport: undefined,
+        viewport: this.state.defaultViewport,
+      },
+      this.updateIframe
+    );
+  };
+
+  configure = (options = Panel.defaultOptions) => {
+    const viewports = getViewports(options.viewports);
+    const defaultViewport = getDefaultViewport(viewports, options.defaultViewport);
 
     this.setState(
       {
@@ -123,9 +158,15 @@ export class Panel extends Component {
   };
 
   render() {
-    const { isLandscape, defaultViewport, viewport, viewports } = this.state;
-
-    const disableDefault = viewport === defaultViewport;
+    const {
+      isLandscape,
+      defaultViewport,
+      storyDefaultViewport = defaultViewport,
+      viewport,
+      viewports,
+    } = this.state;
+
+    const disableDefault = viewport === storyDefaultViewport;
     const disabledStyles = disableDefault ? styles.disabled : {};
 
     const buttonStyles = {
@@ -139,7 +180,7 @@ export class Panel extends Component {
       <div style={containerStyles}>
         <SelectViewport
           viewports={viewports}
-          defaultViewport={defaultViewport}
+          defaultViewport={storyDefaultViewport}
           activeViewport={viewport}
           onChange={e => this.changeViewport(e.target.value)}
         />
@@ -152,7 +193,7 @@ export class Panel extends Component {
 
         <button
           style={buttonStyles}
-          onClick={() => this.changeViewport(defaultViewport)}
+          onClick={() => this.changeViewport(storyDefaultViewport)}
           disabled={disableDefault}
         >
           Reset Viewport
diff --git a/addons/viewport/src/manager/components/tests/Panel.test.js b/addons/viewport/src/manager/components/tests/Panel.test.js
index 89001cc78117..cde91764224e 100644
--- a/addons/viewport/src/manager/components/tests/Panel.test.js
+++ b/addons/viewport/src/manager/components/tests/Panel.test.js
@@ -3,10 +3,12 @@ import { shallow } from 'enzyme';
 import { document } from 'global';
 
 import { Panel } from '../Panel';
-import { resetViewport, viewportsTransformer, configuredStyles } from '../viewportInfo';
+import { resetViewport, viewportsTransformer } from '../viewportInfo';
 import * as styles from '../styles';
 import { DEFAULT_VIEWPORT, INITIAL_VIEWPORTS } from '../../../shared';
 
+const initialViewportAt = index => Object.keys(INITIAL_VIEWPORTS)[index];
+
 describe('Viewport/Panel', () => {
   const props = {
     channel: {
@@ -14,8 +16,8 @@ describe('Viewport/Panel', () => {
       removeListener: jest.fn(),
     },
     api: {
-      onStory: jest.fn()
-    }
+      onStory: jest.fn(),
+    },
   };
 
   let subject;
@@ -66,6 +68,20 @@ describe('Viewport/Panel', () => {
         subject.instance().changeViewport
       );
     });
+
+    it('listens on `setStoryDefaultViewport` channel', () => {
+      expect(props.channel.on).toHaveBeenCalledWith(
+        'addon:viewport:setStoryDefaultViewport',
+        subject.instance().setStoryDefaultViewport
+      );
+    });
+
+    it('listens on `unsetStoryDefaultViewport` channel', () => {
+      expect(props.channel.on).toHaveBeenCalledWith(
+        'addon:viewport:unsetStoryDefaultViewport',
+        subject.instance().unsetStoryDefaultViewport
+      );
+    });
   });
 
   describe('componentWillUnmount', () => {
@@ -86,48 +102,80 @@ describe('Viewport/Panel', () => {
         subject.instance().configure
       );
     });
+
+    it('removes `setStoryDefaultViewport` channel listener', () => {
+      expect(props.channel.removeListener).toHaveBeenCalledWith(
+        'addon:viewport:setStoryDefaultViewport',
+        subject.instance().setStoryDefaultViewport
+      );
+    });
+
+    it('removes `unsetStoryDefaultViewport` channel listener', () => {
+      expect(props.channel.removeListener).toHaveBeenCalledWith(
+        'addon:viewport:unsetStoryDefaultViewport',
+        subject.instance().unsetStoryDefaultViewport
+      );
+    });
   });
 
   describe('configure', () => {
+    const initialConfigs = {
+      defaultViewport: 'bar',
+      viewports: {
+        foo: {
+          styles: {
+            width: '0',
+          },
+        },
+        bar: {
+          styles: {
+            width: '0',
+          },
+        },
+      },
+    };
+
     beforeEach(() => {
       subject.instance().setState = jest.fn();
       subject.instance().updateIframe = jest.fn();
+      subject.instance().configure(initialConfigs);
+    });
+
+    it('sets the state with the new information', () => {
+      expect(subject.instance().setState).toHaveBeenCalledWith(
+        {
+          ...initialConfigs,
+          viewport: 'bar',
+          viewports: viewportsTransformer(initialConfigs.viewports),
+        },
+        subject.instance().updateIframe
+      );
+    });
+
+    it('makes first viewport default if default does not exist', () => {
       subject.instance().configure({
+        ...initialConfigs,
         defaultViewport: 'iphone6',
-        viewports: {
-          foo: {
-            styles: {
-              width: '50px'
-            }
-          },
-          bar: {
-            styles: {
-              width: '100px'
-            }
-          }
-        }
       });
+      expect(subject.instance().setState).toHaveBeenCalledWith(
+        {
+          defaultViewport: 'foo',
+          viewport: 'foo',
+          viewports: viewportsTransformer(initialConfigs.viewports),
+        },
+        subject.instance().updateIframe
+      );
     });
 
-    it('sets the state with the new information', () => {
+    it('sets viewports to INITIAL_VIEWPORTS if viewports is empty', () => {
+      subject.instance().configure({
+        viewports: {},
+      });
       expect(subject.instance().setState).toHaveBeenCalledWith(
         {
-          defaultViewport: 'iphone6',
-          viewport: 'iphone6',
-          viewports: {
-            foo: {
-              styles: {
-                width: '50px',
-                ...configuredStyles
-              }
-            },
-            bar: {
-              styles: {
-                width: '100px',
-                ...configuredStyles
-              }
-            }
-          }
+          defaultViewport: DEFAULT_VIEWPORT,
+          viewport: DEFAULT_VIEWPORT,
+          viewports: viewportsTransformer(INITIAL_VIEWPORTS),
         },
         subject.instance().updateIframe
       );
@@ -142,13 +190,13 @@ describe('Viewport/Panel', () => {
 
     describe('new viewport', () => {
       beforeEach(() => {
-        subject.instance().changeViewport(INITIAL_VIEWPORTS[0]);
+        subject.instance().changeViewport(initialViewportAt(1));
       });
 
       it('sets the state with the new information', () => {
         expect(subject.instance().setState).toHaveBeenCalledWith(
           {
-            viewport: INITIAL_VIEWPORTS[0],
+            viewport: initialViewportAt(1),
             isLandscape: false,
           },
           subject.instance().updateIframe
@@ -167,6 +215,42 @@ describe('Viewport/Panel', () => {
     });
   });
 
+  describe('setStoryDefaultViewport', () => {
+    beforeEach(() => {
+      subject.instance().setState = jest.fn();
+      subject.instance().updateIframe = jest.fn();
+      subject.instance().setStoryDefaultViewport(initialViewportAt(1));
+    });
+
+    it('sets the state with the new information', () => {
+      expect(subject.instance().setState).toHaveBeenCalledWith(
+        {
+          viewport: initialViewportAt(1),
+          storyDefaultViewport: initialViewportAt(1),
+        },
+        subject.instance().updateIframe
+      );
+    });
+  });
+
+  describe('unsetStoryDefaultViewport', () => {
+    beforeEach(() => {
+      subject.instance().setState = jest.fn();
+      subject.instance().updateIframe = jest.fn();
+      subject.instance().unsetStoryDefaultViewport();
+    });
+
+    it('resets the state', () => {
+      expect(subject.instance().setState).toHaveBeenCalledWith(
+        {
+          viewport: DEFAULT_VIEWPORT,
+          storyDefaultViewport: undefined,
+        },
+        subject.instance().updateIframe
+      );
+    });
+  });
+
   describe('toggleLandscape', () => {
     beforeEach(() => {
       subject.setState({ isLandscape: false });
diff --git a/addons/viewport/src/manager/components/tests/viewportInfo.spec.js b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
index c154632f8dbd..1e59cf48d538 100644
--- a/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
+++ b/addons/viewport/src/manager/components/tests/viewportInfo.spec.js
@@ -2,7 +2,7 @@ import {
   resetViewport,
   configuredStyles,
   applyStyles,
-  viewportsTransformer
+  viewportsTransformer,
 } from '../viewportInfo';
 
 describe('Viewport/constants', () => {
@@ -40,23 +40,21 @@ describe('Viewport/constants', () => {
       const viewports = {
         foo: {
           styles: {
-            width: '50px'
-          }
+            width: '50px',
+          },
         },
         bar: {
           styles: {
-            width: '100px'
-          }
-        }
+            width: '100px',
+          },
+        },
       };
 
       const transformedViewports = viewportsTransformer(viewports);
       const keys = Object.keys(transformedViewports);
 
       keys.forEach(key => {
-        expect(transformedViewports[key].styles).toEqual(
-          expect.objectContaining(configuredStyles)
-        );
+        expect(transformedViewports[key].styles).toEqual(expect.objectContaining(configuredStyles));
       });
     });
   });
diff --git a/addons/viewport/src/preview/index.js b/addons/viewport/src/preview/index.js
index 47bd4ae35d2b..bb8283a38b30 100644
--- a/addons/viewport/src/preview/index.js
+++ b/addons/viewport/src/preview/index.js
@@ -1,5 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
 import addons from '@storybook/addons';
-import { CONFIGURE_VIEWPORT_EVENT_ID } from '../shared';
+import {
+  CONFIGURE_VIEWPORT_EVENT_ID,
+  SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
+  UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
+} from '../shared';
 
 export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../shared';
 
@@ -10,3 +16,32 @@ export function configure(configs = {}) {
     channel.emit(CONFIGURE_VIEWPORT_EVENT_ID, configs);
   }
 }
+
+export function withViewport(name) {
+  return getStory => <Viewport name={name}>{getStory()}</Viewport>;
+}
+
+export class Viewport extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.channel = addons.getChannel();
+  }
+
+  componentWillMount() {
+    this.channel.emit(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.props.name);
+  }
+
+  componentWillUnmount() {
+    this.channel.emit(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/addons/viewport/src/preview/tests/index.test.js b/addons/viewport/src/preview/tests/index.test.js
index 727b1aaa5744..c19a05973797 100644
--- a/addons/viewport/src/preview/tests/index.test.js
+++ b/addons/viewport/src/preview/tests/index.test.js
@@ -1,5 +1,7 @@
+import React from 'react';
 import addons from '@storybook/addons';
-import { configure } from '../';
+import { shallow } from 'enzyme';
+import { configure, Viewport } from '../';
 
 jest.mock('@storybook/addons');
 
@@ -13,14 +15,49 @@ describe('Viewport preview', () => {
     it('publishes configure event with all passed configurations', () => {
       const configs = {
         foo: 'bar',
-        john: 'Doe'
+        john: 'Doe',
       };
       configure(configs);
 
       expect(channel.emit).toHaveBeenCalledTimes(1);
       expect(channel.emit).toHaveBeenCalledWith('addon:viewport:configure', {
         foo: 'bar',
-        john: 'Doe'
+        john: 'Doe',
+      });
+    });
+  });
+
+  describe('Viewport', () => {
+    const props = {
+      name: 'iphone6',
+      children: '1337',
+    };
+
+    let subject;
+
+    beforeEach(() => {
+      subject = shallow(<Viewport {...props} />);
+    });
+
+    describe('componentWillMount', () => {
+      it('publishes `set` event with `iphone6`', () => {
+        expect(channel.emit).toHaveBeenCalledTimes(1);
+        expect(channel.emit).toHaveBeenCalledWith(
+          'addon:viewport:setStoryDefaultViewport',
+          'iphone6'
+        );
+      });
+    });
+
+    describe('componentWillUnmount', () => {
+      beforeEach(() => {
+        channel.emit.mockReset();
+        subject.unmount();
+      });
+
+      it('publishes `unset` event', () => {
+        expect(channel.emit).toHaveBeenCalledTimes(1);
+        expect(channel.emit).toHaveBeenCalledWith('addon:viewport:unsetStoryDefaultViewport');
       });
     });
   });
diff --git a/addons/viewport/src/shared/index.js b/addons/viewport/src/shared/index.js
index f89ec05751d3..d2eaa5835b3a 100644
--- a/addons/viewport/src/shared/index.js
+++ b/addons/viewport/src/shared/index.js
@@ -2,6 +2,8 @@ export const ADDON_ID = 'storybook-addon-viewport';
 export const PANEL_ID = `${ADDON_ID}/addon-panel`;
 export const UPDATE_VIEWPORT_EVENT_ID = 'addon:viewport:update';
 export const CONFIGURE_VIEWPORT_EVENT_ID = 'addon:viewport:configure';
+export const SET_STORY_DEFAULT_VIEWPORT_EVENT_ID = 'addon:viewport:setStoryDefaultViewport';
+export const UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID = 'addon:viewport:unsetStoryDefaultViewport';
 export const INITIAL_VIEWPORTS = {
   responsive: {
     name: 'Responsive',
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 1a106e18eb0c..f388cb40c7dc 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,9 +1,6 @@
 import { configure } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
-import {
-  configure as configureViewport,
-  INITIAL_VIEWPORTS
-} from '@storybook/addon-viewport';
+import { configure as configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import 'react-chromatic/storybook-addon';
 import addHeadWarning from './head-warning';
 import extraViewports from './extra-viewports.json';
@@ -19,8 +16,8 @@ setOptions({
 configureViewport({
   viewports: {
     ...INITIAL_VIEWPORTS,
-    ...extraViewports
-  }
+    ...extraViewports,
+  },
 });
 
 function importAll(req) {
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 74ae9eaba6bc..65aa18d3fd4d 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -25,6 +25,7 @@
     "@storybook/addon-storysource": "3.4.0-rc.3",
     "@storybook/addon-viewport": "3.4.0-rc.3",
     "@storybook/addons": "3.4.0-rc.3",
+    "@storybook/components": "3.4.0-rc.3",
     "@storybook/node-logger": "3.4.0-rc.3",
     "@storybook/react": "3.4.0-rc.3",
     "babel-runtime": "^6.26.0",
diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
new file mode 100644
index 000000000000..e024d936c5f4
--- /dev/null
+++ b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Viewport default 1`] = `
+<div
+  style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased"
+>
+  I don't have problems being rendered using the default viewport.
+</div>
+`;
+
+exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] = `
+<div
+  style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased"
+>
+  I've inherited 
+  <b>
+    Kindle Fire 2
+  </b>
+   viewport from my parent.
+</div>
+`;
+
+exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden 1`] = `
+<div
+  style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased"
+>
+  I respect my parents but I should be looking good on 
+  <b>
+    iPhone 6
+  </b>
+  .
+</div>
+`;
diff --git a/examples/official-storybook/stories/addon-viewport.stories.js b/examples/official-storybook/stories/addon-viewport.stories.js
new file mode 100644
index 000000000000..8fc922a1d473
--- /dev/null
+++ b/examples/official-storybook/stories/addon-viewport.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { baseFonts } from '@storybook/components';
+
+import { withViewport, Viewport } from '@storybook/addon-viewport';
+
+// eslint-disable-next-line react/prop-types
+const Panel = ({ children }) => <div style={baseFonts}>{children}</div>;
+
+storiesOf('Addons|Viewport', module).add('default', () => (
+  <Panel>I don't have problems being rendered using the default viewport.</Panel>
+));
+
+storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
+  .addDecorator(withViewport('kindleFire2'))
+  .add('Inherited', () => (
+    <Panel>
+      I've inherited <b>Kindle Fire 2</b> viewport from my parent.
+    </Panel>
+  ))
+  .add('Overridden', () => (
+    <Viewport name="iphone6">
+      <Panel>
+        I respect my parents but I should be looking good on <b>iPhone 6</b>.
+      </Panel>
+    </Viewport>
+  ));