GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 14:11:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Angular CSF 3 snippets

Browse Source
This commit is contained in:
jonniebigodes 2022-07-07 19:05:48 +01:00
parent 393f84aa1c
commit fa0e4e1231
93 changed files with 1286 additions and 1229 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
docs/snippets/angular/app-story-with-mock.ts.mdx
View File

@ -1,37 +1,39 @@
```ts
// App.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { AppComponent } from './app.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'App',
component: AppComponent,
} as Meta;
const Template: Story = () => ({
props: {},
});
export const Success = Template.bind({});
Success.parameters = {
fetch: {
json: {
JavaScript: 3390991,
'C++': 44974,
TypeScript: 15530,
CoffeeScript: 12253,
Python: 9383,
C: 5341,
Shell: 5115,
HTML: 3420,
CSS: 3171,
Makefile: 189,
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Success: Story = {
parameters: {
fetch: {
json: {
JavaScript: 3390991,
'C++': 44974,
TypeScript: 15530,
CoffeeScript: 12253,
Python: 9383,
C: 5341,
Shell: 5115,
HTML: 3420,
CSS: 3171,
Makefile: 189,
},
},
},
};

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

@ -12,24 +12,30 @@ import { Icon } from './icon.component';
<Meta title="MDX/Badge" component={Badge} />
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
# Badge
Let's define a story for our `Badge` component:
<Story name="positive">
{{
<Story
name="positive"
render={() => ({
template:`<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"
render={() => ({
template: `<Badge status="negative">Negative</Badge>`,
}}
</Story>
})} />
</Canvas>
We can even preview multiple stories in a block. This
@ -37,37 +43,36 @@ gets rendered as a group, but defines individual stories
with unique URLs and isolated snapshot tests.
<Canvas>
<Story name="warning">
{{
template: `<Badge status="warning">Warning</Badge>`,
}}
</Story>
<Story name="neutral">
{{
template: `<Badge status="neutral">Neutral</Badge>`,
}}
</Story>
<Story name="error">
{{
template: `<Badge status="error">Error</Badge>`,
}}
</Story>
<Story
name="warning"
render={() => ({
template: `<Badge status="warning">Warning</Badge>`,
})} />
<Story
name="neutral"
render={() => ({
template: `<Badge status="neutral">Neutral</Badge>`,
})} />
<Story
name="error"
render={() => ({
template: `<Badge status="error">Error</Badge>`,
})} />
<Story
name="with icon"
decorators={[
moduleMetadata({
declarations: [Badge, Icon],
imports: [CommonModule],
declarations: [Badge, Icon],
imports: [CommonModule],
})
]}>
{{
]}
render={() => ({
template: `
<Badge status="warning">
<Icon icon="check" inline></Icon>
with icon
</Badge>
`,
}}
</Story>
})} />
</Canvas>
```

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

@ -7,7 +7,11 @@ import { Badge } from './badge.component';
<Meta title="MDX/Badge" component={Badge} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
# Badge
@ -17,10 +21,11 @@ Let's define a story for our `Badge` component:
name="positive"
args={{
status: 'positive',
label: 'Positive'
}}>
{Template.bind({})}
</Story>
label: 'Positive',
}}
render={(args) => ({
props: args,
})} />
We can drop it in a `Canvas` to get a code snippet:
@ -28,11 +33,12 @@ We can drop it in a `Canvas` to get a code snippet:
<Story
name="negative"
args={{
status: 'negative',
label: 'Negative'
}}>
{Template.bind({})}
</Story>
status: 'negative',
label: 'Negative',
}}
render={(args) => ({
props: args,
})} />
</Canvas>
We can even preview multiple Stories in a block. This
@ -41,36 +47,31 @@ with unique URLs, which is great for review and testing.
<Canvas>
<Story
name="warning"
name="warning"
args={{
status: 'warning',
label: 'Warning'
}}>
{Template.bind({})}
</Story>
label: 'Warning',
}}
render={(args) => ({
props: args,
})} />
<Story
name="neutral"
name="neutral"
args={{
status: 'neutral',
label: 'Neutral'
}}>
{Template.bind({})}
</Story>
label: 'Neutral',
}}
render={(args) => ({
props: args,
})} />
<Story
name="error"
args={{
status: 'error',
label: 'Error'
}}>
{Template.bind({})}
</Story>
<Story
name="with icon"
args={{
status: 'warning',
label: (<Icon icon="check" inline /> with icon)
)}}>
{Template.bind({})}
</Story>
label: 'Error',
}}
render={(args) => ({
props: args,
})} />
</Canvas>
```
```

2
docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx
View File

@ -1,6 +1,6 @@
```shell
# Builds Storybook with Angular's custom builder
# See https://storybook.js.org/docs/angular/get-started/install
# See https://storybook.js.org/docs/7.0/angular/get-started/install
# to learn how to create the custom builder
ng run my-project:build-storybook
```

27
docs/snippets/angular/button-group-story.ts.mdx
View File

@ -13,9 +13,9 @@ import * as ButtonStories from './Button.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
*/
title: 'ButtonGroup',
component: ButtonGroup,
decorators: [
@ -26,16 +26,15 @@ export default {
],
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const Pair = Template.bind({});
Pair.args = {
buttons: [
{ ...ButtonStories.Primary.args },
{ ...ButtonStories.Secondary.args },
],
orientation: 'horizontal',
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Pair: Story = {
args: {
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
},
};
```
```

25
docs/snippets/angular/button-story-click-handler-args.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { action } from '@storybook/addon-actions';
@ -9,22 +9,21 @@ import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;
export const Text: Story = ({ label, onClick }) => ({
props: {
label,
onClick,
export const Text: Story = {
render: (args) => ({
props: args,
template: `<storybook-button [label]="label" (onClick)="onClick()"></storybook-button>`,
}),
args: {
label: 'Hello',
onClick: action('clicked'),
},
});
Text.args = {
label: 'Hello',
onClick: action('clicked'),
};
```

14
docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx
View File

@ -1,20 +1,20 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;
export const Text: Story = (args) => ({
props: args,
});
export const Text: Story = {
args: {...},
};
```

24
docs/snippets/angular/button-story-click-handler.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Button } from './button.component';
@ -9,17 +9,19 @@ import { action } from '@storybook/addon-actions';
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',
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;
export const Text: Story = () => ({
props: {
text: 'Hello Button',
onClick: action('clicked'),
},
});
export const Text: Story = {
render: () => ({
props: {
label: 'Button',
onClick: action('clicked'),
},
}),
};
```

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

@ -1,15 +1,15 @@
```ts
// Button.stories.ts
import { Meta } from '@storybook/angular';
import type { Meta } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
//👇 Creates specific argTypes

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

@ -9,9 +9,9 @@ import { Parent } from './parent.component'; // Parent contains ng-content
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
decorators: [

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

@ -13,18 +13,15 @@ import { Parent } from './parent.component';
<Meta title="Button" component={Button}/>
export const Template = () => ({
template: `<app-button label="Submit"></app-button>`,
});
<!-- With a template -->
<Story
name="Primary"
decorators={[
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)
]} >
{Template.bind({})}
]}
render={() => ({
template: `<app-button label="Submit"></app-button>`,
})} />
</Story>
<!-- With a component -->
@ -36,7 +33,9 @@ export const Template = () => ({
declarations: [ParentComponent],
}),
componentWrapperDecorator(ParentComponent)
]} >
{Template.bind({})}
]}
render={() => ({
template: `<app-button label="Submit"></app-button>`,
})} />
</Story>
```

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

