diff --git a/examples/angular-cli/src/stories/issue-11613/label.component.ts b/examples/angular-cli/src/stories/issue-11613/label.component.ts new file mode 100644 index 000000000000..66985dbe6422 --- /dev/null +++ b/examples/angular-cli/src/stories/issue-11613/label.component.ts @@ -0,0 +1,41 @@ +import { Component, Input, OnInit } from '@angular/core'; + +@Component({ + selector: 'storybook-label-component', + template: ` +
{{ text }}
+
{{ localText }}
+ `, + styles: [ + ` + button { + border: 1px solid #eee; + border-radius: 3px; + background-color: #ffffff; + cursor: pointer; + font-size: 15px; + padding: 3px 10px; + margin: 10px; + } + `, + ], +}) +export default class LabelComponent implements OnInit { + /** + * Specify the Label text + */ + @Input() + text = ''; + + /** + * Specify the label's bgColor + */ + @Input() + bgColor: string; + + localText = 'Original localText'; + + ngOnInit() { + this.localText = 'Updated localText'; + } +} diff --git a/examples/angular-cli/src/stories/issue-11613/label.stories.ts b/examples/angular-cli/src/stories/issue-11613/label.stories.ts new file mode 100644 index 000000000000..057cc12f6b7f --- /dev/null +++ b/examples/angular-cli/src/stories/issue-11613/label.stories.ts @@ -0,0 +1,23 @@ +import { action } from '@storybook/addon-actions'; +import { linkTo } from '@storybook/addon-links'; + +import Label from './label.component'; + +export default { + title: 'issues/11613', + component: Label, + argTypes: { + text: { control: 'text' }, + bgColor: { control: { type: 'select', options: ['#ff0', '#F00', '#0F0'] } }, + }, +}; + +const Template = (args: Label) => ({ + component: Label, + props: args, +}); + +export const LabelText = Template.bind({}); +LabelText.args = { + text: 'Default Label', +};