Refactor usage of govuk so far

src/lib/common/Modal.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import SecondaryButton from "../govuk/SecondaryButton.svelte";
+
   export let title: string;
   export let open = false;
   export let displayEscapeButton = true;
@@ -22,12 +24,7 @@
     <div style="display: flex; justify-content: space-between;">
       <h1 class="govuk-heading-l">{title}</h1>
       {#if displayEscapeButton}
-        <button
-          class="govuk-button govuk-button--secondary"
-          data-module="govuk-button"
-          type="button"
-          on:click={() => (open = false)}>X</button
-        >
+        <SecondaryButton on:click={() => (open = false)}>X</SecondaryButton>
       {/if}
     </div>
     <slot />
@@ -46,10 +43,6 @@
     display: block;
   }
 
-  button {
-    background-color: whitesmoke;
-  }
-
   .content {
     background: white;
     padding: 30px;

src/lib/govuk/DefaultButton.svelte

@@ -0,0 +1,9 @@
+<button
+  type="button"
+  class="govuk-button"
+  data-module="govuk-button"
+  {...$$props}
+  on:click
+>
+  <slot />
+</button>

src/lib/govuk/FormElement.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  // The label to show
+  export let label: string;
+  // A unique (per page) ID of the form element being labelled. Something in
+  // this component's slot must have this ID.
+  export let id: string;
+</script>
+
+<div class="govuk-form-group">
+  <label class="govuk-label" for={id}>{label}</label>
+  <slot />
+</div>

src/lib/govuk/SecondaryButton.svelte

@@ -0,0 +1,9 @@
+<button
+  type="button"
+  class="govuk-button govuk-button--secondary"
+  data-module="govuk-button"
+  {...$$props}
+  on:click
+>
+  <slot />
+</button>

src/pages/ChooseArea.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { initAll } from "govuk-frontend";
   import "../style/main.css";
   import type { FeatureCollection } from "geojson";
+  import { initAll } from "govuk-frontend";
   import { Map } from "maplibre-gl";
   import { onMount } from "svelte";
+  import DefaultButton from "../lib/govuk/DefaultButton.svelte";
+  import FormElement from "../lib/govuk/FormElement.svelte";
+  import SecondaryButton from "../lib/govuk/SecondaryButton.svelte";
   import "maplibre-gl/dist/maplibre-gl.css";
   import authoritiesUrl from "../../assets/authorities.geojson?url";
   import FileInput from "../lib/common/FileInput.svelte";
@@ -150,42 +153,30 @@
 <div class="govuk-grid-row">
   <div class="govuk-grid-column-one-half left">
     <h1 class="govuk-heading-l">Welcome to ATIP v2</h1>
-    <button
-      class="govuk-button govuk-button--secondary"
-      data-module="govuk-button"
-      on:click={() => (showAbout = !showAbout)}>About</button
+    <SecondaryButton on:click={() => (showAbout = !showAbout)}
+      >About</SecondaryButton
     >
 
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="inputValue">
-        Select Transport Authority or Local Authority District
-      </label>
+    <FormElement
+      label="Select Transport Authority or Local Authority District"
+      id="inputValue"
+    >
       <input
         class="govuk-input govuk-input--width-20"
         id="inputValue"
-        name="inputValue"
         data-testid="transport-authority"
         list="authorities-list"
         bind:value={inputValue}
       />
       <datalist id="authorities-list" bind:this={dataList} />
-    </div>
-    <button
-      class="govuk-button"
-      data-module="govuk-button"
-      on:click={start}
-      disabled={!validEntry}>Start</button
-    >
+    </FormElement>
+    <DefaultButton on:click={start} disabled={!validEntry}>Start</DefaultButton>
 
     <hr />
 
-    <div class="govuk-form-group">
-      <label class="govuk-label" for="showBoundaries">
-        Or pick from the map
-      </label>
+    <FormElement label="Or pick from the map" id="showBoundaries">
       <select
         id="showBoundaries"
-        name="showBoundaries"
         class="govuk-select"
         bind:value={showBoundaries}
         on:change={changeBoundaries}
@@ -196,7 +187,7 @@
       {#if hoveredBoundary}
         <i>{hoveredBoundary}</i>
       {/if}
-    </div>
+    </FormElement>
 
     <hr />