govuk_publishing_components 12.9.1 → 12.10.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/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
|