From c37d1cfea6f8d471809f7de18744ff071640f3db Mon Sep 17 00:00:00 2001
From: fbredius-hp <frankbredius@hotmail.com>
Date: Tue, 8 Mar 2022 12:09:26 +0100
Subject: [PATCH] Docs: Add remaining Preact code snippets for Get-Started
 section

---
 docs/get-started/setup.md                     |  1 +
 docs/get-started/whats-a-story.md             |  1 +
 .../preact/button-story-with-args.js.mdx      | 26 +++++++++++++++++++
 docs/snippets/preact/your-component.js.mdx    | 26 +++++++++++++++++++
 4 files changed, 54 insertions(+)
 create mode 100644 docs/snippets/preact/button-story-with-args.js.mdx
 create mode 100644 docs/snippets/preact/your-component.js.mdx

diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
index 6db9c990779..792a7365c44 100644
--- a/docs/get-started/setup.md
+++ b/docs/get-started/setup.md
@@ -25,6 +25,7 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'web-components/your-component.js.mdx',
     'html/your-component.js.mdx',
     'html/your-component.ts.mdx',
+    'preact/your-component.js.mdx',
   ]}
 />
 
diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
index 71254da543f..93415b8ae92 100644
--- a/docs/get-started/whats-a-story.md
+++ b/docs/get-started/whats-a-story.md
@@ -57,6 +57,7 @@ The above story definition can be further improved to take advantage of [Storybo
     'svelte/button-story-with-args.mdx.mdx',
     'html/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',
+    'preact/button-story-with-args.js.mdx',
   ]}
 />
 
diff --git a/docs/snippets/preact/button-story-with-args.js.mdx b/docs/snippets/preact/button-story-with-args.js.mdx
new file mode 100644
index 00000000000..befddec8026
--- /dev/null
+++ b/docs/snippets/preact/button-story-with-args.js.mdx
@@ -0,0 +1,26 @@
+```js
+// Button.stories.js|jsx
+
+/** @jsx h */
+import { h } from 'preact';
+
+import { Button } from './Button';
+
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'Button',
+  component: Button,
+}
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <Button {...args} />;
+
+//👇 Each story then reuses that template
+export const Primary = Template.bind({});
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+```
\ No newline at end of file
diff --git a/docs/snippets/preact/your-component.js.mdx b/docs/snippets/preact/your-component.js.mdx
new file mode 100644
index 00000000000..11b356c2498
--- /dev/null
+++ b/docs/snippets/preact/your-component.js.mdx
@@ -0,0 +1,26 @@
+```js
+// YourComponent.stories.js|jsx
+
+/** @jsx h */
+import { h } from 'preact';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+export default {
+  /* 👇 The title prop is optional.
+  * See https://storybook.js.org/docsreact/configure/overview#configure-story-loading
+  * to learn how to generate automatic titles
+  */
+  title: 'YourComponent',
+  component: YourComponent,
+}
+
+//👇 We create a “template” of how args map to rendering
+const Template = (args) => <YourComponent {...args} />;
+
+export const FirstStory = Template.bind({});
+FirstStory.args = {
+  //👇 The args you need here will depend on your component
+};
+```
\ No newline at end of file