govuk_publishing_components 31.1.2 → 31.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss +81 -73
- 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 +2 -2
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
|
@@ -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
|
|
@@ -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
|