refactor(angular): rework deprecated examples in Deprecated

examples/angular-cli/src/stories/addons/actions/__snapshots__/addon-actions.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Actions Action and method 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c5=""
+    _nghost-a-c7=""
     ng-reflect-text="Action and Method"
   >
     <button
-      _ngcontent-a-c5=""
+      _ngcontent-a-c7=""
     >
       Action and Method
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Actions Action and method 1`] = `
 exports[`Storyshots Addons/Actions Action only 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c4=""
+    _nghost-a-c6=""
     ng-reflect-text="Action only"
   >
     <button
-      _ngcontent-a-c4=""
+      _ngcontent-a-c6=""
     >
       Action only
     </button>

examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs with some emoji 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c7=""
+    _nghost-a-c9=""
     ng-reflect-text="😀 😎 👍 💯"
   >
     <button
-      _ngcontent-a-c7=""
+      _ngcontent-a-c9=""
     >
       😀 😎 👍 💯
     </button>
@@ -18,11 +18,11 @@ exports[`Storyshots Addons/Docs with some emoji 1`] = `
 exports[`Storyshots Addons/Docs with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c6=""
+    _nghost-a-c8=""
     ng-reflect-text="Hello Button"
   >
     <button
-      _ngcontent-a-c6=""
+      _ngcontent-a-c8=""
     >
       Hello Button
     </button>

examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c9=""
+    _nghost-a-c11=""
     ng-reflect-text="Hello 👋"
   >
     <button
-      _ngcontent-a-c9=""
+      _ngcontent-a-c11=""
     >
       Hello 👋
     </button>

examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Docs/Iframe Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c8=""
+    _nghost-a-c10=""
     ng-reflect-text="Add 👾"
   >
     <button
-      _ngcontent-a-c8=""
+      _ngcontent-a-c10=""
     >
       Add 👾
     </button>

examples/angular-cli/src/stories/addons/links/__snapshots__/addon-links.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addons/Links button with link to another story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c10=""
+    _nghost-a-c12=""
     ng-reflect-text="Go to Welcome Story"
   >
     <button
-      _ngcontent-a-c10=""
+      _ngcontent-a-c12=""
     >
       Go to Welcome Story
     </button>

examples/angular-cli/src/stories/basics/styles/__snapshots__/story-styles.stories.storyshot

@@ -1,6 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Basics / Story host styles With Knobs 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _ngcontent-a-c15=""
+    _nghost-a-c16=""
+    ng-reflect-text="Button with custom styles"
+  >
+    <button
+      _ngcontent-a-c16=""
+    >
+      Button with custom styles
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Basics / Story host styles With story template 1`] = `
 <storybook-wrapper>
   <storybook-button-component
     _ngcontent-a-c13=""
@@ -15,19 +31,3 @@ exports[`Storyshots Basics / Story host styles With Knobs 1`] = `
   </storybook-button-component>
 </storybook-wrapper>
 `;
-
-exports[`Storyshots Basics / Story host styles With story template 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _ngcontent-a-c11=""
-    _nghost-a-c12=""
-    ng-reflect-text="Button with custom styles"
-  >
-    <button
-      _ngcontent-a-c12=""
-    >
-      Button with custom styles
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;

examples/angular-cli/src/stories/core/parameters/__snapshots__/parameters.stories.storyshot

@@ -3,13 +3,13 @@
 exports[`Storyshots Core/Parameters passed to story 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c15=""
+    _nghost-a-c17=""
     ng-reflect-text="Parameters are {
     \\"docs\\": {
    "
   >
     <button
-      _ngcontent-a-c15=""
+      _ngcontent-a-c17=""
     >
       Parameters are {
     "docs": {

examples/angular-cli/src/stories/issues/__snapshots__/12009-unknown-component.stories.storyshot

@@ -3,11 +3,11 @@
 exports[`Storyshots Addon/Issues/12009 unknown component Basic 1`] = `
 <storybook-wrapper>
   <storybook-button-component
-    _nghost-a-c16=""
+    _nghost-a-c18=""
     ng-reflect-text="Unknown component"
   >
     <button
-      _ngcontent-a-c16=""
+      _ngcontent-a-c18=""
     >
       Unknown component
     </button>

examples/angular-cli/src/stories/legacy/__snapshots__/component-in-story.stories.storyshot

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Legacy / Component in Story Basic 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c19=""
+    ng-reflect-text="Hello Button"
+  >
+    <button
+      _ngcontent-a-c19=""
+    >
+      Hello Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;

examples/angular-cli/src/stories/legacy/__snapshots__/storiesOf.stories.storyshot

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Legacy / Story with storiesOf() with some emoji 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c5=""
+    ng-reflect-text="😀 😎 👍 💯"
+  >
+    <button
+      _ngcontent-a-c5=""
+    >
+      😀 😎 👍 💯
+    </button>
+  </storybook-button-component><storybook-button-component
+    _nghost-a-c5=""
+    ng-reflect-text="😀 😎 👍 💯"
+  >
+    <button
+      _ngcontent-a-c5=""
+    >
+      😀 😎 👍 💯
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Legacy / Story with storiesOf() with text 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c4=""
+    ng-reflect-text="Hello Button"
+  >
+    <button
+      _ngcontent-a-c4=""
+    >
+      Hello Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;

examples/angular-cli/src/stories/legacy/component-in-story.stories.ts

@@ -0,0 +1,14 @@
+import { Story, Meta } from '@storybook/angular';
+import { Button } from '@storybook/angular/demo';
+
+export default {
+  title: 'Legacy / Component in Story',
+} as Meta;
+
+export const Basic: Story = (args) => ({
+  component: Button,
+  props: args,
+});
+Basic.args = {
+  text: 'Hello Button',
+};

examples/angular-cli/src/stories/legacy/storiesOf.stories.ts

@@ -0,0 +1,26 @@
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+import { Button } from '@storybook/angular/demo';
+
+storiesOf('Legacy / Story with storiesOf()', module)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [Button],
+    })
+  )
+  .add('with text', () => ({
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    props: {
+      text: 'Hello Button',
+      onClick: (event: any) => {
+        console.log('some bindings work');
+        console.log(event);
+      },
+    },
+  }))
+  .add('with some emoji', () => ({
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component><storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    props: {
+      text: '😀 😎 👍 💯',
+      onClick: () => {},
+    },
+  }));