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

Added stories for remaining components

Browse Source
This commit is contained in:
Tom Coleman 2017-12-18 16:53:10 +11:00
parent 51361a8a7a
commit e50ceaa108
8 changed files with 134 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
lib/ui/src/modules/ui/components/addon_panel/index.stories.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import AddonPanel from './index';
const panels = {
test1: {
title: 'Test 1',
render() {
return <div id="test1">TEST 1</div>;
},
},
test2: {
title: 'Test 2',
render() {
return <div id="test2">TEST 2</div>;
},
},
};
const onPanelSelect = action('onPanelSelect');
storiesOf('ui/AddonPanel', module)
.addDecorator(s => <div style={{ height: '100px', display: 'flex' }}>{s()}</div>)
.add('default', () => (
<AddonPanel panels={panels} onPanelSelect={onPanelSelect} selectedPanel="test2" />
))
.add('no panels', () => <AddonPanel panels={{}} onPanelSelect={onPanelSelect} />);

72
lib/ui/src/modules/ui/components/layout/index.stories.js Normal file
View File

@ -0,0 +1,72 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import Layout from './index';
const panelStyle = {
position: 'absolute',
height: '100%',
width: '100%',
color: 'white',
};
const mockStoriesPanel = () => <div style={{ ...panelStyle, background: '#4abdac' }}>Stories</div>;
const mockAddonPanel = () => <div style={{ ...panelStyle, background: '#fc4a1a' }}>Addon</div>;
const mockPreviewPanel = () => <div style={{ ...panelStyle, background: '#f7b733' }}>Preview</div>;
storiesOf('ui/Layout', module)
.add('default', () => (
<Layout
showStoriesPanel
showAddonPanel
goFullScreen={false}
addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
/>
))
.add('full screen', () => (
<Layout
showStoriesPanel={false}
showAddonPanel={false}
goFullScreen
addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
/>
))
.add('no stories panel', () => (
<Layout
showStoriesPanel={false}
showAddonPanel
goFullScreen={false}
addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
/>
))
.add('no addon panel', () => (
<Layout
showStoriesPanel
showAddonPanel={false}
goFullScreen={false}
addonPanelInRight={false}
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
/>
))
.add('addon panel in right', () => (
<Layout
showStoriesPanel
showAddonPanel
goFullScreen={false}
addonPanelInRight
storiesPanel={mockStoriesPanel}
addonPanel={mockAddonPanel}
preview={mockPreviewPanel}
/>
));

11
lib/ui/src/modules/ui/components/menu_item.stories.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import MenuItem from './menu_item';
storiesOf('ui/MenuItem', module).add('default', () => (
<MenuItem title="title" onClick={action('onClick')}>
Content
</MenuItem>
));

19
lib/ui/src/modules/ui/components/search_box.stories.js Normal file
View File

@ -0,0 +1,19 @@
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import SearchBox from './search_box';
const stories = [
{
kind: 'a',
stories: ['b', 'c'],
},
];
const onSelectStory = action('onSelectStory');
const onClose = action('onClose');
storiesOf('ui/SearchBox', module)
.add('default', () => <SearchBox showSearchBox onSelectStory={onSelectStory} onClose={onClose} />)
.add('with stories', () => (
<SearchBox showSearchBox onSelectStory={onSelectStory} onClose={onClose} stories={stories} />
));

2
lib/ui/src/modules/ui/components/stories_panel/header.stories.js
View File

@ -5,6 +5,6 @@ import { action } from '@storybook/addon-actions';
import Header from './header';
const openShortcutsHelp = action('openShortcutsHelp');
storiesOf('ui/Header', module).add('simple', () => (
storiesOf('ui/stories/Header', module).add('simple', () => (
<Header name="name" url="http://google.com" openShortcutsHelp={openShortcutsHelp} />
));

2
lib/ui/src/modules/ui/components/stories_panel/index.stories.js
View File

@ -26,7 +26,7 @@ const decorator = withLifecyle({
const storiesHierarchy = createHierarchy([{ kind: 'kk', namespaces: ['kk'], stories: ['bb'] }]);
const openShortcutsHelp = action('openShortcutsHelp');
const onStoryFilter = action('onStoryFilter');
storiesOf('ui/StoriesPanel', module)
storiesOf('ui/stories/StoriesPanel', module)
.addDecorator(decorator)
.add('default', () => (
<StoriesPanel

2
lib/ui/src/modules/ui/components/stories_panel/stories_tree/index.stories.js
View File

@ -52,7 +52,7 @@ const decorator = withLifecyle({
},
});
storiesOf('ui/Stories', module)
storiesOf('ui/stories/Stories', module)
.addDecorator(decorator)
.add('empty', () => (
<Stories

2
lib/ui/src/modules/ui/components/stories_panel/text_filter.stories.js
View File

@ -6,7 +6,7 @@ import TextFilter from './text_filter';
const onChange = action('onChange');
const onClear = action('onClear');
storiesOf('ui/TextFilter', module)
storiesOf('ui/stories/TextFilter', module)
.add('without filterText', () => <TextFilter onChange={onChange} onClear={onClear} />)
.add('with filterText', () => (
<TextFilter text="Filter Text" onChange={onChange} onClear={onClear} />