From 9458eb78604c1979d80c559c8006b0057387d967 Mon Sep 17 00:00:00 2001
From: Chris Yoong <chris.yoong@digital.cabinet-office.gov.uk>
Date: Wed, 26 May 2021 17:51:55 +0100
Subject: [PATCH] Update locator pages

Example Page: /find-local-council
Update to resolve visual differences for frontend swap

Remove border from swap on:
/foreign-travel-advice
---
 app/assets/stylesheets/views/_homepage.scss     | 17 -----------------
 .../stylesheets/views/_travel-advice.scss       |  3 ++-
 app/controllers/travel_advice_controller.rb     |  2 +-
 app/views/application/_location_form.html.erb   |  4 ++--
 app/views/find_local_council/index.html.erb     | 10 +++++-----
 app/views/place/_option.html.erb                |  6 +++---
 .../place/_option_report_child_abuse.html.erb   |  2 +-
 .../unit/foreign-travel-advice.spec.js          | 12 ++++++------
 8 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/views/_homepage.scss b/app/assets/stylesheets/views/_homepage.scss
index 4e44e90385..90455de295 100644
--- a/app/assets/stylesheets/views/_homepage.scss
+++ b/app/assets/stylesheets/views/_homepage.scss
@@ -1,20 +1,3 @@
-// Remove search from the top bar as we have one in the content.
-
-// stylelint-disable selector-no-qualifying-type, selector-max-id
-body.homepage {
-  #global-header-bar {
-    display: none;
-  }
-
-  // #wrapper,
-  // #content {
-  //   margin: 0;
-  //   width: auto; // needed for IE overides
-  //   max-width: 100%;
-  // }
-}
-// stylelint-enable selector-no-qualifying-type, selector-max-id
-
 .home-top {
   overflow: hidden;
   background: $govuk-brand-colour;
diff --git a/app/assets/stylesheets/views/_travel-advice.scss b/app/assets/stylesheets/views/_travel-advice.scss
index 855a8ddf29..50209f672e 100644
--- a/app/assets/stylesheets/views/_travel-advice.scss
+++ b/app/assets/stylesheets/views/_travel-advice.scss
@@ -8,7 +8,8 @@
   }
 
   .country-filter-form__form-group {
-    margin: 0; // Because fieldset has 2px margins by default.
+    border: 0;
+    margin: 0;
   }
 
   .subscriptions-wrapper {
diff --git a/app/controllers/travel_advice_controller.rb b/app/controllers/travel_advice_controller.rb
index 6e3d2ff298..b3e1f45299 100644
--- a/app/controllers/travel_advice_controller.rb
+++ b/app/controllers/travel_advice_controller.rb
@@ -7,7 +7,7 @@ def index
     @presenter = TravelAdviceIndexPresenter.new(@content_item)
 
     respond_to do |format|
-      format.html { 
+      format.html do
         slimmer_template "gem_layout"
         render locals: { full_width: true }
       end
diff --git a/app/views/application/_location_form.html.erb b/app/views/application/_location_form.html.erb
index 2ed054ba50..dd2e408c35 100644
--- a/app/views/application/_location_form.html.erb
+++ b/app/views/application/_location_form.html.erb
@@ -23,8 +23,8 @@
   <% end %>
 
   <form method="post" id="local-locator-form" class="location-form">
-    <fieldset>
-      <legend class="visuallyhidden">Postcode lookup</legend>
+    <fieldset class="govuk-fieldset">
+      <legend class=" govuk-fieldset__legend govuk-visually-hidden">Postcode lookup</legend>
 
       <%= render partial: 'draft_fields' %>
 
diff --git a/app/views/find_local_council/index.html.erb b/app/views/find_local_council/index.html.erb
index e668276c7e..5c00968e08 100644
--- a/app/views/find_local_council/index.html.erb
+++ b/app/views/find_local_council/index.html.erb
@@ -1,9 +1,9 @@
 <%= render layout: 'base_page' do %>
   <p class="govuk-body">Find the website for your local council.</p>
   <%= render partial: 'location_form',
-             locals: {
-               format: 'service',
-               publication_format: 'find_local_council',
-               postcode: @postcode,
-             } %>
+    locals: {
+      format: 'service',
+      publication_format: 'find_local_council',
+      postcode: @postcode,
+    } %>
 <% end %>
diff --git a/app/views/place/_option.html.erb b/app/views/place/_option.html.erb
index 041b9d9f89..b0e5dbbfa5 100644
--- a/app/views/place/_option.html.erb
+++ b/app/views/place/_option.html.erb
@@ -7,15 +7,15 @@
 
             <p class="adr govuk-body">
               <% if place["name"].present? %>
-              <span class="fn"><%= place["name"] %></span><span class="visuallyhidden">,</span>
+              <span class="fn"><%= place["name"] %></span><span class="govuk-visually-hidden">,</span>
               <% end %>
 
               <% if place["address"].present? %>
-                <br /><span class="street-address"><%= place["address"] %></span><span class="visuallyhidden">,</span>
+                <br /><span class="street-address"><%= place["address"] %></span><span class="govuk-visually-hidden">,</span>
               <% end %>
 
               <% if place["town"].present? %>
-                <br /><span class="locality"><%= place["town"] %></span><span class="visuallyhidden">,</span>
+                <br /><span class="locality"><%= place["town"] %></span><span class="govuk-visually-hidden">,</span>
               <% end %>
 
               <% if place["postcode"].present? %>
diff --git a/app/views/place/_option_report_child_abuse.html.erb b/app/views/place/_option_report_child_abuse.html.erb
index 4886dcbeb4..345671f378 100644
--- a/app/views/place/_option_report_child_abuse.html.erb
+++ b/app/views/place/_option_report_child_abuse.html.erb
@@ -32,7 +32,7 @@
 
             <% if place["url"].present? %>
               <p class="url govuk-body">
-                <a href="<%= place["url"] %>">Go to their website</a>
+                <a href="<%= place["url"] %>" class="govuk-link">Go to their website</a>
               </p>
             <% end %>
           </div>
diff --git a/spec/javascripts/unit/foreign-travel-advice.spec.js b/spec/javascripts/unit/foreign-travel-advice.spec.js
index f60dcf95a8..e48ab93dd6 100644
--- a/spec/javascripts/unit/foreign-travel-advice.spec.js
+++ b/spec/javascripts/unit/foreign-travel-advice.spec.js
@@ -3,7 +3,7 @@ var GOVUKTest = {
   countryFilter: {
     threeCategories: '<div id="W" class="list">' +
       '<h3>' +
-      '<span class="visuallyhidden">Countries starting with </span>W</h3>' +
+      '<span class="govuk-visually-hidden">Countries starting with </span>W</h3>' +
       '<ul class="countries js-countries-list">' +
       '<li data-synonyms=""><a href="/foreign-travel-advice/wallis-and-futuna">Wallis and Futuna</a></li>' +
       '<li data-synonyms="Sahel"><a href="/foreign-travel-advice/western-sahara">Western Sahara</a></li>' +
@@ -11,14 +11,14 @@ var GOVUKTest = {
       '</div>' +
       '<div id="Y" class="list">' +
       '<h3>' +
-      '<span class="visuallyhidden">Countries starting with </span>Y</h3>' +
+      '<span class="govuk-visually-hidden">Countries starting with </span>Y</h3>' +
       '<ul class="countries js-countries-list">' +
       '<li data-synonyms=""><a href="/foreign-travel-advice/yemen">Yemen</a></li>' +
       '</ul>' +
       '</div>' +
       '<div id="Z" class="list">' +
       '<h3>' +
-      '<span class="visuallyhidden">Countries starting with </span>Z</h3>' +
+      '<span class="govuk-visually-hidden">Countries starting with </span>Z</h3>' +
       '<ul class="countries js-countries-list">' +
       '<li data-synonyms=""><a href="/foreign-travel-advice/zambia">Zambia</a></li>' +
       '<li data-synonyms=""><a href="/foreign-travel-advice/zimbabwe">Zimbabwe</a></li>' +
@@ -31,7 +31,7 @@ GOVUKTest.countryFilter.categories = {
   allWithCountries: '<section class="countries-wrapper">' + GOVUKTest.countryFilter.threeCategories + '</section>',
   twoWithoutCountries: '<section><div id="W" class="list">' +
     '<h3>' +
-    '<span class="visuallyhidden">Countries starting with </span>W</h3>' +
+    '<span class="govuk-visually-hidden">Countries starting with </span>W</h3>' +
     '<ul class="countries js-countries-list">' +
     '<li data-synonyms="" style="display:none"><a href="/foreign-travel-advice/wallis-and-futuna">Wallis and Futuna</a></li>' +
     '<li data-synonyms="Sahel" style="display:none"><a href="/foreign-travel-advice/western-sahara">Western Sahara</a></li>' +
@@ -39,14 +39,14 @@ GOVUKTest.countryFilter.categories = {
     '</div>' +
     '<div id="Y" class="list">' +
     '<h3>' +
-    '<span class="visuallyhidden">Countries starting with </span>Y</h3>' +
+    '<span class="govuk-visually-hidden">Countries starting with </span>Y</h3>' +
     '<ul class="countries js-countries-list">' +
     '<li data-synonyms="" style="display:none"><a href="/foreign-travel-advice/yemen">Yemen</a></li>' +
     '</ul>' +
     '</div>' +
     '<div id="Z" class="list">' +
     '<h3>' +
-    '<span class="visuallyhidden">Countries starting with </span>Z</h3>' +
+    '<span class="govuk-visually-hidden">Countries starting with </span>Z</h3>' +
     '<ul class="countries js-countries-list">' +
     '<li data-synonyms=""><a href="/foreign-travel-advice/zambia">Zambia</a></li>' +
     '<li data-synonyms=""><a href="/foreign-travel-advice/zimbabwe">Zimbabwe</a></li>' +