Merge pull request #4683 from storybooks/addon-jest/fix-configureview…

…port Addon Viewport - fix "defaultViewport" configuration
storybookjs · Nov 5, 2018 · 356fc90 · 356fc90
2 parents 2a553ac + a76ebb2
commit 356fc90
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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>`)