UPGRADE addon-background usage to use parameters everywhere

addons/ondevice-backgrounds/src/BackgroundPanel.js

@@ -10,14 +10,15 @@ const defaultBackground = {
 };
 
 const instructionsHtml = `
-import { storiesOf } from '@storybook/react';
-import { withBackgrounds } from '@storybook/addon-backgrounds';
+import { storiesOf } from '@storybook/react-native';
 
 storiesOf('First Component', module)
-  .addDecorator(withBackgrounds([
-    { name: 'twitter', value: '#00aced' },
-    { name: 'facebook', value: '#3b5998" },
-  ]))
+  .addParameters({
+    backgrounds: [
+      { name: 'warm', value: 'hotpink', default: true },
+      { name: 'cool', value: 'deepskyblue' },
+    ],
+  })
   .add("First Button", () => <button>Click me</button>);
 `.trim();
 

examples-native/crna-kitchen-sink/storybook/stories/index.js

@@ -6,19 +6,19 @@ import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withNotes } from '@storybook/addon-ondevice-notes';
-import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import knobsWrapper from './Knobs';
 import Button from './Button';
 import CenterView from './CenterView';
 import Welcome from './Welcome';
 
 addDecorator(withNotes);
-addDecorator(
-  withBackgrounds([
-    { name: 'twitter', value: '#6cff5d', default: true },
-    { name: 'facebook', value: '#3b5998' },
-  ])
-);
+
+addParameters({
+  backgrounds: [
+    { name: 'light', value: '#eeeeee' },
+    { name: 'dark', value: '#222222', default: true },
+  ],
+});
 
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
   notes: `
@@ -31,8 +31,8 @@ storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo(
 storiesOf('Button', module)
   .addParameters({
     backgrounds: [
-      { name: 'red', value: '#F44336' },
-      { name: 'blue', value: '#2196F3', default: true },
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
     ],
     notes: `
 # Custom note\n

examples/angular-cli/src/stories/addon-background.stories.ts

@@ -1,15 +1,14 @@
 import { moduleMetadata, storiesOf } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';
-import { withBackgrounds } from '@storybook/addon-backgrounds';
 import { AppComponent } from '../app/app.component';
 
 storiesOf('Addon|Background', module)
-  .addDecorator(
-    withBackgrounds([
+  .addParameters({
+    backgrounds: [
       { name: 'twitter', value: '#00aced', default: true },
       { name: 'facebook', value: '#3b5998' },
-    ])
-  )
+    ],
+  })
   .add('background component', () => ({
     component: AppComponent,
     props: {},
@@ -21,12 +20,12 @@ storiesOf('Addon|Background', module)
       declarations: [Button],
     })
   )
