govuk_publishing_components 31.1.1 → 31.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-core.js +1 -1
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-link-tracker.js +91 -14
- data/app/assets/javascripts/govuk_publishing_components/analytics-ga4/ga4-schemas.js +3 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +81 -73
- data/app/views/govuk_publishing_components/components/_share_links.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb +10 -8
- data/app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb +11 -9
- data/app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb +44 -38
- data/config/locales/en.yml +1 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +3 -3
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 91b9d62f7f0bee126ffb2fa60dcca311f06489100cdc686a4c4404f54ae4c4e3
|
4
|
+
data.tar.gz: df1410de982d60ae348bad56b9dda41ea67666d1c4117b5f61260998aaac9bea
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 3ce3821fa73df20270408a383dba70232b5312628fe31299bc8b3b6577dc786da3e1afe24e72dcd38a1217e04739563b2a09bde9f4a8228f50c1a63c656ca7b9
|
7
|
+
data.tar.gz: 8ea5b431d7ed318852c4c1fdd1991b09f28d8abca00d8732b5cb6cf4de698a1a66a98fb5298ac49769666867d5641275e284fff04d8f12e950ee22c0809a4359
|
@@ -22,6 +22,7 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
|
|
22
22
|
} else {
|
23
23
|
// initialise GTM
|
24
24
|
window.dataLayer = window.dataLayer || []
|
25
|
+
window.dataLayer.push({ 'gtm.blocklist': ['customPixels', 'customScripts', 'html', 'nonGoogleScripts'] })
|
25
26
|
window.dataLayer.push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' })
|
26
27
|
|
27
28
|
var auth = window.GOVUK.analyticsGa4.vars.auth || ''
|
@@ -36,7 +37,6 @@ window.GOVUK.analyticsGa4 = window.GOVUK.analyticsGa4 || {};
|
|
36
37
|
this.googleSrc = 'https://www.googletagmanager.com/gtm.js?id=' + window.GOVUK.analyticsGa4.vars.id + auth + preview
|
37
38
|
newScript.src = this.googleSrc
|
38
39
|
firstScript.parentNode.insertBefore(newScript, firstScript)
|
39
|
-
window.dataLayer.push({ 'gtm.blocklist': ['customPixels', 'customScripts', 'html', 'nonGoogleScripts'] })
|
40
40
|
}
|
41
41
|
},
|
42
42
|
|
@@ -44,17 +44,15 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
|
|
44
44
|
return
|
45
45
|
}
|
46
46
|
|
47
|
-
var clickData = {}
|
48
47
|
var href = element.getAttribute('href')
|
49
48
|
|
50
49
|
if (!href) {
|
51
50
|
return
|
52
51
|
}
|
53
|
-
|
52
|
+
var clickData = {}
|
54
53
|
var linkAttributes = element.getAttribute('data-ga4-link')
|
55
54
|
if (linkAttributes) {
|
56
|
-
|
57
|
-
clickData = window.GOVUK.extendObject(clickData, linkAttributes)
|
55
|
+
clickData = JSON.parse(linkAttributes)
|
58
56
|
|
59
57
|
/* Since external links can't be determined in the template, we use populated-via-js as a signal
|
60
58
|
for our JavaScript to determine this value. */
|
@@ -62,41 +60,47 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
|
|
62
60
|
clickData.external = this.isExternalLink(clickData.url) ? 'true' : 'false'
|
63
61
|
}
|
64
62
|
|
65
|
-
if (clickData.
|
66
|
-
clickData.
|
63
|
+
if (clickData.method === 'populated-via-js') {
|
64
|
+
clickData.method = this.getClickType(event)
|
67
65
|
}
|
68
66
|
|
69
67
|
if (clickData.index) {
|
70
|
-
clickData.index = parseInt(
|
68
|
+
clickData.index = parseInt(clickData.index)
|
71
69
|
}
|
72
70
|
|
73
71
|
if (clickData.index_total) {
|
74
|
-
clickData.index_total = parseInt(
|
72
|
+
clickData.index_total = parseInt(clickData.index_total)
|
75
73
|
}
|
76
74
|
} else if (this.isMailToLink(href)) {
|
77
75
|
clickData.event_name = 'navigation'
|
78
76
|
clickData.type = 'email'
|
79
77
|
clickData.external = 'true'
|
80
78
|
clickData.url = href
|
81
|
-
clickData.text = element.textContent
|
82
|
-
clickData.
|
79
|
+
clickData.text = this.removeLinesAndExtraSpaces(element.textContent)
|
80
|
+
clickData.method = this.getClickType(event)
|
83
81
|
} else if (this.isDownloadLink(href)) {
|
84
82
|
clickData.event_name = 'file_download'
|
85
83
|
clickData.type = this.isPreviewLink(href) ? 'preview' : 'generic download'
|
86
84
|
clickData.external = this.isExternalLink(href) ? 'true' : 'false'
|
87
85
|
clickData.url = href
|
88
|
-
clickData.text = element.textContent
|
89
|
-
clickData.
|
86
|
+
clickData.text = this.removeLinesAndExtraSpaces(element.textContent)
|
87
|
+
clickData.method = this.getClickType(event)
|
90
88
|
} else if (this.isExternalLink(href)) {
|
91
89
|
clickData.event_name = 'navigation'
|
92
90
|
clickData.type = 'generic link'
|
93
91
|
clickData.external = 'true'
|
94
92
|
clickData.url = href
|
95
|
-
clickData.text = element.textContent
|
96
|
-
clickData.
|
93
|
+
clickData.text = this.removeLinesAndExtraSpaces(element.textContent)
|
94
|
+
clickData.method = this.getClickType(event)
|
97
95
|
}
|
98
96
|
|
99
97
|
if (Object.keys(clickData).length > 0) {
|
98
|
+
if (clickData.url) {
|
99
|
+
clickData.url = this.removeCrossDomainParams(clickData.url)
|
100
|
+
clickData.link_domain = this.populateLinkDomain(clickData.url)
|
101
|
+
clickData.link_path_parts = this.populateLinkPathParts(clickData.url)
|
102
|
+
}
|
103
|
+
|
100
104
|
var schema = new window.GOVUK.analyticsGa4.Schemas().eventSchema()
|
101
105
|
schema.event = 'event_data'
|
102
106
|
|
@@ -112,6 +116,49 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
|
|
112
116
|
}
|
113
117
|
},
|
114
118
|
|
119
|
+
populateLinkPathParts: function (href) {
|
120
|
+
var path = ''
|
121
|
+
if (this.hrefIsRelative(href) || this.isMailToLink(href)) {
|
122
|
+
path = href
|
123
|
+
} else {
|
124
|
+
// This regex matches a protocol and domain name at the start of a string such as https://www.gov.uk, http://gov.uk, //gov.uk
|
125
|
+
path = href.replace(/^(http:||https:)?(\/\/)([^\/]*)/, '') // eslint-disable-line no-useless-escape
|
126
|
+
}
|
127
|
+
|
128
|
+
if (path === '/' || path.length === 0) {
|
129
|
+
return
|
130
|
+
}
|
131
|
+
|
132
|
+
/*
|
133
|
+
This will create an object with 5 keys that are indexes ("1", "2", etc.)
|
134
|
+
The values will be each part of the link path split every 100 characters, or undefined.
|
135
|
+
For example: {"1": "/hello/world/etc...", "2": "/more/path/text...", "3": undefined, "4": undefined, "5": undefined}
|
136
|
+
Undefined values are needed to override the persistent object in GTM so that any values from old pushes are overwritten.
|
137
|
+
*/
|
138
|
+
var parts = path.match(/.{1,100}/g)
|
139
|
+
var obj = {}
|
140
|
+
for (var i = 0; i < 5; i++) {
|
141
|
+
obj[(i + 1).toString()] = parts[i]
|
142
|
+
}
|
143
|
+
return obj
|
144
|
+
},
|
145
|
+
|
146
|
+
populateLinkDomain: function (href) {
|
147
|
+
// We always want mailto links to have an undefined link_domain
|
148
|
+
if (this.isMailToLink(href)) {
|
149
|
+
return undefined
|
150
|
+
}
|
151
|
+
|
152
|
+
if (this.hrefIsRelative(href)) {
|
153
|
+
return this.getProtocol() + '//' + this.getHostname()
|
154
|
+
} else {
|
155
|
+
// This regex matches a protocol and domain name at the start of a string such as https://www.gov.uk, http://gov.uk, //gov.uk
|
156
|
+
var domainRegex = /^(http:||https:)?(\/\/)([^\/]*)/ // eslint-disable-line no-useless-escape
|
157
|
+
var domain = domainRegex.exec(href)[0]
|
158
|
+
return domain
|
159
|
+
}
|
160
|
+
},
|
161
|
+
|
115
162
|
appendDomainsWithoutWWW: function (domainsArrays) {
|
116
163
|
// Add domains with www. removed, in case site hrefs are marked up without www. included.
|
117
164
|
for (var i = 0; i < domainsArrays.length; i++) {
|
@@ -123,6 +170,13 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
|
|
123
170
|
}
|
124
171
|
},
|
125
172
|
|
173
|
+
removeLinesAndExtraSpaces: function (text) {
|
174
|
+
text = text.trim()
|
175
|
+
text = text.replace(/(\r\n|\n|\r)/gm, ' ') // Replace line breaks with 1 space
|
176
|
+
text = text.replace(/\s+/g, ' ') // Replace instances of 2+ spaces with 1 space
|
177
|
+
return text
|
178
|
+
},
|
179
|
+
|
126
180
|
getClickType: function (event) {
|
127
181
|
switch (event.type) {
|
128
182
|
case 'click':
|
@@ -236,6 +290,10 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
|
|
236
290
|
return string.substring(0, stringToFind.length) === stringToFind
|
237
291
|
},
|
238
292
|
|
293
|
+
stringEndsWith: function (string, stringToFind) {
|
294
|
+
return string.substring(string.length - stringToFind.length, string.length) === stringToFind
|
295
|
+
},
|
296
|
+
|
239
297
|
hrefIsRelative: function (href) {
|
240
298
|
// Checks that a link is relative, but is not a protocol relative url
|
241
299
|
return href[0] === '/' && href[1] !== '/'
|
@@ -247,6 +305,25 @@ window.GOVUK.analyticsGa4.analyticsModules = window.GOVUK.analyticsGa4.analytics
|
|
247
305
|
|
248
306
|
getHostname: function () {
|
249
307
|
return window.location.hostname
|
308
|
+
},
|
309
|
+
|
310
|
+
getProtocol: function () {
|
311
|
+
return window.location.protocol
|
312
|
+
},
|
313
|
+
|
314
|
+
removeCrossDomainParams: function (href) {
|
315
|
+
if (href.indexOf('_ga') !== -1 || href.indexOf('_gl') !== -1) {
|
316
|
+
// _ga & _gl are values needed for cross domain tracking, but we don't want them included in our click tracking.
|
317
|
+
href = href.replaceAll(/_g[al]=([^&]*)/g, '')
|
318
|
+
|
319
|
+
// The following code cleans up inconsistencies such as gov.uk/&&, gov.uk/?&hello=world, gov.uk/?, and gov.uk/&.
|
320
|
+
href = href.replaceAll(/(&&)+/g, '&')
|
321
|
+
href = href.replace('?&', '?')
|
322
|
+
if (this.stringEndsWith(href, '?') || this.stringEndsWith(href, '&')) {
|
323
|
+
href = href.substring(0, href.length - 1)
|
324
|
+
}
|
325
|
+
}
|
326
|
+
return href
|
250
327
|
}
|
251
328
|
}
|
252
329
|
|
@@ -2,11 +2,20 @@
|
|
2
2
|
background: govuk-colour("white");
|
3
3
|
margin-top: govuk-spacing(6);
|
4
4
|
|
5
|
-
@include govuk-media-query($from:
|
5
|
+
@include govuk-media-query($from: desktop) {
|
6
6
|
margin-top: govuk-spacing(9);
|
7
|
-
border-bottom: 1px solid govuk-colour("white");
|
8
7
|
}
|
9
8
|
|
9
|
+
// New design has the box flush with edges of smaller screens
|
10
|
+
// We need to compensate for `govuk-width-container` margins:
|
11
|
+
@include govuk-media-query($until: tablet) {
|
12
|
+
margin-right: govuk-spacing(-3);
|
13
|
+
margin-left: govuk-spacing(-3);
|
14
|
+
}
|
15
|
+
@include govuk-media-query($from: tablet, $until: desktop) {
|
16
|
+
margin-right: govuk-spacing(-6);
|
17
|
+
margin-left: govuk-spacing(-6);
|
18
|
+
}
|
10
19
|
// Scoped to the feedback component temporarily
|
11
20
|
[hidden] {
|
12
21
|
// stylelint-disable-next-line declaration-no-important
|
@@ -14,92 +23,88 @@
|
|
14
23
|
}
|
15
24
|
}
|
16
25
|
|
17
|
-
.gem-c-feedback__prompt
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
26
|
+
.gem-c-feedback__prompt {
|
27
|
+
background-color: govuk-colour("light-grey");
|
28
|
+
color: govuk-colour("black");
|
29
|
+
border-top: 1px solid $govuk-border-colour;
|
30
|
+
outline: 0;
|
31
|
+
}
|
22
32
|
|
33
|
+
.gem-c-feedback__prompt-content {
|
34
|
+
display: flex;
|
35
|
+
flex-direction: column;
|
36
|
+
padding: 0 govuk-spacing(3);
|
23
37
|
@include govuk-media-query($from: tablet) {
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
border-bottom: 0;
|
38
|
+
flex-direction: row;
|
39
|
+
align-items: center;
|
40
|
+
justify-content: space-between;
|
28
41
|
}
|
29
42
|
}
|
30
43
|
|
31
|
-
.gem-c-feedback__prompt-questions
|
32
|
-
text-align:
|
33
|
-
|
44
|
+
.gem-c-feedback__prompt-questions {
|
45
|
+
text-align: left;
|
46
|
+
padding: govuk-spacing(4) 0;
|
34
47
|
@include govuk-media-query($from: tablet) {
|
35
|
-
|
36
|
-
vertical-align: bottom;
|
37
|
-
float: none;
|
48
|
+
margin: 0 govuk-spacing(3);
|
38
49
|
}
|
39
50
|
}
|
40
51
|
|
41
|
-
.gem-c-feedback__prompt {
|
42
|
-
|
43
|
-
background-color: govuk-colour("blue");
|
44
|
-
color: govuk-colour("white");
|
45
|
-
outline: 0;
|
46
|
-
|
52
|
+
.gem-c-feedback__prompt-questions--something-is-wrong {
|
53
|
+
border-top: 1px solid $govuk-border-colour;
|
47
54
|
@include govuk-media-query($from: tablet) {
|
48
|
-
|
49
|
-
|
50
|
-
|
55
|
+
border: 0;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
.gem-c-feedback__prompt-question-answer {
|
60
|
+
display: flex;
|
61
|
+
align-items: center;
|
62
|
+
@include govuk-media-query($until: mobile) {
|
63
|
+
justify-content: center;
|
64
|
+
flex-wrap: wrap;
|
51
65
|
}
|
52
66
|
}
|
53
67
|
|
54
68
|
.gem-c-feedback__prompt-question,
|
55
69
|
.gem-c-feedback__prompt-success {
|
56
70
|
@include govuk-font(19, $weight: bold);
|
57
|
-
|
58
71
|
@include govuk-media-query($from: tablet) {
|
59
72
|
@include govuk-font(16, $weight: bold);
|
60
73
|
}
|
61
74
|
}
|
62
75
|
|
63
76
|
.gem-c-feedback__prompt-question {
|
64
|
-
|
65
|
-
|
66
|
-
margin: govuk-spacing(2) govuk-spacing(4);
|
77
|
+
margin: 0;
|
78
|
+
padding-bottom: govuk-spacing(2);
|
67
79
|
|
68
80
|
&:focus {
|
69
81
|
outline: 0;
|
70
82
|
}
|
71
|
-
|
72
|
-
|
73
|
-
margin-
|
74
|
-
margin-top: 0;
|
75
|
-
display: block;
|
76
|
-
}
|
77
|
-
|
78
|
-
// This custom media-query is to account for some awkward positioning where the yes and no buttons are too big to sit inline with the prompt question
|
79
|
-
@include govuk-media-query($from: 950px) {
|
80
|
-
display: inline-block;
|
81
|
-
margin-top: govuk-spacing(2);
|
83
|
+
@include govuk-media-query($from: mobile) {
|
84
|
+
padding-bottom: 0;
|
85
|
+
margin-right: govuk-spacing(2);
|
82
86
|
}
|
83
87
|
}
|
84
88
|
|
85
89
|
.gem-c-feedback__prompt-link {
|
86
90
|
@include govuk-font(19);
|
87
91
|
background: transparent;
|
88
|
-
|
89
|
-
|
90
|
-
|
92
|
+
color: govuk-colour("black");
|
93
|
+
box-shadow: 0 3px 0 govuk-colour("black");
|
94
|
+
border: 1px govuk-colour("black") solid;
|
95
|
+
margin-bottom: 0;
|
96
|
+
width: 100%;
|
91
97
|
|
92
98
|
&:hover {
|
93
99
|
// backup style for browsers that don't support rgba
|
94
|
-
background: govuk-colour("
|
100
|
+
background: govuk-colour("mid-grey");
|
95
101
|
background: rgba(govuk-colour("black"), .2);
|
102
|
+
color: govuk-colour("black");
|
96
103
|
}
|
97
104
|
|
98
|
-
|
99
|
-
|
100
|
-
margin-bottom: 0;
|
105
|
+
&:active:focus:not(:hover) {
|
106
|
+
background: govuk-colour("yellow");
|
101
107
|
}
|
102
|
-
|
103
108
|
@include govuk-media-query($from: tablet) {
|
104
109
|
@include govuk-font(16);
|
105
110
|
}
|
@@ -108,42 +113,44 @@
|
|
108
113
|
.gem-c-feedback__email-link,
|
109
114
|
.gem-c-feedback__prompt-link {
|
110
115
|
position: relative;
|
116
|
+
|
117
|
+
&:focus:not(:active):not(:hover) {
|
118
|
+
border-color: govuk-colour("black");
|
119
|
+
}
|
120
|
+
|
121
|
+
&:focus,
|
122
|
+
&:active {
|
123
|
+
color: $govuk-focus-text-colour;
|
124
|
+
}
|
111
125
|
}
|
112
126
|
|
113
127
|
.gem-c-feedback__prompt-link:link,
|
114
128
|
.gem-c-feedback__prompt-link:visited {
|
115
|
-
color: govuk-colour("
|
129
|
+
color: govuk-colour("black");
|
116
130
|
|
117
|
-
&:focus
|
131
|
+
&:focus,
|
132
|
+
&:active {
|
118
133
|
color: $govuk-focus-text-colour;
|
119
134
|
}
|
120
135
|
}
|
121
136
|
|
122
137
|
.gem-c-feedback__option-list {
|
138
|
+
display: flex;
|
123
139
|
list-style-type: none;
|
124
140
|
margin: 0;
|
125
141
|
padding: 0;
|
126
|
-
margin-top: govuk-spacing(2);
|
127
|
-
|
128
|
-
@include govuk-media-query($from: mobile) {
|
129
|
-
display: inline-block;
|
130
|
-
margin-right: govuk-spacing(2);
|
131
|
-
}
|
132
|
-
|
133
|
-
@include govuk-media-query($from: tablet) {
|
134
|
-
margin-top: 0;
|
135
|
-
}
|
136
142
|
}
|
137
143
|
|
138
144
|
.gem-c-feedback__option-list-item {
|
139
|
-
|
140
|
-
|
145
|
+
&:last-child {
|
146
|
+
margin-left: govuk-spacing(2);
|
141
147
|
}
|
142
148
|
}
|
143
149
|
|
144
|
-
.gem-c-feedback__option-list-item
|
145
|
-
|
146
|
-
|
150
|
+
.gem-c-feedback__option-list-item .gem-c-feedback__prompt-link {
|
151
|
+
min-width: 100px;
|
152
|
+
@include govuk-media-query($until: desktop) {
|
153
|
+
min-width: 80px;
|
147
154
|
}
|
148
155
|
}
|
149
156
|
|
@@ -158,7 +165,7 @@
|
|
158
165
|
outline: solid 3px $govuk-focus-colour;
|
159
166
|
}
|
160
167
|
|
161
|
-
@include govuk-media-query($from:
|
168
|
+
@include govuk-media-query($from: desktop) {
|
162
169
|
border-width: $govuk-border-width;
|
163
170
|
}
|
164
171
|
|
@@ -190,11 +197,11 @@
|
|
190
197
|
}
|
191
198
|
|
192
199
|
.gem-c-feedback__form {
|
193
|
-
padding: govuk-spacing(3)
|
194
|
-
border-top:
|
200
|
+
padding: govuk-spacing(3);
|
201
|
+
border-top: 1px solid $govuk-border-colour;
|
195
202
|
|
196
203
|
@include govuk-media-query($from: tablet) {
|
197
|
-
padding: govuk-spacing(6)
|
204
|
+
padding: govuk-spacing(6);
|
198
205
|
}
|
199
206
|
}
|
200
207
|
|
@@ -217,8 +224,10 @@
|
|
217
224
|
}
|
218
225
|
|
219
226
|
.gem-c-feedback__close {
|
220
|
-
|
221
|
-
|
227
|
+
margin: 0 govuk-spacing(2);
|
228
|
+
@include govuk-media-query($until: tablet) {
|
229
|
+
margin: govuk-spacing(4) 0 0;
|
230
|
+
}
|
222
231
|
}
|
223
232
|
|
224
233
|
.gem-c-feedback__email-link {
|
@@ -228,7 +237,6 @@
|
|
228
237
|
@include govuk-media-query($from: desktop) {
|
229
238
|
display: inline-block;
|
230
239
|
margin-top: govuk-spacing(2);
|
231
|
-
margin-left: govuk-spacing(3);
|
232
240
|
}
|
233
241
|
}
|
234
242
|
|
@@ -49,7 +49,7 @@
|
|
49
49
|
'index': index + 1,
|
50
50
|
'index_total': links.length,
|
51
51
|
'text': link[:icon],
|
52
|
-
'
|
52
|
+
'method': 'populated-via-js'
|
53
53
|
}
|
54
54
|
end
|
55
55
|
if track_as_follow
|
@@ -61,7 +61,7 @@
|
|
61
61
|
'text': link[:text],
|
62
62
|
'external': 'populated-via-js',
|
63
63
|
'url': link[:href],
|
64
|
-
'
|
64
|
+
'method': 'populated-via-js'
|
65
65
|
}
|
66
66
|
end
|
67
67
|
%>
|
@@ -5,14 +5,6 @@
|
|
5
5
|
data-track-action="GOV.UK Send Form"
|
6
6
|
method="post"
|
7
7
|
hidden>
|
8
|
-
<button
|
9
|
-
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
|
10
|
-
data-track-category="Onsite Feedback"
|
11
|
-
data-track-action="GOV.UK Close Form"
|
12
|
-
aria-controls="something-is-wrong"
|
13
|
-
aria-expanded="true">
|
14
|
-
<%= t("components.feedback.close") %>
|
15
|
-
</button>
|
16
8
|
|
17
9
|
<div class="govuk-grid-row">
|
18
10
|
<div class="govuk-grid-column-two-thirds">
|
@@ -49,6 +41,16 @@
|
|
49
41
|
<%= render "govuk_publishing_components/components/button", {
|
50
42
|
text: t("components.feedback.send")
|
51
43
|
} %>
|
44
|
+
|
45
|
+
<button
|
46
|
+
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
|
47
|
+
data-track-category="Onsite Feedback"
|
48
|
+
data-track-action="GOV.UK Close Form"
|
49
|
+
aria-controls="something-is-wrong"
|
50
|
+
aria-expanded="true">
|
51
|
+
<%= t("components.feedback.close") %>
|
52
|
+
</button>
|
53
|
+
|
52
54
|
</div>
|
53
55
|
</div>
|
54
56
|
</form>
|
@@ -4,15 +4,6 @@
|
|
4
4
|
data-track-category="yesNoFeedbackForm"
|
5
5
|
data-track-action="Send Form"
|
6
6
|
method="post">
|
7
|
-
<button
|
8
|
-
class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
|
9
|
-
data-track-category="yesNoFeedbackForm"
|
10
|
-
data-track-action="ffFormClose"
|
11
|
-
aria-controls="page-is-not-useful"
|
12
|
-
aria-expanded="true"
|
13
|
-
hidden>
|
14
|
-
<%= t("components.feedback.close") %>
|
15
|
-
</button>
|
16
7
|
|
17
8
|
<div class="govuk-grid-row">
|
18
9
|
<div class="govuk-grid-column-two-thirds" id="survey-wrapper">
|
@@ -37,6 +28,17 @@
|
|
37
28
|
<%= render "govuk_publishing_components/components/button", {
|
38
29
|
text: t("components.feedback.send_me_survey"),
|
39
30
|
} %>
|
31
|
+
|
32
|
+
<button
|
33
|
+
class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
|
34
|
+
data-track-category="yesNoFeedbackForm"
|
35
|
+
data-track-action="ffFormClose"
|
36
|
+
aria-controls="page-is-not-useful"
|
37
|
+
aria-expanded="true"
|
38
|
+
hidden>
|
39
|
+
<%= t("components.feedback.close") %>
|
40
|
+
</button>
|
41
|
+
|
40
42
|
</div>
|
41
43
|
</div>
|
42
44
|
</form>
|
@@ -1,42 +1,48 @@
|
|
1
1
|
<div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
|
2
|
-
<div class="gem-c-feedback__prompt-
|
3
|
-
<
|
2
|
+
<div class="gem-c-feedback__prompt-content">
|
3
|
+
<div class="gem-c-feedback__prompt-questions js-prompt-questions" hidden>
|
4
|
+
<div class="gem-c-feedback__prompt-question-answer">
|
5
|
+
<h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful") %></h2>
|
6
|
+
<ul class="gem-c-feedback__option-list">
|
7
|
+
<li class="gem-c-feedback__option-list-item govuk-visually-hidden" style="display: none" hidden>
|
8
|
+
<% # Maybe button exists only to try and capture clicks by bots %>
|
9
|
+
<%= link_to "/contact/govuk", {
|
10
|
+
class: 'gem-c-feedback__prompt-link',
|
11
|
+
data: {
|
12
|
+
'track-category' => 'yesNoFeedbackForm',
|
13
|
+
'track-action' => 'ffMaybeClick'
|
14
|
+
},
|
15
|
+
role: 'button',
|
16
|
+
style: 'display: none',
|
17
|
+
hidden: 'hidden',
|
18
|
+
'aria-hidden': 'true',
|
19
|
+
} do %>
|
20
|
+
<%= t("components.feedback.maybe") %>
|
21
|
+
<% end %>
|
22
|
+
</li>
|
23
|
+
<li class="gem-c-feedback__option-list-item">
|
24
|
+
<button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick" data-ga4='{"event_name":"form_submit","type":"feedback","text":"Yes", "section": "Is this page useful?"}'>
|
25
|
+
<%= t("components.feedback.yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful") %></span>
|
26
|
+
</button>
|
27
|
+
</li>
|
28
|
+
<li class="gem-c-feedback__option-list-item">
|
29
|
+
<button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false" data-ga4='{"event_name":"form_submit","type":"feedback","text":"No", "section": "Is this page useful?"}'>
|
30
|
+
<%= t("components.feedback.no") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful") %></span>
|
31
|
+
</button>
|
32
|
+
</li>
|
33
|
+
</ul>
|
34
|
+
</div>
|
35
|
+
</div>
|
36
|
+
|
37
|
+
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success" role="alert" hidden>
|
38
|
+
<%= t("components.feedback.thank_you_for_feedback") %>
|
39
|
+
</div>
|
40
|
+
|
41
|
+
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions" hidden>
|
42
|
+
<button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
|
43
|
+
<%= t("components.feedback.something_wrong") %>
|
44
|
+
</button>
|
45
|
+
</div>
|
4
46
|
|
5
|
-
<ul class="gem-c-feedback__option-list">
|
6
|
-
<li class="gem-c-feedback__option-list-item govuk-visually-hidden" style="display: none" hidden>
|
7
|
-
<% # Maybe button exists only to try and capture clicks by bots %>
|
8
|
-
<%= link_to "/contact/govuk", {
|
9
|
-
class: 'gem-c-feedback__prompt-link',
|
10
|
-
data: {
|
11
|
-
'track-category' => 'yesNoFeedbackForm',
|
12
|
-
'track-action' => 'ffMaybeClick'
|
13
|
-
},
|
14
|
-
role: 'button',
|
15
|
-
style: 'display: none',
|
16
|
-
hidden: 'hidden',
|
17
|
-
'aria-hidden': 'true',
|
18
|
-
} do %>
|
19
|
-
<%= t("components.feedback.maybe") %>
|
20
|
-
<% end %>
|
21
|
-
</li>
|
22
|
-
<li class="gem-c-feedback__option-list-item">
|
23
|
-
<button class="govuk-button gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick" data-ga4='{"event_name":"form_submit","type":"feedback","text":"Yes", "section": "Is this page useful?"}'>
|
24
|
-
<%= t("components.feedback.yes") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_useful") %></span>
|
25
|
-
</button>
|
26
|
-
</li>
|
27
|
-
<li class="gem-c-feedback__option-list-item">
|
28
|
-
<button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false" data-ga4='{"event_name":"form_submit","type":"feedback","text":"No", "section": "Is this page useful?"}'>
|
29
|
-
<%= t("components.feedback.no") %> <span class="govuk-visually-hidden"><%= t("components.feedback.is_not_useful") %></span>
|
30
|
-
</button>
|
31
|
-
</li>
|
32
|
-
</ul>
|
33
|
-
</div>
|
34
|
-
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success" role="alert" hidden>
|
35
|
-
<%= t("components.feedback.thank_you_for_feedback") %>
|
36
|
-
</div>
|
37
|
-
<div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions" hidden>
|
38
|
-
<button class="govuk-button gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV-UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">
|
39
|
-
<%= t("components.feedback.something_wrong") %>
|
40
|
-
</button>
|
41
47
|
</div>
|
42
48
|
</div>
|
data/config/locales/en.yml
CHANGED
@@ -61,7 +61,7 @@ en:
|
|
61
61
|
publication: Publication for %{nation}
|
62
62
|
wales: Wales
|
63
63
|
feedback:
|
64
|
-
close:
|
64
|
+
close: Cancel
|
65
65
|
dont_include_personal_info: Don’t include personal or financial information like your National Insurance number or credit card details.
|
66
66
|
email_address: Email address
|
67
67
|
help_us_improve_govuk: Help us improve GOV.UK
|
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: 31.
|
4
|
+
version: 31.2.0
|
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: 2022-10-
|
11
|
+
date: 2022-10-21 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: govuk_app_config
|
@@ -1361,7 +1361,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
1361
1361
|
- !ruby/object:Gem::Version
|
1362
1362
|
version: '0'
|
1363
1363
|
requirements: []
|
1364
|
-
rubygems_version: 3.3.
|
1364
|
+
rubygems_version: 3.3.24
|
1365
1365
|
signing_key:
|
1366
1366
|
specification_version: 4
|
1367
1367
|
summary: A gem to document components in GOV.UK frontend applications
|