WebComponents CSF 3

docs/snippets/web-components/button-group-story.js.mdx

@@ -1,26 +1,30 @@
 ```js
 // demo-button-group.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button-group';
+import { ButtonGroup } from './demo-button-group';
 
 //👇 Imports the Button stories
 import * as ButtonStories from './demo-button.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'ButtonGroup',
 };
 
-const Template = ({ buttons, orientation }) => {
-  return html`
-    <demo-button-group .buttons=${buttons} .orientation=${orientation}></demo-button-group>
-  `;
-};
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
 
-export const Pair = Template.bind({});
-Pair.args = {
-  buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
-  orientation: 'horizontal',
+export const Pair = {
+  render: (args) => ButtonGroup(args),
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
 };
 ```

docs/snippets/web-components/button-story-component-args-primary.js.mdx

@@ -1,11 +1,13 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   //👇 Creates specific argTypes
   argTypes: {
@@ -17,5 +19,12 @@ export default {
   },
 };
 
-export const Primary = ({ primary }) => html`<demo-button ?primary=${primary}></demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: ({ primary }) => Button({ primary }),
+};
 ```

docs/snippets/web-components/button-story-component-decorator.js.mdx

@@ -6,9 +6,20 @@ import { html } from 'lit-html';
 import './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
 
-export const Primary = () => html`<demo-button primary></demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => html`<demo-button primary></demo-button>`,
+};
 ```

docs/snippets/web-components/button-story-decorator.js.mdx

@@ -1,15 +1,26 @@
 ```js
 // demo-button.stories.js
 
+import { Button } from './demo-button';
+
 import { html } from 'lit-html';
 
-import './demo-button'; 
-
 export default {
-    title: 'Button',
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
 };
 
-export const Primary = () => html`<demo-button>Hello World</demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
 
-Primary.decorators = [(story) => html`<div style="margin: 3em">${story()}</div>`]
+export const Primary = {
+  render: (args) => Button(args),
+  decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
+};
 ```

docs/snippets/web-components/button-story-default-export-with-component.js.mdx

@@ -1,9 +1,13 @@
 ```js
 // demo-button.stories.js
 
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
-```
+```

docs/snippets/web-components/button-story-rename-story.js.mdx

@@ -1,15 +1,23 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 
-export const Primary = () => html`<demo-button primary></demo-button>`;
-
-Primary.storyName = 'I am the primary';
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  name: 'I am the primary',
+  render: (args) => Button(args),
+};
 ```

docs/snippets/web-components/button-story-using-args.js.mdx

@@ -1,25 +1,43 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = ({ background, label }) =>
-  html`<demo-button .background=${background} .label=${label}></demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
 
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-Primary.args = { background: '#ff0', label: 'Button' };
+export const Primary = {
+  render: (args) => Button(args),
+  args: {
+    background: '#ff0',
+    label: 'Button',
+  },
+};
 
-export const Secondary = Template.bind({});
-Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+export const Secondary = {
+  render: (args) => Button(args),
+  args: {
+    ...Primary.args,
+    label: '😄👍😍💯',
+  },
+};
 
-export const Tertiary = Template.bind({});
-Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+export const Tertiary = {
+  render: (args) => Button(args),
+  args: {
+    ...Primary.args,
+    label: '📚📕📈🤓',
+  },
+};
 ```

docs/snippets/web-components/button-story-with-args.js.mdx

@@ -1,23 +1,26 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 
-//👇 We create a “template” of how args map to rendering
-const Template = ({ primary, label }) =>
-  html`<demo-button ?primary=${primary} .label=${label}></demo-button>`;
-
-//👇 Each story then reuses that template
-export const Primary = Template.bind({});
-
-Primary.args = {
-  primary: true,
-  label: 'Button',
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: (args) => Button(args),
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 ```

docs/snippets/web-components/button-story-with-blue-args.js.mdx

