diff --git a/docs/essentials/actions.md b/docs/essentials/actions.md index 5282fa4d8c5..d78d1b7f54a 100644 --- a/docs/essentials/actions.md +++ b/docs/essentials/actions.md @@ -36,7 +36,19 @@ When Storybook sees this argType, it will create an arg set to a special β€œacti ### Automatically matching args -Another option is to use a parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)). +Another option is to use a global parameter to match all [argTypes](../api/argtypes.md) that match a certain pattern. The following configuration automatically creates actions for each `on` argType (which you can either specify manually or can be [inferred automatically](../api/argtypes.md#automatic-argtype-inference)). + + + + + + + +If you need more granular control over which `argTypes` are matched, you can adjust your stories and include the `argTypes` parameter. For example: diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index dff032bce14..17ccc30ef02 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -247,15 +247,15 @@ And here's what the resulting UI looks like: For `color` controls, you can specify an array of `presetColors`, either on the `control` in `argTypes`, or as a parameter under the `controls` namespace: -```js -// .storybook/preview.js + -export const parameters = { - controls: { - presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'], - }, -}; -``` + + + Color presets can be defined as an object with `color` and `title` or a simple CSS color string. These will then be available as swatches in the color picker. When you hover over the color swatch, you'll be able to see its title. If none is specified, it will default to the nearest CSS color name instead. diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index 4aba7bf1609..09b1e8cd856 100644 --- a/docs/essentials/viewport.md +++ b/docs/essentials/viewport.md @@ -118,6 +118,7 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { YourComponent } from './your-component.component'; - + export const someFunction = (valuePropertyA, valuePropertyB) => { - + // Makes some computations and returns something }; - +export const Template = (args) => { + const { propertyA, propertyB } = args; + // πŸ‘‡ Assigns the function result to a variable + const someFunctionResult = someFunction(propertyA, propertyB); + return { + props: { + ...args, + someProperty: someFunctionResult, + }, + }; +}; - { args={{ propertyA: 'Item One', propertyB: 'Another Item One', - }} - render={(args) => { - const { propertyA, propertyB } = args; - const someFunctionResult = someFunction(propertyA, propertyB); - return { - props: { - ...args, - someProperty: someFunctionResult, - }, - }; - }} /> - + }}> + {Template.bind({})} + + { // Makes some computations and returns something }; -export const ExampleStory = { - args: { propertyA: 'Something', propertyB: 'Something else' }, - render: (args) => { - const { propertyA, propertyB } = args; - //πŸ‘‡ Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - return { - props: { - ...args, - someProperty: someFunctionResult, - }, - }; - }, +const Template: Story (args) => { + const { propertyA, propertyB } = args; + + //πŸ‘‡ Assigns the function result to a variable + const someFunctionResult = someFunction(propertyA, propertyB); + + return { + props: { + ...args, + someProperty: someFunctionResult, + }, + }; +}; + +export const ExampleStory = Template.bind({}); +ExampleStory.args= { + propertyA: 'Item One', + propertyB: 'Another Item One', }; ``` diff --git a/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx index 790359e7ab5..34533bbca72 100644 --- a/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx +++ b/docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx @@ -9,7 +9,7 @@ import { MyComponent } from './MyComponent.component'; - - + {{ + template: '', }} - render={() => ({ - template: ``, - })} /> + ``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx index 8ed208f84bf..4a27b794f92 100644 --- a/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx +++ b/docs/snippets/angular/my-component-story-configure-viewports.ts.mdx @@ -1,11 +1,18 @@ ```ts // MyComponent.stories.ts +import { Meta, Story } from '@storybook/angular'; + import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; 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 + */ + title: 'MyComponent', component: MyComponent, parameters: { //πŸ‘‡ The viewports object from the Essentials addon @@ -17,13 +24,9 @@ export default { defaultViewport: 'iphone6', }, }, -}; +} as Meta; -export const MyStory = { - parameters: { - viewport: { - defaultViewport: 'iphonex', - }, - }, -}; -``` +export const MyStory: Story = () => ({ + template: '', +}); +``` \ No newline at end of file diff --git a/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx index 016c9408c68..4b75070929e 100644 --- a/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx +++ b/docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx @@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs'; import { MyComponent } from './MyComponent.component'; - + @@ -20,12 +20,12 @@ export const getCaptionForLocale = (locale) => { } }; - { + + {(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-use-globaltype.ts.mdx b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx index cec7e5febd0..1b9eff6574a 100644 --- a/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx +++ b/docs/snippets/angular/my-component-story-use-globaltype.ts.mdx @@ -1,11 +1,18 @@ ```ts // MyComponent.stories.ts +import { Meta } 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 + */ + title: 'MyComponent', component: MyComponent, -}; +} as Meta; const getCaptionForLocale = (locale) => { switch (locale) { @@ -22,12 +29,10 @@ const getCaptionForLocale = (locale) => { } }; -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - template: `

${caption}

`, - }; - }, +export const StoryWithLocale = (args, { globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return { + template: `

${caption}

