From 9ebbce78d6833076c36173bfaaa86528d486a0c0 Mon Sep 17 00:00:00 2001
From: Igor <igor-dv@users.noreply.github.com>
Date: Mon, 5 Nov 2018 18:48:22 +0200
Subject: [PATCH] Merge pull request #4683 from
 storybooks/addon-jest/fix-configureviewport

Addon Viewport - fix "defaultViewport" configuration
---
 addons/viewport/src/manager/components/Panel.js      |  9 +++++----
 examples/html-kitchen-sink/.storybook/config.js      | 12 +++++++-----
 .../html-kitchen-sink/stories/addon-a11y.stories.js  |  7 +------
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/addons/viewport/src/manager/components/Panel.js b/addons/viewport/src/manager/components/Panel.js
index 0c2fa1d72591..533f509a2e7d 100644
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@@ -25,8 +25,9 @@ const Container = styled.div({
 });
 Container.displayName = 'Container';
 
-const getDefaultViewport = (viewports, candidateViewport) =>
-  candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
+function getDefaultViewport(viewports, candidateViewport) {
+  return candidateViewport in viewports ? candidateViewport : Object.keys(viewports)[0];
+}
 
 const getViewports = viewports =>
   Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS;
@@ -62,7 +63,6 @@ export class Panel extends Component {
 
   componentDidMount() {
     const { channel, api } = this.props;
-    const { defaultViewport } = this.state;
 
     this.iframe = document.getElementById(storybookIframe);
 
@@ -71,6 +71,7 @@ export class Panel extends Component {
     channel.on(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
 
     this.unsubscribeFromOnStory = api.onStory(() => {
+      const { defaultViewport } = this.state;
       this.setStoryDefaultViewport(defaultViewport);
     });
   }
@@ -98,7 +99,7 @@ export class Panel extends Component {
   };
 
   configure = (options = Panel.defaultOptions) => {
-    const viewports = getViewports(options.viewports);
+    const viewports = getViewports(options.viewports || {});
     const defaultViewport = getDefaultViewport(viewports, options.defaultViewport);
 
     this.setState(
diff --git a/examples/html-kitchen-sink/.storybook/config.js b/examples/html-kitchen-sink/.storybook/config.js
index d67bc8b54626..2d11f76a64ae 100644
--- a/examples/html-kitchen-sink/.storybook/config.js
+++ b/examples/html-kitchen-sink/.storybook/config.js
@@ -1,9 +1,11 @@
-import { configure } from '@storybook/html';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/html';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 // automatically import all files ending in *.stories.js
 const req = require.context('../stories', true, /.stories.js$/);
diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
index 96e90a23ae1b..038fcd7620b1 100644
--- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
@@ -1,17 +1,12 @@
 import { document, setTimeout } from 'global';
 import { storiesOf } from '@storybook/html';
-import { setOptions } from '@storybook/addon-options';
-
 import { checkA11y } from '@storybook/addon-a11y';
 
 const text = 'Testing the a11y addon';
 
 storiesOf('Addons|a11y', module)
   .addDecorator(checkA11y)
-  .addDecorator(fn => {
-    setOptions({ selectedAddonPanel: '@storybook/addon-a11y/panel' });
-    return fn();
-  })
+  .addParameters({ options: { selectedAddonPanel: '@storybook/addon-a11y/panel' } })
   .add('Default', () => `<button></button>`)
   .add('Label', () => `<button>${text}</button>`)
   .add('Disabled', () => `<button disabled>${text}</button>`)