Apply govuk styles to choose area page. Don't worry yet about CSS

classes repeated everywhere yet.
acteng · Jul 12, 2023 · 1663bf4 · 1663bf4
1 parent 0ad76f9
commit 1663bf4
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 133 deletions.
diff --git a/index.html b/index.html
@@ -13,6 +13,11 @@
     <script type="module">
       import ChooseArea from "./src/pages/ChooseArea.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 ChooseArea({
         target: document.getElementById("app"),
       });

diff --git a/src/lib/common/FileInput.svelte b/src/lib/common/FileInput.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
   export let label: string;
-  // This must be unique in the DOM
-  export let uniqueId: string;
   // Called with the file contents as text
   export let loadFile: (text: string) => void;
 
@@ -19,30 +17,15 @@
   }
 </script>
 
-<!-- TODO Interactive elements inside a label are apparently invalid, but this works -->
-<label>
+<div class="govuk-form-group">
+  <label class="govuk-label" for="file-upload">{label}</label>
   <input
-    type="file"
-    id={uniqueId}
     bind:this={fileInput}
     on:change={onChange}
     {disabled}
+    class="govuk-file-upload"
+    id="file-upload"
+    name="file-upload"
+    type="file"
   />
-  <button type="button" on:click={() => fileInput.click()} {disabled}
-    >{label}</button
-  >
-</label>
-
-<style>
-  input[type="file"] {
-    cursor: pointer;
-
-    /* Make the input type=file effectively invisible, but still let browser accessibility stuff work */
-    width: 0.1px;
-    height: 0.1px;
-    opacity: 0;
-    overflow: hidden;
-    position: absolute;
-    z-index: -1;
-  }
-</style>
+</div>
diff --git a/src/lib/common/Modal.svelte b/src/lib/common/Modal.svelte
@@ -20,9 +20,14 @@
     on:click|stopPropagation={() => null}
   >
     <div style="display: flex; justify-content: space-between;">
