Add button-story-with-args.js snippet for html framework

docs/get-started/whats-a-story.md

@@ -55,6 +55,7 @@ The above story definition can be further improved to take advantage of [Storybo
     'svelte/button-story-with-args.js.mdx',
     'svelte/button-story-with-args.native-format.mdx',
     'svelte/button-story-with-args.mdx.mdx',
+    'html/button-story-with-args.js.mdx',
   ]}
 />
 

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

@@ -0,0 +1,27 @@
+```js
+export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/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) => {
+  const btn = document.createElement('button');
+  btn.innerText = args.label;
+
+  const mode = args.primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+  btn.className = ['storybook-button', 'storybook-button--medium', mode].join(' ');
+
+  return btn;
+};
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+```