GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 20:41:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

FIX image on addon-backgrounds readme && IMPROVE addons-backgrounds readme

Browse Source
This commit is contained in:
Norbert de Langen 2018-01-04 17:07:08 +01:00
parent bac24bee7c
commit 37e2a8bebd
No known key found for this signature in database
GPG Key ID: 976651DA156C2825
1 changed files with 36 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
addons/background/README.md
View File

@ -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:
```js
import React from 'react';
import { storiesOf } from "@storybook/react";
```bash
$ npm run storybook # for storybook testing
# (coming soon) $ npm run test-watch # for testing
```
To test the project run:
```bash
$ npm test
import { backgrounds } from "./my-lib";
storiesOf("Button", module)
.addDecorator(backgrounds)
.add("with text", () => <button>Click me</button>);
```