♻️ migrate stories to use anglebracket syntax for components

storybookjs · Apr 9, 2021 · 358c3cd · 358c3cd
1 parent 757be6b
commit 358c3cd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 24 deletions.
diff --git a/lib/cli/src/frameworks/ember/stories/Button.stories.js b/lib/cli/src/frameworks/ember/stories/Button.stories.js
@@ -1,6 +1,4 @@
 import { hbs } from 'ember-cli-htmlbars';
-// You don't need the css import in your own components
-import './button.css';
 
 export default {
   title: 'Example/Button',
@@ -16,12 +14,14 @@ export default {
 };
 
 const Template = (args) => ({
-  template: hbs`{{storybook-button
-    backgroundColor=backgroundColor
-    label=label
-    primary=primary
-    onClick=(action onClick)
-  }}`,
+  template: hbs`
+    <StorybookButton
+      @backgroundColor={{this.backgroundColor}}
+      @label={{this.label}}
+      @primary={{this.primary}}
+      @onClick={{this.onClick}}
+    />
+  `,
   context: args,
 });
 

diff --git a/lib/cli/src/frameworks/ember/stories/Header.stories.js b/lib/cli/src/frameworks/ember/stories/Header.stories.js
@@ -1,6 +1,4 @@
 import { hbs } from 'ember-cli-htmlbars';
-// You don't need the css import in your own components
-import './header.css';
 
 export default {
   title: 'Example/Header',
@@ -12,12 +10,14 @@ export default {
 };
 
 const Template = (args) => ({
-  template: hbs`{{storybook-header
-    user=user
-    onLogin=(action onLogin)
-    onLogout=(action onLogout)
-    onCreateAccount=(action onCreateAccount)
-  }}`,
+  template: hbs`
+    <StorybookHeader
+      @user={{this.user}}
+      @onLogin={{this.onLogin}}
+      @onLogout={{this.onLogout}}
+      @onCreateAccount={{this.onCreateAccount}}
+    />
+  `,
   context: args,
 });
 

diff --git a/lib/cli/src/frameworks/ember/stories/Page.stories.js b/lib/cli/src/frameworks/ember/stories/Page.stories.js
@@ -1,7 +1,5 @@
 import { hbs } from 'ember-cli-htmlbars';
 import * as HeaderStories from './Header.stories';
-// You don't need the css import in your own components
-import './page.css';
 
 export default {
   title: 'Example/Page',
@@ -13,12 +11,14 @@ export default {
 };
 
 const Template = (args) => ({
-  template: hbs`{{storybook-page
-    user=user
-    onLogin=(action onLogin)
-    onLogout=(action onLogout)
-    onCreateAccount=(action onCreateAccount)
-  }}`,
+  template: hbs`
+    <StorybookPage
+      @user={{this.user}}
+      @onLogin={{this.onLogin}}
+      @onLogout={{this.onLogout}}
+      @onCreateAccount={{this.onCreateAccount}}
+    />
+  `,
   context: args,
 });