govuk_publishing_components 4.0.0 → 4.1.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/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
|