govuk_publishing_components 35.14.0 → 35.15.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (19) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-page-views.js +15 -5
  3. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +4 -5
  4. data/app/assets/javascripts/govuk_publishing_components/vendor/lux/lux-reporter.js +327 -321
  5. data/app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss +6 -0
  6. data/app/assets/stylesheets/govuk_publishing_components/components/_govspeak.scss +6 -0
  7. data/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +1 -1
  8. data/app/views/govuk_publishing_components/components/_attachment.html.erb +2 -1
  9. data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb +30 -2
  10. data/app/views/govuk_publishing_components/components/_devolved_nations.html.erb +15 -1
  11. data/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb +2 -2
  12. data/app/views/govuk_publishing_components/components/docs/cards.yml +2 -2
  13. data/app/views/govuk_publishing_components/components/docs/cookie_banner.yml +5 -0
  14. data/app/views/govuk_publishing_components/components/docs/devolved_nations.yml +16 -0
  15. data/app/views/govuk_publishing_components/components/layout_for_public/_account-layout.html.erb +1 -0
  16. data/config/locales/en.yml +2 -2
  17. data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb +16 -4
  18. data/lib/govuk_publishing_components/version.rb +1 -1
  19. metadata +3 -3
@@ -17,6 +17,12 @@
17
17
  display: block !important; // stylelint-disable-line declaration-no-important
18
18
  }
19
19
 
20
+ .js-enabled .govuk-accordion__section-content[hidden] {
21
+ @supports (content-visibility: hidden) {
22
+ content-visibility: auto;
23
+ }
24
+ }
25
+
20
26
  // Change the colour from the blue link colour to black.
21
27
  .govuk-accordion__section-button {
22
28
  color: govuk-colour("black") !important; // stylelint-disable-line declaration-no-important
@@ -34,6 +34,12 @@
34
34
  // stylelint-disable max-nesting-depth
35
35
 
36
36
  .gem-c-govspeak {
37
+ a[href^="/"]:after,a[href^="http://"]:after,a[href^="https://"]:after {
38
+ content: " (" attr(href) ")";
39
+ font-size: 90%;
40
+ word-wrap: break-word;
41
+ }
42
+
37
43
  .media-player {
38
44
  display: none;
39
45
  }
@@ -693,7 +693,7 @@ $after-button-padding-left: govuk-spacing(4);
693
693
  }
694
694
  }
695
695
 
