@planning-inspectorate/dynamic-forms 3.8.3 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.8.3",
+  "version": "3.10.0",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",

package/src/components/address/index.njk

@@ -2,7 +2,6 @@
 
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% set addressLine1= question.fieldName + "_addressLine1" %}
 {% set addressLine2= question.fieldName + "_addressLine2" %}
@@ -97,11 +96,7 @@
                             text: errors[postcode].msg
                         }
                     }) }}
-                    {{ govukButton({
-                        text: continueButtonText,
-                        type: "submit",
-                        attributes: { "data-cy":"button-save-and-continue"}
-                    }) }}
+                    {% include "components/utils/actions.njk" %}
                 {% endcall %}
             </form>
         </div>

package/src/components/boolean/index.njk

@@ -2,7 +2,6 @@
 
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% if question.html %}
     {% set htmlHint %}
@@ -55,11 +54,7 @@
                         items: question.options
                     }) }}
                 {% endif %}
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/boolean/question.js

@@ -46,6 +46,7 @@ export default class BooleanQuestion extends RadioQuestion {
 	 * @param {Array.<import('../../questions/options-question.js').Option>} [params.options]
 	 * @param {Array.<import('#base-validator').BaseValidator>} [params.validators]
 	 * @param {boolean} [params.editable]
+	 * @param {import('#question-types').QuestionParameters['viewData']} [params.viewData]
 	 */
 	constructor({
 		title,
@@ -59,7 +60,8 @@ export default class BooleanQuestion extends RadioQuestion {
 		validators,
 		interfaceType = 'radio',
 		options,
-		editable
+		editable,
+		viewData
 	}) {
 		let defaultOptions = options || [
 			{
@@ -90,7 +92,8 @@ export default class BooleanQuestion extends RadioQuestion {
 			options: defaultOptions,
 			validators,
 			html,
-			editable
+			editable,
+			viewData
 		});
 
 		this.interfaceType = interfaceType;

package/src/components/checkbox/index.njk

@@ -1,7 +1,6 @@
 {% extends layoutTemplate %}
 
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% block dynQuestionContent %}
     <div class="govuk-grid-row">
@@ -27,11 +26,7 @@
                     },
                     items: question.options
                 }) }}
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/checkbox/question.js

@@ -21,8 +21,9 @@ export default class CheckboxQuestion extends OptionsQuestion {
 	 * @param {string} [params.description]
 	 * @param {Array.<import('../../questions/options-question.js').Option>} params.options
 	 * @param {Array.<import('#base-validator').BaseValidator>} [params.validators]
+	 * @param {import('#question-types').QuestionParameters['viewData']} [params.viewData]
 	 */
-	constructor({ title, question, fieldName, url, pageTitle, description, options, validators }) {
+	constructor({ title, question, fieldName, url, pageTitle, description, options, validators, viewData }) {
 		super({
 			title,
 			question,
@@ -32,7 +33,8 @@ export default class CheckboxQuestion extends OptionsQuestion {
 			pageTitle,
 			description,
 			options,
-			validators
+			validators,
+			viewData
 		});
 
 		this.optionJoinString = defaultOptionJoinString;

package/src/components/date/index.njk

@@ -1,7 +1,6 @@
 {% extends layoutTemplate %}
 
 {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% set day= question.fieldName + "_day" %}
 {% set month= question.fieldName + "_month" %}
@@ -62,26 +61,7 @@
                     {{ beforeSubmitButton }}
                 {% endif %}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
-                {% if extraActionButtons|length %}
-                    {% for extraActionButton in extraActionButtons %}
-                        {{ govukButton({
-                            text: extraActionButton.text,
-                            type: extraActionButton.type,
-                            href: extraActionButton.href,
-                            attributes: {
-                                "formaction": extraActionButton.formaction or "",
-                                "data-cy": "button-" + extraActionButton.text|lower|replace(" ", "-"),
-                                "name": extraActionButton.text|lower|replace(" ", "-")
-                            },
-                            classes: extraActionButton.classes or "govuk-button--secondary"
-                        }) }}
-                    {% endfor %}
-                {% endif %}
+                {%- include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/date-period/index.njk

@@ -1,7 +1,6 @@
 {% extends layoutTemplate %}
 
 {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
 
 {% set startFieldName = question.fieldName + "_start" %}
@@ -117,11 +116,7 @@
                     ]
                 }) }}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/date-time/index.njk

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/select/macro.njk" import govukSelect %}
@@ -117,11 +116,7 @@
                     </fieldset>
                 </div>
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/identifier/index.njk

@@ -2,7 +2,6 @@
 
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/label/macro.njk" import govukLabel %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% block dynQuestionContent %}
     <div class="govuk-grid-row">
@@ -56,11 +55,7 @@
 
                 {% endif %}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/manage-list/index.njk

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% block dynQuestionContent %}
     <div class="govuk-grid-row">
