From c8587c743235ae4ca98542d670142322ab80fd3d Mon Sep 17 00:00:00 2001
From: Moritz Bischof <moritz.bischof1@gmail.com>
Date: Tue, 4 May 2021 19:21:57 +0200
Subject: [PATCH 1/4] add exception for Playground.svelte in svelte.config.js

---
 docs/svelte.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index fbf33fcbf6..5f37b09b90 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -61,6 +61,7 @@ function plugin() {
     if (
       node.lang !== "svelte" &&
       !node.value.startsWith("<FileSource") &&
+      !node.value.startsWith("<Playground") &&
       !node.value.startsWith("<script>") &&
       !node.value.match(/svx-ignore/g)
     ) {

From f60535b88169bad8b9d24f189baf619fcb18e7df Mon Sep 17 00:00:00 2001
From: Moritz Bischof <moritz.bischof1@gmail.com>
Date: Tue, 4 May 2021 19:23:59 +0200
Subject: [PATCH 2/4] add Checkbox and TextInput wrapper components

---
 docs/src/components/playground/Checkbox.svelte  | 7 +++++++
 docs/src/components/playground/TextInput.svelte | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 docs/src/components/playground/Checkbox.svelte
 create mode 100644 docs/src/components/playground/TextInput.svelte

diff --git a/docs/src/components/playground/Checkbox.svelte b/docs/src/components/playground/Checkbox.svelte
new file mode 100644
index 0000000000..ac235ff9aa
--- /dev/null
+++ b/docs/src/components/playground/Checkbox.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { Checkbox } from "carbon-components-svelte";
+
+  export let value = undefined;
+</script>
+
+<Checkbox bind:checked="{value}" {...$$restProps} />
diff --git a/docs/src/components/playground/TextInput.svelte b/docs/src/components/playground/TextInput.svelte
new file mode 100644
index 0000000000..4da95d1396
--- /dev/null
+++ b/docs/src/components/playground/TextInput.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { TextInput } from "carbon-components-svelte";
+
+  export let value;
+</script>
+
+<TextInput style="margin-bottom: 1rem;" bind:value {...$$restProps} />

From 088524da82523dc931ecfc91fd4eb395e53c878c Mon Sep 17 00:00:00 2001
From: Moritz Bischof <moritz.bischof1@gmail.com>
Date: Tue, 4 May 2021 19:24:11 +0200
Subject: [PATCH 3/4] implement Playground

---
 .../components/playground/Playground.svelte   | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 docs/src/components/playground/Playground.svelte

diff --git a/docs/src/components/playground/Playground.svelte b/docs/src/components/playground/Playground.svelte
new file mode 100644
index 0000000000..5e57f01c68
--- /dev/null
+++ b/docs/src/components/playground/Playground.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { Form } from "carbon-components-svelte";
+  import Checkbox from "./Checkbox.svelte";
+  import TextInput from "./TextInput.svelte";
+
+  export let component;
+  export let props;
+
+  const components = { Checkbox, TextInput };
+  const usedProps = {};
+</script>
+
+<div class="playground">
+  <div class="element">
+    <div class="element-wrapper">
+      <svelte:component this="{component}" {...usedProps} />
+    </div>
+  </div>
+
+  <div class="options">
+    <h4 class="options-heading">Options</h4>
+    <div class="options-content">
+      <Form>
+        {#each Object.entries(props) as [name, prop]}
+          <svelte:component
+            this="{components[prop.component]}"
+            bind:value="{usedProps[name]}"
+            {...prop.props}
+          />
+        {/each}
+      </Form>
+    </div>
+  </div>
+</div>
+
+<style>
+  .playground {
+    border: 1px solid var(--cds-ui-03);
+    display: flex;
+    flex-direction: row;
+    margin: 0 -1rem;
+    max-width: 56rem;
+  }
+
+  .element {
+    border-right: 1px solid var(--cds-ui-03);
+    flex-basis: 60%;
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+  }
+
+  .options {
+    flex-basis: 40%;
+  }
+
+  .options-heading {
+    border-bottom: 1px solid var(--cds-ui-03);
+    padding: 0.5rem 1rem;
+  }
+
+  .options-content {
+    padding: 1rem;
+  }
+</style>

From eb8ca16a14705c7a560078c95053a05b76d9da53 Mon Sep 17 00:00:00 2001
From: Moritz Bischof <moritz.bischof1@gmail.com>
Date: Tue, 4 May 2021 19:24:27 +0200
Subject: [PATCH 4/4] add example usage to Checkbox docs

---
 docs/src/pages/components/Checkbox.svx | 30 ++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/docs/src/pages/components/Checkbox.svx b/docs/src/pages/components/Checkbox.svx
index 8bbd26c4ba..1710fb0fff 100644
--- a/docs/src/pages/components/Checkbox.svx
+++ b/docs/src/pages/components/Checkbox.svx
@@ -1,8 +1,38 @@
 <script>
   import { Checkbox } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
+  import Playground from "../../components/playground/Playground.svelte";
 </script>
 
+<Playground
+    component={Checkbox}
+    props={{
+        labelText: {
+            component: "TextInput",
+            props: { value: "Label text", labelText: "Label" }
+        },
+        checked: {
+            component: "Checkbox",
+            props: { labelText: "Checked" }
+        },
+        indeterminate: {
+            component: "Checkbox",
+            props: { labelText: "Indeterminate" }
+        },
+        hideLabel: {
+            component: "Checkbox",
+            props: { labelText: "Hide label" }
+        },
+        disabled: {
+            component: "Checkbox",
+            props: { labelText: "Disabled" }
+        },
+        skeleton: {
+            component: "Checkbox",
+            props: { labelText: "Skeleton" }
+        },
+    }} />
+
 ### Default (unchecked)
 
 <Checkbox labelText="Label text" />