govuk_publishing_components 37.2.4 → 37.3.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/govuk_publishing_components/analytics/auto-scroll-tracker.js +3 -2
  3. data/app/assets/javascripts/govuk_publishing_components/analytics/init.js +0 -19
  4. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-auto-tracker.js +3 -2
  5. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +1 -1
  6. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-event-tracker.js +3 -2
  7. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-form-tracker.js +4 -3
  8. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js +15 -4
  9. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-scroll-tracker.js +3 -2
  10. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-smart-answer-results-tracker.js +3 -2
  11. data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js +1 -0
  12. data/app/assets/javascripts/govuk_publishing_components/components/cookie-banner.js +1 -8
  13. data/app/assets/javascripts/govuk_publishing_components/dependencies.js +1 -0
  14. data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/youtube-link-enhancement.js +3 -3
  15. data/app/assets/javascripts/govuk_publishing_components/load-analytics.js +20 -12
  16. data/app/assets/javascripts/govuk_publishing_components/modules.js +1 -1
  17. data/app/assets/javascripts/govuk_publishing_components/rum-loader.js +2 -3
  18. data/app/assets/stylesheets/component_guide/application.scss +1 -1
  19. data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +1 -1
  20. data/app/assets/stylesheets/govuk_publishing_components/components/_cookie-banner.scss +5 -16
  21. data/app/assets/stylesheets/govuk_publishing_components/components/_image-card.scss +3 -3
  22. data/app/assets/stylesheets/govuk_publishing_components/components/_modal-dialogue.scss +1 -1
  23. data/app/assets/stylesheets/govuk_publishing_components/components/_print-link.scss +2 -2
  24. data/app/assets/stylesheets/govuk_publishing_components/components/_search.scss +1 -1
  25. data/app/assets/stylesheets/govuk_publishing_components/components/_share-links.scss +1 -1
  26. data/app/assets/stylesheets/govuk_publishing_components/components/_single-page-notification-button.scss +1 -1
  27. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav-related.scss +1 -1
  28. data/app/assets/stylesheets/govuk_publishing_components/components/_step-by-step-nav.scss +8 -8
  29. data/app/assets/stylesheets/govuk_publishing_components/components/_table.scss +1 -1
  30. data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_warning-callout.scss +2 -2
  31. data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +1 -1
  32. data/app/models/govuk_publishing_components/audit_comparer.rb +0 -1
  33. data/app/views/govuk_publishing_components/components/_attachment.html.erb +3 -1
  34. data/app/views/govuk_publishing_components/components/_back_link.html.erb +17 -7
  35. data/app/views/govuk_publishing_components/components/_cookie_banner.html.erb +1 -1
  36. data/app/views/govuk_publishing_components/components/_govspeak.html.erb +17 -2
  37. data/app/views/govuk_publishing_components/components/_layout_for_public.html.erb +1 -3
  38. data/app/views/govuk_publishing_components/components/_share_links.html.erb +4 -3
  39. data/app/views/govuk_publishing_components/components/docs/attachment.yml +13 -0
  40. data/app/views/govuk_publishing_components/components/docs/back_link.yml +5 -3
  41. data/app/views/govuk_publishing_components/components/docs/cookie_banner.yml +2 -2
  42. data/app/views/govuk_publishing_components/components/docs/govspeak.yml +9 -0
  43. data/app/views/govuk_publishing_components/components/docs/share_links.yml +15 -2
  44. data/lib/govuk_publishing_components/version.rb +1 -1
  45. metadata +3 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 954001323bc3368084beb9aa38f8a4ddd3d5270befbb7a90099af0350e0e8334
4
- data.tar.gz: 3d828c3d3262b055e3203554a21fccf2dccadb4f7ed32c24f53a1faaee8d08fb
3
+ metadata.gz: f7a4d71679bce34c3c53255372e12812f5908a8ffefa866b090b3072d41f3745
4
+ data.tar.gz: db303cecf8d41c5bc9034b456422391432194346d30ed7ba7c02327f90d32634
5
5
  SHA512:
6
- metadata.gz: c9f683e2de4a2907806333a59f6d20aa3d236ee7f477749a617d68c64eecfff983f2dfd9dae9f752a83d803d3d9efd3bd55f43d665807246d2a8ddcca0c9f563
7
- data.tar.gz: 39fd412b715129e7fa78f281cf4d33382e20e880c732515dd20f2807403e6e929decfb961a50ab6f6423f07cb2f1b7156254dbefb2107970c70cc731b83f8e3f
6
+ metadata.gz: a4d729e0d668e689eef1ab993ee9ab48e5a7bfd50876659175d9bee9377e46aac4ace318bd620842534f3cc05764eb850ec0103e6cc890fc3a942b3202f9788d
7
+ data.tar.gz: 52b24d45ec33e237f05defa2dc1fd0fc2bd93be96687f6ab9afb88e9a420ab48120a57bcc70f71fcb76163a3ab83dc330cbd53886e7bdab0ae8d2becfbc525bd
@@ -22,12 +22,13 @@ window.GOVUK.analyticsVars = window.GOVUK.analyticsVars || {};
22
22
  if (consentCookie && consentCookie.usage) {
23
23
  this.startModule()
24
24
  } else {
25
- this.startModule = this.startModule.bind(this)
26
- window.addEventListener('cookie-consent', this.startModule)
25
+ this.start = this.startModule.bind(this)
26
+ window.addEventListener('cookie-consent', this.start)
27
27
  }