@@ -50,11 +49,7 @@
                     <a href="{{ util.trimTrailingSlash(originalUrl) }}/{{ question.addAnotherLink }}" class="govuk-link">Add another</a>
                 </p>
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/multi-field-input/index.njk

@@ -3,7 +3,6 @@
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/label/macro.njk" import govukLabel %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% set inputFields = question.value %}
 
@@ -63,12 +62,7 @@
 
                 {% endcall %}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
-
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/number-entry/index.njk

@@ -1,7 +1,6 @@
 {% extends layoutTemplate %}
 
 {% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% block dynQuestionContent %}
     <div class="govuk-grid-row">
@@ -33,11 +32,7 @@
                     inputmode: 'numeric',
                     spellcheck: false
                 }) }}
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" -%}
             </form>
         </div>
     </div>

package/src/components/radio/index.njk

@@ -1,7 +1,6 @@
 {% extends layoutTemplate %}
 
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
 
 {% block dynQuestionContent %}
@@ -70,26 +69,7 @@
 
                 {% endif %}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
-                {% if extraActionButtons|length %}
-                    {% for extraActionButton in extraActionButtons %}
-                        {{ govukButton({
-                            text: extraActionButton.text,
-                            type: extraActionButton.type,
-                            href: extraActionButton.href,
-                            attributes: {
-                                "formaction": extraActionButton.formaction or "",
-                                "data-cy": "button-" + extraActionButton.text|lower|replace(" ", "-"),
-                                "name": extraActionButton.text|lower|replace(" ", "-")
-                            },
-                            classes: extraActionButton.classes or "govuk-button--secondary"
-                        }) }}
-                    {% endfor %}
-                {% endif %}
+                {%- include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/select/index.njk

@@ -1,10 +1,11 @@
 {% extends layoutTemplate %}
 
 {% from "govuk/components/select/macro.njk" import govukSelect %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% block head %}
-    <link rel="stylesheet" href="/assets/css/accessible-autocomplete.min.css"/>
+    {% if not question.disableAccessibleAutocomplete %}
+        <link rel="stylesheet" href="/assets/css/accessible-autocomplete.min.css"/>
+    {% endif %}
 
     {{ super() }}
 {% endblock %}
@@ -36,47 +37,29 @@
                     items: question.options
                 }) }}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
