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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d4fe8b79d00d6b9e3266f122e6fc88a6f01ea7503f3ca421b9ca66140f0af06a
4
- data.tar.gz: 10e44a5bbf1843aa04c4d6a48c52a143332b6ae9056b372f3f9698e3e3ad06f9
3
+ metadata.gz: 232e20cae276803302aa437940d4f806de53fc2d6dae36e901682847f727c738
4
+ data.tar.gz: d2381cb3ac59795f5f05f5df10e9f6bb14489a07b1c473d320b1b41fe970c5a3
5
5
  SHA512:
6
- metadata.gz: 01c43e0f7a1abb2a552433dde6952c016d3fe1f1ef6d9051a417a94267378ee0c5ac2ec2d052b9d31aa77c4564cdb13cb4221a295041cc4b2ea7df0570302144
7
- data.tar.gz: a30dafd6bcc3a6903fe07d3371d140ea88f25fe55e7addb681bab7785c2d56f33b6430c98209c733a77913b776bc7e8b578f6eda0abc9c34954606cdd00858a8
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);
@@ -0,0 +1,2 @@
1
+ @import "helpers/govuk-frontend-settings";
2
+ @import "govuk-frontend/components/checkboxes/checkboxes";
@@ -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
- <%= tag.legend class: "govuk-fieldset__legend govuk-fieldset__legend--xl" do %>
19
- <%= tag.h1 heading, class: "govuk-fieldset__heading" %>
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
- <%= tag.div class: "govuk-checkboxes__item" do %>
33
- <%= tag.input id: "#{id}-#{index}",
34
- name: name,
35
- type: "checkbox",
36
- value: item[:value],
37
- class: "govuk-checkboxes__input",
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: Help users enter text when there is a limit on the number of characters they can type
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"
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = '12.9.1'.freeze
2
+ VERSION = '12.10.0'.freeze
3
3
  end
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.9.1
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