refactor(angular): improve action addon examples

2025-04-02 05:03:44 +08:00 · 2021-02-10 20:11:13 +01:00 · 2021-02-10 20:11:13 +01:00 · 41eb56f6a9
commit 41eb56f6a9
parent 0337a6445a
13 changed files with 185 additions and 145 deletions
--- a/examples/angular-cli/src/stories/snapshots/welcome-storybook.stories.storyshot
+++ b/examples/angular-cli/src/stories/snapshots/welcome-storybook.stories.storyshot
@ -3,47 +3,47 @@
 exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
 <storybook-wrapper>
  <storybook-welcome-component
-    _nghost-a-c24=""
+    _nghost-a-c25=""
  >
    <main
-      _ngcontent-a-c24=""
+      _ngcontent-a-c25=""
    >
      <h1
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
      >
        Welcome to storybook
      </h1>
      <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
      >
        This is a UI component dev environment for your app.
      </p>
      <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
      >
         We've added some basic stories inside the 
        <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
          class="inline-code"
        >
          src/stories
        </span>
         directory. 
        <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
        />
         A story is a single state of one or more UI components. You can have as many stories as you want. 
        <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
        />
         (Basically a story is like a visual test case.) 
      </p>
      <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
      >
         See these sample 
        <a
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
          role="button"
          tabindex="0"
        >
@ -51,7 +51,7 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
        </a>
         for a component called 
        <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
          class="inline-code"
        >
          Button
@ -59,26 +59,26 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
         . 
      </p>
      <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
      >
         Just like that, you can add your own components as stories. 
        <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
        />
         You can also edit those components and see changes right away. 
        <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
        />
         (Try editing the 
        <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
          class="inline-code"
        >
          Button
        </span>
         stories located at 
        <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
          class="inline-code"
        >
          src/stories/index.js
@ -86,15 +86,15 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
        .) 
      </p>
      <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
      >
         Usually we create stories with smaller UI components in the app.
        <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
        />
         Have a look at the 
        <a
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
          href="https://storybook.js.org/basics/writing-stories"
          rel="noopener noreferrer"
          target="_blank"
@ -104,20 +104,20 @@ exports[`Storyshots Welcome/ To Storybook To Storybook 1`] = `
         section in our documentation. 
      </p>
      <p
-        _ngcontent-a-c24=""
+        _ngcontent-a-c25=""
        class="note"
      >
        <b
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
        >
          NOTE:
        </b>
        <br
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
        />
         Have a look at the 
        <span
-          _ngcontent-a-c24=""
+          _ngcontent-a-c25=""
          class="inline-code"
        >
          .storybook/webpack.config.js
--- a/examples/angular-cli/src/stories/addons/actions/snapshots/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/actions/snapshots/addon-actions.stories.storyshot
@ -1,30 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Storyshots Addons/Actions Action and method 1`] = `
+exports[`Storyshots Addons/Actions Component Output with ArgsTypes 1`] = `
 <storybook-wrapper>
  <storybook-button-component
-    _nghost-a-c3=""
-    ng-reflect-text="Action and Method"
+    _nghost-a-c4=""
+    ng-reflect-text="Button 🥁"
  >
    <button
-      _ngcontent-a-c3=""
+      _ngcontent-a-c4=""
    >
