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

---
 .../ProgrammaticRadioButton.svelte            | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
index ee361f5b..9168d21f 100644
--- a/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
+++ b/docs/src/pages/framed/RadioButton/ProgrammaticRadioButton.svelte
@@ -1,35 +1,32 @@
 <script>
   import {
-    ButtonSet,
     Button,
     RadioButtonGroup,
     RadioButton,
   } from "carbon-components-svelte";
 
-  let plan = "standard";
+  const plans = ["Free (1 GB)", "Standard (10 GB)", "Pro (128 GB)"];
+
+  let plan = plans[1];
 </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" />
+  {#each plans as value}
+    <RadioButton labelText="{value}" value="{value}" />
+  {/each}
 </RadioButtonGroup>
 
-<ButtonSet style="margin-top: var(--cds-layout-03)">
-  {#each ["free", "standard", "pro"] as value}
+<div style="margin: var(--cds-layout-01) 0">
+  {#each plans as value}
     <Button
-      disabled="{plan === value}"
       kind="secondary"
-      on:click="{() => {
-        plan = value;
-      }}"
+      disabled="{plan === value}"
+      on:click="{() => (plan = value)}"
     >
       Select "{value}"
     </Button>
   {/each}
-</ButtonSet>
-
-<div style="margin: var(--cds-layout-01) 0">
-  Selected plan:
-  <strong>{plan}</strong>
 </div>
+
+Selected plan:
+<strong>{plan}</strong>