From 9aeb439f893d9ced05e9d03e6cea2b0d0dd69522 Mon Sep 17 00:00:00 2001
From: Mansoor Basha Bellary <mbellary@chewy.com>
Date: Fri, 30 Nov 2018 23:12:51 -0500
Subject: [PATCH] fix(): deprecations with replacing setOptions with
 withOptions

---
 examples/angular-cli/.storybook/config.ts     |  12 +-
 examples/marko-cli/.storybook/config.js       |  12 +-
 .../mithril-kitchen-sink/.storybook/config.js |  12 +-
 .../stories/addon-a11y.stories.js             |   6 +-
 .../stories/addon-actions.stories.js          | 126 +++++++++---------
 examples/polymer-cli/.storybook/config.js     |  12 +-
 .../riot-kitchen-sink/.storybook/config.js    |  12 +-
 .../svelte-kitchen-sink/.storybook/config.js  |   6 +-
 .../vue-kitchen-sink/.storybook/config.js     |  12 +-
 .../addon-centered.stories.storyshot          |  18 ++-
 .../custom-decorators.stories.storyshot       |  30 +++--
 11 files changed, 142 insertions(+), 116 deletions(-)

diff --git a/examples/angular-cli/.storybook/config.ts b/examples/angular-cli/.storybook/config.ts
index 2fef94e1cea..477692e5132 100644
--- a/examples/angular-cli/.storybook/config.ts
+++ b/examples/angular-cli/.storybook/config.ts
@@ -1,12 +1,14 @@
-import { configure } from '@storybook/angular';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/angular';
+import { withOptions } from '@storybook/addon-options';
 import addCssWarning from '../src/cssWarning';
 
 addCssWarning();
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed
diff --git a/examples/marko-cli/.storybook/config.js b/examples/marko-cli/.storybook/config.js
index e323e2999ae..81e684f39c3 100644
--- a/examples/marko-cli/.storybook/config.js
+++ b/examples/marko-cli/.storybook/config.js
@@ -1,9 +1,11 @@
-import { configure } from '@storybook/marko';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/marko';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed
diff --git a/examples/mithril-kitchen-sink/.storybook/config.js b/examples/mithril-kitchen-sink/.storybook/config.js
index aff56383c05..d1f9e7f689c 100644
--- a/examples/mithril-kitchen-sink/.storybook/config.js
+++ b/examples/mithril-kitchen-sink/.storybook/config.js
@@ -1,9 +1,11 @@
-import { configure } from '@storybook/mithril';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/mithril';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   const req = require.context('../src/stories', true, /\.stories\.js$/);
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
index d2195c8d46e..71faac54e49 100644
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ b/examples/official-storybook/stories/addon-a11y.stories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
 
 import { checkA11y } from '@storybook/addon-a11y';
 import BaseButton from '../components/BaseButton';
@@ -14,10 +13,7 @@ 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', () => <BaseButton label="" />)
   .add('Label', () => <BaseButton label={text} />)
   .add('Disabled', () => <BaseButton disabled label={text} />)
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index 2f5422f7006..9169e4724fd 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -7,7 +7,6 @@ import {
   decorate,
   decorateAction,
 } from '@storybook/addon-actions';
-import { setOptions } from '@storybook/addon-options';
 import { Button } from '@storybook/react/demo';
 import { window, File } from 'global';
 
@@ -60,70 +59,73 @@ storiesOf('Addons|Actions', module)
     return <Button onClick={fn}>Action.name: {fn.name}</Button>;
   })
   .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>)