@ -8,31 +8,23 @@ import { Parent } from './parent.component'; // Parent contains ng-content
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;
const Template: Story = (args) => ({
template: '<app-button label="Submit"></app-button>',
});
export const Primary = Template.bind({});
Primary.decorators = [
componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`),
];
export const Primary = {
export const Primary: Story = {
decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],
};
export const InsideParent= Template.bind({});
InsideParent.decorators = [
moduleMetadata({
declarations: [Parent],
}),
componentWrapperDecorator(Parent),
];
export const InsideParent: Story = {
decorators: [
moduleMetadata({
declarations: [Parent],
}),
componentWrapperDecorator(Parent),
],
};
```

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

@ -1,43 +0,0 @@
```md
<!-- Button.stories.mdx -->
import { Meta, Story } from '@storybook/addon-docs';
import { Button } from './button.component';
<!-- 👇 Creates specific argTypes -->
<Meta
title="Button"
component={Button}
argTypes={{
backgroundColor: {
control: 'color',
},
}}
/>
<!-- 👇 Some function to demonstrate the behavior -->
export const someFunction = (someValue) => {
return `i am a ${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"
args={{
primary: true,
size: 'small',
label: 'button',
}}>
{(args) => {
const { label } = args;
const functionResult = someFunction(label);
return {
props: {
...args,
label: functionResult,
},
};
}}
</Story>
```

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

@ -1,45 +0,0 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import { Button } from './button.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: 'Button',
component: Button,
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
} as Meta;
//👇 Some function to demonstrate the behavior
const someFunction = (someValue: string) => {
return `i am a ${someValue}`;
};
export const ExampleStory: Story = (args) => {
//👇 Destructure the label from the args object
const { label } = args;
//👇 Assigns the function result to a variable and pass it as a prop into the component
const functionResult = someFunction(label);
return {
props: {
...args,
label: functionResult,
},
};
};
ExampleStory.args = {
primary: true,
size: 'small',
label: 'button',
};
```

8
docs/snippets/angular/button-story-default-export-with-component.ts.mdx
View File

@ -1,15 +1,15 @@
```ts
// Button.stories.ts
import { Meta } from '@storybook/angular';
import type { Meta } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;

31
docs/snippets/angular/button-story-rename-story.ts.mdx
View File

@ -1,26 +1,31 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;
export const Primary: Story = () => ({
props: {
label: 'Button',
primary: true,
},
});
Primary.storyName = 'I am the primary';
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
name: 'I am the primary',
render: () => ({
props: {
label: 'Button',
primary: true,
},
}),
};
```

43
docs/snippets/angular/button-story-using-args.ts.mdx
View File

@ -1,45 +1,42 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;
//👇 We create a “template” of how args map to rendering
const Template: Story = (args) => ({
props: args,
});
// 👇 Each story then reuses that template
export const Primary= Template.bind({});
Primary.args = {
label: 'Button',
backgroundColor: '#ff0',
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
args: {
label: 'Button',
backgroundColor: '#ff0',
},
};
export const Secondary= Template.bind({});
Secondary.args = {
export const Secondary: Story = {
args: {
...Primary.args,
label: '😄👍😍💯',
},
};
export const Tertiary= Template.bind({});
Tertiary.args={
...Primary.args,
label: '📚📕📈🤓',
export const Tertiary: Story = {
args: {
...Primary.args,
label: '📚📕📈🤓',
},
};
```

21
docs/snippets/angular/button-story-with-addon-example.ts.mdx
View File

@ -1,15 +1,15 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
//👇 Creates specific parameters for the story
@ -20,7 +20,14 @@ export default {
},
} as Meta;
export const Basic: Story = () => ({
template: `<app-button>hello</<app-button>`,
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Basic: Story = {
render: () => ({
template: `<app-button>hello</<app-button>`,
}),
};
```

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

@ -7,16 +7,19 @@ import { Button } from './button.component';
<Meta title="Button" component={Button} />
<!-- 👇 We create a “template” of how args map to rendering -->
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<!-- 👇 Each story then reuses that template -->
<Story
name="Primary"
args={{
primary: true,
label: 'Button',
}} >
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

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

@ -1,29 +1,28 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular/';
import type { Meta, Story } from '@storybook/angular/';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;
//👇 We create a “template” of how args map to rendering
const Template: Story = (args) => ({
props: args,
});
//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
args: {
primary: true,
label: 'Button',
},
};
```

8
docs/snippets/angular/button-story-with-blue-args.ts.mdx
View File

@ -1,15 +1,15 @@
```ts
// Button.stories.ts
import { Meta } from '@storybook/angular';
import type { Meta } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
//👇 Creates specific parameters for the story

38
docs/snippets/angular/button-story-with-emojis.mdx.mdx
View File

@ -7,30 +7,34 @@ import { Button } from './button.component';
<Meta title="Button" component={Button}/>
<Story name="Primary">
{{
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="Primary"
render={() => ({
props: {
background: '#ff0',
backgroundColor: '#ff0',
label: 'Button',
},
}}
</Story>
<Story name="Secondary">
{{
})} />
<Story
name="Secondary"
render={() => ({
props: {
background: '#ff0',
backgroundColor: '#ff0',
label: '😄👍😍💯',
},
}}
</Story>
<Story name="Tertiary">
{{
})} />
<Story
name="Tertiary"
render={() => ({
props: {
background: '#ff0',
backgroundColor: '#ff0',
label: '📚📕📈🤓',
},
}}
</Story>
})} />
```

56
docs/snippets/angular/button-story-with-emojis.ts.mdx
View File

@ -1,38 +1,48 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
};
export const Primary: Story = () => ({
props: {
label: 'Button',
backgroundColor: '#ff0',
},
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: () => ({
props: {
label: 'Button',
backgroundColor: '#ff0',
},
}),
};
export const Secondary: Story = {
render: () => ({
props: {
label: '😄👍😍💯',
backgroundColor: '#ff0',
},
}),
};
export const Secondary: Story = () => ({
props: {
label: '😄👍😍💯',
backgroundColor: '#ff0',
},
});
export const Tertiary: Story = () => ({
props: {
label: '📚📕📈🤓',
backgroundColor: '#ff0',
},
});
export const Tertiary: Story = {
render: () => ({
props: {
label: '📚📕📈🤓',
backgroundColor: '#ff0',
},
}),
};
```

8
docs/snippets/angular/button-story-with-parameters.ts.mdx
View File

@ -1,15 +1,15 @@
```ts
// Button.stories.ts
import { Meta } from '@storybook/angular';
import type { Meta } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
parameters: {

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

@ -9,12 +9,12 @@ import { Button } from './button.component.ts';
# Button
<Story name="Primary">
{{
<Story
name="Primary"
render={() => ({
props: {
primary: true,
label: 'Button',
},
}}
</Story>
})} />
```

27
docs/snippets/angular/button-story.ts.mdx
View File

@ -1,23 +1,30 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Button } from './button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Button',
component: Button,
} as Meta;
export const Primary: Story = () => ({
props: {
label: 'Button',
primary: true,
},
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: () => ({
props: {
label: 'Button',
primary: true,
},
}),
};
```

35
docs/snippets/angular/checkbox-story-csf.ts.mdx
View File

@ -1,26 +1,33 @@
```ts
// Checkbox.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Checkbox } from './Checkbox.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: 'Checkbox',
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Checkbox',
component: Checkbox,
} as Meta;
export const allCheckboxes: Story = () => ({
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>
`,
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const allCheckboxes: Story = {
render: () => ({
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>
`,
}),
};
```

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

@ -7,18 +7,23 @@ import { Checkbox } from './checkbox.component';
<Meta title="MDX/Checkbox" component={Checkbox} />
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Canvas>
<Story
name="all checkboxes">
{{
name="MyStory"
render={() => ({
template: `
<form>
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>
`,
}}
<Checkbox id="Unchecked" label="Unchecked" />
<Checkbox id="Checked" label="Checked" checked />
<Checkbox appearance="secondary" id="second" label="Secondary" checked />
</form>`,
})} >
</Story>
</Canvas>
```

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

@ -7,7 +7,11 @@ import { Checkbox } from './checkbox.component';
<Meta title="MDX/Checkbox" component={Checkbox} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
# Checkbox
@ -19,27 +23,28 @@ Markdown documentation.
name="Unchecked"
args={{
label: 'Unchecked',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
<Story
name="Checked"
args={{
label: 'Unchecked',
checked: true,
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
<Story
name="Secondary"
args={{
label: 'Secondary',
checked: true,
appearance: 'secondary',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
</Canvas>
```

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

