diff options
Diffstat (limited to 'stories/angular/filter-bar.stories.ts')
-rw-r--r-- | stories/angular/filter-bar.stories.ts | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/stories/angular/filter-bar.stories.ts b/stories/angular/filter-bar.stories.ts new file mode 100644 index 0000000..a48b02f --- /dev/null +++ b/stories/angular/filter-bar.stories.ts @@ -0,0 +1,51 @@ +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 { FilterBarComponent, InputComponent } from '../../src/angular/components'; +import { FormElementsModule } from '../../src/angular/form-elements/form-elements.module'; + +storiesOf('Form elements|Filterbar', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + FilterBarComponent + ], + imports: [ + FormElementsModule + ] + }) + ) + .add('Filterbar', () => { + const _label = text('label', 'Filterbar label'); + const _placeholder = text('placeholder', 'Filterbar placeholder'); + const _debounceTime = number('debounceTime', 200); + // const _testId = text('testId', 'smalpe-test-id'); + const _searchQuery = text('searchQuery', ''); + const _searchQueryOutput = text('*(searchQuery)', 'Event throws when search query changed'); + const _searchQueryChange = text('*(searchQueryChange)', 'Event throws when search query changed, see in Action logger tab.'); + + return { + props: { + onChange: action('Search query value changed '), + _label, _searchQuery, _placeholder, _debounceTime + }, + template: ` + <sdc-filter-bar + [placeholder]="_placeholder" + [label]="_label" + [debounceTime]="_debounceTime" + [(searchQuery)]="_searchQuery" + (searchQueryChange)="onChange($event)"> + </sdc-filter-bar> + ` + } + }, + { notes: `<h2>Filterbar</h2> + The filter bar component text is updated (after debounce time, default 200 miliseconds) while user write something. + Use the KNOBS tab to change values.` + } +) |