Update locator pages

Example Page: /find-local-council Update to resolve visual differences for frontend swap Remove border from swap on: /foreign-travel-advice
alphagov · May 28, 2021 · 1274c00 · 1274c00
1 parent ceacdc0
commit 1274c00
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 47 deletions.
diff --git 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;
@@ -32,7 +15,7 @@ body.homepage {
 
 .home-top__intro--simpler {
   font-weight: bold;
-  margin-bottom: 20px;
+  margin-bottom: govuk-spacing(4);
 }
 
 .home-top__links {
@@ -170,7 +153,7 @@ body.homepage {
 
 .home-numbers__large {
   // Manually setting font-size rather than using the mixins size
-  // because the layout doesnt really work otherwise
+  // because the layout doesn't really work otherwise
   font-size: 53px;
   line-height: (55 / 53);
   font-weight: bold;

diff --git 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
@@ -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
@@ -1,7 +1,7 @@
 <div class="postcode-search-form"
-      data-module="track-submit"
-      data-track-category="postcodeSearch:<%= publication_format %>"
-      data-track-action="postcodeSearchStarted">
+  data-module="track-submit"
+  data-track-category="postcodeSearch:<%= publication_format %>"
+  data-track-action="postcodeSearchStarted">
 
   <% if @location_error %>
     <%
@@ -23,8 +23,8 @@
   <% end %>
 
   <form method="post" id="local-locator-form" class="location-form">
-    <fieldset>
-      <legend class="visuallyhidden"><%= t('formats.local_transaction.postcode_lookup') %></legend>
+    <fieldset class="govuk-fieldset">
+      <legend class=" govuk-fieldset__legend govuk-visually-hidden">Postcode lookup</legend>
 
       <%= render partial: 'draft_fields' %>
 
@@ -40,14 +40,18 @@
         autocomplete: "postal-code",
       } %>
 
-      <%= render "govuk_publishing_components/components/button", text: "Find", margin_bottom: true %>
+      <%= render "govuk_publishing_components/components/button", 
+        text: "Find", 
+        margin_bottom: true 
+      %>
 
       <%= tag.p link_to(t('formats.local_transaction.find_postcode_royal_mail'),
-                    "https://www.royalmail.com/find-a-postcode",
-                    id: 'postcode-finder-link',
-                    class: "govuk-link",
-                    rel: "external"),
-                class: "govuk-body" %>
+        "https://www.royalmail.com/find-a-postcode",
+        id: 'postcode-finder-link',
+        class: "govuk-link",
+        rel: "external"),
+        class: "govuk-body" 
+      %>
     </fieldset>
   </form>
 </div>
diff --git 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"><%= t('formats.local_transaction.find_council_website') %></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
@@ -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
@@ -32,7 +32,7 @@
 
             <% if place["url"].present? %>
               <p class="url govuk-body">
-                <a href="<%= place["url"] %>"><%= t('place.go_to_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
@@ -3,22 +3,22 @@ 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>' +
       '</ul>' +
       '</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,22 +31,22 @@ 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>' +
     '</ul>' +
     '</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>' +