diff --git a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js b/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js index 359c00f8fb..6dd0d63f8e 100644 --- a/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +++ b/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(), diff --git a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js b/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js index 37dbab4d64..a1b4f094b1 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +++ b/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') diff --git a/app/assets/javascripts/govuk_publishing_components/components/global-banner.js b/app/assets/javascripts/govuk_publishing_components/components/global-banner.js index 335184a884..f5c7322fbd 100644 --- a/app/assets/javascripts/govuk_publishing_components/components/global-banner.js +++ b/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,7 +46,7 @@ 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) { @@ -54,14 +54,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; } 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() } @@ -69,11 +69,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}; 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) diff --git a/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js b/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js index f4ea74563f..8e8bed0920 100644 --- a/app/assets/javascripts/govuk_publishing_components/lib/cookie-functions.js +++ b/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', diff --git a/app/assets/javascripts/govuk_publishing_components/lib/global-banner-init.js b/app/assets/javascripts/govuk_publishing_components/lib/global-banner-init.js index cf18cf88e0..3effdbd8a7 100644 --- a/app/assets/javascripts/govuk_publishing_components/lib/global-banner-init.js +++ b/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() diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss b/app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss index 5786d4ec7d..c0932b7448 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss +++ b/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; } diff --git a/app/views/govuk_publishing_components/components/_global_banner.html.erb b/app/views/govuk_publishing_components/components/_global_banner.html.erb index 3fbe9e82cf..654c860705 100644 --- a/app/views/govuk_publishing_components/components/_global_banner.html.erb +++ b/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,8 +23,8 @@ }.to_json %> <% if title %> -