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 | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js new file mode 100644 index 0000000000..276b05e270 --- /dev/null +++ b/openecomp-ui/src/nfvo-components/listEditor/listEditor.stories.js @@ -0,0 +1,60 @@ +import React from 'react'; +import {storiesOf, action} from '@kadira/storybook'; +import ListEditorView from './ListEditorView.jsx'; +import ListEditorItemView from './ListEditorItemView.jsx'; +import ListEditorItemViewField from './ListEditorItemViewField.jsx'; +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}> + <ListEditorItemViewField> + <div>{text('field 1', 'Lorum Ipsum')}</div> + </ListEditorItemViewField> + <ListEditorItemViewField> + <div>{text('field 2', 'Lorum Ipsum')}</div> + </ListEditorItemViewField> + </ListEditorItemView>) + ) + ); +} + +const stories = storiesOf('ListEditor', module); +stories.addDecorator(withKnobs); + +stories + .add('regular', () => ( + <ListEditorView title='List Editor'> + {makeChildren()} + </ListEditorView> + )) + .add('two columns', () => ( + <ListEditorView title='List Editor' twoColumns> + {makeChildren()} + </ListEditorView> + )) + .add('with add', () => ( + <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> + )) + .add('with edit', () => ( + <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> + )); |