govuk_publishing_components 35.6.0 → 35.8.0

data/app/assets/stylesheets/govuk_publishing_components/components/_document-list.scss

@@ -8,10 +8,14 @@
 }
 
 .gem-c-document-list__item {
-  margin-bottom: govuk-spacing(5);
+  margin-top: govuk-spacing(5);
   padding-top: govuk-spacing(2);
   border-top: 1px solid $govuk-border-colour;
   list-style: none;
+
+  &:first-child {
+    margin-top: 0;
+  }
 }
 
 .gem-c-document-list__item-title {
@@ -86,14 +90,6 @@
   }
 }
 
-.gem-c-document-list--bottom-margin {
-  margin-bottom: govuk-spacing(4);
-}
-
-.gem-c-document-list--top-margin {
-  margin-top: govuk-spacing(4);
-}
-
 .gem-c-document-list__multi-list {
   width: 100%;
   margin-right: 25px;

data/app/assets/stylesheets/govuk_publishing_components/components/_layout-for-public.scss

@@ -9,6 +9,10 @@
   height: govuk-spacing(2);
 }
 
+.gem-c-layout-for-public__blue-bar-wrapper--browse {
+  background-color: #263135;
+}
+
 .js-enabled .gem-c-layout-for-public__global-banner-wrapper {
   margin-top: - govuk-spacing(2);
   min-height: govuk-spacing(2);

data/app/views/govuk_publishing_components/audit/_component_contents.html.erb

@@ -1,7 +1,7 @@
-<table class="govuk-table" <% if show_application_name %>data-audit-list<% end %>>
+<table class="govuk-table">
   <thead class="govuk-table__head">
-    <tr class="govuk-table__row">
-      <th scope="col" class="govuk-table__header sticky-table-header">Component</th>
+    <tr class="govuk-table__row" <% if show_application_name %>data-audit-headings<% end %>>
+      <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="total">Component</th>
       <th scope="col" class="govuk-table__header sticky-table-header" data-component-type="template">
         Template
         <% unless show_application_name %>
@@ -46,10 +46,10 @@
       </th>
     </tr>
   </thead>
-  <tbody class="govuk-table__body">
+  <tbody class="govuk-table__body" <% if show_application_name %>data-audit-list<% end %>>
     <% passed_components[:component_file_details].each do |component| %>
       <tr class="govuk-table__row" data-application="<%= component[:application] %>">
-        <th scope="row" class="govuk-table__header">
+        <th scope="row" class="govuk-table__header" data-component-type="total">
           <% if component[:link] %>
             <a href="<%= component[:link] %>" class="govuk-link">
               <%= component[:name] %>
@@ -63,69 +63,57 @@
             </span>
           <% end %>
         </th>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="template">
           <% if component[:template_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:template_link] %>" class="govuk-link">
-                <%= component[:template_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> template</span>
-              </a>
-            </strong>
+            <a href="<%= component[:template_link] %>" class="govuk-link">
+              <%= component[:template_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> template</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="stylesheet">
           <% if component[:stylesheet_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:stylesheet_link] %>" class="govuk-link">
-                <%= component[:stylesheet_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> stylesheet</span>
-              </a>
-            </strong>
+            <a href="<%= component[:stylesheet_link] %>" class="govuk-link">
+              <%= component[:stylesheet_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> stylesheet</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="print_stylesheet">
           <% if component[:print_stylesheet_exists] %>
-            <strong class="govuk-tag govuk-tag--green">Yes</strong>
+            Yes
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="javascript">
           <% if component[:javascript_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:javascript_link] %>" class="govuk-link">
-                <%= component[:javascript_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript</span>
-              </a>
-            </strong>
+            <a href="<%= component[:javascript_link] %>" class="govuk-link">
+              <%= component[:javascript_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="test">
           <% if component[:test_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:test_link] %>" class="govuk-link">
-                <%= component[:test_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
-              </a>
-            </strong>
+            <a href="<%= component[:test_link] %>" class="govuk-link">
+              <%= component[:test_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> test</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="javascript_test">
           <% if component[:javascript_test_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:javascript_test_link] %>" class="govuk-link">
-                <%= component[:javascript_test_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript test</span>
-              </a>
-            </strong>
+            <a href="<%= component[:javascript_test_link] %>" class="govuk-link">
+              <%= component[:javascript_test_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> javascript test</span>
+            </a>
           <% end %>
         </td>
-        <td class="govuk-table__cell">
+        <td class="govuk-table__cell" data-component-type="helper">
           <% if component[:helper_exists] %>
-            <strong class="govuk-tag govuk-tag--green">
-              <a href="<%= component[:helper_link] %>" class="govuk-link">
-                <%= component[:helper_lines] %>
-                <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> helper</span>
-              </a>
-            </strong>
+            <a href="<%= component[:helper_link] %>" class="govuk-link">
+              <%= component[:helper_lines] %>
+              <span class="govuk-visually-hidden">lines of code in <%= component[:name] %> helper</span>
+            </a>
           <% end %>
         </td>
       </tr>

data/app/views/govuk_publishing_components/audit/show.html.erb

@@ -1,6 +1,7 @@
-<% 
+<%
   add_gem_component_stylesheet("table")
   add_gem_component_stylesheet("select")
+  add_gem_component_stylesheet("summary-list")
 %>
 
 <% content_for :title, "Component audit" %>

data/app/views/govuk_publishing_components/components/_attachment.html.erb

@@ -9,30 +9,44 @@
   data_attributes ||= {}
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
-  if attachment.content_type_name
-    content = if attachment.content_type_abbr
-                raw tag.abbr(attachment.content_type.abbr,
-                             title: attachment.content_type_name,
-                             class: "gem-c-attachment__abbr")
-              else
-                attachment.content_type_name
-              end
-    attributes << tag.span(content, class: "gem-c-attachment__attribute")
-  end
+  case attachment.type
+  when "file"
+    if attachment.content_type_name
+      content = if attachment.content_type_abbr
+                  raw tag.abbr(attachment.content_type.abbr,
+                              title: attachment.content_type_name,
+                              class: "gem-c-attachment__abbr")
+                else
+                  attachment.content_type_name
+                end
+      attributes << tag.span(content, class: "gem-c-attachment__attribute")
+    end
+
+    if attachment.file_size
+      attributes << tag.span(
+        number_to_human_size(attachment.file_size),
+        class: "gem-c-attachment__attribute",
+      )
+    end
 
-  if attachment.file_size
+    if attachment.number_of_pages
+      attributes << tag.span(
+        t("components.attachment.page", count: attachment.number_of_pages),
+        class: "gem-c-attachment__attribute",
+      )
+    end
+  when "html"
     attributes << tag.span(
-      number_to_human_size(attachment.file_size),
+      "HTML",
       class: "gem-c-attachment__attribute",
     )
-  end
-
-  if attachment.number_of_pages
+  when "external"
     attributes << tag.span(
-      t("components.attachment.page", count: attachment.number_of_pages),
+      attachment.url,
       class: "gem-c-attachment__attribute",
     )
   end
+  
 %>
 <%= tag.section class: "gem-c-attachment govuk-!-display-none-print" do %>
   <%= tag.div class: "gem-c-attachment__thumbnail" do %>
@@ -42,8 +56,10 @@
                 tabindex: "-1",
                 "aria-hidden": true,
                 data: data_attributes do %>
-      <% if attachment.thumbnail_url %>
-        <% image_tag(attachment.thumbnail_url, alt: "") %>
+      <% if attachment.thumbnail_url.present? %>
+        <% image_tag(attachment.thumbnail_url, alt: "", class: "gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--custom") %>
+      <% elsif attachment.html? %>
+        <%= render "govuk_publishing_components/components/attachment/thumbnail_html" %>
       <% elsif attachment.document? %>
         <%= render "govuk_publishing_components/components/attachment/thumbnail_document" %>
       <% elsif attachment.spreadsheet? %>
@@ -74,6 +90,10 @@
       <%= tag.p raw(attributes.join(', ')), class: "gem-c-attachment__metadata" %>
     <% end %>
 
+    <% if attachment.preview_url.present? %>
+      <%= tag.p link_to(t("components.attachment.preview_link"), attachment.preview_url, class: "govuk-link"), class: "gem-c-attachment__metadata" %>
+    <% end %>
+
     <% if attachment.is_official_document && !hide_order_copy_link %>
       <%= tag.p link_to(t("components.attachment.order_a_copy"), "https://www.gov.uk/guidance/how-to-buy-printed-copies-of-official-documents", class: "govuk-link govuk-link--no-visited-state", target: "_blank"),
         class: "gem-c-attachment__metadata" %>

data/app/views/govuk_publishing_components/components/_character_count.html.erb

@@ -1,6 +1,4 @@
 <%
-  add_gem_component_stylesheet("character-count")
-
   id ||= "character-count-#{SecureRandom.hex(4)}"
   maxlength ||= nil
   maxwords ||= nil
@@ -24,3 +22,7 @@
     </div>
   <% end %>
 <% end %>
+<%
+  add_gem_component_stylesheet("error-message")
+  add_gem_component_stylesheet("character-count")
+%>

data/app/views/govuk_publishing_components/components/_document_list.html.erb

@@ -1,14 +1,15 @@
 <%
   add_gem_component_stylesheet("document-list")
 
+  local_assigns[:margin_bottom] ||= 5
+  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   items ||= []
 
-  classes = "gem-c-document-list"
-  classes << " gem-c-document-list--top-margin" if local_assigns[:margin_top]
-  classes << " gem-c-document-list--bottom-margin" if local_assigns[:margin_bottom]
-  classes << " gem-c-document-list--no-underline" if local_assigns[:remove_underline]
-  classes << " gem-c-document-list--no-top-border" if local_assigns[:remove_top_border]
-  classes << " gem-c-document-list--no-top-border-first-child" if local_assigns[:remove_top_border_from_first_child]
+  classes = %w[gem-c-document-list]
+  classes << "gem-c-document-list--no-underline" if local_assigns[:remove_underline]
+  classes << "gem-c-document-list--no-top-border" if local_assigns[:remove_top_border]
+  classes << "gem-c-document-list--no-top-border-first-child" if local_assigns[:remove_top_border_from_first_child]
+  classes << shared_helper.get_margin_bottom
 
   within_multitype_list ||= false
   within_multitype_list_class = " gem-c-document-list__multi-list" if within_multitype_list
@@ -19,7 +20,7 @@
 %>
 <% if items.any? %>
   <% unless within_multitype_list %>
-    <ul class="<%= classes %>">
+    <ul class="<%= classes.join(" ") %>">
   <% end %>
     <% items.each do |item| %>
       <% highlight_class = " gem-c-document-list__item--highlight" if item[:highlight] %>

data/app/views/govuk_publishing_components/components/_feedback.html.erb

@@ -1,4 +1,5 @@
 <%
+  add_gem_component_stylesheet("button")
   add_gem_component_stylesheet("feedback")
 
   def utf_encode(element)

data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb

@@ -3,9 +3,11 @@
 
   emergency_banner ||= nil
   full_width ||= false
+  blue_bar ||= local_assigns.include?(:blue_bar) ? local_assigns[:blue_bar] : !full_width
   global_bar ||= nil
   html_lang ||= "en"
   layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
+  blue_bar_background_colour = layout_helper.blue_bar_background_colours.include?(blue_bar_background_colour) ? blue_bar_background_colour : nil
   logo_link ||= "/"
   navigation_items ||= []
   omit_feedback_form ||= false
@@ -44,6 +46,9 @@
   blue_bar_dedupe = !full_width && global_bar.present?
   body_css_classes = %w(gem-c-layout-for-public govuk-template__body)
   body_css_classes << "draft" if draft_watermark
+
+  blue_bar_wrapper_classes = %w()
+  blue_bar_wrapper_classes << "gem-c-layout-for-public__blue-bar-wrapper--#{blue_bar_background_colour}" if blue_bar_background_colour
 -%>
 <!DOCTYPE html>
   <!--[if lt IE 9]><html class="lte-ie8 govuk-template" lang="<%= html_lang %>"><![endif]-->
@@ -117,8 +122,10 @@
 
     <%= raw(emergency_banner) %>
 
-    <% unless full_width %>
-      <div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
+    <% if (blue_bar && !global_bar.present?) || (blue_bar_dedupe) %>
+      <%= content_tag(:div, class: blue_bar_wrapper_classes) do %>
+        <div class="gem-c-layout-for-public__blue-bar govuk-width-container"></div>
+      <% end %>
     <% end %>
 
     <% if global_bar.present? %>

data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb

@@ -1,4 +1,5 @@
 <%
+  add_gem_component_stylesheet("layout-header")
   add_gem_component_stylesheet("layout-super-navigation-header")
 
   logo_link ||= "https://www.gov.uk/"

data/app/views/govuk_publishing_components/components/_metadata.html.erb

@@ -20,6 +20,11 @@
   classes << shared_helper.get_margin_bottom if local_assigns[:margin_bottom]
 
   ga4_tracking ||= false
+  ga4_object = {
+    event_name: "navigation",
+    type: "content",
+    section: "Top"
+  }.to_json
 %>
 <%= content_tag :div, class: classes, data: { module: "gem-toggle metadata" } do %>
   <dl class="gem-c-metadata__list" data-module="gem-track-click">
@@ -48,19 +53,15 @@
       <dd class="gem-c-metadata__definition">
         <%= last_updated %>
         <% if local_assigns.include?(:see_updates_link) %>
-          &#8212; <a href="#full-publication-update-history" class="gem-c-metadata__definition-link govuk-!-display-none-print js-see-all-updates-link"
-                             data-track-category="content-history"
-                             data-track-action="see-all-updates-link-clicked"
-                             data-track-label="history"
-                             <% if ga4_tracking %>
-                              data-module="ga4-link-tracker"
-                              data-ga4-link="<%= {
-                                event_name: "navigation",
-                                type: "content",
-                                section: "Top"
-                              }.to_json %>"
-                             <% end%>
-                             >
+          &#8212; <a href="#full-publication-update-history"
+                    class="gem-c-metadata__definition-link govuk-!-display-none-print js-see-all-updates-link"
+                    data-track-category="content-history"
+                    data-track-action="see-all-updates-link-clicked"
+                    data-track-label="history"
+                    <% if ga4_tracking %>
+                      data-module="ga4-link-tracker"
+                      data-ga4-link="<%= ga4_object %>"
+                    <% end%>>
             <%= t("components.metadata.see_all_updates") %>
           </a>
         <% end %>
@@ -74,7 +75,12 @@
         %>
         <% if definition.any? %>
           <dt class="gem-c-metadata__term"><%= title %>:</dt>
-          <dd class="gem-c-metadata__definition">
+          <dd class="gem-c-metadata__definition"
+              <% if ga4_tracking %>
+                data-module="ga4-link-tracker"
+                data-ga4-track-links-only
+                data-ga4-link="<%= ga4_object %>"
+              <% end%>>
             <%= render 'govuk_publishing_components/components/metadata/sentence', items: definition, toggle_id: "#{index}-#{SecureRandom.hex(4)}" %>
           </dd>
         <% end %>

data/app/views/govuk_publishing_components/components/_radio.html.erb

@@ -1,4 +1,5 @@
 <%
+  add_gem_component_stylesheet("label")
   add_gem_component_stylesheet("radio")
 
   local_assigns[:margin_bottom] ||= 6

data/app/views/govuk_publishing_components/components/_search.html.erb

@@ -49,6 +49,7 @@
 
 <div class="<%= classes.join(" ") %>" data-module="gem-toggle-input-class-on-focus">
   <% if wrap_label_in_a_heading %>
+    <% add_gem_component_stylesheet("label") %>
     <%= content_tag(shared_helper.get_heading_level, class: "govuk-!-margin-0") do %>
       <%= tag_label %>
     <% end %>

data/app/views/govuk_publishing_components/components/_select.html.erb

@@ -17,6 +17,7 @@
 <% if select_helper.options.any? && id && label %>
   <%= content_tag :div, class: select_helper.css_classes do %>
     <% if is_page_heading %>
+      <% add_gem_component_stylesheet("title") %>
       <%= tag.h1 label_tag(id, label, class: select_helper.label_classes), class: "gem-c-title__text" %>
     <% else %>
       <%= label_tag(id, label, class: select_helper.label_classes) %>

data/app/views/govuk_publishing_components/components/_step_by_step_nav_related.html.erb

@@ -26,7 +26,7 @@
             <% if ga4_tracking 
               ga4_attributes = {
                 event_name: "navigation",
-                type: "related content",
+                type: "part of",
                 index:{
                   "index_link": "1"
                 },
@@ -56,7 +56,7 @@
                 <% if ga4_tracking 
                   ga4_attributes = {
                     event_name: "navigation",
-                    type: "related content",
+                    type: "part of",
                     index:{
                       "index_link": (index + 1).to_s
                     },

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_document.html.erb

@@ -1,3 +1,3 @@
-<svg class="gem-c-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--document" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
   <path d="M12 12h75v27H12zM12 59h9v9h-9zM12 77h9v9h-9zM12 95h9v9h-9zM12 113h9v9h-9zM30 59h57v9H30zM30 77h39v9H30zM30 95h57v9H30zM30 113h48v9H30z" stroke-width="0"/>
 </svg>

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_generic.html.erb

@@ -1,4 +1,4 @@
-<svg class="gem-c-attachment__thumbnail-image" version="1.1" viewBox="0 0 84 120" width="84" height="120" aria-hidden="true">
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--generic" version="1.1" viewBox="0 0 84 120" width="84" height="120" aria-hidden="true">
   <path d="M74.85 5v106H5" fill="none" stroke-miterlimit="10" stroke-width="2"/>
   <path d="M79.85 10v106H10" fill="none" stroke-miterlimit="10" stroke-width="2"/>
 </svg>

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_html.html.erb

@@ -0,0 +1,3 @@
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--html" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
+  <path d="M30,95h57v9H30V95z M30,77v9h39v-9H30z M30,122h48v-9H30V122z M12,68h9v-9h-9V68z M12,104h9v-9h-9V104z M12,86h9v-9h-9V86z M12,122h9v-9h-9V122z M87,12v27H12V12H87z M33,17h-4v8h-6v-8h-4v18h4v-7l6,0v7l4,0V17z M49,17H35l0,3h5v15h4V20l5,0V17z M68,17h-4 l-5,6l-5-6h-4v18h4l0-12l5,6l5-6l0,12h4V17z M81,32h-6V17h-4v18h10V32z M30,68h57v-9H30V68z" stroke-width="0"/>
+</svg>

data/app/views/govuk_publishing_components/components/attachment/_thumbnail_spreadsheet.html.erb

@@ -1,4 +1,4 @@
-<svg class="gem-c-attachment__thumbnail-image" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
+<svg class="gem-c-attachment__thumbnail-image gem-c-attachment__thumbnail-image--spreadsheet" version="1.1" viewBox="0 0 99 140" width="99" height="140" aria-hidden="true">
   <path d="M12 12h75v27H12zm0 47h18.75v63H12zm55 2v59H51V61h16m2-2H49v63h20V59z" stroke-width="0"/>
   <path d="M49 61.05V120H32.8V61.05H49m2-2H30.75v63H51V59zm34 2V120H69.05V61.05H85m2-2H67v63h20V59z" stroke-width="0"/>
   <path d="M30 68.5h56.5M30 77.34h56.5M30 112.7h56.5M30 95.02h56.5M30 86.18h56.5M30 103.86h56.5" fill="none" stroke-miterlimit="10" stroke-width="2"/>

data/app/views/govuk_publishing_components/components/docs/attachment.yml

@@ -177,3 +177,24 @@ examples:
         content_type: application/pdf
         file_size: 20000
         thumbnail_url: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/791567/thumbnail_the_government_financial_reporting_review_web.pdf.png"
+  with_preview_link:
+    data:
+      attachment:
+        title: "Consular data: February 2018"
+        url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/687542/February_2018_Consular_MI.csv
+        filename: February_2018_Consular_MI.csv
+        content_type: text/csv
+        file_size: 51496
+        preview_url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/687542/February_2018_Consular_MI.csv/preview
+  html_attachment:
+    data:
+      attachment:
+        title: "Smart meters: unlocking the future"
+        url: https://www.gov.uk/government/publications/smart-meters-unlocking-the-future/smart-meters-unlocking-the-future
+        type: html
+  external_attachment:
+    data:
+      attachment:
+        title: "Architects Registration Board annual report 2021"
+        url: https://arb.org.uk/wp-content/uploads/ARB-Annual-Report-and-Financial-Statement-2021-published.pdf
+        type: external

data/app/views/govuk_publishing_components/components/docs/document_list.yml

@@ -37,6 +37,23 @@ examples:
         metadata:
           public_updated_at: 2016-09-05 16:48:27
           document_type: 'Statutory guidance'
+  with_margin:
+    description: The component accepts a number for margin bottom from `0` to `9` (`0px` to `60px`) using the [GOV.UK Frontend spacing scale](https://design-system.service.gov.uk/styles/spacing/#the-responsive-spacing-scale). It defaults to having a margin bottom of 5 (25px).
+    data:
+      margin_bottom: 9
+      items:
+      - link:
+          text: 'Alternative provision'
+          path: '/government/publications/alternative-provision'
+        metadata:
+          public_updated_at: 2016-06-27 10:29:44
+          document_type: 'Statutory guidance'
+      - link:
+          text: 'Behaviour and discipline in schools: guide for governing bodies'
+          path: '/government/publications/behaviour-and-discipline-in-schools-guidance-for-governing-bodies'
+        metadata:
+          public_updated_at: 2015-09-24 16:42:48
+          document_type: 'Statutory guidance'
   without_links:
     data:
       items:

data/app/views/govuk_publishing_components/components/docs/layout_for_public.yml

@@ -27,6 +27,12 @@ examples:
     description: This allows the header to be omitted which is currently used when rendering CSV previews from Whitehall
     data:
       omit_header: true
+  blue_bar_background:
+    description: For use when a page has a heading component with a background colour.
+    data:
+      full_width: true
+      blue_bar: true
+      blue_bar_background_colour: "no"
   omit_feedback:
     description: This allows the feedback form to be omitted
     data:

data/app/views/layouts/govuk_publishing_components/application.html.erb

@@ -1,3 +1,25 @@
+<% content_for :body do %>
+  <% if @preview %>
+    <main id="wrapper" class="govuk-width-container">
+      <%= yield %>
+    </main>
+  <% else %>
+    <%= render "govuk_publishing_components/components/layout_header", {
+      environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
+      product_name: GovukPublishingComponents::Config.component_guide_title,
+      href: component_guide_path
+    } %>
+    <div class="govuk-width-container app-width-container--wide">
+      <% if @guide_breadcrumbs %>
+        <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs  %>
+      <% end %>
+      <main id="wrapper" class="govuk-main-wrapper">
+        <%= yield %>
+      </main>
+    </div>
+    <%= render "govuk_publishing_components/components/layout_footer" %>
+  <% end %>
+<% end %>
 <!DOCTYPE html>
 <html lang="en" class="<%= "govuk-template" unless @preview %>">
   <head>
@@ -27,26 +49,7 @@
     <%= javascript_tag nonce: true do -%>
       document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
     <% end -%>
-    <% if @preview %>
-      <main id="wrapper" class="govuk-width-container">
-        <%= yield %>
-      </main>
-    <% else %>
-      <%= render "govuk_publishing_components/components/layout_header", {
-        environment: GovukPublishingComponents::AppHelpers::Environment.current_acceptance_environment,
-        product_name: GovukPublishingComponents::Config.component_guide_title,
-        href: component_guide_path
-      } %>
-      <div class="govuk-width-container app-width-container--wide">
-        <% if @guide_breadcrumbs %>
-          <%= render 'govuk_publishing_components/components/breadcrumbs', breadcrumbs: @guide_breadcrumbs  %>
-        <% end %>
-        <main id="wrapper" class="govuk-main-wrapper">
-          <%= yield %>
-        </main>
-      </div>
-      <%= render "govuk_publishing_components/components/layout_footer" %>
-    <% end %>
+    <%= yield :body %>
 
     <%= javascript_include_tag "component_guide/application" %>
     <%= javascript_include_tag "#{GovukPublishingComponents::Config.application_javascript}" %>

data/config/locales/ar.yml

@@ -23,6 +23,7 @@ ar:
         other: "%{count} صفحات"
         two:
         zero:
+      preview_link:
       reference: 'مرجع: %{reference}'
       request_format_cta: طلب تنسيق يمكن الاطلاع عليه.
       request_format_details_html: إذا كنت تستخدم تكنولوجيا مساعِدة (مثل قارئ للشاشة) وتحتاج إلى إصدار من هذا المستند بتنسيق يسهل الاطلاع عليه، فيُرجى التواصل عبر البريد الإلكتروني <a href='mailto:%{alternative_format_contact_email}' target='_blank' class='govuk-link'>%{alternative_format_contact_email}</a>. من فضلك أخبرنا بالتنسيق الذي تحتاجه. إذا أخبرتنا بالتكنولوجيا المساعدة التي تستخدمها، فهذا سيساعدنا.

data/config/locales/az.yml

@@ -19,6 +19,7 @@ az:
       page:
         one:
         other: "%{count} səhifə"
+      preview_link:
       reference: 'İst: %{reference}'
       request_format_cta: İstifadə edilə bilən format tələb edin.
       request_format_details_html: Köməkçi texnologiyalardan (ekran oxuyucusu kimi) istifadə edirsinizsə və sizə bu sənədin daha rahat istifadə edilə bilən formatda olan versiyası lazımdırsa, aşağıdakı ünvana e-məktubla müraciət edin <a href='mailto:%{alternative_format_contact_email}' target='_blank' class='govuk-link'>%{alternative_format_contact_email}</a>. Sizə hansı formatın lazım olduğunu bizə söyləyin. Hansı köməkçi texnologiyadan istifadə etdiyinizi bildirməyiniz bizə kömək edəcək.

data/config/locales/be.yml

@@ -21,6 +21,7 @@ be:
         many:
         one: 1 старонка
         other: "%{count} старонкi"
+      preview_link:
       reference: 'Спасылка: %{reference}'
       request_format_cta: Запрасіць файл у іншым фармаце.
       request_format_details_html: Калі вы выкарыстоўваеце дапаможных тэхналогіi (такiя як экранны дыктар) i патрэбна версiя гэтага дакумента  ў больш даступным фармаце, напішыце, калі ласка  на электронную пошту <a href='mailto:%{alternative_format_contact_email}' target='_blank' class='govuk-link'>%{alternative_format_contact_email}</a>. Калі ласка, паведаміце нам, які фармат вам патрэбен. Нам будзе лягчэй, калі вы паведаміце, якія дапаможныя тэхналогіi вы выкарыстоўваеце.