From 58de79d66bafb2a5e9dd7dc389aaaae5b7a11603 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 16 Jan 2022 15:06:29 -0800
Subject: [PATCH] docs(radio-button): simplify reactive example (#1012)

* docs(radio-button): simplify reactive radio button example

* docs(radio-button): rename to "Reactive example"
---
 docs/src/pages/components/RadioButton.svx     |  6 ++--
 .../ProgrammaticRadioButton.svelte            | 35 -------------------
 .../RadioButton/RadioButtonReactive.svelte    | 32 +++++++++++++++++
 3 files changed, 35 insertions(+), 38 deletions(-)
 delete mode 100644 docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
 create mode 100644 docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte

diff --git a/docs/src/pages/components/RadioButton.svx b/docs/src/pages/components/RadioButton.svx
index aac4ea1d..dcde6c20 100644
--- a/docs/src/pages/components/RadioButton.svx
+++ b/docs/src/pages/components/RadioButton.svx
@@ -41,11 +41,11 @@ Use the named "legendText" slot to customize the legend text.
   <RadioButton labelText="Pro (128 GB)" value="pro" />
 </RadioButtonGroup>
 
-### Programmatic usage
+### Reactive example
 
-Bind the selected value using the `selected` prop.
+Use the `selected` prop to bind and update the selected value.
 
-<FileSource src="/framed/RadioButton/ProgrammaticRadioButton" />
+<FileSource src="/framed/RadioButton/RadioButtonReactive" />
 
 ### Left-aligned label text
 
diff --git a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
deleted file mode 100644
index ee361f5b..00000000
--- a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-  import {
-    ButtonSet,
-    Button,
-    RadioButtonGroup,
-    RadioButton,
-  } from "carbon-components-svelte";
-
-  let plan = "standard";
-</script>
-
-<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
-  <RadioButton labelText="Free (1 GB)" value="free" />
-  <RadioButton labelText="Standard (10 GB)" value="standard" />
-  <RadioButton labelText="Pro (128 GB)" value="pro" />
-</RadioButtonGroup>
-
-<ButtonSet style="margin-top: var(--cds-layout-03)">
-  {#each ["free", "standard", "pro"] as value}
-    <Button
-      disabled="{plan === value}"
-      kind="secondary"
-      on:click="{() => {
-        plan = value;
-      }}"
-    >
-      Select "{value}"
-    </Button>
-  {/each}
-</ButtonSet>
-
-<div style="margin: var(--cds-layout-01) 0">
-  Selected plan:
-  <strong>{plan}</strong>
-</div>
diff --git a/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
new file mode 100644
index 00000000..9168d21f
--- /dev/null
+++ b/docs/src/pages/framed/RadioButton/RadioButtonReactive.svelte
@@ -0,0 +1,32 @@
+<script>
+  import {
+    Button,
+    RadioButtonGroup,
+    RadioButton,
+  } from "carbon-components-svelte";
+
+  const plans = ["Free (1 GB)", "Standard (10 GB)", "Pro (128 GB)"];
+
+  let plan = plans[1];
+</script>
+
+<RadioButtonGroup legendText="Storage tier (disk)" bind:selected="{plan}">
+  {#each plans as value}
+    <RadioButton labelText="{value}" value="{value}" />
+  {/each}
+</RadioButtonGroup>
+
+<div style="margin: var(--cds-layout-01) 0">
+  {#each plans as value}
+    <Button
+      kind="secondary"
+      disabled="{plan === value}"
+      on:click="{() => (plan = value)}"
+    >
+      Select "{value}"
+    </Button>
+  {/each}
+</div>
+
+Selected plan:
+<strong>{plan}</strong>