@planning-inspectorate/dynamic-forms 3.9.0 → 3.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "3.9.0",
+  "version": "3.10.1",
   "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,7 +1,6 @@
 {% extends layoutTemplate %}
 
 {% from "govuk/components/select/macro.njk" import govukSelect %}
-{% from "govuk/components/button/macro.njk" import govukButton %}
 
 {% block head %}
     {% if not question.disableAccessibleAutocomplete %}
@@ -38,28 +37,8 @@
                     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>

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 %}

package/src/questions/question-types.d.ts

@@ -22,7 +22,17 @@ export interface QuestionParameters {
 	// override the action link for this question
 	actionLink?: ActionLink;
 	// static view data for this question
-	viewData?: Record<string, any>;
+	viewData?: {
+		/**
+		 * @deprecated replaced by secondaryActions
+		 */
+		extraActionButtons?: SecondaryAction[];
+		/**
+		 * Secondary action buttons
+		 */
+		secondaryActions?: SecondaryAction[];
+		[key: string]: any;
+	};
 }
 
 export interface ActionLink {
@@ -30,6 +40,21 @@ export interface ActionLink {
 	href: string;
 }
 
+export type SecondaryAction = SecondaryActionButton | SecondaryActionLink;
+
+export interface SecondaryActionButton {
+	text: string;
+	type?: string;
+	formaction?: string;
+	classes?: string;
+}
+
+export interface SecondaryActionLink {
+	text: string;
+	href: string;
+	classes?: string;
+}
+
 export interface QuestionViewModel {
 	question: {
 		value: string | number | Record<string, any>;

package/src/questions/question.js

@@ -92,7 +92,14 @@ export class Question {
 		title: '',
 		text: ''
 	};
-	#isInManageListSection = false;
+	/**
+	 * Private, but not marked as such because it breaks types, either using #variable:
+	 * - Property '#isInManageListSection' is missing in type
+	 * or with @private
+	 * - Types have separate declarations of a private property '_isInManageListSection'.
+	 * @type {boolean}
+	 */
+	_isInManageListSection = false;
 
 	/**
 	 * @param {import('#question-types').QuestionParameters} params
@@ -169,14 +176,14 @@ export class Question {
 	 * @returns {boolean}
 	 */
 	get isInManageListSection() {
-		return this.#isInManageListSection;
+		return this._isInManageListSection;
 	}
 
 	set isInManageListSection(value) {
 		if (!value) {
 			throw new Error('Question isInManageListSection is false by default');
 		}
-		this.#isInManageListSection = value;
+		this._isInManageListSection = value;
 	}
 
 	/**