govuk_publishing_components 12.9.1 → 12.10.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/checkboxes.js +42 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_checkbox.scss +2 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss +11 -0
- data/app/views/govuk_publishing_components/components/_checkbox.html.erb +23 -0
- data/app/views/govuk_publishing_components/components/_checkboxes.html.erb +28 -21
- data/app/views/govuk_publishing_components/components/docs/checkbox.yml +37 -0
- data/app/views/govuk_publishing_components/components/docs/checkboxes.yml +23 -4
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +4 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 232e20cae276803302aa437940d4f806de53fc2d6dae36e901682847f727c738
|
|
4
|
+
data.tar.gz: d2381cb3ac59795f5f05f5df10e9f6bb14489a07b1c473d320b1b41fe970c5a3
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7b8a94ea7869a1831636b438700f769505f6a7b69c0af454fa4adb0796244e2b6f63cd39618c45d836c698db8b016224c905313c9efcaa95a9b4281133306e48
|
|
7
|
+
data.tar.gz: ed1431b12bc73d3c48db73d7f9c7e0540fde21bb09a8217c177bd7e5cc897a60a5aff12cbc654a1acfa8ef36e2bcc1231a2fecb234af35bd270f26b911ed89b2
|
|
@@ -1,2 +1,44 @@
|
|
|
1
1
|
// This component relies on JavaScript from GOV.UK Frontend
|
|
2
2
|
//= require govuk-frontend/components/checkboxes/checkboxes.js
|
|
3
|
+
|
|
4
|
+
window.GOVUK = window.GOVUK || {}
|
|
5
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
6
|
+
(function (Modules) {
|
|
7
|
+
'use strict'
|
|
8
|
+
Modules.Checkboxes = function () {
|
|
9
|
+
this.start = function (scope) {
|
|
10
|
+
var _this = this;
|
|
11
|
+
|
|
12
|
+
$(scope).find('[data-nested=true] input[type=checkbox]').on('change', function(e) {
|
|
13
|
+
var checkbox = e.target;
|
|
14
|
+
var isNested = $(checkbox).closest('.govuk-checkboxes--nested');
|
|
15
|
+
var hasNested = $('.govuk-checkboxes--nested[data-parent=' + checkbox.id + ']');
|
|
16
|
+
|
|
17
|
+
if (hasNested.length) {
|
|
18
|
+
_this.toggleNestedCheckboxes(hasNested, checkbox);
|
|
19
|
+
} else if (isNested.length) {
|
|
20
|
+
_this.toggleParentCheckbox(isNested, checkbox);
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
this.toggleNestedCheckboxes = function(scope, checkbox) {
|
|
26
|
+
if (checkbox.checked) {
|
|
27
|
+
scope.find('input[type=checkbox]').prop("checked", true);
|
|
28
|
+
} else {
|
|
29
|
+
scope.find('input[type=checkbox]').prop("checked", false);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
this.toggleParentCheckbox = function(scope, checkbox) {
|
|
34
|
+
var siblings = $(checkbox).parent('.govuk-checkboxes__item').siblings();
|
|
35
|
+
var parent_id = scope.data('parent');
|
|
36
|
+
|
|
37
|
+
if (checkbox.checked && siblings.length == siblings.find(':checked').length) {
|
|
38
|
+
$('#' + parent_id).prop("checked", true);
|
|
39
|
+
} else {
|
|
40
|
+
$('#' + parent_id).prop("checked", false);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
})(window.GOVUK.Modules);
|
|
@@ -1,2 +1,13 @@
|
|
|
1
1
|
@import "helpers/govuk-frontend-settings";
|
|
2
2
|
@import "govuk-frontend/components/checkboxes/checkboxes";
|
|
3
|
+
|
|
4
|
+
.govuk-checkboxes--nested {
|
|
5
|
+
margin-left: (govuk-spacing(3) + 3px);
|
|
6
|
+
padding-left: govuk-spacing(4);
|
|
7
|
+
box-sizing: border-box;
|
|
8
|
+
border-left-style: solid;
|
|
9
|
+
border-left-width: 4px;
|
|
10
|
+
border-color: govuk-colour('grey-2');
|
|
11
|
+
padding: govuk-spacing(2) govuk-spacing(4);
|
|
12
|
+
margin-bottom: govuk-spacing(3);
|
|
13
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<%
|
|
2
|
+
id ||= "checkbox-#{SecureRandom.hex(4)}"
|
|
3
|
+
index ||= rand(1..100)
|
|
4
|
+
name = item[:name].present? ? item[:name] : name
|
|
5
|
+
%>
|
|
6
|
+
|
|
7
|
+
<%= tag.div class: "gem-c-checkbox govuk-checkboxes__item" do %>
|
|
8
|
+
<%= tag.input id: "#{id}-#{index}",
|
|
9
|
+
name: name,
|
|
10
|
+
type: "checkbox",
|
|
11
|
+
value: item[:value],
|
|
12
|
+
class: "govuk-checkboxes__input",
|
|
13
|
+
checked: item[:checked].present? ? "checked" : nil,
|
|
14
|
+
aria: {
|
|
15
|
+
describedby: item[:hint].present? ? "#{id}-#{index}-item-hint" : nil,
|
|
16
|
+
controls: item[:conditional].present? ? "#{id}-conditional-#{index}" : nil
|
|
17
|
+
} do %>
|
|
18
|
+
<%= tag.label item[:label], class: "govuk-label govuk-checkboxes__label", for: "#{id}-#{index}" %>
|
|
19
|
+
<% if item[:hint].present? %>
|
|
20
|
+
<%= tag.span item[:hint], id: "#{id}-#{index}-item-hint", class: "govuk-hint govuk-checkboxes__hint" %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
<% end %>
|
|
@@ -5,18 +5,22 @@
|
|
|
5
5
|
css_classes << classes if classes
|
|
6
6
|
error ||= nil
|
|
7
7
|
css_classes << "govuk-form-group--error" if error
|
|
8
|
+
heading ||= nil
|
|
8
9
|
hint_text ||= "Select all that apply."
|
|
9
10
|
items ||= []
|
|
10
11
|
|
|
11
12
|
# check if any item is set as being conditional
|
|
12
13
|
has_conditional = items.any? { |item| item.is_a?(Hash) && item[:conditional] }
|
|
14
|
+
has_nested = items.any? { |item| item.is_a?(Hash) && item[:items] }
|
|
13
15
|
%>
|
|
14
16
|
|
|
15
|
-
<%= tag.div id: id, class: css_classes do %>
|
|
17
|
+
<%= tag.div id: id, class: css_classes, data: { module: "checkboxes" } do %>
|
|
16
18
|
<%= tag.fieldset class: "govuk-fieldset", "aria-describedby": "#{id}-hint #{"#{id}-error" if error}" do %>
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
<%= tag.
|
|
20
|
+
<% if heading.present? %>
|
|
21
|
+
<%= tag.legend class: "govuk-fieldset__legend govuk-fieldset__legend--xl" do %>
|
|
22
|
+
<%= tag.h1 heading, class: "govuk-fieldset__heading" %>
|
|
23
|
+
<% end %>
|
|
20
24
|
<% end %>
|
|
21
25
|
|
|
22
26
|
<%= tag.span hint_text, id: "#{id}-hint", class: "govuk-hint" %>
|
|
@@ -26,29 +30,32 @@
|
|
|
26
30
|
<% end %>
|
|
27
31
|
|
|
28
32
|
<%= tag.div class: "govuk-checkboxes", data: {
|
|
29
|
-
module: ('checkboxes' if has_conditional)
|
|
33
|
+
module: ('checkboxes' if has_conditional),
|
|
34
|
+
nested: ('true' if has_nested),
|
|
30
35
|
} do %>
|
|
31
36
|
<% items.each_with_index do |item, index| %>
|
|
32
|
-
<%=
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
checked: item[:checked].present? ? "checked" : nil,
|
|
39
|
-
aria: {
|
|
40
|
-
describedby: item[:hint].present? ? "#{id}-#{index}-item-hint" : nil,
|
|
41
|
-
controls: item[:conditional].present? ? "#{id}-conditional-#{index}" : nil
|
|
42
|
-
} do %>
|
|
43
|
-
<%= tag.label item[:label], class: "govuk-label govuk-checkboxes__label", for: "#{id}-#{index}" %>
|
|
44
|
-
<% if item[:hint].present? %>
|
|
45
|
-
<%= tag.span item[:hint], id: "#{id}-#{index}-item-hint", class: "govuk-hint govuk-checkboxes__hint" %>
|
|
46
|
-
<% end %>
|
|
47
|
-
<% end %>
|
|
48
|
-
<% end %>
|
|
37
|
+
<%= render 'govuk_publishing_components/components/checkbox', {
|
|
38
|
+
id: id,
|
|
39
|
+
name: name,
|
|
40
|
+
item: item,
|
|
41
|
+
index: index,
|
|
42
|
+
} %>
|
|
49
43
|
<% if item[:conditional] %>
|
|
50
44
|
<%= tag.div item[:conditional], id: "#{id}-conditional-#{index}", class: "govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden" %>
|
|
51
45
|
<% end %>
|
|
46
|
+
|
|
47
|
+
<% if item[:items].present? %>
|
|
48
|
+
<%= tag.div id: "#{id}-nested-#{index}", class: "govuk-checkboxes govuk-checkboxes--nested", data: { parent: "#{id}-#{index}" } do %>
|
|
49
|
+
<% item[:items].each_with_index do |nested_item, nested_index| %>
|
|
50
|
+
<%= render 'govuk_publishing_components/components/checkbox', {
|
|
51
|
+
id: id,
|
|
52
|
+
name: name,
|
|
53
|
+
item: nested_item,
|
|
54
|
+
index: "#{index}-#{nested_index}",
|
|
55
|
+
} %>
|
|
56
|
+
<% end %>
|
|
57
|
+
<% end %>
|
|
58
|
+
<% end %>
|
|
52
59
|
<% end %>
|
|
53
60
|
<% end %>
|
|
54
61
|
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
name: Checkbox
|
|
2
|
+
description: Let users select one or more options by using the checkboxes component.
|
|
3
|
+
body: This component is used by [Form checkboxes component](/component-guide/checkboxes).
|
|
4
|
+
govuk_frontend_components:
|
|
5
|
+
- checkboxes
|
|
6
|
+
accessibility_criteria: |
|
|
7
|
+
The component must:
|
|
8
|
+
|
|
9
|
+
- accept focus
|
|
10
|
+
- be focusable with a keyboard
|
|
11
|
+
- be usable with a keyboard
|
|
12
|
+
- be usable with touch
|
|
13
|
+
- indicate when they have focus
|
|
14
|
+
- have correctly associated labels
|
|
15
|
+
|
|
16
|
+
Labels use the [label component](/component-guide/label).
|
|
17
|
+
examples:
|
|
18
|
+
default:
|
|
19
|
+
data:
|
|
20
|
+
name: "favourite_colour_default"
|
|
21
|
+
item:
|
|
22
|
+
label: "Red"
|
|
23
|
+
value: "red_colour"
|
|
24
|
+
checkbox_with_hint:
|
|
25
|
+
data:
|
|
26
|
+
name: "favourite_colour_checkbox_with_hint"
|
|
27
|
+
item:
|
|
28
|
+
label: "Red"
|
|
29
|
+
value: "red_colour"
|
|
30
|
+
hint: "This is the colour red."
|
|
31
|
+
checkbox_with_checked:
|
|
32
|
+
data:
|
|
33
|
+
name: "favourite_colour_checkbox_with_checked"
|
|
34
|
+
item:
|
|
35
|
+
label: "Red"
|
|
36
|
+
value: "red_colour"
|
|
37
|
+
checked: true
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
name: Form checkboxes
|
|
2
|
-
description:
|
|
2
|
+
description: Let users select one or more options by using the checkboxes component.
|
|
3
|
+
body: This component uses [Checkbox component](/component-guide/checkbox).
|
|
3
4
|
govuk_frontend_components:
|
|
4
5
|
- checkboxes
|
|
5
6
|
accessibility_criteria: |
|
|
@@ -10,10 +11,7 @@ accessibility_criteria: |
|
|
|
10
11
|
- be usable with a keyboard
|
|
11
12
|
- be usable with touch
|
|
12
13
|
- indicate when they have focus
|
|
13
|
-
- be recognisable as form textarea elements
|
|
14
14
|
- have correctly associated labels
|
|
15
|
-
- inform the user about the character limit
|
|
16
|
-
- inform the user as the number of left characters changes
|
|
17
15
|
|
|
18
16
|
Labels use the [label component](/component-guide/label).
|
|
19
17
|
examples:
|
|
@@ -93,3 +91,24 @@ examples:
|
|
|
93
91
|
value: "irish"
|
|
94
92
|
- label: "Other"
|
|
95
93
|
value: "other"
|
|
94
|
+
checkbox_items_with_checked_items:
|
|
95
|
+
data:
|
|
96
|
+
name: "favourite_colour"
|
|
97
|
+
heading: "What is your favourite colour?"
|
|
98
|
+
items:
|
|
99
|
+
- label: "Red"
|
|
100
|
+
value: "red"
|
|
101
|
+
items:
|
|
102
|
+
- label: "Light Red"
|
|
103
|
+
value: "light_red"
|
|
104
|
+
- label: "Dark Red"
|
|
105
|
+
value: "dark_red"
|
|
106
|
+
- label: "Blue"
|
|
107
|
+
value: "blue"
|
|
108
|
+
items:
|
|
109
|
+
- label: "Light blue"
|
|
110
|
+
value: "light_blue"
|
|
111
|
+
- label: "Dark blue"
|
|
112
|
+
value: "dark_blue"
|
|
113
|
+
- label: "Other"
|
|
114
|
+
value: "other"
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
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.10.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
@@ -328,6 +328,7 @@ files:
|
|
|
328
328
|
- app/assets/stylesheets/govuk_publishing_components/components/_breadcrumbs.scss
|
|
329
329
|
- app/assets/stylesheets/govuk_publishing_components/components/_button.scss
|
|
330
330
|
- app/assets/stylesheets/govuk_publishing_components/components/_character-count.scss
|
|
331
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_checkbox.scss
|
|
331
332
|
- app/assets/stylesheets/govuk_publishing_components/components/_checkboxes.scss
|
|
332
333
|
- app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss
|
|
333
334
|
- app/assets/stylesheets/govuk_publishing_components/components/_copy-to-clipboard.scss
|
|
@@ -437,6 +438,7 @@ files:
|
|
|
437
438
|
- app/views/govuk_publishing_components/components/_breadcrumbs.html.erb
|
|
438
439
|
- app/views/govuk_publishing_components/components/_button.html.erb
|
|
439
440
|
- app/views/govuk_publishing_components/components/_character_count.html.erb
|
|
441
|
+
- app/views/govuk_publishing_components/components/_checkbox.html.erb
|
|
440
442
|
- app/views/govuk_publishing_components/components/_checkboxes.html.erb
|
|
441
443
|
- app/views/govuk_publishing_components/components/_contents_list.html.erb
|
|
442
444
|
- app/views/govuk_publishing_components/components/_contextual_breadcrumbs.html.erb
|
|
@@ -498,6 +500,7 @@ files:
|
|
|
498
500
|
- app/views/govuk_publishing_components/components/docs/breadcrumbs.yml
|
|
499
501
|
- app/views/govuk_publishing_components/components/docs/button.yml
|
|
500
502
|
- app/views/govuk_publishing_components/components/docs/character_count.yml
|
|
503
|
+
- app/views/govuk_publishing_components/components/docs/checkbox.yml
|
|
501
504
|
- app/views/govuk_publishing_components/components/docs/checkboxes.yml
|
|
502
505
|
- app/views/govuk_publishing_components/components/docs/contents_list.yml
|
|
503
506
|
- app/views/govuk_publishing_components/components/docs/contextual_breadcrumbs.yml
|