diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e813ca..5f4a502 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/README.md b/README.md index a197fd2..df09f78 100644 --- a/README.md +++ b/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", () => ) diff --git a/package.json b/package.json index 0103875..0b70371 100644 --- a/package.json +++ b/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", diff --git a/src/BackgroundPanel.tsx b/src/BackgroundPanel.tsx index daa8ac7..baf4bc2 100644 --- a/src/BackgroundPanel.tsx +++ b/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; - // add reset as last option - backgrounds.push(defaultBackground); + const hasDefault = backgrounds.filter(x => x.default).length; + if (!hasDefault) backgrounds.push(defaultBackground); return (
diff --git a/src/__tests__/BackgroundPanel.tsx b/src/__tests__/BackgroundPanel.tsx index 00c06c0..2f71a0b 100644 --- a/src/__tests__/BackgroundPanel.tsx +++ b/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(); + (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();