govuk_publishing_components 50.0.1 → 51.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e10e292cd3c42e84ad11ee8c1b6422d045d943fda0bae4cedad8b0969599af25
-  data.tar.gz: 1ee25803f2c0d5c0d2c4ee8226cdbf0c6ece0c9704a2fd8c936f6bc7ce29c334
+  metadata.gz: a0dc0b51ee041e20e4493a37b5b3cf50bf68a846ce49cc00489e9a0931645dc9
+  data.tar.gz: 8159d5f355df3530e323096ebb5db5a512c64d70b9fcf814d4608c862d4e38c2
 SHA512:
-  metadata.gz: a0e38c5c1395e359d5c3382da267ca85a888b05718b7e0e0d02e396857394967001dd5618147d27afb85db8beb24d4457e6f3f84e1b0e695350cd119269dd9c3
-  data.tar.gz: 66130ce6c2961f001b4642ce37ab3ce079a7aa9ad18a64fe4dc359a591f57ed7828c115e7e4b0b0cf28ec664da5f30644d7148dc1d4d9fce09424186ee13e290
+  metadata.gz: bbb3bf9e41287521dfeb5e1ec18fa4d0f6527efcbb1824883ea49ac530f4704a6415433318eaa7dfaf064e80341ba98381e2b1b6701fdcf39ad3fe262d715fa2
+  data.tar.gz: c5cc280a31b9c759199d499a480132e4c799482015affa43deda585a2daa9467d0c13f1e439b8b7b470a15909eac0f909ae85a99d79a525be39e66a8318b7b40

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js

@@ -61,7 +61,7 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
             devolved_nations_banner: this.getElementAttribute('data-ga4-devolved-nations-banner') || undefined,
             cookie_banner: this.getBannerPresence('[data-ga4-cookie-banner]'),
             intervention: this.getBannerPresence('[data-ga4-intervention-banner]'),
-            global_bar: this.getBannerPresence('[data-ga4-global-bar]'),
+            global_bar: this.getBannerPresence('[data-ga4-global-banner]'),
             query_string: this.getQueryString(),
             search_term: this.getSearchTerm(),
             tool_name: this.getToolName(),

data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-search-tracker.js

@@ -14,6 +14,9 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.section = this.$module.dataset.ga4SearchSection
       this.indexSection = this.$module.dataset.ga4SearchIndexSection
       this.indexSectionCount = this.$module.dataset.ga4SearchIndexSectionCount
+
+      // At the beginning, the user has not yet interacted with any form fields
+      this.triggeredAction = 'unchanged'
     }
 
     init () {
@@ -22,7 +25,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         return
       }
 
-      this.initialKeywords = this.$searchInput.value
+      // These event handlers do not send any tracking data, they only set internal state. They are
+      // added here so if the user hasn't given consent yet but does so later, we do not end up with
+      // inconsistent module state.
+      this.$module.addEventListener('change', event => this.setTriggeredAction(event))
+      this.$module.addEventListener('input', event => this.setTriggeredAction(event))
 
       if (window.GOVUK.getConsentCookie() && window.GOVUK.getConsentCookie().usage) {
         this.startModule()
@@ -35,16 +42,24 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       this.$module.addEventListener('submit', event => this.trackSearch(event))
     }
 
