`,
+ })} />
```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx b/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
index 04357f1f4557..806ebd115407 100644
--- a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
+++ b/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
@@ -1,24 +1,26 @@
```ts
// MyComponent.stories.ts
-import {Β Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'img',
component: MyComponent,
} as Meta;
// Assume image.png is located in the "public" directory.
-export const WithAnImage: Story = () => ({
- props: {
- src: '/image.png',
- alt: 'my image',
- },
-});
+export const WithAnImage: Story = {
+ render: () => ({
+ props: {
+ src: '/image.png',
+ alt: 'my image',
+ },
+ }),
+};
```
\ No newline at end of file
diff --git a/docs/snippets/angular/component-story-with-accessibility.mdx.mdx b/docs/snippets/angular/component-story-with-accessibility.mdx.mdx
index d267cb707f36..e3871e8be688 100644
--- a/docs/snippets/angular/component-story-with-accessibility.mdx.mdx
+++ b/docs/snippets/angular/component-story-with-accessibility.mdx.mdx
@@ -16,28 +16,27 @@ import { Button } from './Button.component';
}
}} />
-export const Template = (args) => ({ props: args });
-
## This is an accessible story
-Example
+
+
+
-
- ${caption}
`, }; - }} -${caption}
`, - }; +export const StoryWithLocale = { + render: (args, { globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return { + template: `${caption}
`, + }; + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx b/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx index 51b639ed1292..57f0fbcff8bf 100644 --- a/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx +++ b/docs/snippets/angular/my-component-story-with-nonstory.ts.mdx @@ -1,7 +1,7 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, Story } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; @@ -9,29 +9,27 @@ import someData from './data.json'; export default { /* π The title prop is optional. - * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'MyComponent', + * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'MyComponent', component: MyComponent, includeStories: ['SimpleStory', 'ComplexStory'], // π Storybook loads these stories excludeStories: /.*Data$/, // π Storybook ignores anything that contains Data } as Meta; -const Template: Story = (args) => ({ - props: args, -}); - export const simpleData = { foo: 1, bar: 'baz' }; export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } }; -export const SimpleStory = Template.bind({}); -SimpleStory.args = { - data: simpleData, +export const SimpleStory: Story = { + args: { + data: simpleData, + }, }; -export const ComplexStory = Template.bind({}); -ComplexStory.args = { - data: complexData, +export const ComplexStory: Story = { + args: { + data: complexData, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-with-env-variables.mdx.mdx b/docs/snippets/angular/my-component-with-env-variables.mdx.mdx index 1ece7ecd9a8d..a7875e1350aa 100644 --- a/docs/snippets/angular/my-component-with-env-variables.mdx.mdx +++ b/docs/snippets/angular/my-component-with-env-variables.mdx.mdx @@ -7,14 +7,14 @@ import { MyComponent } from './my-component.component'; -export const Template = (args) => ({ props: args }); - ``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-with-env-variables.ts.mdx b/docs/snippets/angular/my-component-with-env-variables.ts.mdx index 46a610aeab4f..176b55f18b1a 100644 --- a/docs/snippets/angular/my-component-with-env-variables.ts.mdx +++ b/docs/snippets/angular/my-component-with-env-variables.ts.mdx @@ -1,25 +1,22 @@ ```ts // MyComponent.stories.ts -import { Meta, Story } from '@storybook/angular'; +import type { Meta, Story } from '@storybook/angular'; import { MyComponent } from './MyComponent.component'; export default { /* π The title prop is optional. - * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'MyComponent', component: MyComponent, } as Meta; -const Template: Story = (args) => ({ - props: args, -}); - -export const ExampleStory = Template.bind({}); -ExampleStory.args = { - propertyA: process.env.STORYBOOK_DATA_KEY +export const ExampleStory: Story = { + args: { + propertyA: process.env.STORYBOOK_DATA_KEY, + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/angular/page-story-slots.mdx.mdx b/docs/snippets/angular/page-story-slots.mdx.mdx index 333bc3bec80f..9989753de595 100644 --- a/docs/snippets/angular/page-story-slots.mdx.mdx +++ b/docs/snippets/angular/page-story-slots.mdx.mdx @@ -7,20 +7,17 @@ import { Page } from './page.component'; -export const Template = (args) => ({ - props: args, - template:` -| - {{data[i][j]}} - | -
| + {{data[i][j]}} + | +
| - {{data[i][j]}} - | -
| + {{data[i][j]}} + | +
${story}
`)],
diff --git a/docs/snippets/angular/your-component.mdx.mdx b/docs/snippets/angular/your-component.mdx.mdx
index 8c2bd62e6f2a..4362e2f6a862 100644
--- a/docs/snippets/angular/your-component.mdx.mdx
+++ b/docs/snippets/angular/your-component.mdx.mdx
@@ -8,13 +8,13 @@ import { YourComponent } from './your.component';
-
-export const Template = (args) => ({ props: args });
++
Example
+
- {Story()}
-
- ),
- ],
+ decorators: [(Story) => {Story()}
],
} as ComponentMeta
-
- ),
-];
+export const Primary = {
+ decorators: [
+ (Story) => (
+
+
+ ),
+ ],
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.mdx.mdx b/docs/snippets/react/button-story-decorator.mdx.mdx
index 22cfbe8d6822..14ece3207cd1 100644
--- a/docs/snippets/react/button-story-decorator.mdx.mdx
+++ b/docs/snippets/react/button-story-decorator.mdx.mdx
@@ -7,8 +7,6 @@ import { Button } from './Button';
-export const Template = (args) => ;
-
{Story()}
];
+export const Primary: ComponentStoryObj{Story()}
],
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.story-function.js.mdx b/docs/snippets/react/button-story-decorator.story-function.js.mdx
index 396fbd6aec25..bbe57aa3b37a 100644
--- a/docs/snippets/react/button-story-decorator.story-function.js.mdx
+++ b/docs/snippets/react/button-story-decorator.story-function.js.mdx
@@ -5,15 +5,14 @@ import React from 'react';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
-const Template = (args) => ;
-
-export const Primary = Template.bind({});
-Primary.decorators = [(Story) => {Story()}
];
+export const Primary = {
+ decorators: [(Story) => {Story()}
],
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-decorator.ts.mdx b/docs/snippets/react/button-story-decorator.ts.mdx
index 48ed75e585e6..868ec5fabecb 100644
--- a/docs/snippets/react/button-story-decorator.ts.mdx
+++ b/docs/snippets/react/button-story-decorator.ts.mdx
@@ -3,25 +3,24 @@
import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
component: Button,
} as ComponentMeta
-
- ),
-];
+export const Primary: ComponentStoryObj
+
+ ),
+ ],
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-default-docs-code.js.mdx b/docs/snippets/react/button-story-default-docs-code.js.mdx
deleted file mode 100644
index b31ce637273a..000000000000
--- a/docs/snippets/react/button-story-default-docs-code.js.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```js
-// Button.stories.js|jsx
-
-import React from 'react';
-
-import { Button } from './Button';
-
-export default {
- /* π The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
- title: 'Button',
- component: Button,
- //π Creates specific argTypes
- argTypes: {
- backgroundColor: { control: 'color' },
- },
-};
-
-//π Some function to demonstrate the behavior
-const someFunction = (someValue) => {
- return `i am a ${someValue}`;
-};
-
-export const ExampleStory = (args) => {
- //π Destructure the label from the args object
- const { label } = args;
-
- //π Assigns the function result to a variable and pass it as a prop into the component
- const functionResult = someFunction(label);
- return ;
-};
-ExampleStory.args = {
- primary: true,
- size: 'small',
- label: 'button',
-};
-```
\ No newline at end of file
diff --git a/docs/snippets/react/button-story-default-docs-code.mdx.mdx b/docs/snippets/react/button-story-default-docs-code.mdx.mdx
deleted file mode 100644
index c5900e20d2ae..000000000000
--- a/docs/snippets/react/button-story-default-docs-code.mdx.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
-```md
-
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import { Button } from './Button';
-
-
-
-
-
-export const someFunction = (someValue) => {
- return `i am a ${someValue}`;
-};
-
-
-
-
;
+export const WithAnImage = {
+ render: () => ,
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
index 4f47a7c9718d..94806a2821c2 100644
--- a/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
+++ b/docs/snippets/react/component-story-static-asset-without-import.ts.mdx
@@ -5,13 +5,13 @@ import React from 'react';
import imageFile from './static/image.png';
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'img',
} as Meta;
@@ -20,5 +20,7 @@ const image = {
alt: 'my image',
};
// Assume image.png is located in the "public" directory.
-export const WithAnImage = () => ;
+export const WithAnImage = {
+ render: () => ,
+};
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-with-accessibility.js.mdx b/docs/snippets/react/component-story-with-accessibility.js.mdx
index 6f46af0ede4f..469d4e7d41b2 100644
--- a/docs/snippets/react/component-story-with-accessibility.js.mdx
+++ b/docs/snippets/react/component-story-with-accessibility.js.mdx
@@ -7,8 +7,8 @@ import { Button } from './Button';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading to learn how to generate automatic titles
+ */
title: 'Accessibility testing',
component: Button,
argTypes: {
@@ -16,19 +16,19 @@ export default {
},
};
-const Template = (args) => ;
-
// This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
- primary: false,
- label: 'Button',
+export const Accessible = {
+ args: {
+ primary: false,
+ label: 'Button',
+ },
};
// This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
- ...Accessible.args,
- backgroundColor: 'red',
+export const Inaccessible = {
+ args: {
+ ...Accessible.args,
+ backgroundColor: 'red',
+ },
};
```
\ No newline at end of file
diff --git a/docs/snippets/react/component-story-with-accessibility.mdx.mdx b/docs/snippets/react/component-story-with-accessibility.mdx.mdx
index 280fe7353e17..54edba8df817 100644
--- a/docs/snippets/react/component-story-with-accessibility.mdx.mdx
+++ b/docs/snippets/react/component-story-with-accessibility.mdx.mdx
@@ -15,8 +15,12 @@ import { Button } from './Button';
}
}
}} />
-
-export const Template = (args) => ;
+
+
## This is an accessible story
@@ -25,9 +29,9 @@ export const Template = (args) => ;
args={{
primary: false,
label: 'Button'
- }}>
- {Template.bind({})}
-Example
+Example
+-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
-
-
+
-
- {items.map((item) => (
-
-
+ {items.map((item) => (
+
-
- {items.map((item) => (
-
-
+ {items.map((item) => (
+
-
-
-
+
-
-
-
+
{caption}
; }; ``` \ No newline at end of file diff --git a/docs/snippets/react/my-component-story-use-globaltype.js.mdx b/docs/snippets/react/my-component-story-use-globaltype.js.mdx index 03f49fbe2eb5..db294a0081a4 100644 --- a/docs/snippets/react/my-component-story-use-globaltype.js.mdx +++ b/docs/snippets/react/my-component-story-use-globaltype.js.mdx @@ -7,9 +7,9 @@ import { MyComponent } from './MyComponent'; export default { /* π The title prop is optional. - * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ + * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'MyComponent', component: MyComponent, }; @@ -29,8 +29,15 @@ const getCaptionForLocale = (locale) => { } }; -export const StoryWithLocale = (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return <>{caption}; +/* + *π Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/react/api/csf + * to learn how to use render functions. + */ +export const StoryWithLocale = { + render: (args, { globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return{caption}
; + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx index 55c5ca4ab813..07553b06e43b 100644 --- a/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx +++ b/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx @@ -18,10 +18,16 @@ export const getCaptionForLocale = (locale) => { } }; -
- {Story()}
-
- ),
-];
+export const decorators = [(Story) => {Story()}
];
```
\ No newline at end of file
diff --git a/docs/snippets/react/table-story-fully-customize-controls.js.mdx b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
index 0778b994fd6f..8e1163eecaa2 100644
--- a/docs/snippets/react/table-story-fully-customize-controls.js.mdx
+++ b/docs/snippets/react/table-story-fully-customize-controls.js.mdx
@@ -9,30 +9,38 @@ import { TR } from './TableRow';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Custom Table',
component: Table,
};
-const TableStory = ({ data, ...args}) => (
- | {item} | - ))} -
| {item} | + ))} +
| {item} | }
| {item} | + ))} +
{Story()}
],
diff --git a/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx b/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
index 9ba55b1da62c..1c47e59bc50b 100644
--- a/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
+++ b/docs/snippets/react/your-component-with-decorator.story-function-ts.ts.mdx
@@ -1,6 +1,8 @@
```ts
// YourComponent.stories.ts|tsx
+import React from 'react';
+
import { ComponentMeta } from '@storybook/react';
import { YourComponent } from './YourComponent';
@@ -9,17 +11,11 @@ import { YourComponent } from './YourComponent';
// Useful to prevent the full remount of the component's story.
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'YourComponent',
component: YourComponent,
- decorators: [
- (Story) => (
-
- {Story()}
-
- ),
- ],
+ decorators: [(Story) => {Story()}
],
} as ComponentMeta
-
),
],
diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx
index 5b3121d657ac..2e06e8e384f2 100644
--- a/docs/snippets/react/your-component.js.mdx
+++ b/docs/snippets/react/your-component.js.mdx
@@ -6,16 +6,13 @@ import { YourComponent } from './YourComponent';
//π This default export determines where your story goes in the story list
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/eact/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'YourComponent',
component: YourComponent,
};
-//π We create a βtemplateβ of how args map to rendering
-const Template = (args) => 
',
-});
+export const WithAnImage = {
+ render: () => ({
+ template: '',
+ }),
+};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx b/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
index d793002a15c6..f4875eccfdec 100644
--- a/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
+++ b/docs/snippets/vue/component-story-static-asset-without-import.mdx.mdx
@@ -5,16 +5,10 @@ import { Meta, Story } from '@storybook/addon-docs';
-
+
`,
- };
- }}
-',
+ })} />
```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
index 1559c5bf5238..0e0876e15954 100644
--- a/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.2.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Accessibility testing',
component: Button,
argTypes: {
@@ -15,23 +15,29 @@ export default {
},
};
-const Template = (args, { argTypes }) => ({
- components: { Button },
- props: Object.keys(argTypes),
- template: '',
-});
-
// This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
- primary: false,
- label: 'Button',
+export const Accessible = {
+ render: (args, { argTypes }) => ({
+ components: { Button },
+ props: Object.keys(argTypes),
+ template: '',
+ }),
+ args: {
+ primary: false,
+ label: 'Button',
+ },
};
// This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
- ...Accessible.args,
- backgroundColor: 'red',
+export const Inaccessible = {
+ render: (args, { argTypes }) => ({
+ components: { Button },
+ props: Object.keys(argTypes),
+ template: '',
+ }),
+ args: {
+ ...Accessible.args,
+ backgroundColor: 'red',
+ },
};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
index 82f3717d0cf9..f006abce95b7 100644
--- a/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.3.js.mdx
@@ -5,9 +5,9 @@ import Button from './Button.vue';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Accessibility testing',
component: Button,
argTypes: {
@@ -24,16 +24,32 @@ const Template = (args) => ({
});
// This is an accessible story
-export const Accessible = Template.bind({});
-Accessible.args = {
- primary: false,
- label: 'Button',
+export const Accessible = {
+ render: (args) => ({
+ components: { Button },
+ setup() {
+ return { args };
+ },
+ template: '',
+ }),
+ args: {
+ primary: false,
+ label: 'Button',
+ },
};
// This is not
-export const Inaccessible = Template.bind({});
-Inaccessible.args = {
- ...Accessible.args,
- backgroundColor: 'red',
+export const Inaccessible = {
+ render: (args) => ({
+ components: { Button },
+ setup() {
+ return { args };
+ },
+ template: '',
+ }),
+ args: {
+ ...Accessible.args,
+ backgroundColor: 'red',
+ },
};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx b/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
index 8d2b797e331b..a236ad94897b 100644
--- a/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
+++ b/docs/snippets/vue/component-story-with-accessibility.mdx-2.mdx.mdx
@@ -16,11 +16,11 @@ import Button from './Button.vue';
}
}} />
-export const Template = (args, { argTypes }) => ({
- components: { Button },
- props: Object.keys(argTypes),
- template: '',
-});
+
## This is an accessible story
@@ -29,9 +29,12 @@ export const Template = (args, { argTypes }) => ({
args={{
primary: false,
label: 'Button'
- }}>
- {Template.bind({})}
-Example
+Example
+-
+
-
-
-
+
- ',
+ }),
+};
-export const OneItem = (args) => ({
- components: { List, ListItem },
- setup() {
- return { args };
- },
- template: '
-
+
-
-
-
+
-
+
-
-
-
+
- ',
+ }),
+};
-export const OneItem: StoryFn
-
+
-
-
-
+
-
-
-
+
-
+
-
-
-
-
-
+
-
+
-
-
- ',
+ }),
+};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
index ff6266df96ac..3da1ee182503 100644
--- a/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
+++ b/docs/snippets/vue/list-story-starter.ts-2.ts.mdx
@@ -3,11 +3,11 @@
import List from './ListComponent.vue';
-import { Meta, StoryFn } from '@storybook/vue';
+import type { Meta, Story } from '@storybook/vue';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+ * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
@@ -15,9 +15,11 @@ export default {
} as Meta
- ',
+ }),
+};
```
\ No newline at end of file
diff --git a/docs/snippets/vue/list-story-template.2.js.mdx b/docs/snippets/vue/list-story-template.2.js.mdx
index 6cbc57b20b4a..f2ceb52f1e71 100644
--- a/docs/snippets/vue/list-story-template.2.js.mdx
+++ b/docs/snippets/vue/list-story-template.2.js.mdx
@@ -9,13 +9,14 @@ import { Unchecked } from './ListItem.stories';
export default {
/* π The title prop is optional.
- * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
- * to learn how to generate automatic titles
- */
+ * See https://storybook.js.org/docs/7.0/vue/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'List',
component: List,
};
+//π The ListTemplate construct will be spread to the existing stories.
const ListTemplate = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { List, ListItem },
@@ -25,20 +26,24 @@ const ListTemplate = (args, { argTypes }) => ({
-
-
-
- -
+
+
+ -
-
-
-
${caption}
`, - }; +/* + *π Render functions are a framework specific feature to allow you control on how the component renders. + * See https://storybook.js.org/docs/7.0/vue/api/csf + * to learn how to use render functions. + */ +export const StoryWithLocale = { + render: (args, { globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return { + template: `${caption}
`, + }; + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx index 6f6f74945f65..8397ad8f2c2b 100644 --- a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx +++ b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx @@ -18,12 +18,18 @@ export const getCaptionForLocale = (locale) => { } }; -${caption}
`, }; - }} -| - {{ data[idx1][idx2] }} - | -
| + {{ data[idx1][idx2] }} + | +
| - {{ data[idx1][idx2] }} - | -
| + {{ data[idx1][idx2] }} + | +
| - {{ data[idx1][idx2] }} - | -
| + {{ data[idx1][idx2] }} + | +
| - {{ data[idx1][idx2] }} - | -
| + {{ data[idx1][idx2] }} + | +
${story()}
`],
};
-export const Primary = () => html`${story()}
`]
+export const Primary = {
+ render: (args) => Button(args),
+ decorators: [(story) => html`${story()}
`],
+};
```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
index 9c5daceab5fd..d0319e8ce8a3 100644
--- a/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
+++ b/docs/snippets/web-components/button-story-default-export-with-component.js.mdx
@@ -1,9 +1,13 @@
```js
// demo-button.stories.js
-import './demo-button';
+import { Button } from './demo-button';
export default {
+ /* π The title prop is optional.
+ * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
};
-```
+```
\ No newline at end of file
diff --git a/docs/snippets/web-components/button-story-rename-story.js.mdx b/docs/snippets/web-components/button-story-rename-story.js.mdx
index bf448006efa3..02576065c63b 100644
--- a/docs/snippets/web-components/button-story-rename-story.js.mdx
+++ b/docs/snippets/web-components/button-story-rename-story.js.mdx
@@ -1,15 +1,23 @@
```js
// demo-button.stories.js
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
export default {
+ /* π The title prop is optional.
+ * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+ * to learn how to generate automatic titles
+ */
title: 'Button',
};
-export const Primary = () => html`Example
+-
- ${Unchecked({ ...Unchecked.args })}
-
-
+ ${Unchecked({ ...Unchecked.args })}
+
${caption}
`; +export const StoryWithLocale = { + render: ({ globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return html`${caption}
`; + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx index 63873a57924b..27f0e890bb9c 100644 --- a/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx +++ b/docs/snippets/web-components/my-component-story-use-globaltype.js.mdx @@ -18,8 +18,10 @@ const getCaptionForLocale = (locale) => { } }; -export const StoryWithLocale = ({ propA, propB }, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return html`${caption}
`; +export const StoryWithLocale = { + render: (args, { globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return html`${caption}
`; + }, }; ``` \ No newline at end of file diff --git a/docs/snippets/web-components/my-component-with-env-variables.js.mdx b/docs/snippets/web-components/my-component-with-env-variables.js.mdx index 5fd5ff24bcb6..b19ba2898945 100644 --- a/docs/snippets/web-components/my-component-with-env-variables.js.mdx +++ b/docs/snippets/web-components/my-component-with-env-variables.js.mdx @@ -1,19 +1,25 @@ ```js // my-component.stories.js -import { html } from 'lit-html'; - -import './my-component'; +import { MyComponent } from './my-component'; export default { + /* π The title prop is optional. + * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ title: 'MyComponent', }; -const Template = ({ propertyA }) => html`
-
-π‘ `Template.bind({})` is a [standard JavaScript technique](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) for making a copy of a function. We copy the `Template` so each exported story can set its own properties on it.
-
-
By introducing args into your component's stories, you're not only reducing the amount of code you need to write, but you're also decreasing data duplication, as shown by spreading the `Primary` story's args into the other stories.
@@ -261,7 +252,6 @@ For instance, suppose you wanted to test your Button component against a differe
'angular/button-story-with-blue-args.ts.mdx',
'angular/button-story-with-blue-args.mdx.mdx',
'svelte/button-story-with-blue-args.js.mdx',
- 'svelte/button-story-with-blue-args.native-format.mdx',
'svelte/button-story-with-blue-args.mdx.mdx',
'web-components/button-story-with-blue-args.js.mdx',
'html/button-story-with-blue-args.js.mdx',
@@ -295,7 +285,6 @@ A simple example is adding padding to a componentβs stories. Accomplish this u
'angular/button-story-component-decorator.ts.mdx',
'angular/button-story-component-decorator.mdx.mdx',
'svelte/button-story-component-decorator.js.mdx',
- 'svelte/button-story-component-decorator.native-format.mdx',
'svelte/button-story-component-decorator.mdx.mdx',
'web-components/button-story-component-decorator.js.mdx',
'html/button-story-component-decorator.js.mdx',
@@ -322,7 +311,6 @@ When building design systems or component libraries, you may have two or more co
'vue/list-story-starter.ts-2.ts.mdx',
'vue/list-story-starter.3.js.mdx',
'vue/list-story-starter.ts-3.ts.mdx',
- 'svelte/list-story-starter.native-format.mdx',
'web-components/list-story-starter.js.mdx',
'html/list-story-starter.js.mdx',
'html/list-story-starter.ts.mdx',
@@ -344,7 +332,6 @@ In such cases, it makes sense to render a different function for each story:
'vue/list-story-expanded.ts-2.ts.mdx',
'vue/list-story-expanded.3.js.mdx',
'vue/list-story-expanded.ts-3.ts.mdx',
- 'svelte/list-story-expanded.native-format.mdx',
'web-components/list-story-expanded.js.mdx',
'html/list-story-expanded.js.mdx',
'html/list-story-expanded.ts.mdx',
diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index f7093ef0289c..7758681099dd 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -38,7 +38,6 @@ We can set the parameters for all stories of a component using the `parameters`
'angular/button-story-with-blue-args.ts.mdx',
'angular/button-story-with-blue-args.mdx.mdx',
'svelte/button-story-with-blue-args.js.mdx',
- 'svelte/button-story-with-blue-args.native-format.mdx',
'svelte/button-story-with-blue-args.mdx.mdx',
'web-components/button-story-with-blue-args.js.mdx',
]}
diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md
index 0923ee57a2c3..b95c7514ff0f 100644
--- a/docs/writing-stories/play-function.md
+++ b/docs/writing-stories/play-function.md
@@ -55,6 +55,12 @@ Storybook's `play` functions are small code snippets that run once the story fin
+
+
+π‘ See the [Interaction testing documentation](../writing-tests/interaction-testing.md#api-for-user-events) for an overview of the available API events.
+
+
+
When Storybook finishes rendering the story, it executes the steps defined within the `play` function, interacting with the component and filling the form's information. All of this without the need for user intervention. If you check your `Interactions` panel, you'll see the step-by-step flow.
## Composing stories