-      Action and Method
+      Button 🥁
    </button>
  </storybook-button-component>
 </storybook-wrapper>
 `;

-exports[`Storyshots Addons/Actions Action only 1`] = `
+exports[`Storyshots Addons/Actions Component Output with EventEmitter 1`] = `
 <storybook-wrapper>
  <storybook-button-component
    _nghost-a-c2=""
-    ng-reflect-text="Action only"
+    ng-reflect-text="Button 🥁"
  >
    <button
      _ngcontent-a-c2=""
    >
-      Action only
+      Button 🥁
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Addons/Actions Story with template 1`] = `
+<storybook-wrapper>
+  <button>
+    Button
+  </button>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Addons/Actions Use action in method 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c3=""
+    ng-reflect-text="Button 🥁"
+  >
+    <button
+      _ngcontent-a-c3=""
+    >
+      Button 🥁
    </button>
  </storybook-button-component>
 </storybook-wrapper>
--- a/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts
+++ b/examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts
@ -1,29 +1,46 @@
 import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/angular';
 import { Button } from '@storybook/angular/demo';

 export default {
  component: Button,
  title: 'Addons/Actions',
-};
+} as Meta;

-export const ActionOnly = () => ({
+export const ComponentOutputWithEventEmitter: Story = () => ({
  props: {
-    text: 'Action only',
-    onClick: action('log 1'),
+    text: 'Button 🥁',
+    onClick: action('On click'),
  },
 });
+ComponentOutputWithEventEmitter.storyName = 'Component Output with EventEmitter';

-ActionOnly.storyName = 'Action only';
-
-export const ActionAndMethod = () => ({
+export const UseActionInMethod: Story = () => ({
  props: {
-    text: 'Action and Method',
+    text: 'Button 🥁',
    onClick: (e) => {
      console.log(e);
      e.preventDefault();
-      action('log2')(e.target);
+      action('Action name')(e.target, 'Another arg');
    },
  },
 });
+UseActionInMethod.storyName = 'Use action in method';

-ActionAndMethod.storyName = 'Action and method';
+export const StoryTemplate: Story = () => ({
+  template: `<button (click)="onClick($event)" (mouseover)="onOver()">Button</button>`,
+  props: {
+    onClick: action('On click'),
+    onOver: action('On over'),
+  },
+});
+StoryTemplate.storyName = 'Story with template';
+
+export const ComponentOutputWithArgsTypes: Story = (args) => ({
+  props: {
+    text: 'Button 🥁',
+    ...args,
+  },
+});
+ComponentOutputWithArgsTypes.storyName = 'Component Output with ArgsTypes';
+ComponentOutputWithArgsTypes.argTypes = { onClick: { action: 'On click' } };
--- a/examples/angular-cli/src/stories/addons/backgrounds/snapshots/addon-background.stories.storyshot
+++ b/examples/angular-cli/src/stories/addons/backgrounds/snapshots/addon-background.stories.storyshot
@ -3,11 +3,11 @@
 exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 <storybook-wrapper>
  <storybook-button-component
-    _nghost-a-c6=""
+    _nghost-a-c7=""
    ng-reflect-text="This one should have different"
  >
    <button
-      _ngcontent-a-c6=""
+      _ngcontent-a-c7=""
    >
      This one should have different backgrounds
    </button>
@ -16,21 +16,6 @@ exports[`Storyshots Addons / Backgrounds Overridden 1`] = `
 `;

 exports[`Storyshots Addons / Backgrounds With Component 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _nghost-a-c4=""
-    ng-reflect-text="Button"
-  >
-    <button
-      _ngcontent-a-c4=""
-    >
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Addons / Backgrounds With Template 1`] = `
 <storybook-wrapper>
  <storybook-button-component
    _nghost-a-c5=""
@ -44,3 +29,18 @@ exports[`Storyshots Addons / Backgrounds With Template 1`] = `
  </storybook-button-component>
 </storybook-wrapper>
 `;
