@storybook/addon-backgrounds - npm Package Compare versions

Comparing version 3.3.13 to 3.3.14

dist/BackgroundPanel.js

@@ -11,2 +11,6 @@ 'use strict';
 
+var _keys = require('babel-runtime/core-js/object/keys');
+
+var _keys2 = _interopRequireDefault(_keys);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -36,2 +40,4 @@
 
+var _global = require('global');
+
 var _react = require('react');
@@ -55,2 +61,4 @@
 
+var storybookIframe = 'storybook-preview-iframe';
+
 var style = {
@@ -60,2 +68,5 @@ font: {
     fontSize: '14px'
+  },
+  iframe: {
+    transition: 'background 0.25s ease-in-out'
   }
@@ -119,8 +130,4 @@ };
 
-    _this.setBackgroundInPreview = function (background) {
-      return _this.channel.emit('background', background);
-    };
-
     _this.setBackgroundFromSwatch = function (background) {
-      _this.setBackgroundInPreview(background);
+      _this.updateIframe(background);
       _this.props.api.setQueryParams({ background: background });
@@ -147,3 +154,3 @@ };
       if (currentBackground) {
-        _this.setBackgroundInPreview(currentBackground);
+        _this.updateIframe(currentBackground);
       } else if (backgrounds.filter(function (x) {
@@ -155,3 +162,3 @@ return x.default;
         });
-        _this.setBackgroundInPreview(defaultBgs[0].value);
+        _this.updateIframe(defaultBgs[0].value);
       }
@@ -168,5 +175,25 @@ });
   (0, _createClass3.default)(BackgroundPanel, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.iframe = _global.document.getElementById(storybookIframe);
+
+      if (!this.iframe) {
+        throw new Error('Cannot find Storybook iframe');
+      }
+
+      (0, _keys2.default)(style.iframe).forEach(function (prop) {
+        _this2.iframe.style[prop] = style.iframe[prop];
+      });
+    }
+  }, {
+    key: 'updateIframe',
+    value: function updateIframe(background) {
+      this.iframe.style.background = background;
+    }
+  }, {
     key: 'render',
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -191,3 +218,3 @@ var backgrounds = [].concat((0, _toConsumableArray3.default)(this.state.backgrounds));
             { key: name + ' ' + value, style: { display: 'inline-block', padding: '5px' } },
-            _react2.default.createElement(_Swatch2.default, { value: value, name: name, setBackground: _this2.setBackgroundFromSwatch })
+            _react2.default.createElement(_Swatch2.default, { value: value, name: name, setBackground: _this3.setBackgroundFromSwatch })
           );
@@ -194,0 +221,0 @@ })

dist/index.js

@@ -8,6 +8,2 @@ 'use strict';
 
-var _assign = require('babel-runtime/core-js/object/assign');
-
-var _assign2 = _interopRequireDefault(_assign);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
@@ -47,17 +43,2 @@
 
-var 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'
-  }
-};
-
 var BackgroundDecorator = exports.BackgroundDecorator = function (_React$Component) {
@@ -71,6 +52,2 @@ (0, _inherits3.default)(BackgroundDecorator, _React$Component);
 
-    _this.setBackground = function (background) {
-      return _this.setState({ background: background });
-    };
-
     var channel = props.channel,
@@ -87,4 +64,2 @@ story = props.story;
 
-    _this.state = { background: 'transparent' };
-
     _this.story = story();
@@ -97,3 +72,2 @@ return _this;
     value: function componentWillMount() {
-      this.channel.on('background', this.setBackground);
       this.channel.emit('background-set', this.props.backgrounds);
@@ -111,3 +85,2 @@ }
     value: function componentWillUnmount() {
-      this.channel.removeListener('background', this.setBackground);
       this.channel.emit('background-unset');
@@ -118,9 +91,3 @@ }
     value: function render() {
-      var styles = style.wrapper;
-      styles.background = this.state.background;
-      return _react2.default.createElement(
-        'div',
-        { style: (0, _assign2.default)({}, styles) },
-        this.story
-      );
+      return this.story;
     }
@@ -127,0 +94,0 @@ }]);