-  .add('All types', () => {
-    function A() {}
-    function B() {}
+  .add(
+    'All types',
+    () => {
+      function A() {}
+      function B() {}
 
-    const bound = B.bind({});
+      const bound = B.bind({});
 
-    let file;
-    try {
-      file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
-    } catch (error) {
-      file = error;
-    }
-    const reg = /fooBar/g;
+      let file;
+      try {
+        file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
+      } catch (error) {
+        file = error;
+      }
+      const reg = /fooBar/g;
 
-    return (
-      <div>
-        {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
-        <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
-        <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
-        <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
-        <Button onClick={() => action('File')(file)}>File</Button>
-        <Button onClick={() => action('Function')(A)}>Function A</Button>
-        <Button onClick={() => action('Function (bound)')(bound)}>Bound Function A</Button>
-        <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
-        <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
-        <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
-        <Button onClick={() => action('null')(null)}>null</Button>
-        <Button onClick={() => action('Number')(10000)}>Number</Button>
-        <Button
-          onClick={() =>
-            action('Multiple')(
-              'foo',
-              1000,
-              true,
-              false,
-              [1, 2, 3],
-              null,
-              undefined,
-              { foo: 'bar' },
-              window
-            )
-          }
-        >
-          Multiple
-        </Button>
-        <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
-          Plain Object
-        </Button>
-        <Button
-          onClick={() =>
-            action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
-          }
-        >
-          Object (depth: 2)
-        </Button>
-        <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
-        <Button onClick={() => action('String')('foo')}>String</Button>
-        <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
-        <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
-        <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
-        <Button onClick={() => action('window')(window)}>Window</Button>
-      </div>
-    );
-  })
+      return (
+        <div>
+          <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
+          <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
+          <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
+          <Button onClick={() => action('File')(file)}>File</Button>
+          <Button onClick={() => action('Function')(A)}>Function A</Button>
+          <Button onClick={() => action('Function (bound)')(bound)}>Bound Function A</Button>
+          <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
+          <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
+          <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
+          <Button onClick={() => action('null')(null)}>null</Button>
+          <Button onClick={() => action('Number')(10000)}>Number</Button>
+          <Button
+            onClick={() =>
+              action('Multiple')(
+                'foo',
+                1000,
+                true,
+                false,
+                [1, 2, 3],
+                null,
+                undefined,
+                { foo: 'bar' },
+                window
+              )
+            }
+          >
+            Multiple
+          </Button>
+          <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
+            Plain Object
+          </Button>
+          <Button
+            onClick={() =>
+              action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
+            }
+          >
+            Object (depth: 2)
+          </Button>
+          <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
+          <Button onClick={() => action('String')('foo')}>String</Button>
+          <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
+          <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
+          <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
+          <Button onClick={() => action('window')(window)}>Window</Button>
+        </div>
+      );
+    },
+    { options: { selectedAddonPanel: 'storybook/actions/actions-panel' } }
+  )
   .add('configureActionsDepth', () => {
     configureActions({
       depth: 2,
diff --git a/examples/polymer-cli/.storybook/config.js b/examples/polymer-cli/.storybook/config.js
index 895756388af..1f48cf23d9f 100644
--- a/examples/polymer-cli/.storybook/config.js
+++ b/examples/polymer-cli/.storybook/config.js
@@ -1,9 +1,11 @@
-import { configure } from '@storybook/polymer';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/polymer';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   require('../src/stories/index.stories');
diff --git a/examples/riot-kitchen-sink/.storybook/config.js b/examples/riot-kitchen-sink/.storybook/config.js
index 41fa9ab736b..9945eed7ac0 100644
--- a/examples/riot-kitchen-sink/.storybook/config.js
+++ b/examples/riot-kitchen-sink/.storybook/config.js
@@ -1,9 +1,11 @@
-import { configure } from '@storybook/riot';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/riot';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   require('../src/stories');
diff --git a/examples/svelte-kitchen-sink/.storybook/config.js b/examples/svelte-kitchen-sink/.storybook/config.js
index 9a06a794186..863c395c61f 100644
--- a/examples/svelte-kitchen-sink/.storybook/config.js
+++ b/examples/svelte-kitchen-sink/.storybook/config.js
@@ -1,8 +1,8 @@
-import { configure } from '@storybook/svelte';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/svelte';
+import { withOptions } from '@storybook/addon-options';
 
 // Used with @storybook/addon-options/register
-setOptions({ hierarchyRootSeparator: /\|/ });
+addDecorator(withOptions({ hierarchyRootSeparator: /\|/ }));
 
 function loadStories() {
   require('../src/stories');
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
index 4fe1aa7bbb8..469185c360c 100644
--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -1,5 +1,5 @@
-import { configure } from '@storybook/vue';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/vue';
+import { withOptions } from '@storybook/addon-options';
 import Vue from 'vue';
 import Vuex from 'vuex';
 
@@ -8,9 +8,11 @@ import MyButton from '../src/stories/Button.vue';
 Vue.component('my-button', MyButton);
 Vue.use(Vuex);
 
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
+addDecorator(
+  withOptions({
+    hierarchyRootSeparator: /\|/,
+  })
+);
 
 function loadStories() {
   require('../src/stories');
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
index acb02ac334a..66bdedf3c91 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -13,12 +13,20 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
       <div
         style="margin: auto; max-height: 100%;"
       >
-        <button
-          class="button rounded"
-          style="color: rgb(66, 185, 131); border-color: #42b983;"
+        <div
+          style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
         >
-          A Button with rounded edges!
-        </button>
+          <div
+            style="margin: auto; max-height: 100%;"
+          >
+            <button
+              class="button rounded"
+              style="color: rgb(66, 185, 131); border-color: #42b983;"
+            >
+              A Button with rounded edges!
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
index d0e4a58cc4f..810bf9fab81 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
@@ -8,13 +8,17 @@ exports[`Storyshots Custom|Decorator for Vue render 1`] = `
     style="border: medium solid blue;"
   >
     <div
-      style="border: medium solid red;"
+      style="border: medium solid blue;"
     >
-      <button
-        class="button"
+      <div
+        style="border: medium solid red;"
       >
-        renders component: MyButton!
-      </button>
+        <button
+          class="button"
+        >
+          renders component: MyButton!
+        </button>
+      </div>
     </div>
   </div>
 </div>
@@ -28,14 +32,18 @@ exports[`Storyshots Custom|Decorator for Vue template 1`] = `
     style="border: medium solid blue;"
   >
     <div
-      style="border: medium solid red;"
+      style="border: medium solid blue;"
     >
-      <button
-        class="button"
-        style="color: rgb(66, 185, 131); border-color: #42b983;"
+      <div
+        style="border: medium solid red;"
       >
-        MyButton with template!
-      </button>
+        <button
+          class="button"
+          style="color: rgb(66, 185, 131); border-color: #42b983;"
+        >
+          MyButton with template!
+        </button>
+      </div>
     </div>
   </div>
 </div>