Merge pull request #16989 from WIVSW/button-story-snippets-for-html

Button story snippets for html framework

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

@@ -25,6 +25,8 @@ Let’s start with the `Button` component. A story is a function that describes
     'svelte/button-story.native-format.mdx',
     'svelte/button-story.mdx.mdx',
     'web-components/button-story.js.mdx',
+    'html/button-story.js.mdx',
+    'html/button-story.ts.mdx',
   ]}
 />
 

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

@@ -0,0 +1,22 @@
+```js
+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 = () => {
+  const btn = document.createElement('button');
+  btn.innerText = 'Button';
+
+  btn.className = [
+    'storybook-button',
+    'storybook-button--medium',
+    'storybook-button--primary',
+  ].join(' ');
+
+  return btn;
+};
+```

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

@@ -0,0 +1,24 @@
+```ts
+import { Meta, StoryFn } from '@storybook/html';
+
+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;
+
+export const Primary: StoryFn = (): HTMLButtonElement => {
+  const btn = document.createElement('button');
+  btn.innerText = 'Button';
+
+  btn.className = [
+    'storybook-button',
+    'storybook-button--medium',
+    'storybook-button--primary',
+  ].join(' ');
+
+  return btn;
+};
+```