+
+exports[`Storyshots Addons / Backgrounds With Template 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c6=""
+    ng-reflect-text="Button"
+  >
+    <button
+      _ngcontent-a-c6=""
+    >
+      Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
--- a/examples/angular-cli/src/stories/addons/docs/snapshots/addon-docs.stories.storyshot
+++ b/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-c8=""
+    _nghost-a-c9=""
    ng-reflect-text="😀 😎 👍 💯"
  >
    <button
-      _ngcontent-a-c8=""
+      _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-c7=""
+    _nghost-a-c8=""
    ng-reflect-text="Hello Button"
  >
    <button
-      _ngcontent-a-c7=""
+      _ngcontent-a-c8=""
    >
      Hello Button
    </button>
--- a/examples/angular-cli/src/stories/addons/docs/snapshots/simple.stories.storyshot
+++ b/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-c10=""
+    _nghost-a-c11=""
    ng-reflect-text="Hello 👋"
  >
    <button
-      _ngcontent-a-c10=""
+      _ngcontent-a-c11=""
    >
      Hello 👋
    </button>
--- a/examples/angular-cli/src/stories/addons/docs/iframe/snapshots/iframe.stories.storyshot
+++ b/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-c9=""
+    _nghost-a-c10=""
    ng-reflect-text="Add 👾"
  >
    <button
-      _ngcontent-a-c9=""
+      _ngcontent-a-c10=""
    >
      Add 👾
    </button>
--- a/examples/angular-cli/src/stories/addons/links/snapshots/addon-links.stories.storyshot
+++ b/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-c11=""
+    _nghost-a-c12=""
    ng-reflect-text="Go to Welcome Story"
  >
    <button
-      _ngcontent-a-c11=""
+      _ngcontent-a-c12=""
    >
      Go to Welcome Story
    </button>
--- a/examples/angular-cli/src/stories/core/parameters/snapshots/all-parameters.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/parameters/snapshots/all-parameters.stories.storyshot
@ -3,13 +3,13 @@
 exports[`Storyshots Core / Parameters / All parameters All parameters passed to story 1`] = `
 <storybook-wrapper>
  <storybook-button-component
-    _nghost-a-c12=""
+    _nghost-a-c13=""
    ng-reflect-text="Parameters are {
    \\"docs\\": {
   "
  >
    <button
-      _ngcontent-a-c12=""
+      _ngcontent-a-c13=""
    >
      Parameters are {
    "docs": {
--- a/examples/angular-cli/src/stories/core/parameters/snapshots/layout.parameters.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/parameters/snapshots/layout.parameters.stories.storyshot
@ -1,71 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`Storyshots Core / Parameters / Layout Centered 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _nghost-a-c15=""
-    ng-reflect-text="Button"
-  >
-    <button
-      _ngcontent-a-c15=""
-    >
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Default 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _nghost-a-c13=""
-    ng-reflect-text="Button"
-  >
-    <button
-      _ngcontent-a-c13=""
-    >
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
-<storybook-wrapper>
-  <div
-    style="background-color: yellow;"
-  >
-    <storybook-button-component
-      _nghost-a-c14=""
-      ng-reflect-text="Button"
-      text="Button"
-    >
-      <button
-        _ngcontent-a-c14=""
-      >
-        Button
-      </button>
-    </storybook-button-component>
-  </div>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout None 1`] = `
-<storybook-wrapper>
-  <storybook-button-component
-    _nghost-a-c17=""
-    ng-reflect-text="Button"
-  >
-    <button
-      _ngcontent-a-c17=""
-    >
-      Button
-    </button>
-  </storybook-button-component>
-</storybook-wrapper>
-`;
-
-exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
 <storybook-wrapper>
  <storybook-button-component
    _nghost-a-c16=""
@ -79,3 +14,68 @@ exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
  </storybook-button-component>
 </storybook-wrapper>
 `;
+
+exports[`Storyshots Core / Parameters / Layout Default 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c14=""
+    ng-reflect-text="Button"
+  >
+    <button
+      _ngcontent-a-c14=""
+    >
+      Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Core / Parameters / Layout Fullscreen 1`] = `
+<storybook-wrapper>
+  <div
+    style="background-color: yellow;"
+  >
+    <storybook-button-component
+      _nghost-a-c15=""
+      ng-reflect-text="Button"
+      text="Button"
+    >
+      <button
+        _ngcontent-a-c15=""
+      >
+        Button
+      </button>
+    </storybook-button-component>
+  </div>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Core / Parameters / Layout None 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c18=""
+    ng-reflect-text="Button"
+  >
+    <button
+      _ngcontent-a-c18=""
+    >
+      Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
+
+exports[`Storyshots Core / Parameters / Layout Padded 1`] = `
+<storybook-wrapper>
+  <storybook-button-component
+    _nghost-a-c17=""
+    ng-reflect-text="Button"
+  >
+    <button
+      _ngcontent-a-c17=""
+    >
+      Button
+    </button>
+  </storybook-button-component>
+</storybook-wrapper>
+`;
--- a/examples/angular-cli/src/stories/core/styles/snapshots/story-styles.stories.storyshot
+++ b/examples/angular-cli/src/stories/core/styles/snapshots/story-styles.stories.storyshot
@ -3,12 +3,12 @@
 exports[`Storyshots Core / Story host styles With Knobs 1`] = `
 <storybook-wrapper>
  <storybook-button-component
-    _ngcontent-a-c20=""
-    _nghost-a-c21=""
+    _ngcontent-a-c21=""
+    _nghost-a-c22=""
    ng-reflect-text="Button with custom styles"
  >
    <button
-      _ngcontent-a-c21=""
+      _ngcontent-a-c22=""
    >
      Button with custom styles
    </button>
@ -19,12 +19,12 @@ exports[`Storyshots Core / Story host styles With Knobs 1`] = `
 exports[`Storyshots Core / Story host styles With story template 1`] = `
 <storybook-wrapper>
  <storybook-button-component
-    _ngcontent-a-c18=""
-    _nghost-a-c19=""
+    _ngcontent-a-c19=""
+    _nghost-a-c20=""
    ng-reflect-text="Button with custom styles"
  >
    <button
-      _ngcontent-a-c19=""
+      _ngcontent-a-c20=""
    >
      Button with custom styles
    </button>
--- a/examples/angular-cli/src/stories/legacy/snapshots/component-in-story.stories.storyshot
+++ b/examples/angular-cli/src/stories/legacy/snapshots/component-in-story.stories.storyshot
@ -3,11 +3,11 @@
 exports[`Storyshots Legacy / Component in Story Basic 1`] = `
 <storybook-wrapper>
  <storybook-button-component
-    _nghost-a-c22=""
+    _nghost-a-c23=""
    ng-reflect-text="Hello Button"
  >
    <button
-      _ngcontent-a-c22=""
+      _ngcontent-a-c23=""
    >
      Hello Button
    </button>
--- a/examples/angular-cli/src/stories/others/issues/snapshots/12009-unknown-component.stories.storyshot
+++ b/examples/angular-cli/src/stories/others/issues/snapshots/12009-unknown-component.stories.storyshot
@ -3,11 +3,11 @@
 exports[`Storyshots Others / Issues / 12009 unknown component Basic 1`] = `
 <storybook-wrapper>
  <storybook-button-component
-    _nghost-a-c23=""
+    _nghost-a-c24=""
    ng-reflect-text="Unknown component"
  >
    <button
-      _ngcontent-a-c23=""
+      _ngcontent-a-c24=""
    >
      Unknown component
    </button>