govuk_publishing_components 21.28.1 → 21.29.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: eb39c272f242ed85724733a75e9962ffe39f663c0dafdc93a2c73ec8a1a2f6c0
4
- data.tar.gz: 5456bd891a73db706520a67d7ed64448aa1e40ad8167e215315161d80e7019f2
3
+ metadata.gz: a256eac9caf32b692c6f58976b3a6a824711a50eea322abd1e6d9950dc29dd13
4
+ data.tar.gz: 9c351d236c2d523d67e850b4ea9d31245287a25d587faecc8ebf2533887905b5
5
5
  SHA512:
6
- metadata.gz: 1f98f68e866d30a79bbabda167ed664574fd977e3ea77658ddd50ed1d15efc630457e9c2d9bc8f7d9fbe113334bcde4258e0260561b34dae851e0d496385b3af
7
- data.tar.gz: b50793ed75f751492811d9dfa46f791d4d1fd35a6ea656e4a45bb6950224d311d93de7be4cf1b222c0dab8a898c6d025693fc499628fee5b03cbf251f34cf29d
6
+ metadata.gz: d12cf7e41be2495431cf8fa9c8d749f31cf1d956c78645e75a354e2a98dc33e51f99552c7273469070abf0a3dfb930fddbbac42fe7bb14a035c677a655fd0967
7
+ data.tar.gz: 24a840a78f35eb7eb6932312b691be33d4b5ce431b2d08af832d1c97fedb91af8f2d9ba3ea74f8060eb8419a397b56d5f829ebcffda3bd8cf97728be02ba90fa
@@ -103,5 +103,68 @@
103
103
  .gem-c-document-list__highlight-text {
104
104
  @include govuk-font(16, bold);
105
105
  margin: 0 0 govuk-spacing(3) 0;
106
+ }
107
+
108
+ .gem-c-document-list__children {
109
+ margin-bottom: 0;
110
+
111
+ @include govuk-media-query($from: desktop) {
112
+ margin-left: govuk-spacing(4);
113
+ margin-top: govuk-spacing(4);
114
+
115
+ @supports (display: grid) {
116
+ display: grid;
117
+ grid-template-columns: 1fr 1fr;
118
+ column-gap: govuk-spacing(3);
119
+ }
120
+ }
121
+ }
122
+
123
+ .gem-c-document-list-child {
124
+ @include govuk-font($size: 16);
125
+ position: relative;
126
+ padding-left: govuk-spacing(5);
127
+ padding-top: govuk-spacing(2);
128
+
129
+ &:before {
130
+ content: "—";
131
+ position: absolute;
132
+ left: 0;
133
+ overflow: hidden;
134
+ }
135
+
136
+ @include govuk-media-query($from: desktop) {
137
+ padding: 0;
138
+ padding-bottom: govuk-spacing(2);
139
+
140
+ &:before {
141
+ display: none;
142
+ }
143
+ }
144
+ }
106
145
 
146
+ .gem-c-document-list-child__heading {
147
+ @include govuk-media-query($from: tablet) {
148
+ @include govuk-typography-weight-bold;
149
+ }
150
+ }
151
+
152
+ .gem-c-document-list-child__link {
153
+ @include govuk-link-common;
154
+ @include govuk-link-style-default;
155
+ text-decoration: none;
156
+
157
+ &:hover {
158
+ text-decoration: underline;
159
+ }
160
+ }
161
+
162
+ .gem-c-document-list-child__description {
163
+ @include govuk-text-colour;
164
+ margin-top: 0;
165
+ margin-bottom: govuk-spacing(1);
166
+
167
+ @include govuk-media-query($until: tablet) {
168
+ display: none;
169
+ }
107
170
  }
@@ -1,19 +1,12 @@
1
1
  .gem-c-feedback {
2
2
  background: govuk-colour("white");
3
- margin: 0 auto;
3
+ margin: govuk-spacing(6) auto 0 auto;
4
4
  max-width: $govuk-page-width;
5
5
  position: relative;
6
6
 
7
- .visually-hidden {
8
- @include govuk-visually-hidden;
9
- }
10
- }
11
-
12
- .gem-c-feedback--top-margin {
13
- margin-top: govuk-spacing(6);
14
-
15
7
  @include govuk-media-query($from: tablet) {
16
8
  margin-top: govuk-spacing(9);
9
+ border-bottom: 1px solid govuk-colour("white");
17
10
  }
18
11
  }
