Change code references from global bar to banner

- updates all the code that refers to `global-bar` or `globar_bar` or `globalBar` (etc.) to match the new name of the component
- does not update the GA4 code in terms of what is passed to GA4, because that still expects to receive something called `global bar` and if we change that it's going to mess up all the analytics

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(),

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

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

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

@@ -9,26 +9,26 @@ window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
 (function (Modules) {
-  function GlobalBar ($module) {
+  function GlobalBanner ($module) {
     this.$module = $module
   }
 
-  GlobalBar.prototype.init = function () {
-    var GLOBAL_BAR_SEEN_COOKIE = 'global_bar_seen'
-    var alwaysOn = this.$module.getAttribute('data-global-bar-permanent')
+  GlobalBanner.prototype.init = function () {
+    var GLOBAL_BANNER_SEEN_COOKIE = 'global_banner_seen'
+    var alwaysOn = this.$module.getAttribute('data-global-banner-permanent')
     if (alwaysOn === 'false') {
       alwaysOn = false // in this situation we need to convert string to boolean
     }
-    var cookieCategory = window.GOVUK.getCookieCategory(GLOBAL_BAR_SEEN_COOKIE)
+    var cookieCategory = window.GOVUK.getCookieCategory(GLOBAL_BANNER_SEEN_COOKIE)
     var cookieConsent = window.GOVUK.getConsentCookie()[cookieCategory]
 
     if (cookieConsent) {
       // If the cookie is not set, let's set a basic one
-      if (window.GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE) === null || window.GOVUK.parseCookie(window.GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE)).count === undefined) {
-        window.GOVUK.setCookie('global_bar_seen', JSON.stringify({ count: 0, version: 0 }), { days: 84 })
+      if (window.GOVUK.getCookie(GLOBAL_BANNER_SEEN_COOKIE) === null || window.GOVUK.parseCookie(window.GOVUK.getCookie(GLOBAL_BANNER_SEEN_COOKIE)).count === undefined) {
+        window.GOVUK.setCookie('global_banner_seen', JSON.stringify({ count: 0, version: 0 }), { days: 84 })
       }
 
-      var currentCookie = window.GOVUK.parseCookie(window.GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE))
+      var currentCookie = window.GOVUK.parseCookie(window.GOVUK.getCookie(GLOBAL_BANNER_SEEN_COOKIE))
       var currentCookieVersion = currentCookie.version
       var count = viewCount()
     }
@@ -46,34 +46,34 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
 
     function hide (event) {
-      var currentCookie = window.GOVUK.parseCookie(window.GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE))
+      var currentCookie = window.GOVUK.parseCookie(window.GOVUK.getCookie(GLOBAL_BANNER_SEEN_COOKIE))
       var cookieVersion = currentCookieVersion
 
       if (currentCookie) {
         cookieVersion = currentCookie.version
       }
 
       var cookieValue = JSON.stringify({ count: 999, version: cookieVersion })
-      window.GOVUK.setCookie(GLOBAL_BAR_SEEN_COOKIE, cookieValue, { days: 84 })
-      var additional = document.querySelector('.global-bar-additional')
+      window.GOVUK.setCookie(GLOBAL_BANNER_SEEN_COOKIE, cookieValue, { days: 84 })
+      var additional = document.querySelector('.global-banner-additional')
       if (additional) {
-        additional.classList.remove('global-bar-additional--show')
+        additional.classList.remove('global-banner-additional--show')
       }
-      var dismiss = document.querySelector('.global-bar__dismiss')
+      var dismiss = document.querySelector('.global-banner__dismiss')
       if (dismiss) {
-        dismiss.classList.remove('global-bar__dismiss--show')
+        dismiss.classList.remove('global-banner__dismiss--show')
       }
       event.preventDefault()
     }
 
     function incrementViewCount (count) {
       count = count + 1
       var cookieValue = JSON.stringify({ count: count, version: currentCookieVersion })
-      window.GOVUK.setCookie(GLOBAL_BAR_SEEN_COOKIE, cookieValue, { days: 84 })
+      window.GOVUK.setCookie(GLOBAL_BANNER_SEEN_COOKIE, cookieValue, { days: 84 })
     }
 
     function viewCount () {
-      var viewCountCookie = window.GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE)
+      var viewCountCookie = window.GOVUK.getCookie(GLOBAL_BANNER_SEEN_COOKIE)
       var viewCount = parseInt(window.GOVUK.parseCookie(viewCountCookie).count, 10)
 
       if (isNaN(viewCount)) {
@@ -84,5 +84,5 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     }
   }
 
-  Modules.GlobalBar = GlobalBar
+  Modules.GlobalBanner = GlobalBanner
 })(window.GOVUK.Modules)

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',

app/assets/javascripts/govuk_publishing_components/lib/global-banner-init.js

