GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-21 05:02:39 +08:00
Code Issues Packages Projects Releases Wiki Activity

Normalized the MDX snippets all around

Browse Source
This commit is contained in:
jonniebigodes 2021-08-09 19:19:01 +01:00
parent 1574a6285b
commit b875ce1571
118 changed files with 296 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/snippets/angular/badge-story-starter-example.mdx.mdx
View File

@ -9,13 +9,13 @@ import { CommonModule } from '@angular/common';
import Badge from './badge.component';
import Icon from './icon.component';
<Meta title='MDX/Badge' component={Badge} />
<Meta title="MDX/Badge" component={Badge} />
# Badge
Let's define a story for our `Badge` component:
<Story name='positive'>
<Story name="positive">
{{
template:`<Badge status="positive">Positive</Badge>`,
}}
@ -24,7 +24,7 @@ Let's define a story for our `Badge` component:
We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story name='negative'>
<Story name="negative">
{{
template: `<Badge status="negative">Negative</Badge>`,
}}
@ -36,26 +36,26 @@ gets rendered as a group, but defines individual stories
with unique URLs and isolated snapshot tests.
<Canvas>
<Story name='warning'>
<Story name="warning">
{{
template: `<Badge status="warning">Warning</Badge>`,
}}
</Story>
<Story name='neutral'>
<Story name="neutral">
{{
template: `<Badge status="neutral">Neutral</Badge>`,
}}
</Story>
<Story name='error'>
<Story name="error">
{{
template: `<Badge status="error">Error</Badge>`,
}}
</Story>
<Story
name='with icon'
name="with icon"
decorators={[
moduleMetadata({
declarations: [Badge, Icon],

12
docs/snippets/angular/badge-story.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Badge from './badge.component';
<Meta title='MDX/Badge' component={Badge} />
<Meta title="MDX/Badge" component={Badge} />
export const Template = (args) => ({ props: args });
@ -14,7 +14,7 @@ export const Template = (args) => ({ props: args });
Let's define a story for our `Badge` component:
<Story
name='positive'
name="positive"
args={{
status: 'positive',
label: 'Positive',
@ -26,7 +26,7 @@ We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story
name='negative'
name="negative"
args={{
status: 'negative',
label: 'Negative',
@ -41,7 +41,7 @@ with unique URLs, which is great for review and testing.
<Canvas>
<Story
name='warning'
name="warning"
args={{
status: 'warning',
label: 'Warning',
@ -50,7 +50,7 @@ with unique URLs, which is great for review and testing.
</Story>
<Story
name='neutral'
name="neutral"
args={{
status: 'neutral',
label: 'Neutral',
@ -59,7 +59,7 @@ with unique URLs, which is great for review and testing.
</Story>
<Story
name='error'
name="error"
args={{
status: 'error',
label: 'Error',

2
docs/snippets/angular/button-story-component-args-primary.mdx.mdx
View File

@ -7,7 +7,7 @@ import Button from './button.component';
<!-- 👇 Creates specific argTypes for args and turns every Button story into primary -->
<Meta
title='Button'
title="Button"
component={Button}
argTypes={{
backgroundColor: { control: 'color' },

4
docs/snippets/angular/button-story-component-decorator.mdx.mdx
View File

@ -11,7 +11,7 @@ import ParentComponent from './parent.component';
<!-- With a template -->
<Meta
title='Components/Button'
title="Components/Button"
component={Button}
decorators={[
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)
@ -20,7 +20,7 @@ import ParentComponent from './parent.component';
<!-- With component which contains ng-content -->
<Meta
title='Components/Button'
title="Components/Button"
component={Button}
decorators={[
moduleMetadata({

8
docs/snippets/angular/button-story-decorator.mdx.mdx
View File

@ -5,14 +5,14 @@ import { Meta, Story } from '@storybook/addon-docs';
import { componentWrapperDecorator,moduleMetadata } from '@storybook/angular';
import Button from './button.component.ts';
import Button from './button.component';
import { ParentComponent } from './parent.component';
<Meta title='Components/Button' component={Button}/>
<Meta title="Components/Button" component={Button}/>
<!-- With a template -->
<Story
name='Primary'
name="Primary"
decorators={[
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)
]}>
@ -23,7 +23,7 @@ import { ParentComponent } from './parent.component';
<!-- With a component -->
<Story
name='InsideParent'
name="InsideParent"
decorators={[
moduleMetadata({
declarations: [ParentComponent],

6
docs/snippets/angular/button-story-default-docs-code.mdx.mdx
View File

@ -3,11 +3,11 @@
import { Meta, Story } from '@storybook/addon-docs';
import Button from './button.component.ts';
import Button from './button.component';
<!-- 👇 Creates specific argTypes -->
<Meta
title='Button'
title="Button"
component={Button}
argTypes={{
backgroundColor: {
@ -23,7 +23,7 @@ export const someFunction = (someValue) => {
<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
<Story
name='ExampleStory'
name="ExampleStory"
args={{
primary: true,
size: 'small',

4
docs/snippets/angular/button-story-with-args.mdx.mdx
View File

@ -5,12 +5,12 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './button.component';
<Meta title='Components/Button' component={Button} />
<Meta title="Components/Button" component={Button} />
export const Template = (args) => ({ props: args });
<Story
name='Primary'
name="Primary"
args={{
primary: true,
label: 'Button',

4
docs/snippets/angular/checkbox-story-starter-example.mdx.mdx
View File

@ -5,9 +5,9 @@ import { Meta, Story } from '@storybook/addon-docs';
import Checkbox from './checkbox.component';
<Meta title='MDX/Checkbox' component={Checkbox} />
<Meta title="MDX/Checkbox" component={Checkbox} />
<Story name='MyStory'>
<Story name="MyStory">
{{
template: `
<form>

8
docs/snippets/angular/checkbox-story.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Checkbox from './checkbox.component';
<Meta title='MDX/Checkbox' component={Checkbox} />
<Meta title="MDX/Checkbox" component={Checkbox} />
# Checkbox
@ -16,7 +16,7 @@ export const Template = (args) => ({ props: args });
<Canvas>
<Story
name='Unchecked'
name="Unchecked"
args={{
label: 'Unchecked',
}}>
@ -24,7 +24,7 @@ export const Template = (args) => ({ props: args });
</Story>
<Story
name='Checked'
name="Checked"
args={{
label: 'Unchecked',
checked: true,
@ -33,7 +33,7 @@ export const Template = (args) => ({ props: args });
</Story>
<Story
name='Secondary'
name="Secondary"
args={{
label: 'Secondary',
checked: true,

4
docs/snippets/angular/component-story-custom-args-complex.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import YourComponent from './your-component.component';
<Meta title='Example of how to use argTypes and functions' component={YourComponent}/>
<Meta title="Example of how to use argTypes and functions" component={YourComponent}/>
<!---👇 A function to apply some computations -->
@ -30,7 +30,7 @@ export const Template = (args)=>{
<Canvas>
<Story
name='A complex case with a function'
name="A complex case with a function"
argTypes={{
propertyA: {
options: [

2
docs/snippets/angular/component-story-mdx-story-by-name.mdx.mdx
View File

@ -7,7 +7,7 @@ import Button from './button.component';
export const Template = (args) => ({ props: args });
<Story name='Basic' args={{ label: 'hello' }}>
<Story name="Basic" args={{ label: 'hello' }}>
{Template.bind({})}
</Story>
```

4
docs/snippets/angular/component-story-static-asset-cdn.mdx.mdx
View File

@ -3,9 +3,9 @@
import { Meta, Story } from '@storybook/addon-docs';
<Meta title='img' />
<Meta title="img" />
<Story name='withAnImage'>
<Story name="withAnImage">
{{
template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder" />`,
}}

4
docs/snippets/angular/component-story-static-asset-with-import.mdx.mdx
View File

@ -5,14 +5,14 @@ import { Meta, Story } from '@storybook/addon-docs';
import imageFile from './static/image.png';
<Meta title='img' />
<Meta title="img" />
export const image = {
src: imageFile,
alt: 'my image',
};
<Story name='withAnImage'>
<Story name="withAnImage">
{{
props: {
src: image.src,

8
docs/snippets/angular/mdx-canvas-multiple-stories.mdx.mdx
View File

@ -1,13 +1,13 @@
```md
<!-- Badge.stories.mdx --->
import { Canvas } from '@storybook/addon-docs';
import { Canvas, Story } from '@storybook/addon-docs';
export const Template = (args) => ({ props: args });
<Canvas>
<Story
name='warning'
name="warning"
args={{
status: 'warning',
label: 'Warning',
@ -16,7 +16,7 @@ export const Template = (args) => ({ props: args });
</Story>
<Story
name='neutral'
name="neutral"
args={{
status: 'neutral',
label: 'Neutral',
@ -25,7 +25,7 @@ export const Template = (args) => ({ props: args });
</Story>
<Story
name='error'
name="error"
args={{
status: 'error',
label: 'Error',

4
docs/snippets/angular/my-component-story-configure-viewports.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
<Meta
title='Stories'
title="Stories"
parameters={{
viewport: {
viewports: INITIAL_VIEWPORTS,
@ -16,7 +16,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
/>
<Story
name='MyStory'
name="MyStory"
parameters={{
viewport: {
defaultViewport: 'iphonex',

2
docs/snippets/angular/my-component-story-use-globaltype.mdx.mdx
View File

@ -14,7 +14,7 @@ export const getCaptionForLocale = (locale) => {
}
};
<Story name='StoryWithLocale'>
<Story name="StoryWithLocale">
{(args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {

4
docs/snippets/angular/my-component-with-env-variables.mdx.mdx
View File

@ -5,13 +5,13 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import MyComponent from './my-component.component';
<Meta title='A MDX story using environment variables inside a .env file' component={MyComponent}/>
<Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
export const Template = (args) => ({ props: args });
<Canvas>
<Story
name='A MDX story using environment variables inside a .env file'
name="A MDX story using environment variables inside a .env file"
args={{
propertyA: process.env.STORYBOOK_DATA_KEY,
}}>

4
docs/snippets/angular/page-story-slots.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Page from './page.component.ts';
<Meta title='Page' component={Page} />
<Meta title="Page" component={Page} />
export const Template = (args) => ({
props: args,
@ -17,7 +17,7 @@ export const Template = (args) => ({
});
<Story
name='CustomFooter'
name="CustomFooter"
args={{
footer: 'Built with Storybook',
}}>

2
docs/snippets/angular/table-story-fully-customize-controls.mdx.mdx
View File

@ -19,7 +19,7 @@ export const TableStory = (args) => ({
});
<Story
name='Numeric'
name="Numeric"
args={{
data: [
[1, 2, 3],

2
docs/snippets/angular/your-component-with-decorator.mdx.mdx
View File

@ -8,7 +8,7 @@ import { componentWrapperDecorator } from '@storybook/angular';
import { YourComponent } from './your-component.component';
<Meta
title='YourComponent'
title="YourComponent"
component={YourComponent}
decorators={[componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)]}
/>

4
docs/snippets/angular/your-component.mdx.mdx
View File

@ -6,14 +6,14 @@ import { Meta, Story } from '@storybook/addon-docs';
import { YourComponent } from './your.component';
<!--👇 The title prop determines where your story goes in the story list -->
<Meta title='YourComponent' component={YourComponent} />
<Meta title="YourComponent" component={YourComponent} />
<!--👇 We create a “template” of how args map to rendering -->
export const Template = (args) => ({ props: args });
<!-- 👇 The args you need here will depend on your component -->
<Story
name='FirstStory'
name="FirstStory"
args={{}}>
{Template.bind({})}
</Story>

2
docs/snippets/common/button-story-action-event-handle.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Meta } from '@storybook/addon-docs';
<Meta
title='Button'
title="Button"
parameters={{
actions: {
handles: ['mouseover', 'click .btn'],

2
docs/snippets/common/button-story-controls-primary-variant.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Story } from '@storybook/addon-docs';
<Story
name='Primary'
name="Primary"
args={{
variant: 'primary',
}}>

4
docs/snippets/common/button-story-controls-radio-group.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs';
import { Button } from './Button';
<Meta
title='Button'
title="Button"
component={Button}
argTypes={{
variant: {
@ -15,4 +15,4 @@ import { Button } from './Button';
}
}}
/>
```
```

2
docs/snippets/common/button-story-matching-argtypes.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs';
import { Button } from './Button';
<Meta
title='Button'
title="Button"
component={Button}
parameters={{
actions: { argTypesRegex: '^on.\*' }

2
docs/snippets/common/button-story-onclick-action-argtype.mdx.mdx
View File

@ -3,5 +3,5 @@
import { Meta } from '@storybook/addon-docs';
<Meta title='Button' argTypes={{ onClick: { action: 'clicked' } }} />
<Meta title="Button" argTypes={{ onClick: { action: 'clicked' } }} />
```

2
docs/snippets/common/component-story-custom-params.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Story } from '@storybook/addon-docs';
<Story
name='Primary'
name="Primary"
parameters={{
backgrounds: {
values: [

8
docs/snippets/common/component-story-disable-controls-regex.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Story } from '@storybook/addon-docs';
<Story
name='Array Include'
name="Array Include"
parameters={{
controls: {
include: ['foo', 'bar']
@ -14,7 +14,7 @@ import { Story } from '@storybook/addon-docs';
</Story>
<Story
name='Regex Include'
name="Regex Include"
parameters={{
controls: { include:
/^hello*/
@ -24,7 +24,7 @@ import { Story } from '@storybook/addon-docs';
</Story>
<Story
name='Array Exclude'
name="Array Exclude"
parameters={{
controls: {
exclude: ['foo', 'bar']
@ -34,7 +34,7 @@ import { Story } from '@storybook/addon-docs';
</Story>
<Story
name='Regex Exclude'
name="Regex Exclude"
parameters={{
controls: {
exclude: /^hello*/

8
docs/snippets/common/component-story-disable-controls.mdx.mdx
View File

@ -6,21 +6,21 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { YourComponent } from './YourComponent'
<Meta
title='My Story'
title="My Story"
component={YourComponent}
argTypes={{
foo:{
table:{
disable:true
disable: true,
}
}
}} />
<Canvas>
<Story
name='My Story'
name="My Story"
args={{
foo: 'bar'
foo: 'bar',
}}>
{Template.bind({})}
</Story>

4
docs/snippets/common/component-story-mdx-argstable-block-for-story.mdx.mdx
View File

@ -7,10 +7,10 @@ import { MyComponent } from './MyComponent';
# My Component!
<Story name='My Story'>
<Story name="My Story">
<!-- my story for MyComponent -->
{(args) => <MyComponent {...args} />}
</Story>
<ArgsTable story='My Story' />
<ArgsTable story="My Story" />
```

4
docs/snippets/common/component-story-mdx-argtypes.mdx.mdx
View File

@ -7,7 +7,7 @@ import { MyComponent } from './MyComponent';
<!--- Add new argTypes to your component or further adjust them --->
<Meta
title='MyComponent'
title="MyComponent"
component={MyComponent}
argTypes={{
label: {
@ -18,7 +18,7 @@ import { MyComponent } from './MyComponent';
<!--- Add new argTypes to your Story or further adjust them --->
<Story
name='some story'
name="some story"
argTypes={{
label: {
name: 'different label',

4
docs/snippets/common/component-story-mdx-decorators-params.mdx.mdx
View File

@ -4,12 +4,12 @@
import { Meta, Story } from '@storybook/addon-docs';
<Meta
title='MyComponent'
title="MyComponent"
decorators={[ ... ]}
parameters={{ ... }}
/>
<Story name='story' decorators={[ ... ]} parameters={{ ... }} >
<Story name="story" decorators={[ ... ]} parameters={{ ... }} >
...
</Story>
```

2
docs/snippets/common/component-story-mdx-embed.mdx.mdx
View File

@ -7,5 +7,5 @@ import { Story } from '@storybook/addon-docs';
And Markdown here
<Story id='some--id' />
<Story id="some--id" />
```

4
docs/snippets/common/component-story-sort-controls.mdx.mdx
View File

@ -6,11 +6,11 @@ import { Meta } from '@storybook/addon-docs';
import { YourComponent } from './your-component'
<Meta
title='My Story'
title="My Story"
component={YourComponent}
parameters={{
controls: {
sort: 'requiredFirst'
sort: 'requiredFirst',
}
}} />
```

1
docs/snippets/common/custom-docs-page.mdx.mdx
View File

@ -36,5 +36,4 @@ Button is the primary component. It has four possible states.
### Small
<Story id="example-button--small" />
```

4
docs/snippets/common/gizmo-story-controls-customization.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs';
import Gizmo from './Gizmo';
<Meta
title='Gizmo'
title="Gizmo"
component={Gizmo}
argTypes={{
width: {
@ -14,7 +14,7 @@ import Gizmo from './Gizmo';
type: 'range',
min: 400,
max: 1200,
step: 50
step: 50,
},
},
}}

4
docs/snippets/common/my-component-story-mdx-with-decorators-params.mdx.mdx
View File

@ -4,13 +4,13 @@
import { Meta, Story } from '@storybook/addon-docs';
<Meta
title='MyComponent'
title="MyComponent"
decorators={[ ... ]}
parameters={{ ... }}
/>
<Story
name='story'
name="story"
decorators={[ ... ]}
parameters={{ ... }} >
...

2
docs/snippets/common/storybook-addon-backgrounds-configure-backgrounds.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Meta } from '@storybook/addon-docs';
<Meta
title='Button'
title="Button"
parameters={{
backgrounds: {
default: 'twitter',

2
docs/snippets/common/storybook-addon-backgrounds-configure-grid.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta } from '@storybook/addon-docs';
<!-- To apply a grid to all stories of Button -->
<Meta
title='Button'
title="Button"
parameters={{
backgrounds: {
grid: {

2
docs/snippets/common/storybook-addon-backgrounds-disable-backgrounds.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Story } from '@storybook/addon-docs';
<Story
name='Large'
name="Large"
parameters={{
backgrounds: {
disable: true,

2
docs/snippets/common/storybook-addon-backgrounds-disable-grid.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Story } from '@storybook/addon-docs';
<Story
name='Large'
name="Large"
parameters={{
backgrounds: {
grid: {

2
docs/snippets/common/storybook-addon-backgrounds-override-background-color.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Story } from '@storybook/addon-docs';
<Story
name='Large'
name="Large"
parameters={{
backgrounds: {
default: 'facebook',

2
docs/snippets/common/storybook-component-layout-param.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Meta } from '@storybook/addon-docs';
<Meta
title='Components/Button'
title="Components/Button"
parameters={{
layout: 'centered',
}}

2
docs/snippets/common/storybook-story-layout-param.mdx.mdx
View File

@ -4,7 +4,7 @@
import { Story } from '@storybook/addon-docs';
<Story
name='WithLayout'
name="WithLayout"
parameters={{
layout: 'centered',
}}>

14
docs/snippets/react/badge-story-starter-example.mdx.mdx
View File

@ -6,20 +6,20 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Badge } from './Badge';
import { Icon } from './Icon';
<Meta title='MDX/Badge' component={Badge} />
<Meta title="MDX/Badge" component={Badge} />
# Badge
Let's define a story for our `Badge` component:
<Story name='positive'>
<Story name="positive">
<Badge status="positive">Positive</Badge>
</Story>
We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story name='negative'>
<Story name="negative">
<Badge status="negative">Negative</Badge>
</Story>
</Canvas>
@ -29,19 +29,19 @@ gets rendered as a group, but defines individual stories
with unique URLs and isolated snapshot tests.
<Canvas>
<Story name='warning'>
<Story name="warning">
<Badge status="warning">Warning</Badge>
</Story>
<Story name='neutral'>
<Story name="neutral">
<Badge status="neutral">Neutral</Badge>
</Story>
<Story name='error'>
<Story name="error">
<Badge status="error">Error</Badge>
</Story>
<Story name='with icon'>
<Story name="with icon">
<Badge status="warning">
<Icon icon="check" inline />
with icon

20
docs/snippets/react/badge-story.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Badge } from './Badge';
import { Icon } from './Icon';
<Meta title='MDX/Badge' component={Badge} />
<Meta title="MDX/Badge" component={Badge} />
export const Template = (args) => <Badge {...args } />
@ -15,7 +15,7 @@ export const Template = (args) => <Badge {...args } />
Let's define a story for our `Badge` component:
<Story
name='positive'
name="positive"
args={{
status: 'positive',
label: 'Positive'
@ -27,7 +27,7 @@ We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story
name='negative'
name="negative"
args={{
status: 'negative',
label: 'Negative'
@ -42,7 +42,7 @@ with unique URLs, which is great for review and testing.
<Canvas>
<Story
name='warning'
name="warning"
args={{
status: 'warning',
label: 'Warning'
@ -50,15 +50,17 @@ with unique URLs, which is great for review and testing.
{Template.bind({})}
</Story>
<Story name='neutral' args={{
status: 'neutral',
label: 'Neutral'
<Story
name="neutral"
args={{
status: 'neutral',
label: 'Neutral'
}}>
{Template.bind({})}
</Story>
<Story
name='error'
name="error"
args={{
status: 'error',
label: 'Error'
@ -67,7 +69,7 @@ with unique URLs, which is great for review and testing.
</Story>
<Story
name='with icon'
name="with icon"
args={{
status: 'warning',
label: (<Icon icon="check" inline /> with icon)

2
docs/snippets/react/button-story-component-args-primary.mdx.mdx
View File

@ -7,7 +7,7 @@ import { Button } from './Button';
<!-- 👇 Creates specific argTypes and turns all stories into primary -->
<Meta
title='Button'
title="Button"
component={Button}
argTypes={{
backgroundColor: {

2
docs/snippets/react/button-story-component-decorator.mdx.mdx
View File

@ -10,7 +10,7 @@ import { Button } from './Button';
component={Button}
decorators={[
(Story) => (
<div style={{ margin: "3em" }}>
<div style={{ margin: '3em' }}>
<Story />
</div>
),

2
docs/snippets/react/button-story-decorator.mdx.mdx
View File

@ -8,7 +8,7 @@ import { Story } from '@storybook/addon-docs';
args={{}}
decorators={[
(Story) => (
<div style={{ margin: "3em" }}>
<div style={{ margin: '3em' }}>
<Story />
</div>
),

6
docs/snippets/react/button-story-default-docs-code.mdx.mdx
View File

@ -11,7 +11,7 @@ import { Button } from './Button';
component={Button}
argTypes={{
backgroundColor: {
control: "color",
control: 'color',
},
}}
/>
@ -26,8 +26,8 @@ export const someFunction = (someValue) => {
name="ExampleStory"
args={{
primary: true,
size: "small",
label: "button",
size: 'small',
label: 'button',
}}
>
{(args) => {

4
docs/snippets/react/button-story-with-args.mdx.mdx
View File

@ -5,12 +5,12 @@ import { Meta, Story } from '@storybook/addon-docs';
import { Button } from './Button';
<Meta title='Components/Button' component={Button} />
<Meta title="Components/Button" component={Button} />
export const Template = (args) => <Button {...args} />;
<Story
name='Primary'
name="Primary"
args={{
primary: true,
label: 'Button',

2
docs/snippets/react/button-story-with-blue-args.mdx.mdx
View File

@ -7,7 +7,7 @@ import { Button } from './Button';
<!-- 👇 Creates specific parameters for the story -->
<Meta
title='Components/Button'
title="Components/Button"
component={Button}
parameters={{
backgrounds: {

8
docs/snippets/react/button-story-with-emojis.mdx.mdx
View File

@ -5,20 +5,20 @@ import { Meta, Story } from '@storybook/addon-docs';
import { Button } from './Button';
<Meta title='Components/Button' component={Button}/>
<Meta title="Components/Button" component={Button}/>
<Story
name='Primary'>
name="Primary">
<Button background="#ff0" label="Button" />
</Story>
<Story
name='Secondary'>
name="Secondary">
<Button background="#ff0" label="😄👍😍💯" />
</Story>
<Story
name='Tertiary'>
name="Tertiary">
<Button background="#ff0" label="📚📕📈🤓" />
</Story>
```

4
docs/snippets/react/checkbox-story-starter-example.mdx.mdx
View File

@ -5,14 +5,14 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Checkbox } from './Checkbox';
<Meta title='MDX/Checkbox' component={Checkbox} />
<Meta title="MDX/Checkbox" component={Checkbox} />
# Checkbox
With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation.
<Canvas>
<Story name='all checkboxes'>
<Story name="all checkboxes">
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />

14
docs/snippets/react/checkbox-story.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Checkbox } from './Checkbox';
<Meta title='MDX/Checkbox' component={Checkbox} />
<Meta title="MDX/Checkbox" component={Checkbox} />
# Checkbox
@ -16,28 +16,28 @@ export const Template = (args) => <Checkbox {...args} />
<Canvas>
<Story
name='Unchecked'
name="Unchecked"
args={{
label: 'Unchecked'
label: 'Unchecked',
}}>
{Template.bind({})}
</Story>
<Story
name='Checked'
name="Checked"
args={{
label: 'Unchecked',
checked: true
checked: true,
}}>
{Template.bind({})}
</Story>
<Story
name='Secondary'
name="Secondary"
args={{
label: 'Secondary',
checked: true,
appearance: 'secondary'
appearance: 'secondary',
}}>
{Template.bind({})}
</Story>

4
docs/snippets/react/component-story-custom-args-complex.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { YourComponent } from './your-component';
<Meta title='Example of how to use argTypes and functions' />
<Meta title="Example of how to use argTypes and functions" />
<!---👇 A function to apply some computations -->
@ -25,7 +25,7 @@ const someFunctionResult = someFunction(propertyA, propertyB);
<Canvas>
<Story
name='A complex case with a function'
name="A complex case with a function"
argTypes={{
propertyA: {
options: [

2
docs/snippets/react/component-story-mdx-story-by-name.mdx.mdx
View File

@ -7,7 +7,7 @@ import { Button } from './Button';
export const Template = (args) => <Button {...args} />;
<Story name='Basic' args={{ label: 'hello' }}>
<Story name="Basic" args={{ label: 'hello' }}>
{Template.bind({})}
</Story>
```

4
docs/snippets/react/component-story-static-asset-cdn.mdx.mdx
View File

@ -3,9 +3,9 @@
import { Meta, Story } from '@storybook/addon-docs';
<Meta title='img' />
<Meta title="img" />
<Story name='withAnImage'>
<Story name="withAnImage">
<img src="https://place-hold.it/350x150" alt="My CDN placeholder" />
</Story>
```

4
docs/snippets/react/component-story-static-asset-with-import.mdx.mdx
View File

@ -5,14 +5,14 @@ import { Meta, Story } from '@storybook/addon-docs';
import imageFile from './static/image.png';
<Meta title='img' />
<Meta title="img" />
export const image = {
src: imageFile,
alt: 'my image',
};
<Story name='withAnImage'>
<Story name="withAnImage">
<img src={image.src} alt={image.alt} />;
</Story>
```

4
docs/snippets/react/component-story-static-asset-without-import.mdx.mdx
View File

@ -3,9 +3,9 @@
import { Meta, Story } from '@storybook/addon-docs';
<Meta title='img' />
<Meta title="img" />
<Story name='withAnImage'>
<Story name="withAnImage">
<img src="/image.png" alt="my image" />
</Story>
```

4
docs/snippets/react/loader-story.mdx.mdx
View File

@ -7,10 +7,10 @@ import fetch from 'node-fetch';
import { TodoItem } from './TodoItem';
<Meta title='Examples/Loader' component={TodoItem} />
<Meta title="Examples/Loader" component={TodoItem} />
<Story
name='Primary'
name="Primary"
loaders={[
async () => ({
todo: await (

12
docs/snippets/react/mdx-canvas-multiple-stories.mdx.mdx
View File

@ -7,28 +7,28 @@ export const Template = (args) => <Badge {...args } />;
<Canvas>
<Story
name='warning'
name="warning"
args={{
status: 'warning',
label: 'Warning'
label: 'Warning',
}}>
{Template.bind({})}
</Story>
<Story
name='neutral'
name="neutral"
args={{
status: 'neutral',
label: 'Neutral'
label: 'Neutral',
}}>
{Template.bind({})}
</Story>
<Story
name='error'
name="error"
args={{
status: 'error',
label: 'Error'
label: 'Error',
}}>
{Template.bind({})}
</Story>

8
docs/snippets/react/my-component-story-configure-viewports.mdx.mdx
View File

@ -6,20 +6,20 @@ import { Meta, Story } from '@storybook/addon-docs';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
<Meta
title='Stories'
title="Stories"
parameters={{
viewport: {
viewports: INITIAL_VIEWPORTS,
defaultViewport: 'iphone6'
defaultViewport: 'iphone6',
},
}}
/>
<Story
name='MyStory'
name="MyStory"
parameters={{
viewport: {
defaultViewport: 'iphonex'
defaultViewport: 'iphonex',
},
}}>
<div />

2
docs/snippets/react/my-component-story-use-globaltype.mdx.mdx
View File

@ -14,7 +14,7 @@ export const getCaptionForLocale = (locale) => {
}
};
<Story name='StoryWithLocale'>
<Story name="StoryWithLocale">
{(args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return <>{caption}</>;

7
docs/snippets/react/my-component-with-env-variables.mdx.mdx
View File

@ -5,15 +5,16 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import MyComponent from './MyComponent';
<Meta title='A MDX story using environment variables inside a .env file' />
<Meta title="A MDX story using environment variables inside a .env file" />
export const Template = (args) => <MyOtherComponent {...args} />
<Canvas>
<Story
name='A MDX story using environment variables inside a .env file'
name="A MDX story using environment variables inside a .env file"
args={{
propertyA: process.env.STORYBOOK_DATA_KEY}} >
propertyA: process.env.STORYBOOK_DATA_KEY,
}}>
{Template.bind({})}
</Story>
</Canvas>

6
docs/snippets/react/page-story-slots.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Page from './Page';
<Meta title='Page' component={Page} />
<Meta title="Page" component={Page} />
export const Template = (args) => (
<Page {...args}>
@ -14,9 +14,9 @@ export const Template = (args) => (
);
<Story
name='CustomFooter'
name="CustomFooter"
args={{
footer: 'Built with Storybook'
footer: 'Built with Storybook',
}}>
{Template.bind({})}
</Story>

2
docs/snippets/react/table-story-fully-customize-controls.mdx.mdx
View File

@ -12,7 +12,7 @@ export const TableStory = ({ data, ...args }) => (
);
<Story
name='Numeric'
name="Numeric"
args={{
data: [[1, 2, 3], [4, 5, 6]],
size: 'large',

4
docs/snippets/react/your-component-with-decorator.mdx.mdx
View File

@ -6,11 +6,11 @@ import { Meta } from '@storybook/addon-docs';
import { YourComponent } from './YourComponent';
<Meta
title='YourComponent'
title="YourComponent"
component={YourComponent}
decorators={[
(Story) => (
<div style={{ margin: "3em" }}>
<div style={{ margin: '3em' }}>
<Story />
</div>
),

2
docs/snippets/react/your-component.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import { YourComponent } from './YourComponent';
<!--👇 The title prop determines where your story goes in the story list -->
<Meta title='YourComponent' component={YourComponent} />
<Meta title="YourComponent" component={YourComponent} />
<!--👇 We create a “template” of how args map to rendering -->
export const Template = (args) => <YourComponent {...args} />;

2
docs/snippets/svelte/button-story-component-args-primary.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
<!-- 👇 Creates specific argTypes and turns all stories into primary -->
<Meta title='Button'
<Meta title="Button"
component={Button}
argTypes={{
backgroundColor: {

2
docs/snippets/svelte/button-story-component-decorator.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Story, Meta } from '@storybook/addon-docs';
import Button from './Button.svelte';
import MarginDecorator from './MarginDecorator.svelte';
<Meta title='Components/Button' component={Button} decorators={[() => MarginDecorator]}/>
<Meta title="Components/Button" component={Button} decorators={[() => MarginDecorator]}/>
<!-- Remainder story implementation -->
```

2
docs/snippets/svelte/button-story-decorator.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Story } from '@storybook/addon-docs';
import MarginDecorator from './MarginDecorator.svelte';
<Story
name='Primary'
name="Primary"
args={{}}
decorators={[() => MarginDecorator]}>
</Story>

7
docs/snippets/svelte/button-story-default-docs-code.mdx.mdx
View File

@ -7,7 +7,7 @@ import Button from './Button.svelte';
<!-- 👇 Creates specific argTypes -->
<Meta
title='Button'
title="Button"
component={Button}
argTypes={{
backgroundColor: {
@ -23,13 +23,12 @@ export const someFunction = (someValue) => {
<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
<Story
name='ExampleStory'
name="ExampleStory"
args={{
primary: true,
size: 'small',
label: "button",
}}
>
}}>
{(args) => {
const { label } = args;
const functionResult = someFunction(label);

4
docs/snippets/svelte/button-story-with-args.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
<Meta title='Components/Button' component={Button} />
<Meta title="Components/Button" component={Button} />
export const Template = (args) => ({
Component: Button,
@ -13,7 +13,7 @@ export const Template = (args) => ({
});
<Story
name='Primary'
name="Primary"
args={{
primary: true,
label: 'Button',

10
docs/snippets/svelte/button-story-with-emojis.mdx.mdx
View File

@ -5,10 +5,10 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.svelte';
<Meta title='Components/Button' component={Button} />
<Meta title="Components/Button" component={Button} />
<Story name='Primary'>
<Story name="Primary">
{{
props: {
background: '#ff0',
@ -17,8 +17,7 @@ import Button from './Button.svelte';
}}
</Story>
<Story name='Secondary'>
<Story name="Secondary">
{{
props: {
background: '#ff0',
@ -27,8 +26,7 @@ import Button from './Button.svelte';
}}
</Story>
<Story name='Tertiary'>
<Story name="Tertiary">
{{
props: {
background: '#ff0',

16
docs/snippets/svelte/checkbox-story.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Checkbox from './Checkbox.svelte';
<Meta title='MDX/Checkbox' component={Checkbox} />
<Meta title="MDX/Checkbox" component={Checkbox} />
# Checkbox
@ -18,27 +18,29 @@ export const Template = (args) => ({
});
<Canvas>
<Story name='Unchecked' args={{
label: 'Unchecked'
<Story
name="Unchecked"
args={{
label: 'Unchecked',
}}>
{Template.bind({})}
</Story>
<Story
name='Checked'
name="Checked"
args={{
label: 'Unchecked',
checked: true
checked: true,
}}>
{Template.bind({})}
</Story>
<Story
name='Secondary'
name="Secondary"
args={{
label: 'Secondary',
checked: true,
appearance: 'secondary'
appearance: 'secondary',
}}>
{Template.bind({})}
</Story>

2
docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx
View File

@ -10,7 +10,7 @@ export const Template = (args) => ({
props: args,
});
<Story name='Basic' args={{ label: 'hello' }}>
<Story name="Basic" args={{ label: 'hello' }}>
{Template.bind({})}
</Story>
```

4
docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx
View File

@ -7,14 +7,14 @@ import MyComponent from './MyComponent.svelte';
import imageFile from './static/image.png';
<Meta title='img' />
<Meta title="img" />
export const image = {
src: imageFile,
alt: 'my image',
};
<Story name='withAnImage'>
<Story name="withAnImage">
{() => {
return {
Component: MyComponent,

4
docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx
View File

@ -5,9 +5,9 @@ import { Meta, Story } from '@storybook/addon-docs';
import MyComponent from './MyComponent.svelte0;
<Meta title='img' />
<Meta title="img" />
<Story name='withAnImage'>
<Story name="withAnImage">
{() => {
return {
Component: MyComponent,

4
docs/snippets/svelte/loader-story.mdx.mdx
View File

@ -7,10 +7,10 @@ import TodoItem from './TodoItem.svelte';
import fetch from 'node-fetch';
<Meta title='Examples/Loader' component={TodoItem} />
<Meta title="Examples/Loader" component={TodoItem} />
<Story
name='Primary'
name="Primary"
loaders={[
async () => ({
todo: await (

12
docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
View File

@ -10,28 +10,28 @@ export const Template = (args) => ({
<Canvas>
<Story
name='warning'
name="warning"
args={{
status: 'warning',
label: 'Warning'
label: 'Warning',
}}>
{Template.bind({})}
</Story>
<Story
name='neutral'
name="neutral"
args={{
status: 'neutral',
label: 'Neutral'
label: 'Neutral',
}}>
{Template.bind({})}
</Story>
<Story
name='error'
name="error"
args={{
status: 'error',
label: 'Error'
label: 'Error',
}}>
{Template.bind({})}
</Story>

4
docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
View File

@ -8,7 +8,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import MyComponent from './MyComponent.svelte';
<Meta
title='Stories'
title="Stories"
parameters={{
viewport: {
viewports: INITIAL_VIEWPORTS,
@ -18,7 +18,7 @@ import MyComponent from './MyComponent.svelte';
/>
<Story
name='MyStory'
name="MyStory"
parameters={{
viewport: {
defaultViewport: 'iphonex',

2
docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
View File

@ -14,7 +14,7 @@ export const getCaptionForLocale = (locale) => {
}
};
<Story name='StoryWithLocale'>
<Story name="StoryWithLocale">
{(args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {

4
docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import MyComponent from './MyComponent.svelte';
<Meta title='A MDX story using environment variables inside a .env file' component={MyComponent}/>
<Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
export const Template = (args) => ({
Component: MyComponent,
@ -14,7 +14,7 @@ export const Template = (args) => ({
<Canvas>
<Story
name='A MDX story using environment variables inside a .env file'
name="A MDX story using environment variables inside a .env file"
args={{
propertyA: process.env.STORYBOOK_DATA_KEY,
}}

2
docs/snippets/svelte/your-component-with-decorator.mdx.mdx
View File

@ -7,7 +7,7 @@ import YourComponent from './YourComponent.svelte';
import MarginDecorator from './MarginDecorator.svelte';
<Meta
title='YourComponent'
title="YourComponent"
component={YourComponent}
decorators={[() => MarginDecorator]}/>
```

4
docs/snippets/svelte/your-component.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import YourComponent from './YourComponent.svelte';
<!--👇 The title prop determines where your story goes in the story list -->
<Meta title='YourComponent' component={YourComponent} />
<Meta title="YourComponent" component={YourComponent} />
<!--👇 We create a “template” of how args map to rendering -->
export const Template = (args) => ({
@ -16,7 +16,7 @@ export const Template = (args) => ({
<!-- 👇 The args you need here will depend on your component -->
<Story
name='FirstStory'
name="FirstStory"
args={{}}>
{Template.bind({})}
</Story>

14
docs/snippets/vue/badge-story-starter-example.mdx.mdx
View File

@ -6,13 +6,13 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Badge from './Badge.vue';
import Icon from './Icon.vue';
<Meta title='MDX/Badge' component={Badge} />
<Meta title="MDX/Badge" component={Badge} />
# Badge
Let's define a story for our `Badge` component:
<Story name='positive'>
<Story name="positive">
{() => {
return {
components: { Badge },
@ -24,7 +24,7 @@ Let's define a story for our `Badge` component:
We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story name='negative'>
<Story name="negative">
{() => {
return {
components: { Badge },
@ -39,7 +39,7 @@ gets rendered as a group, but defines individual stories
with unique URLs and isolated snapshot tests.
<Canvas>
<Story name='warning'>
<Story name="warning">
{() => {
return {
components: { Badge },
@ -48,7 +48,7 @@ with unique URLs and isolated snapshot tests.
}}
</Story>
<Story name='neutral'>
<Story name="neutral">
{() => {
return {
components: { Badge },
@ -57,7 +57,7 @@ with unique URLs and isolated snapshot tests.
}}
</Story>
<Story name='error'>
<Story name="error">
{() => {
return {
components: { Badge },
@ -66,7 +66,7 @@ with unique URLs and isolated snapshot tests.
}}
</Story>
<Story name='with icon'>
<Story name="with icon">
{() => {
return {
components: { Badge, Icon },

12
docs/snippets/vue/badge-story.mdx-2.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Badge } from './Badge.vue';
<Meta title='MDX/Badge' component={Badge} />
<Meta title="MDX/Badge" component={Badge} />
export const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
@ -19,7 +19,7 @@ export const Template = (args, { argTypes }) => ({
Let's define a story for our `Badge` component:
<Story
name='positive'
name="positive"
args={{
status: 'positive',
label: 'Positive',
@ -31,7 +31,7 @@ We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story
name='negative'
name="negative"
args={{
status: 'negative',
label: 'Negative',
@ -46,7 +46,7 @@ with unique URLs, which is great for review and testing.
<Canvas>
<Story
name='warning'
name="warning"
args={{
status: 'warning',
label: 'Warning',
@ -55,7 +55,7 @@ with unique URLs, which is great for review and testing.
</Story>
<Story
name='neutral'
name="neutral"
args={{
status: 'neutral',
label: 'Neutral',
@ -64,7 +64,7 @@ with unique URLs, which is great for review and testing.
</Story>
<Story
name='error'
name="error"
args={{
status: 'error',
label: 'Error',

20
docs/snippets/vue/badge-story.mdx-3.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { Badge } from './Badge.vue';
<Meta title='MDX/Badge' component={Badge} />
<Meta title="MDX/Badge" component={Badge} />
export const Template = (args) => ({
components: { Badge },
@ -20,7 +20,7 @@ export const Template = (args) => ({
Let's define a story for our `Badge` component:
<Story
name='positive'
name="positive"
args={{
status: 'positive',
label: 'Positive'
@ -32,10 +32,10 @@ We can drop it in a `Canvas` to get a code snippet:
<Canvas>
<Story
name='negative'
name="negative"
args={{
status: 'negative',
label: 'Negative'
label: 'Negative',
}}>
{Template.bind({})}
</Story>
@ -47,26 +47,26 @@ with unique URLs, which is great for review and testing.
<Canvas>
<Story
name='warning'
name="warning"
args={{
status: 'warning',
label: 'Warning'
label: 'Warning',
}}>
{Template.bind({})}
</Story>
<Story
name='neutral'
name="neutral"
args={{
status: 'neutral',
label: 'Neutral'
label: 'Neutral',
}}>
{Template.bind({})}
</Story>
<Story
name='error'
name="error"
args={{
status: 'error',
label: 'Error'
label: 'Error',
}}>
{Template.bind({})}
</Story>

2
docs/snippets/vue/button-story-component-args-primary.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
<!-- 👇 Creates specific argTypes and turns all stories into primary -->
<Meta title='Button'
<Meta title="Button"
component={Button}
argTypes={{
backgroundColor: {

2
docs/snippets/vue/button-story-component-decorator.mdx.mdx
View File

@ -4,7 +4,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
<Meta
title='Components/Button'
title="Components/Button"
component={Button}
decorators={[
() => ({

4
docs/snippets/vue/button-story-decorator.mdx.mdx
View File

@ -6,7 +6,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
<Meta
title='Components/Button'
title="Components/Button"
component={Button}/>
export const Template = () => ({
@ -15,7 +15,7 @@ export const Template = () => ({
});
<Story
name='Primary'
name="Primary"
decorators={[
() => ({
template: '<div style="margin: 3em;"><story /></div>',

9
docs/snippets/vue/button-story-default-docs-code.mdx-3.mdx.mdx
View File

@ -7,11 +7,11 @@ import Button from './Button.vue';
<!-- 👇 Creates specific argTypes -->
<Meta
title='Button'
title="Button"
component={Button}
argTypes={{
backgroundColor: {
control: "color",
control: 'color',
},
}}
/>
@ -23,13 +23,12 @@ export const someFunction = (someValue) => {
<!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
<Story
name='ExampleStory'
name="ExampleStory"
args={{
primary: true,
size: 'small',
label: 'button',
}}
>
}} >
{(args) => {
const functionResult = someFunction(args.label);
return {

6
docs/snippets/vue/button-story-with-args.mdx-2.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
<Meta title='Components/Button' component={Button} />
<Meta title="Components/Button" component={Button} />
export const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
@ -14,10 +14,10 @@ export const Template = (args, { argTypes }) => ({
});
<Story
name='Primary'
name="Primary"
args={{
primary: true,
label: "Button",
label: 'Button',
}}>
{Template.bind({})}
</Story>

4
docs/snippets/vue/button-story-with-args.mdx-3.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story } from "@storybook/addon-docs";
import Button from './Button.vue';
<Meta title='Components/Button' component={MyButton}/>
<Meta title="Components/Button" component={Button}/>
export const Template = (args) => ({
components: { Button },
@ -16,7 +16,7 @@ export const Template = (args) => ({
});
<Story
name='Primary'
name="Primary"
args={{
primary: true,
label: 'Button',

4
docs/snippets/vue/button-story-with-blue-args.mdx.mdx
View File

@ -3,11 +3,11 @@
import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
import Button from './Button.vue';
<!-- 👇 Creates specific parameters for the story -->
<Meta
title='Components/Button'
title="Components/Button"
component={Button}
parameters={{
backgrounds: {

8
docs/snippets/vue/button-story-with-emojis.mdx.mdx
View File

@ -5,9 +5,9 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
<Meta title='Components/Button' component={Button}/>
<Meta title="Components/Button" component={Button}/>
<Story name='Primary'>
<Story name="Primary">
{() => {
return {
components: { Button },
@ -17,7 +17,7 @@ import Button from './Button.vue';
</Story>
<Story
name='Secondary'>
name="Secondary">
{() => {
return {
components: { Button },
@ -27,7 +27,7 @@ import Button from './Button.vue';
</Story>
<Story
name='Tertiary'>
name="Tertiary">
{() => {
return {
components: { Button },

4
docs/snippets/vue/button-story.mdx.mdx
View File

@ -5,11 +5,11 @@ import { Meta, Story } from '@storybook/addon-docs';
import Button from './Button.vue';
<Meta title='Components/Button' component={Button} />
<Meta title="Components/Button" component={Button} />
# Button
<Story name='Primary'>
<Story name="Primary">
{() => {
return {
components: { Button },

23
docs/snippets/vue/checkbox-story-starter-example.mdx.mdx
View File

@ -2,26 +2,27 @@
<!--- Checkbox.stories.mdx --->
import { Meta, Story, Canvas } from '@storybook/addon-docs';
import Checkbox from './Checkbox.vue';
<Meta title='MDX/Checkbox' component={Checkbox} />
<Meta title="MDX/Checkbox" component={Checkbox} />
# Checkbox
With `MDX`, we can define a story for `Checkbox` right in the middle of our Markdown documentation.
<Canvas>
<Story name='all checkboxes'>
<Story name="all checkboxes">
{()=>{
return {
components: { Checkbox },
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>`,
};
return {
components: { Checkbox },
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>`,
};
}}
</Story>
</Canvas>

2
docs/snippets/vue/component-story-custom-args-complex.mdx-3.mdx.mdx
View File

@ -5,7 +5,7 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs';
import YourComponent from './YourComponent.vue';
<Meta title='Example of how to use argTypes and functions' component={YourComponent}/>
<Meta title="Example of how to use argTypes and functions" component={YourComponent}/>
<!---👇 A function to apply some computations -->

Some files were not shown because too many files have changed in this diff Show More