Add alternative header layout

This adds a new layout alternative that allows for search on the left of the header and navigation items on the right to support some layouts seen in whitehall pages. It also corrects a stray div that was breaking the with-nav option without a searchbox.
alphagov · Feb 4, 2020 · 4cd8250 · 4cd8250
1 parent 9bdceff
commit 4cd8250
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss
@@ -28,7 +28,7 @@
   }
 }
 
-.gem-c-layout-header--search-left  {
+.gem-c-layout-header--search-left {
 
   .gem-c-header__menu-button {
     position: absolute;
@@ -46,15 +46,15 @@
   }
 
   .govuk-header__navigation--end {
-    padding-top:0;
+    padding-top: 0;
     text-align: left;
   }
 
   .gem-c-layout-header__search {
     margin-bottom: govuk-spacing(2);
   }
 
-  .gem-c-layout-header__search{
+  .gem-c-layout-header__search {
     padding-bottom: govuk-spacing(5);
   }
 

diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb
@@ -44,10 +44,10 @@
     <div class="govuk-header__container <%= width_class %>">
       <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
       <%= render "govuk_publishing_components/components/layout_header/header_logo", public_environment: public_environment, environment: environment, product_name: product_name %>
+      </div>
       <div class="govuk-header__content gem-c-header__content">
         <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items  %>
       </div>
-      </div>
       <% if search %>
           <div class="govuk-grid-column-one-third gem-c-layout-header__search">
             <%= render "govuk_publishing_components/components/search", {

diff --git a/spec/components/layout_header_spec.rb b/spec/components/layout_header_spec.rb
@@ -61,7 +61,7 @@ def component_name
     assert_select ".gem-c-layout-header .gem-c-search"
   end
 
-    it "renders the search bar on the left when requested" do
+  it "renders the search bar on the left when requested" do
     render_component(environment: 'public', search: true, search_left: true)
 
     assert_select ".gem-c-layout-header--search-left"