Add html framework examples for the introduction docs

docs/snippets/html/button-story-component-decorator.js.mdx

@@ -0,0 +1,21 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  decorators: [(story) => {
+    const decorator = document.createElement('div');
+    decorator.style.margin = '3em';
+    decorator.appendChild(story());
+    return decorator;
+  }],
+};
+
+export const Primary = (args) => createButton(args);
+```

docs/snippets/html/button-story-component-decorator.ts.mdx

@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  decorators: [(story) => {
+    const decorator = document.createElement('div');
+    decorator.style.margin = '3em';
+    decorator.appendChild(story());
+    return decorator;
+  }],
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+```

docs/snippets/html/button-story-default-exports.js.mdx

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

docs/snippets/html/button-story-default-exports.ts.mdx

@@ -0,0 +1,15 @@
+```ts
+// Button.stories.ts
+
+import { Meta } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+```

docs/snippets/html/button-story-rename-story.js.mdx

@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+
+export const Primary = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```

docs/snippets/html/button-story-rename-story.ts.mdx

@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+Primary.storyName = 'I am the primary';
+```

docs/snippets/html/button-story-using-args.js.mdx

@@ -0,0 +1,26 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/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 = (args) => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```

docs/snippets/html/button-story-using-args.ts.mdx

@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+
+//👇 We create a “template” of how args map to rendering
+const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => createButton(args);
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = { primary: true, label: 'Button' };
+
+export const Secondary = Template.bind({});
+Secondary.args = { ...Primary.args, label: '😄👍😍💯' };
+
+export const Tertiary = Template.bind({});
+Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };
+```

docs/snippets/html/button-story-with-args.js.mdx

@@ -1,4 +1,6 @@
 ```js
+// Button.stories.js
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading

docs/snippets/html/button-story-with-args.ts.mdx

@@ -1,16 +1,23 @@
 ```ts
+// Button.stories.ts
+
 import { Meta, StoryFn } from '@storybook/html';
 
+type ButtonArgs = {
+  primary: boolean;
+  label: string;
+}
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
    * to learn how to generate automatic titles
    */
   title: 'Button',
-} as Meta;
+} as Meta<ButtonArgs>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: StoryFn = (args): HTMLButtonElement => {
+const Template: StoryFn<ButtonArgs> = (args): HTMLButtonElement => {
   const btn = document.createElement('button');
   btn.innerText = args.label;
 

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

@@ -0,0 +1,25 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+};
+
+export const Primary = (args) => createButton(args);
+```

docs/snippets/html/button-story-with-blue-args.ts.mdx

@@ -0,0 +1,27 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  //👇 Creates specific parameters for the story
+  parameters: {
+    backgrounds: {
+      values: [
+        { name: 'red', value: '#f00' },
+        { name: 'green', value: '#0f0' },
+        { name: 'blue', value: '#00f' },
+      ],
+    },
+  },
+} as Meta<ButtonArgs>;
+
+export const Primary: StoryFn<ButtonArgs> = (args) => createButton(args);
+```

docs/snippets/html/button-story-with-emojis.js.mdx

@@ -0,0 +1,16 @@
+```js
+// Button.stories.js
+
+import { createButton } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+};
+export const Primary = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```

docs/snippets/html/button-story-with-emojis.ts.mdx

@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+import { createButton, ButtonArgs } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+} as Meta<ButtonArgs>;
+export const Primary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "Button"});
+export const Secondary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "😄👍😍💯"});
+export const Tertiary: StoryFn<ButtonArgs> = () => createButton({ backgroundColor: "#ff0", label: "📚📕📈🤓"});
+```

docs/snippets/html/button-story.js.mdx

@@ -1,4 +1,6 @@
 ```js
