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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 14c4af4e8ba4264803e67952e87624883f62f6f079fa8e2b0b24a7d989dc496c
4
- data.tar.gz: 74a997044718a86a19b65b099a85f8e38f3e86d6416416917e8ea929742e8bb5
3
+ metadata.gz: ba6618b411d78aa56cf9abaff10626fd71d4f213b1cdcaeddfafc1d2f77984d2
4
+ data.tar.gz: b617f868fad8afb6f02497ac19c276fe1150f0e3f6037d2fde4b4b67dd5fa8e9
5
5
  SHA512:
6
- metadata.gz: ae66caf2ec9b4ba8692fab56ebf482ca9a410818e48c8c0c6e82e832dd11d809370c9a9cf2f1e87ae9fc63e3df943cd47a54650abe4bffbe0b158f6614d0450d
7
- data.tar.gz: f78eb8ed3333b259bdcbe86a7b24f7e7e762f6bd212085fcb9af9d9229147f9285d845142a1918dd748f90a8d87e3abbebad04c7709d78ae18273058dd44685e
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)
@@ -10,6 +10,7 @@
10
10
  // components
11
11
  @import "components/accordion";
12
12
  @import "components/action-link";
13
+ @import "components/add-another";
13
14
  @import "components/attachment";
14
15
  @import "components/attachment-link";
15
16
  @import "components/back-link";
@@ -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
- css_classes = %w(gem-c-fieldset govuk-form-group)
21
- css_classes << "govuk-form-group--error" if error_message
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 class: css_classes do %>
29
- <%= tag.fieldset class: fieldset_classes, aria: { describedby: describedby }, role: role, id: id do %>
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: "gem-toggle metadata" } do %>
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
- <% unless disable_ga4 %>
92
- data-module="ga4-link-tracker"
93
- data-ga4-track-links-only
94
- data-ga4-link="<%= ga4_object %>"
95
- <% end%>>
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>
@@ -6,6 +6,7 @@ body: |
6
6
  You can use the `text` property or pass `text` as a block.
7
7
  accessibility_criteria: |
8
8
  - must give inputs within the fieldset context with legend text
9
+ uses_component_wrapper_helper: true
9
10
  examples:
10
11
  default:
11
12
  data:
@@ -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/arts-and-culture'>Arts and culture</a>
50
- - <a href='/government/topics/sports-and-leisure'>Sports and leisure</a>
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:
@@ -1,3 +1,3 @@
1
1
  module GovukPublishingComponents
2
- VERSION = "45.9.0".freeze
2
+ VERSION = "46.0.0".freeze
3
3
  end
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.9.0
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-26 00:00:00.000000000 Z
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