696
- .gem-c-layout-super-navigation-header__navigation-second-items--topics {
696
+ .gem-c-layout-super-navigation-header__navigation-second-items--services-and-information {
697
697
  @include govuk-media-query($until: "desktop") {
698
698
  border-bottom: 1px solid govuk-colour("mid-grey");
699
699
  }
@@ -54,8 +54,9 @@
54
54
  )
55
55
  end
56
56
 
57
+ data_attributes[:ga4_link] = ga4_link
57
58
  %>
58
- <%= tag.section class: class_names(container_class_names), data: { module: "ga4-link-tracker", ga4_track_links_only: "", ga4_link: ga4_link } do %>
59
+ <%= tag.section class: class_names(container_class_names), data: { module: "ga4-link-tracker" } do %>
59
60
  <%= tag.div class: "gem-c-attachment__thumbnail" do %>
60
61
  <%= link_to attachment.url,
61
62
  class: "govuk-link",
@@ -30,6 +30,8 @@
30
30
  services_cookies ||= nil
31
31
  css_classes = %w(gem-c-cookie-banner govuk-clearfix govuk-cookie-banner js-banner-wrapper)
32
32
  css_classes << "gem-c-cookie-banner--services" if services_cookies
33
+
34
+ ga4_tracking ||= false
33
35
  %>
34
36
 
35
37
  <div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>">
@@ -39,7 +41,14 @@
39
41
  <h2 class="govuk-cookie-banner__heading govuk-heading-m"><%= title %></h2>
40
42
  <div tabindex="-1" class="govuk-cookie-banner__content gem-c-cookie-banner__confirmation">
41
43
  <span class="gem-c-cookie-banner__content"><%= text %></span>
42
- <p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden><%= t("components.cookie_banner.confirmation_message.accepted") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
44
+ <p class="gem-c-cookie-banner__confirmation-message--accepted govuk-body" hidden
45
+ <% if ga4_tracking %>
46
+ data-ga4-cookie-banner <%# GA4 pageview JS looks for data-ga4-cookie-banner %>
47
+ data-module="ga4-link-tracker"
48
+ data-ga4-track-links-only
49
+ data-ga4-set-indexes
50
+ data-ga4-link="<%= { event_name: "navigation", type: "cookie banner", section: t("components.cookie_banner.confirmation_message.accepted", locale: :en) }.to_json %>"
51
+ <% end %>><%= t("components.cookie_banner.confirmation_message.accepted") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
43
52
  <p class="gem-c-cookie-banner__confirmation-message--rejected govuk-body" hidden><%= t("components.cookie_banner.confirmation_message.rejected") %>. <span class="gem-c-cookie-banner__confirmation-message"><%= confirmation_message %></span></p>
44
53
  </div>
45
54
  </div>
@@ -85,7 +94,26 @@
85
94
  <% end %>
86
95
  </div>
87
96
  <div hidden class="js-hide-button govuk-button-group">
88
- <button class="gem-c-cookie-banner__hide-button govuk-button" data-hide-cookie-banner="true" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Hide cookie banner"><%= t("components.cookie_banner.hide") %></button>
97
+ <%
98
+ button_data_module = "gem-track-click"
99
+ button_data_module << " ga4-event-tracker" if ga4_tracking
100
+
101
+ ga4_event = {
102
+ event_name: "select_content",
103
+ type: "cookie banner",
104
+ action: "closed",
105
+ section: t("components.cookie_banner.confirmation_message.accepted", locale: :en)
106
+ }.to_json if ga4_tracking
107
+ %>
108
+ <button
109
+ class="gem-c-cookie-banner__hide-button govuk-button"
110
+ data-hide-cookie-banner="true"
111
+ data-module="<%= button_data_module %>"
112
+ data-track-category="cookieBanner"
113
+ data-track-action="Hide cookie banner"
114
+ <% if ga4_tracking %> data-ga4-event="<%= ga4_event %>" <% end %>>
115
+ <%= t("components.cookie_banner.hide") %>
116
+ </button>
89
117
  </div>
90
118
  </div>
91
119
  </div>
@@ -6,10 +6,24 @@
6
6
 
7
7
  applies_to ||= t("components.devolved_nations.applies_to")
8
8
  heading_level ||= 2
9
+ ga4_tracking ||= false
10
+ data_attributes = {}
11
+
12
+ if ga4_tracking
13
+ data_attributes[:ga4_devolved_nations_banner] = devolved_nations_helper.ga4_applicable_nations_title_text(true)
14
+ data_attributes[:module] = "ga4-link-tracker"
15
+ data_attributes[:ga4_track_links_only] = ""
16
+ data_attributes[:ga4_set_indexes] = ""
17
+ data_attributes[:ga4_link] = {
18
+ event_name: "navigation",
19
+ type: "devolved nations banner",
20
+ section: t("components.devolved_nations.applies_to", locale: :en) + " " + devolved_nations_helper.ga4_applicable_nations_title_text,
21
+ }.to_json
22
+ end
9
23
  %>
10
24
 
11
25
  <% if national_applicability.any? { |k,v| v[:applicable] == true } %>
12
- <%= tag.section class: "gem-c-devolved-nations" do %>
26
+ <%= tag.section class: "gem-c-devolved-nations", data: data_attributes do %>
13
27
  <%= content_tag(shared_helper.get_heading_level, class: "govuk-heading-s govuk-!-margin-bottom-0") do %>
14
28
  <%= applies_to %> <%= devolved_nations_helper.applicable_nations_title_text %>
15
29
  <% end %>
@@ -217,11 +217,11 @@
217
217
  end
218
218
  %>
219
219
 
220
- <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.sub(" ", "-") %>">
220
+ <div class="<%= width_class %> gem-c-layout-super-navigation-header__column--<%= column[:label].downcase.gsub(" ", "-") %>">
221
221
  <h3 class="govuk-heading-m gem-c-layout-super-navigation-header__column-header">
222
222
  <%= column[:label] %>
223
223
  </h3>
224
- <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.sub(" ", "-") %>">
224
+ <ul class="gem-c-layout-super-navigation-header__navigation-second-items gem-c-layout-super-navigation-header__navigation-second-items--<%= column[:label].downcase.gsub(" ", "-") %>">
225
225
  <% index_total = column[:menu_contents].length %>
226
226
  <% column[:menu_contents].each_with_index do | item, index | %>
227
227
  <%
@@ -20,7 +20,7 @@ uses_component_wrapper_helper: true
20
20
  examples:
21
21
  default:
22
22
  data:
23
- heading: Topics
23
+ heading: Services and information
24
24
  items:
25
25
  - link:
26
26
  text: Benefits
@@ -109,7 +109,7 @@ examples:
109
109
 
110
110
  Override default subheading level by passing through `sub_heading_level` parameter (defaults to `<h3>`)
111
111
  data:
112
- heading: Topics
112
+ heading: Services and information
113
113
  heading_level: 3
114
114
  sub_heading_level: 4
115
115
  items:
@@ -49,3 +49,8 @@ examples:
49
49
  cookie_preferences:
50
50
  text: How we use cookies
51
51
  href: "/cookies"
52
+ with_ga4_tracking:
53
+ description: |
54
+ Enables GA4 tracking on the banner. This includes link tracking on the "You have accepted cookies" section, and allows the pageview event that is sent when GA4 initialises to record the presence of the cookie acceptance message.
55
+ data:
56
+ ga4_tracking: true
@@ -89,3 +89,19 @@ examples:
89
89
  national_applicability:
90
90
  england:
91
91
  applicable: true
92
+ with_ga4_tracking:
93
+ description: |
94
+ Enables GA4 tracking on the banner. This includes link tracking on the component itself, and allows pageviews to record the presence of the banner on page load.
95
+ data:
96
+ national_applicability:
97
+ england:
98
+ applicable: true
99
+ scotland:
100
+ applicable: true
101
+ wales:
102
+ applicable: true
103
+ northern_ireland:
104
+ applicable: false
105
+ alternative_url: /
106
+ type: detailed_guide
107
+ ga4_tracking: true
@@ -1,6 +1,7 @@
1
1
  <div class="govuk-width-container">
2
2
  <%= render "govuk_publishing_components/components/phase_banner", {
3
3
  phase: "beta",
4
+ ga4_tracking: true,
4
5
  message: sanitize(t("components.layout_for_public.account_layout.feedback.banners.phase_banner_html"))
5
6
  } unless omit_account_phase_banner %>
6
7
 
@@ -91,7 +91,7 @@ en:
91
91
  copyright_html: <a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
92
92
  licence_html: All content is available under the <a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
93
93
  navigation_links:
94
- - title: Topics
94
+ - title: Services and information
95
95
  menu_contents:
96
96
  - text: Benefits
97
97
  href: "/browse/benefits"
@@ -171,7 +171,7 @@ en:
171
171
  href: "/browse"
172
172
  label: Menu
173
173
  navigation_links_columns:
174
- - label: Topics
174
+ - label: Services and information
175
175
  size: 2
176
176
  menu_contents:
177
177
  - label: Benefits
@@ -8,17 +8,29 @@ module GovukPublishingComponents
8
8
  @type = local_assigns[:type] || "publication"
9
9
  end
10
10
 
11
- def applicable_nations_title_text
11
+ def applicable_nations_title_text(use_english_translation = nil)
12
12
  @national_applicability
13
13
  .select { |_, v| v[:applicable] == true }
14
- .map { |k, _| I18n.t("components.devolved_nations.#{k}") }
14
+ .map { |k, _| get_translation("components.devolved_nations.#{k}", use_english_translation) }
15
15
  .sort
16
16
  .to_sentence(
17
- two_words_connector: I18n.t("components.devolved_nations.connectors.two_words"),
18
- last_word_connector: I18n.t("components.devolved_nations.connectors.last_word"),
17
+ two_words_connector: get_translation("components.devolved_nations.connectors.two_words", use_english_translation),
18
+ last_word_connector: get_translation("components.devolved_nations.connectors.last_word", use_english_translation),
19
19
  )
20
20
  end
21
21
 
22
+ def get_translation(key, use_english_translation = nil)
23
+ return I18n.t(key, locale: :en) if use_english_translation
24
+
25
+ I18n.t(key)
26
+ end
27
+
28
+ def ga4_applicable_nations_title_text(remove_connector_word = nil)
29
+ return applicable_nations_title_text(true).gsub(" and", ",") if remove_connector_word
30
+
31
+ applicable_nations_title_text(true)
32
+ end
33
+
22
34
  def nations_with_urls
23
35
  @national_applicability
24
36
  .select do |_, v|
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "35.14.0".freeze
2
+ VERSION = "35.15.1".freeze
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_publishing_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 35.14.0
4
+ version: 35.15.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - GOV.UK Dev
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2023-08-17 00:00:00.000000000 Z
11
+ date: 2023-09-05 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config
@@ -1468,7 +1468,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
1468
1468
  - !ruby/object:Gem::Version
1469
1469
  version: '0'
1470
1470
  requirements: []
1471
- rubygems_version: 3.4.18
1471
+ rubygems_version: 3.4.19
1472
1472
  signing_key:
1473
1473
  specification_version: 4
1474
1474
  summary: A gem to document components in GOV.UK frontend applications