@@ -6,15 +6,15 @@ window.GOVUK = window.GOVUK || {}
 // Bump this if you are releasing a major change to the banner
 // This will reset the view count so all users will see the banner, even if previously seen
 var BANNER_VERSION = 8
-var GLOBAL_BAR_SEEN_COOKIE = 'global_bar_seen'
+var GLOBAL_BANNER_SEEN_COOKIE = 'global_banner_seen'
 
-var globalBarInit = {
+var globalBannerInit = {
   getBannerVersion: function () {
     return BANNER_VERSION
   },
 
   getLatestCookie: function () {
-    var currentCookie = window.GOVUK.getCookie(GLOBAL_BAR_SEEN_COOKIE)
+    var currentCookie = window.GOVUK.getCookie(GLOBAL_BANNER_SEEN_COOKIE)
 
     return currentCookie
   },
@@ -38,74 +38,74 @@ var globalBarInit = {
   },
 
   setBannerCookie: function () {
-    var cookieCategory = window.GOVUK.getCookieCategory(GLOBAL_BAR_SEEN_COOKIE)
+    var cookieCategory = window.GOVUK.getCookieCategory(GLOBAL_BANNER_SEEN_COOKIE)
     var cookieConsent = window.GOVUK.getConsentCookie()
     var value
 
     if (cookieConsent && cookieConsent[cookieCategory]) {
       // Coronavirus banner - auto hide after user has been on landing page
       if (window.location.pathname === '/coronavirus') {
-        value = JSON.stringify({ count: 999, version: globalBarInit.getBannerVersion() })
+        value = JSON.stringify({ count: 999, version: globalBannerInit.getBannerVersion() })
       } else {
-        value = JSON.stringify({ count: 0, version: globalBarInit.getBannerVersion() })
+        value = JSON.stringify({ count: 0, version: globalBannerInit.getBannerVersion() })
       }
 
-      window.GOVUK.setCookie(GLOBAL_BAR_SEEN_COOKIE, value, { days: 84 })
+      window.GOVUK.setCookie(GLOBAL_BANNER_SEEN_COOKIE, value, { days: 84 })
     }
   },
 
   makeBannerVisible: function () {
-    document.documentElement.className = document.documentElement.className.concat(' show-global-bar')
-    var globalBarEl = document.querySelector('#global-bar')
-    if (globalBarEl) {
-      globalBarEl.setAttribute('data-ga4-global-bar', '')
+    document.documentElement.className = document.documentElement.className.concat(' show-global-banner')
+    var globalBannerEl = document.querySelector('#global-banner')
+    if (globalBannerEl) {
+      globalBannerEl.setAttribute('data-ga4-global-banner', '')
     }
   },
 
   init: function () {
     var currentCookieVersion
 
-    if (!globalBarInit.urlBlockList()) {
-      if (globalBarInit.getLatestCookie() === null) {
-        globalBarInit.setBannerCookie()
-        globalBarInit.makeBannerVisible()
+    if (!globalBannerInit.urlBlockList()) {
+      if (globalBannerInit.getLatestCookie() === null) {
+        globalBannerInit.setBannerCookie()
+        globalBannerInit.makeBannerVisible()
       } else {
-        currentCookieVersion = window.GOVUK.parseCookie(globalBarInit.getLatestCookie()).version
+        currentCookieVersion = window.GOVUK.parseCookie(globalBannerInit.getLatestCookie()).version
 
-        if (currentCookieVersion !== globalBarInit.getBannerVersion()) {
-          globalBarInit.setBannerCookie()
+        if (currentCookieVersion !== globalBannerInit.getBannerVersion()) {
+          globalBannerInit.setBannerCookie()
         }
 
-        var newCookieCount = window.GOVUK.parseCookie(globalBarInit.getLatestCookie()).count
+        var newCookieCount = window.GOVUK.parseCookie(globalBannerInit.getLatestCookie()).count
 
         // If banner has been manually dismissed, hide the additional info
         if (newCookieCount === 999) {
-          var globalBarAdditional = document.querySelector('.global-bar-additional')
-          if (globalBarAdditional) {
-            globalBarAdditional.classList.remove('global-bar-additional--show')
+          var globalBannerAdditional = document.querySelector('.global-banner-additional')
+          if (globalBannerAdditional) {
+            globalBannerAdditional.classList.remove('global-banner-additional--show')
           }
-          var globarBarDismiss = document.querySelector('.global-bar__dismiss')
+          var globarBarDismiss = document.querySelector('.global-banner__dismiss')
           if (globarBarDismiss) {
-            globarBarDismiss.classList.remove('global-bar__dismiss--show')
+            globarBarDismiss.classList.remove('global-banner__dismiss--show')
           }
         }
 
-        globalBarInit.makeBannerVisible()
+        globalBannerInit.makeBannerVisible()
       }
     } else {
       // If on a url in the blocklist, set cookie but don't show the banner
-      if (globalBarInit.getLatestCookie() === null) {
-        globalBarInit.setBannerCookie()
+      if (globalBannerInit.getLatestCookie() === null) {
+        globalBannerInit.setBannerCookie()
       } else {
-        currentCookieVersion = window.GOVUK.parseCookie(globalBarInit.getLatestCookie()).version
+        currentCookieVersion = window.GOVUK.parseCookie(globalBannerInit.getLatestCookie()).version
 
-        if (currentCookieVersion !== globalBarInit.getBannerVersion()) {
-          globalBarInit.setBannerCookie()
+        if (currentCookieVersion !== globalBannerInit.getBannerVersion()) {
+          globalBannerInit.setBannerCookie()
         }
       }
     }
   }
 }
 
-window.GOVUK.globalBarInit = globalBarInit
-window.GOVUK.globalBarInit.init()
+window.GOVUK.globalBannerInit = globalBannerInit
+window.GOVUK.globalBannerInit.init()

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

@@ -1,20 +1,20 @@
 @import "govuk_publishing_components/individual_component_support";
 
 // stylelint-disable selector-max-id
-.show-global-bar #global-header-bar {
+.show-global-banner #global-header-bar {
   display: none;
 }
 
 $covid-yellow: #fff500;
 $covid-grey: #262828;
 
-.gem-c-global-bar {
+.gem-c-global-banner {
   background-color: #d9e7f2;
   border-top: govuk-spacing(2) solid govuk-colour("blue");
   display: none;
   @include govuk-font(19);
 
-  .show-global-bar & {
+  .show-global-banner & {
     display: block;
   }
 
@@ -32,13 +32,13 @@ $covid-grey: #262828;
   }
 }
 
-.gem-c-global-bar-message {
+.gem-c-global-banner-message {
   margin-bottom: 0;
   margin-top: 0;
   padding: govuk-spacing(4) 0;
 }
 
-.gem-c-global-bar-title {
+.gem-c-global-banner-title {
   font-weight: 700;
   margin-right: govuk-spacing(2);
   margin-bottom: govuk-spacing(1);
@@ -48,37 +48,37 @@ $covid-grey: #262828;
   }
 }
 
-.gem-c-global-bar-title,
-.gem-c-global-bar-text {
+.gem-c-global-banner-title,
+.gem-c-global-banner-text {
   color: govuk-colour("black");
 }
 
-.gem-c-global-bar-title__nowrap {
+.gem-c-global-banner-title__nowrap {
   white-space: nowrap;
 }
 
-.gem-c-global-bar-dismiss-wrapper {
+.gem-c-global-banner-dismiss-wrapper {
   margin-top: govuk-spacing(4);
 }
 
-.gem-c-global-bar__dismiss {
+.gem-c-global-banner__dismiss {
   display: none;
 }
 
-.gem-c-global-bar__dismiss--show {
+.gem-c-global-banner__dismiss--show {
   display: inline-block;
 }
 
-.gem-c-govspeak .gem-c-global-bar__heading {
+.gem-c-govspeak .gem-c-global-banner__heading {
   margin-top: 0;
   margin-bottom: govuk-spacing(1);
   @include govuk-font(19, $weight: bold);
 }
 
-.gem-c-govspeak .gem-c-global-bar__list {
+.gem-c-govspeak .gem-c-global-banner__list {
   margin-top: 0;
 }
 
-.gem-c-global-bar__list {
+.gem-c-global-banner__list {
   margin-top: 0;
 }

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

@@ -1,5 +1,5 @@
 <%
-  add_gem_component_stylesheet("global-bar")
+  add_gem_component_stylesheet("global-banner")
 
   title ||= nil
   title_href ||= nil
@@ -10,9 +10,9 @@
   # Regardless of value, banner is always manually dismissable by users
   always_visible ||= false
 
-  global_bar_classes = %w(gem-c-global-bar govuk-!-display-none-print)
+  global_banner_classes = %w(gem-c-global-banner govuk-!-display-none-print)
 
-  title_classes = %w(gem-c-global-bar-title)
+  title_classes = %w(gem-c-global-banner-title)
   title_classes << "js-call-to-action" if title_href
   title_classes << "govuk-link" if title_href
 
@@ -23,16 +23,16 @@
   }.to_json
 %>
 <% if title %>
-  <div id="global-bar" class="<%= global_bar_classes.join(' ') %>" data-module="global-bar" <%= "data-global-bar-permanent=true" if always_visible %> data-nosnippet>
-    <p class="gem-c-global-bar-message govuk-width-container">
+  <div id="global-banner" class="<%= global_banner_classes.join(' ') %>" data-module="global-banner" <%= "data-global-banner-permanent=true" if always_visible %> data-nosnippet>
+    <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-bar-text">
+        <span class="gem-c-global-banner-text">
           <%= text %>
         </span>
       <% end %>