govuk_publishing_components 12.15.0 → 12.16.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/checkbox.js +17 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_checkbox.scss +9 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss +0 -3
- data/app/views/govuk_publishing_components/components/_checkbox.html.erb +13 -8
- data/app/views/govuk_publishing_components/components/_checkboxes.html.erb +1 -1
- data/app/views/govuk_publishing_components/components/_input.html.erb +4 -3
- data/app/views/govuk_publishing_components/components/docs/checkbox.yml +50 -1
- data/app/views/govuk_publishing_components/components/docs/checkboxes.yml +1 -0
- data/app/views/govuk_publishing_components/components/docs/input.yml +15 -1
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c617ee9f0636b4ff168ddd58e7a9b8eef7f434006057cee0af7bdcf6e43ae8f8
|
|
4
|
+
data.tar.gz: 78d6bf3676384563725fce4239a3a221d970d943e4effbf8a274716bf487e250
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e195aee9e94e5737636c13977e1ecc5a65f05af8d7162b21be96a7958fbfb66603b4d166a2b4123db3c77669a66da57e1008940d46c2627d21ea23a0c38d5532
|
|
7
|
+
data.tar.gz: a90730ae35728b47466250874f48bfb182fbb9bd27d0c4481e4cb8ff60044726fa5ecd0e4ff9a3e2cea14d4825acc448e94f800413a7c4f18f0a9e669a1cd991
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
window.GOVUK = window.GOVUK || {};
|
|
2
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
3
|
+
|
|
4
|
+
(function (Modules) {
|
|
5
|
+
'use strict';
|
|
6
|
+
|
|
7
|
+
Modules.Checkbox = function () {
|
|
8
|
+
this.start = function ($element) {
|
|
9
|
+
var controls = $element.attr('data-aria-controls');
|
|
10
|
+
|
|
11
|
+
if (controls) {
|
|
12
|
+
$element.find('.govuk-checkboxes__input').attr('aria-controls', controls);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
|
|
16
|
+
};
|
|
17
|
+
})(window.GOVUK.Modules);
|
|
@@ -1,2 +1,11 @@
|
|
|
1
1
|
@import "helpers/govuk-frontend-settings";
|
|
2
2
|
@import "govuk-frontend/components/checkboxes/checkboxes";
|
|
3
|
+
|
|
4
|
+
.gem-c-checkbox.gem-c-checkbox--margin-bottom:last-child,
|
|
5
|
+
.gem-c-checkbox.gem-c-checkbox--margin-bottom:last-of-type {
|
|
6
|
+
margin-bottom: $gutter-two-thirds;
|
|
7
|
+
|
|
8
|
+
@include media(tablet) {
|
|
9
|
+
margin-bottom: $gutter;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -1,22 +1,27 @@
|
|
|
1
1
|
<%
|
|
2
|
+
index ||= false
|
|
2
3
|
id ||= "checkbox-#{SecureRandom.hex(4)}"
|
|
3
|
-
index
|
|
4
|
+
id = "#{id}-#{index}" if index
|
|
5
|
+
controls ||= item[:conditional].present? ? "#{id}-conditional-#{index || rand(1..100)}" : nil
|
|
4
6
|
name = item[:name].present? ? item[:name] : name
|
|
7
|
+
margin_bottom ||= false
|
|
8
|
+
margin_bottom_class = "gem-c-checkbox--margin-bottom" if margin_bottom
|
|
5
9
|
%>
|
|
6
10
|
|
|
7
|
-
<%= tag.div class: "gem-c-checkbox govuk-checkboxes__item" do %>
|
|
8
|
-
<%= tag.input id:
|
|
11
|
+
<%= tag.div class: "gem-c-checkbox govuk-checkboxes__item #{margin_bottom_class}", data: { module: "checkbox", 'aria-controls': controls } do %>
|
|
12
|
+
<%= tag.input id: id,
|
|
9
13
|
name: name,
|
|
10
14
|
type: "checkbox",
|
|
11
15
|
value: item[:value],
|
|
12
16
|
class: "govuk-checkboxes__input",
|
|
13
17
|
checked: item[:checked].present? ? "checked" : nil,
|
|
18
|
+
data: item[:data_attributes],
|
|
14
19
|
aria: {
|
|
15
|
-
describedby: item[:hint].present? ? "#{id}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<%= tag.label item[:label], class: "govuk-label govuk-checkboxes__label", for:
|
|
20
|
+
describedby: item[:hint].present? ? "#{id}-item-hint" : nil
|
|
21
|
+
}
|
|
22
|
+
%>
|
|
23
|
+
<%= tag.label item[:label], class: "govuk-label govuk-checkboxes__label", for: id %>
|
|
19
24
|
<% if item[:hint].present? %>
|
|
20
|
-
<%= tag.span item[:hint], id: "#{id}
|
|
25
|
+
<%= tag.span item[:hint], id: "#{id}-item-hint", class: "govuk-hint govuk-checkboxes__hint" %>
|
|
21
26
|
<% end %>
|
|
22
27
|
<% end %>
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
index: index,
|
|
47
47
|
} %>
|
|
48
48
|
<% if item[:conditional] %>
|
|
49
|
-
<%= tag.div item[:conditional], id: "#{id}-conditional-#{index}", class: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" %>
|
|
49
|
+
<%= tag.div item[:conditional], id: "#{id}-#{index}-conditional-#{index}", class: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" %>
|
|
50
50
|
<% end %>
|
|
51
51
|
|
|
52
52
|
<% if item[:items].present? %>
|
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
id ||= "input-#{SecureRandom.hex(4)}"
|
|
3
3
|
value ||= nil
|
|
4
4
|
type ||= "text"
|
|
5
|
-
describedby ||=
|
|
5
|
+
describedby ||= nil
|
|
6
|
+
controls ||= nil
|
|
6
7
|
data ||= nil
|
|
7
8
|
|
|
8
9
|
label ||= nil
|
|
@@ -29,7 +30,6 @@
|
|
|
29
30
|
aria_described_by << describedby if describedby
|
|
30
31
|
aria_described_by = aria_described_by.join(" ")
|
|
31
32
|
end
|
|
32
|
-
|
|
33
33
|
%>
|
|
34
34
|
|
|
35
35
|
<%= content_tag :div, class: form_group_css_classes do %>
|
|
@@ -68,7 +68,8 @@
|
|
|
68
68
|
autofocus: autofocus,
|
|
69
69
|
readonly: readonly,
|
|
70
70
|
aria: {
|
|
71
|
-
describedby: aria_described_by
|
|
71
|
+
describedby: aria_described_by,
|
|
72
|
+
controls: controls
|
|
72
73
|
}
|
|
73
74
|
%>
|
|
74
75
|
<% end %>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
name: Checkbox
|
|
2
|
-
description: Let users select one or more options by using the checkboxes component.
|
|
2
|
+
description: Let users select one or more options by using the checkboxes component.
|
|
3
3
|
body: This component is used by [Form checkboxes component](/component-guide/checkboxes).
|
|
4
4
|
govuk_frontend_components:
|
|
5
5
|
- checkboxes
|
|
@@ -35,3 +35,52 @@ examples:
|
|
|
35
35
|
label: "Red"
|
|
36
36
|
value: "red_colour"
|
|
37
37
|
checked: true
|
|
38
|
+
checkbox_with_identifier:
|
|
39
|
+
description: |
|
|
40
|
+
If no ID is given, a unique ID is generated for the checkbox automatically.
|
|
41
|
+
|
|
42
|
+
If an index is given, this is appended onto the end of the ID (given or generated). This is used in the checkboxes component where multiple checkboxes are output.
|
|
43
|
+
data:
|
|
44
|
+
name: "with_id"
|
|
45
|
+
id: "moose"
|
|
46
|
+
index: 10
|
|
47
|
+
item:
|
|
48
|
+
label: "With an id of 'moose-10'"
|
|
49
|
+
value: "with_id"
|
|
50
|
+
checkbox_with_data_attributes:
|
|
51
|
+
description: Data attributes such as tracking can be applied if required. Note that for a checkbox this will not fire tracking events automatically, so if you want your tracking to work you'll need to write some tracking Javascript in the app around the component to detect it.
|
|
52
|
+
data:
|
|
53
|
+
name: "With tracking"
|
|
54
|
+
item:
|
|
55
|
+
label: "Tracked"
|
|
56
|
+
value: "tracked"
|
|
57
|
+
data_attributes: {
|
|
58
|
+
track_category: "checkboxClicked",
|
|
59
|
+
track_label: "/news-and-communications",
|
|
60
|
+
track_action: "news",
|
|
61
|
+
track_options: {
|
|
62
|
+
dimension28: 2,
|
|
63
|
+
dimension29: "Tracked"
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
checkbox_with_aria_controls:
|
|
67
|
+
description: |
|
|
68
|
+
A value for aria-controls can be passed to the checkbox. This is applied using Javascript.
|
|
69
|
+
|
|
70
|
+
If a value is not passed, and a value for conditional has been passed, a value is generated based on the id of the checkbox and the passed index. This is used in the [form checkboxes component](/component-guide/checkboxes/checkbox_items_with_conditional_reveal).
|
|
71
|
+
data:
|
|
72
|
+
name: "happy"
|
|
73
|
+
controls: "wrapper"
|
|
74
|
+
item:
|
|
75
|
+
label: "Are you happy?"
|
|
76
|
+
value: "happy"
|
|
77
|
+
checkbox_with_bottom_margin:
|
|
78
|
+
description: By default the component has no bottom margin, this option adds it.
|
|
79
|
+
data:
|
|
80
|
+
name: "behold_my_bottom_margin"
|
|
81
|
+
margin_bottom: true
|
|
82
|
+
item:
|
|
83
|
+
label: "Do you like my bottom margin?"
|
|
84
|
+
value: "bottom_margin"
|
|
85
|
+
|
|
86
|
+
|
|
@@ -30,6 +30,13 @@ examples:
|
|
|
30
30
|
text: "What is your email address?"
|
|
31
31
|
name: "address"
|
|
32
32
|
type: "email"
|
|
33
|
+
with_an_identifier:
|
|
34
|
+
description: Give the input a specific ID.
|
|
35
|
+
data:
|
|
36
|
+
label:
|
|
37
|
+
text: "Has an id"
|
|
38
|
+
name: "hasid"
|
|
39
|
+
id: "hasid"
|
|
33
40
|
aria_described_by:
|
|
34
41
|
description: |
|
|
35
42
|
Allows the addition of an aria-describedby attribute. Note that this will be overridden in the event of an error, where the error will be used for the describedby attribute value.
|
|
@@ -37,9 +44,16 @@ examples:
|
|
|
37
44
|
The example below uses the ID of the main container for demonstration purposes as there aren't any useful elements with IDs in the component guide. In real use this would be passed the ID of an element that correctly described the input.
|
|
38
45
|
data:
|
|
39
46
|
label:
|
|
40
|
-
text: "This
|
|
47
|
+
text: "This is an example only and may not work with a screen reader"
|
|
41
48
|
name: "labelledby"
|
|
42
49
|
describedby: "wrapper"
|
|
50
|
+
aria_controls:
|
|
51
|
+
description: Allows the addition of an aria-controls attribute, for use in places like the finders where the page is updated dynamically after value changes to the input.
|
|
52
|
+
data:
|
|
53
|
+
label:
|
|
54
|
+
text: "This is an example only and will not work with a screen reader as intended"
|
|
55
|
+
name: "controls"
|
|
56
|
+
controls: "wrapper"
|
|
43
57
|
with_hint:
|
|
44
58
|
data:
|
|
45
59
|
label:
|
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: 12.
|
|
4
|
+
version: 12.16.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-11-
|
|
11
|
+
date: 2018-11-30 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: govspeak
|
|
@@ -310,6 +310,7 @@ files:
|
|
|
310
310
|
- app/assets/javascripts/govuk_publishing_components/all_components.js
|
|
311
311
|
- app/assets/javascripts/govuk_publishing_components/components/accessible-autocomplete.js
|
|
312
312
|
- app/assets/javascripts/govuk_publishing_components/components/character-count.js
|
|
313
|
+
- app/assets/javascripts/govuk_publishing_components/components/checkbox.js
|
|
313
314
|
- app/assets/javascripts/govuk_publishing_components/components/checkboxes.js
|
|
314
315
|
- app/assets/javascripts/govuk_publishing_components/components/copy-to-clipboard.js
|
|
315
316
|
- app/assets/javascripts/govuk_publishing_components/components/error-summary.js
|