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

update docs

Browse Source
This commit is contained in:
James Baxley 2016-09-01 08:54:36 -04:00 committed by Norbert de Langen
parent af203b3044
commit 0d268bb5f7
10 changed files with 118 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
addons/background/docs/BackgroundPanel.tsx
View File

@ -15,8 +15,15 @@ export interface BackgroundDetail {
value: string;
};
export interface StoryBookAPI {
getQueryParam(param: string): string;
setQueryParams(params: { [key: string]: string } ): void;
selectStory(story: string, storyOf: string): void;
}
export interface BackgroundPanelProps {
channel: NodeJS.EventEmitter;
api: StoryBookAPI;
}
const defaultBackground: BackgroundDetail = {
@ -37,48 +44,62 @@ storiesOf("First Component", module)
;
`.trim();
const Instructions = () => (
<div style={assign({ padding: "20px" }, style.font)}>
<h5 style={{ fontSize: "16px" }}>Setup Instructions</h5>
<p>Please add the background decorator definition to your story.
The background decorate accepts an array of items, which should include a
name for your color (preferably the css class name) and the corresponding color / image value.</p>
<p>Below is an example of how to add the background decorator to your story definition.</p>
<pre style={{
padding: "30px",
display: "block",
background: "rgba(19,19,19,0.9)",
color: "rgba(255,255,255,0.95)",
marginTop: "15px",
lineHeight: "1.75em",
}}><code dangerouslySetInnerHTML={{ __html }} /></pre>
</div>
);
export default class BackgroundPanel extends React.Component<BackgroundPanelProps, any> {
state = { backgrounds: [] };
constructor(props) {
super(props);
this.props.channel.on("background-set", backgrounds => this.setState({ backgrounds }));
this.props.channel.on("background-unset", backgrounds => this.setState({ backgrounds: [] }));
this.props.channel.on("background-set", backgrounds => {
this.setState({ backgrounds });
this.setBackgroundInPreview(this.props.api.getQueryParam("background"));
});
this.props.channel.on("background-unset", backgrounds => {
this.setState({ backgrounds: [] });
this.props.api.setQueryParams({ background: null });
});
}
private setBackgroundInPreview = (background) => this.props.channel.emit("background", background);
private setBackgroundFromSwatch = (background) => {
this.setBackgroundInPreview(background);
this.props.api.setQueryParams({ background });
}
render () {
const { channel } = this.props;
const backgrounds: BackgroundDetail[] = [...this.state.backgrounds];
if (!backgrounds.length) {
return (
<div style={assign({ padding: "20px" }, style.font)}>
<h5 style={{ fontSize: "16px" }}>Setup Instructions</h5>
<p>Please add the background decorator definition to your story.
The background decorate accepts an array of items, which should include a
name for your color (preferably the css class name) and the corresponding color / image value.</p>
<p>Below is an example of how to add the background decorator to your story definition.</p>
<pre style={{
padding: "30px",
display: "block",
background: "rgba(19,19,19,0.9)",
color: "rgba(255,255,255,0.95)",
marginTop: "15px",
lineHeight: "1.75em",
}}><code dangerouslySetInnerHTML={{ __html }} /></pre>
</div>
);
}
if (!backgrounds.length) return <Instructions />;
// add reset as last option
backgrounds.push(defaultBackground);
return (
<div style={{display: "inline-block", padding: "15px"}}>
{backgrounds.map((background, key) => (
{backgrounds.map(({ value, name }, key) => (
<div key={key} style={{display: "inline-block", padding: "5px"}}>
<Swatch value={background.value} name={background.name} channel={channel} />
<Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
</div>
))}
</div>

66
addons/background/docs/Swatch.tsx
View File

@ -1,5 +1,5 @@
import * as React from "react";
import * as React from "react"; // tslint:disable-line
import assign = require("object-assign");
const style = {
@ -35,45 +35,29 @@ const style = {
export interface BackgroundItemProps {
value: string;
name?: string;
channel: NodeJS.EventEmitter;
setBackground(value: string): void;
}
export default class Swatch extends React.Component<BackgroundItemProps, any> {
state = { selected: null };
componentWillMount() {
this.setState({ selected: this.props.value });
}
public onBackgroundChange = () => {
const { value, channel } = this.props;
channel.emit("background", value);
}
render () {
return (
<div
style={assign({}, style.swatches, style.listStyle, style.hard)}
onClick={this.onBackgroundChange}
>
<div
style={assign({}, style.swatch, {
background: this.props.value,
"backgroundSize": "cover",
"backgroundPosition": "center",
})}
>
</div>
<div style={assign({}, style.listStyle, style.soft)}>
<h4 style={assign({ float: "left", fontWeight: "bold" }, style.font)}>
{this.props.name}:
</h4>
<h4 style={assign({ float: "right", fontWeight: "normal" }, style.font)}>
<em>{this.props.value}</em>
</h4>
</div>
</div>
);
}
}
export default ({ name, value, setBackground }: BackgroundItemProps) => (
<div
style={assign({}, style.swatches, style.listStyle, style.hard)}
onClick={() => setBackground(value)}
>
<div
style={assign({}, style.swatch, {
background: value,
"backgroundSize": "cover",
"backgroundPosition": "center",
})}
>
</div>
<div style={assign({}, style.listStyle, style.soft)}>
<h4 style={assign({ float: "left", fontWeight: "bold" }, style.font)}>
{name}:
</h4>
<h4 style={assign({ float: "right", fontWeight: "normal" }, style.font)}>
<em>{value}</em>
</h4>
</div>
</div>
);

15
addons/background/docs/__tests__/BackgroundPanel.tsx
View File

@ -11,31 +11,36 @@ const backgrounds = [
{ name: "An image", value: "url(http://placehold.it/350x150)" },
];
const mockedApi = {
getQueryParam(value: string) { return; },
setQueryParams(obj) { return; },
}
describe("Background Panel", () => {
it("should exist", () => {
const SpiedChannel = new EventEmitter();
const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
expect(backgroundPanel).toBeDefined;
});
it("should have a default background value of transparent", () => {
const SpiedChannel = new EventEmitter();
const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
expect(backgroundPanel.state().backgrounds.length).toBe(0);
});
it("should show setup instructions if no colors provided", () => {
const SpiedChannel = new EventEmitter();
const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
expect(backgroundPanel.html().match(/Setup Instructions/gmi).length).toBeGreaterThan(0);
});
// it("should accept colors through channel and render the correct swatches with a default swatch", () => {
// const SpiedChannel = new EventEmitter();
// const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel}/>);
// const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
// SpiedChannel.emit("background-set", backgrounds);
// expect(backgroundPanel.state.backgrounds[0].name).toBe(backgrounds[0].name);
@ -47,7 +52,7 @@ describe("Background Panel", () => {
it("should pass the event from swatch clicks through the provided channel", () => {
const SpiedChannel = new EventEmitter();
const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel}/>);
const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
SpiedChannel.emit("background-set", backgrounds);
const spy = jest.fn();

23
addons/background/docs/__tests__/Swatch.tsx
View File

@ -1,32 +1,31 @@
import * as React from "react"; // tslint:disable-line
const EventEmitter = require("events"); // tslint:disable-line
import { shallow } from "enzyme";
import { shallow, mount } from "enzyme";
import Swatch from "../Swatch";
const TestUtils = require("react-addons-test-utils");
const TestUtils = require("react-addons-test-utils"); // tslint:disable-line
const mockedSetBackround = (val: string) => {} // tslint:disable-line
describe("Swatch", function() {
it("should exist", () => {
const SpiedChannel = new EventEmitter();
const swatch = shallow(<Swatch value="bar" name="foo" channel={SpiedChannel} />);
const swatch = shallow(<Swatch value="bar" name="foo" setBackground={mockedSetBackround} />);
expect(swatch).toBeDefined();
});
it("should render the name of the swatch", () => {
const SpiedChannel = new EventEmitter();
const markup = shallow(
<Swatch value="bar" name="foo" channel={SpiedChannel} />
<Swatch value="bar" name="foo" setBackground={mockedSetBackround}/>
).html();
expect(markup.match(/foo/gmi).length).toBe(1);
});
it("should render the value of the swatch and set it to be the background", () => {
const SpiedChannel = new EventEmitter();
const markup = shallow(
<Swatch value="bar" name="foo" channel={SpiedChannel} />
<Swatch value="bar" name="foo" setBackground={mockedSetBackround} />
).html();
expect(markup.match(/background:bar/gmi).length).toBe(1);
@ -34,15 +33,9 @@ describe("Swatch", function() {
});
it("should emit message on click", () => {
const SpiedChannel = new EventEmitter();
const swatch = TestUtils.renderIntoDocument(<Swatch value="#e6e6e6" name="Gray" channel={SpiedChannel} />);
const spy = jest.fn();
SpiedChannel.on('background', spy);
TestUtils.Simulate.click(
TestUtils.scryRenderedDOMComponentsWithTag(swatch, "div")[0]
);
const swatch = mount(<Swatch value="#e6e6e6" name="Gray" setBackground={spy} />);
swatch.simulate("click");
expect(spy).toBeCalledWith("#e6e6e6");
});

16
addons/background/docs/index.tsx
View File

@ -28,19 +28,21 @@ export class BackgroundDecorator extends React.Component<any, any> {
this.channel = addons.getChannel();
this.story = this.props.story();
this.channel.on("background", background => this.setState({ background }));
}
componentWillUnmount() {
this.channel.emit("background-unset");
}
componentWillMount() {
this.channel.on("background", this.setBackground);
this.channel.emit("background-set", this.props.backgrounds);
}
public render() {
componentWillUnmount() {
this.channel.removeListener("background", this.setBackground);
this.channel.emit("background-unset");
}
private setBackground = background => this.setState({ background })
render() {
const styles = style.wrapper;
styles.backgroundColor = this.state.background;
return <div style={assign({}, styles)}>{this.story}</div>;

2
addons/background/docs/register.tsx
View File

@ -11,7 +11,7 @@ addons.register(ADDON_ID, api => {
addons.addPanel(PANEL_ID, {
title: "Backgrounds",
render: () => (
<BackgroundPanel channel={channel} />
<BackgroundPanel channel={channel} api={api} />
),
});
});

24
addons/background/docs/static/manager.bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
addons/background/docs/static/manager.bundle.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"static/manager.bundle.js","sources":["webpack:///static/manager.bundle.js","webpack:///"],"mappings":"AAAA;ACw8GA;AAs2HA;AAikIA;AAggIA;AAutFA;AAmnHA;AAswFA;AA6xHA;AAmmHA;AA2rHA;AA+nFA;AAylHA;AA8qCA;AAw8FA","sourceRoot":""}
{"version":3,"file":"static/manager.bundle.js","sources":["webpack:///static/manager.bundle.js","webpack:///"],"mappings":"AAAA;ACw8GA;AAs2HA;AAikIA;AAw/HA;AA8uFA;AAumHA;AAswFA;AA0xHA;AAomHA;AA6rHA;AAkqFA;AA6pHA;AAqkCA;AAw8FA","sourceRoot":""}

10
addons/background/docs/static/preview.bundle.js vendored
View File

File diff suppressed because one or more lines are too long

2
addons/background/docs/static/preview.bundle.js.map vendored
View File

@ -1 +1 @@
{"version":3,"file":"static/preview.bundle.js","sources":["webpack:///static/preview.bundle.js","webpack:///?d41d"],"mappings":"AAAA;ACw8GA;AAm2HA;AAkkJA;AA67GA;AA4zFA;AAq8GA;AA+lGA;AAwtHA;AAmtHA;AA2yGA","sourceRoot":""}
{"version":3,"file":"static/preview.bundle.js","sources":["webpack:///static/preview.bundle.js","webpack:///?d41d"],"mappings":"AAAA;ACw8GA;AAm2HA;AAkkJA;AAq7GA;AAi0FA;AA87GA;AA+lGA;AAwtHA;AAmtHA;AAqyGA","sourceRoot":""}