Convert the scheme page's sidebar and v1 form to govuk

acteng · Jul 13, 2023 · a222b4c · a222b4c
1 parent 3d14558
commit a222b4c
Show file tree

Hide file tree

Showing 14 changed files with 206 additions and 143 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}