mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
8c8b35a2d2
# Conflicts: # CHANGELOG.md # addons/actions/package.json # addons/background/package.json # addons/centered/package.json # addons/comments/package.json # addons/events/package.json # addons/graphql/package.json # addons/info/package.json # addons/knobs/package.json # addons/links/package.json # addons/notes/package.json # addons/options/package.json # addons/storyshots/package.json # app/react-native/package.json # app/react/package.json # app/vue/package.json # lerna.json # lib/addons/package.json # lib/channel-postmessage/package.json # lib/channel-websocket/package.json # lib/channels/package.json # lib/cli/package.json # lib/codemod/package.json # lib/components/package.json # lib/ui/package.json # yarn.lock
addon-backgrounds
Getting Started
npm i --save @storybook/addon-backgrounds
Then create a file called addons.js in your storybook config.
Add following content to it:
import '@storybook/addon-backgrounds/register';
Then write your stories like this:
import React from 'react';
import { storiesOf } from "@storybook/react";
import backgrounds from "@storybook/addon-backgrounds";
storiesOf("Button", module)
.addDecorator(backgrounds([
{ name: "twitter", value: "#00aced", default: true },
{ name: "facebook", value: "#3b5998" },
]))
.add("with text", () => <button>Click me</button>);
Development
This project is built using typescript and is tested with jest. To get started, clone this repo and run the following command:
$ npm install # install node deps
To run the project locally, run:
$ npm run storybook # for storybook testing
# (coming soon) $ npm run test-watch # for testing
To test the project run:
$ npm test