+    setTriggeredAction (event) {
+      if (event.target.type === 'search') {
+        this.triggeredAction = 'search'
+      } else if (this.triggeredAction !== 'search') {
+        // The 'search' action always takes precedence over the 'filter' action, so only set the
+        // action to 'filter' if it is not already 'search'.
+        this.triggeredAction = 'filter'
+      }
+    }
+
     trackSearch () {
       // The original search input may have been removed from the DOM by the autocomplete component
       // if it is used, so make sure we are tracking the correct input
       this.$searchInput = this.$module.querySelector('input[type="search"]')
 
-      if (this.skipTracking()) return
-
       const data = {
         event_name: 'search',
-        action: 'search',
+        action: this.triggeredAction,
 
         type: this.type,
         section: this.section,
@@ -80,12 +95,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       window.GOVUK.analyticsGa4.core.applySchemaAndSendData(data, 'event_data')
     }
 
-    skipTracking () {
-      // Skip tracking for those events that we do not want to track: where the search term is
-      // present, but has not changed from its initial value
-      return this.searchTerm() !== '' && this.searchTerm() === this.initialKeywords
-    }
-
     searchTerm () {
       const { standardiseSearchTerm } = window.GOVUK.analyticsGa4.core.trackFunctions
 

data/app/assets/javascripts/govuk_publishing_components/components/add-another.js

@@ -49,7 +49,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
   AddAnother.prototype.createRemoveButtons = function () {
     var fieldsets =
-      document.querySelectorAll('.js-add-another__fieldset')
+      this.module.querySelectorAll('.js-add-another__fieldset')
     fieldsets.forEach(function (fieldset) {
       this.createRemoveButton(fieldset, this.removeExistingFieldset.bind(this))
       fieldset.querySelector('.js-add-another__destroy-checkbox').hidden = true
@@ -67,10 +67,12 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
         legend.textContent = this.module.dataset.fieldsetLegend + ' ' + (index + 1)
       }.bind(this))
 
-    this.module.querySelector('.js-add-another__remove-button').classList.toggle(
-      'js-add-another__remove-button--hidden',
-      this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])').length === 1
-    )
+    if (this.module.dataset.emptyFields === 'false') {
+      this.module.querySelector('.js-add-another__remove-button').classList.toggle(
+        'js-add-another__remove-button--hidden',
+        this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])').length === 1
+      )
+    }
   }
 
   AddAnother.prototype.addNewFieldset = function (event) {

data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js

@@ -95,9 +95,6 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.$module.showConfirmationMessage()
     this.$module.cookieBannerConfirmationMessage.focus()
 
-    if (window.GOVUK.globalBarInit) {
-      window.GOVUK.globalBarInit.init()
-    }
     if (!window.GOVUK.useSingleConsentApi) {
       window.GOVUK.triggerEvent(window, 'cookie-consent')
     }

data/app/assets/javascripts/govuk_publishing_components/components/global-banner.js

@@ -0,0 +1,62 @@
+//= require govuk_publishing_components/lib/cookie-functions
+window.GOVUK = window.GOVUK || {}
+window.GOVUK.Modules = window.GOVUK.Modules || {};
+
+(function (Modules) {
+  function GlobalBanner ($module) {
+    this.$module = $module
+    this.GLOBAL_BANNER_SEEN_COOKIE = 'global_banner_seen'
+    this.alwaysOn = this.$module.getAttribute('data-global-banner-permanent') === 'true'
+    this.bannerVersion = parseInt(this.$module.getAttribute('data-banner-version'))
+  }
+
+  GlobalBanner.prototype.init = function () {
+    // if no cookie consent just show the banner
+    // if there is cookie consent...
+    //   if there's no global banner cookie or the banner should always be shown, set the cookie and show the banner
+    //   if there is a global banner cookie, check to see if the version number matches
+    //     if it doesn't, set the global banner cookie and count to zero, show the banner
+    //     if it does, check the count, if less than 3 increment, show the banner
+    var cookieCategory = window.GOVUK.getCookieCategory(this.GLOBAL_BANNER_SEEN_COOKIE)
+    var cookieConsent = window.GOVUK.getConsentCookie()
+
+    if (cookieConsent && cookieConsent[cookieCategory]) {
+      var currentCookie = window.GOVUK.getCookie(this.GLOBAL_BANNER_SEEN_COOKIE)
+
+      if (currentCookie === null) {
+        this.setBannerCookie(0)
+        this.makeBannerVisible()
+      } else {
+        var currentCookieContents = JSON.parse(currentCookie)
+        var currentCookieVersion = currentCookieContents.version
+
+        if (currentCookieVersion !== this.bannerVersion) {
+          this.setBannerCookie(0)
+          this.makeBannerVisible()
+        } else {
+          var count = currentCookieContents.count
+          if (this.alwaysOn) {
+            this.makeBannerVisible()
+          } else if (count < 3) {
+            this.setBannerCookie(count + 1)
+            this.makeBannerVisible()
+          }
+        }
+      }
+    } else {
+      this.makeBannerVisible()
+    }
+  }
+
+  GlobalBanner.prototype.setBannerCookie = function (count) {
+    var value = JSON.stringify({ count: count, version: this.bannerVersion })
+    window.GOVUK.setCookie(this.GLOBAL_BANNER_SEEN_COOKIE, value, { days: 84 })
+  }
+
+  GlobalBanner.prototype.makeBannerVisible = function () {
+    this.$module.classList.add('gem-c-global-banner--visible')
+    this.$module.setAttribute('data-ga4-global-banner', '')
+  }
+
+  Modules.GlobalBanner = GlobalBanner
+})(window.GOVUK.Modules)

data/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js

@@ -22,7 +22,7 @@
     govuk_contact_referrer: 'essential',
     multivariatetest_cohort_coronavirus_extremely_vulnerable_rate_limit: 'essential',
     dgu_beta_banner_dismissed: 'settings',
-    global_bar_seen: 'settings',
+    global_banner_seen: 'settings',
     user_nation: 'settings',
     'JS-Detection': 'usage',
     TLSversion: 'usage',

data/app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss

@@ -0,0 +1,38 @@
+@import "govuk_publishing_components/individual_component_support";
+
+.gem-c-global-banner {
+  background-color: #d9e7f2;
+  border-top: govuk-spacing(2) solid govuk-colour("blue");
+  display: none;
+  @include govuk-font(19);
+
+  .govuk-link,
+  .govuk-link:link {
+    color: govuk-colour("black");
+  }
+}
+
+.gem-c-global-banner--visible {
+  display: block;
+}
+
+.gem-c-global-banner__message {
+  margin-bottom: 0;
+  margin-top: 0;
+  padding: govuk-spacing(4) 0;
+}
+
+.gem-c-global-banner__title {
+  font-weight: 700;
+  margin-right: govuk-spacing(2);
+  margin-bottom: govuk-spacing(1);
+
+  &:only-child {
+    margin: 0;
+  }
+}
+
+.gem-c-global-banner__title,
+.gem-c-global-banner__text {
+  color: govuk-colour("black");
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_inverse-header.scss

@@ -5,16 +5,13 @@
   background-color: govuk-colour("blue");
   color: govuk-colour("white");
   margin-bottom: govuk-spacing(6);
-  padding: 0 govuk-spacing(6) govuk-spacing(6);
+  padding: govuk-spacing(3) govuk-spacing(6) govuk-spacing(6) govuk-spacing(6);
   box-sizing: border-box;
 }
 
-.gem-c-inverse-header .gem-c-inverse-header__supplement,
-.gem-c-inverse-header .publication-header__last-changed {
+.gem-c-inverse-header__subtext {
   color: govuk-colour("white");
   margin: 0;
-  // This publication-header class is injected on publication pages, really
-  // it should be a component class or be a component in it's own right.
   @include govuk-font($size: 16, $line-height: 1.5);
 }
 
@@ -24,10 +21,6 @@
   padding-bottom: govuk-spacing(3);
 }
 
-.gem-c-inverse-header--padding-top {
-  padding-top: govuk-spacing(3);
-}
-
 @include govuk-media-query($media-type: print) {
   .gem-c-inverse-header {
     background: none;

data/app/assets/stylesheets/govuk_publishing_components/components/_title.scss

@@ -1,5 +1,11 @@
 @import "govuk_publishing_components/individual_component_support";
 
+.gem-c-title {
+  @include govuk-media-query($from: tablet) {
+    padding-top: govuk-spacing(8);
+  }
+}
+
 .gem-c-title--inverse {
   color: govuk-colour("white");
 

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

@@ -5,7 +5,13 @@
 %>
 
 <% content_for :title, "Component audit" %>
-<%= render 'govuk_publishing_components/components/title', title: "Components audit", margin_top: 0; %>
+<%= render 'govuk_publishing_components/components/heading', {
+    text: "Components audit",
+    heading_level: 1,
+    font_size: "xl",
+    margin_bottom: 8
+  }
+%>
 
 <% applications = capture do %>
   <%= render "applications" %>

data/app/views/govuk_publishing_components/component_guide/example.html.erb

@@ -5,7 +5,14 @@
   <% end %>
 <% end %>
 
-<%= render 'govuk_publishing_components/components/title', title: @component_example.name, context: "#{@component_doc.name} example", margin_top: 0 %>
+<%= render 'govuk_publishing_components/components/heading', {
+    text: @component_example.name,
+    context: "#{@component_doc.name} example",
+    heading_level: 1,
+    font_size: "xl",
+    margin_bottom: 8
+  }
+%>
 
 <% code_example = capture do %>
   <%= render partial: "govuk_publishing_components/component_guide/component_doc/call", locals: { component_doc: @component_doc, example: @component_example } %>

data/app/views/govuk_publishing_components/component_guide/index.html.erb

@@ -1,4 +1,10 @@
-<%= render 'govuk_publishing_components/components/title', title: GovukPublishingComponents::Config.component_guide_title, margin_top: 0 %>
+<%= render 'govuk_publishing_components/components/heading', {
+    text: GovukPublishingComponents::Config.component_guide_title,
+    heading_level: 1,
+    font_size: "xl",
+    margin_bottom: 8
+  }
+%>
 
 <div class="component-markdown">
   <p>Components are packages of template, style, behaviour and documentation that live in your application.</p>

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

@@ -5,7 +5,14 @@
   <% end %>
 <% end %>
 
-<%= render 'govuk_publishing_components/components/title', title: @component_doc.name, context: "Component", margin_top: 0; %>
+<%= render 'govuk_publishing_components/components/heading', {
+    text: @component_doc.name,
+    context: "Component",
+    heading_level: 1,
+    font_size: "xl",
+    margin_bottom: 8
+  }
+%>
 
 <div class="component-show">
   <div class="govuk-grid-row">

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

@@ -4,19 +4,27 @@
   empty ||= ""
   fieldset_legend ||= ""
   add_button_text ||= "Add another"
+  empty_fields ||= false
 %>
 
-<div data-module="add-another" class="gem-c-add-another" data-add-button-text="<%= add_button_text %>" data-fieldset-legend="<%= fieldset_legend %>">
-  <% items.each_with_index do |item, index| %>
-    <%= render "govuk_publishing_components/components/fieldset", {
-      classes: "js-add-another__fieldset",
-      legend_text: "#{fieldset_legend} #{index + 1}",
-      heading_size: "m"
-    } do %>
-      <div class="js-add-another__destroy-checkbox">
-        <%= item[:destroy_checkbox] %>
-      </div>
-      <%= item[:fields] %>
+<%= tag.div class: "gem-c-add-another", data: {
+  module: "add-another",
+  "add-button-text": add_button_text,
+  "fieldset-legend": fieldset_legend,
+  "empty-fields": empty_fields
+} do %>
+  <% unless empty_fields && items.count == 0 %>
+    <% items.each_with_index do |item, index| %>
+      <%= render "govuk_publishing_components/components/fieldset", {
+        classes: "js-add-another__fieldset",
+        legend_text: "#{fieldset_legend} #{index + 1}",
+        heading_size: "m"
+      } do %>
+        <div class="js-add-another__destroy-checkbox">
+          <%= item[:destroy_checkbox] %>
+        </div>
+        <%= item[:fields] %>
+      <% end %>
     <% end %>
   <% end %>
   <%= render "govuk_publishing_components/components/fieldset", {
@@ -26,4 +34,4 @@
   } do %>
     <%= empty %>
   <% end %>
-</div>
+<% end %>

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

@@ -0,0 +1,43 @@
+<%
+  add_gem_component_stylesheet("global-banner")
+
+  title ||= nil
+  title_href ||= nil
+  text ||= nil
+  banner_version ||= nil
+  always_visible ||= false # if true banner is always visible & does not disappear automatically after 3 pageviews
+
+  component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
+  component_helper.add_class("gem-c-global-banner govuk-!-display-none-print")
+  component_helper.set_id("global-banner")
+  component_helper.add_data_attribute({ module: "global-banner", nosnippet: "" })
+  component_helper.add_data_attribute({ banner_version: banner_version }) if banner_version
+  component_helper.add_data_attribute({ global_banner_permanent: true }) if always_visible
+
+  title_classes = %w(gem-c-global-banner__title)
+  title_classes << "js-call-to-action" if title_href
+  title_classes << "govuk-link govuk-link--no-visited-state" if title_href
+
+  ga4_data = {
+    event_name: "navigation",
+    type: "global bar",
+    section: title,
+  }.to_json
+%>
+<% if title && banner_version %>
+  <%= tag.div(**component_helper.all_attributes) do %>
+    <p class="gem-c-global-banner__message govuk-width-container">
+      <% if title_href %>
+        <a class="<%= title_classes.join(' ') %>" href="<%= title_href %>" data-module="ga4-link-tracker" data-ga4-link="<%= ga4_data %>"><%= title %></a>
+      <% else %>
+        <span class="<%= title_classes.join(' ') %>"><%= title %></span>
+      <% end %>
+
+      <% if text %>
+        <span class="gem-c-global-banner__text">
+          <%= text %>
+        </span>
+      <% end %>
+    </p>
+  <% end %>
+<% end %>

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

@@ -1,14 +1,20 @@
 <%
   add_gem_component_stylesheet("inverse-header")
 
+  padding_top ||= nil
+  padding_bottom ||= nil
+  subtext ||= nil
+
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_class("gem-c-inverse-header")
   component_helper.add_class("gem-c-inverse-header--full-width") if local_assigns[:full_width]
-  component_helper.add_class("gem-c-inverse-header--padding-top") unless local_assigns[:padding_top].eql?(false)
+  component_helper.add_class("govuk-!-padding-top-#{padding_top}") if [*0..9].include?(padding_top)
+  component_helper.add_class("govuk-!-padding-bottom-#{padding_bottom}") if [*0..9].include?(padding_bottom)
 %>
 <% block = yield %>
 <% unless block.empty? %>
   <%= tag.header(**component_helper.all_attributes) do %>
     <%= block %>
+    <%= content_tag(:p, subtext, class: "gem-c-inverse-header__subtext") if subtext %>
   <% end %>
 <% end %>

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

@@ -5,7 +5,7 @@
   emergency_banner ||= nil
   full_width ||= false
   blue_bar ||= local_assigns.include?(:blue_bar) ? local_assigns[:blue_bar] : !full_width
-  global_bar ||= nil
+  global_banner ||= nil
   html_lang ||= "en"
   homepage ||= false
   layout_helper = GovukPublishingComponents::Presenters::PublicLayoutHelper.new(local_assigns)
@@ -49,10 +49,10 @@
 # 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?
+  blue_bar_dedupe = !full_width && global_banner.present?
   body_css_classes = %w(gem-c-layout-for-public govuk-template__body)
   body_css_classes << "draft" if draft_watermark
-  body_css_classes << "global-bar-present" if global_bar.present?
+  body_css_classes << "global-banner-present" if global_banner.present?
 
   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
@@ -137,17 +137,17 @@
 
     <%= raw(emergency_banner) %>
 
-    <% if (blue_bar && !global_bar.present? && !homepage) || (blue_bar_dedupe) %>
+    <% if (blue_bar && !global_banner.present? && !homepage) || (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? %>
+    <% if global_banner.present? %>
       <%= content_tag("div", {
         class: blue_bar_dedupe ? "gem-c-layout-for-public__global-banner-wrapper" : nil,
       }) do %>
-        <%= raw(global_bar) %>
+        <%= raw(global_banner) %>
       <% end %>
     <% end %>
 

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

@@ -8,20 +8,17 @@
   context_inside ||= false
 
   inverse ||= false
-  local_assigns[:margin_top] ||= 8
   local_assigns[:margin_bottom] ||= 8
 
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   classes = %w[gem-c-title]
   classes << "gem-c-title--inverse" if inverse
-  classes << shared_helper.get_margin_top
   classes << shared_helper.get_margin_bottom
 
   heading_classes = %w[gem-c-title__text]
   heading_classes << (average_title_length.present? ? 'govuk-heading-l' : 'govuk-heading-xl')
 %>
-
 <% @context_block = capture do %>
   <span class="govuk-caption-xl gem-c-title__context" <%= "lang=#{context_locale}" if context_locale.present? %>>
     <%= context %>

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

@@ -46,3 +46,15 @@ examples:
           <label for="person_1_name" class="gem-c-label govuk-label">Full name</label>
           <input class="gem-c-input govuk-input" id="person_1_name" name="person[1]name">
         </div>
+  start_empty:
+    description: By default no form fields are displayed when the component loads if no content is specified
+    data:
+      fieldset_legend: "Employee"
+      add_button_text: "Add an employee"
+      empty_fields: true
+      items: null
+      empty:
+        <div class="govuk-form-group">
+          <label for="employee_1_name" class="gem-c-label govuk-label">Full name</label>
+          <input class="gem-c-input govuk-input" id="employee_1_name" name="employee[1]name">
+        </div>

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

@@ -0,0 +1,30 @@
+name: Global banner
+description: A site-wide banner used to convey important information
+body: |
+  If a user has consented to cookies the banner will disappear after three page views, unless the `always_visible` option is used. If no cookie consent is given the banner is always shown.
+
+  The [dev docs](https://docs.publishing.service.gov.uk/manual/global-banner.html) contains further information about this component and when it should be used.
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      title: Bring photo ID to vote
+      banner_version: 1
+  with_a_link:
+    data:
+      title: Bring photo ID to vote
+      title_href: "https://www.gov.uk"
+      banner_version: 1
+  with_a_link_and_text:
+    data:
+      title: Bring photo ID to vote
+      title_href: "https://www.gov.uk"
+      text: Check what photo ID you'll need to vote in person in the General Election on 4 July.
+      banner_version: 1
+  always_visible:
+    description: With this option set the banner appears regardless of how many times it has been seen before.
+    data:
+      title: Bring photo ID to vote
+      banner_version: 1
+      always_visible: true

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

@@ -1,7 +1,7 @@
 name: Inverse header
 description: A wrapper to contain header content in white text
 body: |
-  This component can be passed a block of template code and will wrap it in a blue header. This is as light-touch as possible and doesn't attempt to deal with the margins and paddings of its content. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings but unopinionated about its contents.
+  This component can be passed a block of template code and will wrap it in a blue header. White text is enforced on content and would need to be overridden where unwanted. Implemented to accommodate topic and list page headings but unopinionated about its contents.
 
   If passing links to the block make sure to add [the inverse modifier](https://design-system.service.gov.uk/styles/links/#links-on-dark-backgrounds).
 uses_component_wrapper_helper: true
@@ -19,6 +19,19 @@ examples:
             inverse: true
           } %>
           <!-- end of example content -->
+  with_custom_padding:
+    description: Custom padding can be applied as shown, using the [Design System spacing scale](https://design-system.service.gov.uk/styles/spacing/).
+    data:
+      padding_top: 6
+      padding_bottom: 1
+      block: |
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/heading", {
+            text: "Education, Training and Skills",
+            inverse: true,
+            margin_bottom: 0
+          } %>
+          <!-- end of example content -->
   for_full_page_width:
     description: "Used when the header covers the full width of the page, but it's content is in the grid layout. The left-right padding is removed to make the contents line up with the other items on the page."
     data:
@@ -30,6 +43,17 @@ examples:
               inverse: true
             } %>
             <!-- end of example content -->
+  with_subtext:
+    data:
+      subtext: This is some text
+      block: |
+        <!-- example content -->
+          <%= render "govuk_publishing_components/components/heading", {
+            text: "Education, Training and Skills",
+            inverse: true,
+            margin_bottom: 0
+          } %>
+          <!-- end of example content -->
   html_publication_header:
     description: "The inverse header component is used on HTML publications. [See example on GOV.UK here](https://www.gov.uk/government/publications/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application-advertisement/ln5-0at-jackson-homes-scopwick-ltd-environmental-permit-application)"
     data:

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

@@ -73,7 +73,7 @@ examples:
   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>
+      global_banner: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global banner 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:
@@ -82,7 +82,7 @@ examples:
     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>
+      global_banner: <div class="govuk-!-padding-top-5 govuk-!-padding-bottom-3">This is the global banner slot</div>
   with_account_layout_enabled:
     description: Adds account layout wrapper around the content passed in to the component
     data:

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "50.0.1".freeze
+  VERSION = "51.0.0".freeze
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 50.0.1
+  version: 51.0.0
 platform: ruby
 authors:
 - GOV.UK Dev
 bindir: bin
 cert_chain: []
-date: 2025-01-23 00:00:00.000000000 Z
+date: 2025-01-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: govuk_app_config
@@ -472,6 +472,7 @@ files:
 - app/assets/javascripts/govuk_publishing_components/components/cross-service-header.js
 - app/assets/javascripts/govuk_publishing_components/components/error-summary.js
 - app/assets/javascripts/govuk_publishing_components/components/feedback.js
+- app/assets/javascripts/govuk_publishing_components/components/global-banner.js
 - app/assets/javascripts/govuk_publishing_components/components/govspeak.js
 - app/assets/javascripts/govuk_publishing_components/components/image-card.js
 - app/assets/javascripts/govuk_publishing_components/components/intervention.js
@@ -545,6 +546,7 @@ files:
 - app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_file-upload.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_glance-metric.scss
+- app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_govspeak-html-publication.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss
 - app/assets/stylesheets/govuk_publishing_components/components/_heading.scss
@@ -686,6 +688,7 @@ files:
 - app/views/govuk_publishing_components/components/_fieldset.html.erb
 - app/views/govuk_publishing_components/components/_file_upload.html.erb
 - app/views/govuk_publishing_components/components/_glance_metric.html.erb
+- app/views/govuk_publishing_components/components/_global_banner.html.erb
 - app/views/govuk_publishing_components/components/_google_tag_manager_script.html.erb
 - app/views/govuk_publishing_components/components/_govspeak.html.erb
 - app/views/govuk_publishing_components/components/_govspeak_html_publication.html.erb
@@ -781,6 +784,7 @@ files:
 - app/views/govuk_publishing_components/components/docs/fieldset.yml
 - app/views/govuk_publishing_components/components/docs/file_upload.yml
 - app/views/govuk_publishing_components/components/docs/glance_metric.yml
+- app/views/govuk_publishing_components/components/docs/global_banner.yml
 - app/views/govuk_publishing_components/components/docs/google_tag_manager_script.yml
 - app/views/govuk_publishing_components/components/docs/govspeak.yml
 - app/views/govuk_publishing_components/components/docs/govspeak_html_publication.yml