allow default background (#21)

* allow default background

* updated changelog for new default feature

* 0.0.6

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### vNext
 
+### v0.0.6
+
+- Feature: Allow setting a background as a default [#21](https://github.com/NewSpring/react-storybook-addon-backgrounds/pull/21)
+
 ### v0.0.5
 
 - Feature: Allow background images instead of just color [#15](https://github.com/NewSpring/react-storybook-addon-backgrounds/pull/15)

README.md

@@ -34,7 +34,7 @@ import backgrounds from "react-storybook-addon-backgrounds";
 
 storiesOf("Button", module)
   .addDecorator(backgrounds([
-    { name: "twitter", value: "#00aced" },
+    { name: "twitter", value: "#00aced", default: true },
     { name: "facebook", value: "#3b5998" },
   ]))
   .add("with text", () => <button>Click me</button>)

package.json

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

src/BackgroundPanel.tsx

@@ -13,6 +13,7 @@ const style = {
 export interface BackgroundDetail {
   name?: string;
   value: string;
+  default?: boolean;
 };
 
 export interface StoryBookAPI {
@@ -92,8 +93,8 @@ export default class BackgroundPanel extends React.Component<BackgroundPanelProp
 
     if (!backgrounds.length) return <Instructions />;
 
-    // add reset as last option
-    backgrounds.push(defaultBackground);
+    const hasDefault = backgrounds.filter(x => x.default).length;
+    if (!hasDefault) backgrounds.push(defaultBackground);
 
     return (
       <div style={{display: "inline-block", padding: "15px"}}>

src/__tests__/BackgroundPanel.tsx

@@ -54,7 +54,7 @@ describe("Background Panel", () => {
 
     expect(mockedApi.setQueryParams).toBeCalledWith({ background: null });
 
-  })
+  });
 
   it("should accept colors through channel and render the correct swatches with a default swatch", () => {
     const SpiedChannel = new EventEmitter();
@@ -69,6 +69,20 @@ describe("Background Panel", () => {
     expect(headings.length).toBe(10);
   });
 
+  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);
+
+    expect(backgroundPanel.state.backgrounds[0].name).toBe(backgrounds[0].name);
+    expect(backgroundPanel.state.backgrounds[2].value).toBe(backgrounds[2].value);
+
+    //check to make sure the default bg was added
+    const headings = TestUtils.scryRenderedDOMComponentsWithTag(backgroundPanel, "h4");
+    expect(headings.length).toBe(8);
+  });
+
   it("should unset all swatches on receiving the backgroun-unset message", () => {
     const SpiedChannel = new EventEmitter();
     const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);