+// Button.stories.js
+
 export default {
   /* 👇 The title prop is optional.
    * See https://storybook.js.org/docs/html/configure/overview#configure-story-loading

docs/snippets/html/button-story.ts.mdx

@@ -1,4 +1,6 @@
 ```ts
+// Button.stories.ts
+
 import { Meta, StoryFn } from '@storybook/html';
 
 export default {

docs/snippets/html/list-story-expanded.js.mdx

@@ -0,0 +1,27 @@
+
+```js
+// List.stories.js
+
+import { createList } from  './List';
+import { createListItem } from './ListItem';
+
+export default {
+  title: 'List',
+};
+
+export const Empty = (args) => createList(args);
+
+export const OneItem = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  return list;
+};
+```

docs/snippets/html/list-story-expanded.ts.mdx

@@ -0,0 +1,29 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+import { createListItem } from './ListItem';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+export const Empty: StoryFn<ListArgs> = (args) => createList(args);
+
+export const OneItem: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  list.appendChild(createListItem());
+  return list;
+};
+```

docs/snippets/html/list-story-reuse-data.js.mdx

@@ -0,0 +1,22 @@
+
+```js
+// List.stories.js
+
+import { createList } from  './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  title: 'List',
+};
+
+export const ManyItems = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem(Selected.args));
+  list.appendChild(createListItem(Unselected.args));
+  list.appendChild(createListItem(Unselected.args));
+  return list;
+};
+```

docs/snippets/html/list-story-reuse-data.ts.mdx

@@ -0,0 +1,32 @@
+
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+import { createListItem } from './ListItem';
+
+// 👇 We're importing the necessary stories from ListItem
+import { Selected, Unselected } from './ListItem.stories';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+export const Empty: StoryFn<ListArgs> = (args) => createList(args);
+
+export const OneItem: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem());
+  return list;
+};
+
+export const ManyItems: StoryFn<ListArgs> = (args) => {
+  const list = createList(args);
+  list.appendChild(createListItem(Selected.args));
+  list.appendChild(createListItem(Unselected.args));
+  list.appendChild(createListItem(Unselected.args));
+  return list;
+};
+```

docs/snippets/html/list-story-starter.js.mdx

@@ -0,0 +1,12 @@
+```js
+// List.stories.js
+
+import { createList } from  './List';
+
+export default {
+  title: 'List',
+};
+
+// Always an empty list, not super interesting
+const Template = (args) => createList(args);
+```

docs/snippets/html/list-story-starter.ts.mdx

@@ -0,0 +1,14 @@
+```ts
+// List.stories.ts
+
+import { Meta, StoryFn } from '@storybook/html';
+
+import { createList, ListArgs } from  './List';
+
+export default {
+  title: 'List',
+} as Meta<ListArgs>;
+
+// Always an empty list, not super interesting
+const Template: StoryFn<ListArgs> = (args) => createList(args);
+```

docs/writing-stories/args.md

@@ -33,6 +33,8 @@ To define the args of a single story, use the `args` CSF story key:
     'svelte/button-story-with-args.native-format.mdx',
     'svelte/button-story-with-args.mdx.mdx',
     'web-components/button-story-with-args.js.mdx',
+    'html/button-story-with-args.ts.mdx',
+    'html/button-story-with-args.js.mdx',
   ]}
 />
 

docs/writing-stories/introduction.md

@@ -37,6 +37,8 @@ The _default_ export metadata controls how Storybook lists your stories and prov
     'angular/button-story-default-export-with-component.ts.mdx',
     'svelte/button-story-default-export-with-component.js.mdx',
     'web-components/button-story-default-export-with-component.js.mdx',
+    'html/button-story-default-export.js.mdx',
+    'html/button-story-default-export.ts.mdx',
   ]}
 />
 
@@ -59,6 +61,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r
     'svelte/button-story.js.mdx',
     'svelte/button-story.native-format.mdx',
     'web-components/button-story.js.mdx',
+    'html/button-story.js.mdx',
+    'html/button-story.ts.mdx',
   ]}
 />
 
@@ -99,6 +103,8 @@ You can rename any particular story you need. For instance, to give it a more ac
     'angular/button-story-rename-story.ts.mdx',
     'svelte/button-story-rename-story.js.mdx',
     'web-components/button-story-rename-story.js.mdx',
+    'html/button-story-rename-story.js.mdx',
+    'html/button-story-rename-story.ts.mdx',
   ]}
 />
 
@@ -127,6 +133,8 @@ A story is a function that describes how to render a component. You can have mul
     'svelte/button-story-with-emojis.native-format.mdx',
     'svelte/button-story-with-emojis.mdx.mdx',
     'web-components/button-story-with-emojis.js.mdx',
+    'html/button-story-with-emojis.js.mdx',
+    'html/button-story-with-emojis.ts.mdx',
   ]}
 />
 
@@ -152,6 +160,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
     'svelte/button-story-using-args.js.mdx',
     'svelte/button-story-using-args.native-format.mdx',
     'web-components/button-story-using-args.js.mdx',
+    'html/button-story-using-args.js.mdx',
+    'html/button-story-using-args.ts.mdx',
   ]}
 />
 
@@ -254,6 +264,8 @@ For instance, suppose you wanted to test your Button component against a differe
     'svelte/button-story-with-blue-args.native-format.mdx',
     'svelte/button-story-with-blue-args.mdx.mdx',
     'web-components/button-story-with-blue-args.js.mdx',
+    'html/button-story-with-blue-args.js.mdx',
+    'html/button-story-with-blue-args.ts.mdx',
   ]}
 />
 
@@ -286,6 +298,8 @@ A simple example is adding padding to a component’s stories. Accomplish this u
     'svelte/button-story-component-decorator.native-format.mdx',
     'svelte/button-story-component-decorator.mdx.mdx',
     'web-components/button-story-component-decorator.js.mdx',
+    'html/button-story-component-decorator.js.mdx',
+    'html/button-story-component-decorator.ts.mdx',
   ]}
 />
 
@@ -310,6 +324,8 @@ When building design systems or component libraries, you may have two or more co
     'vue/list-story-starter.ts-3.ts.mdx',
     'svelte/list-story-starter.native-format.mdx',
     'web-components/list-story-starter.js.mdx',
+    'html/list-story-starter.js.mdx',
+    'html/list-story-starter.ts.mdx',
   ]}
 />
 
@@ -330,6 +346,8 @@ In such cases, it makes sense to render a different function for each story:
     'vue/list-story-expanded.ts-3.ts.mdx',
     'svelte/list-story-expanded.native-format.mdx',
     'web-components/list-story-expanded.js.mdx',
+    'html/list-story-expanded.js.mdx',
+    'html/list-story-expanded.ts.mdx',
   ]}
 />
 
@@ -349,6 +367,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T
     'vue/list-story-reuse-data.3.js.mdx',
     'vue/list-story-reuse-data.ts-3.ts.mdx',
     'web-components/list-story-reuse-data.js.mdx',
+    'html/list-story-reuse-data.js.mdx',
+    'html/list-story-reuse-data.ts.mdx',
   ]}
 />