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 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