28
28
  }
29
29
 
30
30
  AutoScrollTracker.prototype.startModule = function () {
31
+ window.removeEventListener('cookie-consent', this.start)
31
32
  if (window.GOVUK.analyticsVars.scrollTrackerStarted) {
32
33
  return
33
34
  }
@@ -11,25 +11,6 @@ var analyticsInit = function () {
11
11
  var crossDomainLinkedDomains = window.GOVUK.analyticsVars.linkedDomains || false
12
12
  }
13
13
 
14
- window.GOVUK.Analytics.checkDigitalIdentityConsent = function (location) {
15
- if (!location || !location.search) return
16
- // this checks for the presence of the Digital Identity cookie consent query parameter and updates our consent cookie accordingly
17
- // This is so that users don't see multiple cookie banners when they move between the different account management pages, as some will be on GOV.UK and others will be on the DI domain.
18
- var digitalIdentityConsent = /([?&]cookie_consent=)(accept|reject)/.exec(location.search)
19
- if (digitalIdentityConsent) {
20
- if (digitalIdentityConsent[2] === 'accept') {
21
- window.GOVUK.setConsentCookie({ usage: true })
22
- // set cookies_preferences_set to true to prevent cookie banner showing
23
- window.GOVUK.cookie('cookies_preferences_set', 'true')
24
- } else if (digitalIdentityConsent[2] === 'reject') {
25
- window.GOVUK.setConsentCookie({ usage: false })
26
- window.GOVUK.cookie('cookies_preferences_set', 'true')
27
- }
28
- }
29
- }
30
-
31
- window.GOVUK.Analytics.checkDigitalIdentityConsent(window.location)
32
-
33
14
  var consentCookie = window.GOVUK.getConsentCookie()
34
15
  var dummyAnalytics = {
35
16
  addLinkedTrackerDomain: function () {},
@@ -16,8 +16,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
16
16
  if (consentCookie && consentCookie.usage) {
17
17
  this.startModule()
18
18
  } else {
19
- this.startModule = this.startModule.bind(this)
20
- window.addEventListener('cookie-consent', this.startModule)
19
+ this.start = this.startModule.bind(this)
20
+ window.addEventListener('cookie-consent', this.start)
21
21
  }
22
22
  }
23
23
 
@@ -27,6 +27,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
27
27
 
28
28
  Ga4AutoTracker.prototype.sendEvent = function () {
29
29
  if (window.dataLayer) {
30
+ window.removeEventListener('cookie-consent', this.start)
30
31
  try {
31
32
  var data = this.module.getAttribute(this.trackingTrigger)
32
33
  data = JSON.parse(data) || {}
@@ -268,7 +268,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
268
268
  module.setAttribute('data-ga4-link', JSON.stringify(ga4LinkData))
269
269
  } catch (e) {
270
270
  // if there's a problem with the config, don't start the tracker
271
- console.error('Unable to JSON.parse or JSON.stringify index: ' + e.message, window.location)
271
+ console.error('Unable to JSON.parse or JSON.stringify index: ', e, window.location)
272
272
  }
273
273
  },
274
274
 
@@ -16,14 +16,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
16
16
  if (consentCookie && consentCookie.usage) {
17
17
  this.startModule()
18
18
  } else {
19
- this.startModule = this.startModule.bind(this)
20
- window.addEventListener('cookie-consent', this.startModule)
19
+ this.start = this.startModule.bind(this)
20
+ window.addEventListener('cookie-consent', this.start)
21
21
  }
22
22
  }
23
23
 
24
24
  // triggered by cookie-consent event, which happens when users consent to cookies
25
25
  Ga4EventTracker.prototype.startModule = function () {
26
26
  if (window.dataLayer) {
27
+ window.removeEventListener('cookie-consent', this.start)
27
28
  this.module.addEventListener('click', this.trackClick.bind(this), true) // useCapture must be true
28
29
  }
29
30
  }
@@ -18,14 +18,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
18
18
  if (consentCookie && consentCookie.usage) {
19
19
  this.startModule()
20
20
  } else {
21
- this.startModule = this.startModule.bind(this)
22
- window.addEventListener('cookie-consent', this.startModule)
21
+ this.start = this.startModule.bind(this)
22
+ window.addEventListener('cookie-consent', this.start)
23
23
  }
24
24
  }
25
25
 
26
26
  // triggered by cookie-consent event, which happens when users consent to cookies
27
27
  Ga4FormTracker.prototype.startModule = function () {
28
28
  if (window.dataLayer) {
29
+ window.removeEventListener('cookie-consent', this.start)
29
30
  this.module.addEventListener('submit', this.trackFormSubmit.bind(this))
30
31
  }
31
32
  }
