added props to checkbox story

SAP · Jan 28, 2020 · d3ee4f7 · d3ee4f7
1 parent 96229f1
commit d3ee4f7
Showing 1 changed file with 23 additions and 14 deletions.
diff --git a/src/stories/checkbox/fd-checkbox.stories.ts b/src/stories/checkbox/fd-checkbox.stories.ts
@@ -1,5 +1,5 @@
 import { moduleMetadata } from '@storybook/angular';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { ReactiveFormsModule } from '@angular/forms';
 
@@ -19,25 +19,34 @@ export default {
     ]
 };
 
+const state = {
+    valid: 'valid',
+    invalid: 'invalid',
+    info: 'info',
+    warning: 'warning',
+}
 
 export const Checkbox = () => ({
     template:
         `
-        <fd-checkbox [(ngModel)]="checkboxValue1" label="No state"></fd-checkbox>
-        <fd-checkbox [(ngModel)]="checkboxValue2" state="information" label="Info state"></fd-checkbox>
-        <fd-checkbox [(ngModel)]="checkboxValue3" state="valid" label="Valid state"></fd-checkbox>
-        <fd-checkbox [(ngModel)]="checkboxValue4" state="warning" label="Warning state"></fd-checkbox>
-        <fd-checkbox [(ngModel)]="checkboxValue5" state="invalid" label="Invalid state"></fd-checkbox>
-        <fd-checkbox [(ngModel)]="checkboxValue6" state="information" [compact]="true" label="Compact"></fd-checkbox>
-        <fd-checkbox [(ngModel)]="checkboxValue7" state="information" [disabled]="true" label="Disabled"></fd-checkbox>
+        <fd-checkbox [(ngModel)]="checkboxValue1" 
+            [state]="state"
+            [label]="label"
+            [name]="name"
+            [disabled]="disabled"
+            [compact]="compact"
+            [tristate]="tristate"
+            [tristateSelectable]="tristateSelectable">
+        </fd-checkbox>
   `,
     props: {
         checkboxValue1: boolean('checkbox 1', false),
-        checkboxValue2: boolean('checkbox 2', false),
-        checkboxValue3: boolean('checkbox 3', false),
-        checkboxValue4: boolean('checkbox 4', false),
-        checkboxValue5: boolean('checkbox 5', false),
-        checkboxValue6: boolean('checkbox 6', false),
-        checkboxValue7: boolean('checkbox 7', false),
+        state: select('state', state, 'info'),
+        label: text('label', 'Checkbox'),
+        name: text('name', 'Checkbox'),
+        disabled: boolean('disabled', false),
+        compact: boolean('compact', false),
+        tristate: boolean('tristate', false),
+        tristateSelectable: boolean('tristateSelectable', false),
     }
 });