update docs

addons/background/docs/BackgroundPanel.tsx

@@ -15,8 +15,15 @@ export interface BackgroundDetail {
   value: string;
 };
 
+export interface StoryBookAPI {
+  getQueryParam(param: string): string;
+  setQueryParams(params: { [key: string]: string } ): void;
+  selectStory(story: string, storyOf: string): void;
+}
+
 export interface BackgroundPanelProps {
   channel: NodeJS.EventEmitter;
+  api: StoryBookAPI;
 }
 
 const defaultBackground: BackgroundDetail = {
@@ -37,23 +44,7 @@ storiesOf("First Component", module)
   ;
 `.trim();
 
-export default class BackgroundPanel extends React.Component<BackgroundPanelProps, any> {
-
-  state = { backgrounds: [] };
-
-  constructor(props) {
-    super(props);
-    this.props.channel.on("background-set", backgrounds => this.setState({ backgrounds }));
-    this.props.channel.on("background-unset", backgrounds => this.setState({ backgrounds: [] }));
-  }
-
-  render () {
-
-    const { channel } = this.props;
-    const backgrounds: BackgroundDetail[] = [...this.state.backgrounds];
-
-    if (!backgrounds.length) {
-      return (
+const Instructions = () => (
   <div style={assign({ padding: "20px" }, style.font)}>
     <h5 style={{ fontSize: "16px" }}>Setup Instructions</h5>
     <p>Please add the background decorator definition to your story.
@@ -69,16 +60,46 @@ export default class BackgroundPanel extends React.Component<BackgroundPanelProp
       lineHeight: "1.75em",
     }}><code dangerouslySetInnerHTML={{ __html }} /></pre>
   </div>
-      );
+);
+
+export default class BackgroundPanel extends React.Component<BackgroundPanelProps, any> {
+
+  state = { backgrounds: [] };
+
+  constructor(props) {
+    super(props);
+
+    this.props.channel.on("background-set", backgrounds => {
+      this.setState({ backgrounds });
+      this.setBackgroundInPreview(this.props.api.getQueryParam("background"));
+    });
+
+    this.props.channel.on("background-unset", backgrounds => {
+      this.setState({ backgrounds: [] });
+      this.props.api.setQueryParams({ background: null });
+    });
   }
 
+  private setBackgroundInPreview = (background) => this.props.channel.emit("background", background);
+
+  private setBackgroundFromSwatch = (background) => {
+    this.setBackgroundInPreview(background);
+    this.props.api.setQueryParams({ background });
+  }
+
+  render () {
+    const backgrounds: BackgroundDetail[] = [...this.state.backgrounds];
+
+    if (!backgrounds.length) return <Instructions />;
+
     // add reset as last option
     backgrounds.push(defaultBackground);
+
     return (
       <div style={{display: "inline-block", padding: "15px"}}>
-        {backgrounds.map((background, key) => (
+        {backgrounds.map(({ value, name }, key) => (
           <div key={key} style={{display: "inline-block", padding: "5px"}}>
-            <Swatch value={background.value} name={background.name} channel={channel} />
+            <Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
           </div>
         ))}
       </div>

addons/background/docs/Swatch.tsx

@@ -1,5 +1,5 @@
 
-import * as React from "react";
+import * as React from "react"; // tslint:disable-line
 import assign = require("object-assign");
 
 const style = {
@@ -35,31 +35,17 @@ const style = {
 export interface BackgroundItemProps {
   value: string;
   name?: string;
-  channel: NodeJS.EventEmitter;
+  setBackground(value: string): void;
 }
 
-export default class Swatch extends React.Component<BackgroundItemProps, any> {
-
-  state = { selected: null };
-
-  componentWillMount() {
-    this.setState({ selected: this.props.value });
-  }
-
-  public onBackgroundChange = () => {
-    const { value, channel } = this.props;
-    channel.emit("background", value);
-  }
-
-  render () {
-    return (
+export default ({ name, value, setBackground }: BackgroundItemProps) => (
   <div
     style={assign({}, style.swatches, style.listStyle, style.hard)}
-        onClick={this.onBackgroundChange}
+    onClick={() => setBackground(value)}
   >
     <div
       style={assign({}, style.swatch, {
-            background: this.props.value,
+        background: value,
         "backgroundSize": "cover",
         "backgroundPosition": "center",
       })}
@@ -67,13 +53,11 @@ export default class Swatch extends React.Component<BackgroundItemProps, any> {
     </div>
     <div style={assign({}, style.listStyle, style.soft)}>
       <h4 style={assign({ float: "left", fontWeight: "bold" }, style.font)}>
-            {this.props.name}:
+        {name}:
       </h4>
       <h4 style={assign({ float: "right", fontWeight: "normal" }, style.font)}>
-            <em>{this.props.value}</em>
+        <em>{value}</em>
       </h4>
     </div>
   </div>
-    );
-  }
-}
+);

addons/background/docs/__tests__/BackgroundPanel.tsx

@@ -11,31 +11,36 @@ const backgrounds = [
   { name: "An image", value: "url(http://placehold.it/350x150)" },
 ];
 
+const mockedApi = {
+  getQueryParam(value: string) { return; },
+  setQueryParams(obj) { return; },
+}
+
 describe("Background Panel", () => {
   it("should exist", () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
+    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
 
     expect(backgroundPanel).toBeDefined;
   });
 
   it("should have a default background value of transparent", () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
+    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
 
     expect(backgroundPanel.state().backgrounds.length).toBe(0);
   });
 
   it("should show setup instructions if no colors provided", () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
+    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
 
     expect(backgroundPanel.html().match(/Setup Instructions/gmi).length).toBeGreaterThan(0);
   });
 
   // it("should accept colors through channel and render the correct swatches with a default swatch", () => {
   //   const SpiedChannel = new EventEmitter();
-  //   const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel}/>);
+  //   const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
   //   SpiedChannel.emit("background-set", backgrounds);
 
   //   expect(backgroundPanel.state.backgrounds[0].name).toBe(backgrounds[0].name);
@@ -47,7 +52,7 @@ describe("Background Panel", () => {
 
   it("should pass the event from swatch clicks through the provided channel", () => {
     const SpiedChannel = new EventEmitter();
-    const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel}/>);
+    const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
     SpiedChannel.emit("background-set", backgrounds);
 
     const spy = jest.fn();

addons/background/docs/__tests__/Swatch.tsx

@@ -1,32 +1,31 @@
 import * as React from "react"; // tslint:disable-line
 const EventEmitter = require("events"); // tslint:disable-line
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 import Swatch from "../Swatch";
-const TestUtils = require("react-addons-test-utils");
+const TestUtils = require("react-addons-test-utils"); // tslint:disable-line
+const mockedSetBackround = (val: string) => {} // tslint:disable-line
 
 describe("Swatch", function() {
   it("should exist", () => {
     const SpiedChannel = new EventEmitter();
-    const swatch = shallow(<Swatch value="bar" name="foo" channel={SpiedChannel} />);
+    const swatch = shallow(<Swatch value="bar" name="foo" setBackground={mockedSetBackround} />);
 
     expect(swatch).toBeDefined();
   });
 
   it("should render the name of the swatch", () => {
-    const SpiedChannel = new EventEmitter();
 
     const markup = shallow(
-      <Swatch value="bar" name="foo" channel={SpiedChannel} />
+      <Swatch value="bar" name="foo" setBackground={mockedSetBackround}/>
     ).html();
 
     expect(markup.match(/foo/gmi).length).toBe(1);
   });
 
   it("should render the value of the swatch and set it to be the background", () => {
-    const SpiedChannel = new EventEmitter();
 
     const markup = shallow(
-      <Swatch value="bar" name="foo" channel={SpiedChannel} />
+      <Swatch value="bar" name="foo" setBackground={mockedSetBackround} />
     ).html();
 
     expect(markup.match(/background:bar/gmi).length).toBe(1);
@@ -34,15 +33,9 @@ describe("Swatch", function() {
   });
 
   it("should emit message on click", () => {
-    const SpiedChannel = new EventEmitter();
-    const swatch = TestUtils.renderIntoDocument(<Swatch value="#e6e6e6" name="Gray" channel={SpiedChannel} />);
-
     const spy = jest.fn();
-    SpiedChannel.on('background', spy);
-
-    TestUtils.Simulate.click(
-      TestUtils.scryRenderedDOMComponentsWithTag(swatch, "div")[0]
-    );
+    const swatch = mount(<Swatch value="#e6e6e6" name="Gray" setBackground={spy} />);
+    swatch.simulate("click");
 
     expect(spy).toBeCalledWith("#e6e6e6");
   });

addons/background/docs/index.tsx

@@ -28,19 +28,21 @@ export class BackgroundDecorator extends React.Component<any, any> {
 
     this.channel = addons.getChannel();
     this.story = this.props.story();
-
-    this.channel.on("background", background => this.setState({ background }));
-  }
-
-  componentWillUnmount() {
-    this.channel.emit("background-unset");
   }
 
   componentWillMount() {
+    this.channel.on("background", this.setBackground);
     this.channel.emit("background-set", this.props.backgrounds);
   }
 
-  public render() {
+  componentWillUnmount() {
+    this.channel.removeListener("background", this.setBackground);
+    this.channel.emit("background-unset");
+  }
+
+  private setBackground = background => this.setState({ background })
+
+  render() {
     const styles = style.wrapper;
     styles.backgroundColor = this.state.background;
     return <div style={assign({}, styles)}>{this.story}</div>;

addons/background/docs/register.tsx

@@ -11,7 +11,7 @@ addons.register(ADDON_ID, api => {
   addons.addPanel(PANEL_ID, {
     title: "Backgrounds",
     render: () => (
-      <BackgroundPanel channel={channel} />
+      <BackgroundPanel channel={channel} api={api} />
     ),
   });
 });

addons/background/docs/static/manager.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"static/manager.bundle.js","sources":["webpack:///static/manager.bundle.js","webpack:///"],"mappings":"AAAA;ACw8GA;AAs2HA;AAikIA;AAggIA;AAutFA;AAmnHA;AAswFA;AA6xHA;AAmmHA;AA2rHA;AA+nFA;AAylHA;AA8qCA;AAw8FA","sourceRoot":""}
+{"version":3,"file":"static/manager.bundle.js","sources":["webpack:///static/manager.bundle.js","webpack:///"],"mappings":"AAAA;ACw8GA;AAs2HA;AAikIA;AAw/HA;AA8uFA;AAumHA;AAswFA;AA0xHA;AAomHA;AA6rHA;AAkqFA;AA6pHA;AAqkCA;AAw8FA","sourceRoot":""}

addons/background/docs/static/preview.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"static/preview.bundle.js","sources":["webpack:///static/preview.bundle.js","webpack:///?d41d"],"mappings":"AAAA;ACw8GA;AAm2HA;AAkkJA;AA67GA;AA4zFA;AAq8GA;AA+lGA;AAwtHA;AAmtHA;AA2yGA","sourceRoot":""}
+{"version":3,"file":"static/preview.bundle.js","sources":["webpack:///static/preview.bundle.js","webpack:///?d41d"],"mappings":"AAAA;ACw8GA;AAm2HA;AAkkJA;AAq7GA;AAi0FA;AA87GA;AA+lGA;AAwtHA;AAmtHA;AAqyGA","sourceRoot":""}