govuk_publishing_components 45.9.0 → 45.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/add-another.js +124 -0
- data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_add-another.scss +12 -0
- data/app/views/govuk_publishing_components/components/_add_another.html.erb +29 -0
- data/app/views/govuk_publishing_components/components/_fieldset.html.erb +4 -3
- data/app/views/govuk_publishing_components/components/_metadata.html.erb +10 -8
- data/app/views/govuk_publishing_components/components/docs/add_another.yml +48 -0
- data/app/views/govuk_publishing_components/components/docs/metadata.yml +12 -2
- data/lib/govuk_publishing_components/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: e3c082aaa4feaa6d8a0db9a06b6363df3e7f66d4ab725a086ae451b2642ff2da
|
|
4
|
+
data.tar.gz: ac59758ae4497c6e14ba6c276f593848efc6290e0db0a9bf3a0f9d072dd9599f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 96a02d46ad488ed76b391453cf69392f60405e62658edb1bb5daf91a4ec6f6b97e61b32e3913050d12ca16305f7f40f0a11e1c6009be945541ecf068036fa65b
|
|
7
|
+
data.tar.gz: 2996cfb57f6430ee42e873d6425f455423c5509c352064a5f95ff876919e96c40689d479c4ec85f1e4349be9cf7027d8275910e1c9d5e28bef191d7ccc688fd0
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
window.GOVUK = window.GOVUK || {}
|
|
2
|
+
window.GOVUK.Modules = window.GOVUK.Modules || {};
|
|
3
|
+
|
|
4
|
+
(function (Modules) {
|
|
5
|
+
function AddAnother (module) {
|
|
6
|
+
this.module = module
|
|
7
|
+
this.emptyFieldset = undefined
|
|
8
|
+
this.addAnotherButton = undefined
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
function createButton (textContent, additionalClass = '') {
|
|
12
|
+
var button = document.createElement('button')
|
|
13
|
+
button.className = 'gem-c-button govuk-button ' + additionalClass
|
|
14
|
+
button.type = 'button'
|
|
15
|
+
button.textContent = textContent
|
|
16
|
+
return button
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
AddAnother.prototype.init = function () {
|
|
20
|
+
this.createAddAnotherButton()
|
|
21
|
+
this.createRemoveButtons()
|
|
22
|
+
this.removeEmptyFieldset()
|
|
23
|
+
this.updateFieldsetsAndButtons()
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
AddAnother.prototype.createAddAnotherButton = function () {
|
|
27
|
+
this.addAnotherButton =
|
|
28
|
+
createButton(
|
|
29
|
+
this.module.dataset.addButtonText,
|
|
30
|
+
'js-add-another__add-button govuk-button--secondary'
|
|
31
|
+
)
|
|
32
|
+
this.addAnotherButton.addEventListener('click', this.addNewFieldset.bind(this))
|
|
33
|
+
this.module.appendChild(this.addAnotherButton)
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
AddAnother.prototype.createRemoveButton = function (fieldset, removeFunction) {
|
|
37
|
+
var removeButton =
|
|
38
|
+
createButton(
|
|
39
|
+
'Delete',
|
|
40
|
+
'js-add-another__remove-button gem-c-add-another__remove-button govuk-button--warning'
|
|
41
|
+
)
|
|
42
|
+
removeButton.addEventListener('click', function (event) {
|
|
43
|
+
removeFunction(event)
|
|
44
|
+
this.updateFieldsetsAndButtons()
|
|
45
|
+
this.addAnotherButton.focus()
|
|
46
|
+
}.bind(this))
|
|
47
|
+
fieldset.appendChild(removeButton)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
AddAnother.prototype.createRemoveButtons = function () {
|
|
51
|
+
var fieldsets =
|
|
52
|
+
document.querySelectorAll('.js-add-another__fieldset')
|
|
53
|
+
fieldsets.forEach(function (fieldset) {
|
|
54
|
+
this.createRemoveButton(fieldset, this.removeExistingFieldset.bind(this))
|
|
55
|
+
fieldset.querySelector('.js-add-another__destroy-checkbox').hidden = true
|
|
56
|
+
}.bind(this))
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
AddAnother.prototype.removeEmptyFieldset = function () {
|
|
60
|
+
this.emptyFieldset = this.module.querySelector('.js-add-another__empty')
|
|
61
|
+
this.emptyFieldset.remove()
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
AddAnother.prototype.updateFieldsetsAndButtons = function () {
|
|
65
|
+
this.module.querySelectorAll('.js-add-another__fieldset:not([hidden]) > fieldset > legend')
|
|
66
|
+
.forEach(function (legend, index) {
|
|
67
|
+
legend.textContent = this.module.dataset.fieldsetLegend + ' ' + (index + 1)
|
|
68
|
+
}.bind(this))
|
|
69
|
+
|
|
70
|
+
this.module.querySelector('.js-add-another__remove-button').classList.toggle(
|
|
71
|
+
'js-add-another__remove-button--hidden',
|
|
72
|
+
this.module.querySelectorAll('.js-add-another__fieldset:not([hidden])').length === 1
|
|
73
|
+
)
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
AddAnother.prototype.addNewFieldset = function (event) {
|
|
77
|
+
var button = event.target
|
|
78
|
+
var newFieldset = this.emptyFieldset.cloneNode(true)
|
|
79
|
+
newFieldset.classList.remove('js-add-another__empty')
|
|
80
|
+
newFieldset.classList.add('js-add-another__fieldset')
|
|
81
|
+
this.createRemoveButton(newFieldset, this.removeNewFieldset.bind(this))
|
|
82
|
+
button.before(newFieldset)
|
|
83
|
+
|
|
84
|
+
this.incrementAttributes(this.emptyFieldset)
|
|
85
|
+
this.updateFieldsetsAndButtons()
|
|
86
|
+
|
|
87
|
+
// Move focus to first visible field in new set
|
|
88
|
+
newFieldset
|
|
89
|
+
.querySelector('input:not([type="hidden"]), select, textarea')
|
|
90
|
+
.focus()
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
AddAnother.prototype.removeExistingFieldset = function (event) {
|
|
94
|
+
var fieldset = event.target.parentNode
|
|
95
|
+
var destroyCheckbox =
|
|
96
|
+
fieldset.querySelector('.js-add-another__destroy-checkbox input')
|
|
97
|
+
|
|
98
|
+
destroyCheckbox.checked = true
|
|
99
|
+
fieldset.hidden = true
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
AddAnother.prototype.removeNewFieldset = function (event) {
|
|
103
|
+
var fieldset = event.target.parentNode
|
|
104
|
+
fieldset.remove()
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Set attribute values for id, for and name of supplied fieldset
|
|
108
|
+
AddAnother.prototype.incrementAttributes = function (fieldset) {
|
|
109
|
+
var matcher = /(.*[_[])([0-9]+)([_\]].*?)$/
|
|
110
|
+
fieldset
|
|
111
|
+
.querySelectorAll('label, input, select, textarea')
|
|
112
|
+
.forEach(function (element) {
|
|
113
|
+
['name', 'id', 'for'].forEach(function (attribute) {
|
|
114
|
+
var value = element.getAttribute(attribute)
|
|
115
|
+
var matched = matcher.exec(value)
|
|
116
|
+
if (!matched) return
|
|
117
|
+
var index = parseInt(matched[2], 10) + 1
|
|
118
|
+
element.setAttribute(attribute, matched[1] + index + matched[3])
|
|
119
|
+
})
|
|
120
|
+
})
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
Modules.AddAnother = AddAnother
|
|
124
|
+
})(window.GOVUK.Modules)
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
@import "govuk_publishing_components/individual_component_support";
|
|
2
|
+
@import "govuk/components/button/button";
|
|
3
|
+
@import "govuk/components/fieldset/fieldset";
|
|
4
|
+
|
|
5
|
+
.gem-c-add-another__remove-button {
|
|
6
|
+
margin-top: govuk-spacing(6);
|
|
7
|
+
margin-bottom: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.js-add-another__remove-button--hidden {
|
|
11
|
+
display: none;
|
|
12
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<%
|
|
2
|
+
add_gem_component_stylesheet("add-another")
|
|
3
|
+
items ||= []
|
|
4
|
+
empty ||= ""
|
|
5
|
+
fieldset_legend ||= ""
|
|
6
|
+
add_button_text ||= "Add another"
|
|
7
|
+
%>
|
|
8
|
+
|
|
9
|
+
<div data-module="add-another" class="gem-c-add-another" data-add-button-text="<%= add_button_text %>" data-fieldset-legend="<%= fieldset_legend %>">
|
|
10
|
+
<% items.each_with_index do |item, index| %>
|
|
11
|
+
<%= render "govuk_publishing_components/components/fieldset", {
|
|
12
|
+
classes: "js-add-another__fieldset",
|
|
13
|
+
legend_text: "#{fieldset_legend} #{index + 1}",
|
|
14
|
+
heading_size: "m"
|
|
15
|
+
} do %>
|
|
16
|
+
<div class="js-add-another__destroy-checkbox">
|
|
17
|
+
<%= item[:destroy_checkbox] %>
|
|
18
|
+
</div>
|
|
19
|
+
<%= item[:fields] %>
|
|
20
|
+
<% end %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<%= render "govuk_publishing_components/components/fieldset", {
|
|
23
|
+
classes: "js-add-another__empty",
|
|
24
|
+
legend_text: "#{fieldset_legend} #{items.length + 1}",
|
|
25
|
+
heading_size: "m"
|
|
26
|
+
} do %>
|
|
27
|
+
<%= empty %>
|
|
28
|
+
<% end %>
|
|
29
|
+
</div>
|
|
@@ -17,15 +17,16 @@
|
|
|
17
17
|
describedby = error_id
|
|
18
18
|
end
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
|
21
|
+
component_helper.add_class("gem-c-fieldset govuk-form-group")
|
|
22
|
+
component_helper.add_class("govuk-form-group--error") if error_message
|
|
22
23
|
|
|
23
24
|
fieldset_classes = %w(govuk-fieldset)
|
|
24
25
|
|
|
25
26
|
legend_classes = %w(govuk-fieldset__legend)
|
|
26
27
|
legend_classes << "govuk-fieldset__legend--#{heading_size}" if heading_size
|
|
27
28
|
%>
|
|
28
|
-
<%= tag.div
|
|
29
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
|
29
30
|
<%= tag.fieldset class: fieldset_classes, aria: { describedby: describedby }, role: role, id: id do %>
|
|
30
31
|
<% if heading_level %>
|
|
31
32
|
<%= tag.legend class: legend_classes do %>
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
section: "Top",
|
|
36
36
|
}.to_json unless disable_ga4
|
|
37
37
|
%>
|
|
38
|
-
<%= content_tag :div, class: classes, data: { module: "
|
|
38
|
+
<%= content_tag :div, class: classes, data: { module: "metadata" } do %>
|
|
39
39
|
<% if title.present? %>
|
|
40
40
|
<%= content_tag :div, class: "gem-c-metadata__title" do %>
|
|
41
41
|
<%= render "govuk_publishing_components/components/heading", {
|
|
@@ -49,13 +49,13 @@
|
|
|
49
49
|
<dl class="gem-c-metadata__list">
|
|
50
50
|
<% if from.any? %>
|
|
51
51
|
<dt class="gem-c-metadata__term"><%= t("components.metadata.from") %>:</dt>
|
|
52
|
-
<dd class="gem-c-metadata__definition">
|
|
52
|
+
<dd class="gem-c-metadata__definition" data-module="gem-toggle">
|
|
53
53
|
<%= render 'govuk_publishing_components/components/metadata/sentence', items: from, toggle_id: "from-#{SecureRandom.hex(4)}" %>
|
|
54
54
|
</dd>
|
|
55
55
|
<% end %>
|
|
56
56
|
<% if part_of.any? %>
|
|
57
57
|
<dt class="gem-c-metadata__term"><%= t("components.metadata.part_of") %>:</dt>
|
|
58
|
-
<dd class="gem-c-metadata__definition">
|
|
58
|
+
<dd class="gem-c-metadata__definition" data-module="gem-toggle">
|
|
59
59
|
<%= render 'govuk_publishing_components/components/metadata/sentence', items: part_of, toggle_id: "part-of-#{SecureRandom.hex(4)}" %>
|
|
60
60
|
</dd>
|
|
61
61
|
<% end %>
|
|
@@ -88,11 +88,13 @@
|
|
|
88
88
|
<% if definition.any? %>
|
|
89
89
|
<dt class="gem-c-metadata__term"><%= title %>:</dt>
|
|
90
90
|
<dd class="gem-c-metadata__definition"
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
91
|
+
<% if disable_ga4 %>
|
|
92
|
+
data-module="gem-toggle"
|
|
93
|
+
<% else %>
|
|
94
|
+
data-module="gem-toggle ga4-link-tracker"
|
|
95
|
+
data-ga4-track-links-only
|
|
96
|
+
data-ga4-link="<%= ga4_object %>"
|
|
97
|
+
<% end%>>
|
|
96
98
|
<%= render 'govuk_publishing_components/components/metadata/sentence', items: definition, toggle_id: "#{index}-#{SecureRandom.hex(4)}" %>
|
|
97
99
|
</dd>
|
|
98
100
|
<% end %>
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
name: Add another (experimental)
|
|
2
|
+
description: |
|
|
3
|
+
The "add another" component lets users input multiple values for a set of form
|
|
4
|
+
fields.
|
|
5
|
+
body: |
|
|
6
|
+
This component is currently experimental because more research is needed to
|
|
7
|
+
validate it.
|
|
8
|
+
|
|
9
|
+
Applications using this component must include a deletion checkbox in addtion
|
|
10
|
+
to the rendered repeating items as well as an empty field. The checkboxes and
|
|
11
|
+
empty field are required to allow users without javascript to add new items
|
|
12
|
+
and remove existing items from the list. See the examples below for how to do
|
|
13
|
+
this.
|
|
14
|
+
|
|
15
|
+
The example here passes HTML in to the component due to limitations in the
|
|
16
|
+
format of this documentation. In applications it is expected that the caller
|
|
17
|
+
will render other components instead. See Whitehall for
|
|
18
|
+
[examples of this approach](https://github.com/alphagov/whitehall/pull/9644).
|
|
19
|
+
|
|
20
|
+
accessibility_criteria: |
|
|
21
|
+
The form controls within the fieldsets must be fully accessible as per the
|
|
22
|
+
design system guidance for each of the form control components.
|
|
23
|
+
uses_component_wrapper_helper: false
|
|
24
|
+
govuk_frontend_components:
|
|
25
|
+
- button
|
|
26
|
+
examples:
|
|
27
|
+
default:
|
|
28
|
+
data:
|
|
29
|
+
fieldset_legend: "Person"
|
|
30
|
+
add_button_text: "Add another person"
|
|
31
|
+
items:
|
|
32
|
+
- fields: >
|
|
33
|
+
<div class="govuk-form-group">
|
|
34
|
+
<label for="person_0_name" class="gem-c-label govuk-label">Full name</label>
|
|
35
|
+
<input class="gem-c-input govuk-input" id="person_0_name" name="person[0]name">
|
|
36
|
+
</div>
|
|
37
|
+
destroy_checkbox: >
|
|
38
|
+
<div class="govuk-checkboxes" data-module="govuk-checkboxes" data-govuk-checkboxes-init="">
|
|
39
|
+
<div class="govuk-checkboxes__item">
|
|
40
|
+
<input type="checkbox" name="person[0][_destroy]" id="person_0__destroy" class="govuk-checkboxes__input">
|
|
41
|
+
<label for="person_0__destroy" class="govuk-label govuk-checkboxes__label">Delete</label>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
empty:
|
|
45
|
+
<div class="govuk-form-group">
|
|
46
|
+
<label for="person_1_name" class="gem-c-label govuk-label">Full name</label>
|
|
47
|
+
<input class="gem-c-input govuk-input" id="person_1_name" name="person[1]name">
|
|
48
|
+
</div>
|
|
@@ -26,6 +26,9 @@ examples:
|
|
|
26
26
|
first_published: 14 June 2014
|
|
27
27
|
last_updated: 10 September 2015
|
|
28
28
|
updated_with_links_to_see_details:
|
|
29
|
+
description: If a `last_updated` value exists and `see_updates_link` is set to true,
|
|
30
|
+
a "See all updates" link will be shown. The link's href will be set to `#full-publication-update-history`,
|
|
31
|
+
taking users to the change history on the same page and expanding the section, if expandable, for example, [changes to the rates of capital gains tax](https://www.gov.uk/government/publications/changes-to-the-rates-of-capital-gains-tax)
|
|
29
32
|
data:
|
|
30
33
|
last_updated: 10 September 2015
|
|
31
34
|
see_updates_link: true
|
|
@@ -46,8 +49,15 @@ examples:
|
|
|
46
49
|
- <a href='/government/topics/environment'>Environment</a>
|
|
47
50
|
other:
|
|
48
51
|
Related topics:
|
|
49
|
-
- <a href='/government/topics/
|
|
50
|
-
- <a href='/government/topics/
|
|
52
|
+
- <a href='/government/topics/topic-1'>Topic 1</a>
|
|
53
|
+
- <a href='/government/topics/topic-2'>Topic 2</a>
|
|
54
|
+
- <a href='/government/topics/topic-3'>Topic 3</a>
|
|
55
|
+
- <a href='/government/topics/topic-4'>Topic 4</a>
|
|
56
|
+
- <a href='/government/topics/topic-5'>Topic 5</a>
|
|
57
|
+
- <a href='/government/topics/topic-6'>Topic 6</a>
|
|
58
|
+
- <a href='/government/topics/topic-7'>Topic 7</a>
|
|
59
|
+
- <a href='/government/topics/topic-8'>Topic 8</a>
|
|
60
|
+
- <a href='/government/topics/topic-9'>Topic 9</a>
|
|
51
61
|
Applies to: England
|
|
52
62
|
extensive_specialist_document:
|
|
53
63
|
data:
|
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: 45.
|
|
4
|
+
version: 45.10.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: 2024-11-
|
|
11
|
+
date: 2024-11-28 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: chartkick
|
|
@@ -462,6 +462,7 @@ files:
|
|
|
462
462
|
- app/assets/javascripts/govuk_publishing_components/analytics-ga4/init-ga4.js
|
|
463
463
|
- app/assets/javascripts/govuk_publishing_components/analytics-ga4/pii-remover.js
|
|
464
464
|
- app/assets/javascripts/govuk_publishing_components/components/accordion.js
|
|
465
|
+
- app/assets/javascripts/govuk_publishing_components/components/add-another.js
|
|
465
466
|
- app/assets/javascripts/govuk_publishing_components/components/button.js
|
|
466
467
|
- app/assets/javascripts/govuk_publishing_components/components/character-count.js
|
|
467
468
|
- app/assets/javascripts/govuk_publishing_components/components/chart.js
|
|
@@ -516,6 +517,7 @@ files:
|
|
|
516
517
|
- app/assets/stylesheets/govuk_publishing_components/component_support.scss
|
|
517
518
|
- app/assets/stylesheets/govuk_publishing_components/components/_accordion.scss
|
|
518
519
|
- app/assets/stylesheets/govuk_publishing_components/components/_action-link.scss
|
|
520
|
+
- app/assets/stylesheets/govuk_publishing_components/components/_add-another.scss
|
|
519
521
|
- app/assets/stylesheets/govuk_publishing_components/components/_attachment-link.scss
|
|
520
522
|
- app/assets/stylesheets/govuk_publishing_components/components/_attachment.scss
|
|
521
523
|
- app/assets/stylesheets/govuk_publishing_components/components/_back-link.scss
|
|
@@ -656,6 +658,7 @@ files:
|
|
|
656
658
|
- app/views/govuk_publishing_components/component_guide/show.html.erb
|
|
657
659
|
- app/views/govuk_publishing_components/components/_accordion.html.erb
|
|
658
660
|
- app/views/govuk_publishing_components/components/_action_link.html.erb
|
|
661
|
+
- app/views/govuk_publishing_components/components/_add_another.html.erb
|
|
659
662
|
- app/views/govuk_publishing_components/components/_attachment.html.erb
|
|
660
663
|
- app/views/govuk_publishing_components/components/_attachment_link.html.erb
|
|
661
664
|
- app/views/govuk_publishing_components/components/_back_link.html.erb
|
|
@@ -751,6 +754,7 @@ files:
|
|
|
751
754
|
- app/views/govuk_publishing_components/components/cross_service_header/_service_header.html.erb
|
|
752
755
|
- app/views/govuk_publishing_components/components/docs/accordion.yml
|
|
753
756
|
- app/views/govuk_publishing_components/components/docs/action_link.yml
|
|
757
|
+
- app/views/govuk_publishing_components/components/docs/add_another.yml
|
|
754
758
|
- app/views/govuk_publishing_components/components/docs/attachment.yml
|
|
755
759
|
- app/views/govuk_publishing_components/components/docs/attachment_link.yml
|
|
756
760
|
- app/views/govuk_publishing_components/components/docs/back_link.yml
|