Convert the scheme browse and area choose page to govuk style #270

dabreegster · 2023-07-12T17:56:25Z

This is the next step to use the govuk design system, on our two simpler pages. I've tried my best to interpret https://design-system.service.gov.uk/styles/ and https://design-system.service.gov.uk/components/, but I (really hope!) we go through some kind of design review later, because there are plenty of unclear decisions made.

Compare: old homepage with new homepage, and old browse with new browse

screencast.mp4

In the step after this one, I'll convert our main edit page... or at least the sidebar. I haven't found much guidance yet for design patterns on maps, such as tooltips, changing cursors, hover effects, etc -- lots of the questions we've been asking anyway! I'll search/ask around to see if there's any guidance here yet.

Code style choices

Copying the sample HTML directly from govuk docs would severely pollute our codebase, and make it tough to check that we've converted all elements on every page to using the right CSS classes. So there are 3 ways we use govuk components:

New Svelte components that wrap something, like a group of radio buttons. The user doesn't care that govuk things are happening internally.
Automatically adding CSS classes to standard HTML elements, as long as they're under a <div class="govuk-prose">
In "one-off" situations, directly use govuk HTML+CSS code. When the usage becomes more complex or we need the same pattern somewhere else, we can apply one of the two strategies above, but I feel it'd be premature refactoring at this point.

classes repeated everywhere yet.

dabreegster · 2023-07-12T17:58:21Z

src/lib/ZoomOutMap.svelte

@@ -15,12 +16,6 @@
  }
 </script>

-<button type="button" title="Zoom to show entire boundary" on:click={recenter}>
+<SecondaryButton title="Zoom to show entire boundary" on:click={recenter}>


I've checked the main scheme edit page to make sure nothing breaks badly with these changes to shared components. Some styling changes slightly, but not in a bad way. And the next PR will fix everything up there too.

dabreegster · 2023-07-12T17:59:05Z

src/lib/common/CollapsibleCard.svelte

@@ -1,53 +1,13 @@
 <script lang="ts">


I'm very happy with this one; using the govuk component saves us tons of code

dabreegster · 2023-07-12T17:59:46Z

src/lib/common/FileInput.svelte

@@ -19,30 +17,15 @@
  }
 </script>

-<!-- TODO Interactive elements inside a label are apparently invalid, but this works -->
-<label>
+<div class="govuk-form-group">


There's a design change here. Previously we hid the filename of whatever the user picks. In the 3 cases where it's used currently, I don't think this is so important, and the govuk style very much does not hide the filename

dabreegster · 2023-07-12T18:00:58Z

src/lib/govuk/FormElement.svelte

+<script lang="ts">
+  // The label to show
+  export let label: string;
+  // A unique (per page) ID of the form element being labelled. Something in


I wish we didn't have to make this up at all. Previously we've been doing <label>xyz <input ... /></label>, but this breaks the govuk styling by eliminating a line-break. So, this Svelte component slightly helps.

dabreegster · 2023-07-12T18:01:46Z

src/lib/govuk/Radio.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">


This component is very necessary. If you check the HTML sample at https://design-system.service.gov.uk/components/radios/, it's so much code to copy. Wrapping in a Svelte component is quite similar to their Nunchucks system

dabreegster · 2023-07-12T18:02:06Z

src/lib/sidebar/About.svelte

-      >open source project</ExternalLink
-    > supported by Active Travel England and developed by:
-  </p>
+  <div class="govuk-prose">


Here's an example of auto-applying CSS classes to everything below. All the diff below is just introducing one level of nesting in the DOM

dabreegster · 2023-07-12T18:03:20Z

src/pages/BrowseSchemes.svelte

+            <p>Authority or region: {scheme.authority_or_region}</p>
+            <p>Capital scheme ID: {scheme.capital_scheme_id}</p>
+            <p>Funding programme: {scheme.funding_programme}</p>
+            <div class="govuk-button-group">


Made two of the buttons side-by-side. I'm sure the contents of these expandable cards will keep evolving, so not changing much else yet

dabreegster · 2023-07-12T18:03:47Z

src/pages/ChooseArea.svelte

-      data-testid="transport-authority"
-      list="authorities-list"
-      bind:value={inputValue}
+<div class="govuk-grid-row">


