@planning-inspectorate/dynamic-forms 1.17.0 → 2.0.1

package/.releaserc

@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "conventionalcommits",
+        "presentConfig": {}
+      }
+    ],
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/npm",
+    "@semantic-release/github"
+  ]
+}

package/README.md

@@ -21,7 +21,7 @@ The functionality for 'check-your-answers' pages can also be useful for generati
 
 ## Requirements
 
-To use this package nunjucks must be configured so that the component view files are available, and static assets must be made available for certain components and styling.
+To use this package nunjucks must be configured so that the component view files are available, and static assets must be made available for certain components and styling. Some nunjucks templates are required to correctly render the question pages and task list views.
 
 ### Nunjucks
 
@@ -67,12 +67,77 @@ The select component can use the [accessible-autocomplete](https://www.npmjs.com
 
 ### Layouts
 
-The layout file used for the journey should include the following blocks:
+There are two layout files that need to be configured for dynamic-forms: journey and task list.
+
+**Journey template**
+
+The journey template is used for question pages. It must include a block called `dynQuestionContent`, and a block called `head` (which the default gov.uk template has).
+It should also include the rendering of the errorSummary component. The path to this template is configured via the `journeyTemplate` property on a Journey.
+
+e.g.
+
+```nunjucks
+{% extends "govuk/template.njk" %}
+
+{% block beforeContent %}
+    {% if errorSummary %}
+        <div class="govuk-grid-row">
+            <div class="govuk-grid-column-two-thirds">
+                {{ govukErrorSummary({
+                    titleText: "There is a problem",
+                    errorList: errorSummary,
+                    attributes: {"data-cy": "error-wrapper"}
+                }) }}
+            </div>
+        </div>
+    {% endif %}
+{% endblock %}
+
+{% block content %}
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+            <h1 class="govuk-heading-xl">
+                {% if pageCaption %}
+                    <span class="govuk-caption-xl">{{ pageCaption }}</span>
+                {% endif %}
+                {{ pageHeading }}
+            </h1>
+        </div>
+    </div>
+    
+    {% block dynQuestionContent %}{% endblock %}
+{% endblock %}
+```
 
-TODO!
+**Task list template**
+
+The task list template is used for the task list or "check your answers" page. It must include a block called `dynTaskList`. The path to this template is configured via the `taskListTemplate` property on a Journey.
+
+e.g.
+
+```nunjucks
+{% extends "govuk/template.njk" %}
+
+{% block content %}
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-full">
+            <h1 class="govuk-heading-xl">
+                {% if pageCaption %}
+                    <span class="govuk-caption-xl">{{ pageCaption }}</span>
+                {% endif %}
+                {{ pageHeading }}
+            </h1>
+        </div>
+    </div>
+    
+    {% block dynTaskList %}{% endblock %}
+{% endblock %}
+```
 
 ## Usage
 
+The test directory includes a very basic journey in `test/journey.js`. This may be a useful guide for setting up a journey and associated questions. Also in `test/questions.test.js` there is a function `createAppWithQuestions` which may be a useful guide for setting up the appropriate controllers and routes for a journey.
+
 ### Conditions
 
 Conditions are used to show/hide questions based on the answers to other questions. There are fluent methods on a Section

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planning-inspectorate/dynamic-forms",
-  "version": "1.17.0",
+  "version": "2.0.1",
   "description": "This package is for building GDS forms using a configuration-based approach.",
   "main": "./src/index.js",
   "type": "module",
@@ -32,6 +32,7 @@
     "@commitlint/cli": "^20.0.0",
     "@commitlint/config-conventional": "^20.0.0",
     "body-parser": "^2.2.0",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
     "cookie-parser": "^1.4.7",
     "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",

package/src/components/address/index.njk

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
@@ -11,27 +10,11 @@
 {% set county= question.fieldName + "_county" %}
 {% set postcode= question.fieldName + "_postcode" %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {% call govukFieldset({
                     legend: {
                         text: question.question,

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

@@ -132,7 +132,7 @@ describe('AddressQuestion', () => {
 			const model = await question.prepQuestionForRendering(
 				{},
 				{ getBackLink: mock.fn(), response },
-				{ layoutTemplate: 'views/layout-question.njk' }
+				{ layoutTemplate: 'views/layout-journey.njk' }
 			);
 
 			assert.strictEqual(model.question.hint, hintText);

package/src/components/boolean/index.njk

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/radios/macro.njk" import govukRadios %}
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
@@ -11,27 +10,11 @@
     {% endset %}
 {% endif %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {% if question.interfaceType === 'radio' %}
                     {{ govukRadios({
                         classes: "govuk-radios",
@@ -47,7 +30,7 @@
                                 classes: "govuk-fieldset__legend--l"
                             }
                         },
-                        hint: { text: question.hint },
+                        hint: question.hint and { text: question.hint },
                         items: question.options
                     }) }}
 
@@ -59,7 +42,7 @@
                         errorMessage: errors[question.fieldName] and {
                             text: errors[question.fieldName].msg
                         },
-                        hint: {
+                        hint: htmlHint and {
                             html: htmlHint
                         },
                         fieldset: {

package/src/components/checkbox/index.njk

@@ -1,31 +1,13 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 
-
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {{ govukCheckboxes({
                     classes: "govuk-checkboxes",
                     idPrefix: question.fieldName,
@@ -33,7 +15,7 @@
                     errorMessage: errors[question.fieldName] and {
                         text: errors[question.fieldName].msg
                     },
-                    hint: {
+                    hint: question.description and {
                         text: question.description
                     },
                     fieldset: {

package/src/components/conditional/textarea.njk

@@ -4,7 +4,7 @@
     label: {
         text: question
     },
-    hint: {
+    hint: hint and {
         text: hint
     },
     id: fieldName,

package/src/components/conditional/unit.njk

@@ -1,7 +1,7 @@
 {% from "govuk/components/input/macro.njk" import govukInput %}
 
 {{ govukInput({
-    hint: {
+    hint: hint and {
         text: hint
     },
     label: {

package/src/components/date/index.njk

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/date-input/macro.njk" import govukDateInput %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 
@@ -14,27 +13,11 @@
     {% endset %}
 {% endif %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {{ govukDateInput({
                     id: question.fieldName,
                     fieldset: {
@@ -44,7 +27,7 @@
                             classes: "govuk-fieldset__legend--l"
                         }
                     },
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     errorMessage: errorSummary and {

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

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% 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 %}
@@ -20,27 +19,11 @@
     {% endset %}
 {% endif %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
 
                 {{ govukFieldset({
                     legend: {
@@ -57,7 +40,7 @@
                             text: labels.start
                         }
                     },
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     errorMessage: errorSummary and {
@@ -95,7 +78,7 @@
                             text: labels.end
                         }
                     },
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     errorMessage: errorSummary and {

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

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% 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 %}
@@ -19,23 +18,7 @@
     {% endset %}
 {% endif %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <style {% if cspNonce %}nonce={{ cspNonce }}{% endif %}>
         .pins-select--width-4 {
             min-width: 4.5em !important;
@@ -46,7 +29,7 @@
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {{ govukDateInput({
                     id: question.fieldName,
                     fieldset: {
@@ -86,13 +69,13 @@
 
                 <div class="govuk-form-group{% if errors[hour].msg or errors[minutes].msg or errors[period].msg %} govuk-form-group--error{% endif %}">
                     <fieldset class="govuk-fieldset" role="group">
-                        <div id="{{ question.fieldName }}-hint" class="govuk-hint">For example, 9:30am or 2:55pm</div>
+                        <div id="{{ question.fieldName }}-time-hint" class="govuk-hint">For example, 9:30am or 2:55pm</div>
                         {% if errors[hour].msg or errors[minutes].msg or errors[period].msg %}
                             <p id="{{ question.fieldName }}-error" class="govuk-error-message">
                                 <span class="govuk-visually-hidden">Error:</span> {{ errors[hour].msg or errors[minutes].msg or errors[period].msg }}
                             </p>
                         {% endif %}
-                        <div class="govuk-date-input" id={{ question.fieldName }}>
+                        <div class="govuk-date-input" id="{{ question.fieldName }}-time">
                             <div class="govuk-date-input__item">
                                 {{ govukInput({
                                     classes: "govuk-input--width-2 govuk-input--error" if errors[question.fieldName] or errors[hour] else "govuk-input--width-2",

package/src/components/identifier/index.njk

@@ -1,31 +1,14 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% 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 before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {% if question.label %}
                     <h1 class="govuk-heading-l">
                         {{ question.question }}

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

@@ -1,6 +1,5 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/label/macro.njk" import govukLabel %}
 {% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
@@ -8,27 +7,11 @@
 
 {% set inputFields = question.inputFields %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
 
                 {% call govukFieldset({
                     legend: {
@@ -70,7 +53,7 @@
                             prefix: inputField.prefix,
                             suffix: inputField.suffix,
                             value: inputField.value,
-                            hint: {
+                            hint: inputField.hint and {
                                 text: inputField.hint
                             },
                             classes: inputField.classes or "govuk-input-!-width-three-quarters",

package/src/components/multi-field-input/question.test.js

@@ -231,7 +231,7 @@ describe('./src/dynamic-forms/components/single-line-input/question.js', () => {
 					}
 				},
 				journeyTemplate: 'mock template',
-				listingPageViewPath: 'mock path',
+				taskListTemplate: 'mock path',
 				journeyTitle: 'mock title',
 				sections: []
 			});
@@ -265,7 +265,7 @@ describe('./src/dynamic-forms/components/single-line-input/question.js', () => {
 					}
 				},
 				journeyTemplate: 'mock template',
-				listingPageViewPath: 'mock path',
+				taskListTemplate: 'mock path',
 				journeyTitle: 'mock title',
 				sections: []
 			});
@@ -299,7 +299,7 @@ describe('./src/dynamic-forms/components/single-line-input/question.js', () => {
 					}
 				},
 				journeyTemplate: 'mock template',
-				listingPageViewPath: 'mock path',
+				taskListTemplate: 'mock path',
 				journeyTitle: 'mock title',
 				sections: []
 			});

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

@@ -1,34 +1,20 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% from "govuk/components/input/macro.njk" import govukInput %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
 
-{% block before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <h1 class="govuk-heading-l">{{ question.question }}</h1>
-            <p class="govuk-body">{{ question.description }}</p>
+            {%- if question.description %}
+                <p class="govuk-body">{{ question.description }}</p>
+            {%- endif %}
+
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
                 {{ govukInput({
-                    hint: {
+                    hint: question.hint and {
                         text: question.hint
                     },
                     label: {

package/src/components/radio/index.njk

@@ -1,35 +1,20 @@
 {% extends layoutTemplate %}
 
-{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
 {% 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 before_content %}
-    <div class="govuk-grid-row">
-        <div class="govuk-grid-column-two-thirds">
-            {% if errorSummary %}
-                {{ govukErrorSummary({
-                    titleText: "There is a problem",
-                    errorList: errorSummary,
-                    attributes: {"data-cy": "error-wrapper"}
-                }) }}
-            {% endif %}
-        </div>
-    </div>
-
-    {{ super() }}
-{% endblock before_content %}
-
-{% block content %}
+{% block dynQuestionContent %}
     <div class="govuk-grid-row">
         <div class="govuk-grid-column-two-thirds">
             <form action="" method="post" novalidate>
-                <input type="hidden" name="_csrf" value="{{ _csrf }}">
+                {% if _csrf %}<input type="hidden" name="_csrf" value="{{ _csrf }}">{% endif %}
 
                 {% if question.legend %}
                     <h1 class="govuk-heading-l">{{ question.question }}</h1>
-                    <p class="govuk-body">{{ question.description }}</p>
+                    {%- if question.description %}
+                        <p class="govuk-body">{{ question.description }}</p>
+                    {%- endif -%}
 
                     {% if question.html %}
                         {% include question.html ignore missing %}
@@ -62,7 +47,9 @@
                         }
                     }) %}
 
-                        <p class="govuk-body">{{ question.description }}</p>
+                        {%- if question.description %}
+                            <p class="govuk-body">{{ question.description }}</p>
+                        {%- endif -%}
 
                         {% if question.html %}
                             {% include question.html ignore missing %}