govuk_publishing_components 45.9.0 → 46.0.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/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 +5 -5
- 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/fieldset.yml +1 -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: ba6618b411d78aa56cf9abaff10626fd71d4f213b1cdcaeddfafc1d2f77984d2
|
4
|
+
data.tar.gz: b617f868fad8afb6f02497ac19c276fe1150f0e3f6037d2fde4b4b67dd5fa8e9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ea7037c2089b2d7bb288866930dee22f52780aeb0a19c953e1d1003d3092c8d785b4ec8c1570031c9a410216c257300e55f07d61e813567f1fb6de8041796844
|
7
|
+
data.tar.gz: 8f5d89fca3b5e18852e09ecb3437fcaa20da070a77b7bcdcdba355cb6e08ad3f622c24adc448a24f455279e3d481e14d005d3b2342c19b337619bbce173c0e48
|
@@ -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>
|
@@ -10,23 +10,23 @@
|
|
10
10
|
heading_size = false unless shared_helper.valid_heading_size?(heading_size)
|
11
11
|
error_message ||= nil
|
12
12
|
error_id ||= nil
|
13
|
-
id ||= nil
|
14
13
|
|
15
14
|
if error_message
|
16
15
|
error_id = "error-#{SecureRandom.hex(4)}" unless error_id
|
17
16
|
describedby = error_id
|
18
17
|
end
|
19
18
|
|
20
|
-
|
21
|
-
|
19
|
+
component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
|
20
|
+
component_helper.add_class("gem-c-fieldset govuk-form-group")
|
21
|
+
component_helper.add_class("govuk-form-group--error") if error_message
|
22
22
|
|
23
23
|
fieldset_classes = %w(govuk-fieldset)
|
24
24
|
|
25
25
|
legend_classes = %w(govuk-fieldset__legend)
|
26
26
|
legend_classes << "govuk-fieldset__legend--#{heading_size}" if heading_size
|
27
27
|
%>
|
28
|
-
<%= tag.div
|
29
|
-
<%= tag.fieldset class: fieldset_classes, aria: { describedby: describedby }, role: role
|
28
|
+
<%= tag.div(**component_helper.all_attributes) do %>
|
29
|
+
<%= tag.fieldset class: fieldset_classes, aria: { describedby: describedby }, role: role do %>
|
30
30
|
<% if heading_level %>
|
31
31
|
<%= tag.legend class: legend_classes do %>
|
32
32
|
<%= content_tag(
|
@@ -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:
|
4
|
+
version: 46.0.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-29 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
|