-
-
Notifications
You must be signed in to change notification settings - Fork 135
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
TASK: create storybooks for remaining components
- Loading branch information
Showing
16 changed files
with
290 additions
and
1 deletion.
There are no files selected for viewing
15 changes: 15 additions & 0 deletions
15
Resources/Private/JavaScript/Components/Bar/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import Bar from './index.js'; | ||
|
|
||
| storiesOf('Bar', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <Bar position="top"> | ||
| Top bar | ||
| </Bar> | ||
| <Bar position="bottom"> | ||
| Bottom bar | ||
| </Bar> | ||
| </div> | ||
| )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
Resources/Private/JavaScript/Components/Dialog/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import React from 'react'; | ||
| import {storiesOf, action} from '@kadira/storybook'; | ||
| import Dialog from './index.js'; | ||
|
|
||
| storiesOf('Dialog', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <Dialog | ||
| isOpen={true} | ||
| wide={true} | ||
| title="Hello dialog!" | ||
| onRequestClose={action('onRequestClose')} | ||
| actions={[ | ||
| <div>Button</div> | ||
| ]} | ||
| > | ||
| H1ello world | ||
| </Dialog> | ||
| <div id="dialog" /> | ||
| </div> | ||
| )); |
15 changes: 15 additions & 0 deletions
15
Resources/Private/JavaScript/Components/DropDown/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import DropDown from './index.js'; | ||
|
|
||
| storiesOf('DropDown', module) | ||
| .add('default', () => ( | ||
| <DropDown isOpened={true}> | ||
| <DropDown.Header> | ||
| Dropdown header | ||
| </DropDown.Header> | ||
| <DropDown.Contents> | ||
| Dropdown contents | ||
| </DropDown.Contents> | ||
| </DropDown> | ||
| )); |
16 changes: 16 additions & 0 deletions
16
Resources/Private/JavaScript/Components/Grid/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import Grid from './index.js'; | ||
| import GridItem from './GridItem/index.js'; | ||
|
|
||
| storiesOf('Grid', module) | ||
| .add('default', () => ( | ||
| <Grid> | ||
| <GridItem width="33%">Item 1</GridItem> | ||
| <GridItem width="33%">Item 2</GridItem> | ||
| <GridItem width="33%">Item 3</GridItem> | ||
| <GridItem width="33%">Item 4</GridItem> | ||
| <GridItem width="33%">Item 5</GridItem> | ||
| <GridItem width="33%">Item 6</GridItem> | ||
| </Grid> | ||
| )); |
15 changes: 15 additions & 0 deletions
15
Resources/Private/JavaScript/Components/Headline/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import Headline from './index.js'; | ||
|
|
||
| storiesOf('Headline', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <Headline type="h1">Heading 1</Headline> | ||
| <Headline type="h2">Heading 2</Headline> | ||
| <Headline type="h3">Heading 3</Headline> | ||
| <Headline type="h4">Heading 4</Headline> | ||
| <Headline type="h5">Heading 5</Headline> | ||
| <Headline type="h6">Heading 6</Headline> | ||
| </div> | ||
| )); |
24 changes: 24 additions & 0 deletions
24
Resources/Private/JavaScript/Components/Icon/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import Icon from './index.js'; | ||
|
|
||
| storiesOf('Icon', module) | ||
| .add('size', () => ( | ||
| <div> | ||
| <div><Icon icon="search" size="big" /></div> | ||
| <div><Icon icon="search" size="small" /></div> | ||
| <div><Icon icon="search" size="tiny" /></div> | ||
| </div> | ||
| )) | ||
| .add('padded', () => ( | ||
| <div> | ||
| <div><Icon icon="search" padded="none" /></div> | ||
| <div><Icon icon="search" padded="left" /></div> | ||
| <div><Icon icon="search" padded="right" /></div> | ||
| </div> | ||
| )) | ||
| .add('spin', () => ( | ||
| <div> | ||
| <Icon icon="search" spin={true} /> | ||
| </div> | ||
| )); |
10 changes: 10 additions & 0 deletions
10
Resources/Private/JavaScript/Components/IconButton/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react'; | ||
| import {storiesOf, action} from '@kadira/storybook'; | ||
| import IconButton from './index.js'; | ||
|
|
||
| storiesOf('IconButton', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <IconButton icon="search" onClick={action('onClick')} style="lighter" /> | ||
| </div> | ||
| )); |
20 changes: 20 additions & 0 deletions
20
Resources/Private/JavaScript/Components/IconButtonDropDown/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import React from 'react'; | ||
| import {storiesOf, action} from '@kadira/storybook'; | ||
| import IconButtonDropDown from './index.js'; | ||
| import Icon from './../Icon/index.js'; | ||
|
|
||
| storiesOf('IconButtonDropDown', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <IconButtonDropDown | ||
| icon="plus" | ||
| modeIcon="long-arrow-right" | ||
| onClick={action('onClick')} | ||
| onItemSelect={action('onItemSelect')} | ||
| > | ||
| <Icon dropDownId="prepend" icon="long-arrow-up" /> | ||
| <Icon dropDownId="insert" icon="long-arrow-right" /> | ||
| <Icon dropDownId="append" icon="long-arrow-down" /> | ||
| </IconButtonDropDown> | ||
| </div> | ||
| )); |
10 changes: 10 additions & 0 deletions
10
Resources/Private/JavaScript/Components/Label/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import Label from './index.js'; | ||
|
|
||
| storiesOf('Label', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <Label htmlFor="test">Test label</Label> | ||
| </div> | ||
| )); |
8 changes: 8 additions & 0 deletions
8
Resources/Private/JavaScript/Components/Portal/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import Portal from './index.js'; | ||
|
|
||
| storiesOf('Portal', module) | ||
| .add('default', () => ( | ||
| <Portal isOpened={true}><div>Test portal</div></Portal> | ||
| )); |
11 changes: 11 additions & 0 deletions
11
Resources/Private/JavaScript/Components/SideBar/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import SideBar from './index.js'; | ||
|
|
||
| storiesOf('SideBar', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <SideBar position="left">Left sidebar</SideBar> | ||
| <SideBar position="right">Right sidebar</SideBar> | ||
| </div> | ||
| )); |
13 changes: 13 additions & 0 deletions
13
Resources/Private/JavaScript/Components/Tabs/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import Tabs from './index.js'; | ||
|
|
||
| storiesOf('Tabs', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <Tabs> | ||
| <Tabs.Panel title="Tab 1" icon="search">Tab 1 contents</Tabs.Panel> | ||
| <Tabs.Panel title="Tab 2" icon="search">Tab 2 contents</Tabs.Panel> | ||
| </Tabs> | ||
| </div> | ||
| )); |
23 changes: 23 additions & 0 deletions
23
Resources/Private/JavaScript/Components/TextInput/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
| import {storiesOf, action} from '@kadira/storybook'; | ||
| import TextInput from './index.js'; | ||
|
|
||
| storiesOf('TextInput', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <TextInput | ||
| isValid={true} | ||
| placeholder="Valid input" | ||
| onChange={action('onChange')} | ||
| onFocus={action('onFocus')} | ||
| onBlur={action('onBlur')} | ||
| /> | ||
| <TextInput | ||
| isValid={false} | ||
| placeholder="Invalid input" | ||
| onChange={action('onChange')} | ||
| onFocus={action('onFocus')} | ||
| onBlur={action('onBlur')} | ||
| /> | ||
| </div> | ||
| )); |
10 changes: 10 additions & 0 deletions
10
Resources/Private/JavaScript/Components/ToggablePanel/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| import React from 'react'; | ||
| import {storiesOf} from '@kadira/storybook'; | ||
| import ToggablePanel from './index.js'; | ||
|
|
||
| storiesOf('ToggablePanel', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| <ToggablePanel isOpened={true}>Panel contents</ToggablePanel> | ||
| </div> | ||
| )); |
78 changes: 78 additions & 0 deletions
78
Resources/Private/JavaScript/Components/Tree/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import React from 'react'; | ||
| import {storiesOf, action} from '@kadira/storybook'; | ||
| import Tree from './index.js'; | ||
|
|
||
| storiesOf('Tree', module) | ||
| .add('default', () => ( | ||
| <div> | ||
| adfasdfa | ||
| <Tree> | ||
| <Tree.Node> | ||
| <Tree.Node.Header | ||
| item={{ | ||
| hasChildren: true, | ||
| isCollapsed: false, | ||
| isActive: true, | ||
| isFocused: true, | ||
| isLoading: false, | ||
| hasError: false, | ||
| label: 'Active focused node with children' | ||
| }} | ||
| onNodeToggle={action('onNodeToggle')} | ||
| onNodeClick={action('onNodeClick')} | ||
| onNodeFocus={action('onNodeFocus')} | ||
| /> | ||
| <Tree.Node.Contents> | ||
| <Tree.Node> | ||
| <Tree.Node.Header | ||
| item={{ | ||
| hasChildren: false, | ||
| isCollapsed: true, | ||
| isActive: false, | ||
| isFocused: false, | ||
| isLoading: false, | ||
| hasError: false, | ||
| label: 'Normal node' | ||
| }} | ||
| onNodeToggle={action('onNodeToggle')} | ||
| onNodeClick={action('onNodeClick')} | ||
| onNodeFocus={action('onNodeFocus')} | ||
| /> | ||
| </Tree.Node> | ||
| <Tree.Node> | ||
| <Tree.Node.Header | ||
| item={{ | ||
| hasChildren: false, | ||
| isCollapsed: true, | ||
| isActive: true, | ||
| isFocused: false, | ||
| isLoading: false, | ||
| hasError: false, | ||
| label: 'Active node' | ||
| }} | ||
| onNodeToggle={action('onNodeToggle')} | ||
| onNodeClick={action('onNodeClick')} | ||
| onNodeFocus={action('onNodeFocus')} | ||
| /> | ||
| </Tree.Node> | ||
| <Tree.Node> | ||
| <Tree.Node.Header | ||
| item={{ | ||
| hasChildren: false, | ||
| isCollapsed: true, | ||
| isActive: false, | ||
| isFocused: true, | ||
| isLoading: false, | ||
| hasError: false, | ||
| label: 'Focused node' | ||
| }} | ||
| onNodeToggle={action('onNodeToggle')} | ||
| onNodeClick={action('onNodeClick')} | ||
| onNodeFocus={action('onNodeFocus')} | ||
| /> | ||
| </Tree.Node> | ||
| </Tree.Node.Contents> | ||
| </Tree.Node> | ||
| </Tree> | ||
| </div> | ||
| )); |