diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d26e4921b..eefe824e77 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
## Unreleased
+* **BREAKING** Add global bar component from static ([PR #4538](https://github.com/alphagov/govuk_publishing_components/pull/4538))
* Add custom padding to inverse header ([PR #4590](https://github.com/alphagov/govuk_publishing_components/pull/4590))
* Add another: fix problem in createRemoveButtons method ([PR #11719](https://github.com/alphagov/govuk_publishing_components/pull/4586))
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..cfdf99e828 100644
--- a/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js
+++ b/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')
}
diff --git a/app/assets/javascripts/govuk_publishing_components/components/global-banner.js b/app/assets/javascripts/govuk_publishing_components/components/global-banner.js
new file mode 100644
index 0000000000..d0bbd3faf5
--- /dev/null
+++ b/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)
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 37f0ec17b6..801eeaade0 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/stylesheets/govuk_publishing_components/components/_global-banner.scss b/app/assets/stylesheets/govuk_publishing_components/components/_global-banner.scss
new file mode 100644
index 0000000000..2b6ca4d525
--- /dev/null
+++ b/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");
+}
diff --git a/app/views/govuk_publishing_components/components/_global_banner.html.erb b/app/views/govuk_publishing_components/components/_global_banner.html.erb
new file mode 100644
index 0000000000..be5445a900
--- /dev/null
+++ b/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 %>
+
+ <% if title_href %>
+ <%= title %>
+ <% else %>
+ <%= title %>
+ <% end %>
+
+ <% if text %>
+
+ <%= text %>
+
+ <% end %>
+
+ <% end %>
+<% end %>
diff --git a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb b/app/views/govuk_publishing_components/components/_layout_for_public.html.erb
index a983ea10db..3bc41b90e7 100644
--- a/app/views/govuk_publishing_components/components/_layout_for_public.html.erb
+++ b/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 %>
<% 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 %>
diff --git a/app/views/govuk_publishing_components/components/docs/global_banner.yml b/app/views/govuk_publishing_components/components/docs/global_banner.yml
new file mode 100644
index 0000000000..091ccef473
--- /dev/null
+++ b/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
diff --git a/app/views/govuk_publishing_components/components/docs/layout_for_public.yml b/app/views/govuk_publishing_components/components/docs/layout_for_public.yml
index f06480f0f0..512835ee61 100644
--- a/app/views/govuk_publishing_components/components/docs/layout_for_public.yml
+++ b/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: This is the global bar slot
+ global_banner: This is the global banner slot
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: This is the emergency banner slot
- global_bar: This is the global bar slot
+ global_banner: This is the global banner slot
with_account_layout_enabled:
description: Adds account layout wrapper around the content passed in to the component
data:
diff --git a/spec/components/global_banner_spec.rb b/spec/components/global_banner_spec.rb
new file mode 100644
index 0000000000..d94e9a5392
--- /dev/null
+++ b/spec/components/global_banner_spec.rb
@@ -0,0 +1,38 @@
+require "rails_helper"
+
+describe "Global banner", type: :view do
+ def component_name
+ "global_banner"
+ end
+
+ it "renders nothing without any options" do
+ assert_empty render_component({})
+ end
+
+ it "renders with minimum required options" do
+ render_component(title: "Look here you", banner_version: 1)
+ assert_select ".gem-c-global-banner", text: "Look here you"
+ end
+
+ it "renders with a link on the title" do
+ render_component(title: "Look here you", banner_version: 1, title_href: "https://www.gov.uk")
+ assert_select ".gem-c-global-banner a.gem-c-global-banner__title[href='https://www.gov.uk']", text: "Look here you"
+ end
+
+ it "includes GA4 attributes when there is a link" do
+ render_component(title: "Look here you", banner_version: 1, title_href: "https://www.gov.uk")
+ assert_select 'a.gem-c-global-banner__title[data-module="ga4-link-tracker"]'
+ assert_select 'a.gem-c-global-banner__title[data-ga4-link=\'{"event_name":"navigation","type":"global bar","section":"Look here you"}\']'
+ end
+
+ it "renders with a title and text" do
+ render_component(title: "Look here you", banner_version: 1, text: "This is important")
+ assert_select ".gem-c-global-banner .gem-c-global-banner__title", text: "Look here you"
+ assert_select ".gem-c-global-banner .gem-c-global-banner__text", text: "This is important"
+ end
+
+ it "includes the always visible option" do
+ render_component(title: "Look here you", banner_version: 1, always_visible: true)
+ assert_select ".gem-c-global-banner[data-global-banner-permanent]"
+ end
+end
diff --git a/spec/components/layout_for_public_spec.rb b/spec/components/layout_for_public_spec.rb
index 4c52421abe..5c526766d9 100644
--- a/spec/components/layout_for_public_spec.rb
+++ b/spec/components/layout_for_public_spec.rb
@@ -99,22 +99,22 @@ def component_name
assert_select "#test-emergency-banner", text: "This is an emergency banner test"
end
- it "can add a global bar" do
+ it "can add a global banner" do
render_component({
- global_bar: "This is a global bar test
",
+ global_banner: "This is a global banner test
",
})
- assert_select "#test-global-banner", text: "This is a global bar test"
+ assert_select "#test-global-banner", text: "This is a global banner test"
end
- it "can add both an emergency banner and a global bar" do
+ it "can add both an emergency banner and a global banner" do
render_component({
emergency_banner: "This is an emergency banner test
",
- global_bar: "This is a global bar test
",
+ global_banner: "This is a global banner test
",
})
assert_select "#test-emergency-banner", text: "This is an emergency banner test"
- assert_select "#test-global-banner", text: "This is a global bar test"
+ assert_select "#test-global-banner", text: "This is a global banner test"
end
it "has a blue bar by default" do
@@ -293,16 +293,16 @@ def component_name
assert_select ".gem-c-layout-for-public.govuk-template__body.draft"
end
- it "contains a global-bar-present class when the global bar is present" do
- render_component({ global_bar: { present: true } })
+ it "contains a global-banner-present class when the global banner is present" do
+ render_component({ global_banner: { present: true } })
- assert_select ".gem-c-layout-for-public.govuk-template__body.global-bar-present"
+ assert_select ".gem-c-layout-for-public.govuk-template__body.global-banner-present"
end
- it "does not contains a global-bar-present class when the global bar is not present" do
- render_component({ global_bar: {} })
+ it "does not contains a global-banner-present class when the global banner is not present" do
+ render_component({ global_banner: {} })
- assert_select ".gem-c-layout-for-public.govuk-template__body.global-bar-present", false
+ assert_select ".gem-c-layout-for-public.govuk-template__body.global-banner-present", false
end
it "has an Open Graph image with an absolute URL" do
diff --git a/spec/dummy/app/views/layouts/dummy_public_layout.html.erb b/spec/dummy/app/views/layouts/dummy_public_layout.html.erb
index 1fa82d1f59..ddae3643f4 100644
--- a/spec/dummy/app/views/layouts/dummy_public_layout.html.erb
+++ b/spec/dummy/app/views/layouts/dummy_public_layout.html.erb
@@ -1,6 +1,6 @@
<%= render 'govuk_publishing_components/components/layout_for_public', {
emergency_banner: 'This is the emergency banner slot.
This is the global bar slot.
This is the global banner slot.