diff --git a/code/frameworks/ember/template/cli/1-Button.stories.js b/code/frameworks/ember/template/cli/1-Button.stories.js index 5be754973287..9aff5c61cb45 100644 --- a/code/frameworks/ember/template/cli/1-Button.stories.js +++ b/code/frameworks/ember/template/cli/1-Button.stories.js @@ -5,6 +5,10 @@ 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``, + context: args, + }), // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes argTypes: { label: { control: 'text' }, @@ -12,46 +16,46 @@ export default { }; // More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args -const Template = (args) => ({ - template: hbs``, - 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` `, - 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` `, - 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 index 63d4f9147145..cdc3d1bfb20b 100644 --- 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 `
${label}
`; + 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 `
${label}
`; - 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 index 553f3f8760f2..8cc98e523abd 100644 --- 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 index 3305bde25d9e..047e0ac7ca5e 100644 --- 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 index 080a4bfc3d61..a26bd4ea2839 100644 --- 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) =>