Merge pull request #29546 from storybookjs/docs_adjust_svelte_snippet…

…s_v5 Docs: Svelte CSF snippets
storybookjs · Nov 15, 2024 · c7569a6 · c7569a6
2 parents 9955a0b + f922ed1
commit c7569a6
Show file tree

Hide file tree

Showing 105 changed files with 8,108 additions and 1,182 deletions.
diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
@@ -160,7 +160,46 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js" renderer="svelte" language="js"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  }}
+/>
+
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+   }}
+/>
+
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
+```
+
+```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import ButtonGroup from '../ButtonGroup.svelte';
 
 //👇 Imports the Button stories
@@ -178,7 +217,46 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  }}
+/>
+
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+   }}
+/>
+
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
+```
+
+```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import ButtonGroup from './ButtonGroup.svelte';
@@ -201,7 +279,46 @@ export const Pair: Story = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  }}
+/>
+
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+   }}
+/>
+
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
+```
+
+```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import ButtonGroup from './ButtonGroup.svelte';
@@ -350,4 +467,3 @@ export const Pair: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-click-handler-simplificated.md b/docs/_snippets/button-story-click-handler-simplificated.md
@@ -119,28 +119,6 @@ export const Text = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* 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/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' }}/>
-```
-
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
@@ -262,4 +240,3 @@ export const Text: Story = {
   args: {},
 };
 ```
-
diff --git a/docs/_snippets/button-story-click-handler.md b/docs/_snippets/button-story-click-handler.md
@@ -149,22 +149,6 @@ export const Text = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
-
-  import { action } from '@storybook/addon-actions';
-
-  import Button from './Button.svelte';
-</script>
-
-<meta title="Button" component="{Button}" />
-
-<Story name="Text"> <Button text="Hello" on:click={action('clicked')}/> </Story>
-```
-
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/svelte';
 import { action } from '@storybook/addon-actions';
@@ -323,4 +307,3 @@ export const Text: Story = {
   render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
 };
 ```
-
diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md
@@ -52,7 +52,6 @@ const meta = {
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
@@ -93,7 +92,7 @@ export default {
 ```
 
 ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
-import type { Meta, StoryObj } from 'storybook-solidjs';
+import type { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
@@ -110,7 +109,6 @@ const meta = {
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 ```
 
 ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
@@ -134,7 +132,27 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -150,19 +168,27 @@ export default {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<Meta title="Button" component={Button} args={{ primary: true, }} />
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -182,7 +208,27 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -289,4 +335,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-