ADD new story-level decorators to angular stories

storybookjs · Mar 3, 2019 · 79609ae · 79609ae · vercel · Mar 3, 2019
1 parent 4753e20
commit 79609ae
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 28 deletions.
diff --git a/examples/angular-cli/src/stories/custom-pipes.stories.ts b/examples/angular-cli/src/stories/custom-pipes.stories.ts
@@ -19,10 +19,15 @@ storiesOf('Custom|Pipes', module)
       field: 'foobar',
     },
   }))
-  .addDecorator(withKnobs)
-  .add('With Knobs', () => ({
-    component: NameComponent,
-    props: {
-      field: text('field', 'foobar'),
-    },
-  }));
+  .add(
+    'With Knobs',
+    () => ({
+      component: NameComponent,
+      props: {
+        field: text('field', 'foobar'),
+      },
+    }),
+    {
+      decorators: [withKnobs],
+    }
+  );
diff --git a/examples/angular-cli/src/stories/custom-providers.stories.ts b/examples/angular-cli/src/stories/custom-providers.stories.ts
@@ -19,14 +19,19 @@ storiesOf('Custom|Providers', module)
       name: 'Static name',
     },
   }))
-  .addDecorator(withKnobs)
-  .add('With knobs', () => {
-    const name = text('name', 'Dynamic knob');
+  .add(
+    'With knobs',
+    () => {
+      const name = text('name', 'Dynamic knob');
 
-    return {
-      component: ServiceComponent,
-      props: {
-        name,
-      },
-    };
-  });
+      return {
+        component: ServiceComponent,
+        props: {
+          name,
+        },
+      };
+    },
+    {
+      decorators: [withKnobs],
+    }
+  );
diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts
@@ -24,19 +24,24 @@ storiesOf('Custom|Style', module)
     `,
     ],
   }))
-  .addDecorator(withKnobs)
-  .add('With Knobs', () => ({
-    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
-    props: {
-      text: text('text', 'Button with custom styles'),
-      onClick: action('log'),
-    },
-    styles: [
-      `
+  .add(
+    'With Knobs',
+    () => ({
+      template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+      props: {
+        text: text('text', 'Button with custom styles'),
+        onClick: action('log'),
+      },
+      styles: [
+        `
       storybook-button-component {
         background-color: red;
         padding: 25px;
       }
     `,
-    ],
-  }));
+      ],
+    }),
+    {
+      decorators: [withKnobs],
+    }
+  );