@ -15,22 +15,9 @@ export const someFunction = (valuePropertyA, valuePropertyB) => {
};
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,
},
};
};
<Canvas>
<Story
name="ExampleStory"
name="A complex case with a function"
argTypes={{
propertyA: {
options: [
@ -50,8 +37,16 @@ export const Template = (args) => {
args={{
propertyA: 'Item One',
propertyB: 'Another Item One',
}}>
{Template.bind({})}
</Story>
</Canvas
}}
render={(args) => {
const { propertyA, propertyB } = args;
const someFunctionResult = someFunction(propertyA, propertyB);
return {
props: {
...args,
someProperty: someFunctionResult,
},
};
}} />
</Canvas>
```

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

@ -1,15 +1,15 @@
```ts
// YourComponent.stories.ts
import { Meta, Story} from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { YourComponent } from './your-component.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
component: YourComponent,
//👇 Creates specific argTypes with options
@ -29,23 +29,23 @@ const someFunction = (valuePropertyA: String, valuePropertyB: String) => {
// Makes some computations and returns something
};
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',
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const ExampleStory: Story = {
render: (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' },
};
```

12
docs/snippets/angular/component-story-figma-integration.mdx.mdx
View File

@ -9,7 +9,11 @@ import { MyComponent } from './MyComponent.component';
<Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
export const Template = () => ({ props: {} });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Canvas>
<Story
@ -20,8 +24,8 @@ export const Template = () => ({ props: {} });
url: 'https://www.figma.com/file/Sample-File',
},
}}
>
{Template.bind({})}
</Story>
render={(args) => ({
props: args,
})} />
</Canvas>
```

20
docs/snippets/angular/component-story-figma-integration.ts.mdx
View File

@ -1,29 +1,25 @@
```ts
// MyComponent.stories.ts
import { Story, Meta } from '@storybook/angular/';
import type { Story, Meta } from '@storybook/angular/';
import { withDesign } from 'storybook-addon-designs';
import { MyComponent } from './MyComponent.component';
// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
// More on default export: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction#default-export
export default {
title: 'FigmaExample',
component: MyComponent,
decorators: [withDesign],
} as Meta;
// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
const Template: Story = () => ({
props: {},
});
export const Example = Template.bind({});
Example.parameters = {
design: {
type: 'figma',
url: 'https://www.figma.com/file/Sample-File',
export const Example: Story = {
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/Sample-File',
},
},
};
```

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

@ -7,9 +7,18 @@ import { Button } from './button.component';
<Meta title="Button" component={Button} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story name="Basic" args={{ label: 'hello' }}>
{Template.bind({})}
</Story>
<Story
name="Basic"
args={{
label: 'hello'
}}
render={(args) => ({
props: args,
})} />
```

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

@ -8,13 +8,15 @@ import { MyComponent } from './MyComponent.component';
<Meta title="img" component={MyComponent}/>
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="WithAnImage">
{{
props: {
src: 'https://place-hold.it/350x150',
alt: 'My CDN placeholder',
},
}}
</Story>
name="WithAnImage"
render={() => ({
template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder" />`,
})} />
```

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

@ -1,24 +1,30 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'img',
component: MyComponent,
} as Meta;
export const WithAnImage: Story = () => ({
props: {
src: 'https://place-hold.it/350x150',
alt: 'My CDN placeholder',
},
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const WithAnImage: Story = {
render: () => ({
props: {
src: 'https://place-hold.it/350x150',
alt: 'My CDN placeholder',
},
}),
};
```

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

@ -9,18 +9,24 @@ import imageFile from './static/image.png';
<Meta title="img" component={MyComponent}/>
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
export const image = {
src: imageFile,
alt: 'my image',
};
<Story name="WithAnImage">
{{
<Story
name="WithAnImage"
render={() => ({
props: {
src: image.src,
alt: image.alt,
},
template: `<img src="{{src}}" alt="{{alt}}" />`,
}}
</Story>
})} />
```

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

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
@ -9,9 +9,9 @@ import imageFile from './static/image.png';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'img',
component: MyComponent,
} as Meta;
@ -21,11 +21,18 @@ const image = {
alt: 'my image',
};
export const WithAnImage: Story () => ({
template: `<img src="{{src}}" alt="{{alt}}" />`,
props: {
src: image.src,
alt: image.alt,
},
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const WithAnImage: Story = {
render: () => ({
props: {
src: image.src,
alt: image.alt,
},
template: `<img src="{{src}}" alt="{{alt}}" />`,
}),
};
```

12
docs/snippets/angular/component-story-static-asset-without-import.mdx.mdx
View File

@ -9,12 +9,8 @@ import { MyComponent } from './MyComponent.component';
<!-- Assume image.png is located in the "public" directory.-->
<Story
name="WithAnImage">
{{
props: {
src: '/image.png',
alt: 'my image',
},
}}
</Story>
name="withAnImage"
render={() => ({
template: `<img src="/otherimage.jpg" alt="my image"/>`,
})} />
```

22
docs/snippets/angular/component-story-static-asset-without-import.ts.mdx
View File

@ -1,24 +1,26 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'img',
component: MyComponent,
} as Meta;
// Assume image.png is located in the "public" directory.
export const WithAnImage: Story = () => ({
props: {
src: '/image.png',
alt: 'my image',
},
});
export const WithAnImage: Story = {
render: () => ({
props: {
src: '/image.png',
alt: 'my image',
},
}),
};
```

25
docs/snippets/angular/component-story-with-accessibility.mdx.mdx
View File

@ -16,28 +16,27 @@ import { Button } from './Button.component';
}
}} />
export const Template = (args) => ({ props: args });
## This is an accessible story
<Story
name="Accessible"
<Story
name="Accessible"
args={{
primary: false,
label: 'Button'
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
## This is not
<Story
name="Inaccessible"
<Story
name="Inaccessible"
args={{
primary: false,
label: 'Button',
backgroundColor: 'red'
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

31
docs/snippets/angular/component-story-with-accessibility.ts.mdx
View File

@ -1,14 +1,14 @@
```ts
// Button.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Button } from './Button.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading to learn how to generate automatic titles
*/
title: 'Accessibility testing',
component: Button,
argTypes: {
@ -16,19 +16,18 @@ export default {
},
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const Accessible: Story = Template.bind({});
Accessible.args = {
primary: false,
label: 'Button',
// This is an accessible story
export const Accessible: Story = {
args: {
primary: false,
label: 'Button',
},
};
export const Inaccessible: Story = Template.bind({});
Inaccessible.args = {
...Accessible.args,
backgroundColor: 'red',
// This is not
export const Inaccessible: Story = {
args: {
...Accessible.args,
backgroundColor: 'red',
},
};
```

41
docs/snippets/angular/component-story-with-custom-render-function.ts.mdx Normal file
View File

@ -0,0 +1,41 @@
```ts
// MyComponent.stories.ts
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { Layout } from './Layout.component';
import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
decorators: [
moduleMetadata({
declarations: [Layout],
imports: [CommonModule],
}),
],
} as Meta;
export const Example: Story = {
render: () => ({
template: `
<app-layout>
<header>
<h1>Example</h1>
</header>
<article>
<app-my-component></app-my-component>
</article>
</app-layout>
`,
}),
};
```

58
docs/snippets/angular/documentscreen-story-msw-graphql-query.ts.mdx
View File

@ -1,13 +1,11 @@
```ts
// YourPage.stories.ts
import { Meta, Story } from '@storybook/angular';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { graphql } from 'msw';
import { DocumentScreen } from './YourPage.component';
@ -19,9 +17,9 @@ import { MockGraphQLModule } from './mock-graphql.module';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'DocumentScreen',
component: DocumentScreen,
decorators: [
@ -81,32 +79,30 @@ const TestData = {
],
};
const PageTemplate: Story = () => ({
props: {},
});
export const MockedSuccess = PageTemplate.bind({});
MockedSuccess.parameters = {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(ctx.data(TestData));
}),
],
export const MockedSuccess: Story = {
parameters: {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(ctx.data(TestData));
}),
],
},
};
export const MockedError = PageTemplate.bind({});
MockedError.parameters = {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(
ctx.delay(800),
ctx.errors([
{
message: 'Access denied',
},
])
);
}),
],
export const MockedError: Story = {
parameters: {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
return res(
ctx.delay(800),
ctx.errors([
{
message: 'Access denied',
},
])
);
}),
],
},
};
```

44
docs/snippets/angular/documentscreen-story-msw-rest-request.ts.mdx
View File

@ -1,13 +1,11 @@
```ts
// YourPage.stories.ts
import { Meta, Story } from '@storybook/angular';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { Meta, moduleMetadata, Story } from '@storybook/angular';
import { rest } from 'msw';
import { DocumentScreen } from './YourPage.component';
@ -17,9 +15,9 @@ import { PageLayout } from './PageLayout.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'DocumentScreen',
component: DocumentScreen,
decorators: [
@ -79,25 +77,23 @@ const TestData = {
],
};
const PageTemplate: Story = () => ({
props: {},
});
export const MockedSuccess = PageTemplate.bind({});
MockedSuccess.parameters = {
msw: [
rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
return res(ctx.json(TestData));
}),
],
export const MockedSuccess: Story = {
parameters: {
msw: [
rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
return res(ctx.json(TestData));
}),
],
},
};
export const MockedError = PageTemplate.bind({});
MockedError.parameters = {
msw: [
rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
return res(ctx.delay(800), ctx.status(403));
}),
],
export const MockedError: Story = {
parameters: {
msw: [
rest.get('https://your-restful-endpoint', (_req, res, ctx) => {
return res(ctx.delay(800), ctx.status(403));
}),
],
},
};
```

24
docs/snippets/angular/form-story-component-with-play-function.ts.mdx
View File

@ -1,24 +0,0 @@
```ts
// Form.stories.ts
import { userEvent, within } from '@storybook/testing-library';
import { LoginForm } from './LoginForm.component';
export default {
component: LoginForm,
};
export const FilledForm = {
play: async ({ args, canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
await userEvent.type(canvas.getByTestId('email'), 'email');
await userEvent.type(canvas.getByTestId('password'), 'password');
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
},
};
```

53
docs/snippets/angular/list-story-expanded.ts.mdx
View File

@ -10,9 +10,9 @@ import { ListItem } from './list-item.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
decorators: [
@ -24,26 +24,33 @@ export default {
} as Meta;
// Always an empty list, not super interesting
export const Empty: Story = (args) => ({
props: args,
template: `<app-list></app-list>`,
});
export const Empty: Story = {
render: (args) => ({
props: args,
template: '<app-list></app-list>',
}),
};
export const OneItem: Story = (args) => ({
props: args,
template: `
<app-list>
<app-listitem></app-listitem>
</app-list>`,
});
export const OneItem: Story = {
render: (args) => ({
props: args,
template: `
<app-list>
<app-list-item></app-list-item>
</app-list>`,
}),
};
export const ManyItems: Story = (args) => ({
props: args,
template: `
<app-list>
<app-listitem></app-listitem>
<app-listitem></app-listitem>
<app-listitem></app-listitem>
</app-list>`,
});
export const ManyItems: Story = {
render: (args) => ({
props: args,
template: `
<app-list>
<app-list-item></app-list-item>
<app-list-item></app-list-item>
<app-list-item></app-list-item>
</app-list>
`,
}),
};
```

40
docs/snippets/angular/list-story-reuse-data.ts.mdx
View File

@ -13,9 +13,9 @@ import { Selected, Unselected } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
decorators: [
@ -26,19 +26,25 @@ export default {
],
} as Meta;
export const ManyItems: Story = (args) => ({
props: args,
template: `
<app-list>
<app-listitem [isSelected]="Selected"></app-listitem>
<app-listitem [isSelected]="Unselected"></app-listitem>
<app-listitem [isSelected]="Unselected"></app-listitem>
</app-list>
`,
});
ManyItems.args= {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const ManyItems: Story = {
args: {
Selected: Selected.args.isSelected,
Unselected: Unselected.args.isSelected,
},
render: (args) => ({
props: args,
template: `
<app-list>
<app-list-item [isSelected]="Selected"></app-list-item>
<app-list-item [isSelected]="Unselected"></app-list-item>
<app-list-item [isSelected]="Unselected"></app-list-item>
</app-list>
`,
}),
};
```

16
docs/snippets/angular/list-story-starter.ts.mdx
View File

@ -9,9 +9,9 @@ import { List } from './list.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
component: List,
decorators: [
moduleMetadata({
@ -22,8 +22,10 @@ export default {
} as Meta;
// Always an empty list, not super interesting
const Template: Story = (args) => ({
props: args,
template: `<app-list></app-list>`,
});
export const Empty: Story = {
render: (args) => ({
props: args,
template: `<app-list></app-list>`,
}),
};
```

54
docs/snippets/angular/list-story-template.ts.mdx
View File

@ -13,9 +13,9 @@ import { Unchecked } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
decorators: [
@ -26,29 +26,33 @@ export default {
],
} as Meta;
const ListTemplate: Story = (args) => ({
props: args,
template: `
<app-list>
<div *ngFor="let item of items">
<app-list-item [item]="item"></app-list-item>
</div>
</app-list>
`,
});
export const Empty = ListTemplate.bind({});
EmptyListTemplate.args = {
items: [],
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
const ListTemplate: Story = {
render: (args) => ({
props: args,
template: `
<app-list>
<div *ngFor="let item of items">
<app-list-item [item]="item"></app-list-item>
</div>
</app-list>
`,
}),
};
export const OneItem = ListTemplate.bind({});
OneItem.args = {
items: [
{
...Unchecked.args,
},
],
export const Empty: Story = {
...ListTemplate,
args: { items: [] },
};
export const OneItem: Story = {
...ListTemplate,
args: {
items: [{ ...Unchecked.args }],
},
};
```

35
docs/snippets/angular/list-story-unchecked.ts.mdx
View File

@ -13,9 +13,9 @@ import { Unchecked } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
decorators: [
@ -26,17 +26,22 @@ export default {
],
} as Meta;
export const OneItem: Story = (args) => ({
props: args,
template: `
<app-list>
<app-list-item [item]="item"></app-list-item>
</app-list>
`,
});
OneItem.args = {
...Unchecked.args,
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const OneItem: Story = {
render: (args) => ({
props: args,
template: `
<app-list>
<app-list-item [item]="item"></app-list-item>
</app-list>
`,
}),
args: {
...Unchecked.args,
},
};
```

36
docs/snippets/angular/list-story-with-subcomponents.ts.mdx
View File

@ -10,9 +10,9 @@ import { ListItem } from './list-item.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
@ -24,20 +24,22 @@ export default {
],
} as Meta;
export const Empty: Story = () => ({
props: {
args,
},
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Empty: Story = {};
export const OneItem: Story = () => ({
props: {
args,
},
template: `
<app-list>
<app-list-item></app-list-item>
</app-list>
export const OneItem: Story = {
args: {},
render: (args) => ({
props: args,
template: `
<app-list>
<app-list-item></app-list-item>
</app-list>
`,
});
}),
};
```

16
docs/snippets/angular/loader-story.mdx.mdx
View File

@ -9,6 +9,12 @@ import fetch from 'node-fetch';
<Meta title="Examples/Loader" component={TodoItem} />
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="Primary"
loaders={[
@ -17,11 +23,11 @@ import fetch from 'node-fetch';
await fetch('https://jsonplaceholder.typicode.com/todos/1')
).json(),
}),
]} >
{(args, { loaded: { todo } }) => ({
]}
render={(args, { loaded: { todo } }) => ({
props: {
todo: todo,
args,
todo,
},
})}
</Story>
})} />
```

28
docs/snippets/angular/loader-story.ts.mdx
View File

@ -11,9 +11,9 @@ import { TodoItem } from './TodoItem';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Examples/Loader',
component: TodoItem,
decorators: [
@ -24,18 +24,22 @@ export default {
],
} as Meta;
export const Primary = (args, { loaded: { todo } }) => {
return {
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Primary: Story = {
render: (args, { loaded: { todo } }) => ({
props: {
args,
todo,
},
};
};
Primary.loaders = [
async () => ({
todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
}),
];
loaders: [
async () => ({
todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
}),
],
};
```

28
docs/snippets/angular/login-form-with-play-function.mdx.mdx
View File

@ -11,16 +11,21 @@ import { LoginForm } from './LoginForm.component';
<Meta title="Form" component={LoginForm} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Canvas>
<Story name="Empty Form">
{Template.bind({})}
</Story>
<Story
name="Empty Form"
render={(args) => ({
props: args,
})} />
<Story
name="Filled Form"
play={async ({ canvasElement }) => {
play={ async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
@ -29,7 +34,7 @@ export const Template = (args) => ({ props: args });
await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
// 👇 Assert DOM structure
@ -38,8 +43,9 @@ export const Template = (args) => ({ props: args });
'Everything is perfect. Your account is ready and we should probably get you started!'
)
).toBeInTheDocument();
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
</Canvas>
```
```

46
docs/snippets/angular/login-form-with-play-function.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// LoginForm.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { userEvent, within } from '@storybook/testing-library';
@ -11,37 +11,35 @@ import { LoginForm } from './LoginForm.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Form',
component: LoginForm,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const EmptyForm: Story = Template.bind({});
export const EmptyForm: Story = {};
export const FilledForm: Story = Template.bind({});
FilledForm.play = async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
export const FilledForm: Story = {
play: async ({ canvasElement }) => {
// Starts querying the component from its root element
const canvas = within(canvasElement);
// 👇 Simulate interactions with the component
await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
// 👇 Simulate interactions with the component
await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
// See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(canvas.getByRole('button'));
// 👇 Assert DOM structure
await expect(
canvas.getByText(
'Everything is perfect. Your account is ready and we should probably get you started!'
)
).toBeInTheDocument();
// 👇 Assert DOM structure
await expect(
canvas.getByText(
'Everything is perfect. Your account is ready and we should probably get you started!'
)
).toBeInTheDocument();
},
};
```
```

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

@ -7,7 +7,11 @@ import { Badge } from './badge.component';
<Meta title="Badge" component={Badge} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Canvas>
<Story
@ -15,24 +19,27 @@ export const Template = (args) => ({ props: args });
args={{
status: 'warning',
label: 'Warning',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
<Story
name="neutral"
args={{
status: 'neutral',
label: 'Neutral',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
<Story
name="error"
args={{
status: 'error',
label: 'Error',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
</Canvas>
```

27
docs/snippets/angular/my-component-play-function-alt-queries.mdx.mdx
View File

@ -9,23 +9,28 @@ import { MyComponent } from './MyComponent.component';
<Meta title="QueryMethods" component={MyComponent} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="ExampleWithRole"
play={async () => {
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
play={ async () => {
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(screen.getByRole('button', { name: / button label/i }));
}} >
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
<Story
name="ExampleWithText"
play={async () => {
play={ async () => {
// The play function interacts with the component and looks for the text
await screen.findByText('example string');
}} >
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

31
docs/snippets/angular/my-component-play-function-alt-queries.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/addon-docs';
import type { Meta, Story } from '@storybook/addon-docs';
import { screen, userEvent } from '@storybook/testing-library';
@ -9,27 +9,24 @@ import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'QueryMethods',
component: MyComponent,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const ExampleWithRole: Story = Template.bind({});
ExampleWithRole.play = async () => {
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(screen.getByRole('button', { name: / button label/i }));
export const ExampleWithRole: Story = {
play: async () => {
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(screen.getByRole('button', { name: / button label/i }));
},
};
export const ExampleWithText: Story = Template.bind({});
ExampleWithText.play = async () => {
// The play function interacts with the component and looks for the text
await screen.findByText('example string');
export const ExampleWithText: Story = {
play: async () => {
// The play function interacts with the component and looks for the text
await screen.findByText('example string');
},
};
```

41
docs/snippets/angular/my-component-play-function-composition.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { screen, userEvent } from '@storybook/testing-library';
@ -9,32 +9,31 @@ import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
component: MyComponent,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const FirstStory: Story = Template.bind({});
FirstStory.play = async () => {
userEvent.type(screen.getByTestId('an-element'), 'example-value');
export const FirstStory: Story = {
play: async () => {
userEvent.type(screen.getByTestId('an-element'), 'example-value');
},
};
export const SecondStory: Story = Template.bind({});
SecondStory.play = async () => {
await userEvent.type(screen.getByTestId('other-element'), 'another value');
export const SecondStory: Story = {
play: async () => {
await userEvent.type(screen.getByTestId('other-element'), 'another value');
},
};
export const CombinedStories: Story = Template.bind({});
CombinedStories.play = async () => {
// Runs the FirstStory and Second story play function before running this story's play function
await FirstStory.play();
await SecondStory.play();
await userEvent.type(screen.getByTestId('another-element'), 'random value');
export const CombinedStories: Story = {
play: async () => {
// Runs the FirstStory and Second story play function before running this story's play function
await FirstStory.play();
await SecondStory.play();
await userEvent.type(screen.getByTestId('another-element'), 'random value');
},
};
```

19
docs/snippets/angular/my-component-play-function-waitfor.mdx.mdx
View File

@ -9,11 +9,15 @@ import { MyComponent } from './MyComponent.component';
<Meta title="WithAsync" component={MyComponent} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="ExampleAsyncStory"
play={async () => {
play={ async () => {
const Input = screen.getByLabelText('Username', {
selector: 'input',
});
@ -22,15 +26,16 @@ export const Template = (args) => ({ props: args });
delay: 100,
});
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
const Submit = screen.getByRole('button');
await userEvent.click(Submit);
await waitFor(async () => {
await userEvent.hover(screen.getByTestId('error'));
});
}} >
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

42
docs/snippets/angular/my-component-play-function-waitfor.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { screen, userEvent, waitFor } from '@storybook/testing-library';
@ -9,34 +9,30 @@ import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'WithAsync',
component: MyComponent,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const ExampleAsyncStory: Story = {
play: async () => {
const Input = screen.getByLabelText('Username', {
selector: 'input',
});
export const ExampleAsyncStory: Story = Template.bind({});
ExampleAsyncStory.play = async () => {
const Input = screen.getByLabelText('Username', {
selector: 'input',
});
await userEvent.type(Input, 'WrongInput', {
delay: 100,
});
await userEvent.type(Input, 'WrongInput', {
delay: 100,
});
// See https://storybook.js.org/docs/7.0/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
const Submit = screen.getByRole('button');
await userEvent.click(Submit);
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
const Submit = screen.getByRole('button');
await userEvent.click(Submit);
await waitFor(async () => {
await userEvent.hover(screen.getByTestId('error'));
});
await waitFor(async () => {
await userEvent.hover(screen.getByTestId('error'));
});
},
};
```

15
docs/snippets/angular/my-component-play-function-with-canvas.mdx.mdx
View File

@ -9,18 +9,23 @@ import { MyComponent } from './MyComponent.component';
<Meta title="WithCanvasElement" component={MyComponent} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="ExampleStory"
play={async ({ canvasElement }) => {
// Assigns canvas to the component root element
// Starts querying the component from its root element
const canvas = within(canvasElement);
// Starts querying from the component's root element
await userEvent.type(canvas.getByTestId('example-element'), 'something');
await userEvent.click(canvas.getByRole('another-element'));
}} >
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

27
docs/snippets/angular/my-component-play-function-with-canvas.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { getByRole, userEvent, within } from '@storybook/testing-library';
@ -9,24 +9,21 @@ import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'WithCanvasElement',
component: MyComponent,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const ExampleStory: Story = {
play: async ({ canvasElement }) => {
// Assigns canvas to the component root element
const canvas = within(canvasElement);
export const ExampleStory: Story = Template.bind({});
ExampleStory.play = async ({ canvasElement }) => {
// Assigns canvas to the component root element
const canvas = within(canvasElement);
// Starts querying from the component's root element
await userEvent.type(canvas.getByTestId('example-element'), 'something');
await userEvent.click(canvas.getByRole('another-element'));
// Starts querying from the component's root element
await userEvent.type(canvas.getByTestId('example-element'), 'something');
await userEvent.click(canvas.getByRole('another-element'));
},
};
```

27
docs/snippets/angular/my-component-play-function-with-clickevent.mdx.mdx
View File

@ -9,23 +9,28 @@ import { MyComponent } from './MyComponent.component';
<Meta title="ClickExamples" component={MyComponent} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="ClickExample"
play={async () => {
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
play={ async () => {
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(screen.getByRole('button'));
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
<Story
name="FireEventExample"
play={async () => {
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await fireEvent.click(screen.getByTestId('data-testid'));
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

30
docs/snippets/angular/my-component-play-function-with-clickevent.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { fireEvent, screen, userEvent } from '@storybook/testing-library';
@ -9,26 +9,24 @@ import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'ClickExamples',
component: MyComponent,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const ClickExample: Story = Template.bind({});
ClickExample.play = async () => {
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(screen.getByRole('button'));
export const ClickExample: Story = {
play: async () => {
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await userEvent.click(screen.getByRole('button'));
},
};
export const FireEventExample: Story = Template.bind({});
FireEventExample.play = async () => {
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await fireEvent.click(screen.getByTestId('data-testid'));
export const FireEventExample: Story = {
play: async () => {
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
await fireEvent.click(screen.getByTestId('data-testid'));
},
};
```

15
docs/snippets/angular/my-component-play-function-with-delay.mdx.mdx
View File

@ -9,11 +9,15 @@ import { MyComponent } from './MyComponent.component';
<Meta title="WithDelay" component={MyComponent} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="DelayedStory"
play={async () => {
play={ async () => {
const exampleElement= screen.getByLabelText('example-element');
// The delay option set the amount of milliseconds between characters being typed
@ -25,7 +29,8 @@ export const Template = (args) => ({ props: args });
await userEvent.type(AnotherExampleElement, 'another random string', {
delay: 100,
});
}} >
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

34
docs/snippets/angular/my-component-play-function-with-delay.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { screen, userEvent } from '@storybook/testing-library';
@ -9,28 +9,26 @@ import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'WithDelay',
component: MyComponent,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const DelayedStory: Story = {
play: async () => {
const exampleElement = screen.getByLabelText('example-element');
export const DelayedStory: Story = Template.bind({});
DelayedStory.play = () => {
const exampleElement= screen.getByLabelText('example-element');
// The delay option set the amount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
// The delay option set the ammount of milliseconds between characters being typed
await userEvent.type(exampleElement, 'random string', {
delay: 100,
});
const AnotherExampleElement= screen.getByLabelText('another-example-element');
await userEvent.type(AnotherExampleElement, 'another random string', {
delay: 100,
});
const AnotherExampleElement = screen.getByLabelText('another-example-element');
await userEvent.type(AnotherExampleElement, 'another random string', {
delay: 100,
});
},
};
```

11
docs/snippets/angular/my-component-play-function-with-selectevent.mdx.mdx
View File

@ -15,11 +15,9 @@ export const sleep= (ms) => {
return new Promise((resolve) => setTimeout(resolve, ms));
};
export const Template = (args) => ({ props: args });
<Story
name="ExampleChangeEvent"
play={async () => {
play={ async () => {
const select = screen.getByRole('listbox');
await userEvent.selectOptions(select, ['One Item']);
@ -30,7 +28,8 @@ export const Template = (args) => ({ props: args });
await userEvent.selectOptions(select, ['Yet another item']);
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

29
docs/snippets/angular/my-component-play-function-with-selectevent.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { screen, userEvent } from '@storybook/testing-library';
@ -9,9 +9,9 @@ import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'WithSelectEvent',
component: MyComponent,
} as Meta;
@ -21,20 +21,17 @@ function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
const Template: Story = (args) => ({
props: args,
});
export const ExampleChangeEvent: Story = {
play: async () => {
const select = screen.getByRole('listbox');
export const ExampleChangeEvent: Story = Template.bind({});
ExampleChangeEvent.play = async () => {
const select = screen.getByRole('listbox');
await userEvent.selectOptions(select, ['One Item']);
await sleep(2000);
await userEvent.selectOptions(select, ['One Item']);
await sleep(2000);
await userEvent.selectOptions(select, ['Another Item']);
await sleep(2000);
await userEvent.selectOptions(select, ['Another Item']);
await sleep(2000);
await userEvent.selectOptions(select, ['Yet another item']);
await userEvent.selectOptions(select, ['Yet another item']);
},
};
```

25
docs/snippets/angular/my-component-story-basic-and-props.ts.mdx
View File

@ -1,27 +1,26 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Path/To/MyComponent',
component: MyComponent,
} as Meta;
export const Default: Story = {};
export const Default: Story = () => ({
props: {},
});
export const WithProp: Story = () => ({
props: {
prop: 'value',
},
});
export const WithProp: StoryObj = {
render: () => ({
props: {
prop: 'value',
},
}),
};
```

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

@ -17,15 +17,20 @@ import { MyComponent } from './MyComponent.component';
}}
component={MyComponent} />
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="MyStory"
parameters={{
viewport: {
defaultViewport: 'iphonex',
}
}}>
{{
template: '<MyComponent></MyComponent>',
}}
</Story>
render={() => ({
template: `<MyComponent></MyComponent>`,
})} />
```

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

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
@ -9,9 +9,9 @@ import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
parameters: {
@ -26,7 +26,14 @@ export default {
},
} as Meta;
export const MyStory: Story = () => ({
template: '<MyComponent></MyComponent>',
});
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const MyStory: Story = {
render: () => ({
template: '<MyComponent></MyComponent>',
}),
};
```

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

@ -18,12 +18,12 @@ export const getCaptionForLocale = (locale) => {
}
};
<Story name="StoryWithLocale">
{(args, { globals: { locale } }) => {
<Story
name="StoryWithLocale"
render={(args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {
template: `<p>${caption}</p>`,
};
}}
</Story>
}} />
```

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

@ -1,15 +1,15 @@
```ts
// MyComponent.stories.ts
import { Meta } from '@storybook/angular';
import type { 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
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
} as Meta;
@ -29,10 +29,12 @@ const getCaptionForLocale = (locale) => {
}
};
export const StoryWithLocale = (args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {
template: `<p>${caption}</p>`,
};
export const StoryWithLocale = {
render: (args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {
template: `<p>${caption}</p>`,
};
},
};
```

28
docs/snippets/angular/my-component-story-with-nonstory.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
@ -9,29 +9,27 @@ import someData from './data.json';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories
excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const simpleData = { foo: 1, bar: 'baz' };
export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
export const SimpleStory = Template.bind({});
SimpleStory.args = {
data: simpleData,
export const SimpleStory: Story = {
args: {
data: simpleData,
},
};
export const ComplexStory = Template.bind({});
ComplexStory.args = {
data: complexData,
export const ComplexStory: Story = {
args: {
data: complexData,
},
};
```

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

@ -7,14 +7,14 @@ import { MyComponent } from './my-component.component';
<Meta title="MyComponent" component={MyComponent}/>
export const Template = (args) => ({ props: args });
<Canvas>
<Story
name="ExampleStory"
args={{
propertyA: process.env.STORYBOOK_DATA_KEY,
}}>
{Template.bind({})}
}}
render={(args) => ({
props: args,
})} />
</Canvas>
```

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

@ -1,25 +1,22 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const ExampleStory = Template.bind({});
ExampleStory.args = {
propertyA: process.env.STORYBOOK_DATA_KEY
export const ExampleStory: Story = {
args: {
propertyA: process.env.STORYBOOK_DATA_KEY,
},
};
```

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

@ -7,20 +7,17 @@ import { Page } from './page.component';
<Meta title="Page" component={Page} />
export const Template = (args) => ({
props: args,
template:`
<storybook-page>
<ng-container footer>${args.footer}</ng-container>
</storybook-page>
`,
});
<Story
name="CustomFooter"
args={{
footer: 'Built with Storybook',
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
template:`
<storybook-page>
<ng-container footer>${args.footer}</ng-container>
</storybook-page>
`,
})} />
```

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

@ -1,30 +1,34 @@
```ts
// Page.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { Page } from './page.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Page',
component: Page,
} as Meta;
const Template: Story = (args) => ({
props: args,
template: `
<storybook-page>
<ng-container footer>${args.footer}</ng-container>
</storybook-page>`,
});
export const CustomFooter = Template.bind({});
CustomFooter.args = {
footer: 'Built with Storybook',
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const CustomFooter: Story = {
render: (args) => ({
props: args,
template: `
<storybook-page>
<ng-container footer>${args.footer}</ng-container>
</storybook-page>`,
}),
args: {
footer: 'Built with Storybook',
},
};
```

22
docs/snippets/angular/page-story-with-args-composition.ts.mdx
View File

@ -17,9 +17,9 @@ import * as DocumentListStories from './DocumentList.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'DocumentScreen',
component: DocumentScreen,
decorators: [
@ -30,15 +30,11 @@ export default {
],
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const Simple = Template.bind({});
Simple.args = {
user: PageLayoutStories.PageLayoutSimple.args.user,
document: DocumentHeaderStories.DocumentHeaderSimple.args.document,
subdocuments: DocumentListStories.DocumentListSimple.args.documents
export const ExampleWithRole: Story = {
args: {
user: PageLayoutStories.PageLayoutSimple.args.user,
document: DocumentHeaderStories.DocumentHeaderSimple.args.document,
subdocuments: DocumentListStories.DocumentListSimple.args.documents,
},
};
```

12
docs/snippets/angular/page-story.ts.mdx
View File

@ -14,9 +14,9 @@ import * as HeaderStories from './Header.stories';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Page',
component: Page,
decorators: [
@ -27,11 +27,7 @@ export default {
],
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const LoggedIn = {
export const LoggedIn: Story = {
args: {
...HeaderStories.LoggedIn.args,
},

19
docs/snippets/angular/register-component-with-play-function.mdx.mdx
View File

@ -9,11 +9,15 @@ import { RegistrationForm } from './RegistrationForm.component';
<Meta title="RegistrationForm" component={RegistrationForm} />
export const Template = (args) => ({ props: args });
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="FilledForm"
play={async () => {
play={ async () => {
const emailInput = screen.getByLabelText('email', {
selector: 'input',
});
@ -29,12 +33,13 @@ export const Template = (args) => ({ props: args });
await userEvent.type(passwordInput, 'ExamplePassword', {
delay: 100,
});
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
const Submit = screen.getByRole('button');
await userEvent.click(Submit);
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

47
docs/snippets/angular/register-component-with-play-function.ts.mdx
View File

@ -1,7 +1,7 @@
```ts
// RegistrationForm.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { screen, userEvent } from '@storybook/testing-library';
@ -9,37 +9,34 @@ import { RegistrationForm } from './RegistrationForm.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'RegistrationForm',
component: RegistrationForm,
} as Meta;
const Template: Story = (args) => ({
props: args,
});
export const FilledForm: Story = {
play: async () => {
const emailInput = screen.getByLabelText('email', {
selector: 'input',
});
export const FilledForm: Story = Template.bind({});
FilledForm.play = async () => {
const emailInput = screen.getByLabelText('email', {
selector: 'input',
});
await userEvent.type(emailInput, 'example-email@email.com', {
delay: 100,
});
await userEvent.type(emailInput, 'example-email@email.com', {
delay: 100,
});
const passwordInput = screen.getByLabelText('password', {
selector: 'input',
});
const passwordInput = screen.getByLabelText('password', {
selector: 'input',
});
await userEvent.type(passwordInput, 'ExamplePassword', {
delay: 100,
});
// See https://storybook.js.org/docs/7.0/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
const submitButton = screen.getByRole('button');
await userEvent.type(passwordInput, 'ExamplePassword', {
delay: 100,
});
// See https://storybook.js.org/docs/angular/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
const Submit = screen.getByRole('button');
await userEvent.click(Submit);
await userEvent.click(submitButton);
},
};
```

12
docs/snippets/angular/storybook-addon-a11y-disable.mdx.mdx
View File

@ -9,7 +9,11 @@ import { MyComponent } from './MyComponent.component';
title="Disable a11y addon"
component={MyComponent} />
export const Template = () => ({});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="NonA11yStory"
@ -18,7 +22,9 @@ export const Template = () => ({});
// This option disables all a11y checks on this story
disable: true,
},
}}>
{Template.bind({})}
}}
render={(args) => ({
props: args,
})} />
</Story>
```

21
docs/snippets/angular/storybook-addon-a11y-disable.ts.mdx
View File

@ -1,26 +1,25 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Disable a11y addon',
component: MyComponent,
} as Meta;
const Template: Story = () => ({});
export const NonA11yStory = Template.bind({});
NonA11yStory.parameters = {
a11y: {
// This option disables all a11y checks on this story
disable: true,
export const NonA11yStory: Story = {
parameters: {
a11y: {
// This option disables all a11y checks on this story
disabled: true,
},
},
};
```

13
docs/snippets/angular/storybook-addon-a11y-story-config.mdx.mdx
View File

@ -9,7 +9,11 @@ import { MyComponent } from './MyComponent.component';
title="Configure a11y addon"
component={MyComponent} />
export const Template = () => ({});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="ExampleStory"
@ -33,7 +37,8 @@ export const Template = () => ({});
options: {},
manual: true,
},
}}>
{Template.bind({})}
</Story>
}}
render={(args) => ({
props: args,
})} />
```

49
docs/snippets/angular/storybook-addon-a11y-story-config.ts.mdx
View File

@ -1,41 +1,40 @@
```ts
// MyComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { MyComponent } from './MyComponent.component';
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Configure a11y addon',
component: MyComponent,
} as Meta;
const Template: Story = () => ({});
export const ExampleStory = Template.bind({});
ExampleStory.parameters = {
a11y: {
element: '#root',
config: {
rules: [
{
// The autocomplete rule will not run based on the CSS selector provided
id: 'autocomplete-valid',
selector: '*:not([autocomplete="nope"])',
},
{
// Setting the enabled option to false will disable checks for this particular rule on all stories.
id: 'image-alt',
enabled: false,
},
],
export const ExampleStory: Story = {
parameters: {
a11y: {
element: '#root',
config: {
rules: [
{
// The autocomplete rule will not run based on the CSS selector provided
id: 'autocomplete-valid',
selector: '*:not([autocomplete="nope"])',
},
{
// Setting the enabled option to false will disable checks for this particular rule on all stories.
id: 'image-alt',
enabled: false,
},
],
},
options: {},
manual: true,
},
options: {},
manual: true,
},
};
```

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

@ -7,20 +7,11 @@ import { Table } from './Table.component';
<Meta title="Custom Table" component={Table} />
export const TableStory = (args) => ({
props: args,
template: `
<table>
<tbody>
<tr *ngFor="let row of data; let i=index">
<td *ngFor="let col of row; let j=index">
{{data[i][j]}}
</td>
</tr>
</tbody>
</table>
`,
});
<!--
👇 Render functions are a framework specific feature to allow you control on how the component renders.
See https://storybook.js.org/docs/7.0/angular/api/csf
to learn how to use render functions.
-->
<Story
name="Numeric"
@ -30,7 +21,19 @@ export const TableStory = (args) => ({
[4, 5, 6],
],
size: 'large',
}}>
{TableStory.bind({})}
</Story>
}}
render={(args) => ({
props: args,
template: `
<table>
<tbody>
<tr *ngFor="let row of data; let i=index">
<td *ngFor="let col of row; let j=index">
{{data[i][j]}}
</td>
</tr>
</tbody>
</table>
`,
})} />
```

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

@ -1,42 +1,46 @@
```ts
// Table.stories.ts
import { Meta, Story } from '@storybook/angular',
import type { Meta, StoryObj } 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
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Custom Table',
component: Table,
} as Meta;
const TableStory: Story = (args) => ({
props: args,
template: `
<table>
<tbody>
<tr *ngFor="let row of data; let i=index">
<td *ngFor="let col of row; let j=index">
{{data[i][j]}}
</td>
</tr>
</tbody>
</table>
/*
*👇 Render functions are a framework specific feature to allow you control on how the component renders.
* See https://storybook.js.org/docs/7.0/angular/api/csf
* to learn how to use render functions.
*/
export const Numeric: StoryObj<Table> = {
render:(args)=>({
props: args,
template: `
<table>
<tbody>
<tr *ngFor="let row of data; let i=index">
<td *ngFor="let col of row; let j=index">
{{data[i][j]}}
</td>
</tr>
</tbody>
</table>
`,
});
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',
}),
args:{
data: [
[1, 2, 3],
[4, 5, 6],
],
//👇 The remaining args get passed to the `Table` component
size: 'large',
},
};
```

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

@ -7,9 +7,9 @@ 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
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
component: YourComponent,
decorators: [componentWrapperDecorator((story) => `<div style="margin: 3em">${story}</div>`)],

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

@ -8,13 +8,13 @@ import { YourComponent } from './your.component';
<!--👇 The title prop determines where your story goes in the story list -->
<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"
args={{}}>
{Template.bind({})}
</Story>
args={{}}
render={(args) => ({
props: args,
})} />
```

21
docs/snippets/angular/your-component.ts.mdx
View File

@ -1,28 +1,23 @@
```ts
// YourComponent.stories.ts
import { Meta, Story } from '@storybook/angular';
import type { Meta, Story } from '@storybook/angular';
import { YourComponent } from './your.component';
//👇 This default export determines where your story goes in the story list
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
* See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'YourComponent',
component: YourComponent,
} as Meta;
//👇 We create a “template” of how args map to rendering
const Template: Story = (args) => ({
props:args,
});
export const FirstStory = Template.bind({});
FirstStory.args= {
//👇 The args you need here will depend on your component
export const FirstStory: Story = {
args: {
//👇 The args you need here will depend on your component
},
};
```