Migrate JS templates to CSF3

storybookjs · Oct 29, 2022 · 4081900 · 4081900
1 parent 90ce675
commit 4081900
Show file tree

Hide file tree

Showing 22 changed files with 376 additions and 337 deletions.
diff --git a/code/frameworks/ember/template/cli/1-Button.stories.js b/code/frameworks/ember/template/cli/1-Button.stories.js
@@ -5,53 +5,57 @@ import { linkTo } from '@storybook/addon-links';
 // More on default export: https://storybook.js.org/docs/ember/writing-stories/introduction#default-export
 export default {
   title: 'Button',
+  render: (args) => ({
+    template: hbs`<button {{action onClick}}>{{label}}</button>`,
+    context: args,
+  }),
   // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes
   argTypes: {
     label: { control: 'text' },
   },
 };
 
 // More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args
-const Template = (args) => ({
-  template: hbs`<button {{action onClick}}>{{label}}</button>`,
-  context: args,
-});
-
-export const Text = Template.bind({});
-// More on args: https://storybook.js.org/docs/ember/writing-stories/args
-Text.args = {
-  label: 'Button',
-  onClick: action('onClick'),
+export const Text = {
+  args: {
+    label: 'Button',
+    onClick: action('onClick'),
+  },
 };
 
-export const Emoji = Template.bind({});
-Emoji.args = {
-  label: '😀 😎 👍 💯',
+export const Emoji = {
+  args: {
+    label: '😀 😎 👍 💯',
+  },
 };
 
-export const TextWithAction = () => ({
-  template: hbs`
+export const TextWithAction = {
+  render: () => ({
+    template: hbs`
     <button {{action onClick}}>
       Trigger Action
     </button>
   `,
-  context: {
-    onClick: () => action('This was clicked')(),
+    context: {
+      onClick: () => action('This was clicked')(),
+    },
+  }),
+  name: 'With an action',
+  parameters: {
+    notes: 'My notes on a button with emojis',
   },
-});
-
-TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+};
 
-export const ButtonWithLinkToAnotherStory = () => ({
-  template: hbs`
+export const ButtonWithLinkToAnotherStory = {
+  render: () => ({
+    template: hbs`
     <button {{action onClick}}>
       Go to Welcome Story
     </button>
   `,
-  context: {
-    onClick: linkTo('example-introduction--page'),
-  },
-});
-
-ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
+    context: {
+      onClick: linkTo('example-introduction--page'),
+    },
+  }),
+  name: 'button with link to another story',
+};
diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js
@@ -3,6 +3,12 @@ import { createButton } from './Button';
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+  render: ({ label, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return createButton({ label, ...args });
+  },
   // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -16,33 +22,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template = ({ label, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return createButton({ label, ...args });
-};
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/html/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/html/template/cli/js/Header.stories.js b/code/renderers/html/template/cli/js/Header.stories.js
@@ -2,6 +2,7 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
@@ -14,14 +15,12 @@ export default {
   },
 };
 
-const Template = (args) => createHeader(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/html/template/cli/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js
@@ -3,21 +3,22 @@ import { createPage } from './Page';
 
 export default {
   title: 'Example/Page',
+  render: () => createPage(),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = () => createPage();
-
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx
@@ -12,28 +12,29 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/preact/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/preact/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/preact/template/cli/Header.stories.jsx b/code/renderers/preact/template/cli/Header.stories.jsx
@@ -14,14 +14,12 @@ export default {
   },
 };
 
-const Template = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/preact/template/cli/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx
@@ -11,14 +11,15 @@ export default {
   },
 };
 
-const Template = (args) => <Page {...args} />;
-
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/preact/writing-tests/interaction-testing
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };
diff --git a/code/renderers/react/template/cli/js/Button.stories.jsx b/code/renderers/react/template/cli/js/Button.stories.jsx
@@ -13,28 +13,29 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/react/template/cli/js/Header.stories.jsx b/code/renderers/react/template/cli/js/Header.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Header } from './Header';
 
 export default {
@@ -11,14 +10,12 @@ export default {
   },
 };
 
-const Template = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};