19
12
 
@@ -22,7 +15,7 @@
22
15
  .gem-c-feedback__js-show,
23
16
  .gem-c-feedback__form,
24
17
  .gem-c-feedback__prompt-success,
25
- .gem-c-feedback__js-prompt-questions,
18
+ .gem-c-feedback__prompt-questions,
26
19
  .gem-c-feedback__error-summary {
27
20
  display: none;
28
21
 
@@ -35,39 +28,83 @@
35
28
  }
36
29
  }
37
30
 
31
+ .gem-c-feedback__prompt-questions {
32
+ text-align: center;
33
+ border-bottom: 1px solid govuk-colour("white");
34
+ padding: govuk-spacing(5) govuk-spacing(5) govuk-spacing(5) govuk-spacing(5);
35
+ box-sizing: border-box;
36
+
37
+ @include govuk-media-query($from: tablet) {
38
+ width: 50%;
39
+ float: left;
40
+ text-align: left;
41
+ border-bottom: 0;
42
+ }
43
+ }
44
+
45
+ .gem-c-feedback__prompt-questions--something-is-wrong {
46
+ text-align: center;
47
+
48
+ @include govuk-media-query($from: tablet) {
49
+ text-align: right;
50
+ }
51
+ }
52
+
38
53
  .gem-c-feedback__prompt {
39
54
  @include govuk-clearfix;
40
55
  background-color: govuk-colour("blue");
41
56
  color: govuk-colour("white");
42
- padding: govuk-spacing(2) govuk-spacing(3) 0;
43
57
  outline: 0;
44
58
  }
45
59
 
46
60
  .gem-c-feedback__prompt-question,
47
61
  .gem-c-feedback__prompt-success {
48
62
  @include govuk-font(19, $weight: bold);
63
+
64
+ @include govuk-media-query($from: tablet) {
65
+ @include govuk-font(16, $weight: bold);
66
+ }
67
+ }
68
+
69
+ .gem-c-feedback__prompt-question {
49
70
  display: inline-block;
50
71
 
51
72
  // There's a global h3 rule in some layouts that interferes with this component
52
73
  margin: 0;
53
74
 
75
+ margin-left: govuk-spacing(4);
76
+ margin-right: govuk-spacing(4);
77
+
54
78
  &:focus {
55
79
  outline: 0;
56
80
  }
57
81
 
58
82
  @include govuk-media-query($from: tablet) {
59
- @include govuk-font(16, $weight: bold);
60
- float: left;
83
+ margin-left: 0;
61
84
  }
62
85
  }
63
86
 
64
87
  .gem-c-feedback__prompt-link {
65
88
  @include govuk-link-common;
66
89
  @include govuk-font(19);
90
+ display: inline-block;
67
91
 
68
92
  @include govuk-media-query($from: tablet) {
69
93
  @include govuk-font(16);
70
- margin-left: govuk-spacing(2);
94
+ }
95
+ }
96
+
97
+ .gem-c-feedback__email-link,
98
+ .gem-c-feedback__prompt-link {
99
+ position: relative;
100
+
101
+ &:after {
102
+ content: "";
103
+ position: absolute;
104
+ top: -14px;
105
+ right: -14px;
106
+ left: -14px;
107
+ bottom: -14px;
71
108
  }
72
109
  }
73
110
 
@@ -80,6 +117,29 @@
80
117
  }
81
118
  }
82
119
 
