govuk_publishing_components 31.1.2 → 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/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
|