From 377c5becb09f7bbf1a59cb6234b1df8a0a9b07b8 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Sat, 28 Aug 2021 01:52:57 +0100 Subject: [PATCH 001/163] Initial commit for snippets for 6.4 --- .../angular/app-story-with-mock.ts.mdx | 37 +++++----- .../angular/button-group-story.ts.mdx | 21 ++---- .../button-story-click-handler-args.ts.mdx | 22 ++++++ .../angular/button-story-click-handler.ts.mdx | 20 ++++++ ...button-story-component-args-primary.ts.mdx | 5 +- .../button-story-component-decorator.ts.mdx | 20 ++---- .../angular/button-story-decorator.ts.mdx | 35 ++++------ .../button-story-default-docs-code.ts.mdx | 47 +++++++------ ...story-default-export-with-component.ts.mdx | 7 +- .../angular/button-story-rename-story.ts.mdx | 18 ++--- .../angular/button-story-using-args.ts.mdx | 34 ++++++---- .../button-story-with-addon-example.ts.mdx | 11 +-- .../angular/button-story-with-args.ts.mdx | 21 ++---- .../button-story-with-blue-args.ts.mdx | 6 +- .../angular/button-story-with-emojis.ts.mdx | 47 +++++++------ docs/snippets/angular/button-story.ts.mdx | 18 ++--- .../angular/checkbox-story-csf.ts.mdx | 14 ++-- ...component-story-custom-args-complex.ts.mdx | 43 ++++++------ .../component-story-static-asset-cdn.ts.mdx | 17 +++-- ...nent-story-static-asset-with-import.ts.mdx | 21 +++--- ...t-story-static-asset-without-import.ts.mdx | 19 ++++-- ...umentscreen-story-msw-graphql-query.ts.mdx | 53 +++++++-------- ...cumentscreen-story-msw-rest-request.ts.mdx | 39 +++++------ .../angular/list-story-expanded.ts.mdx | 56 ++++++++------- .../angular/list-story-reuse-data.ts.mdx | 44 ++++++++---- .../angular/list-story-starter.ts.mdx | 18 ++--- .../angular/list-story-template.ts.mdx | 55 +++++++++------ .../angular/list-story-unchecked.ts.mdx | 40 +++++++---- .../list-story-with-subcomponents.ts.mdx | 34 ++++++---- docs/snippets/angular/loader-story.ts.mdx | 32 +++------ .../my-component-story-basic-and-props.ts.mdx | 19 ++++++ ...component-story-configure-viewports.ts.mdx | 28 ++++---- ...ory-use-globaltype-backwards-compat.ts.mdx | 14 ++-- .../my-component-story-use-globaltype.ts.mdx | 20 ++++-- .../my-component-story-with-nonstory.ts.mdx | 32 +++++++++ .../my-component-with-env-variables.ts.mdx | 18 ++--- docs/snippets/angular/page-story-slots.ts.mdx | 27 ++++---- .../page-story-with-args-composition.ts.mdx | 26 +++---- docs/snippets/angular/page-story.ts.mdx | 20 +++--- ...able-story-fully-customize-controls.ts.mdx | 52 +++++++------- .../your-component-with-decorator.ts.mdx | 9 +-- docs/snippets/angular/your-component.ts.mdx | 19 ++---- .../common/args-usage-with-addons.js.mdx | 4 +- .../common/badge-story-custom-argtypes.js.mdx | 27 +++----- .../button-group-story-subcomponents.js.mdx | 3 +- .../button-story-action-event-handle.js.mdx | 5 +- ...tton-story-argtypes-with-categories.js.mdx | 29 ++++---- ...n-story-argtypes-with-subcategories.js.mdx | 29 ++++---- ...tton-story-controls-primary-variant.js.mdx | 15 ++-- .../button-story-controls-radio-group.js.mdx | 7 +- ...on-story-disable-docspage-component.js.mdx | 11 ++- .../common/button-story-docs-code-type.js.mdx | 11 +-- ...tory-docspage-with-custom-component.js.mdx | 11 ++- .../button-story-docspage-with-mdx.js.mdx | 23 +++++-- ...utton-story-hide-nocontrols-warning.js.mdx | 14 ++-- .../common/button-story-hoisted.js.mdx | 5 +- .../button-story-hypothetical-example.js.mdx | 17 ++--- .../button-story-matching-argtypes.js.mdx | 5 +- ...button-story-onclick-action-argtype.js.mdx | 5 +- .../button-story-primary-composition.js.mdx | 32 +++++---- .../button-story-primary-long-name.js.mdx | 18 +++-- .../common/button-story-remix-docspage.js.mdx | 3 +- .../snippets/common/checkbox-story-csf.js.mdx | 16 ++--- ...t-story-csf-argstable-customization.js.mdx | 11 +-- .../component-story-csf-description.js.mdx | 17 +++-- ...component-story-custom-args-mapping.js.mdx | 7 +- .../component-story-custom-params.js.mdx | 33 +++++---- .../component-story-custom-source.js.mdx | 18 +++-- ...omponent-story-disable-controls-alt.js.mdx | 15 ++-- ...ponent-story-disable-controls-regex.js.mdx | 36 +++++++--- .../component-story-disable-controls.js.mdx | 19 +++--- .../component-story-sort-controls.js.mdx | 5 +- docs/snippets/common/custom-docs-page.mdx.mdx | 29 +++++++- docs/snippets/common/foo-bar-baz-story.js.mdx | 4 +- .../gizmo-story-controls-customization.js.mdx | 7 +- .../my-component-story-with-storyname.js.mdx | 15 ++-- .../snippets/common/my-component-story.js.mdx | 6 +- .../common/other-foo-bar-story.js.mdx | 4 +- ...n-backgrounds-configure-backgrounds.js.mdx | 6 +- ...ok-addon-backgrounds-configure-grid.js.mdx | 6 +- ...don-backgrounds-disable-backgrounds.js.mdx | 15 ++-- ...book-addon-backgrounds-disable-grid.js.mdx | 23 ++++--- ...ckgrounds-override-background-color.js.mdx | 15 ++-- .../storybook-component-layout-param.js.mdx | 9 ++- .../storybook-story-layout-param.js.mdx | 11 +-- .../snippets/react/app-story-with-mock.js.mdx | 38 +++++------ docs/snippets/react/button-group-story.js.mdx | 15 ++-- .../button-story-click-handler-args.js.mdx | 19 ++++-- ...ton-story-click-handler-simple-docs.js.mdx | 16 ++++- ...n-story-click-handler-simplificated.js.mdx | 8 ++- .../react/button-story-click-handler.js.mdx | 8 ++- ...button-story-component-args-primary.js.mdx | 3 +- .../button-story-component-decorator.js.mdx | 3 +- .../react/button-story-decorator.js.mdx | 19 +++++- ...tton-story-decorator.story-function.js.mdx | 13 +++- .../button-story-default-docs-code.js.mdx | 37 +++++----- ...story-default-export-with-component.js.mdx | 7 +- .../react/button-story-rename-story.js.mdx | 10 ++- .../react/button-story-using-args.js.mdx | 34 +++++++--- .../button-story-with-addon-example.js.mdx | 8 ++- .../react/button-story-with-args.js.mdx | 19 ++---- .../react/button-story-with-blue-args.js.mdx | 3 +- .../react/button-story-with-emojis.js.mdx | 21 ++++-- .../react/button-story-with-sample.js.mdx | 7 +- docs/snippets/react/button-story.js.mdx | 9 +-- docs/snippets/react/checkbox-story-csf.js.mdx | 19 +++--- ...component-story-custom-args-complex.js.mdx | 30 ++++---- .../component-story-static-asset-cdn.js.mdx | 8 +-- ...nent-story-static-asset-with-import.js.mdx | 6 +- ...t-story-static-asset-without-import.js.mdx | 8 +-- .../react/document-screen-with-graphql.js.mdx | 4 ++ ...umentscreen-story-msw-graphql-query.js.mdx | 63 +++++++++-------- ...cumentscreen-story-msw-rest-request.js.mdx | 37 +++++----- .../snippets/react/list-story-expanded.js.mdx | 35 ++++++---- .../react/list-story-reuse-data.js.mdx | 21 +++--- docs/snippets/react/list-story-starter.js.mdx | 7 +- .../snippets/react/list-story-template.js.mdx | 41 +++++++---- .../list-story-with-subcomponents.js.mdx | 17 ++--- docs/snippets/react/loader-story.js.mdx | 19 +++--- .../react/mock-context-container.js.mdx | 10 +-- .../my-component-story-basic-and-props.js.mdx | 10 +-- ...component-story-configure-viewports.js.mdx | 18 +++-- ...ory-use-globaltype-backwards-compat.js.mdx | 10 +-- .../my-component-story-use-globaltype.js.mdx | 32 ++++++--- .../my-component-story-with-nonstory.js.mdx | 12 ++-- .../my-component-with-env-variables.js.mdx | 13 ++-- docs/snippets/react/page-story-slots.js.mdx | 19 +++--- .../page-story-with-args-composition.js.mdx | 24 +++---- docs/snippets/react/page-story.js.mdx | 12 ++-- .../react/simple-page-implementation.js.mdx | 4 +- ...able-story-fully-customize-controls.js.mdx | 44 ++++++++---- .../your-component-with-decorator.js.mdx | 8 ++- ...nt-with-decorator.story-function-js.js.mdx | 14 ++-- docs/snippets/react/your-component.js.mdx | 16 ++--- .../snippets/svelte/button-group-story.js.mdx | 27 ++++---- .../svelte/button-story-click-handler.js.mdx | 24 +++---- ...button-story-component-args-primary.js.mdx | 3 +- .../button-story-component-decorator.js.mdx | 13 ++-- .../svelte/button-story-decorator.js.mdx | 15 +++- .../button-story-default-docs-code.js.mdx | 40 +++++------ ...story-default-export-with-component.js.mdx | 7 +- .../svelte/button-story-rename-story.js.mdx | 22 +++--- .../svelte/button-story-using-args.js.mdx | 49 +++++++++---- .../button-story-with-addon-example.js.mdx | 12 ++-- .../svelte/button-story-with-args.js.mdx | 21 +++--- .../svelte/button-story-with-blue-args.js.mdx | 17 +++-- .../svelte/button-story-with-emojis.js.mdx | 53 ++++++++------- docs/snippets/svelte/button-story.js.mdx | 19 +++--- ...component-story-custom-args-complex.js.mdx | 32 +++++---- .../component-story-static-asset-cdn.js.mdx | 20 +++--- ...nent-story-static-asset-with-import.js.mdx | 17 +++-- ...t-story-static-asset-without-import.js.mdx | 19 +++--- ...umentscreen-story-msw-graphql-query.js.mdx | 61 +++++++++-------- ...cumentscreen-story-msw-rest-request.js.mdx | 46 +++++++------ docs/snippets/svelte/loader-story.js.mdx | 25 ++++--- .../my-component-story-basic-and-props.js.mdx | 25 ++++--- ...component-story-configure-viewports.js.mdx | 23 +++---- ...ory-use-globaltype-backwards-compat.js.mdx | 20 +++--- .../my-component-story-use-globaltype.js.mdx | 26 ++++--- .../my-component-story-with-nonstory.js.mdx | 31 +++++---- .../my-component-with-env-variables.js.mdx | 20 +++--- .../page-story-with-args-composition.js.mdx | 25 ++++--- docs/snippets/svelte/page-story.js.mdx | 17 +++-- docs/snippets/svelte/your-component.js.mdx | 17 +++-- .../snippets/vue/app-story-with-mock.2.js.mdx | 50 +++++++------- .../snippets/vue/app-story-with-mock.3.js.mdx | 54 +++++++-------- docs/snippets/vue/button-group-story.2.js.mdx | 25 ++++--- docs/snippets/vue/button-group-story.3.js.mdx | 27 ++++---- .../button-story-click-handler-args.2.js.mdx | 28 +++++--- .../button-story-click-handler-args.3.js.mdx | 34 ++++++---- ...n-story-click-handler-simple-docs.2.js.mdx | 20 ++++-- ...n-story-click-handler-simple-docs.3.js.mdx | 30 +++++--- .../vue/button-story-click-handler.2.js.mdx | 23 ++++--- .../vue/button-story-click-handler.3.js.mdx | 27 ++++---- ...button-story-component-args-primary.js.mdx | 3 +- .../button-story-component-decorator.js.mdx | 3 +- .../vue/button-story-decorator.js.mdx | 15 ++-- .../button-story-default-docs-code.3.js.mdx | 50 +++++++------- ...story-default-export-with-component.js.mdx | 5 +- .../vue/button-story-rename-story.js.mdx | 13 ++-- .../vue/button-story-using-args.2.js.mdx | 52 +++++++++----- .../vue/button-story-using-args.3.js.mdx | 56 ++++++++++----- .../button-story-with-addon-example.js.mdx | 12 ++-- .../vue/button-story-with-args.2.js.mdx | 29 ++++---- .../vue/button-story-with-args.3.js.mdx | 28 ++++---- .../vue/button-story-with-blue-args.js.mdx | 3 +- .../vue/button-story-with-emojis.js.mdx | 35 ++++++---- docs/snippets/vue/button-story.js.mdx | 13 ++-- docs/snippets/vue/checkbox-story-csf.js.mdx | 25 +++---- ...mponent-story-custom-args-complex.3.js.mdx | 36 +++++----- .../component-story-static-asset-cdn.js.mdx | 10 +-- ...nt-story-static-asset-with-import.2.js.mdx | 28 ++++---- ...nt-story-static-asset-with-import.3.js.mdx | 14 ++-- ...t-story-static-asset-without-import.js.mdx | 12 ++-- .../vue/document-screen-with-graphql.3.js.mdx | 5 ++ ...entscreen-story-msw-graphql-query.3.js.mdx | 68 +++++++++++-------- ...mentscreen-story-msw-rest-request.3.js.mdx | 53 ++++++++------- .../snippets/vue/list-story-expanded.2.js.mdx | 53 ++++++++------- .../snippets/vue/list-story-expanded.3.js.mdx | 65 ++++++++++-------- .../vue/list-story-reuse-data.2.js.mdx | 31 +++++---- .../vue/list-story-reuse-data.3.js.mdx | 33 ++++----- docs/snippets/vue/list-story-starter.2.js.mdx | 15 ++-- docs/snippets/vue/list-story-starter.3.js.mdx | 19 +++--- .../snippets/vue/list-story-template.2.js.mdx | 33 +++++---- .../snippets/vue/list-story-template.3.js.mdx | 54 +++++++++------ .../vue/list-story-unchecked.2.js.mdx | 22 +++--- .../vue/list-story-unchecked.3.js.mdx | 26 ++++--- .../list-story-with-sub-components.2.js.mdx | 27 ++++---- .../list-story-with-sub-components.3.js.mdx | 38 ++++++----- docs/snippets/vue/loader-story.3.js.mdx | 22 +++--- .../my-component-story-basic-and-props.js.mdx | 23 ++++--- ...component-story-configure-viewports.js.mdx | 21 +++--- ...ory-use-globaltype-backwards-compat.js.mdx | 14 ++-- .../my-component-story-use-globaltype.js.mdx | 19 ++++-- .../my-component-story-with-nonstory.js.mdx | 32 +++++++-- .../my-component-with-env-variables.2.js.mdx | 21 +++--- .../my-component-with-env-variables.3.js.mdx | 23 +++---- docs/snippets/vue/page-story-slots.2.js.mdx | 27 ++++---- docs/snippets/vue/page-story-slots.3.js.mdx | 31 +++++---- .../vue/page-story-slots.mdx-3.mdx.mdx | 12 +--- .../page-story-with-args-composition.2.js.mdx | 25 ++++--- .../page-story-with-args-composition.3.js.mdx | 27 ++++---- docs/snippets/vue/page-story.2.js.mdx | 22 +++--- docs/snippets/vue/page-story.3.js.mdx | 22 +++--- ...le-story-fully-customize-controls.2.js.mdx | 51 ++++++++------ ...le-story-fully-customize-controls.3.js.mdx | 53 ++++++++------- .../vue/your-component-with-decorator.js.mdx | 4 +- docs/snippets/vue/your-component.2.js.mdx | 25 +++---- docs/snippets/vue/your-component.3.js.mdx | 28 ++++---- 229 files changed, 2892 insertions(+), 2255 deletions(-) create mode 100644 docs/snippets/angular/button-story-click-handler-args.ts.mdx create mode 100644 docs/snippets/angular/button-story-click-handler.ts.mdx create mode 100644 docs/snippets/angular/my-component-story-basic-and-props.ts.mdx create mode 100644 docs/snippets/angular/my-component-story-with-nonstory.ts.mdx diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx index f08ccb4db776..27828cb24531 100644 --- a/docs/snippets/angular/app-story-with-mock.ts.mdx +++ b/docs/snippets/angular/app-story-with-mock.ts.mdx @@ -1,32 +1,27 @@ ```ts // App.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; import { AppComponent } from './app.component'; export default { component: AppComponent, - title: 'App', -} as Meta; - -const Template: Story = (args) => ({ - props: args, -}); +}; -export const Success = Template.bind({}); -Success.parameters = { - fetch: { - json: { - JavaScript: 3390991, - 'C++': 44974, - TypeScript: 15530, - CoffeeScript: 12253, - Python: 9383, - C: 5341, - Shell: 5115, - HTML: 3420, - CSS: 3171, - Makefile: 189, +export const Success = { + parameters: { + fetch: { + json: { + JavaScript: 3390991, + 'C++': 44974, + TypeScript: 15530, + CoffeeScript: 12253, + Python: 9383, + C: 5341, + Shell: 5115, + HTML: 3420, + CSS: 3171, + Makefile: 189, + }, }, }, }; diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx index ddebe9cc562c..3449a0a615c8 100644 --- a/docs/snippets/angular/button-group-story.ts.mdx +++ b/docs/snippets/angular/button-group-story.ts.mdx @@ -1,8 +1,6 @@ ```ts // ButtonGroup.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; - import { moduleMetadata } from '@storybook/angular'; import { CommonModule } from '@angular/common'; @@ -13,7 +11,6 @@ import Button from './button.component'; import * as ButtonStories from './Button.stories'; export default { - title: 'ButtonGroup', component: ButtonGroup, decorators: [ moduleMetadata({ @@ -21,18 +18,12 @@ export default { imports: [CommonModule], }), ], -} as Meta; - -const Template: Story = (args) => ({ - props: args, -}); +}; -export const Pair = Template.bind({}); -Pair.args = { - buttons: [ - { ...ButtonStories.Primary.args }, - { ...ButtonStories.Secondary.args }, - ], - orientation: 'horizontal', +export const Pair = { + args: { + buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], + orientation: 'horizontal', + }, }; ``` diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx new file mode 100644 index 000000000000..61dd6a987835 --- /dev/null +++ b/docs/snippets/angular/button-story-click-handler-args.ts.mdx @@ -0,0 +1,22 @@ +```ts +// Button.stories.ts + +import { action } from '@storybook/addon-actions'; + +import Button from './button.component'; + +export default { + component: Button, +}; + +export const Text = { + args: { + label: 'Hello', + onClick: action('clicked'), + }, + render: (args) => ({ + props: args, + template: ``, + }), +}; +``` diff --git a/docs/snippets/angular/button-story-click-handler.ts.mdx b/docs/snippets/angular/button-story-click-handler.ts.mdx new file mode 100644 index 000000000000..0f51a2fd5ade --- /dev/null +++ b/docs/snippets/angular/button-story-click-handler.ts.mdx @@ -0,0 +1,20 @@ +```ts +// Button.stories.ts + +import Button from './Button.component'; + +import { action } from '@storybook/addon-actions'; + +export default { + component: Button, +}; + +export const Text = { + render: () => ({ + props: { + label: 'Button', + onClick: action('clicked'), + }, + }), +}; +``` diff --git a/docs/snippets/angular/button-story-component-args-primary.ts.mdx b/docs/snippets/angular/button-story-component-args-primary.ts.mdx index 1f1cbe15cd60..16c5a79a73d1 100644 --- a/docs/snippets/angular/button-story-component-args-primary.ts.mdx +++ b/docs/snippets/angular/button-story-component-args-primary.ts.mdx @@ -1,12 +1,9 @@ ```ts // Button.stories.ts -import { Meta } from '@storybook/angular/types-6-0'; - import Button from './button.component'; export default { - title: 'Button', component: Button, //πŸ‘‡ Creates specific argTypes argTypes: { @@ -16,5 +13,5 @@ export default { //πŸ‘‡ Now all Button stories will be primary. primary: true, }, -} as Meta; +}; ``` diff --git a/docs/snippets/angular/button-story-component-decorator.ts.mdx b/docs/snippets/angular/button-story-component-decorator.ts.mdx index db9b5bb8d803..10505c7489a1 100644 --- a/docs/snippets/angular/button-story-component-decorator.ts.mdx +++ b/docs/snippets/angular/button-story-component-decorator.ts.mdx @@ -1,14 +1,13 @@ ```ts // Button.stories.ts -import { componentWrapperDecorator, Meta, moduleMetadata, Story } from '@storybook/angular'; +import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; -import { ButtonComponent } from './button.component'; -import { ParentComponent } from './parent.component'; +import Button from './button.component'; +import ParentComponent from './parent.component'; // ParentComponent contains ng-content export default { - title: 'Components/Button', - component: ButtonComponent, + component: Button, decorators: [ moduleMetadata({ declarations: [ParentComponent], @@ -18,14 +17,5 @@ export default { // With component which contains ng-content componentWrapperDecorator(ParentComponent), ], -} as Meta; - -const Template: Story = (args) => ({ - props: args, - template: '', -}); - -const Component: Story = (args) => ({ - props: args, -}); +}; ``` diff --git a/docs/snippets/angular/button-story-decorator.ts.mdx b/docs/snippets/angular/button-story-decorator.ts.mdx index 2ec5412685ae..3944127cf531 100644 --- a/docs/snippets/angular/button-story-decorator.ts.mdx +++ b/docs/snippets/angular/button-story-decorator.ts.mdx @@ -1,30 +1,25 @@ ```ts // button.stories.ts -import { Meta, Story, componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; +import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; -import { ButtonComponent } from './button.component'; -import { ParentComponent } from './parent.component'; // ParentComponent contains ng-content +import Button from './button.component'; +import ParentComponent from './parent.component'; // ParentComponent contains ng-content export default { - title: 'Components/Button', component: ButtonComponent, -} as Meta; +}; -export const Primary: Story = () => ({ - template: '', -}); -Primary.decorators = [ - componentWrapperDecorator((story) => `
${story}
`), -]; +export const Primary = { + decorators: [componentWrapperDecorator((story) => `
${story}
`)], +}; -export const InsideParent: Story = () => ({ - template: '', -}); -InsideParent.decorators = [ - moduleMetadata({ - declarations: [ParentComponent], - }), - componentWrapperDecorator(ParentComponent), -]; +export const InsideParent = { + decorators: [ + moduleMetadata({ + declarations: [ParentComponent], + }), + componentWrapperDecorator(ParentComponent), + ], +}; ``` diff --git a/docs/snippets/angular/button-story-default-docs-code.ts.mdx b/docs/snippets/angular/button-story-default-docs-code.ts.mdx index b8e9d235ecfc..4985143a04b3 100644 --- a/docs/snippets/angular/button-story-default-docs-code.ts.mdx +++ b/docs/snippets/angular/button-story-default-docs-code.ts.mdx @@ -1,40 +1,39 @@ ```ts // Button.stories.ts -import { Story, Meta } from '@storybook/angular/types-6-0'; - import Button from './button.component'; export default { - title: 'Button', component: Button, //πŸ‘‡ Creates specific argTypes argTypes: { - backgroundColor: { control: 'color' } - } -} as Meta; + backgroundColor: { control: 'color' }, + }, +}; //πŸ‘‡ Some function to demonstrate the behavior -const someFunction = (someValue: string) => { +const someFunction = (someValue: String) => { return `i am a ${someValue}`; }; -export const ExampleStory: Story; -``` \ No newline at end of file +export const Basic = { + render: () => , +}; +``` diff --git a/docs/snippets/react/button-story-with-args.js.mdx b/docs/snippets/react/button-story-with-args.js.mdx index 3d466dc47bdc..040eebef2f38 100644 --- a/docs/snippets/react/button-story-with-args.js.mdx +++ b/docs/snippets/react/button-story-with-args.js.mdx @@ -1,23 +1,16 @@ ```js // Button.stories.js | Button.stories.jsx -import React from 'react'; - import { Button } from './Button'; export default { component: Button, - title: 'Components/Button', }; -//πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template = (args) => ; -``` \ No newline at end of file +export const Primary = { + render: () => } /> + + + ``` diff --git a/docs/snippets/react/your-component.js.mdx b/docs/snippets/react/your-component.js.mdx index c131e3d8692d..d827ec2f9f5e 100644 --- a/docs/snippets/react/your-component.js.mdx +++ b/docs/snippets/react/your-component.js.mdx @@ -1,16 +1,24 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx +// YourComponent.stories.js|jsx 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/docsreact/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 FirstStory = { args: { //πŸ‘‡ The args you need here will depend on your component }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/react/your-component.mdx.mdx b/docs/snippets/react/your-component.mdx.mdx index ea70c09b68eb..432f8a5f1703 100644 --- a/docs/snippets/react/your-component.mdx.mdx +++ b/docs/snippets/react/your-component.mdx.mdx @@ -8,11 +8,13 @@ import { YourComponent } from './YourComponent'; - + +export const Template = (args) => ; } /> + args={{}}> + {Template.bind({})} + ``` \ No newline at end of file diff --git a/docs/snippets/react/your-component.ts.mdx b/docs/snippets/react/your-component.ts.mdx index a5dfee62eabd..c20a2599e261 100644 --- a/docs/snippets/react/your-component.ts.mdx +++ b/docs/snippets/react/your-component.ts.mdx @@ -1,22 +1,27 @@ ```ts -// YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.ts|tsx -import React, { ComponentProps } from 'react'; +import React from 'react'; -import { Story, Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; 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 + */ title: 'YourComponent', component: YourComponent, -} as Meta; +} as ComponentMeta; //πŸ‘‡ We create a β€œtemplate” of how args map to rendering -const Template: Story> = (args) => ; +const Template: ComponentStory = (args) => ; export const FirstStory = Template.bind({}); + FirstStory.args = { /*πŸ‘‡ The args you need here will depend on your component */ }; diff --git a/docs/snippets/svelte/button-story.mdx.mdx b/docs/snippets/svelte/button-story.mdx.mdx index cc6a7ecc6932..43d30f351676 100644 --- a/docs/snippets/svelte/button-story.mdx.mdx +++ b/docs/snippets/svelte/button-story.mdx.mdx @@ -7,17 +7,14 @@ import Button from './Button.svelte'; - - # Button - ({ - Component: Button, + + {{ props: { primary: true, label: 'Button', }, - })} /> + }} + ``` \ No newline at end of file diff --git a/docs/snippets/svelte/your-component.js.mdx b/docs/snippets/svelte/your-component.js.mdx index 97004213ae52..8c14bfa7a96d 100644 --- a/docs/snippets/svelte/your-component.js.mdx +++ b/docs/snippets/svelte/your-component.js.mdx @@ -5,16 +5,21 @@ import YourComponent from './YourComponent.svelte'; //πŸ‘‡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/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'YourComponent', component: YourComponent, }; -export const FirstStory = { - args: { - //πŸ‘‡ The args you need here will depend on your component - }, - render: (args) => ({ - Component: YourComponent, - props: args, - }), +//πŸ‘‡ We create a β€œtemplate” of how args map to rendering +const Template = (args) => ({ + props: args, +}); + +export const FirstStory = Template.bind({}); +FirstStory.args= { + //πŸ‘‡ The args you need here will depend on your component }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/svelte/your-component.mdx.mdx b/docs/snippets/svelte/your-component.mdx.mdx index 7bdd56e1eed0..a0d8259cefd1 100644 --- a/docs/snippets/svelte/your-component.mdx.mdx +++ b/docs/snippets/svelte/your-component.mdx.mdx @@ -9,15 +9,16 @@ import YourComponent from './YourComponent.svelte'; - + +export const Template = (args) => ({ + Component: YourComponent, + props: args, +}); - ({ - Component: YourComponent, - props: args, - })} /> + args={{}}> + {Template.bind({})} + ``` \ No newline at end of file diff --git a/docs/snippets/vue/button-story.mdx.mdx b/docs/snippets/vue/button-story.mdx.mdx index f3cc682ec6c7..3c19a95aabf1 100644 --- a/docs/snippets/vue/button-story.mdx.mdx +++ b/docs/snippets/vue/button-story.mdx.mdx @@ -7,14 +7,15 @@ import Button from './Button.vue'; - # Button - ({ - components: { Button }, - template: `