Merge pull request #1915 from alphagov/tweak-public-layout

Allow emergency banner and global bar in public layout component
alphagov · Mar 19, 2021 · 176d844 · 176d844
2 parents 24d4692 + 0266a2a
commit 176d844
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Rescope Brexit CTA to en/cy locale only ([PR #1984](https://github.com/alphagov/govuk_publishing_components/pull/1984))
 * Add js tests for accordion component ([PR #1977](https://github.com/alphagov/govuk_publishing_components/pull/1977))
 * Fix search component label background ([PR #1983](https://github.com/alphagov/govuk_publishing_components/pull/1983))
+* Allow emergency banner and global bar in public layout component ([PR #1978](https://github.com/alphagov/govuk_publishing_components/pull/1915)) MINOR
 
 ## 24.6.1
 

diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss
@@ -1,4 +1,13 @@
 .gem-c-layout-for-public {
-  margin: 0;
   font-family: $govuk-font-family;
 }
+
+.gem-c-layout-for-public__blue-bar {
+  background: $govuk-brand-colour;
+  height: govuk-spacing(2);
+}
+
+.js-enabled .gem-c-layout-for-public__global-banner-wrapper {
+  margin-top: - govuk-spacing(2);
+  position: relative;
+}
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss
@@ -78,12 +78,14 @@
   }
 }
 
-.gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
-.gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
-.gem-c-layout-header__search.govuk-grid-column-one-third,
-.gem-c-layout-header__logo.govuk-grid-column-two-thirds {
-  padding-right: 0;
-  padding-left: 0;
+@include govuk-compatibility(govuk_template) {
+  .gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
+  .gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
+  .gem-c-layout-header__search.govuk-grid-column-one-third,
+  .gem-c-layout-header__logo.govuk-grid-column-two-thirds {
+    padding-right: 0;
+    padding-left: 0;
+  }
 }
 
 .gem-c-layout-header__logo,
@@ -104,7 +106,6 @@
 
 .gem-c-header__content.govuk-header__content {
   width: auto;
-  padding-left: 0;
 
   @include govuk-media-query($from: desktop) {
     float: right;

diff --git a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb b/app/views/govuk_publishing_components/components/_layout_for_public.html.erb
@@ -1,10 +1,33 @@
 <%
-  title ||= "GOV.UK - The best place to find government services and information"
-  html_lang ||= "en"
+  emergency_banner ||= nil
   full_width ||= false
+  global_bar ||= nil
+  html_lang ||= "en"
+  layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
+  navigation_items ||= []
   omit_header ||= false
   show_search = local_assigns.include?(:show_search) ? local_assigns[:show_search] : true
-  layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
+  title ||= "GOV.UK - The best place to find government services and information"
+
+# This is a hack - but it's the only way I can find to not have two blue bars on
+# constrained width layouts.
+#
+# The full width layout hides the blue bar underneath the blar header bar - so
+# full width pages won't see the blue bar unless it's added by another component
+# - and for most pages that component is the global banner.
+#
+# The constrained width layout doesn't hide the blue bar - so having the global
+# banner on a constrained width layout means there are two blue bars.
+#
+# The global banner is shown with JavaScript, so users without JavaScript won't
+# see it. So the constrained width blue bar can't be turned off as then it'll be
+# off for everyone.
+#
+# This booleon adds a CSS class that shifts the banners up by the blue bar's
+# height, making the two blue bars overlap and appear as one. The class is added
+# when a) there's content for the emergency or global banner *and* b) when using
+# the contrained width layout.
+  blue_bar_dedupe = !full_width && global_bar.present?
 -%>
 <!DOCTYPE html>
   <!--[if lt IE 9]><html class="lte-ie8" lang="<%= html_lang %>"><![endif]-->
@@ -48,13 +71,31 @@
     <% unless omit_header %>
       <%= render "govuk_publishing_components/components/layout_header", {
         search: show_search,
-        # layout-header will always have border-bottom, unless the layout is full width
-        remove_bottom_border: full_width,
+        navigation_items: navigation_items,
+
+        # The (blue) bottom border needs to be underneath the emergency banner -
+        # so it has been turned off and added in manually.
+        remove_bottom_border: true,
       } %>
     <% end %>
-    <div class="<%= "govuk-width-container" unless full_width %>"  id="content">
+
+    <%= raw(emergency_banner) %>
+
+    <% unless full_width %>
+      <div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
+    <% end %>
+
+    <% if global_bar.present? %>
+      <%= content_tag("div", {
+        class: blue_bar_dedupe ? "gem-c-layout-for-public__global-banner-wrapper" : nil,
+      }) do %>
+        <%= raw(global_bar) %>
+      <% end %>
+    <% end %>
+
+    <div id="wrapper" class="<%= "govuk-width-container" unless full_width %>">
       <%= yield :before_content %>
-      <main class="govuk-main-wrapper">
+      <main class="govuk-main-wrapper" id="content">
         <%= yield %>
       </main>
     </div>

diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb
@@ -1,16 +1,15 @@
 <%
-  product_name ||= nil
   environment ||= nil
   full_width ||= false
-  search ||= false
-  search_left ||= false
-  navigation_items ||= []
   navigation_aria_label ||= "Top level"
+  navigation_items ||= []
+  product_name ||= nil
   remove_bottom_border ||= false
+  search ||= false
   search_left ||= false
   width_class = full_width ? "govuk-header__container--full-width" : "govuk-width-container"
 
-  header_classes = %w(gem-c-layout-header govuk-header)
+  header_classes = %w[gem-c-layout-header govuk-header]
   header_classes << "gem-c-layout-header--#{environment}" if environment
   header_classes << "gem-c-layout-header--no-bottom-border" if remove_bottom_border
   header_classes << "gem-c-layout-header--search-left" if search_left
@@ -28,18 +27,22 @@
         <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
           <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>
-        <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
-          <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
-        </div>
+        <% if navigation_items.any? %>
+          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
+            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
+          </div>
+        <% end %>
       </div>
     <% else %>
-      <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
+      <div class="govuk-grid-row">
         <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
           <%= render "govuk_publishing_components/components/layout_header/header_logo", 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, navigation_aria_label: navigation_aria_label  %>
-        </div>
+        <% if navigation_items.any? %>
+          <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
+            <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label %>
+          </div>
+        <% end %>
         <% if search %>
           <div class="govuk-grid-column-one-third gem-c-layout-header__search">
             <%= render "govuk_publishing_components/components/layout_header/search" %>

diff --git a/app/views/govuk_publishing_components/components/docs/layout_for_public.yml b/app/views/govuk_publishing_components/components/docs/layout_for_public.yml
@@ -27,3 +27,29 @@ examples:
     description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
     data:
       omit_header: true
+  navigation:
+    description: Passes the navigation through to the [header component](/component-guide/layout_header/).
+    data:
+      show_search: false
+      navigation_items:
+      - text: Navigation item 1
+        href: "item-1"
+        active: true
+      - text: Navigation item 2
+        href: "item-2"
+      - text: Hidden on desktop
+        href: "item-3"
+        show_only_in_collapsed_menu: true
+  with_global_banner:
+    description: This allows the HTML for the global banner to be added to the page. This is only the slot for the global banner - the markup for the banner needs to be passed in.
+    data:
+      global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
+  with_emergency_banner:
+    description: This allows the HTML for the emergency banner to be added to the page in the correct place. This is only the slot for the emergency banner - the markup for the banner needs to be passed in.
+    data:
+      emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
+  with_global_and_emergency_banner:
+    description: Both global banner and emergency banner should be usable together.
+    data:
+      emergency_banner: <div class="govuk-!-padding-top-3 govuk-!-padding-bottom-3">This is the emergency banner slot</div>
+      global_bar: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global bar slot</div>
diff --git a/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb b/app/views/govuk_publishing_components/components/layout_header/_navigation_items.html.erb
@@ -1,7 +1,14 @@
 <% navigation_aria_label ||= "Top level" %>
 
 <% if navigation_items.any? %>
-  <button role="button" class="govuk-header__menu-button gem-c-header__menu-button govuk-js-header-toggle" aria-controls="navigation" aria-label="Show or hide Top Level Navigation">Menu</button>
+  <button
+    aria-controls="navigation"
+    aria-label="Show or hide Top Level Navigation"
+    class="govuk-header__menu-button govuk-js-header-toggle gem-c-header__menu-button"
+    type="button"
+  >
+    Menu
+  </button>
   <%= tag.nav class: "gem-c-header__nav", aria: { label: navigation_aria_label } do %>
     <ul id="navigation" class="govuk-header__navigation govuk-header__navigation--end">
       <% navigation_items.each_with_index do |item, index| %>

diff --git a/spec/components/layout_for_public_spec.rb b/spec/components/layout_for_public_spec.rb
@@ -20,13 +20,13 @@ def component_name
   it "displays as a restricted width layout by default" do
     render_component({})
 
-    assert_select "#content.govuk-width-container"
+    assert_select "#wrapper.govuk-width-container"
   end
 
   it "can support full width layouts" do
     render_component(full_width: true)
 
-    assert_select "#content.govuk-width-container", false, "Should not apply govuk-width-container class when full width"
+    assert_select "#wrapper.govuk-width-container", false, "Should not apply govuk-width-container class when full width"
   end
 
   it "displays with search bar by default" do
@@ -46,4 +46,42 @@ def component_name
 
     assert_select ".gem-c-layout-for-public .gem-c-layout-header", false
   end
+
+  it "can add a emergency banner" do
+    render_component({
+      emergency_banner: "<div id='test-emergency-banner'>This is an emergency banner test</div>",
+    })
+
+    assert_select "#test-emergency-banner", text: "This is an emergency banner test"
+  end
+
+  it "can add a global bar" do
+    render_component({
+      global_bar: "<div id='test-global-banner'>This is a global bar test</div>",
+    })
+
+    assert_select "#test-global-banner", text: "This is a global bar test"
+  end
+
+  it "can add both an emergency banner and a global bar" do
+    render_component({
+      emergency_banner: "<div id='test-emergency-banner'>This is an emergency banner test</div>",
+      global_bar: "<div id='test-global-banner'>This is a global bar test</div>",
+    })
+
+    assert_select "#test-emergency-banner", text: "This is an emergency banner test"
+    assert_select "#test-global-banner", text: "This is a global bar test"
+  end
+
+  it "has a blue bar by default" do
+    render_component({})
+
+    assert_select ".gem-c-layout-for-public__blue-bar"
+  end
+
+  it "has no blue bar when using the full width layout" do
+    render_component(full_width: true)
+
+    assert_select ".gem-c-layout-for-public__blue-bar", false
+  end
 end
diff --git a/spec/dummy/app/views/layouts/dummy_public_layout.html.erb b/spec/dummy/app/views/layouts/dummy_public_layout.html.erb
@@ -1,5 +1,7 @@
 <%= render 'govuk_publishing_components/components/layout_for_public', {
-    title: "Example public page"
+    emergency_banner: '<div class="govuk-width-container"><p class="govuk-body">This is the emergency banner slot.</p></div>',
+    global_bar: '<div class="govuk-width-container govuk-!-margin-top-2"><p class="govuk-body">This is the global bar slot.</p></div>',
+    title: "Example public page",
 } do %>
   <%= yield %>
 <% end %>
diff --git a/spec/dummy/app/views/welcome/public_example.html.erb b/spec/dummy/app/views/welcome/public_example.html.erb
@@ -2,6 +2,7 @@
 
 <p class="govuk-body">
   Pages with the public layout can use some GOV.UK styles. For example, the grid:
+</p>
 
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-two-thirds">
@@ -14,7 +15,6 @@
       <p class="govuk-body">This is a paragraph inside a one-third wide column</p>
     </div>
   </div>
-</p>
 <% content_for :before_content do %>
   <% render "govuk_publishing_components/components/back_link", href:'/' %>
 <% end %>