govuk_publishing_components 4.0.0 → 4.1.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/javascripts/govuk_publishing_components/components/error-summary.js +20 -0
- data/app/assets/stylesheets/govuk_publishing_components/application.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss +73 -0
- data/app/views/govuk_publishing_components/components/_error_summary.html.erb +33 -0
- data/app/views/govuk_publishing_components/components/docs/error_summary.yml +26 -0
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 557702f784e135a56c3e36c04f41cd81a46ce0c1
|
|
4
|
+
data.tar.gz: '029295ec5b0986c2e3716ec2716a187f99284c1c'
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 791114b6110dbff901b8141cce068d675cf47488a49b534bc19c1b40a6e7ad09ae94fcee51d2c0a8ee43a5cd97dc3b641743e2f9617386ab0878f18a09bbbf89
|
|
7
|
+
data.tar.gz: 45d86f132162f126ed398a8851251957f2ebfd6718d4a7a45c27f9f9dd1a062d030b4c22f36900d208a165643420b455c743149ce33664132772ad30799a50fd
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
window.GOVUK = window.GOVUK || {}
|
|
2
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
3
|
+
|
|
4
|
+
(function (global, GOVUK) {
|
|
5
|
+
'use strict'
|
|
6
|
+
|
|
7
|
+
var $ = global.jQuery
|
|
8
|
+
|
|
9
|
+
GOVUK.Modules.ErrorSummary = function () {
|
|
10
|
+
this.start = function (element) {
|
|
11
|
+
element.focus()
|
|
12
|
+
// Focus on inputs with errors, so they're easier to discover
|
|
13
|
+
element.on('click', '.js-error-summary__link', function (event) {
|
|
14
|
+
event.preventDefault()
|
|
15
|
+
var href = $(this).attr('href')
|
|
16
|
+
$(href).focus()
|
|
17
|
+
})
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
})(window, window.GOVUK)
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
.gem-c-error-summary {
|
|
2
|
+
color: $gem-text-colour;
|
|
3
|
+
padding: $gem-spacing-scale-3;
|
|
4
|
+
|
|
5
|
+
border: $gem-border-width-mobile solid $gem-error-colour;
|
|
6
|
+
|
|
7
|
+
@include media(tablet) {
|
|
8
|
+
|
|
9
|
+
padding: $gem-spacing-scale-4;
|
|
10
|
+
|
|
11
|
+
border: $gem-border-width-tablet solid $gem-error-colour;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.gem-c-error-summary:focus {
|
|
16
|
+
outline: $gem-focus-width solid $gem-focus-colour;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.gem-c-error-summary__title {
|
|
20
|
+
margin-top: 0;
|
|
21
|
+
margin-bottom: $gem-spacing-scale-3;
|
|
22
|
+
|
|
23
|
+
@include media(tablet) {
|
|
24
|
+
margin-bottom: $gem-spacing-scale-4;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@include bold-24;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.gem-c-error-summary__body {
|
|
31
|
+
@include core-19;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.gem-c-error-summary__text {
|
|
35
|
+
margin-top: 0;
|
|
36
|
+
margin-bottom: $gem-spacing-scale-3;
|
|
37
|
+
|
|
38
|
+
@include media(tablet) {
|
|
39
|
+
margin-bottom: $gem-spacing-scale-4;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.gem-c-error-summary__list {
|
|
44
|
+
margin-top: 0;
|
|
45
|
+
margin-bottom: 0;
|
|
46
|
+
padding: 0;
|
|
47
|
+
list-style: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.gem-c-error-summary__list__item {
|
|
51
|
+
margin-bottom: $gem-spacing-scale-2;
|
|
52
|
+
|
|
53
|
+
&:last-child {
|
|
54
|
+
margin-bottom: 0;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.gem-c-error-summary__link {
|
|
59
|
+
&:link,
|
|
60
|
+
&:link:focus,
|
|
61
|
+
&:focus,
|
|
62
|
+
&:visited,
|
|
63
|
+
&:hover,
|
|
64
|
+
&:active {
|
|
65
|
+
color: $gem-error-colour;
|
|
66
|
+
font-weight: bold;
|
|
67
|
+
text-decoration: underline;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&:hover {
|
|
71
|
+
color: darken($gem-error-colour, 10%);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
<%
|
|
2
|
+
description ||= false
|
|
3
|
+
items ||= []
|
|
4
|
+
title_id ||= "error-summary-title-#{SecureRandom.hex(4)}"
|
|
5
|
+
%>
|
|
6
|
+
<div
|
|
7
|
+
class="gem-c-error-summary"
|
|
8
|
+
data-module="error-summary"
|
|
9
|
+
aria-labelledby="<%= title_id %>"
|
|
10
|
+
role="alert"
|
|
11
|
+
tabindex="-1"
|
|
12
|
+
>
|
|
13
|
+
<h2 class="gem-c-error-summary__title" id="<%= title_id %>">
|
|
14
|
+
<%= title %>
|
|
15
|
+
</h2>
|
|
16
|
+
<div class="gem-c-error-summary__body">
|
|
17
|
+
<% if description %>
|
|
18
|
+
<p class="gem-c-error-summary__text"><%= description %></p>
|
|
19
|
+
<% end %>
|
|
20
|
+
<% if items.present? %>
|
|
21
|
+
<ul class="gem-c-error-summary__list">
|
|
22
|
+
<% items.each_with_index do |item, index| %>
|
|
23
|
+
<li class="gem-c-error-summary__list__item">
|
|
24
|
+
<a
|
|
25
|
+
class="js-error-summary__link gem-c-error-summary__link"
|
|
26
|
+
href="<%= item[:href] %>"
|
|
27
|
+
><%= item[:text] %></a>
|
|
28
|
+
</li>
|
|
29
|
+
<% end %>
|
|
30
|
+
</ul>
|
|
31
|
+
<% end %>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
name: Form error summary
|
|
2
|
+
description: Used at the top of the page, to summarise validation errors.
|
|
3
|
+
accessibility_criteria: |
|
|
4
|
+
- should be focused on page load, to ensure this error is noticed by assistive tech
|
|
5
|
+
- list of errors should be clickable and focus the inputs with errors
|
|
6
|
+
shared_accessibility_criteria:
|
|
7
|
+
- link
|
|
8
|
+
examples:
|
|
9
|
+
default:
|
|
10
|
+
data:
|
|
11
|
+
title: Message to alert the user to a problem goes here
|
|
12
|
+
description: Optional description of the errors and how to correct them
|
|
13
|
+
items:
|
|
14
|
+
- text: Descriptive link to the question with an error
|
|
15
|
+
href: '#example-error-1'
|
|
16
|
+
with_many_errors:
|
|
17
|
+
data:
|
|
18
|
+
title: Message to alert the user to a problem goes here
|
|
19
|
+
description: Optional description of the errors and how to correct them
|
|
20
|
+
items:
|
|
21
|
+
- text: Descriptive link to the question with an error 1
|
|
22
|
+
href: '#example-error-1'
|
|
23
|
+
- text: Descriptive link to the question with an error 2
|
|
24
|
+
href: '#example-error-2'
|
|
25
|
+
- text: Descriptive link to the question with an error 3
|
|
26
|
+
href: '#example-error-3'
|
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: 4.
|
|
4
|
+
version: 4.1.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: 2018-01-
|
|
11
|
+
date: 2018-01-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -235,6 +235,7 @@ files:
|
|
|
235
235
|
- app/assets/javascripts/current-location.js
|
|
236
236
|
- app/assets/javascripts/govuk_publishing_components/accessibility-test.js
|
|
237
237
|
- app/assets/javascripts/govuk_publishing_components/application.js
|
|
238
|
+
- app/assets/javascripts/govuk_publishing_components/components/error-summary.js
|
|
238
239
|
- app/assets/javascripts/govuk_publishing_components/components/task-list.js
|
|
239
240
|
- app/assets/javascripts/govuk_publishing_components/vendor/axe.min.js
|
|
240
241
|
- app/assets/javascripts/govuk_publishing_components/vendor/matches-polyfill.min.js
|
|
@@ -242,6 +243,7 @@ files:
|
|
|
242
243
|
- app/assets/javascripts/history-support.js
|
|
243
244
|
- app/assets/stylesheets/govuk_publishing_components/application.scss
|
|
244
245
|
- app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
|
|
246
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_error-summary.scss
|
|
245
247
|
- app/assets/stylesheets/govuk_publishing_components/components/_fieldset.scss
|
|
246
248
|
- app/assets/stylesheets/govuk_publishing_components/components/_label.scss
|
|
247
249
|
- app/assets/stylesheets/govuk_publishing_components/components/_radio.scss
|
|
@@ -269,6 +271,7 @@ files:
|
|
|
269
271
|
- app/views/govuk_publishing_components/component_guide/preview.html.erb
|
|
270
272
|
- app/views/govuk_publishing_components/component_guide/show.html.erb
|
|
271
273
|
- app/views/govuk_publishing_components/components/_back_link.html.erb
|
|
274
|
+
- app/views/govuk_publishing_components/components/_error_summary.html.erb
|
|
272
275
|
- app/views/govuk_publishing_components/components/_fieldset.html.erb
|
|
273
276
|
- app/views/govuk_publishing_components/components/_label.html.erb
|
|
274
277
|
- app/views/govuk_publishing_components/components/_radio.html.erb
|
|
@@ -276,6 +279,7 @@ files:
|
|
|
276
279
|
- app/views/govuk_publishing_components/components/_task_list_header.html.erb
|
|
277
280
|
- app/views/govuk_publishing_components/components/_task_list_related.html.erb
|
|
278
281
|
- app/views/govuk_publishing_components/components/docs/back_link.yml
|
|
282
|
+
- app/views/govuk_publishing_components/components/docs/error_summary.yml
|
|
279
283
|
- app/views/govuk_publishing_components/components/docs/fieldset.yml
|
|
280
284
|
- app/views/govuk_publishing_components/components/docs/label.yml
|
|
281
285
|
- app/views/govuk_publishing_components/components/docs/radio.yml
|