govuk_publishing_components 50.0.1 → 51.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e10e292cd3c42e84ad11ee8c1b6422d045d943fda0bae4cedad8b0969599af25
-  data.tar.gz: 1ee25803f2c0d5c0d2c4ee8226cdbf0c6ece0c9704a2fd8c936f6bc7ce29c334
+  metadata.gz: cc93d3d2e0d58cb2889e655c2329ab804743dc817263461f04c1c67992a45b65
+  data.tar.gz: 3f0105fd23e588fbf9596cc8af2730f9f3b3eec848b2fa2c15c945d8a259702e
 SHA512:
-  metadata.gz: a0e38c5c1395e359d5c3382da267ca85a888b05718b7e0e0d02e396857394967001dd5618147d27afb85db8beb24d4457e6f3f84e1b0e695350cd119269dd9c3
-  data.tar.gz: 66130ce6c2961f001b4642ce37ab3ce079a7aa9ad18a64fe4dc359a591f57ed7828c115e7e4b0b0cf28ec664da5f30644d7148dc1d4d9fce09424186ee13e290
+  metadata.gz: c40f84acabd6a47fe2b46c29e1d759821eec65e16884dccf0feb0d88b868c2cfa11565d1fcdafa1e2f0cea536daf623fbe8233204762285c689fdcb6982f75b7
+  data.tar.gz: 806abfe7bf6f5b5ef250bde33701af3aaf80b6003588bcf21a1beb337a02370c900140f75f3e3670100a929c538c239160b8def9ca1a31c7e0acd3a8c31d3c9e

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/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js

@@ -336,7 +336,7 @@
     return str;
   }
 