-  .addDecorator(
-    withBackgrounds([
+  .addParameters({
+    backgrounds: [
       { name: 'twitter', value: '#00aced', default: true },
       { name: 'facebook', value: '#3b5998' },
-    ])
-  )
+    ],
+  })
   .add('background template', () => ({
     template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
     props: {

examples/ember-cli/stories/addon-backgrounds.stories.js

@@ -1,16 +1,16 @@
 import hbs from 'htmlbars-inline-precompile';
 import { storiesOf } from '@storybook/ember';
-import { withBackgrounds } from '@storybook/addon-backgrounds';
 
 storiesOf('Addon|Backgrounds', module)
-  .addDecorator(
-    withBackgrounds([
-      { name: 'LinkedIn', value: '#0073b1', default: true },
-      { name: 'Twitter', value: '#00aced' },
-      { name: 'Facebook', value: '#3b5998' },
-    ])
-  )
-  .addParameters({ options: { selectedAddonPanel: 'storybook-addon-background/background-panel' } })
+  .addParameters({
+    backgrounds: [
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
+    ],
+    options: {
+      selectedAddonPanel: 'storybook/background/panel',
+    },
+  })
   .add('story 1', () => ({
     template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
   }))

examples/html-kitchen-sink/stories/addon-backgrounds.stories.js

@@ -1,14 +1,12 @@
 import { storiesOf } from '@storybook/html';
 
-import { withBackgrounds } from '@storybook/addon-backgrounds';
-
 storiesOf('Addons|Backgrounds', module)
-  .addDecorator(
-    withBackgrounds([
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
-    ])
-  )
+  .addParameters({
+    backgrounds: [
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
+    ],
+  })
   .add(
     'story 1',
     () =>

examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js

@@ -4,16 +4,15 @@ import m from 'mithril';
 
 import { storiesOf } from '@storybook/mithril';
 
-import { withBackgrounds } from '@storybook/addon-backgrounds';
 import BaseButton from '../BaseButton';
 
 storiesOf('Addons|Backgrounds', module)
-  .addDecorator(
-    withBackgrounds([
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
-    ])
-  )
+  .addParameters({
+    backgrounds: [
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
+    ],
+  })
   .add('story 1', () => ({
     view: () => <BaseButton label="You should be able to switch backgrounds for this story" />,
   }))

examples/official-storybook/stories/addon-backgrounds.stories.js

@@ -1,17 +1,16 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import backgrounds from '@storybook/addon-backgrounds';
 import BaseButton from '../components/BaseButton';
 
 storiesOf('Addons|Backgrounds', module)
   .addParameters({
     backgrounds: [
-      { name: 'black', value: '#000000' },
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
       { name: 'white', value: '#ffffff' },
+      { name: 'light', value: '#eeeeee' },
       { name: 'gray', value: '#cccccc' },
+      { name: 'dark', value: '#222222', default: true },
+      { name: 'black', value: '#000000' },
     ],
     options: {
       selectedPanel: 'storybook/background/panel',
@@ -23,8 +22,8 @@ storiesOf('Addons|Backgrounds', module)
   .add('story 2', () => <BaseButton label="This one too!" />)
   .add('overriden', () => <BaseButton label="This one should have different backgrounds" />, {
     backgrounds: [
-      { name: 'red', value: '#F44336' },
-      { name: 'blue', value: '#2196F3', default: true },
+      { name: 'pink', value: 'hotpink' },
+      { name: 'blue', value: 'deepskyblue', default: true },
     ],
   })
   .add('disabled via []', () => <BaseButton label="This one should not use backgrounds" />, {
@@ -37,22 +36,3 @@ storiesOf('Addons|Backgrounds', module)
       backgrounds: { disable: true },
     }
   );
-
-storiesOf('Addons|Backgrounds.deprecated', module)
-  .addDecorator(
-    backgrounds([
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
-    ])
-  )
-  .add('story 1', () => (
-    <BaseButton label="You should be able to switch backgrounds for this story" />
-  ))
-  .add('story 2', () => <BaseButton label="This one too!" />)
-  .add(
-    'overriden',
-    backgrounds([
-      { name: 'red', value: '#F44336' },
-      { name: 'blue', value: '#2196F3', default: true },
-    ])(() => <BaseButton label="This one should have different backgrounds" />)
-  );

examples/polymer-cli/src/stories/addon-backgrounds.stories.js

@@ -1,11 +1,10 @@
 import { storiesOf } from '@storybook/polymer';
-import { withBackgrounds } from '@storybook/addon-backgrounds';
 
 storiesOf('Addon|Backgrounds', module)
-  .addDecorator(
-    withBackgrounds([
-      { name: 'twitter', value: '#00aced', default: true },
-      { name: 'facebook', value: '#3b5998' },
-    ])
-  )
+  .addParameters({
+    backgrounds: [
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
+    ],
+  })
   .add('button with text', () => '<button>Click me</button>');

examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js

@@ -1,14 +1,13 @@
 import { storiesOf } from '@storybook/riot';
-import { withBackgrounds } from '@storybook/addon-backgrounds';
 import ButtonRaw from './Button.txt';
 
 storiesOf('Addon|Backgrounds', module)
-  .addDecorator(
-    withBackgrounds([
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
-    ])
-  )
+  .addParameters({
+    backgrounds: [
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
+    ],
+  })
   .add('story 1', () => {
     const content = 'You should be able to switch backgrounds for this story';
 

examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js

@@ -1,15 +1,14 @@
 import { storiesOf } from '@storybook/svelte';
-import { withBackgrounds } from '@storybook/addon-backgrounds';
 
 import ButtonView from './views/ButtonView.svelte';
 
 storiesOf('Addon|Backgrounds', module)
-  .addDecorator(
-    withBackgrounds([
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
-    ])
-  )
+  .addParameters({
+    backgrounds: [
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
+    ],
+  })
   .add('story 1', () => ({
     Component: ButtonView,
   }));

examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js

@@ -1,13 +1,12 @@
 import { storiesOf } from '@storybook/vue';
-import { withBackgrounds } from '@storybook/addon-backgrounds';
 
 storiesOf('Addon|Backgrounds', module)
-  .addDecorator(
-    withBackgrounds([
-      { name: 'twitter', value: '#00aced' },
-      { name: 'facebook', value: '#3b5998', default: true },
-    ])
-  )
+  .addParameters({
+    backgrounds: [
+      { name: 'light', value: '#eeeeee' },
+      { name: 'dark', value: '#222222', default: true },
+    ],
+  })
   .add('story 1', () => {
     const content = 'You should be able to switch backgrounds for this story';