120
+ .gem-c-feedback__option-list {
121
+ display: inline-block;
122
+ list-style-type: none;
123
+ margin: 0;
124
+ padding: 0;
125
+ margin-right: govuk-spacing(2);
126
+ margin-top: govuk-spacing(2);
127
+
128
+ @include govuk-media-query($from: tablet) {
129
+ margin-top: 0;
130
+ }
131
+ }
132
+
133
+ .gem-c-feedback__option-list-item {
134
+ display: inline-block;
135
+ }
136
+
137
+ .gem-c-feedback__option-list-item:first-child {
138
+ margin-right: govuk-spacing(7);
139
+ }
140
+
141
+
142
+ // Feedback form styles
83
143
  .gem-c-feedback__error-summary {
84
144
  margin-bottom: govuk-spacing(3);
85
145
  padding: govuk-spacing(3);
@@ -163,7 +223,7 @@
163
223
 
164
224
  .gem-c-feedback__email-link {
165
225
  display: block;
166
- margin-top: govuk-spacing(3);
226
+ margin-top: govuk-spacing(4);
167
227
 
168
228
  @include govuk-media-query($from: desktop) {
169
229
  display: inline-block;
@@ -184,81 +244,3 @@
184
244
  outline: $govuk-focus-width solid $govuk-focus-colour;
185
245
  }
186
246
  }
187
-
188
- .gem-c-feedback__option-list {
189
- list-style-type: none;
190
- margin: 0;
191
- padding: 0;
192
- }
193
-
194
-
195
- .js-enabled {
196
- .gem-c-feedback__js-prompt-questions {
197
- @include govuk-media-query($until: tablet) {
198
- display: grid;
199
- }
200
- }
201
-
202
- .gem-c-feedback__prompt-question {
203
- @include govuk-media-query($until: tablet) {
204
- grid-area: 1 / 1;
205
- }
206
- }
207
-
208
- .gem-c-feedback__option-list {
209
- list-style-type: none;
210
- margin: 0;
211
- padding: 0;
212
-
213
- @include govuk-media-query($until: tablet) {
214
- grid-area: 1 / 1 / 2 / 2;
215
- display: grid;
216
- grid-template-columns: 140px 1fr;
217
- // older grid spec
218
- grid-row-gap: govuk-spacing(3);
219
- // newer grid spec
220
- row-gap: govuk-spacing(3); // sass-lint:disable-line no-misspelled-properties
221
- }
222
- }
223
-
224
- .gem-c-feedback__option-list-item {
225
- @include govuk-media-query($from: tablet) {
226
- float: left;
227
- }
228
- }
229
-
230
- .gem-c-feedback__option-list-item--useful {
231
- @include govuk-media-query($until: tablet) {
232
- display: inline-block;
233
- @supports (display: grid) {
234
- grid-area: 1 / 2;
235
- padding-left: govuk-spacing(3);
236
- }
237
- }
238
- }
239
-
240
- .gem-c-feedback__option-list-item--not-useful {
241
- @include govuk-media-query($until: tablet) {
242
- display: inline-block;
243
- @supports (display: grid) {
244
- grid-area: 1 / 2;
245
- padding-left: 50px;
246
- }
247
- }
248
- }
249
-
250
- .gem-c-feedback__option-list-item--wrong {
251
- @include govuk-media-query($until: tablet) {
252
- display: block;
253
- margin-top: govuk-spacing(3);
254
- @supports (display: grid) {
255
- margin-top: 0;
256
- grid-area: 2 / 1 / 2 / 3;
257
- }
258
- }
259
-
260
- @include govuk-media-query($from: tablet) {
261
- float: right;
262
- }
263
- }
264
- }
@@ -3,13 +3,10 @@
3
3
  // scss-lint:disable PlaceholderInExtend
4
4
  // sass-lint:disable placeholder-in-extend
5
5
  .gem-c-govspeak {
6
- .button,
7
- .govuk-button,
8
6
  .gem-c-button {
9
7
  @extend .govuk-button;
10
8
  }
11
9
 
12
- .button-start,
13
10
  .govuk-button--start {
14
11
  @extend .govuk-button--start;
15
12
  }
@@ -19,7 +19,6 @@
19
19
  <% end %>
20
20
  <% items.each do |item| %>
21
21
  <% highlight_class = " gem-c-document-list__item--highlight" if item[:highlight] %>
22
-
23
22
  <li class="gem-c-document-list__item<%= within_multitype_list_class %> <%= brand_helper.brand_class %> <%= highlight_class %>">
24
23
  <% if item[:highlight] && item[:highlight_text] %>
25
24
  <p class='gem-c-document-list__highlight-text'><%= item[:highlight_text] %></p>
@@ -72,6 +71,35 @@
72
71
  <% if item[:subtext] %>
73
72
  <p class="gem-c-document-list__subtext"><%= item[:subtext] %></p>
74
73
  <% end %>
74
+
75
+ <% if item[:parts] && item[:parts].any? %>
76
+ <ul class="gem-c-document-list__children govuk-list">
77
+ <% item[:parts].each do |part| %>
78
+ <li class="gem-c-document-list-child">
79
+ <%=
80
+ if part[:link][:path]
81
+ link_to(
82
+ part[:link][:text],
83
+ part[:link][:path],
84
+ data: part[:link][:data_attributes],
85
+ class: "gem-c-document-list-child__heading #{brand_helper.color_class} gem-c-document-list-child__link",
86
+ )
87
+ else
88
+ content_tag(
89
+ "span",
90
+ part[:link][:text],
91
+ data: part[:link][:data_attributes],
92
+ class: "gem-c-document-list-child__heading",
93
+ )
94
+ end
95
+ %>
96
+ <% if part[:link][:description] %>
97
+ <p class="gem-c-document-list-child__description"><%= part[:link][:description] %></p>
98
+ <% end %>
99
+ </li>
100
+ <% end %>
101
+ </ul>
102
+ <% end %>
75
103
  </li>
76
104
  <% end %>
77
105
  <% unless within_multitype_list %>
@@ -1,7 +1,4 @@
1
1
  <%
2
- margin_top ||= 1
3
- margin_top_class = "gem-c-feedback--top-margin" if margin_top == 1
4
-
5
2
  def utf_encode(element)
6
3
  element.is_a?(String) ? element.encode : element
7
4
  end
@@ -11,7 +8,7 @@
11
8
  path_without_pii = utf_encode(request.fullpath.gsub(email_regex, '[email]'))
12
9
  %>
13
10
 
14
- <div class="gem-c-feedback <%= margin_top_class %>" data-module="feedback">
11
+ <div class="gem-c-feedback" data-module="feedback">
15
12
  <%= render "govuk_publishing_components/components/feedback/yes_no_banner" %>
16
13
  <%= render "govuk_publishing_components/components/feedback/problem_form", url_without_pii: url_without_pii %>
17
14
  <%= render "govuk_publishing_components/components/feedback/survey_signup_form", path_without_pii: path_without_pii %>
@@ -236,3 +236,29 @@ examples:
236
236
  document_type: 'Organisation'
237
237
  context:
238
238
  right_to_left: true
239
+ with_parts:
240
+ description: Display child items, such as parts of guides or travel advice. Child items accept the same paramaters as parent items.
241
+ data:
242
+ items:
243
+ - link:
244
+ text: 'Universal credit'
245
+ path: '/universal-credit'
246
+ description: 'Universal Credit is replacing 6 other benefits with a single monthly payment if you are out of work or on a low income - eligibility, how to prepare'
247
+ parts:
248
+ - link:
249
+ text: 'What universal credit is'
250
+ path: '/universal-credit/what-it-is'
251
+ description: 'Universal Credit is a payment to help with your living costs. It’s paid monthly - or twice a month for some people in Scotland.'
252
+ - link:
253
+ text: 'Elegibility'
254
+ path: '/universal-credit/eligibility'
255
+ description: 'You may be able to get Universal Credit if: you’re on a low income or out...'
256
+ data_attributes:
257
+ track_category: 'resultPart'
258
+ track_action: 2
259
+ track_label: 'Result part 2'
260
+ track_options:
261
+ dimension82: 2
262
+ - link:
263
+ text: 'Criteria'
264
+ description: 'no url provided, just text'
@@ -1,9 +1,7 @@
1
1
  name: Feedback
2
2
  description: Invites user feedback on the current page.
3
3
  body: |
4
- This component is designed to sit at the bottom of pages on GOV.UK to allow users to submit feedback on that page. It is based on the 'improve this page' component from the Service manual, but changes have been made.
5
-
6
- This component includes imported button styles, which is not ideal (styles are duplicated). Once the [button component](/component-guide/button) has been moved to the gem, this should be used instead.
4
+ This component is designed to sit at the bottom of pages on GOV.UK to allow users to submit feedback on that page.
7
5
  accessibility_criteria: |
8
6
  Form elements in the component must:
9
7
 
@@ -673,21 +673,9 @@ examples:
673
673
  <p>This is a summary</p>
674
674
  </div>
675
675
  buttons:
676
- description: |
677
- We're in process of migrating govspeak from using the old (toolkit) button styles to using the (govuk-frontend) button component from this gem. The example below demonstrates both kinds of buttons.
678
-
679
- This documentation will be updated once that work is complete.
680
676
  data:
681
677
  block: |
682
678
  <p>
683
- <a href="#" class="button" role="button">
684
- Old button
685
- </a>
686
- <a href="#" class="button button-start" role="button">
687
- Old start button
688
- </a>
689
- </p>
690
- <p>
691
- <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">New button</a>
692
- <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> New start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
679
+ <a role="button" class="gem-c-button govuk-button" href="https://gov.uk/random">Button</a>
680
+ <a class="gem-c-button govuk-button govuk-button--start" role="button" href="https://gov.uk/random"> Start button <svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" role="presentation" focusable="false"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"></path></svg></a>
693
681
  </p>
@@ -3,8 +3,9 @@
3
3
  %>
4
4
 
5
5
  <div class="gem-c-feedback__prompt gem-c-feedback__js-show js-prompt" tabindex="-1">
6
- <div class="gem-c-feedback__js-prompt-questions js-prompt-questions">
6
+ <div class="gem-c-feedback__prompt-questions js-prompt-questions">
7
7
  <h2 class="gem-c-feedback__prompt-question">Is this page useful?</h2>
8
+ <!-- Maybe button exists only to try and capture clicks by bots -->
8
9
  <%= link_to contact_govuk_path, {
9
10
  class: 'gem-c-feedback__prompt-link',
10
11
  data: {
@@ -20,7 +21,7 @@
20
21
  Maybe
21
22
  <% end %>
22
23
  <ul class="gem-c-feedback__option-list">
23
- <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--useful">
24
+ <li class="gem-c-feedback__option-list-item">
24
25
  <%= link_to contact_govuk_path, {
25
26
  class: 'gem-c-feedback__prompt-link js-page-is-useful',
26
27
  data: {
@@ -30,10 +31,10 @@
30
31
  'aria-expanded': false,
31
32
  role: 'button',
32
33
  } do %>
33
- Yes <span class="visually-hidden">this page is useful</span>
34
+ Yes <span class="govuk-visually-hidden">this page is useful</span>
34
35
  <% end %>
35
36
  </li>
36
- <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--not-useful">
37
+ <li class="gem-c-feedback__option-list-item">
37
38
  <%= link_to contact_govuk_path, {
38
39
  class: 'gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful',
39
40
  data: {
@@ -44,27 +45,26 @@
44
45
  'aria-expanded': false,
45
46
  role: 'button',
46
47
  } do %>
47
- No <span class="visually-hidden">this page is not useful</span>
48
- <% end %>
49
- </li>
50
- <li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--wrong">
51
- <%= link_to contact_govuk_path, {
52
- class: 'gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong',
53
- data: {
54
- 'track-category' => 'Onsite Feedback',
55
- 'track-action' => 'GOV.UK Open Form'
56
- },
57
- 'aria-controls': 'something-is-wrong',
58
- 'aria-expanded': false,
59
- role: 'button',
60
- } do %>
61
- Is there anything wrong with this page?
48
+ No <span class="govuk-visually-hidden">this page is not useful</span>
62
49
  <% end %>
63
50
  </li>
64
51
  </ul>
65
52
  </div>
66
-
67
- <div class="gem-c-feedback__prompt-success js-prompt-success js-hidden" tabindex="-1">
53
+ <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-success js-prompt-success js-hidden" tabindex="-1">
68
54
  Thank you for your feedback
69
55
  </div>
56
+ <div class="gem-c-feedback__prompt-questions gem-c-feedback__prompt-questions--something-is-wrong js-prompt-questions">
57
+ <%= link_to contact_govuk_path, {
58
+ class: 'gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong',
59
+ data: {
60
+ 'track-category' => 'Onsite Feedback',
61
+ 'track-action' => 'GOV.UK Open Form'
62
+ },
63
+ 'aria-controls': 'something-is-wrong',
64
+ 'aria-expanded': false,
65
+ role: 'button',
66
+ } do %>
67
+ Is there anything wrong with this page?
68
+ <% end %>
69
+ </div>
70
70
  </div>
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "21.28.1".freeze
2
+ VERSION = "21.29.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: 21.28.1
4
+ version: 21.29.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: 2020-03-11 00:00:00.000000000 Z
11
+ date: 2020-03-12 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: gds-api-adapters