-  var VERSION = "4.0.28";
+  var VERSION = "4.0.29";
   /**
   * Returns the version of the script as a float to be stored in legacy systems that do not support
   * string versions.
@@ -626,36 +626,36 @@
     try {
       if (selector &&
         (node.nodeType === 9 || selector.length > MAX_SELECTOR_LENGTH || !node.parentNode)) {
-        // Final selector.
-        return selector;
-      }
-      var el = node;
-      // Our first preference is to use the data-sctrack attribute from anywhere in the tree
-      var trackId = getClosestScTrackAttribute(el);
-      if (trackId) {
-        return trackId;
-      }
-      if (el.id) {
-        // Once we've found an element with ID we return the selector.
-        return "#" + el.id + (selector ? ">" + selector : "");
-      }
-      else if (el) {
-        // Otherwise attempt to get parent elements recursively
-        var name_1 = el.nodeType === 1 ? el.nodeName.toLowerCase() : el.nodeName.toUpperCase();
-        var classes = el.className ? "." + el.className.replace(/\s+/g, ".") : "";
-        // Remove classes until the selector is short enough
-        while ((name_1 + classes).length > MAX_SELECTOR_LENGTH) {
-          classes = classes.split(".").slice(0, -1).join(".");
-        }
-        var currentSelector = name_1 + classes + (selector ? ">" + selector : "");
-        if (el.parentNode) {
-          var selectorWithParent = getNodeSelector(el.parentNode, currentSelector);
-          if (selectorWithParent.length < MAX_SELECTOR_LENGTH) {
-            return selectorWithParent;
+          // Final selector.
+          return selector;
+        }
+        var el = node;
+        // Our first preference is to use the data-sctrack attribute from anywhere in the tree
+        var trackId = getClosestScTrackAttribute(el);
+        if (trackId) {
+          return trackId;
+        }
+        if (el.id) {
+          // Once we've found an element with ID we return the selector.
+          return "#" + el.id + (selector ? ">" + selector : "");
+        }
+        else if (el) {
+          // Otherwise attempt to get parent elements recursively
+          var name_1 = el.nodeType === 1 ? el.nodeName.toLowerCase() : el.nodeName.toUpperCase();
+          var classes = el.className ? "." + el.className.replace(/\s+/g, ".") : "";
+          // Remove classes until the selector is short enough
+          while ((name_1 + classes).length > MAX_SELECTOR_LENGTH) {
+            classes = classes.split(".").slice(0, -1).join(".");
           }
+          var currentSelector = name_1 + classes + (selector ? ">" + selector : "");
+          if (el.parentNode) {
+            var selectorWithParent = getNodeSelector(el.parentNode, currentSelector);
+            if (selectorWithParent.length < MAX_SELECTOR_LENGTH) {
+              return selectorWithParent;
+            }
+          }
+          return currentSelector;
         }
-        return currentSelector;
-      }
     }
     catch (error) {
       // Do nothing.
@@ -1963,7 +1963,7 @@
       ].join("");
     }
     function getCustomerId() {
-      return String(_thisCustomerId) || "";
+      return String(_thisCustomerId);
     }
     function avgDomDepth() {
       var aElems = document.getElementsByTagName("*");

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/button.yml

@@ -147,3 +147,12 @@ examples:
     data:
       text: Button
       aria_describedby: with_aria_describedby
+  with_form_attribute:
+    description: |
+      Buttons will usually be contained within their containing form, but sometimes it is desirable to have the button 
+      outside the form with the `form` attribute pointing to the ID of the form. See 
+      [The Mozilla dev docs on a button's `form` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#form)
+      for more information.
+    data:
+      text: With `form` argument
+      form: some_form_id

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/app/views/govuk_publishing_components/components/docs/title.yml

@@ -62,13 +62,3 @@ examples:
       margin_bottom: 0
     context:
       dark_background: true
-  using_design_system_template:
-    description: |
-      This option allows the removal of top margin from the component so that it works within a [Design System page template](https://design-system.service.gov.uk/styles/page-template/default/index.html), where spacing above the title is already provided by padding on the wrapping div.
-    embed: |
-      <main class="govuk-main-wrapper">
-        <%= component %>
-      </main>
-    data:
-      title: My page title
-      margin_top: 0

data/lib/govuk_publishing_components/presenters/button_helper.rb

@@ -25,7 +25,8 @@ module GovukPublishingComponents
                   :classes,
                   :aria_label,
                   :aria_controls,
-                  :aria_describedby
+                  :aria_describedby,
+                  :form
 
       def initialize(local_assigns)
         @disable_ga4 = local_assigns[:disable_ga4]
@@ -58,6 +59,7 @@ module GovukPublishingComponents
         @button_id = "button-id-#{SecureRandom.hex(4)}"
         @aria_controls = local_assigns[:aria_controls]
         @aria_describedby = local_assigns[:aria_describedby]
+        @form = local_assigns[:form]
 
         if local_assigns.include?(:classes)
           @classes = local_assigns[:classes].split(" ")
@@ -106,6 +108,7 @@ module GovukPublishingComponents
         options[:aria][:controls] =  aria_controls if aria_controls
         options[:aria][:describedby] = aria_describedby if aria_describedby
         options[:draggable] = false if link?
+        options[:form] = form if form
         options
       end
 

data/lib/govuk_publishing_components/presenters/shared_helper.rb

@@ -1,11 +1,10 @@
 module GovukPublishingComponents
   module Presenters
     class SharedHelper
-      attr_reader :options, :margin_top, :margin_bottom, :heading_level, :classes
+      attr_reader :options, :margin_bottom, :heading_level, :classes
 
       def initialize(local_assigns)
         @options = local_assigns
-        @margin_top = @options[:margin_top] || nil
         @margin_bottom = @options[:margin_bottom] || 3
         @heading_level = @options[:heading_level] || 2
 
@@ -17,10 +16,6 @@ module GovukPublishingComponents
         end
       end
 
-      def get_margin_top
-        [*0..9].include?(@margin_top) ? "govuk-!-margin-top-#{margin_top}" : ""
-      end
-
       def get_margin_bottom
         [*0..9].include?(@margin_bottom) ? "govuk-!-margin-bottom-#{margin_bottom}" : "govuk-!-margin-bottom-3"
       end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "50.0.1".freeze
+  VERSION = "51.1.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.1.0
 platform: ruby
 authors:
 - GOV.UK Dev
 bindir: bin
 cert_chain: []
-date: 2025-01-23 00:00:00.000000000 Z
+date: 2025-01-30 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