set default background color (#23)

* set default background color

* update changelog

* 0.0.7

addons/background/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### vNext
 
+### v0.0.7
+
+- Bug: Default background will now auto set if nothing is set in the url [#23](https://github.com/NewSpring/react-storybook-addon-backgrounds/pull/23)
+
 ### v0.0.6
 
 - Feature: Allow setting a background as a default [#21](https://github.com/NewSpring/react-storybook-addon-backgrounds/pull/21)

addons/background/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storybook-addon-backgrounds",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A react storybook addon to show different backgrounds for your preview",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

addons/background/src/BackgroundPanel.tsx

@@ -72,7 +72,14 @@ export default class BackgroundPanel extends React.Component<BackgroundPanelProp
 
     this.props.channel.on("background-set", backgrounds => {
       this.setState({ backgrounds });
-      this.setBackgroundInPreview(this.props.api.getQueryParam("background"));
+      const currentBackground = this.props.api.getQueryParam("background");
+
+      if (currentBackground) {
+        this.setBackgroundInPreview(currentBackground);
+      } else if (backgrounds.filter(x => x.default).length) {
+        const defaultBgs = backgrounds.filter(x => x.default);
+        this.setBackgroundInPreview(defaultBgs[0].value);
+      }
     });
 
     this.props.channel.on("background-unset", backgrounds => {

addons/background/src/__tests__/BackgroundPanel.tsx

@@ -72,15 +72,36 @@ describe("Background Panel", () => {
   it("should allow setting a default swatch", () => {
     const SpiedChannel = new EventEmitter();
     const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
-    (backgrounds[0] as any).default = true;
-    SpiedChannel.emit("background-set", backgrounds);
+    const localBgs = [...backgrounds];
+    (localBgs[0] as any).default = true;
+    SpiedChannel.emit("background-set", localBgs);
 
-    expect(backgroundPanel.state.backgrounds[0].name).toBe(backgrounds[0].name);
-    expect(backgroundPanel.state.backgrounds[2].value).toBe(backgrounds[2].value);
+    expect(backgroundPanel.state.backgrounds[0].name).toBe(localBgs[0].name);
+    expect(backgroundPanel.state.backgrounds[2].value).toBe(localBgs[2].value);
+
+    //check to make sure the default bg was added
+    const headings = TestUtils.scryRenderedDOMComponentsWithTag(backgroundPanel, "h4");
+    expect(headings.length).toBe(8);
+    delete (backgrounds[0] as any).default;
+  });
+
+  it("should allow the default swatch become the background color", () => {
+    const SpiedChannel = new EventEmitter();
+    const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
+    const localBgs = [...backgrounds];
+    (localBgs[1] as any).default = true;
+    SpiedChannel.on("background", bg => {
+      expect(bg).toBe(localBgs[1].value);
+    })
+    SpiedChannel.emit("background-set", localBgs);
+
+    expect(backgroundPanel.state.backgrounds[0].name).toBe(localBgs[0].name);
+    expect(backgroundPanel.state.backgrounds[2].value).toBe(localBgs[2].value);
 
     //check to make sure the default bg was added
     const headings = TestUtils.scryRenderedDOMComponentsWithTag(backgroundPanel, "h4");
     expect(headings.length).toBe(8);
+    delete (backgrounds[1] as any).default;
   });
 
   it("should unset all swatches on receiving the backgroun-unset message", () => {

addons/background/src/__tests__/index.tsx

@@ -40,7 +40,7 @@ describe("Background Decorator", () => {
     const backgroundDecorator = shallow(<BackgroundDecorator story={testStory} channel={SpiedChannel} />);
 
     const spy = jest.fn();
-    SpiedChannel.on('background-unset', spy);
+    SpiedChannel.on("background-unset", spy);
 
     backgroundDecorator.unmount();
 
@@ -50,7 +50,7 @@ describe("Background Decorator", () => {
   it("should send background-set event when the component mounts", () => {
     const SpiedChannel = new EventEmitter();
     const spy = jest.fn();
-    SpiedChannel.on('background-set', spy);
+    SpiedChannel.on("background-set", spy);
 
     const backgroundDecorator = shallow(<BackgroundDecorator story={testStory} channel={SpiedChannel} />);
 

addons/background/src/index.story.tsx

@@ -14,7 +14,7 @@ storiesOf("Second Component", module)
   .addDecorator(centered)
   .addDecorator(backgrounds([
     { name: "twitter", value: "#00aced" },
-    { name: "facebook", value: "#3b5998" },
+    { name: "facebook", value: "#3b5998", default: true },
   ]))
   .add("Second Button", () => <button>Click me</button>)
   ;