@@ -1,11 +1,13 @@
 ```js
 // demo-button.stories.js
 
-import { html } from 'lit-html';
-
-import './demo-button';
+import { Button } from './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
   //👇 Creates specific parameters for the story
   parameters: {

docs/snippets/web-components/button-story-with-emojis.js.mdx

@@ -1,4 +1,4 @@
-```ts
+```js
 // demo-button.stories.js
 
 import { html } from 'lit-html';
@@ -6,9 +6,27 @@ import { html } from 'lit-html';
 import './demo-button';
 
 export default {
-    title: 'Button',
-}
-export const Primary = () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`;
-export const Secondary = () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`;
-export const Tertiary = () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`;
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`,
+};
+
+export const Secondary = {
+  render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`,
+};
+
+export const Tertiary = {
+  render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`,
+};
 ```

docs/snippets/web-components/button-story.js.mdx

@@ -6,8 +6,19 @@ import { html } from 'lit-html';
 import './demo-button';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'Button',
 };
 
-export const Primary = () => html`<demo-button primary></demo-button>`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Primary = {
+  render: () => html`<demo-button primary></demo-button>`,
+};
 ```

docs/snippets/web-components/component-story-with-custom-render-function.js.mdx

@@ -0,0 +1,30 @@
+```js
+// MyComponent.stories.js
+
+import { html } from 'lit-html';
+
+import './Layout';
+import './MyComponent';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'MyComponent',
+};
+
+// This story uses a render function to fully control how the component renders.
+export const Example = {
+  render: () => html`
+    <layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <my-component />
+      </article>
+    </layout>
+  `,
+};
+```

docs/snippets/web-components/list-story-expanded.js.mdx

@@ -7,26 +7,35 @@ import './demo-list';
 import './demo-list-item';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
-export const Empty = (args) => html`<demo-list></demo-list>`;
-
-export const OneItem = (args) => {
-  return html`
-    <demo-list>
-      <demo-list-item></demo-list-item>
-    </demo-list>
-  `;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const Empty = {
+  render: () => html`<demo-list></demo-list>`,
 };
 
-export const ManyItems = (args) => {
-  return html`
+export const OneItem = {
+  render: () => html`
     <demo-list>
       <demo-list-item></demo-list-item>
-      <demo-list-item></demo-list-item>
-      <demo-list-item></demo-list-item>
     </demo-list>
-  `;
+  `,
+};
+
+export const ManyItems = {
+  render: () => html` <demo-list>
+    <demo-list-item></demo-list-item>
+    <demo-list-item></demo-list-item>
+    <demo-list-item></demo-list-item>
+  </demo-list>`,
 };
 ```

docs/snippets/web-components/list-story-reuse-data.js.mdx

@@ -7,19 +7,28 @@ import './demo-list';
 import './demo-list-item';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
 //👇 We're importing the necessary stories from ListItem
 import { Selected, Unselected } from './demo-list-item.stories';
 
-export const ManyItems = (args) => {
-  return html`
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const ManyItems = {
+  render: (args) => html`
     <demo-list>
-      ${Selected({ ...args, ...Selected.args })}
-      ${Unselected({ ...args, ...Unselected.args })}
-      ${Unselected({ ...args, ...Unselected.args })}
+      ${Selected({ ...args, ...Selected.args })} ${Unselected({ ...args, ...Unselected.args })} ${Unselected(
+        { ...args, ...Unselected.args }
+      )}
     </demo-list>
-  `;
+  `,
 };
 ```

docs/snippets/web-components/list-story-starter.js.mdx

@@ -6,9 +6,15 @@ import { html } from 'lit-html';
 import './demo-list';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'List',
 };
 
 // Always an empty list, not super interesting
-const Template = (args) => html`<demo-list></demo-list>`
+export const Empty = {
+  render: () => html`<demo-list></demo-list>`,
+};
 ```

docs/snippets/web-components/list-story-unchecked.js.mdx

@@ -10,15 +10,22 @@ import { Unchecked } from './my-list-item.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/web-components/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'my-list',
 };
 
