govuk_publishing_components 45.9.0 → 46.0.0

Sign up to get free protection for your applications and to get access to all the features.
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