Addon-backgrounds: set background on iframe instead of adding a wrapper in preview

addons/background/package.json

@@ -24,6 +24,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "global": "^4.3.2",
     "prop-types": "^15.6.0"
   },
   "peerDependencies": {

addons/background/src/BackgroundPanel.js

@@ -1,15 +1,21 @@
+import { document } from 'global';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import addons from '@storybook/addons';
 
 import Swatch from './Swatch';
 
+const storybookIframe = 'storybook-preview-iframe';
+
 const style = {
   font: {
     fontFamily:
       "-apple-system,'.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
     fontSize: '14px',
   },
+  iframe: {
+    transition: 'background 0.25s ease-in-out',
+  },
 };
 
 const defaultBackground = {
@@ -73,10 +79,10 @@ export default class BackgroundPanel extends Component {
       const currentBackground = api.getQueryParam('background');
 
       if (currentBackground) {
-        this.setBackgroundInPreview(currentBackground);
+        this.updateIframe(currentBackground);
       } else if (backgrounds.filter(x => x.default).length) {
         const defaultBgs = backgrounds.filter(x => x.default);
-        this.setBackgroundInPreview(defaultBgs[0].value);
+        this.updateIframe(defaultBgs[0].value);
       }
     });
 
@@ -86,13 +92,27 @@ export default class BackgroundPanel extends Component {
     });
   }
 
-  setBackgroundInPreview = background => this.channel.emit('background', background);
+  componentDidMount() {
+    this.iframe = document.getElementById(storybookIframe);
+
+    if (!this.iframe) {
+      throw new Error('Cannot find Storybook iframe');
+    }
+
+    Object.keys(style.iframe).forEach(prop => {
+      this.iframe.style[prop] = style.iframe[prop];
+    });
+  }
 
   setBackgroundFromSwatch = background => {
-    this.setBackgroundInPreview(background);
+    this.updateIframe(background);
     this.props.api.setQueryParams({ background });
   };
 
+  updateIframe(background) {
+    this.iframe.style.background = background;
+  }
+
   render() {
     const backgrounds = [...this.state.backgrounds];
 

addons/background/src/__tests__/BackgroundPanel.js

@@ -17,6 +17,16 @@ const mockedApi = {
 };
 const channel = new EventEmitter();
 
+jest.mock('global', () => ({
+  document: {
+    getElementById() {
+      return {
+        style: {},
+      };
+    },
+  },
+}));
+
 describe('Background Panel', () => {
   it('should exist', () => {
     const backgroundPanel = shallow(<BackgroundPanel channel={channel} api={mockedApi} />);
@@ -105,19 +115,18 @@ describe('Background Panel', () => {
     expect(backgroundPanel.state('backgrounds')).toHaveLength(0);
   });
 
-  it('should pass the event from swatch clicks through the provided channel', () => {
+  it('should set iframe background', () => {
     const SpiedChannel = new EventEmitter();
     const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
     backgroundPanel.setState({ backgrounds }); // force re-render
 
-    const spy = jest.fn();
-    SpiedChannel.on('background', spy);
-
     backgroundPanel
       .find('h4')
       .first()
       .simulate('click');
 
-    expect(spy).toBeCalledWith(backgrounds[0].value);
+    expect(backgroundPanel.instance().iframe.style).toMatchObject({
+      background: backgrounds[0].value,
+    });
   });
 });

addons/background/src/__tests__/index.js

@@ -16,34 +16,6 @@ describe('Background Decorator', () => {
     expect(backgroundDecorator).toBeDefined();
   });
 
-  it('should initially have a transparent background state', () => {
-    const SpiedChannel = new EventEmitter();
-    const backgroundDecorator = shallow(
-      <BackgroundDecorator story={testStory} channel={SpiedChannel} />
-    );
-
-    expect(backgroundDecorator.state().background).toBe('transparent');
-  });
-
-  it('should have a background matching its state', () => {
-    const SpiedChannel = new EventEmitter();
-    const backgroundDecorator = shallow(
-      <BackgroundDecorator story={testStory} channel={SpiedChannel} />
-    );
-
-    expect(backgroundDecorator.html().match(/background:transparent/gim)).toHaveLength(1);
-  });
-
-  it('should set internal state when background event called', () => {
-    const SpiedChannel = new EventEmitter();
-    const backgroundDecorator = shallow(
-      <BackgroundDecorator story={testStory} channel={SpiedChannel} />
-    );
-
-    SpiedChannel.emit('background', '#123456');
-    expect(backgroundDecorator.state().background).toBe('#123456');
-  });
-
   it('should send background-unset event when the component unmounts', () => {
     const SpiedChannel = new EventEmitter();
     const backgroundDecorator = shallow(

addons/background/src/index.js

@@ -3,21 +3,6 @@ import PropTypes from 'prop-types';
 
 import addons from '@storybook/addons';
 
-const style = {
-  wrapper: {
-    overflow: 'auto',
-    position: 'fixed',
-    top: 0,
-    bottom: 0,
-    right: 0,
-    left: 0,
-    transition: 'background 0.25s ease-in-out',
-    backgroundPosition: 'center',
-    backgroundSize: 'cover',
-    background: 'transparent',
-  },
-};
-
 export class BackgroundDecorator extends React.Component {
   constructor(props) {
     super(props);
@@ -31,13 +16,10 @@ export class BackgroundDecorator extends React.Component {
       this.channel = addons.getChannel();
     }
 
-    this.state = { background: 'transparent' };
-
     this.story = story();
   }
 
   componentWillMount() {
-    this.channel.on('background', this.setBackground);
     this.channel.emit('background-set', this.props.backgrounds);
   }
 
@@ -48,16 +30,11 @@ export class BackgroundDecorator extends React.Component {
   }
 
   componentWillUnmount() {
-    this.channel.removeListener('background', this.setBackground);
     this.channel.emit('background-unset');
   }
 
-  setBackground = background => this.setState({ background });
-
   render() {
-    const styles = style.wrapper;
-    styles.background = this.state.background;
-    return <div style={Object.assign({}, styles)}>{this.story}</div>;
+    return this.story;
   }
 }
 BackgroundDecorator.propTypes = {

examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot

@@ -1,21 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addons|Backgrounds story 1 1`] = `
-<div
-  style="overflow:auto;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
->
-  <button>
-    You should be able to switch backgrounds for this story
-  </button>
-</div>
+<button>
+  You should be able to switch backgrounds for this story
+</button>
 `;
 
 exports[`Storyshots Addons|Backgrounds story 2 1`] = `
-<div
-  style="overflow:auto;position:fixed;top:0;bottom:0;right:0;left:0;transition:background 0.25s ease-in-out;background-position:center;background-size:cover;background:transparent"
->
-  <button>
-    This one too!
-  </button>
-</div>
+<button>
+  This one too!
+</button>
 `;