Merge pull request #2137 from alphagov/update-address-pattern

Put county field back in address pattern and update guidance

src/patterns/addresses/index.md.njk

@@ -14,45 +14,10 @@ This guidance is for government teams that build online services. [To find infor
 
 Help users provide an address using one of the following:
 
-- Address lookup
 - Multiple text inputs
+- Address lookup
 - Textarea
 
-## Address lookup
-
-<div class="app-video">
-  <video class="app-video__player" role="region" aria-labelledby="passports-address-lookup-video-description" controls muted>
-    <source src="passports-address-lookup.mp4" type="video/mp4">
-  </video>
-  <p class="app-video__description" id="passports-address-lookup-video-description">
-    This video shows the address lookup in practice. It does not have any audio.
-  </p>
-</div>
-
-### When to use an address lookup
-
-Use an address lookup when you’re asking users for a UK address.
-
-### When not to use an address lookup
-
-Address lookups generally only work for UK addresses. Use a manual option such as  multiple text inputs or a textarea when you are collecting mostly or only international&nbsp;addresses
-
-### How an address lookup works
-
-An address lookup lets users specify a UK address by entering their postcode and selecting their address from a list. There is also an option to enter a street name or&nbsp;number.
-
-When using an address lookup, you should:
-
-- make it clear that it will only work for UK addresses
-- provide a manual option for people with international addresses or addresses that are missing or not properly listed in the address lookup
-- let people enter their postcodes in upper or lower case and with or without spaces
-
-#### Allow different postcode formats
-
-It is easier for users if you accept and ignore unwanted characters. This is better than rejecting the input and telling a user they've not provided a valid postcode.
-
-You should allow postcodes that contain upper and lower case letters, no spaces, additional spaces at the beginning, middle or end and punctuation like hyphens, brackets, dashes and full stops.
-
 ## Multiple text inputs
 
 {{ example({group: "patterns", item: "addresses", example: "multiple", html: true, nunjucks: true, open: true, size: "xl"}) }}
@@ -84,7 +49,9 @@ If you use multiple text inputs, you should:
 
 Make sure there are enough text inputs to accommodate longer addresses if you know your users will need them. For example, allow users to include a company name or flat&nbsp;number.
 
-Do not ask for the county (such as Berkshire or Cumbria) unless you have good evidence of a need for it. It's not part of a correct UK address, according to Royal Mail, and it's not used to deliver mail.
+Make it optional for users to enter their county (such as Berkshire or Cumbria). It’s not part of a correct UK address, according to Royal Mail, and it’s not used to deliver post.
+
+Remove the county field if you’re sure your users will not need it, and your service will not use it.
 
 #### Use the autocomplete attribute on multiple address fields
 
@@ -102,6 +69,41 @@ Error messages should be styled like this:
 
 Make sure errors follow the guidance in [error message](/components/error-message/) and have specific error messages for specific error states.
 
+## Address lookup
+
+<div class="app-video">
+  <video class="app-video__player" role="region" aria-labelledby="passports-address-lookup-video-description" controls muted>
+    <source src="passports-address-lookup.mp4" type="video/mp4">
+  </video>
+  <p class="app-video__description" id="passports-address-lookup-video-description">
+    This video shows the address lookup in practice. It does not have any audio.
+  </p>
+</div>
+
+### When to use an address lookup
+
+Use an address lookup when you’re asking users for a UK address.
+
+### When not to use an address lookup
+
+Address lookups generally only work for UK addresses. Use a manual option such as  multiple text inputs or a textarea when you are collecting mostly or only international&nbsp;addresses
+
+### How an address lookup works
+
+An address lookup lets users specify a UK address by entering their postcode and selecting their address from a list. There is also an option to enter a street name or&nbsp;number.
+
+When using an address lookup, you should:
+
+- make it clear that it will only work for UK addresses
+- provide a manual option for people with international addresses or addresses that are missing or not properly listed in the address lookup
+- let people enter their postcodes in upper or lower case and with or without spaces
+
+#### Allow different postcode formats
+
+It is easier for users if you accept and ignore unwanted characters. This is better than rejecting the input and telling a user they've not provided a valid postcode.
+
+You should allow postcodes that contain upper and lower case letters, no spaces, additional spaces at the beginning, middle or end and punctuation like hyphens, brackets, dashes and full stops.
+
 ## Textarea
 
 {{ example({group: "patterns", item: "addresses", example: "textarea", html: true, nunjucks: true, open: true, size: "s"}) }}

src/patterns/addresses/multiple/index.njk

@@ -18,7 +18,7 @@ stylesheets:
 
   {{ govukInput({
     label: {
-      html: 'Address line 1'
+      text: 'Address line 1'
     },
     id: "address-line-1",
     name: "address-line-1",
@@ -27,7 +27,7 @@ stylesheets:
 
   {{ govukInput({
     label: {
-      html: 'Address line 2 (optional)'
+      text: 'Address line 2 (optional)'
     },
     id: "address-line-2",
     name: "address-line-2",
@@ -44,6 +44,15 @@ stylesheets:
     autocomplete: "address-level2"
   }) }}
 
+  {{ govukInput({
+    label: {
+      text: "County (optional)"
+    },
+    classes: "govuk-!-width-two-thirds",
+    id: "address-county",
+    name: "address-county"
+  }) }}
+
   {{ govukInput({
     label: {
       text: "Postcode"