diff options
author | Israel Lavi <israel.lavi@intl.att.com> | 2018-05-21 17:42:00 +0300 |
---|---|---|
committer | Israel Lavi <il0695@att.com> | 2018-05-21 17:52:01 +0300 |
commit | 1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch) | |
tree | f30beeaf15a8358f6da78fdd74bcbda74bd334f8 /stories/react/Input.stories.js | |
parent | 4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff) |
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646
Issue-ID: SDC-1350
Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'stories/react/Input.stories.js')
-rw-r--r-- | stories/react/Input.stories.js | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/stories/react/Input.stories.js b/stories/react/Input.stories.js new file mode 100644 index 0000000..869bafa --- /dev/null +++ b/stories/react/Input.stories.js @@ -0,0 +1,51 @@ +import React from 'react'; +import { action } from '@storybook/addon-actions'; +import Examples from './utils/Examples.js'; + +import ReactInput from '../../src/react/Input.js'; + +import InputDefaultHtml from '../../components/input/input.html'; +import InputRequiredHtml from '../../components/input/input-required.html'; +import InputNumberHtml from '../../components/input/input-number.html'; +import InputViewOnlyHtml from '../../components/input/input-view-only.html'; +import InputDisabledHtml from '../../components/input/input-disabled.html'; +import InputPlaceholderHtml from '../../components/input/input-placeholder.html'; +import InputErrorHtml from '../../components/input/input-error.html'; + +let examples = { + 'Input Default': { + jsx: <ReactInput name='input1' value='Default' label='I am a label' onChange={ action('input-change')}/>, + html: InputDefaultHtml + }, + 'Input Required': { + jsx: <ReactInput name='input2' value='Default' label='I am a label' onChange={ action('input-change')} isRequired/>, + html: InputRequiredHtml + }, + 'Input Number': { + jsx: <ReactInput name='input3' value='3' label='I am a label' type="number" onChange={ action('input-change')}/>, + html: InputNumberHtml + }, + 'Input View Only': { + jsx: <ReactInput value='Read Only Text' label='I am a label' onChange={ action('input-change')} readOnly/>, + html: InputViewOnlyHtml + }, + 'Input Disabled': { + jsx: <ReactInput value='Default' label='I am a label' onChange={ action('input-change')} disabled/>, + html: InputDisabledHtml + }, + 'Input Placeholder': { + jsx: <ReactInput name='input5' placeholder='Write Here...' label='I am a label' onChange={ action('input-change')}/>, + html: InputPlaceholderHtml + }, + 'Input Error': { + jsx: <ReactInput value='Default' name='input6' label='I am a label' errorMessage='This is the error message' onChange={ action('input-change')}/>, + html: InputErrorHtml + } + +} + +const Inputs = () => ( + <Examples examples={examples} /> +); + +export default Inputs; |