Svelte snippets updated

docs/snippets/svelte/badge-story.mdx.mdx

@@ -3,35 +3,41 @@
 
 import { Meta, Story, Canvas } from '@storybook/addon-docs';
 
-import { Badge } from './Badge.svelte';
+import Badge from './Badge.svelte';
 
 <Meta title="MDX/Badge" component={Badge} />
 
-export const Template = (args) => ({
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-  Component: Badge,
-  props: args,
-});
 
 # Badge
 
 Let's define a story for our `Badge` component:
 
-<Story name="positive" args={{
+<Story 
+  name="positive" 
+  args={{
     status: 'positive',
     label: 'Positive'
-}}>
+  }} 
-  {Template.bind({})}
+  render={(args) => ({
-</Story>
+    Component: Badge,
+    props: args,
+  })} />
+ 
 
 We can drop it in a `Canvas` to get a code snippet:
 
 <Canvas>
-  <Story name="negative" args={{
+  <Story 
+    name="negative" 
+    args={{
       status: 'negative', 
       label: 'Negative'
-  }}>
+    }} 
-    {Template.bind({})}
+    render={(args) => ({
-  </Story>
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 
 We can even preview multiple Stories in a block. This
@@ -39,23 +45,37 @@ gets rendered as a group but defines individual stories
 with unique URLs, which is great for review and testing.
 
 <Canvas>
-  <Story name="warning" args={{
+  <Story 
+    name="warning" 
+    args={{
       status: 'warning',
       label: 'Warning' 
-  }}>
+    }}
-    {Template.bind({})}
+    render={(args) => ({
-  </Story>
+      Component: Badge,
-  <Story name="neutral" args={{
+      props: args,
+    })} />
+  
+  <Story 
+    name="neutral" 
+    args={{
       status: 'neutral', 
       label: 'Neutral' 
-  }}>
+    }}
-    {Template.bind({})}
+    render={(args) => ({
-  </Story>
+      Component: Badge,
-  <Story name="error" args={{
+      props: args,
+    })} />
+
+  <Story 
+    name="error" 
+    args={{
       status: 'error', 
       label: 'Error' 
-  }}>
+    }}
-    {Template.bind({})}
+    render={(args) => ({
-  </Story>
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 ```

docs/snippets/svelte/button-story-default-docs-code.mdx.mdx

@@ -21,6 +21,8 @@ export const someFunction = (someValue) => {
   return `i am a ${someValue}`;
 };
 
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
 <!-- 👇 Destructure the label from the args object and assigns the function result to a variable and pass it as a prop into the component -->
 <Story
   name="ExampleStory"
@@ -28,8 +30,8 @@ export const someFunction = (someValue) => {
     primary: true,
     size: 'small',
     label: "button",
-  }}>
+  }}
-  {(args) => {
+  render={(args) => {
     const { label } = args;
     const functionResult = someFunction(label);
     return {
@@ -40,5 +42,5 @@ export const someFunction = (someValue) => {
       },
     };
   }}
-</Story>
+/>
 ```

docs/snippets/svelte/button-story-with-args.mdx.mdx

@@ -5,19 +5,18 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import Button from './Button.svelte';
 
-<Meta title="Components/Button" component={Button} />
+<Meta title="Button" component={Button} />
 
-export const Template = (args) => ({
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-  Component: Button,
-  props: args,
-});
 
 <Story
   name="Primary"
   args={{
     primary: true,
     label: 'Button',
-  }}>
+  }}
-  {Template.bind({})}
+  render={(args)=>({
-</Story>
+    Component: Button,
+    props: args,
+  })} />
 ```

docs/snippets/svelte/button-story-with-emojis.mdx.mdx

@@ -5,33 +5,37 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import Button from './Button.svelte';
 
-<Meta title="Components/Button" component={Button} />
+<Meta title="Button" component={Button} />
 
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
-<Story name="Primary">
+<Story 
-  {{
+  name="Primary"
+  render={() => ({
+    Component: Button,
     props: {
       background: '#ff0',
       label: 'Button',
     },
-  }}
+  })} />
-</Story>
  
-<Story name="Secondary">
+<Story 
-  {{
+  name="Secondary" 
+  render={() => ({
+    Component: Button,
     props: {
       background: '#ff0',
       label: '😄👍😍💯',
     },
-  }}
+  })} />
-</Story>
   
-<Story name="Tertiary">
+<Story 
-  {{
+  name="Tertiary"
+  render={() => ({
+    Component: Button,
      props: {
       background: '#ff0',
       label: '📚📕📈🤓',
     },
-  }}
+  })} />
-</Story>
 ```

docs/snippets/svelte/button-story.mdx.mdx

@@ -7,14 +7,17 @@ import Button from './Button.svelte';
 
 <Meta title="Button" component={Button}/>
 
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
 # Button
 
-<Story name="Primary">
+<Story 
-  {{
+  name="Primary"
+  render={() => ({
+    Component: Button,
     props: {
       primary: true,
       label: 'Button',
     },
-  }}
+  })} />
-</Story>
 ```

docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx

@@ -1,16 +1,19 @@
 ```md
 <!-- Button.stories.mdx --->
 
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
 
 import Button from './Button.svelte';
 
-export const Template = (args) => ({
+<Meta title="Button" component={Button}/>
+
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
+<Story 
+  name="Basic" 
+  args={{ label: 'hello' }}
+  render={(args) => ({
     Component: Button,
     props: args,
-});
+  })} />
-
-<Story name="Basic" args={{ label: 'hello' }}>
-  {Template.bind({})}
-</Story>
 ```

docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx

@@ -5,17 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import MyComponent from './MyComponent.svelte';
 
-<Meta title="img" />
+<Meta title="img" component={MyComponent} />
 
-<Story name="withAnImage">
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-  {() => {
+
-    return {
+<Story 
+  name="withAnImage"
+  render={() => ({
     Component: MyComponent,
     props: {
       src: 'https://place-hold.it/350x150',
       alt: 'my image',
     },
-    };
+  })} />
-  }}
-</Story>
 ```

docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx

@@ -7,21 +7,21 @@ import MyComponent from './MyComponent.svelte';
 
 import imageFile from './static/image.png';
 
-<Meta title="img" />
+<Meta title="img" component={MyComponent} />
 
 export const image = {
   src: imageFile,
   alt: 'my image',
 };
 
-<Story name="withAnImage">
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-  {() => {
+
-    return {
+<Story 
+  name="withAnImage"
+  render={() => ({
     Component: MyComponent,
     props: {
       image: image,
     },
-    };
+  })} />
-  }}
-</Story>
 ```

docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx

@@ -5,17 +5,17 @@ import { Meta, Story } from '@storybook/addon-docs';
 
 import MyComponent from './MyComponent.svelte0;
 
-<Meta title="img" />
+<Meta title="img" component={MyComponent} />
 
-<Story name="withAnImage">
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-  {() => {
+
-    return {
+<Story 
+  name="withAnImage"
+  render={() => ({
     Component: MyComponent,
     props: {
       src: '/image.png',
       alt: 'my image',
     },
-    };
+  })} />
-  }}
-</Story>
 ```

docs/snippets/svelte/loader-story.mdx.mdx

@@ -9,6 +9,8 @@ import fetch from 'node-fetch';
 
 <Meta title="Examples/Loader" component={TodoItem} />
 
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
+
 <Story
   name="Primary"
   loaders={[
@@ -18,13 +20,12 @@ import fetch from 'node-fetch';
       ).json(),
     }),
   ]}
->
+  render={(args, { loaded: { todo } }) => ({
-  {(args, { loaded: { todo } }) => ({
+    Component: TodoItem,
-    Component: SampleLoaderComponent,
     props: {
       ...args,
       todo,
     },
   })}
-</Story>
+/>
 ```

docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx

@@ -1,12 +1,13 @@
 ```md
 <!-- Badge.stories.mdx --->
 
-import { Canvas } from '@storybook/addon-docs';
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
 
-export const Template = (args) => ({
+import Badge from './Badge.svelte';
-  Component: Badge,
+
-  props: args,
+<Meta title="MDX/Badge" component={Badge} />
-});
+
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 <Canvas>
   <Story 
@@ -14,26 +15,32 @@ export const Template = (args) => ({
     args={{
       status: 'warning',
       label: 'Warning',
-    }}>
+    }}
-    {Template.bind({})}
+    render={(args) => ({
-  </Story>
+      Component: Badge,
+      props: args,
+    })} />
   
   <Story 
     name="neutral"
     args={{
       status: 'neutral',
       label: 'Neutral',
-    }}>
+    }} 
-    {Template.bind({})}
+    render={(args) => ({
-  </Story>
+      Component: Badge,
+      props: args,
+    })} />
 
   <Story 
     name="error"
     args={{
       status: 'error',
       label: 'Error',
-    }}>
+    }}
-    {Template.bind({})}
+    render={(args) => ({
-  </Story>
+      Component: Badge,
+      props: args,
+    })} />
 </Canvas>
 ```

docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx

@@ -15,7 +15,9 @@ import MyComponent from './MyComponent.svelte';
       defaultViewport: 'iphone6',
     },
   }}
-/>
+  component={MyComponent} />
+
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
 
 <Story
   name="MyStory"
@@ -23,11 +25,8 @@ import MyComponent from './MyComponent.svelte';
     viewport: {
       defaultViewport: 'iphonex',
     }
-  }}>
-   {() => {
-    return {
-      Component: MyComponent,
-    };
   }}
-</Story>
+  render={() => ({
+    Component: MyComponent,
+  })} />
 ```

docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx

@@ -1,7 +1,11 @@
 ```md
 <!-- MyComponent.stories.mdx -->
 
-import { Story } from '@storybook/addon-docs';
+import { Meta, Story } from '@storybook/addon-docs';
+
+import MyComponent from './MyComponent.svelte';
+
+<Meta title="MDX Story with toolbars" component={MyComponent} />
 
 export const getCaptionForLocale = (locale) => {
   switch(locale) {
@@ -14,8 +18,10 @@ export const getCaptionForLocale = (locale) => {
   }
 };
 
-<Story name="StoryWithLocale">
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-  {(args, { globals: { locale } }) => {
+
+<Story name="StoryWithLocale"
+  render={(args, { globals: { locale } }) => {
     const caption = getCaptionForLocale(locale);
     return {
       component: MyComponent,
@@ -23,6 +29,5 @@ export const getCaptionForLocale = (locale) => {
         locale: caption,
       },
     };
-  }}
+  }} />
-</Story>
 ```

docs/snippets/svelte/my-component-with-env-variables.mdx.mdx

@@ -7,10 +7,7 @@ import MyComponent from './MyComponent.svelte';
 
 <Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
 
-export const Template = (args) => ({
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-  Component: MyComponent,
-  props: args,
-});
 
 <Canvas>
   <Story
@@ -18,8 +15,9 @@ export const Template = (args) => ({
     args={{
       propertyA: process.env.STORYBOOK_DATA_KEY,
     }}
-  >
+    render={(args) => ({
-    {Template.bind({})}
+      Component: MyComponent,
-  </Story>
+      props: args,
+    })} />
 </Canvas>
 ```

docs/snippets/svelte/your-component.mdx.mdx

@@ -6,18 +6,18 @@ import { Meta, Story } from '@storybook/addon-docs';
 import YourComponent from './YourComponent.svelte';
 
 <!--👇 The title prop determines where your story goes in the story list -->
+
 <Meta title="YourComponent" component={YourComponent} />
 
-<!--👇 We create a “template” of how args map to rendering -->
+<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
-export const Template = (args) => ({
-  Component: YourComponent,
-  props: args,
-});
 
 <!-- 👇 The args you need here will depend on your component -->
+
 <Story
   name="FirstStory"
-  args={{}}>
+  args={{}}
-  {Template.bind({})}
+  render={(args) => ({
-</Story>
+    Component: YourComponent,
+    props: args,
+  })} />
 ```