-      <h1>{title}</h1>
+      <h1 class="govuk-heading-l">{title}</h1>
       {#if displayEscapeButton}
-        <button on:click={() => (open = false)}>X</button>
+        <button
+          class="govuk-button govuk-button--secondary"
+          data-module="govuk-button"
+          type="button"
+          on:click={() => (open = false)}>X</button
+        >
       {/if}
     </div>
     <slot />

diff --git a/src/lib/sidebar/About.svelte b/src/lib/sidebar/About.svelte
@@ -6,67 +6,71 @@
 </script>
 
 <Modal title="About the Active Travel Infrastructure Platform" bind:open>
-  <p>
-    ATIP v2 is an
-    <ExternalLink href="https://github.com/acteng/atip"
-      >open source project</ExternalLink
-    > supported by Active Travel England and developed by:
-  </p>
+  <div class="govuk-prose">
+    <p>
+      ATIP v2 is an
+      <ExternalLink href="https://github.com/acteng/atip"
+        >open source project</ExternalLink
+      > supported by Active Travel England and developed by:
+    </p>
 
-  <ul>
-    <li>
-      <ExternalLink
-        href="https://www.turing.ac.uk/people/researchers/dustin-carlino"
-        >Dustin Carlino</ExternalLink
-      >: lead developer, from The Alan Turing Institute
-    </li>
-    <li>
-      With UX help from
-      <ExternalLink href="https://www.linkedin.com/in/madison-wang-841977bb/"
-        >Madison Wang</ExternalLink
-      > and CSS help from
-      <ExternalLink href="https://github.com/BudgieInWA"
-        >Ben Ritter</ExternalLink
-      >
-    </li>
-    <li>
-      With great thanks to ATIP's various users for feedback, testing, and ideas
-    </li>
-  </ul>
+    <ul>
+      <li>
+        <ExternalLink
+          href="https://www.turing.ac.uk/people/researchers/dustin-carlino"
+          >Dustin Carlino</ExternalLink
+        >: lead developer, from The Alan Turing Institute
+      </li>
+      <li>
+        With UX help from
+        <ExternalLink href="https://www.linkedin.com/in/madison-wang-841977bb/"
+          >Madison Wang</ExternalLink
+        > and CSS help from
+        <ExternalLink href="https://github.com/BudgieInWA"
+          >Ben Ritter</ExternalLink
+        >
+      </li>
+      <li>
+        With great thanks to ATIP's various users for feedback, testing, and
+        ideas
+      </li>
+    </ul>
 
-  <p>
-    ATIP builds on
-    <ExternalLink href="https://www.openstreetmap.org/about"
-      >OpenStreetMap</ExternalLink
-    >
-    contributors,
-    <ExternalLink href="https://maplibre.org/">MapLibre</ExternalLink>,
-    <ExternalLink href="https://georust.org/">GeoRust</ExternalLink>,
-    <ExternalLink href="https://github.com/a-b-street/osm2streets"
-      >osm2streets</ExternalLink
-    >,
-    <ExternalLink href="https://material.io/resources/icons/"
-      >Material icons</ExternalLink
-    >, and other open source projects.
-  </p>
+    <p>
+      ATIP builds on
+      <ExternalLink href="https://www.openstreetmap.org/about"
+        >OpenStreetMap</ExternalLink
+      >
+      contributors,
+      <ExternalLink href="https://maplibre.org/">MapLibre</ExternalLink>,
+      <ExternalLink href="https://georust.org/">GeoRust</ExternalLink>,
+      <ExternalLink href="https://github.com/a-b-street/osm2streets"
+        >osm2streets</ExternalLink
+      >,
+      <ExternalLink href="https://material.io/resources/icons/"
+        >Material icons</ExternalLink
+      >, and other open source projects.
+    </p>
 
-  <p>
-    We want your feedback about ATIP! Please <ExternalLink
-      href="https://github.com/acteng/atip/issues/new"
-      >start an issue on Github</ExternalLink
-    >
-    or email <a href="mailto: dcarlino@turing.ac.uk">dcarlino@turing.ac.uk</a>.
-  </p>
+    <p>
+      We want your feedback about ATIP! Please <ExternalLink
+        href="https://github.com/acteng/atip/issues/new"
+        >start an issue on Github</ExternalLink
+      >
+      or email
+      <a href="mailto: dcarlino@turing.ac.uk">dcarlino@turing.ac.uk</a>.
+    </p>
 
-  <hr />
+    <hr />
 
-  <h2>Recent changes</h2>
-  <ul>
-    <li>
-      <b>v2</b> launched on 2 June 2023. Changes: a complete UI rewrite, new draw
-      tools, drawing areas snapped to roads, splitting routes, multiple data schemas,
-      speed limit layer, lane visualization layer
-    </li>
-    <li><b>v1</b> launched in March 2023</li>
-  </ul>
+    <h2>Recent changes</h2>
+    <ul>
+      <li>
+        <b>v2</b> launched on 2 June 2023. Changes: a complete UI rewrite, new draw
+        tools, drawing areas snapped to roads, splitting routes, multiple data schemas,
+        speed limit layer, lane visualization layer
+      </li>
+      <li><b>v1</b> launched in March 2023</li>
+    </ul>
+  </div>
 </Modal>
diff --git a/src/lib/sidebar/EntireScheme.svelte b/src/lib/sidebar/EntireScheme.svelte
@@ -163,12 +163,7 @@
 <br />
 
 <div>
-  <FileInput
-    label="Load from GeoJSON"
-    uniqueId="load-geojson"
-    disabled={$isAToolInUse}
-    {loadFile}
-  />
+  <FileInput label="Load from GeoJSON" disabled={$isAToolInUse} {loadFile} />
   <button
     type="button"
     class="align-right"

diff --git a/src/pages/BrowseSchemes.svelte b/src/pages/BrowseSchemes.svelte
@@ -170,15 +170,15 @@
 </script>
 
 <Layout>
-  <div slot="sidebar" class="sidebar">
+  <div slot="sidebar">
     <button type="button" on:click={() => window.open("index.html")}>
       Home</button
     >
     <h1>
       Browse schemes
       <ZoomOutMap boundaryGeojson={$gjScheme} />
     </h1>
-    <FileInput label="Load from GeoJSON" uniqueId="load_geojson" {loadFile} />
+    <FileInput label="Load from GeoJSON" {loadFile} />
 
     <br />
     <br />

diff --git a/src/pages/ChooseArea.svelte b/src/pages/ChooseArea.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { initAll } from "govuk-frontend";
+  import "../style/main.css";
   import type { FeatureCollection } from "geojson";
   import { Map } from "maplibre-gl";
   import { onMount } from "svelte";
@@ -27,6 +29,9 @@
   let hoveredBoundary: string | null = null;
 
   onMount(async () => {
+    // For govuk components. Must happen here.
+    initAll();
+
     const resp = await fetch(authoritiesUrl);
     const body = await resp.text();
     const json: FeatureCollection = JSON.parse(body);
@@ -142,40 +147,65 @@
   }
 </script>
 
-<div class="left">
-  <h1>Welcome to ATIP v2</h1>
-  <button type="button" on:click={() => (showAbout = !showAbout)}>About</button>
-
-  <p>Select Transport Authority or Local Authority District:</p>
-  <div>
-    <input
-      data-testid="transport-authority"
-      list="authorities-list"
-      bind:value={inputValue}
-    />
-    <datalist id="authorities-list" bind:this={dataList} />
-    <button type="button" on:click={start} disabled={!validEntry}>Start</button>
+<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
+    >
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="inputValue">
+        Select Transport Authority or Local Authority District
+      </label>
+      <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
+    >
+
+    <hr />
+
+    <div class="govuk-form-group">
+      <label class="govuk-label" for="showBoundaries">
+        Or pick from the map
+      </label>
+      <select
+        id="showBoundaries"
+        name="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}
+    </div>
+
+    <hr />
+
+    <FileInput label="Or upload an ATIP GeoJSON file" {loadFile} />
+  </div>
+  <div class="govuk-grid-column-one-half">
+    <div id="map" />
   </div>
-  <hr />
-  <label>
-    Or pick from the map:
-    <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}
-  </label>
-  <hr />
-  <p>Or upload an ATIP file:</p>
-  <FileInput
-    label="Upload ATIP GeoJSON file"
-    uniqueId="load-geojson"
-    {loadFile}
-  />
 </div>
-<div id="map" />
 <About bind:open={showAbout} />
 
 <style>
@@ -184,8 +214,8 @@
     padding: 0;
   }
 
-  button {
-    margin-left: 6px;
+  .left {
+    margin: 10px;
   }
 
   #map {
@@ -195,8 +225,4 @@
     right: 0;
     width: 50%;
   }
-
-  .left {
-    margin: 10px;
-  }
 </style>
diff --git a/src/style/main.sass b/src/style/main.sass
@@ -5,8 +5,14 @@
 //
 // See https://design-system.service.gov.uk/styles/typography/ for reference on
 // govuk classes
-.sidebar
-  p
-    @extend .govuk-body
+.govuk-prose
   h1
     @extend .govuk-heading-l
+  h2
+    @extend .govuk-heading-m
+  p
+    @extend .govuk-body
+  a
+    @extend .govuk-link
+  ul
+    @extend .govuk-list--bullet