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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6228168725fc509c3b6313611fb75d4700597c685bb059c58ab4058173adfee5
4
- data.tar.gz: 4ecefeead36ad35884f76edc0cb679e8449b300e08b95bf05ef9a1bd2ba9c7fe
3
+ metadata.gz: 91b9d62f7f0bee126ffb2fa60dcca311f06489100cdc686a4c4404f54ae4c4e3
4
+ data.tar.gz: df1410de982d60ae348bad56b9dda41ea67666d1c4117b5f61260998aaac9bea
5
5
  SHA512:
6
- metadata.gz: 60b6aa5e85acf22e1bb663dc8e87d626f60ded689eb6809ec269868a4dba96bd1c41ae8766a30f8f97e27a5b56ef5044e65db4a2fee5814d150de6aa9731bd68
7
- data.tar.gz: 06a0a8bd5ca1a14ff13bb0aec9869dba18d3e0e9942d48a712befde02c6738c7b62a2ca9e300f5c3ae320a86adfe507faa74598d74a76740b9da5fbcbf898200
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: tablet) {
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-questions {
18
- text-align: center;
19
- border-bottom: 1px solid govuk-colour("white");
20
- padding: govuk-spacing(5) govuk-spacing(5) govuk-spacing(5) govuk-spacing(5);
21
- box-sizing: border-box;
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
- width: 50%;
25
- display: table-cell;
26
- text-align: left;
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--something-is-wrong {
32
- text-align: center;
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
- text-align: right;
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
- @include govuk-clearfix;
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
- @include govuk-font(16, $weight: bold);
49
- display: table;
50
- width: 100%;
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
- vertical-align: top;
65
- display: inline-block;
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
- @include govuk-media-query($from: tablet) {
73
- margin-left: 0;
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
- box-shadow: 0 2px 0 govuk-colour("white");
89
- border: 1px govuk-colour("white") solid;
90
- min-width: 100%;
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("black");
100
+ background: govuk-colour("mid-grey");
95
101
  background: rgba(govuk-colour("black"), .2);
102
+ color: govuk-colour("black");
96
103
  }
97
104
 
98
- @include govuk-media-query($from: mobile) {
99
- min-width: 100px;
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("white");
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
- @include govuk-media-query($from: mobile) {
140
- display: inline-block;
145
+ &:last-child {
146
+ margin-left: govuk-spacing(2);
141
147
  }
142
148
  }
143
149
 
144
- .gem-c-feedback__option-list-item:last-child {
145
- @include govuk-media-query($from: mobile) {
146
- margin-left: govuk-spacing(4);
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: tablet) {
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) 0;
194
- border-top: govuk-spacing(2) solid govuk-colour("blue");
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) 0;
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
- float: right;
221
- margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
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-questions js-prompt-questions" hidden>
3
- <h2 class="gem-c-feedback__prompt-question"><%= t("components.feedback.is_this_page_useful") %></h2>
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>
@@ -61,7 +61,7 @@ en:
61
61
  publication: Publication for %{nation}
62
62
  wales: Wales
63
63
  feedback:
64
- close: 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
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "31.1.2".freeze
2
+ VERSION = "31.2.0".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: 31.1.2
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-18 00:00:00.000000000 Z
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