From a222b4cc4353870e63390e963f8059f78927f22c Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Thu, 13 Jul 2023 15:03:47 +0100
Subject: [PATCH] Convert the scheme page's sidebar and v1 form to govuk

---
 scheme.html                             |  5 ++
 src/lib/forms/FormV1.svelte             | 64 +++++++------------
 src/lib/forms/RouteInfoLayers.svelte    | 20 +++---
 src/lib/govuk/Radio.svelte              |  9 ++-
 src/lib/govuk/Select.svelte             | 27 ++++++++
 src/lib/govuk/TextArea.svelte           | 13 ++++
 src/lib/govuk/TextInput.svelte          | 12 ++++
 src/lib/govuk/WarningButton.svelte      |  9 +++
 src/lib/layers/ContextualLayers.svelte  | 19 +++---
 src/lib/sidebar/EntireScheme.svelte     | 84 ++++++++++---------------
 src/lib/sidebar/Instructions.svelte     | 51 ++++++++-------
 src/lib/sidebar/InterventionList.svelte |  9 ++-
 src/pages/App.svelte                    | 26 +++++---
 src/pages/ChooseArea.svelte             |  1 +
 14 files changed, 206 insertions(+), 143 deletions(-)
 create mode 100644 src/lib/govuk/Select.svelte
 create mode 100644 src/lib/govuk/TextArea.svelte
 create mode 100644 src/lib/govuk/TextInput.svelte
 create mode 100644 src/lib/govuk/WarningButton.svelte

diff --git a/scheme.html b/scheme.html
index ba6408a16..235121e2c 100644
--- a/scheme.html
+++ b/scheme.html
@@ -13,6 +13,11 @@
     <script type="module">
       import App from "./src/pages/App.svelte";
 
+      // For govuk setup. For some reason, the initAll step doesn't work here.
+      document.body.className = document.body.className
+        ? document.body.className + " js-enabled"
+        : "js-enabled";
+
       new App({
         target: document.getElementById("app"),
       });
diff --git a/src/lib/forms/FormV1.svelte b/src/lib/forms/FormV1.svelte
index be7cea58b..8cb39b534 100644
--- a/src/lib/forms/FormV1.svelte
+++ b/src/lib/forms/FormV1.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
   import type { Feature, LineString } from "geojson";
   import { gjScheme, routeInfo } from "../../stores";
+  import FormElement from "../govuk/FormElement.svelte";
+  import Radio from "../govuk/Radio.svelte";
+  import SecondaryButton from "../govuk/SecondaryButton.svelte";
+  import TextArea from "../govuk/TextArea.svelte";
   import RouteInfoLayers from "./RouteInfoLayers.svelte";
 
   export let id: number;
@@ -30,54 +34,32 @@
   }
 </script>
 
