storiesOf('Hashtag', module) .addDecorator(withA11y) .addDecorator(helpers.layout) .add('clickable', () => ({ components: { Hashtag }, store: helpers.store, data: () => ({ hashtag: 'SomeHashtag', }), template: '<hashtag :id="hashtag" />', }))
storiesOf('Playground') .addDecorator(withKnobs) .add('sticky tests', () => <Playground stickyHeaderCount={number('HeaderSticky', 0, { min: 0 })} leftStickyColumnCount={number('LeftSticky', 0, { min: 0 })} rightStickyColumnCount={number('RightSticky', 0, { min: 0 })} stickyFooterCount={number('FooterSticky', 0, { min: 0 })} width={text('width', '100%')} height={text('height', '200px')} />);
// addDecorator() allows us to add some “context” to the rendering of each task. // In this case we add padding around the list to make it easier to visually verify. // Decorators are a way to provide arbitrary wrappers to stories. // In this case we’re using a decorator to add styling. They can also be used to // wrap stories in “providers” –i.e. library components that set React context. storiesOf("TaskList", module) .addDecorator(story => <div style={{ padding: "3rem" }}>{story()}</div>) .add("default", () => <PureTaskList tasks={defaultTasks} {...actions} />) .add("withPinnedTasks", () => ( <PureTaskList tasks={withPinnedTasks} {...actions} /> )) .add("loading", () => <PureTaskList loading tasks={[]} {...actions} />) .add("empty", () => <PureTaskList tasks={[]} {...actions} />);
storiesOf("Button", module) .addDecorator(withKnobs) .add("as dynamic variables", () => { // Knobs as dynamic variables. const label = text("Label", "This is a button") const isDangerousAction = boolean("Is dangerous action", false) const isPrimaryAction = boolean("Is primary action", false) const disabled = boolean("Is disabled", false) const asLink = boolean("As Link", false) return (<Button asLink={asLink} isPrimaryAction={isPrimaryAction} isDangerousAction={isDangerousAction} disabled={disabled} onClick={action("button-click")} label={label} />) })
// Use a mocked version of the Redux store provided in a decorator: storiesOf("InboxScreen", module) .addDecorator(story => <Provider store={store}>{story()}</Provider>) .add("default", () => <PureInboxScreen />) .add("error", () => <PureInboxScreen error="Something" />);
storiesOf("App", module) .addDecorator(StoryRouter({ "/news/*": linkTo("App", "news") })) .add("home", () => ( <App> <Home top={homeData.top} banner={homeData.banner} bottom={homeData.bottom} /> </App> ));
storiesOf('AvatarMenu', module) .addDecorator(withA11y) .addDecorator(helpers.layout) .addDecorator(StoryRouter()) .add('dropdown', () => ({ components: { AvatarMenu }, store: helpers.store, template: '<avatar-menu placement="top" />', }))
storiesOf("Home", module) .addDecorator(StoryRouter()) .add("default", () => { return ( <Home top={homeData.top} banner={homeData.banner} bottom={homeData.bottom} /> ); });
storiesOf("App", module) .addDecorator(StoryRouter({ "/": linkTo("App", "home") })) .add("news", () => ( <App> <News data={homeData.banner} /> </App> ));
storiesOf('Generic/LoadingSpinner', module) .addDecorator(helpers.layout) .add('default', () => ({ components: { LoadingSpinner }, template: '<loading-spinner />', }))
storiesOf("NavigationPrimary", module) .addDecorator(withKnobs) .add("as dynamic variables", () => NavigationPrimary)
storiesOf('CommentList', module) .addDecorator(withA11y) .addDecorator(helpers.layout) .add('given 10 comments', () => ({ components: { HcCommentList }, store: helpers.store, data: () => ({ post: { comments }, }), template: `<hc-comment-list :post="post" />`, }))
storiesOf('Search Field', module) .addDecorator(withA11y) .addDecorator(helpers.layout) .add('test', () => ({ components: { SearchableInput }, store: helpers.store, data: () => ({ searchResults, }), template: ` <searchable-input :options="searchResults" /> `, }))
storiesOf('CommentCard', module) .addDecorator(withA11y) .addDecorator(helpers.layout) .add('Basic comment', () => ({ components: { CommentCard }, store: helpers.store, data: () => ({ comment, }), template: `<comment-card :key="comment.id" :comment="comment" />`, }))
storiesOf('Generic/LabeledButton', module) .addDecorator(helpers.layout) .add('default', () => ({ components: { LabeledButton }, data: () => ({ filled: false, }), template: ` <labeled-button icon="check" :filled="filled" label="Toggle Me!!" @click="filled = !filled" /> `, }))