aboutsummaryrefslogtreecommitdiffstats
path: root/stories/angular/input.stories.ts
diff options
context:
space:
mode:
authorIsrael Lavi <il0695@att.com>2018-08-07 10:54:17 +0300
committerIsrael Lavi <il0695@att.com>2018-08-07 11:06:44 +0300
commitb2a3acea0d0f66028c9ce5fad02d4ecc64abf70c (patch)
tree8d70110f34cb845965c42a5915e950bca967d2c3 /stories/angular/input.stories.ts
parent05b37297177e8a342668c15e5d6f738b51f7aedd (diff)
Initial commit.
Adding files needed for Linux Foundation. Change-Id: I9f2b4851a5ae01f83800c7f8bab8608a2221c730 Issue-ID: SDC-1608 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'stories/angular/input.stories.ts')
-rw-r--r--stories/angular/input.stories.ts120
1 files changed, 120 insertions, 0 deletions
diff --git a/stories/angular/input.stories.ts b/stories/angular/input.stories.ts
new file mode 100644
index 0000000..1c63427
--- /dev/null
+++ b/stories/angular/input.stories.ts
@@ -0,0 +1,120 @@
+import { storiesOf } from '@storybook/angular';
+import { withKnobs, text, number, boolean, array, select, color, date, button } from '@storybook/addon-knobs';
+import { withNotes } from '@storybook/addon-notes';
+import { action, configureActions } from '@storybook/addon-actions';
+import { moduleMetadata } from '@storybook/angular';
+import { CheckboxComponent, InputComponent } from '../../src/angular/components';
+import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive';
+import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module';
+
+storiesOf('Form elements|Input', module)
+ .addDecorator(withKnobs)
+ .addDecorator(withNotes)
+ .addDecorator(
+ moduleMetadata({
+ declarations: [
+ ],
+ imports: [
+ FormElementsModule
+ ]
+ })
+ )
+ .add('Simple', () => {
+ const _label = text('label', 'Please Enter value');
+ const _name = text('name', 'InputName');
+ const _testId = text('testId', 'sample-test-id');
+
+ return {
+ props: {
+ checkedChange: action('Checkbox value changed '),
+ _label, _name, _testId
+ },
+ template: `
+ <sdc-input
+ [label]="_label"
+ [name]="_name"
+ [testId]="_testId"
+ >
+ </sdc-input>
+ `
+ }
+ },
+ { notes: `<h2>Simple Input</h2>
+ Simple input example.
+ Use the KNOBS tab to change values.`
+ }
+)
+.add('With debounce', () => {
+ const _label = text('label', 'Please Enter value');
+ const _name = text('name', 'InputName');
+ const _testId = text('testId', 'sample-test-id');
+ const _debounceTime = number('debounceTime', 1000);
+ const _valueChange = text('*(valueChange)', 'Throws event when value changed.');
+
+ return {
+ props: {
+ onValueChanged: action('Input value changed '),
+ _label, _name, _testId, _debounceTime
+ },
+ template: `
+ <sdc-input
+ [label]="_label"
+ [name]="_name"
+ [testId]="_testId"
+ [debounceTime]="_debounceTime"
+ (valueChange)=onValueChanged($event);
+ >
+ </sdc-input>
+ `
+ }
+ },
+ { notes: `<h2>Input with debounce</h2>
+ Wait for 1000 miliseconds for value changed event .
+ Use the KNOBS tab to change values.`
+ }
+)
+.add('Full options', () => {
+ const _label = text('label', 'Please Enter value');
+ const _name = text('name', 'InputName');
+ const _placeHolder = text('placeHolder', 'Input placeHolder');
+ const _value = text('value', 'Some value');
+ const _type = select('type', ['text', 'number', 'email']);
+ const _disabled = boolean('disabled', false);
+ const _required = boolean('required', false);
+ const _testId = text('testId', 'sample-test-id');
+ const _debounceTime = number('debounceTime', 1000);
+ const _minLength = number('minLength', 4);
+ const _maxLength = number('maxLength', 10);
+ const _classNames = text('classNames', 'custom-input-class');
+ const _valueChange = text('*(valueChange)', 'Throws event when value changed.');
+
+ return {
+ props: {
+ onValueChanged: action('Input value changed '),
+ _label, _name, _value, _testId, _debounceTime, _type, _disabled, _placeHolder, _required, _maxLength, _minLength, _classNames
+ },
+ template: `
+ <sdc-input
+ [label]="_label"
+ [name]="_name"
+ [placeHolder]="_placeHolder"
+ [type]="_type"
+ [value]="_value"
+ [disabled]="_disabled"
+ [required]="_required"
+ [testId]="_testId"
+ [minLength]="_minLength"
+ [maxLength]="_maxLength"
+ [debounceTime]="_debounceTime"
+ [classNames]="_classNames"
+ (valueChange)=onValueChanged($event);
+ >
+ </sdc-input>
+ `
+ }
+ },
+ { notes: `<h2>Input with debounce</h2>
+ Wait for 1000 miliseconds for value changed event .
+ Use the KNOBS tab to change values.`
+ }
+)