Merge pull request #2787 from storybooks/angular-inheritance-example

Angular inheritance example

examples/angular-cli/src/stories/inheritance/__snapshots__/inheritance.stories.storyshot

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Inheritance base button 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-base-button>
+
+
+    <button>
+      this is label
+    </button>
+
+
+  </storybook-base-button>
+</storybook-dynamic-app-root>
+`;
+
+exports[`Storyshots Inheritance icon button 1`] = `
+<storybook-dynamic-app-root
+  cfr={[Function CodegenComponentFactoryResolver]}
+  data={[Function Object]}
+  target={[Function ViewContainerRef_]}
+>
+  <storybook-icon-button>
+
+
+    <button>
+      this is label - this is icon
+    </button>
+
+
+  </storybook-icon-button>
+</storybook-dynamic-app-root>
+`;

examples/angular-cli/src/stories/inheritance/base-button.component.ts

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: `storybook-base-button`,
+  template: `
+    <button>{{label}}</button>
+  `,
+})
+export class BaseButtonComponent {
+  @Input() label: string;
+}

examples/angular-cli/src/stories/inheritance/icon-button.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { BaseButtonComponent } from './base-button.component';
+
+@Component({
+  selector: `storybook-icon-button`,
+  template: `
+    <button>{{label}} - {{icon}}</button>
+  `,
+})
+export class IconButtonComponent extends BaseButtonComponent {
+  @Input() icon: string;
+}

examples/angular-cli/src/stories/inheritance/inheritance.stories.ts

@@ -0,0 +1,18 @@
+import { storiesOf } from '@storybook/angular';
+import { IconButtonComponent } from './icon-button.component';
+import { BaseButtonComponent } from './base-button.component';
+
+storiesOf('Inheritance', module)
+  .add('icon button', () => ({
+    component: IconButtonComponent,
+    props: {
+      icon: 'this is icon',
+      label: 'this is label',
+    },
+  }))
+  .add('base button', () => ({
+    component: BaseButtonComponent,
+    props: {
+      label: 'this is label',
+    },
+  }));