Svelte: Use JSDocs and put manual enum arg type back as it is not inf…

…erred

code/renderers/svelte/template/cli/js/Button.stories.js

@@ -7,6 +7,10 @@ export default {
   tags: ['docsPage'],
   argTypes: {
     backgroundColor: { control: 'color' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
   },
 };
 

code/renderers/svelte/template/cli/js/Button.svelte

@@ -7,15 +7,17 @@
   export let primary = false;
 
   /**
-   * What background color to use
+   * @type {string} What background color to use
    */
   export let backgroundColor = undefined;
+
   /**
-   * How large should the button be?
+   * @type {'small' | 'medium' | 'large'} How large should the button be?
    */
   export let size = 'medium';
+
   /**
-   * Button contents
+   * @type {string} Button contents
    */
   export let label;
 

code/renderers/svelte/template/cli/ts-legacy/Button.stories.ts

@@ -2,12 +2,17 @@ import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
 
-// More on how to set up stories at: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export
-const meta: Meta<Button> = {
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+const meta = {
   title: 'Example/Button',
   component: Button,
+  tags: ['docsPage'],
   argTypes: {
     backgroundColor: { control: 'color' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
   },
 };
 

code/renderers/svelte/template/cli/ts/Button.stories.ts

@@ -9,6 +9,10 @@ const meta = {
   tags: ['docsPage'],
   argTypes: {
     backgroundColor: { control: 'color' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
   },
 } satisfies Meta<Button>;