`, + }; }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx b/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx index d67f096004d..af40d40f637 100644 --- a/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx +++ b/docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx @@ -7,7 +7,20 @@ import { Table } from './table.component'; - +export const TableStory = (args) => ({ + props: args, + template: ` + + + + + + +
+ {{data[i][j]}} +
+ `, +}); ({ - props: args, - template: ` - - - - - - -
- {{data[i][j]}} -
- `, - })} /> + }}> + {TableStory.bind({})} + ``` \ No newline at end of file diff --git a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx index 25c5a41af4c..e56b6f342b1 100644 --- a/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx +++ b/docs/snippets/angular/table-story-fully-customize-controls.ts.mdx @@ -1,35 +1,42 @@ ```ts // Table.stories.ts +import { Meta, Story} from '@storybook/angular', + import { Table } from './Table.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 + */ + title: 'Custom Table', component: Table, }; -export const TableStory = { - args: { - //πŸ‘‡ This arg is for the story component - data: [ - [1, 2, 3], - [4, 5, 6], - ], - //πŸ‘‡ The remaining args get passed to the `Table` component - size: 'large', - }, - render: (args) => ({ - props: args, - template: ` - - - - - - +const TableStory: Story = (args) => ({ + props: args, + template: ` +
- {{data[i][j]}} -
+ + + + +
+ {{data[i][j]}} +
- `, - }), + `, +}); + +export const Numeric = TableStory.bind({}); +Numeric.args = { + //πŸ‘‡ This arg is for the story component + data: [ + [1, 2, 3], + [4, 5, 6], + ], + //πŸ‘‡ The remaining args get passed to the `Table` component + size: 'large', }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-action-event-handle.js.mdx b/docs/snippets/common/button-story-action-event-handle.js.mdx index f86737fed6e..9a2740b2091 100644 --- a/docs/snippets/common/button-story-action-event-handle.js.mdx +++ b/docs/snippets/common/button-story-action-event-handle.js.mdx @@ -1,9 +1,14 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, parameters: { actions: { @@ -11,4 +16,4 @@ export default { }, }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-controls-primary-variant.js.mdx b/docs/snippets/common/button-story-controls-primary-variant.js.mdx index 203ae5cf9ca..89ae1a0d736 100644 --- a/docs/snippets/common/button-story-controls-primary-variant.js.mdx +++ b/docs/snippets/common/button-story-controls-primary-variant.js.mdx @@ -1,15 +1,29 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, }; +const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); + +export const Primary = Template.bind({}); +Primary.args = { + variant: 'primary', +}; + export const Primary = { args: { variant: 'primary', }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx index 3da9d33b297..bf07a883f85 100644 --- a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx +++ b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx @@ -5,15 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs'; import { Button } from './Button'; - - +export const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); + ({ })}> + }}> + {Template.bind({})} ``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-controls-radio-group.js.mdx b/docs/snippets/common/button-story-controls-radio-group.js.mdx index fd3c07e544d..5014b2b2c5e 100644 --- a/docs/snippets/common/button-story-controls-radio-group.js.mdx +++ b/docs/snippets/common/button-story-controls-radio-group.js.mdx @@ -1,9 +1,14 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, argTypes: { variant: { @@ -12,4 +17,4 @@ export default { }, }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx index e305a428237..80c6dc5b26a 100644 --- a/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx +++ b/docs/snippets/common/button-story-hide-nocontrols-warning.js.mdx @@ -1,15 +1,23 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, }; -export const Large = { - parameters: { - controls: { hideNoControlsWarning: true }, - }, +const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); + +export const Large = Template.bind({}); +Large.parameters = { + controls: { hideNoControlsWarning: true }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-matching-argtypes.js.mdx b/docs/snippets/common/button-story-matching-argtypes.js.mdx index 1d3efa91aa9..6ae1839bb65 100644 --- a/docs/snippets/common/button-story-matching-argtypes.js.mdx +++ b/docs/snippets/common/button-story-matching-argtypes.js.mdx @@ -1,10 +1,15 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, parameters: { actions: { argTypesRegex: '^on.*' } }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx index 862e11e46d3..20c27fc459b 100644 --- a/docs/snippets/common/button-story-onclick-action-argtype.js.mdx +++ b/docs/snippets/common/button-story-onclick-action-argtype.js.mdx @@ -1,10 +1,15 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, argTypes: { onClick: { action: 'clicked' } }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/component-story-custom-args-mapping.js.mdx b/docs/snippets/common/component-story-custom-args-mapping.js.mdx index 54dbde0fd12..d8963dddfcc 100644 --- a/docs/snippets/common/component-story-custom-args-mapping.js.mdx +++ b/docs/snippets/common/component-story-custom-args-mapping.js.mdx @@ -7,6 +7,11 @@ import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons'; const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight }; 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: 'Button', component: Button, argTypes: { arrow: { diff --git a/docs/snippets/common/component-story-disable-controls-alt.js.mdx b/docs/snippets/common/component-story-disable-controls-alt.js.mdx index 412e89fc604..279b3e203d7 100644 --- a/docs/snippets/common/component-story-disable-controls-alt.js.mdx +++ b/docs/snippets/common/component-story-disable-controls-alt.js.mdx @@ -1,9 +1,14 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.js|jsx|ts|tsx import { YourComponent } from './YourComponent'; 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, argTypes: { // foo is the property we want to remove from the UI @@ -12,4 +17,4 @@ export default { }, }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/component-story-disable-controls-alt.mdx.mdx b/docs/snippets/common/component-story-disable-controls-alt.mdx.mdx index ef1805ccca4..4385a9c8ce2 100644 --- a/docs/snippets/common/component-story-disable-controls-alt.mdx.mdx +++ b/docs/snippets/common/component-story-disable-controls-alt.mdx.mdx @@ -6,11 +6,11 @@ import { Meta } from '@storybook/addon-docs'; import { YourComponent } from './your-component' -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/component-story-disable-controls-regex.js.mdx b/docs/snippets/common/component-story-disable-controls-regex.js.mdx index 034148289d7..62dca9f7774 100644 --- a/docs/snippets/common/component-story-disable-controls-regex.js.mdx +++ b/docs/snippets/common/component-story-disable-controls-regex.js.mdx @@ -1,33 +1,31 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.js|jsx|ts|tsx import { YourComponent } from './YourComponent'; 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, }; -export const ArrayInclude = { - parameters: { - controls: { include: ['foo', 'bar'] }, - }, -}; +const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); -export const RegexInclude = { - parameters: { - controls: { include: /^hello*/ }, - }, -}; -export const ArrayExclude = { - parameters: { - controls: { exclude: ['foo', 'bar'] }, - }, -}; +ArrayInclude = Template.bind({}) +ArrayInclude.parameters = { controls: { include: ['foo', 'bar'] } }; -export const RegexExclude = { - parameters: { - controls: { exclude: /^hello*/ }, - }, -}; +RegexInclude = Template.bind({}) +RegexInclude.parameters = { controls: { include: /^hello*/ } }; + +ArrayExclude = Template.bind({}) +ArrayExclude.parameters = { controls: { exclude: ['foo', 'bar'] } }; + +RegexExclude = Template.bind({}) +RegexExclude.parameters = { controls: { exclude: /^hello*/ } }; ``` diff --git a/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx b/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx index 6792e76f5b4..c309a4c152b 100644 --- a/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx +++ b/docs/snippets/common/component-story-disable-controls-regex.mdx.mdx @@ -1,13 +1,15 @@ ```md -import { Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs'; import { YourComponent } from './YourComponent'; - +export const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); ({ })}/> + }}> + {Template.bind({})} + ({ })}/> + }}> + {Template.bind({})} + ({ })}/> + }}> + {Template.bind({})} + ({ })}/> + }}> + {Template.bind({})} + ``` \ No newline at end of file diff --git a/docs/snippets/common/component-story-disable-controls.js.mdx b/docs/snippets/common/component-story-disable-controls.js.mdx index 060855ca42f..57f1ae21165 100644 --- a/docs/snippets/common/component-story-disable-controls.js.mdx +++ b/docs/snippets/common/component-story-disable-controls.js.mdx @@ -1,9 +1,14 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.js|jsx|ts|tsx import { YourComponent } from './YourComponent'; 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, argTypes: { // foo is the property we want to remove from the UI @@ -14,4 +19,4 @@ export default { }, }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/component-story-disable-controls.mdx.mdx b/docs/snippets/common/component-story-disable-controls.mdx.mdx index f9cb0168722..cfff91acd0a 100644 --- a/docs/snippets/common/component-story-disable-controls.mdx.mdx +++ b/docs/snippets/common/component-story-disable-controls.mdx.mdx @@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs'; import { YourComponent } from './YourComponent' -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/component-story-sort-controls.js.mdx b/docs/snippets/common/component-story-sort-controls.js.mdx index a0d5c4a5439..430d0c75213 100644 --- a/docs/snippets/common/component-story-sort-controls.js.mdx +++ b/docs/snippets/common/component-story-sort-controls.js.mdx @@ -1,10 +1,15 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx | YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.js|jsx|ts|tsx import { YourComponent } from './your-component'; 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, parameters: { controls: { sort: 'requiredFirst' } }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/component-story-sort-controls.mdx.mdx b/docs/snippets/common/component-story-sort-controls.mdx.mdx index 5ad3966e928..1f221e05fed 100644 --- a/docs/snippets/common/component-story-sort-controls.mdx.mdx +++ b/docs/snippets/common/component-story-sort-controls.mdx.mdx @@ -13,4 +13,4 @@ import { YourComponent } from './your-component' sort: 'requiredFirst', } }} /> -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/gizmo-story-controls-customization.js.mdx b/docs/snippets/common/gizmo-story-controls-customization.js.mdx index e0ff6fabc73..0600637cfe2 100644 --- a/docs/snippets/common/gizmo-story-controls-customization.js.mdx +++ b/docs/snippets/common/gizmo-story-controls-customization.js.mdx @@ -1,9 +1,14 @@ ```js -// Gizmo.stories.js | Gizmo.stories.jsx | Gizmo.stories.ts | Gizmo.stories.tsx +// Gizmo.stories.js|jsx|ts|tsx import { Gizmo } from './Gizmo'; 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 + */ + title: 'Gizmo', component: Gizmo, argTypes: { width: { @@ -11,4 +16,4 @@ export default { }, }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx index ae0e258331d..92f3656d1fa 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.js.mdx @@ -1,10 +1,15 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts| tsx import { Button } from './Button'; // To apply a set of backgrounds to all stories of 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, parameters: { backgrounds: { @@ -16,4 +21,4 @@ export default { }, }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx index 4ce011566a3..d9e84bb4268 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-configure-grid.js.mdx @@ -1,10 +1,15 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx import { Button } from './Button'; // To apply a grid to all stories of 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, parameters: { backgrounds: { diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx index 6ed5187d3b3..2ea7ac57d0e 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.js.mdx @@ -1,15 +1,23 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, }; -export const Large = { - parameters: { - backgrounds: { disable: true }, - }, +const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); + +export const Large = Template.bind({}); +Large.parameters = { + backgrounds: { disable: true }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx index 45158370ef8..bdf3311e505 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx @@ -7,7 +7,10 @@ import { Button } from './Button'; - +export const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); + ({ })}> + }}> + {Template.bind({})} ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx index 9648de7aa34..434505d9053 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-disable-grid.js.mdx @@ -1,19 +1,27 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, }; -export const Large = { - parameters: { - backgrounds: { - grid: { - disable: true, - }, - }, - }, +const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); + +export const Large = Template.bind({}); +Large.parameters = { + backgrounds: { + grid: { + disable: true, + } + } }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx index 1b3ea35f16f..c27f982b5ff 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.js.mdx @@ -1,15 +1,23 @@ ```js -// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx +// Button.stories.js|jsx|ts|tsx 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, }; -export const Large = { - parameters: { - backgrounds: { default: 'facebook' }, - }, +const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); + +export const Large = Template.bind({}); +Large.parameters = { + backgrounds: { default: 'facebook' }, }; ``` diff --git a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx index 4743aac74da..3aa7fbf46f2 100644 --- a/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx +++ b/docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx @@ -7,7 +7,10 @@ import { Button } from './Button'; - +export const Template = (args) => ({ + //πŸ‘‡ Your template goes here +}); + ({ })}> + }}> + {Template.bind({})} ``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx b/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx new file mode 100644 index 00000000000..1180705fd52 --- /dev/null +++ b/docs/snippets/common/storybook-preview-matching-argtypes.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/preview.js + +export const parameters = { + actions: { argTypesRegex: '^on.*' } +} +``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx b/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx new file mode 100644 index 00000000000..4e8e6e07ffb --- /dev/null +++ b/docs/snippets/common/storybook-preview-parameters-color-swatches.js.mdx @@ -0,0 +1,9 @@ +```js +// .storybook/preview.js + +export const parameters = { + controls: { + presetColors: [{ color: '#ff4785', title: 'Coral' }, 'rgba(0, 159, 183, 1)', '#fe4a49'], + }, +}; +``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-custom-args-complex.js.mdx b/docs/snippets/react/component-story-custom-args-complex.js.mdx index 9590afea29b..01116f53075 100644 --- a/docs/snippets/react/component-story-custom-args-complex.js.mdx +++ b/docs/snippets/react/component-story-custom-args-complex.js.mdx @@ -1,11 +1,16 @@ ```js -// YourComponent.stories.js | YourComponent.stories.jsx +// YourComponent.stories.js|jsx import React from 'react'; import { YourComponent } from './your-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 + */ + title: 'YourComponent', component: YourComponent, //πŸ‘‡ Creates specific argTypes with options argTypes: { @@ -24,17 +29,16 @@ const someFunction = (valuePropertyA, valuePropertyB) => { // Makes some computations and returns something }; -export const ExampleStory = { - args: { - propertyA: 'Something', - propertyB: 'Something else', - }, - render: (args) => { - const { propertyA, propertyB } = args; - //πŸ‘‡ Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); +const Template = ({ propertyA, propertyB, ...rest }) => { + //πŸ‘‡ Assigns the function result to a variable + const someFunctionResult = someFunction(propertyA, propertyB); - return ; - }, + return ; }; -``` + +export const ExampleStory = Template.bind({}); +ExampleStory.args= { + propertyA: 'Item One', + propertyB: 'Another Item One', +}; +``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-custom-args-complex.mdx.mdx b/docs/snippets/react/component-story-custom-args-complex.mdx.mdx index b2306c888eb..6e9a922efd3 100644 --- a/docs/snippets/react/component-story-custom-args-complex.mdx.mdx +++ b/docs/snippets/react/component-story-custom-args-complex.mdx.mdx @@ -1,24 +1,24 @@ ```md -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { YourComponent } from './your-component'; - - - - + export const someFunction = (valuePropertyA, valuePropertyB) => { - - - + // Makes some computations and returns something }; - +export const Template = ({propertyA,propertyB,...rest})=>{ + //πŸ‘‡ Assigns the function result to a variable + +const someFunctionResult = someFunction(propertyA, propertyB); + return ; +} { args={{ propertyA: 'Item One', propertyB: 'Another Item One', - }} - render={(args) => { - const { propertyA, propertyB } = args; - const someFunctionResult = someFunction(propertyA, propertyB); - return ; - }} /> + }}> + {Template.bind({})} + -``` +``` \ No newline at end of file diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx index 29ed6aa2e9a..b9616aaed6a 100644 --- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx +++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx @@ -1,11 +1,11 @@ ```ts -// YourComponent.stories.ts | YourComponent.stories.tsx +// YourComponent.stories.ts|tsx import React from 'react'; -import { Story, Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { YourComponent, YourComponentProps } from './your-component'; +import { YourComponent } from './your-component'; //πŸ‘‡ Some function to demonstrate the behavior const someFunction = (valuePropertyA, valuePropertyB) => { @@ -13,8 +13,11 @@ const someFunction = (valuePropertyA, valuePropertyB) => { }; export default { - component: YourComponent, - title: 'A complex case with a function', + /* πŸ‘‡ 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', //πŸ‘‡ Creates specific argTypes with options argTypes: { propertyA: { @@ -25,12 +28,18 @@ export default { options: ['Another Item One', 'Another Item Two', 'Another Item Three'], }, }, -} as Meta; +} as ComponentMeta; -const Template: Story = ({ propertyA, propertyB, ...rest }) => { +const Template: ComponentStory = ({ propertyA, propertyB, ...rest }) => { //πŸ‘‡ Assigns the result from the function to a variable const someFunctionResult = someFunction(propertyA, propertyB); return ; }; + +export const ExampleStory = Template.bind({}); +ExampleStory.args= { + propertyA: 'Item One', + propertyB: 'Another Item One', +}; ``` \ No newline at end of file diff --git a/docs/snippets/react/my-component-story-configure-viewports.js.mdx b/docs/snippets/react/my-component-story-configure-viewports.js.mdx index 5438b4e44f2..d387f160e43 100644 --- a/docs/snippets/react/my-component-story-configure-viewports.js.mdx +++ b/docs/snippets/react/my-component-story-configure-viewports.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.stories.js | MyComponent.stories.ts | MyComponent.stories.jsx | MyComponent.stories.tsx +// MyComponent.stories.js|jsx import React from 'react'; @@ -8,6 +8,11 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; 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 + */ + title: 'MyComponent', component: MyComponent, parameters: { //πŸ‘‡ The viewports object from the Essentials addon @@ -20,11 +25,10 @@ export default { }, }; -export const MyStory = { - parameters: { - viewport: { - defaultViewport: 'iphonex', - }, +export const MyStory = () => ; +MyStory.parameters = { + viewport: { + defaultViewport: 'iphonex', }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/react/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/react/my-component-story-configure-viewports.mdx.mdx index b8de6dd1f95..cf66f1960f3 100644 --- a/docs/snippets/react/my-component-story-configure-viewports.mdx.mdx +++ b/docs/snippets/react/my-component-story-configure-viewports.mdx.mdx @@ -18,14 +18,13 @@ import { MyComponent } from './MyComponent'; component={MyComponent} /> - - } /> + }}> + + ``` diff --git a/docs/snippets/react/my-component-story-configure-viewports.ts.mdx b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx new file mode 100644 index 00000000000..a4051fb48ab --- /dev/null +++ b/docs/snippets/react/my-component-story-configure-viewports.ts.mdx @@ -0,0 +1,36 @@ +```ts +// MyComponent.stories.ts|tsx + +import React from 'react'; + +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; + +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 + */ + title: 'MyComponent', + component: MyComponent, + parameters: { + //πŸ‘‡ The viewports object from the Essentials addon + viewport: { + //πŸ‘‡ The viewports you want to use + viewports: INITIAL_VIEWPORTS, + //πŸ‘‡ Your own default viewport + defaultViewport: 'iphone6', + }, + }, +} as ComponentMeta; + +export const MyStory: ComponentStory = () => ; +MyStory.parameters = { + viewport: { + defaultViewport: 'iphonex', + }, +}; +``` \ No newline at end of file diff --git a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx index 2ac6efe246c..ab59221464e 100644 --- a/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx +++ b/docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx @@ -1,8 +1,8 @@ ```js -// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx +// MyComponent.stories.js|jsx|ts|tsx export const StoryWithLocale = ({ 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.js.mdx b/docs/snippets/react/my-component-story-use-globaltype.js.mdx index c76f7794e8e..9daf1ed0371 100644 --- a/docs/snippets/react/my-component-story-use-globaltype.js.mdx +++ b/docs/snippets/react/my-component-story-use-globaltype.js.mdx @@ -1,11 +1,16 @@ ```js -// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx +// MyComponent.stories.js|jsx|ts|tsx import React from 'react'; 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 + */ + title: 'MyComponent', component: MyComponent, }; @@ -24,10 +29,8 @@ const getCaptionForLocale = (locale) => { } }; -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return <>{caption}; - }, +export const StoryWithLocale = (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 66c9c4ae1ef..55c5ca4ab81 100644 --- a/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx +++ b/docs/snippets/react/my-component-story-use-globaltype.mdx.mdx @@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs'; import { MyComponent } from './MyComponent'; - + export const getCaptionForLocale = (locale) => { switch(locale) { @@ -18,12 +18,10 @@ export const getCaptionForLocale = (locale) => { } }; - - - { + + {(args, { globals: { locale } }) => { const caption = getCaptionForLocale(locale); return <>{caption}; - }} /> + }} + ``` \ 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 9f80c3930e2..15066c021ba 100644 --- a/docs/snippets/react/table-story-fully-customize-controls.js.mdx +++ b/docs/snippets/react/table-story-fully-customize-controls.js.mdx @@ -1,5 +1,5 @@ ```js -// Table.stories.js | Table.stories.jsx +// Table.stories.js|jsx!ts!tsx import React from 'react'; @@ -8,29 +8,31 @@ import { TD } from './TableDataCell'; 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 + */ + title: 'Custom Table', component: Table, }; -export const TableStory = { - args: { - //πŸ‘‡ This arg is for the story component - data: [ - [1, 2, 3], - [4, 5, 6], - ], - //πŸ‘‡ The remaining args get passed to the `Table` component - size: 'large', - }, - render: ({ data, ...args }) => ( - - {data.map((row) => ( - - {row.map((item) => ( - - ))} - - ))} -
{item}
- ), +const TableStory = ({ data, ...args}) => ( + + {data.map((row) => ( + + {row.map((item) => ( + + ))} + + ))} +
{item}
+); + +export const Numeric = TableStory.bind({}); +Numeric.args = { + //πŸ‘‡ This arg is for the story component + data: [[1, 2, 3], [4, 5, 6]], + //πŸ‘‡ The remaining args get passed to the `Table` component + size: 'large', }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx b/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx index 024fcd4b754..8cbfee5eff0 100644 --- a/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx +++ b/docs/snippets/react/table-story-fully-customize-controls.mdx.mdx @@ -7,17 +7,18 @@ import { Table } from './Table'; - +export const TableStory = ({ data, ...args }) => ( + + {data.map(row => ({row.map(item => }))} +
{item}
+); ( - - {data.map(row => ({row.map(item => }))} -
{item}
- )} /> + }}> + {TableStory.bind({})} + ``` \ No newline at end of file diff --git a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx index 55bb8e769ac..628f7ee7f33 100644 --- a/docs/snippets/svelte/component-story-custom-args-complex.js.mdx +++ b/docs/snippets/svelte/component-story-custom-args-complex.js.mdx @@ -4,6 +4,11 @@ import YourComponent from './YourComponent.svelte'; 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, //πŸ‘‡ Creates specific argTypes argTypes: { @@ -22,22 +27,23 @@ const someFunction = (valuePropertyA, valuePropertyB) => { // Makes some computations and returns something }; -export const ExampleStory = { - args: { - propertyA: 'Something', - propertyB: 'Something else', - }, - render: (args) => { - const { propertyA, propertyB } = args; - //πŸ‘‡ Assigns the function result to a variable - const someFunctionResult = someFunction(propertyA, propertyB); - return { - Component: YourComponent, - props: { - ...args, - someProperty: someFunctionResult, - }, - }; - }, +const Template = (args) => { + const { propertyA, propertyB } = args; + + //πŸ‘‡ Assigns the function result to a variable + const someFunctionResult = someFunction(propertyA, propertyB); + return { + Component: YourComponent, + props: { + ...args, + someProperty: someFunctionResult, + }, + }; }; -``` + +export const ExampleStory = Template.bind({}); +ExampleStory.args= { + propertyA: 'Item One', + propertyB: 'Another Item One', +}; +``` \ No newline at end of file diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx index 075779bbb1b..d3646e58fe4 100644 --- a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx +++ b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx @@ -6,6 +6,11 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import MyComponent from './MyComponent.svelte'; 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: 'MyComponent', component: MyComponent, parameters: { //πŸ‘‡ The viewports object from the Essentials addon @@ -18,14 +23,12 @@ export default { }, }; -export const MyStory = { - render: () => ({ - Component: MyComponent, - }), - parameters: { - viewport: { - defaultViewport: 'iphonex', - }, +export const MyStory = () => ({ + Component: MyComponent, +}); +MyStory.parameters = { + viewport: { + defaultViewport: 'iphonex', }, }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx index 73ceb9ac6b7..afd1ced8915 100644 --- a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx +++ b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx @@ -8,7 +8,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import MyComponent from './MyComponent.svelte'; - - + {() => { + return { + Component: MyComponent, + }; }} - render={() => ({ - Component: MyComponent, - })} /> + ``` \ No newline at end of file diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx index a4d6b1a7eb3..b6416845297 100644 --- a/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx +++ b/docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx @@ -10,7 +10,7 @@ { const caption = getCaptionForLocale(locale); return { - component: SampleComponent, + component: MyComponent, props: { locale: caption, }, }; }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx index 176e9cae238..ad6c6e37994 100644 --- a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx +++ b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx @@ -4,6 +4,11 @@ import MyComponent from './MyComponent.svelte'; 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: 'MyComponent', component: MyComponent, }; @@ -22,15 +27,13 @@ const getCaptionForLocale = (locale) => { } }; -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - component: MyComponent, - props: { - locale: caption, - }, - }; - }, +export const StoryWithLocale = (args, { globals: { locale } }) => { + const caption = getCaptionForLocale(locale); + return { + component: SampleComponent, + props: { + locale: caption, + }, + }; }; ``` diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx index d6d43fd949e..07fca01dd1c 100644 --- a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx +++ b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx @@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs'; import MyComponent from './MyComponent.svelte'; - + export const getCaptionForLocale = (locale) => { switch(locale) { @@ -18,10 +18,8 @@ export const getCaptionForLocale = (locale) => { } }; - - - { + + {(args, { globals: { locale } }) => { const caption = getCaptionForLocale(locale); return { component: MyComponent, @@ -29,5 +27,6 @@ export const getCaptionForLocale = (locale) => { locale: caption, }, }; - }} /> + }} + ``` \ No newline at end of file diff --git a/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx b/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx index 0d8898c9f82..c4a8ef2c9ec 100644 --- a/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx +++ b/docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx @@ -8,7 +8,7 @@ { // Makes some computations and returns something }; -export const ExampleStory = { - args: { - propertyA: 'Something', - propertyB: 'Something else', - }, - render: (args) => { - const { propertyA, propertyB } = args; - //πŸ‘‡ Assigns the function result to a variable - const functionResult = someFunction(propertyA, propertyB); - return { - components: { YourComponent }, - setup() { - return { +const Template = (args) => { + //πŸ‘‡ Assigns the function result to a variable + const functionResult = someFunction(args.propertyA, args.propertyB); + return { + components: { YourComponent }, + setup() { + //πŸ‘‡ The args will now be passed down to the template + return { + args: { ...args, //πŸ‘‡ Replaces arg variable with the override (without the need of mutation) someProperty: functionResult, - }; - }, - template: - '', - }; - }, + }, + }; + }, + template: '', + }; }; -``` + +export const ExampleStory = Template.bind({}); +ExampleStory.args= { + propertyA: 'Item One', + propertyB: 'Another Item One', +}; +``` \ No newline at end of file diff --git a/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx b/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx index 199c67d9f50..a64c2b4d474 100644 --- a/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx +++ b/docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx @@ -1,25 +1,42 @@ ```md -import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Canvas, Meta, Story } from '@storybook/addon-docs'; import YourComponent from './YourComponent.vue'; - + export const someFunction = (valuePropertyA, valuePropertyB) => { - + // Makes some computations and returns something }; - +export const Template = (args) => { + //πŸ‘‡ Assigns the function result to a variable + const functionResult = someFunction(args.propertyA, args.propertyB); + return { + components: { YourComponent }, + setup() { + //πŸ‘‡ The args will now be passed down to the template + return { + args: { + ...args, + //πŸ‘‡ Replaces arg variable with the override (without the need of mutation) + someProperty: functionResult, + }, + }; + }, + template: '', + }; +}; { args={{ propertyA: 'Item One', propertyB: 'Another Item One', - }} - render={(args) => { - const { propertyA, propertyB } = args; - const functionResult = someFunction(propertyA, propertyB); - return { - components: { YourComponent }, - setup() { - return { - args: { - ...args, - someProperty: functionResult, - }, - }; - }, - template: '', - }; - }} /> + }}> + {Template.bind({})} + ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx index 64d06ed928b..87d369cc082 100644 --- a/docs/snippets/vue/my-component-story-configure-viewports.js.mdx +++ b/docs/snippets/vue/my-component-story-configure-viewports.js.mdx @@ -6,6 +6,11 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import MyComponent from './MyComponent.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 + */ + title: 'MyComponent', component: MyComponent, parameters: { //πŸ‘‡ The viewports object from the Essentials addon @@ -19,15 +24,13 @@ export default { }, }; -export const MyStory = { - parameters: { - viewport: { - defaultViewport: 'iphonex', - }, +export const MyStory = () => ({ + components: { MyComponent }, + template: '', +}); +MyStory.parameters = { + viewport: { + defaultViewport: 'iphonex' }, - render: () => ({ - components: { MyComponent }, - template: '', - }), }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx index c0da082fe27..9dbf1c2c759 100644 --- a/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx +++ b/docs/snippets/vue/my-component-story-configure-viewports.mdx.mdx @@ -7,10 +7,8 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; import MyComponent from './MyComponent.vue'; - - + {() => { + return { + template: ``, + }; }} - render={() => ({ - components: { MyComponent }, - template: '', - })} /> + ``` \ No newline at end of file diff --git a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx index 9d3a3a77303..159eeef0e5d 100644 --- a/docs/snippets/vue/my-component-story-use-globaltype.js.mdx +++ b/docs/snippets/vue/my-component-story-use-globaltype.js.mdx @@ -4,6 +4,11 @@ import MyComponent from './MyComponent.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 + */ + title: 'MyComponent', component: MyComponent, }; @@ -22,12 +27,10 @@ const getCaptionForLocale = (locale) => { } }; -export const StoryWithLocale = { - render: (args, { globals: { locale } }) => { - const caption = getCaptionForLocale(locale); - return { - template: `

${caption}

`, - }; - }, +export const StoryWithLocale = (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 56c02db00c4..6f6f74945f6 100644 --- a/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx +++ b/docs/snippets/vue/my-component-story-use-globaltype.mdx.mdx @@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs'; import MyComponent from './MyComponent.vue'; - + export const getCaptionForLocale = (locale) => { switch(locale) { @@ -18,14 +18,12 @@ export const getCaptionForLocale = (locale) => { } }; - - - { + + {(args, { globals: { locale } }) => { const caption = getCaptionForLocale(locale); return { template: `

${caption}

`, }; - }} /> + }} + ``` \ No newline at end of file diff --git a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx index 9dc6c7ec3a7..6b8c6b26c79 100644 --- a/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx +++ b/docs/snippets/vue/table-story-fully-customize-controls.2.js.mdx @@ -4,31 +4,35 @@ import Table from './Table.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 + */ + title: 'Custom Table', component: Table, }; -export const TableStory = { - args: { - //πŸ‘‡ This arg is for the story component - data: [ - [1, 2, 3], - [4, 5, 6], - ], - //πŸ‘‡ The remaining args get passed to the `Table` component - size: 'large', - }, - render: (args, { argTypes }) => ({ - components: { Table }, - props: Object.keys(argTypes), - template: ` - - - - -
- {{ data[idx1][idx2] }} -
- `, - }), +const TableStory = (args, { argTypes }) => ({ + components: { Table }, + props: Object.keys(argTypes), + template: ` + + + + +
+ {{ data[idx1][idx2] }} +
`, +}); + +export const Numeric = TableStory.bind({}); +Numeric.args = { + //πŸ‘‡ This arg is for the story component + data: [ + [1, 2, 3], + [4, 5, 6], + ], + //πŸ‘‡ The remaining args get passed to the `Table` component + size: 'large', }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx index 261a76160ca..83de07a3d54 100644 --- a/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx +++ b/docs/snippets/vue/table-story-fully-customize-controls.3.js.mdx @@ -1,35 +1,41 @@ ```js // Table.stories.js + import Table from './Table.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 + */ + title: 'Custom Table', component: Table, }; -export const TableStory = { - args: { - //πŸ‘‡ This arg is for the story component - data: [ - [1, 2, 3], - [4, 5, 6], - ], - //πŸ‘‡ The remaining args get passed to the `Table` component - size: 'large', +const TableStory = (args) => ({ + components: { Table }, + setup() { + return { args }; }, - render: (args) => ({ - components: { Table }, - setup() { - return { args }; - }, - template: ` - - - - -
- {{ data[idx1][idx2] }} -
+ template: ` + + + + +
+ {{ data[idx1][idx2] }} +
`, - }), +}); + +export const Numeric = TableStory.bind({}); +Numeric.args = { + //πŸ‘‡ This arg is for the story component + data: [ + [1, 2, 3], + [4, 5, 6], + ], + //πŸ‘‡ The remaining args get passed to the `Table` component + size: 'large', }; -``` +``` \ No newline at end of file diff --git a/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx b/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx index 1f9d5a9a887..ed39b60e5e4 100644 --- a/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx +++ b/docs/snippets/vue/table-story-fully-customize-controls.mdx-2.mdx.mdx @@ -7,7 +7,18 @@ import Table from './Table.vue'; - +export const TableStory = (args, { argTypes }) => ({ + components: { Table }, + props: Object.keys(argTypes), + template: ` + + + + +
+ {{ data[idx1][idx2] }} +
`, +}); ({ - components: { Table }, - props: Object.keys(argTypes), - template: ` - - - - -
- {{ data[idx1][idx2] }} -
`, - })} /> + }}> + {TableStory.bind({})} + ``` \ No newline at end of file diff --git a/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx b/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx index 04bc4bab1b8..dacb1979565 100644 --- a/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx +++ b/docs/snippets/vue/table-story-fully-customize-controls.mdx-3.mdx.mdx @@ -7,7 +7,20 @@ import Table from './Table.vue'; - +export const TableStory = (args) => ({ + components: { Table }, + setup() { + return { args }; + }, + template: ` + + + + +
+ {{ data[idx1][idx2] }} +
`, +}); ({ - components: { Table }, - setup() { - return { args }; - }, - template: ` - - - - -
- {{ data[idx1][idx2] }} -
`, - })} /> + }}> + {TableStory.bind({})} + ``` \ No newline at end of file