-<label>
-  Name:
+<FormElement label="Name" id={"name-" + id}>
+  <input type="text" class="govuk-input" bind:value={name} />
   <!-- Only LineStrings can be auto-named, and length_meters being set is the simplest proxy for that -->
   {#if length_meters}
-    <button type="button" on:click={() => autoFillName()} disabled={!$routeInfo}
-      >Auto-fill</button
+    <SecondaryButton on:click={() => autoFillName()} disabled={!$routeInfo}
+      >Auto-fill</SecondaryButton
     >
   {/if}
-  <br />
-  <input type="text" bind:value={name} style="width: 100%" />
-</label>
+</FormElement>
 
-<br />
-<br />
+<Radio
+  legend="Type"
+  id={"type-" + id}
+  choices={[
+    ["area", "Area"],
+    ["route", "Route"],
+    ["crossing", "Crossing"],
+    ["other", "Other"],
+  ]}
+  inlineSmall
+  bind:value={intervention_type}
+/>
 
-<label>
-  <input type="radio" bind:group={intervention_type} value="area" />
-  Area
-</label>
-<label>
-  <input type="radio" bind:group={intervention_type} value="route" />
-  Route
-</label>
-<label>
-  <input type="radio" bind:group={intervention_type} value="crossing" />
-  Crossing
-</label>
-<label>
-  <input type="radio" bind:group={intervention_type} value="other" />
-  Other
-</label>
-
-<br />
-<br />
-
-<label>
-  Description:<br />
-  <textarea bind:value={description} style="width: 100%" rows="5" />
-</label>
+<TextArea label="Description" bind:value={description} />
 
 {#if length_meters}
-  Length: {prettyPrintMeters(length_meters)}
-  <br />
+  <p>Length: {prettyPrintMeters(length_meters)}</p>
   <RouteInfoLayers {id} />
 {/if}
-
-<style>
-  textarea {
-    resize: none;
-  }
-</style>
diff --git a/src/lib/forms/RouteInfoLayers.svelte b/src/lib/forms/RouteInfoLayers.svelte
index 6412d54ce..20411c08b 100644
--- a/src/lib/forms/RouteInfoLayers.svelte
+++ b/src/lib/forms/RouteInfoLayers.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { routeInfo } from "../../stores";
+  import Select from "../govuk/Select.svelte";
   import LaneDetails from "../layers/LaneDetails.svelte";
   import SpeedLimits from "../layers/SpeedLimits.svelte";
 
@@ -9,14 +10,17 @@
 </script>
 
 {#if $routeInfo}
-  <label>
-    Show details:
-    <select bind:value={layer}>
-      <option value="none">None</option>
-      <option value="speed limits">Speed limits</option>
-      <option value="lane details">Lane details</option>
-    </select>
-  </label>
+  <Select
+    label="Show details"
+    id="show-details-layer"
+    choices={[
+      ["none", "None"],
+      ["speed limits", "Speed limits"],
+      ["lane details", "Lane details"],
+    ]}
+    emptyOption={false}
+    bind:value={layer}
+  />
   {#if layer == "speed limits"}
     <SpeedLimits {id} />
   {:else if layer == "lane details"}
diff --git a/src/lib/govuk/Radio.svelte b/src/lib/govuk/Radio.svelte
index dbf540341..cdd0c89a0 100644
--- a/src/lib/govuk/Radio.svelte
+++ b/src/lib/govuk/Radio.svelte
@@ -5,6 +5,8 @@
   export let id: string;
   // A list of [value, label] representing the choices
   export let choices: [string, string][];
+  // Lay out radio buttons horizontally and decrease font size
+  export let inlineSmall = false;
 
   // The current value
   export let value: string;
@@ -13,7 +15,12 @@
 <div class="govuk-form-group">
   <fieldset class="govuk-fieldset">
     <legend class="govuk-fieldset__legend">{legend}</legend>
-    <div class="govuk-radios" data-module="govuk-radios">
+    <div
+      class="govuk-radios"
+      class:govuk-radios--inline={inlineSmall}
+      class:govuk-radios--small={inlineSmall}
+      data-module="govuk-radios"
+    >
       {#each choices as [thisValue, thisLabel]}
         <div class="govuk-radios__item">
           <input
diff --git a/src/lib/govuk/Select.svelte b/src/lib/govuk/Select.svelte
new file mode 100644
index 000000000..d80b59dc2
--- /dev/null
+++ b/src/lib/govuk/Select.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import FormElement from "../govuk/FormElement.svelte";
+
+  export let label: string;
+  // A unique (per page) ID
+  export let id: string;
+  // A list of [value, label] representing the choices
+  export let choices: [string, string][];
+  // Make the first option the empty string
+  export let emptyOption = true;
+  export let disabled = false;
+
+  // The current value
+  export let value: string;
+</script>
+
+<FormElement {label} {id}>
+  <select class="govuk-select" {id} bind:value {disabled}>
+    {#if emptyOption}
+      <option value="" />
+    {/if}
+
+    {#each choices as [thisValue, thisLabel]}
+      <option value={thisValue}>{thisLabel}</option>
+    {/each}
+  </select>
+</FormElement>
diff --git a/src/lib/govuk/TextArea.svelte b/src/lib/govuk/TextArea.svelte
new file mode 100644
index 000000000..03a3caeed
--- /dev/null
+++ b/src/lib/govuk/TextArea.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import FormElement from "./FormElement.svelte";
+
+  export let label: string;
+  export let value: string;
+  export let rows: number = 5;
+
+  // TODO Using the label as a unique ID, so users don't have to invent an arbitrary string
+</script>
+
+<FormElement {label} id={label}>
+  <textarea class="govuk-textarea" id={label} {rows} bind:value />
+</FormElement>
diff --git a/src/lib/govuk/TextInput.svelte b/src/lib/govuk/TextInput.svelte
new file mode 100644
index 000000000..85965a4aa
--- /dev/null
+++ b/src/lib/govuk/TextInput.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import FormElement from "./FormElement.svelte";
+
+  export let label: string;
+  export let value: string;
+
+  // TODO Using the label as a unique ID, so users don't have to invent an arbitrary string
+</script>
+
+<FormElement {label} id={label}>
+  <input type="text" class="govuk-input" id={label} bind:value />
+</FormElement>
diff --git a/src/lib/govuk/WarningButton.svelte b/src/lib/govuk/WarningButton.svelte
new file mode 100644
index 000000000..d62e49fef
--- /dev/null
+++ b/src/lib/govuk/WarningButton.svelte
@@ -0,0 +1,9 @@
+<button
+  type="button"
+  class="govuk-button govuk-button--warning"
+  data-module="govuk-button"
+  {...$$props}
+  on:click
+>
+  <slot />
+</button>
diff --git a/src/lib/layers/ContextualLayers.svelte b/src/lib/layers/ContextualLayers.svelte
index 4fc048183..415d79cec 100644
--- a/src/lib/layers/ContextualLayers.svelte
+++ b/src/lib/layers/ContextualLayers.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { formOpen, routeInfo } from "../../stores";
+  import Select from "../govuk/Select.svelte";
   import SpeedLimits from "./SpeedLimits.svelte";
 
   let show: "none" | "speed limits" = "none";
@@ -13,13 +14,17 @@
 </script>
 
 {#if $routeInfo}
-  <label>
-    Show layer:
-    <select bind:value={show} disabled={$formOpen != null}>
-      <option value="none">None</option>
-      <option value="speed limits">Speed limits</option>
-    </select>
-  </label>
+  <Select
+    label="Show layer"
+    id="show-layer"
+    choices={[
+      ["none", "None"],
+      ["speed limits", "Speed limits"],
+    ]}
+    emptyOption={false}
+    bind:value={show}
+    disabled={$formOpen != null}
+  />
   {#if show == "speed limits"}
     <SpeedLimits id={undefined} />
   {/if}
diff --git a/src/lib/sidebar/EntireScheme.svelte b/src/lib/sidebar/EntireScheme.svelte
index 2105b9cab..f31ffafd5 100644
--- a/src/lib/sidebar/EntireScheme.svelte
+++ b/src/lib/sidebar/EntireScheme.svelte
@@ -12,6 +12,9 @@
   import type { Schema, Scheme } from "../../types";
   import ConfirmationModal from "../common/ConfirmationModal.svelte";
   import FileInput from "../common/FileInput.svelte";
+  import SecondaryButton from "../govuk/SecondaryButton.svelte";
+  import TextInput from "../govuk/TextInput.svelte";
+  import WarningButton from "../govuk/WarningButton.svelte";
 
   export let authorityName: string;
   export let schema: Schema;
@@ -153,59 +156,40 @@
   }
 </script>
 
-<div>
-  <label>
-    Scheme name:
-    <input type="text" bind:value={$gjScheme.scheme_name} />
-  </label>
-</div>
+<TextInput label="Scheme name" bind:value={$gjScheme.scheme_name} />
 
-<br />
-
-<div>
-  <FileInput
-    label="Load from GeoJSON"
-    id="load-geojson"
-    disabled={$isAToolInUse}
-    {loadFile}
-  />
-  <button
-    type="button"
-    class="align-right"
-    on:click={exportToGeojson}
-    disabled={$isAToolInUse}
-  >
-    Export to GeoJSON
-  </button>
-</div>
+<FileInput
+  label="Load from GeoJSON"
+  id="load-geojson"
+  disabled={$isAToolInUse}
+  {loadFile}
+/>
 
-<br />
+<SecondaryButton on:click={exportToGeojson} disabled={$isAToolInUse}>
+  Export to GeoJSON
+</SecondaryButton>
 
-<div>
-  <span>{$gjScheme.features.length} objects</span>
-  <button
-    type="button"
-    class="align-right"
+<hr />
+
+<div style="display: flex; justify-content: space-between">
+  <p>{$gjScheme.features.length} objects</p>
+  <WarningButton
     on:click={openClearAllDialogue}
-    disabled={$gjScheme.features.length == 0 || $isAToolInUse}>Clear all</button
+    disabled={$gjScheme.features.length == 0 || $isAToolInUse}
+    >Clear all</WarningButton
   >
-  <ConfirmationModal
-    bind:open={displayClearAllConfirmation}
-    title={"Would you like to clear your work?"}
-    message={"This will delete all your drawn interventions."}
-    on:cancelAction={cancelClearAll}
-    on:confirmAction={clearAll}
-  />
-  {#if $isAToolInUse}
-    <p class="reminder">
-      Finish drawing on the map and/or select "Edit attributes" to use these
-      options.
-    </p>
-  {/if}
 </div>
-
-<style>
-  .align-right {
-    float: right;
-  }
-</style>
+<ConfirmationModal
+  bind:open={displayClearAllConfirmation}
+  title={"Would you like to clear your work?"}
+  message={"This will delete all your drawn interventions."}
+  on:cancelAction={cancelClearAll}
+  on:confirmAction={clearAll}
+/>
+
+{#if $isAToolInUse}
+  <p>
+    Finish drawing on the map and/or select "Edit attributes" to use these
+    options.
+  </p>
+{/if}
diff --git a/src/lib/sidebar/Instructions.svelte b/src/lib/sidebar/Instructions.svelte
index 9cab4bd14..539039089 100644
--- a/src/lib/sidebar/Instructions.svelte
+++ b/src/lib/sidebar/Instructions.svelte
@@ -5,30 +5,33 @@
 </script>
 
 <Modal title="Instructions" bind:open>
-  <h2>Drawing objects on the map</h2>
-  <p>
-    Use the tools on right to sketch new objects on the map. Each tool has
-    instructions that appear when you click on its icon.
-  </p>
-  <p>
-    Modify existing objects on the map using <b>Edit geometry</b> and clicking something.
-  </p>
+  <div class="govuk-prose">
+    <h2>Drawing objects on the map</h2>
+    <p>
+      Use the tools on right to sketch new objects on the map. Each tool has
+      instructions that appear when you click on its icon.
+    </p>
+    <p>
+      Modify existing objects on the map using <b>Edit geometry</b> and clicking
+      something.
+    </p>
 
-  <h2>Filling out data</h2>
-  <p>
-    <b>Edit attributes</b> mode allows selecting and adding attributes to objects
-    that appear on the left.
-  </p>
+    <h2>Filling out data</h2>
+    <p>
+      <b>Edit attributes</b> mode allows selecting and adding attributes to objects
+      that appear on the left.
+    </p>
 
-  <h2>Saving files</h2>
-  <p>
-    ATIP does not send any data over the network or store your data in the
-    cloud. The current file you're editing will be saved in your browser's local
-    storage and automatically resume when you return to the page. The <b
-      >Export to GeoJSON</b
-    >
-    and <b>Load from GeoJSON</b> buttons save and load GeoJSON files (with a
-    <i>.txt</i> file extension) to your computer. You share these files with others
-    to collaborate on designs.
-  </p>
+    <h2>Saving files</h2>
+    <p>
+      ATIP does not send any data over the network or store your data in the
+      cloud. The current file you're editing will be saved in your browser's
+      local storage and automatically resume when you return to the page. The <b
+        >Export to GeoJSON</b
+      >
+      and <b>Load from GeoJSON</b> buttons save and load GeoJSON files (with a
+      <i>.txt</i> file extension) to your computer. You share these files with others
+      to collaborate on designs.
+    </p>
+  </div>
 </Modal>
diff --git a/src/lib/sidebar/InterventionList.svelte b/src/lib/sidebar/InterventionList.svelte
index 8d7550457..c375ca507 100644
--- a/src/lib/sidebar/InterventionList.svelte
+++ b/src/lib/sidebar/InterventionList.svelte
@@ -6,6 +6,8 @@
   import FormV1 from "../forms/FormV1.svelte";
   import FormV2 from "../forms/FormV2.svelte";
   import PlanningForm from "../forms/PlanningForm.svelte";
+  import SecondaryButton from "../govuk/SecondaryButton.svelte";
+  import WarningButton from "../govuk/WarningButton.svelte";
   import AccordionItem from "./AccordionItem.svelte";
 
   export let schema: Schema;
@@ -89,10 +91,11 @@
     <br />
     <br />
     <div style="display: flex; justify-content: space-between">
-      <button type="button" on:click={() => deleteIntervention(feature.id)}
-        >Delete</button
+      <WarningButton on:click={() => deleteIntervention(feature.id)}
+        >Delete</WarningButton
+      >
+      <SecondaryButton on:click={() => formOpen.set(null)}>Save</SecondaryButton
       >
-      <button type="button" on:click={() => formOpen.set(null)}>Save</button>
     </div>
   </AccordionItem>
 {/each}
diff --git a/src/pages/App.svelte b/src/pages/App.svelte
index b63cd6385..142a5daf1 100644
--- a/src/pages/App.svelte
+++ b/src/pages/App.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { initAll } from "govuk-frontend";
+  import "../style/main.css";
   import * as Comlink from "comlink";
   import type { FeatureCollection, Polygon } from "geojson";
   import { onMount } from "svelte";
@@ -9,6 +11,7 @@
   import HoverLayer from "../lib/draw/HoverLayer.svelte";
   import InterventionLayer from "../lib/draw/InterventionLayer.svelte";
   import Toolbox from "../lib/draw/Toolbox.svelte";
+  import SecondaryButton from "../lib/govuk/SecondaryButton.svelte";
   import ContextualLayers from "../lib/layers/ContextualLayers.svelte";
   import Legend from "../lib/Legend.svelte";
   import Map from "../lib/Map.svelte";
@@ -49,6 +52,9 @@
 
   let boundaryGeojson: FeatureCollection<Polygon>;
   onMount(async () => {
+    // For govuk components. Must happen here.
+    initAll();
+
     boundaryGeojson = await loadAuthorityBoundary();
 
     // If you get "import declarations may only appear at top level of a
@@ -85,19 +91,21 @@
 </script>
 
 <Layout>
-  <div slot="sidebar">
-    <div>
-      <button
-        type="button"
-        on:click={() => (window.location.href = "index.html")}
+  <div slot="sidebar" class="govuk-prose">
+    <div class="govuk-button-group">
+      <SecondaryButton on:click={() => (window.location.href = "index.html")}>
+        Home</SecondaryButton
       >
-        Home</button
+      <SecondaryButton on:click={toggleAbout}>About</SecondaryButton>
+      <SecondaryButton on:click={toggleInstructions}
+        >Instructions</SecondaryButton
       >
-      <button type="button" on:click={toggleAbout}>About</button>
-      <button type="button" on:click={toggleInstructions}>Instructions</button>
     </div>
     <p>{schemaTitle(schema)} mode</p>
-    <h1>{authorityName} <ZoomOutMap {boundaryGeojson} /></h1>
+    <div style="display: flex; justify-content: space-between">
+      <h1>{authorityName}</h1>
+      <ZoomOutMap {boundaryGeojson} />
+    </div>
     <EntireScheme {authorityName} {schema} />
     <br />
     <InterventionList {schema} />
diff --git a/src/pages/ChooseArea.svelte b/src/pages/ChooseArea.svelte
index a9faf22da..90c42070f 100644
--- a/src/pages/ChooseArea.svelte
+++ b/src/pages/ChooseArea.svelte
@@ -182,6 +182,7 @@
         ["TA", "Transport Authorities"],
         ["LAD", "Local Authority Districts"],
       ]}
+      inlineSmall
       bind:value={showBoundaries}
       on:change={changeBoundaries}
     />