Using https://design-system.service.gov.uk/styles/layout/ to split the page into two halves

dabreegster · 2023-07-12T18:04:23Z

src/pages/ChooseArea.svelte

+      id="inputValue"
+    >
+      <input
+        class="govuk-input govuk-input--width-20"


Here's a case where it's simplest to just directly use govuk classes, rather than refactor a component yet. I couldn't find any guidance on text input fields with custom autocomplete like this.

dabreegster · 2023-07-12T18:04:44Z

src/pages/ChooseArea.svelte

+    <Radio
+      legend="Or pick from the map"
+      id="showBoundaries"
+      choices={[


This used to be a select/dropdown, but https://design-system.service.gov.uk/components/select/ recommends against, and I agree here

robinlovelace-ate · 2023-07-12T18:41:22Z

Based on the video bit 👍 to this, looks really good. Great work Dustin.

robinlovelace-ate · 2023-07-12T18:42:25Z

It gets away from the very vanilla feel, it may benefit from some post merge tweaks but to my eyes this is already a big improvement, even without the benefits of conformity from GDS perspective.

robinlovelace-ate · 2023-07-12T18:43:48Z

Interested to hear what @Pete-Y-CS, @Sparrow0hawk or others think also..

Pete-Y-CS · 2023-07-13T10:03:06Z

src/lib/govuk/DefaultButton.svelte

@@ -0,0 +1,9 @@
+<button
+  type="button"
+  class="govuk-button"


I wonder if we want to share this with SecondaryButton and just pass isSecondary as an optional param?

Don't think this needs to hold up this merge but could be nice

I thought about that, but not sure yet. https://design-system.service.gov.uk/components/button/ recommends avoiding multiple "default buttons" per page, so making it extremely clear what type of button is used seems nice. We could definitely do <Button kind="default|secondary"> too to share a bit of code, but maybe it makes the places used a little harder to read.

Pete-Y-CS · 2023-07-13T10:04:53Z

src/lib/common/FileInput.svelte

-<!-- 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>


Shouldn't we be using the form element defined below here?

Ah good point, thanks! Fixed. I also brought back the unique ID, because <label> will break otherwise. We don't have any page with multiple file inputs, but we'll need to when we do

…two file inputs on one page

dabreegster added 4 commits July 12, 2023 16:36

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

1663bf4

classes repeated everywhere yet.

Refactor usage of govuk so far

ff214df

Use radio buttons for picking the authority type, not a select

0a1648b

Apply govuk styles to the browse scheme page

47c2c9a

dabreegster commented Jul 12, 2023

View reviewed changes

dabreegster requested review from Pete-Y-CS, Sparrow0hawk and robinlovelace-ate July 12, 2023 18:05

Fix tests, now that the file upload button is a normal button

43947ff

robinlovelace-ate approved these changes Jul 12, 2023

View reviewed changes

Pete-Y-CS reviewed Jul 13, 2023

View reviewed changes

Make FileInput use FormElement, and restore uniqueId in case we have …

19d778a

…two file inputs on one page

Pete-Y-CS approved these changes Jul 13, 2023

View reviewed changes

dabreegster merged commit 3d14558 into main Jul 13, 2023
2 checks passed

dabreegster deleted the govuk_step2 branch July 13, 2023 10:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Convert the scheme browse and area choose page to govuk style #270

Convert the scheme browse and area choose page to govuk style #270

dabreegster commented Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

dabreegster Jul 12, 2023

robinlovelace-ate commented Jul 12, 2023

robinlovelace-ate commented Jul 12, 2023

robinlovelace-ate commented Jul 12, 2023

Pete-Y-CS Jul 13, 2023

Pete-Y-CS Jul 13, 2023

dabreegster Jul 13, 2023

Pete-Y-CS Jul 13, 2023

dabreegster Jul 13, 2023

Convert the scheme browse and area choose page to govuk style #270

Convert the scheme browse and area choose page to govuk style #270

Conversation

dabreegster commented Jul 12, 2023

Code style choices

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

robinlovelace-ate commented Jul 12, 2023

robinlovelace-ate commented Jul 12, 2023

robinlovelace-ate commented Jul 12, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment