diff options
Diffstat (limited to 'openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js')
| -rw-r--r-- | openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js | 77 |
1 files changed, 46 insertions, 31 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js index 81125c84ba..67258c956d 100644 --- a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js +++ b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js @@ -1,27 +1,25 @@ import React from 'react'; -import {storiesOf, action} from '@kadira/storybook'; +import { storiesOf, action } from '@kadira/storybook'; import ListEditorView from './ListEditorView.jsx'; import ListEditorItemView from './ListEditorItemView.jsx'; import ListEditorItemField from './ListEditorItemViewField.jsx'; -import {text, number} from '@kadira/storybook-addon-knobs'; -import {withKnobs} from '@kadira/storybook-addon-knobs'; +import { text, number } from '@kadira/storybook-addon-knobs'; +import { withKnobs } from '@kadira/storybook-addon-knobs'; -function makeChildren({onEdit = false, onDelete = false} = {}) { - return ( - [...Array(number('Items', 2)).keys()].map(index => ( - <ListEditorItemView - key={index} - onEdit={onEdit ? onEdit : undefined} - onDelete={onDelete ? onDelete : undefined}> - <ListEditorItemField> - <div>{text('field 1', 'Lorum Ipsum')}</div> - </ListEditorItemField> - <ListEditorItemField> - <div>{text('field 2', 'Lorum Ipsum')}</div> - </ListEditorItemField> - </ListEditorItemView>) - ) - ); +function makeChildren({ onEdit = false, onDelete = false } = {}) { + return [...Array(number('Items', 2)).keys()].map(index => ( + <ListEditorItemView + key={index} + onEdit={onEdit ? onEdit : undefined} + onDelete={onDelete ? onDelete : undefined}> + <ListEditorItemField> + <div>{text('field 1', 'Lorum Ipsum')}</div> + </ListEditorItemField> + <ListEditorItemField> + <div>{text('field 2', 'Lorum Ipsum')}</div> + </ListEditorItemField> + </ListEditorItemView> + )); } const stories = storiesOf('ListEditor', module); @@ -29,32 +27,49 @@ stories.addDecorator(withKnobs); stories .add('regular', () => ( - <ListEditorView title='List Editor'> - {makeChildren()} - </ListEditorView> + <ListEditorView title="List Editor">{makeChildren()}</ListEditorView> )) .add('two columns', () => ( - <ListEditorView title='List Editor' twoColumns> + <ListEditorView title="List Editor" twoColumns> {makeChildren()} </ListEditorView> )) .add('with add', () => ( - <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> - {makeChildren()} + <ListEditorView + title="List Editor" + onAdd={action('onAdd')} + plusButtonTitle="Add" + twoColumns> + {makeChildren()} </ListEditorView> )) .add('with delete', () => ( - <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> - {makeChildren({onDelete: action('onDelete')})} + <ListEditorView + title="List Editor" + onAdd={action('onAdd')} + plusButtonTitle="Add" + twoColumns> + {makeChildren({ onDelete: action('onDelete') })} </ListEditorView> )) .add('with edit', () => ( - <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> - {makeChildren({onEdit: action('onEdit')})} + <ListEditorView + title="List Editor" + onAdd={action('onAdd')} + plusButtonTitle="Add" + twoColumns> + {makeChildren({ onEdit: action('onEdit') })} </ListEditorView> )) .add('with edit and delete', () => ( - <ListEditorView title='List Editor' onAdd={action('onAdd')} plusButtonTitle='Add' twoColumns> - {makeChildren({onDelete: action('onDelete'), onEdit: action('onEdit')})} + <ListEditorView + title="List Editor" + onAdd={action('onAdd')} + plusButtonTitle="Add" + twoColumns> + {makeChildren({ + onDelete: action('onDelete'), + onEdit: action('onEdit') + })} </ListEditorView> )); |