diff options
Diffstat (limited to 'stories/angular/checkbox.stories.ts')
-rw-r--r-- | stories/angular/checkbox.stories.ts | 50 |
1 files changed, 50 insertions, 0 deletions
diff --git a/stories/angular/checkbox.stories.ts b/stories/angular/checkbox.stories.ts new file mode 100644 index 0000000..c02e2e2 --- /dev/null +++ b/stories/angular/checkbox.stories.ts @@ -0,0 +1,50 @@ +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 } from '../../src/angular/components'; +import { RippleClickAnimationDirective } from '../../src/angular/animations/ripple-click.animation.directive'; + +storiesOf('Form elements|Checkbox', module) + .addDecorator(withKnobs) + .addDecorator(withNotes) + .addDecorator( + moduleMetadata({ + declarations: [ + CheckboxComponent, + RippleClickAnimationDirective + ], + imports: [ + ] + }) + ) + .add('Simple checkbox', () => { + const _label = text('label', 'Simple checkbox'); + const _checked = boolean('checked', false); + const _disabled = boolean('disabled', false); + const _testId = text('testId', 'smalpe-test-id'); + const _checkedChange = text('*(checkedChange)', 'Event throws when checked changed, see in Action logger tab.'); + + return { + props: { + checkedChange: action('Checkbox value changed '), + _label, _checked, _disabled, _testId + }, + template: ` + <sdc-checkbox + [label]="_label" + [checked]="_checked" + [disabled]="_disabled" + [testId]="_testId" + (checkedChange)="checkedChange($event)" + > + </sdc-checkbox> + ` + } + }, + { notes: `<h2>Checkbox</h2> + Full example of checkbox. + Use the KNOBS tab to change values.` + } +) |