Merge pull request #17153 from storybookjs/chore_minor_api_docs_changes

Chore: (Docs) Updates the api/CSFsection

docs/api/csf.md

@@ -109,24 +109,12 @@ Now consider the same example, re-written with args:
     'vue/button-story-click-handler-args.2.js.mdx',
     'vue/button-story-click-handler-args.3.js.mdx',
     'angular/button-story-click-handler-args.ts.mdx',
+    'svelte/button-story-click-handler-args.js.mdx',
   ]}
 />
 
 <!-- prettier-ignore-end -->
 
-At first blush, this might seem no better than the original example. However, if we add the [Docs addon](https://github.com/storybookjs/storybook/tree/master/addons/docs) and configure the [Actions addon](https://github.com/storybookjs/storybook/tree/master/addons/actions) appropriately, we can write:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'react/button-story-click-handler-simple-docs.js.mdx',
-    'vue/button-story-click-handler-simple-docs.2.js.mdx',
-    'vue/button-story-click-handler-simple-docs.3.js.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
 
 Or even more simply:
 
@@ -136,6 +124,8 @@ Or even more simply:
   paths={[
     'react/button-story-click-handler-simplificated.js.mdx',
     'angular/button-story-click-handler-simplificated.ts.mdx',
+    'vue/button-story-click-handler-simplificated.js.mdx',
+    'svelte/button-story-click-handler-simplificated.native-format.mdx',
   ]}
 />
 

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

@@ -16,9 +16,11 @@ export default {
   component: Button,
 } as Meta;
 
-export const Text: Story = (args) => ({
-  props: args,
-  template: `<storybook-button [label]="label" (onClick)="onClick()"></storybook-button>`,
+export const Text: Story = ({ label, onClick }) => ({
+  props: {
+    label,
+    onClick,
+  },
 });
 
 Text.args = {

docs/snippets/react/button-story-click-handler-args.js.mdx

@@ -17,4 +17,9 @@ export default {
 };
 
 export const Text = ({ label, onClick }) => <Button label={label} onClick={onClick} />;
+
+Text.args = {
+  label: 'Hello',
+  onClick: action('clicked'),
+};
 ```

docs/snippets/svelte/button-story-click-handler-args.js.mdx

@@ -0,0 +1,31 @@
+```js
+// Button.stories.js
+
+import Button from './Button.svelte';
+
+import { action } from '@storybook/addon-actions';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+  component: Button,
+};
+
+export const Text  = ({ label, click }) => ({
+  Component: Button,
+  props: {
+    label,
+  },
+  on: {
+    click,
+  },
+});
+
+Text.args = {
+  label: 'Hello',
+  click: action('clicked'),
+};
+```

docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx

@@ -0,0 +1,27 @@
+```html
+<!-- Button.stories.svelte -->
+
+<script>
+  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+  import Button from './Button.svelte';
+</script>
+
+<!-- 
+  See https://storybook.js.org/docs/svelte/essentials/actions#action-argtype-annotation
+  to learn how to set up argTypes for actions
+--> 
+
+<Meta
+  title="Button"
+  component={Button}
+  argTypes={{
+    onClick: { action: "onClick" },
+  }}
+/>
+
+<Template let:args>
+  <Button {...args} on:click={args.onClick} />
+</Template>
+
+<Story name="Text" args={{ label: 'Hello' }}/>
+```

docs/snippets/svelte/button-story-click-handler.native-format.mdx

@@ -1,5 +1,5 @@
 ```html
-<-- Button.stories.svelte -->
+<!-- Button.stories.svelte -->
 
 <script>
   import { Meta, Story } from '@storybook/addon-svelte-csf';
@@ -12,6 +12,6 @@
 <Meta title="Button" component={Button}/>
 
 <Story name="Text">
-  <Button text="Custom text" on:click={action('clicked')}/>
+  <Button text="Hello" on:click={action('clicked')}/>
 </Story>
 ```

docs/snippets/vue/button-story-click-handler-args.2.js.mdx

@@ -19,6 +19,7 @@ export const Text = (args, { argTypes }) => ({
   components: { Button },
   template: '<Button @onClick="onClick" :label="label" />'
 });
+
 Text.args = {
   label: 'Hello',
   onClick: action('clicked'),

docs/snippets/vue/button-story-click-handler-args.3.js.mdx

@@ -14,17 +14,19 @@ export default {
   component: Button,
 };
 
-export const Text = (args) => ({
+export const Text = ({ label, onClick }) => ({
   components: { Button },
   setup() {
     return {
-      label: args.label,
-      onClick: action('clicked'),
+      label,
+      onClick,
     };
   },
   template: '<Button @onClick="onClick" :label="label" />',
 });
+
 Text.args = {
   label: 'Hello',
+  onClick: action('clicked'),
 };
 ```

docs/snippets/vue/button-story-click-handler-simplificated.js.mdx

@@ -0,0 +1,29 @@
+```js
+// Button.stories.js
+
+import Button from './Button.vue';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+  /*
+   * See https://storybook.js.org/docs/vue/essentials/actions#action-argtype-annotation
+   * to learn how to set up argTypes for actions
+   */
+  argTypes: {
+    onClick: {},
+  },
+};
+
+export const Text = (args) => ({
+  components: { Button },
+  setup() {
+    return { args };
+  },
+  template: '<Button v-bind="args" />',
+});
+```