-export const OneItem = () => html`
-  <List>
-    ${Unchecked({ ...Unchecked.args })}
-  </List>
-`;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const OneItem = {
+  render: () => html`
+    <List>
+      ${Unchecked({ ...Unchecked.args })}
+    </List>
+  `,
+};
 ```

docs/snippets/web-components/list-story-unchecked.ts.mdx

@@ -12,7 +12,7 @@ import { Unchecked } from './my-list-item.stories';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/web-components/configure/overview#configure-story-loading
+  * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
   * to learn how to generate automatic titles
   */
   title: 'my-list',

docs/snippets/web-components/my-component-story-configure-viewports.js.mdx

@@ -1,13 +1,15 @@
 ```js
 // my-component.stories.js
 
-import { html } from 'lit-html';
-
-import './my-component';
+import { MyComponent } from'./my-component';
 
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
   parameters: {
     //👇 The viewports object from the Essentials addon
@@ -20,10 +22,17 @@ export default {
   };
 };
 
-export const MyStory = () => html`<my-component></my-component>`;
-MyStory.parameters = {
-  viewport: {
-    defaultViewport: 'iphonex'
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const InitialButton = {
+  render: () => MyComponent(),
+  parameters: {
+    viewport: {
+      defaultViewport: 'iphonex'
+    },
   },
 };
 ```

docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx

@@ -3,8 +3,10 @@
 
 import { html } from 'lit-html';
 
-export const StoryWithLocale = ({ globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return html`<p>${caption}</p>`;
+export const StoryWithLocale = {
+  render: ({ globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return html`<p>${caption}</p>`;
+  },
 };
 ```

docs/snippets/web-components/my-component-story-use-globaltype.js.mdx

@@ -18,8 +18,10 @@ const getCaptionForLocale = (locale) => {
   }
 };
 
-export const StoryWithLocale = ({ propA, propB }, { globals: { locale } }) => {
-  const caption = getCaptionForLocale(locale);
-  return html`<p>${caption}</p>`;
+export const StoryWithLocale = {
+  render: (args, { globals: { locale } }) => {
+    const caption = getCaptionForLocale(locale);
+    return html`<p>${caption}</p>`;
+  },
 };
 ```

docs/snippets/web-components/my-component-with-env-variables.js.mdx

@@ -1,19 +1,25 @@
 ```js
 // my-component.stories.js
 
-import { html } from 'lit-html';
-
-import './my-component';
+import { MyComponent } from './my-component';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'MyComponent',
 };
 
-const Template = ({ propertyA }) => html`<my-component .propertyA=${propertyA}></my-component>`;
-
-export const Default = Template.bind({});
-
-Default.args = {
-  propertyA: process.env.STORYBOOK_DATA_KEY,
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const ExampleStory = {
+  render: (args) => MyComponent({ propertyA }),
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
 };
 ```

docs/snippets/web-components/your-component.js.mdx

@@ -1,22 +1,26 @@
 ```js
 // your-component.stories.js
 
-import { html } from 'lit-html';
-
-import './your-component';
+import { MyComponent } from './your-component';
 
 // This default export determines where your story goes in the story list
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/7.0/web-components/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'YourComponent',
 };
 
-// 👇 We create a “template” of how args map to rendering
-const Template = ({ aProperty }) => html`<your-component .yourProperty=${aProperty}></your-component>`;
-
-export const FirstStory = Template.bind({});
-
-FirstStory.args = {
-  /* 👇 The args you need here will depend on your component */
-  aProperty: 'aProperty'
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/web-components/api/csf
+ * to learn how to use render functions.
+ */
+export const FirstStory = {
+  render: (args) => MyComponent(args),
+  args: {
+    //👇 The args you need here will depend on your component
+  },
 };
-```
+```