From 0a1648be4426511a8c63406f6e1349030b2302de Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Wed, 12 Jul 2023 17:17:11 +0100
Subject: [PATCH] Use radio buttons for picking the authority type, not a
 select

---
 src/lib/govuk/Radio.svelte  | 34 ++++++++++++++++++++++++++++++++++
 src/pages/ChooseArea.svelte | 28 ++++++++++++++--------------
 2 files changed, 48 insertions(+), 14 deletions(-)
 create mode 100644 src/lib/govuk/Radio.svelte

diff --git a/src/lib/govuk/Radio.svelte b/src/lib/govuk/Radio.svelte
new file mode 100644
index 000000000..dbf540341
--- /dev/null
+++ b/src/lib/govuk/Radio.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  // A label for the entire group of radio buttons
+  export let legend: string;
+  // A unique (per page) ID of the radio group
+  export let id: string;
+  // A list of [value, label] representing the choices
+  export let choices: [string, string][];
+
+  // The current value
+  export let value: string;
+</script>
+
+<div class="govuk-form-group">
+  <fieldset class="govuk-fieldset">
+    <legend class="govuk-fieldset__legend">{legend}</legend>
+    <div class="govuk-radios" data-module="govuk-radios">
+      {#each choices as [thisValue, thisLabel]}
+        <div class="govuk-radios__item">
+          <input
+            class="govuk-radios__input"
+            id={id + thisValue}
+            type="radio"
+            bind:group={value}
+            value={thisValue}
+            on:change
+          />
+          <label class="govuk-label govuk-radios__label" for={id + thisValue}>
+            {thisLabel}
+          </label>
+        </div>
+      {/each}
+    </div>
+  </fieldset>
+</div>
diff --git a/src/pages/ChooseArea.svelte b/src/pages/ChooseArea.svelte
index 128aecb37..23e8df607 100644
--- a/src/pages/ChooseArea.svelte
+++ b/src/pages/ChooseArea.svelte
@@ -6,6 +6,7 @@
   import { onMount } from "svelte";
   import DefaultButton from "../lib/govuk/DefaultButton.svelte";
   import FormElement from "../lib/govuk/FormElement.svelte";
+  import Radio from "../lib/govuk/Radio.svelte";
   import SecondaryButton from "../lib/govuk/SecondaryButton.svelte";
   import "maplibre-gl/dist/maplibre-gl.css";
   import authoritiesUrl from "../../assets/authorities.geojson?url";
@@ -174,20 +175,19 @@
 
     <hr />
 
-    <FormElement label="Or pick from the map" id="showBoundaries">
-      <select
-        id="showBoundaries"
-        class="govuk-select"
-        bind:value={showBoundaries}
-        on:change={changeBoundaries}
-      >
-        <option value="TA">Transport Authorities</option>
-        <option value="LAD">Local Authority District</option>
-      </select>
-      {#if hoveredBoundary}
-        <i>{hoveredBoundary}</i>
-      {/if}
-    </FormElement>
+    <Radio
+      legend="Or pick from the map"
+      id="showBoundaries"
+      choices={[
+        ["TA", "Transport Authorities"],
+        ["LAD", "Local Authority Districts"],
+      ]}
+      bind:value={showBoundaries}
+      on:change={changeBoundaries}
+    />
+    {#if hoveredBoundary}
+      <i>{hoveredBoundary}</i>
+    {/if}
 
     <hr />