Merge pull request #2644 from storybooks/fix/add-demoimgs-to-docs

ADD demo images to a new img folder with the documentation site

addons/background/README.md

@@ -1,15 +1,30 @@
-# 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
 npm i --save @storybook/addon-backgrounds
 ```
 
+## Configuration
+
 Then create a file called `addons.js` in your storybook config.
 
 Add following content to it:
@@ -18,6 +33,8 @@ Add following content to it:
 import '@storybook/addon-backgrounds/register';
 ```
 
+## Usage
+
 Then write your stories like this:
 
 ```js
@@ -33,23 +50,24 @@ storiesOf("Button", module)
   .add("with text", () => <button>Click me</button>);
 ```
 
-### 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:
-
-```bash
-$ npm run storybook # for storybook testing
-# (coming soon) $ npm run test-watch # for testing
-```
+```js
+import React from 'react';
+import { storiesOf } from "@storybook/react";
 
-To test the project run:
+import { backgrounds } from "./my-lib";
 
-```bash
-$ npm test
+storiesOf("Button", module)
+  .addDecorator(backgrounds)
+  .add("with text", () => <button>Click me</button>);
 ```

docs/package.json

@@ -9,7 +9,7 @@
   "license": "MIT",
   "main": "n/a",
   "scripts": {
-    "build": "gatsby build && cp static/* .travis.yml ./public",
+    "build": "gatsby build && cp static/**/* .travis.yml ./public",
     "build-storybook": "build-storybook",
     "deploy:ci": "gh-pages -t -r https://${GH_TOKEN}@github.com/storybooks/storybook.git -d public -o origin -b gh-pages",
     "deploy:manual": "gh-pages -t -r [email protected]:storybooks/storybook.git -d public -o origin -b gh-pages",