Prepare for layout component

app/assets/stylesheets/application.scss

@@ -1,13 +1,8 @@
-$govuk-compatibility-govuktemplate: true;
+$govuk-compatibility-govuktemplate: false;
 $govuk-use-legacy-palette: false;
-
-// BASE Stylesheet
-
 $govuk-new-link-styles: true;
-
 // Components from govuk_publishing_components gem
 @import 'govuk_publishing_components/govuk_frontend_support';
-@import 'govuk_publishing_components/component_support';
 @import 'govuk_publishing_components/components/back-link';
 @import 'govuk_publishing_components/components/breadcrumbs';
 @import 'govuk_publishing_components/components/button';
@@ -17,6 +12,7 @@ $govuk-new-link-styles: true;
 @import 'govuk_publishing_components/components/error-alert';
 @import 'govuk_publishing_components/components/error-message';
 @import 'govuk_publishing_components/components/feedback';
+@import 'govuk_publishing_components/components/fieldset';
 @import 'govuk_publishing_components/components/govspeak';
 @import 'govuk_publishing_components/components/heading';
 @import 'govuk_publishing_components/components/hint';
@@ -43,7 +39,7 @@ $govuk-new-link-styles: true;
 @import 'govuk_publishing_components/components/title';
 @import 'govuk_publishing_components/components/warning-text';
 
-// components
+// local app components
 @import "components/calendar";
 @import "components/metadata";
 @import "components/subscribe";
@@ -52,7 +48,6 @@ $govuk-new-link-styles: true;
 @import "styleguide/conditionals";
 
 // Helper stylesheets (things on more than one page layout)
-@import "helpers/overwrites";
 @import "helpers/truncated-url";
 @import "helpers/title-context-reset";
 
@@ -64,7 +59,6 @@ $govuk-new-link-styles: true;
 @import "views/travel-advice";
 @import "views/report-child-abuse";
 @import "views/local-authority";
-@import "views/simple-smart-answer";
 
 // exceptional format overrides
 @import "views/location_form";

app/assets/stylesheets/print.scss

@@ -1,4 +1,4 @@
-$govuk-compatibility-govuktemplate: true;
+$govuk-compatibility-govuktemplate: false;
 $govuk-use-legacy-palette: false;
 
 @import 'govuk_publishing_components/govuk_frontend_support';

app/assets/stylesheets/views/_homepage.scss

@@ -1,30 +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%;
-  }
-
-  .feedback-wrapper {
-    max-width: 960px;
-    margin: 0 auto;
-    padding: 0 govuk-spacing(3);
-
-    @include govuk-media-query($from: tablet) {
-      padding: 0 govuk-spacing(6);
-    }
-  }
-}
-// stylelint-enable selector-no-qualifying-type, selector-max-id
-
 .home-top {
   overflow: hidden;
   background: $govuk-brand-colour;
@@ -42,7 +15,7 @@ body.homepage {
 
 .home-top__intro--simpler {
   font-weight: bold;
-  margin-bottom: 20px;
+  margin-bottom: govuk-spacing(4);
 }
 
 .home-top__links {
@@ -157,7 +130,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;
@@ -174,6 +147,10 @@ body.homepage {
   margin: govuk-spacing(2) 0 govuk-spacing(4);
 }
 
+.home-promo__heading {
+  margin: 0;
+}
+
 .home-promo__link {
   @include govuk-font(24, $weight: bold);
   @include govuk-responsive-margin(2, "bottom");
@@ -187,10 +164,6 @@ body.homepage {
   max-width: 100%;
 }
 
-.home-promo__title {
-  @include govuk-font(24, $weight: bold);
-}
-
 .home-promo__text {
   @include govuk-font(16);
   margin: 0 0 govuk-spacing(4);
@@ -211,6 +184,10 @@ body.homepage {
 }
 
 .home-more-promo {
+  margin: 0;
+}
+
+.home-more-promo__link {
   display: block;
   padding: 2.5em .75em;
   margin-bottom: govuk-spacing(3);

app/assets/stylesheets/views/_travel-advice.scss

@@ -8,7 +8,9 @@
   }
 
   .country-filter-form__form-group {
-    margin: 0; // Because fieldset has 2px margins by default.
+    border: 0;
+    margin: 0;
+    padding: 0;
   }
 
   .subscriptions-wrapper {

app/controllers/application_controller.rb

@@ -11,7 +11,7 @@ class ApplicationController < ActionController::Base
   rescue_from GdsApi::HTTPForbidden, with: :error_403
   rescue_from RecordNotFound, with: :cacheable_404
 
-  slimmer_template "core_layout"
+  slimmer_template "gem_layout"
 
   if ENV["BASIC_AUTH_USERNAME"]
     http_basic_authenticate_with(

app/controllers/help_controller.rb

@@ -3,12 +3,12 @@ class HelpController < ApplicationController
 
   def index
     fetch_and_setup_content_item("/help")
-    render locals: { full_width: true }
+    slimmer_template "gem_layout"
   end
 
   def tour
     fetch_and_setup_content_item("/tour")
-    render locals: { full_width: true }
+    slimmer_template "gem_layout"
   end
 
   def cookie_settings

app/controllers/homepage_controller.rb

@@ -3,12 +3,10 @@ class HomepageController < ApplicationController
 
   def index
     set_slimmer_headers(
-      template: "core_layout",
+      template: "gem_layout_full_width",
       remove_search: true,
     )
 
     fetch_and_setup_content_item("/")
-
-    render locals: { full_width: true }
   end
 end

app/controllers/roadmap_controller.rb

@@ -2,6 +2,6 @@ class RoadmapController < ApplicationController
   include Cacheable
 
   def index
-    render locals: { full_width: true }
+    slimmer_template "gem_layout"
   end
 end

app/controllers/travel_advice_controller.rb

@@ -7,7 +7,9 @@ def index
     @presenter = TravelAdviceIndexPresenter.new(@content_item)
 
     respond_to do |format|
-      format.html { render locals: { full_width: true } }
+      format.html do
+        slimmer_template "gem_layout"
+      end
       format.atom do
         set_expiry(5.minutes)
         headers["Access-Control-Allow-Origin"] = "*"

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 %>
     <%
@@ -22,9 +22,9 @@
     } %>
   <% end %>
 
-  <form method="post" id="local-locator-form" class="location-form">
-    <fieldset>
-      <legend class="visuallyhidden"><%= t('formats.local_transaction.postcode_lookup') %></legend>
+  <form method="post" id="local-locator-form" class="location-form govuk-!-margin-bottom-9">
+    <fieldset class="govuk-fieldset">
+      <legend class=" govuk-fieldset__legend govuk-visually-hidden"><%= t('formats.local_transaction.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>