-
-                {% if extraActionButtons|length %}
-                    {% for extraActionButton in extraActionButtons %}
-                        {{ govukButton({
-                            text: extraActionButton.text,
-                            type: extraActionButton.type,
-                            href: extraActionButton.href,
-                            attributes: {
-                                "formaction": extraActionButton.formaction or "",
-                                "data-cy": "button-" + extraActionButton.text|lower|replace(" ", "-"),
-                                "name": extraActionButton.text|lower|replace(" ", "-")
-                            },
-                            classes: extraActionButton.classes or "govuk-button--secondary"
-                        }) }}
-                    {% endfor %}
-                {% endif %}
 
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>
-    <script src="/assets/js/accessible-autocomplete.min.js"></script>
-    <script {% if cspNonce %}nonce={{ cspNonce }}{% endif %}>
-        if (window.accessibleAutocomplete) {
-            accessibleAutocomplete.enhanceSelectElement({
-                selectElement: document.querySelector('#{{ question.fieldName }}'),
-                onConfirm: () => {
-                    let input = document.querySelector('#{{ question.fieldName }}');
-                    let select = document.querySelector('#{{ question.fieldName }}-select');
-                    let options = Array.from(select.options);
-                    if (!input.value || !options.some(option => option.innerText === input.value)) {
-                        select.options.selectedIndex = -1;
-                    } else {
-                        select.options.selectedIndex = options.findIndex(option => option.innerText === input.value);
+    {% if not question.disableAccessibleAutocomplete %}
+        <script src="/assets/js/accessible-autocomplete.min.js"></script>
+        <script {% if cspNonce %}nonce={{ cspNonce }}{% endif %}>
+            if (window.accessibleAutocomplete) {
+                accessibleAutocomplete.enhanceSelectElement({
+                    selectElement: document.querySelector('#{{ question.fieldName }}'),
+                    onConfirm: () => {
+                        let input = document.querySelector('#{{ question.fieldName }}');
+                        let select = document.querySelector('#{{ question.fieldName }}-select');
+                        let options = Array.from(select.options);
+                        if (!input.value || !options.some(option => option.innerText === input.value)) {
+                            select.options.selectedIndex = -1;
+                        } else {
+                            select.options.selectedIndex = options.findIndex(option => option.innerText === input.value);
+                        }
                     }
-                }
-            })
-        }
-    </script>
+                })
+            }
+        </script>
+    {% endif %}
 {% endblock %}

package/src/components/select/question.js

@@ -1,6 +1,7 @@
 import OptionsQuestion from '../../questions/options-question.js';
 
 export default class SelectQuestion extends OptionsQuestion {
+	#disableAccessibleAutocomplete;
 	/**
 	 * @param {Object} params
 	 * @param {string} params.title
@@ -14,6 +15,7 @@ export default class SelectQuestion extends OptionsQuestion {
 	 * @param {string} [params.label]
 	 * @param {string} [params.html]
 	 * @param {string} [params.legend] - optional legend, used instead of h1
+	 * @param {string} [params.disableAccessibleAutocomplete]
 	 * @param {Array.<import('../../questions/options-question.js').Option>} params.options
 	 * @param {Object<string, any>} [params.viewData]
 	 * @param {Array.<import('#base-validator').BaseValidator>} [params.validators]
@@ -30,6 +32,7 @@ export default class SelectQuestion extends OptionsQuestion {
 		label,
 		html,
 		legend,
+		disableAccessibleAutocomplete,
 		options,
 		validators,
 		viewData
@@ -51,6 +54,7 @@ export default class SelectQuestion extends OptionsQuestion {
 		this.html = html;
 		this.label = label;
 		this.legend = legend;
+		this.#disableAccessibleAutocomplete = disableAccessibleAutocomplete;
 	}
 
 	/**
@@ -59,6 +63,7 @@ export default class SelectQuestion extends OptionsQuestion {
 	addCustomDataToViewModel(viewModel) {
 		viewModel.question.label = this.label;
 		viewModel.question.legend = this.legend;
+		viewModel.question.disableAccessibleAutocomplete = this.#disableAccessibleAutocomplete;
 	}
 
 	/**

package/src/components/select/question.test.js

@@ -1,8 +1,9 @@
-import { describe, it } from 'node:test';
+import { describe, it, mock } from 'node:test';
 import assert from 'node:assert';
 import ValidOptionValidator from '../../validator/valid-option-validator.js';
 import SelectQuestion from './question.js';
 import nunjucks from 'nunjucks';
+import { configureNunjucksTestEnv } from '#test/utils/nunjucks.js';
 
 const TITLE = 'Select question';
 const QUESTION = 'A select question';
@@ -94,6 +95,81 @@ describe('./src/dynamic-forms/components/select/question.js', () => {
 		assert.strictEqual(preppedQuestion.question.label, LABEL);
 	});
 
+	it('should pass in disableAccessibleAutocomplete property to view', (ctx) => {
+		nunjucks.render = ctx.mock.fn();
+		nunjucks.render.mock.mockImplementation(() => {});
+
+		const selectQuestion = new SelectQuestion({
+			title: TITLE,
+			question: QUESTION,
+			description: DESCRIPTION,
+			fieldName: FIELDNAME,
+			html: HTML,
+			label: LABEL,
+			options: OPTIONS,
+			disableAccessibleAutocomplete: true
+		});
+
+		const customViewData = { hello: 'hi' };
+
+		const preppedQuestion = selectQuestion.prepQuestionForRendering(SECTION, JOURNEY, customViewData);
+
+		assert.strictEqual(preppedQuestion.question.disableAccessibleAutocomplete, true);
+	});
+
+	it('should include accessible autocomplete by default', async () => {
+		const selectQuestion = new SelectQuestion({
+			title: TITLE,
+			question: QUESTION,
+			description: DESCRIPTION,
+			fieldName: FIELDNAME,
+			html: HTML,
+			label: LABEL,
+			options: OPTIONS
+		});
+		const viewModel = selectQuestion.prepQuestionForRendering(SECTION, JOURNEY, {
+			layoutTemplate: 'views/layout-journey.njk'
+		});
+
+		const nunjucks = configureNunjucksTestEnv();
+		const mockRes = {
+			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
+		};
+		selectQuestion.renderAction(mockRes, viewModel);
+
+		assert.strictEqual(mockRes.render.mock.callCount(), 1);
+		const view = mockRes.render.mock.calls[0].result;
+		assert.ok(view);
+		assert.match(view, /accessible-autocomplete\.min\.js/);
+	});
+
+	it('should not include accessible autocomplete if configured', async () => {
+		const selectQuestion = new SelectQuestion({
+			title: TITLE,
+			question: QUESTION,
+			description: DESCRIPTION,
+			fieldName: FIELDNAME,
+			html: HTML,
+			label: LABEL,
+			options: OPTIONS,
+			disableAccessibleAutocomplete: true
+		});
+		const viewModel = selectQuestion.prepQuestionForRendering(SECTION, JOURNEY, {
+			layoutTemplate: 'views/layout-journey.njk'
+		});
+
+		const nunjucks = configureNunjucksTestEnv();
+		const mockRes = {
+			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
+		};
+		selectQuestion.renderAction(mockRes, viewModel);
+
+		assert.strictEqual(mockRes.render.mock.callCount(), 1);
+		const view = mockRes.render.mock.calls[0].result;
+		assert.ok(view);
+		assert.doesNotMatch(view, /accessible-autocomplete\.min\.js/);
+	});
+
 	it('should add selected attribute to chosen option', (ctx) => {
 		nunjucks.render = ctx.mock.fn();
 		nunjucks.render.mock.mockImplementation(() => {});

package/src/components/single-line-input/index.njk

@@ -2,7 +2,6 @@
 
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/label/macro.njk" import govukLabel %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% block dynQuestionContent %}
     <div class="govuk-grid-row">
@@ -70,11 +69,7 @@
 
                 {% endif %}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/task-list/index.njk

@@ -2,7 +2,6 @@
 
 {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
 {% from "govuk/components/tag/macro.njk" import govukTag %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "./task-list-multi-section.njk" import multiTaskList %}
 {% from "./task-list-single-section.njk" import singleTaskList %}
 

package/src/components/text-entry/index.njk

@@ -2,7 +2,6 @@
 
 {% from "govuk/components/textarea/macro.njk" import govukTextarea %}
 {% from "govuk/components/label/macro.njk" import govukLabel %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
 
 {% block dynQuestionContent %}
@@ -78,11 +77,7 @@
                     </div>
                 {% endif %}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/text-entry-redact/index.njk

@@ -130,11 +130,7 @@
                     }) }}
                 </div>
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue" }
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
 

package/src/components/unit-option-entry/index.njk

@@ -1,7 +1,6 @@
 {% extends layoutTemplate %}
 
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
 
 {% block dynQuestionContent %}
@@ -37,11 +36,7 @@
 
                 {% endcall %}
 
-                {{ govukButton({
-                    text: continueButtonText,
-                    type: "submit",
-                    attributes: { "data-cy":"button-save-and-continue"}
-                }) }}
+                {% include "components/utils/actions.njk" %}
             </form>
         </div>
     </div>

package/src/components/utils/actions.njk

@@ -0,0 +1,35 @@
+{% from "govuk/components/button/macro.njk" import govukButton -%}
+
+{# for backwards compatibility #}
+{%- set secondaryActions = secondaryActions or extraActionButtons -%}
+{%- set hasSecondaryActions = secondaryActions|length > 0 -%}
+
+{% if hasSecondaryActions %}<div class="govuk-button-group">
+{% endif %}
+{{ govukButton({
+    text: continueButtonText,
+    type: "submit",
+    attributes: { "data-cy":"button-save-and-continue"}
+}) }}
+
+{% if hasSecondaryActions %}
+{% for secondaryAction in secondaryActions %}
+    {%- set name = secondaryAction.text|lower|replace(" ", "-") -%}
+    {%- if secondaryAction.href -%}
+        {# name and formaction aren't valid for <a> tags #}
+        {%- set attributes = {"data-cy": "button-" + name} -%}
+    {%- elseif secondaryAction.formaction and (not secondaryAction.type or secondaryAction.type == "submit") -%}
+        {%- set attributes = {"data-cy": "button-" + name, "name": name, "formaction": secondaryAction.formaction} -%}
+    {%- else -%}
+        {%- set attributes = {"data-cy": "button-" + name, "name": name} -%}
+    {%- endif %}
+    {{ govukButton({
+        text: secondaryAction.text,
+        type: secondaryAction.type,
+        href: secondaryAction.href,
+        attributes: attributes,
+        classes: secondaryAction.classes or "govuk-button--secondary"
+    }) }}
+{% endfor %}
+</div>
+{%- endif %}