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/framed/RadioButton/ProgrammaticRadioButton.svelte

@@ -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>

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>