package.json

 {
   "name": "@storybook/addon-backgrounds",
-  "version": "3.3.13",
+  "version": "3.3.14",
   "description": "A storybook addon to show different backgrounds for your preview",
@@ -27,2 +27,3 @@ "keywords": [
   "dependencies": {
+    "global": "^4.3.2",
     "prop-types": "^15.6.0"
@@ -29,0 +30,0 @@ },

README.md

@@ -1,9 +0,22 @@
-# addon-backgrounds
+# Storybook Addon Backgrounds
 
-[![Build Status](https://travis-ci.org/storybooks/addon-backgrounds.svg?branch=travis)](https://travis-ci.org/storybooks/addon-backgrounds)
+[![Build Status on CircleCI](https://circleci.com/gh/storybooks/storybook.svg?style=shield)](https://circleci.com/gh/storybooks/storybook)
+[![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
+[![Known Vulnerabilities](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847/badge.svg)](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
+[![Backers on Open Collective](https://opencollective.com/storybook/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/storybook/sponsors/badge.svg)](#sponsors)
 
-![React Storybook Screenshot](./.storybook/backgrounds.gif)
+* * *
 
-### Getting Started
+Storybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybook.js.org).
 
+This addon works with Storybook for:
+
+-   [React](https://github.com/storybooks/storybook/tree/master/app/react)
+
+![React Storybook Screenshot](https://storybook.js.org/img/addon-backgrounds.gif)
+
+## Installation
+
 ```sh
@@ -13,2 +26,4 @@ npm i --save @storybook/addon-backgrounds
 
+## Configuration
+
 Then create a file called `addons.js` in your storybook config.
@@ -22,2 +37,4 @@
 
+## Usage
+
 Then write your stories like this:
@@ -38,21 +55,22 @@
 
-### Development
+Of course it's easy to create a library module so you can re-use:
 
-This project is built using typescript and is tested with jest. To get started, clone this repo and run the following command:
+```js
+import addonBackgrounds from "@storybook/addon-backgrounds";
 
-```bash
-$ npm install # install node deps
+export const backgrounds = addonBackgrounds([
+  { name: "twitter", value: "#00aced", default: true },
+  { name: "facebook", value: "#3b5998" },
+]);
 ```
 
-To run the project locally, run:
+```js
+import React from 'react';
+import { storiesOf } from "@storybook/react";
 
-```bash
-$ npm run storybook # for storybook testing
-# (coming soon) $ npm run test-watch # for testing
-```
+import { backgrounds } from "./my-lib";
 
-To test the project run:
-
-```bash
-$ npm test
+storiesOf("Button", module)
+  .addDecorator(backgrounds)
+  .add("with text", () => <button>Click me</button>);
 ```

src/__tests__/BackgroundPanel.js

@@ -20,2 +20,12 @@ import React from 'react';
 
+jest.mock('global', () => ({
+  document: {
+    getElementById() {
+      return {
+        style: {},
+      };
+    },
+  },
+}));
+
 describe('Background Panel', () => {
@@ -109,3 +119,3 @@ it('should exist', () => {
 
-  it('should pass the event from swatch clicks through the provided channel', () => {
+  it('should set iframe background', () => {
     const SpiedChannel = new EventEmitter();
@@ -115,5 +125,2 @@ const backgroundPanel = mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
 
-    const spy = jest.fn();
-    SpiedChannel.on('background', spy);
-
     backgroundPanel
@@ -124,4 +131,6 @@ .find('h4')
 
-    expect(spy).toBeCalledWith(backgrounds[0].value);
+    expect(backgroundPanel.instance().iframe.style).toMatchObject({
+      background: backgrounds[0].value,
+    });
   });
 });

src/__tests__/index.js

@@ -19,30 +19,2 @@ import React from 'react';
 
-  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', () => {
@@ -49,0 +21,0 @@ const SpiedChannel = new EventEmitter();

src/BackgroundPanel.js

@@ -0,1 +1,2 @@
+import { document } from 'global';
 import React, { Component } from 'react';
@@ -7,2 +8,4 @@ import PropTypes from 'prop-types';
 
+const storybookIframe = 'storybook-preview-iframe';
+
 const style = {
@@ -14,2 +17,5 @@ font: {
   },
+  iframe: {
+    transition: 'background 0.25s ease-in-out',
+  },
 };
@@ -78,6 +84,6 @@
       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);
       }
@@ -92,9 +98,23 @@ });
 
-  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() {
@@ -101,0 +121,0 @@ const backgrounds = [...this.state.backgrounds];

src/index.js

@@ -6,17 +6,2 @@ import React from 'react';
 
-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 {
@@ -35,4 +20,2 @@ constructor(props) {
 
-    this.state = { background: 'transparent' };
-
     this.story = story();
@@ -42,3 +25,2 @@ }
   componentWillMount() {
-    this.channel.on('background', this.setBackground);
     this.channel.emit('background-set', this.props.backgrounds);
@@ -54,12 +36,7 @@ }
   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;
   }
@@ -66,0 +43,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33901

increased by0.11%

Number of lines in readme file

74

increased by32.14%

Worsened metrics

Dependency count

4

increased by33.33%

Lines of code

798

decreased by-2.92%

Dependency changes

• + Addedglobal@^4.3.2

• + Addeddom-walk@0.1.2(transitive)

• + Addedglobal@4.4.0(transitive)

• + Addedmin-document@2.19.0(transitive)

• + Addedprocess@0.11.10(transitive)