@@ -88,7 +89,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
88
89
  } else if (inputNodename === 'SELECT' && elem.options[elem.selectedIndex].value) {
89
90
  input.answer = elem.options[elem.selectedIndex].text
90
91
  } else if (inputTypes.indexOf(inputType) !== -1 && elem.value) {
91
- if (this.includeTextInputValues) {
92
+ if (this.includeTextInputValues || elem.hasAttribute('data-ga4-form-include-input')) {
92
93
  var PIIRemover = new window.GOVUK.analyticsGa4.PIIRemover()
93
94
  input.answer = PIIRemover.stripPIIWithOverride(elem.value, true, true)
94
95
  } else {
@@ -19,14 +19,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
19
19
  if (consentCookie && consentCookie.usage) {
20
20
  this.startModule()
21
21
  } else {
22
- this.startModule = this.startModule.bind(this)
23
- window.addEventListener('cookie-consent', this.startModule)
22
+ this.start = this.startModule.bind(this)
23
+ window.addEventListener('cookie-consent', this.start)
24
24
  }
25
25
  }
26
26
 
27
27
  // triggered by cookie-consent event, which happens when users consent to cookies
28
28
  Ga4LinkTracker.prototype.startModule = function () {
29
29
  if (window.dataLayer) {
30
+ window.removeEventListener('cookie-consent', this.start)
30
31
  this.handleClick = this.handleClick.bind(this)
31
32
  this.handleMousedown = this.handleMousedown.bind(this)
32
33
 
@@ -47,8 +48,18 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
47
48
  } else if (this.trackLinksOnly && target.closest('a')) {
48
49
  if (!this.limitToElementClass) {
49
50
  this.trackClick(event)
50
- } else if (target.closest('.' + this.limitToElementClass)) {
51
- this.trackClick(event)
51
+ } else {
52
+ var classes = this.limitToElementClass.split(',')
53
+
54
+ for (var i = 0; i < classes.length; i++) {
55
+ if (target.closest('.' + classes[i].trim())) {
56
+ // Stops the link tracker firing twice if the link itself has data-ga4-link, and the parent element does as well.
57
+ if (target.closest('[data-ga4-link]') !== target.closest('[data-ga4-limit-to-element-class]')) {
58
+ return
59
+ }
60
+ this.trackClick(event)
61
+ }
62
+ }
52
63
  }
53
64
  }
54
65
  }
@@ -22,12 +22,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
22
22
  if (consentCookie && consentCookie.usage) {
23
23
  this.startModule()
24
24
  } else {
25
- this.startModule = this.startModule.bind(this)
26
- window.addEventListener('cookie-consent', this.startModule)
25
+ this.start = this.startModule.bind(this)
26
+ window.addEventListener('cookie-consent', this.start)
27
27
  }
28
28
  }
29
29
 
30
30
  Ga4ScrollTracker.prototype.startModule = function () {
31
+ window.removeEventListener('cookie-consent', this.start)
31
32
  if (window.GOVUK.analyticsGa4.vars.scrollTrackerStarted) {
32
33
  return
33
34
  }
@@ -15,8 +15,8 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
15
15
  if (consentCookie && consentCookie.usage) {
16
16
  this.startModule()
17
17
  } else {
18
- this.startModule = this.startModule.bind(this)
19
- window.addEventListener('cookie-consent', this.startModule)
18
+ this.start = this.startModule.bind(this)
19
+ window.addEventListener('cookie-consent', this.start)
20
20
  }
21
21
  }
22
22
 
@@ -25,6 +25,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
25
25
  // only run this code if the dataLayer exists and an element with a data-ga4-ecommerce-path
26
26
  // attribute exists as this indicates that ecommerce tracking is required
27
27
  if (window.dataLayer && this.module.querySelector('[data-ga4-ecommerce-path]')) {
28
+ window.removeEventListener('cookie-consent', this.start)
28
29
  this.trackResults()
29
30
  this.module.addEventListener('click', this.handleClick.bind(this))
30
31
  }
@@ -2,6 +2,7 @@ window.GOVUK = window.GOVUK || {}
2
2
  window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {}
3
3
 
4
4
  var initFunction = function () {
5
+ window.removeEventListener('cookie-consent', window.GOVUK.analyticsGa4.init)
5
6
  var consentCookie = window.GOVUK.getConsentCookie()
6
7
 
7
8
  if (consentCookie && consentCookie.usage) {
@@ -26,13 +26,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
26
26
 
27
27
  this.$acceptCookiesButton = this.$module.querySelector('button[data-accept-cookies]')
28
28
  if (this.$acceptCookiesButton) {
29
- this.$acceptCookiesButton.style.display = 'block'
30
29
  this.$acceptCookiesButton.addEventListener('click', this.$module.setCookieConsent)
31
30
  }
32
31
 
33
32
  this.$rejectCookiesButton = this.$module.querySelector('button[data-reject-cookies]')
34
33
  if (this.$rejectCookiesButton) {
35
- this.$rejectCookiesButton.style.display = 'block'
36
34
  this.$rejectCookiesButton.addEventListener('click', this.$module.rejectCookieConsent)
37
35
  }
38
36
 
@@ -45,7 +43,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
45
43
  var shouldHaveCookieMessage = (this.$module && window.GOVUK.cookie('cookies_preferences_set') !== 'true')
46
44
 
47
45
  if (shouldHaveCookieMessage) {
48
- this.$module.style.display = 'block'
46
+ this.$module.removeAttribute('hidden')
49
47
 
50
48
  // Set the default consent cookie if it isn't already present
51
49
  if (!window.GOVUK.cookie('cookies_policy')) {
@@ -53,18 +51,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
53
51
  }
54
52
 
55
53
  window.GOVUK.deleteUnconsentedCookies()
56
- } else {
57
- this.$module.style.display = 'none'
58
54
  }
59
- } else {
60
- this.$module.style.display = 'none'
61
55
  }
62
56
  }
63
57
 
64
58
  CookieBanner.prototype.hideCookieMessage = function (event) {
65
59
  if (this.$module) {
66
60
  this.$module.hidden = true
67
- this.$module.style.display = 'none'
68
61
  window.GOVUK.cookie('cookies_preferences_set', 'true', { days: 365 })
69
62
  }
70
63
 
@@ -10,6 +10,7 @@ document.addEventListener('DOMContentLoaded', function () {
10
10
 
11
11
  // if statements ensure these functions don't execute during testing
12
12
  if (typeof window.GOVUK.loadAnalytics !== 'undefined') {
13
+ window.GOVUK.loadAnalytics.loadExtraDomains()
13
14
  if (typeof window.GOVUK.analyticsGa4.vars === 'undefined') {
14
15
  window.GOVUK.loadAnalytics.loadGa4()
15
16
  }
@@ -10,15 +10,15 @@
10
10
 
11
11
  YoutubeLinkEnhancement.prototype.init = function () {
12
12
  if (!this.campaignCookiesAllowed()) {
13
- this.startModule = this.startModule.bind(this)
14
- window.addEventListener('cookie-consent', this.startModule)
13
+ this.start = this.startModule.bind(this)
14
+ window.addEventListener('cookie-consent', this.start)
15
15
  return
16
16
  }
17
17
  this.startModule()
18
18
  }
19
19
 
20
20
  YoutubeLinkEnhancement.prototype.startModule = function () {
21
- window.removeEventListener('cookie-consent', this.startModule)
21
+ window.removeEventListener('cookie-consent', this.start)
22
22
  var $youtubeLinks = this.$element.querySelectorAll('a[href*="youtube.com"], a[href*="youtu.be"]')
23
23
 
24
24
  if ($youtubeLinks.length > 0) {
@@ -70,6 +70,12 @@ window.GOVUK.loadAnalytics = {
70
70
  }
71
71
  ],
72
72
 
73
+ loadExtraDomains: function () {
74
+ if (Array.isArray(window.GOVUK.analyticsGa4Domains)) {
75
+ this.domains = this.domains.concat(window.GOVUK.analyticsGa4Domains)
76
+ }
77
+ },
78
+
73
79
  // For Universal Analytics' cross domain tracking. linkedDomains is defined by the require statement at the top of the file.
74
80
  linkedDomains: window.GOVUK.analytics.linkedDomains,
75
81
 
@@ -99,18 +105,7 @@ window.GOVUK.loadAnalytics = {
99
105
 
100
106
  loadGa4: function (currentDomain) {
101
107
  currentDomain = currentDomain || window.location.hostname
102
- var environment = false
103
- // lots of dev domains, so simplify the matching process
104
- if (currentDomain.match(/[a-zA-Z0-9.-]+dev\.gov\.uk/)) {
105
- environment = this.domains[0]
106
- } else {
107
- for (var i = 0; i < this.domains.length; i++) {
108
- if (this.arrayContains(currentDomain, this.domains[i].domains)) {
109
- environment = this.domains[i]
110
- break
111
- }
112
- }
113
- }
108
+ var environment = this.getEnvironment(currentDomain)
114
109
 
115
110
  // If we recognise the environment (i.e. the string isn't empty), load in GA4
116
111
  if (environment) {
@@ -135,5 +130,18 @@ window.GOVUK.loadAnalytics = {
135
130
 
136
131
  arrayContains: function (valueToFind, array) {
137
132
  return array.indexOf(valueToFind) !== -1
133
+ },
134
+
135
+ getEnvironment: function (currentDomain) {
136
+ // lots of dev domains, so simplify the matching process
137
+ if (currentDomain.match(/[a-zA-Z0-9.-]+dev\.gov\.uk/)) {
138
+ return this.domains[0]
139
+ } else {
140
+ for (var i = 0; i < this.domains.length; i++) {
141
+ if (this.arrayContains(currentDomain, this.domains[i].domains)) {
142
+ return this.domains[i]
143
+ }
144
+ }
145
+ }
138
146
  }
139
147
  }
@@ -43,7 +43,7 @@
43
43
  element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
44
44
  } catch (e) {
45
45
  // if there's a problem with the module, catch the error to allow other modules to start
46
- console.error('Error starting ' + moduleName + ' component JS: ' + e.message, window.location)
46
+ console.error('Error starting ' + moduleName + ' component JS: ', e, window.location)
47
47
  }
48
48
  }
49
49
  }
@@ -19,6 +19,7 @@
19
19
  })()
20
20
 
21
21
  var insertScript = function () {
22
+ window.removeEventListener('cookie-consent', insertScript)
22
23
  var marker = document.querySelector('script[data-lux-reporter-script]')
23
24
 
24
25
  if (!marker) {
@@ -37,8 +38,6 @@
37
38
  if (parsedCookie.usage === true) {
38
39
  insertScript()
39
40
  } else {
40
- window.addEventListener('cookie-consent', function () {
41
- insertScript()
42
- })
41
+ window.addEventListener('cookie-consent', insertScript)
43
42
  }
44
43
  })()
@@ -165,7 +165,7 @@ $gem-guide-border-width: 1px;
165
165
  h3,
166
166
  h4 {
167
167
  margin-top: 0;
168
- margin-bottom: $govuk-gutter / 2;
168
+ margin-bottom: calc($govuk-gutter / 2);
169
169
  }
170
170
 
171
171
  h3 a {
@@ -40,7 +40,7 @@
40
40
  list-style-type: none;
41
41
 
42
42
  @include govuk-media-query($from: tablet) {
43
- padding-top: govuk-spacing(6) / 4;
43
+ padding-top: calc(govuk-spacing(6) / 4);
44
44
  }
45
45
  }
46
46
 
@@ -1,25 +1,14 @@
1
1
  @import "govuk_publishing_components/individual_component_support";
2
2
  @import "govuk/components/cookie-banner/cookie-banner";
3
3
 
4
- .gem-c-cookie-banner .govuk-button-group[hidden] {
5
- display: none;
6
- }
7
-
8
- .govuk-cookie-banner .govuk-cookie-banner__heading[hidden] {
9
- display: none;
10
- }
11
-
12
- .js-enabled {
13
- .gem-c-cookie-banner {
14
- display: none; // shown with JS, always on for non-JS
4
+ .gem-c-cookie-banner {
5
+ [hidden],
6
+ .govuk-button-group[hidden],
7
+ .govuk-cookie-banner__heading[hidden] {
8
+ display: none;
15
9
  }
16
10
  }
17
11
 
18
- // can't be used without js so implement there
19
- .gem-c-cookie-banner .gem-c-button {
20
- display: none;
21
- }
22
-
23
12
  .gem-c-cookie-banner__confirmation {
24
13
  // This element is focused using JavaScript so that it's being read out by screen readers
25
14
  // for this reason we don't want to show the default outline or emphasise it visually using `govuk-focused-text`
@@ -186,7 +186,7 @@
186
186
  @include govuk-font($size: false);
187
187
  font-size: 16px;
188
188
  font-size: govuk-px-to-rem(16px);
189
- margin: 0 0 (govuk-spacing(3) / 2);
189
+ margin: 0 0 calc(govuk-spacing(3) / 2);
190
190
  color: govuk-colour("dark-grey", $legacy: "grey-1");
191
191
 
192
192
  @include govuk-media-query($from: tablet) {
@@ -196,7 +196,7 @@
196
196
 
197
197
  .gem-c-image-card__description {
198
198
  @include govuk-font($size: 19);
199
- padding-top: (govuk-spacing(3) / 2);
199
+ padding-top: calc(govuk-spacing(3) / 2);
200
200
  word-wrap: break-word;
201
201
  }
202
202
 
@@ -204,7 +204,7 @@
204
204
  @include govuk-font($size: 19);
205
205
  position: relative;
206
206
  z-index: 2;
207
- padding: (govuk-spacing(3) / 2) 0 0 0;
207
+ padding: calc(govuk-spacing(3) / 2) 0 0 0;
208
208
  margin: 0;
209
209
  list-style: none;
210
210
 
@@ -46,7 +46,7 @@ $govuk-modal-wide-breakpoint: $govuk-page-width + $govuk-modal-margin * 2 + $gov
46
46
  bottom: inherit;
47
47
  left: inherit;
48
48
  width: auto;
49
- max-width: $govuk-page-width * 2 / 3;
49
+ max-width: calc($govuk-page-width * (2 / 3));
50
50
  height: auto;
51
51
  margin: $govuk-modal-margin auto;
52
52
  border: $govuk-border-width-form-element solid $govuk-input-border-colour;
@@ -34,7 +34,7 @@ $gem-c-print-link-background-height: 18px;
34
34
  }
35
35
 
36
36
  .gem-c-print-link__link {
37
- box-shadow: inset 0 0 0 1px $govuk-border-colour;
37
+ box-shadow: inset 0 0 0 1px govuk-colour("dark-grey");
38
38
 
39
39
  &:focus {
40
40
  border: 0;
@@ -43,7 +43,7 @@ $gem-c-print-link-background-height: 18px;
43
43
  }
44
44
 
45
45
  .gem-c-print-link__button {
46
- border: 1px solid $govuk-border-colour;
46
+ border: 1px solid govuk-colour("dark-grey");
47
47
  color: $govuk-link-colour;
48
48
  cursor: pointer;
49
49
  margin: govuk-spacing(0);
@@ -108,7 +108,7 @@ $large-input-size: 50px;
108
108
 
109
109
  @mixin icon-positioning($container-size) {
110
110
  $icon-dimension: 20px;
111
- $icon-position: ($container-size - $icon-dimension) / 2;
111
+ $icon-position: calc(($container-size - $icon-dimension) / 2);
112
112
 
113
113
  display: block;
114
114
  pointer-events: none;
@@ -18,7 +18,7 @@ $share-button-height: 30px;
18
18
  padding-left: ($share-button-width + govuk-spacing(2));
19
19
  padding-right: govuk-spacing(2);
20
20
  margin-bottom: govuk-spacing(2);
21
- font-size: $share-button-height / 2;
21
+ font-size: calc($share-button-height / 2);
22
22
  }
23
23
 
24
24
  .gem-c-share-links__link {
@@ -3,7 +3,7 @@
3
3
  .gem-c-single-page-notification-button__submit {
4
4
  padding: govuk-spacing(2);
5
5
  margin: govuk-spacing(0);
6
- border: 1px solid $govuk-border-colour;
6
+ border: 1px solid govuk-colour("dark-grey");
7
7
  color: $govuk-link-colour;
8
8
  cursor: pointer;
9
9
  background: none;
@@ -32,7 +32,7 @@
32
32
  }
33
33
 
34
34
  .gem-c-step-nav-related__pretitle {
35
- margin-bottom: govuk-spacing(6) / 4;
35
+ margin-bottom: calc(govuk-spacing(6) / 4);
36
36
  }
37
37
  }
38
38
 
@@ -260,8 +260,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
260
260
  z-index: 6;
261
261
  bottom: 0;
262
262
  left: 0;
263
- margin-left: $number-circle-size / 4;
264
- width: $number-circle-size / 2;
263
+ margin-left: calc($number-circle-size / 4);
264
+ width: calc($number-circle-size / 2);
265
265
  height: 0;
266
266
  border-bottom: solid $stroke-width govuk-colour("mid-grey", $legacy: "grey-2");
267
267
  }
@@ -278,8 +278,8 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
278
278
  .gem-c-step-nav--large & {
279
279
  @include govuk-media-query($from: tablet) {
280
280
  &::before {
281
- margin-left: $number-circle-size-large / 4;
282
- width: $number-circle-size-large / 2;
281
+ margin-left: calc($number-circle-size-large / 4);
282
+ width: calc($number-circle-size-large / 2);
283
283
  }
284
284
 
285
285
  &::after {
@@ -508,9 +508,9 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
508
508
  z-index: 5;
509
509
  top: .6em; // position the dot to align with the first row of text in the link
510
510
  left: -(govuk-spacing(6) + govuk-spacing(3));
511
- margin-top: -($stroke-width / 2);
512
- margin-left: ($number-circle-size / 2);
513
- width: $number-circle-size / 2;
511
+ margin-top: - calc($stroke-width / 2);
512
+ margin-left: calc($number-circle-size / 2);
513
+ width: calc($number-circle-size / 2);
514
514
  height: $stroke-width;
515
515
  background: govuk-colour("black");
516
516
  }
@@ -519,7 +519,7 @@ $top-border: solid 1px govuk-colour("mid-grey", $legacy: "grey-3");
519
519
  @include govuk-media-query($from: tablet) {
520
520
  &::before {
521
521
  left: -(govuk-spacing(9));
522
- margin-left: ($number-circle-size-large / 2);
522
+ margin-left: calc($number-circle-size-large / 2);
523
523
  }
524
524
  }
525
525
  }
@@ -8,7 +8,7 @@ $table-header-background-colour: govuk-colour("light-grey", $legacy: "grey-3");
8
8
  $sort-link-active-colour: govuk-colour("white");
9
9
  $sort-link-arrow-size: 14px;
10
10
  $sort-link-arrow-size-small: 8px;
11
- $sort-link-arrow-spacing: $sort-link-arrow-size / 2;
11
+ $sort-link-arrow-spacing: calc($sort-link-arrow-size / 2);
12
12
  $table-row-hover-background-colour: rgba(43, 140, 196, .2);
13
13
  $table-row-even-background-colour: govuk-colour("light-grey", $legacy: "grey-4");
14
14
 
@@ -23,10 +23,10 @@
23
23
  padding-left: $icon-size;
24
24
 
25
25
  // Center the icon around the baseline
26
- padding-top: ($icon-size - $line-height-mobile) / 2;
26
+ padding-top: calc(($icon-size - $line-height-mobile) / 2);
27
27
 
28
28
  @include govuk-media-query($from: tablet) {
29
- padding-top: ($icon-size - $line-height-tablet) / 2;
29
+ padding-top: calc(($icon-size - $line-height-tablet) / 2);
30
30
  }
31
31
 
32
32
  p {
@@ -3,7 +3,7 @@
3
3
 
4
4
  @include govuk-font($size: 16);
5
5
 
6
- $gutter-two-thirds: $govuk-gutter - ($govuk-gutter / 3);
6
+ $gutter-two-thirds: $govuk-gutter - calc($govuk-gutter / 3);
7
7
 
8
8
  ol,
9
9
  ul,
@@ -14,7 +14,6 @@ module GovukPublishingComponents
14
14
  info-frontend
15
15
  service-manual-frontend
16
16
  smart-answers
17
- whitehall
18
17
  ]
19
18
 
20
19
  @static_data = find_static(results)
@@ -7,6 +7,7 @@
7
7
  hide_order_copy_link ||= false
8
8
  attributes = []
9
9
  data_attributes ||= {}
10
+ details_ga4_attributes ||= {}
10
11
  shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
11
12
 
12
13
  container_class_names = %w[gem-c-attachment govuk-!-display-none-print]
@@ -118,7 +119,8 @@
118
119
  <% if attachment.alternative_format_contact_email %>
119
120
  <%= tag.p t("components.attachment.request_format_text"), class: "gem-c-attachment__metadata" %>
120
121
  <%= render "govuk_publishing_components/components/details", {
121
- title: t("components.attachment.request_format_cta")
122
+ title: t("components.attachment.request_format_cta"),
123
+ ga4_attributes: details_ga4_attributes,
122
124
  } do %>
123
125
  <%= t("components.attachment.request_format_details_html", alternative_format_contact_email: attachment.alternative_format_contact_email) %>
124
126
  <% end %>
@@ -2,11 +2,21 @@
2
2
  add_gem_component_stylesheet("back-link")
3
3
 
4
4
  text ||= t('components.back_link.back')
5
- data_attributes ||= nil
5
+ data_attributes ||= {}
6
+ disable_ga4 ||= false
7
+
8
+ component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
9
+ component_helper.add_class("gem-c-back-link govuk-back-link govuk-!-display-none-print")
10
+ unless disable_ga4
11
+ ga4_link = {
12
+ event_name: "navigation",
13
+ type: "back",
14
+ url: href,
15
+ }
16
+ component_helper.add_data_attribute({ module: "ga4-link-tracker" })
17
+ component_helper.add_data_attribute({ ga4_link: ga4_link })
18
+ end
6
19
  %>
7
- <%= link_to(
8
- text,
9
- href,
10
- class: %w(gem-c-back-link govuk-back-link govuk-!-display-none-print),
11
- data: data_attributes
12
- ) %>
20
+ <%= tag.a(**component_helper.all_attributes.merge!({ href: href })) do %>
21
+ <%= text %>
22
+ <% end %>
@@ -34,7 +34,7 @@
34
34
  disable_ga4 ||= false
35
35
  %>
36
36
 
37
- <div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>">
37
+ <div id="<%= id %>" class="<%= css_classes.join(' ') %>" data-module="cookie-banner" data-nosnippet role="region" aria-label="<%= title %>" hidden>
38
38
  <div class="govuk-cookie-banner__message govuk-width-container">
39
39
  <div class="govuk-grid-row">
40
40
  <div class="govuk-grid-column-two-thirds">
@@ -9,9 +9,24 @@
9
9
  classes << direction_class if direction_class
10
10
  classes << "disable-youtube" if disable_youtube_expansions
11
11
  classes << "gem-c-govspeak--inverse" if inverse
12
+
13
+ disable_ga4 ||= false
14
+
15
+ data_modules = "govspeak"
16
+ data_modules << " ga4-link-tracker" unless disable_ga4
17
+ data_attributes = { module: data_modules }
18
+
19
+ unless disable_ga4
20
+ data_attributes.merge!({
21
+ ga4_track_links_only: "",
22
+ ga4_limit_to_element_class: "call-to-action, info-notice, help-notice, advisory",
23
+ ga4_link: { "event_name": "navigation", "type": "callout" }.to_json,
24
+ })
25
+ end
26
+
12
27
  %>
13
28
 
14
- <div class="gem-c-govspeak govuk-govspeak <%= classes.join(" ") %>" data-module="govspeak">
29
+ <%= tag.div(class: "gem-c-govspeak govuk-govspeak " + classes.join(" "), data: data_attributes) do %>
15
30
  <% if local_assigns.include?(:content) %>
16
31
  <% if content.html_safe? %>
17
32
  <%= content %>
@@ -32,4 +47,4 @@
32
47
  <% elsif block_given? %>
33
48
  <%= yield %>
34
49
  <% end %>
35
- </div>
50
+ <% end %>
@@ -99,12 +99,10 @@
99
99
  <%= javascript_tag nonce: true do -%>
100
100
  document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
101
101
  <% end -%>
102
+ <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
102
103
  <%= render "govuk_publishing_components/components/skip_link", {
103
104
  href: "#content"
104
105
  } %>
105
-
106
- <%= render "govuk_publishing_components/components/cookie_banner", layout_helper.cookie_banner_data %>
107
-
108
106
  <% unless omit_header %>
109
107
  <% if show_explore_header %>
110
108
  <% if homepage %>
@@ -5,6 +5,7 @@
5
5
  title ||= false
6
6
  track_as_sharing ||= false
7
7
  track_as_follow ||= false
8
+ ga4_data ||= {}
8
9
  stacked ||= false
9
10
  columns ||= false
10
11
 
@@ -57,15 +58,15 @@
57
58
  'index_link': index + 1,
58
59
  'index_total': links.length,
59
60
  'text': link[:icon],
60
- }
61
+ }.merge(ga4_data)
61
62
  end
62
63
  if track_as_follow
63
64
  ga4_link_data = {
64
65
  'event_name': 'navigation',
65
66
  'type': 'follow us',
66
67
  'index_link': index + 1,
67
- 'index_total': links.length
68
- }
68
+ 'index_total': links.length,
69
+ }.merge(ga4_data)
69
70
  end
70
71
  %>
71
72
  <%
@@ -76,6 +76,19 @@ examples:
76
76
  content_type: application/pdf
77
77
  file_size: 20000
78
78
  alternative_format_contact_email: defra.helpline@defra.gsi.gov.uk
79
+ with_contact_email_and_ga4_tracking:
80
+ description: The attachment component can contain the details component as shown. The details component provides all of its own GA4 tracking, but in most situations also requires an `index_section_count` attribute to be passed manually. This can be done via the attachment component as shown (along with any other needed GA4 attributes).
81
+ data:
82
+ attachment:
83
+ title: "Department for Transport information asset register"
84
+ url: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/747661/department-for-transport-information-asset-register.csv
85
+ filename: department-for-transport-information-asset-register.csv
86
+ content_type: application/pdf
87
+ file_size: 20000
88
+ alternative_format_contact_email: defra.helpline@defra.gsi.gov.uk
89
+ details_ga4_attributes: {
90
+ index_section_count: 4
91
+ }
79
92
  with_data_attributes:
80
93
  data:
81
94
  attachment:
@@ -6,6 +6,7 @@ shared_accessibility_criteria:
6
6
  - link
7
7
  govuk_frontend_components:
8
8
  - back-link
9
+ uses_component_wrapper_helper: true
9
10
  examples:
10
11
  default:
11
12
  data:
@@ -14,8 +15,9 @@ examples:
14
15
  data:
15
16
  text: 'Back to document list'
16
17
  href: '#'
17
- with_data_attributes:
18
+ without_ga4_tracking:
19
+ description: |
20
+ Disables GA4 tracking on the component. Tracking is enabled by default. This adds a data module and data-attributes with JSON data. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
18
21
  data:
19
22
  href: '#'
20
- data_attributes:
21
- an_attribute: the value
23
+ disable_ga4: true
@@ -1,11 +1,11 @@
1
1
  name: Cookie banner
2
2
  description: Help users manage their personal data by telling them when you store cookies on their device.
3
3
  body: |
4
- By default the cookie banner is shown to all users with just a link to the settings page. If JavaScript is on this is enhanced to show accept/reject buttons if preferences aren't set, or to hide the banner if they are.
4
+ By default the cookie banner is hidden. If JavaScript is enabled, the banner is displayed if cookie preferences are not set. The banner will stay hidden if cookie preferences are already set.
5
5
 
6
6
  Setting `data-hide-cookie-banner="true"` on any link inside the banner will overwrite the default action and when clicked will dismiss the cookie banner for a period of 365 days (approx. 1 year).
7
7
 
8
- If the examples below are not showing the banner, make sure the `cookies_preferences_set` cookie is not present or is set to false.
8
+ If the examples below are not showing the banner, make sure JS is enabled, and the `cookies_preferences_set` cookie is not present or is set to false.
9
9
  accessibility_criteria: |
10
10
  Text in the cookie banner must be clear and unambiguous and should provide a way to dismiss the message.
11
11
  shared_accessibility_criteria:
@@ -914,3 +914,12 @@ examples:
914
914
  <p>Deforested area. Credit: Blue Ventures-Garth Cripps</p>
915
915
  </figcaption>
916
916
  </figure>
917
+ without_ga4_tracking:
918
+ description: |
919
+ Disables GA4 tracking on the component. Tracking is enabled by default. This adds a data module and data-attributes with JSON data. See the [ga4-link-tracker documentation](https://github.com/alphagov/govuk_publishing_components/blob/main/docs/analytics-ga4/ga4-link-tracker.md) for more information.
920
+ data:
921
+ block: |
922
+ <p>
923
+ <a href='https://www.gov.uk'>Hello World</a>
924
+ </p>
925
+ disable_ga4: true
@@ -107,9 +107,16 @@ examples:
107
107
  }
108
108
  ]
109
109
  track_as_sharing_links:
110
- description: Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA. If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA. In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
110
+ description: |
111
+ Where the component is used to allow users to share content on social media, tracking can be added that uses [Social Interactions](https://developers.google.com/analytics/devguides/collection/analyticsjs/social-interactions) in UA.
112
+ If this option is not included, it is assumed the component is simply linking to social media pages and the extra options are omitted from the tracking call in UA.
113
+ In GA4, when this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
114
+ Most of the tracking values are added by default, but if you need to add more GA4 values or override defaults, you can pass a ga4_data object.
111
115
  data:
112
116
  track_as_sharing: true
117
+ ga4_data: {
118
+ optional_extra_values: "go here"
119
+ }
113
120
  links: [
114
121
  {
115
122
  href: 'share',
@@ -123,9 +130,15 @@ examples:
123
130
  },
124
131
  ]
125
132
  track_as_follow_links:
126
- description: Where the component is used to allow users to follow us on social media, tracking can be added. When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
133
+ description: |
134
+ Where the component is used to allow users to follow us on social media, tracking can be added.
135
+ When this is set to true, a JSON is added to a data-attribute called data-ga4-link, which is detected by ga4-link-tracker.js and pushed to the dataLayer.
136
+ Most of the tracking values are added by default, but if you need to add more GA4 values or override defaults, you can pass a ga4_data object.
127
137
  data:
128
138
  track_as_follow: true
139
+ ga4_data: {
140
+ optional_extra_values: "go here"
141
+ }
129
142
  links: [
130
143
  {
131
144
  href: 'follow',
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "37.2.4".freeze
2
+ VERSION = "37.3.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: 37.2.4
4
+ version: 37.3.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: 2024-01-24 00:00:00.000000000 Z
11
+ date: 2024-02-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: govuk_app_config
@@ -1497,7 +1497,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
1497
1497
  - !ruby/object:Gem::Version
1498
1498
  version: '0'
1499
1499
  requirements: []
1500
- rubygems_version: 3.5.5
1500
+ rubygems_version: 3.5.6
1501
1501
  signing_key:
1502
1502
  specification_version: 4
1503
1503
  summary: A gem to document components in GOV.UK frontend applications