@planning-inspectorate/dynamic-forms 1.12.0 → 1.12.2

package/package.json

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

package/src/components/radio/index.njk

@@ -39,6 +39,7 @@
                         classes: "govuk-radios",
                         idPrefix: question.fieldName,
                         name: question.fieldName,
+                        hint: { text: question.hint },
                         errorMessage: errors[question.fieldName] and {
                             text: errors[question.fieldName].msg
                         },
@@ -71,6 +72,7 @@
                             classes: "govuk-radios",
                             idPrefix: question.fieldName,
                             name: question.fieldName,
+                            hint: { text: question.hint },
                             errorMessage: errors[question.fieldName] and {
                                 text: errors[question.fieldName].msg
                             },

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

@@ -100,7 +100,10 @@
                 {{ govukDetails({
                     summaryText: question.summaryText or "Original",
                     html: question.value,
-                    id: question.fieldName + "-unredacted"
+                    id: question.fieldName + "-unredacted",
+                    attributes: {
+                        "data-original": question.valueOriginal
+                    }
                 }) }}
 
                 {{ govukTextarea({
@@ -158,7 +161,7 @@
            * @param {HTMLButtonElement} redactSelectedText
            * @param {HTMLButtonElement} redactUndo
            * @param {HTMLButtonElement} redactUndoAll
-           * @param {HTMLDivElement} unredactedText
+           * @param {HTMLDetailsElement} unredactedText
            * @param {HTMLAnchorElement[]} rejectLinks
            * @param {import('@azure/ai-text-analytics').PiiEntity[]} suggestions
            */
@@ -207,7 +210,7 @@
               }
             });
             redactUndoAll.addEventListener('click', () => {
-              const unredated = unredactedText.textContent?.trim();
+              const unredated = unredactedText.dataset.original;
               if (history.length === 0 && textArea.value === unredated) {
                 showError('No changes to undo');
                 return;
@@ -237,7 +240,7 @@
             const redactSelectedText = document.querySelector('#redact-selected-text');
             const redactUndo = document.querySelector('#redact-undo');
             const redactUndoAll = document.querySelector('#redact-undo-all');
-            const unredactedText = document.querySelector('#{{ question.fieldName }}-unredacted > div');
+            const unredactedText = document.querySelector('#{{ question.fieldName }}-unredacted');
             const rejectLinks = document.querySelectorAll('[data-redact]');
               {% if not redactionSuggestions %}
               {% set redactionSuggestions = [] %}
@@ -256,7 +259,7 @@
             if (!redactUndoAll || !(redactUndoAll instanceof HTMLButtonElement)) {
               return;
             }
-            if (!unredactedText || !(unredactedText instanceof HTMLDivElement)) {
+            if (!unredactedText || !(unredactedText instanceof HTMLDetailsElement)) {
               return;
             }
 

package/src/components/text-entry-redact/question.js

@@ -72,9 +72,11 @@ export default class TextEntryRedactQuestion extends Question {
 		let viewModel = super.prepQuestionForRendering(section, journey, customViewData);
 		viewModel.question.label = this.label;
 		viewModel.question.textEntryCheckbox = this.textEntryCheckbox;
-		viewModel.question.value = payload ? payload[viewModel.question.fieldName] : viewModel.question.value;
+		viewModel.question.value = nl2br(payload ? payload[viewModel.question.fieldName] : viewModel.question.value);
 		viewModel.question.valueRedacted =
 			journey.response.answers[this.fieldName + 'Redacted'] || viewModel.question.value;
+		viewModel.question.valueOriginal =
+			journey.response.answers[this.fieldName + 'Original'] || viewModel.question.value;
 		viewModel.question.summaryText = this.summaryText;
 		viewModel.showSuggestionsUi = this.showSuggestionsUi;
 		return viewModel;

package/src/components/text-entry-redact/question.test.js

@@ -139,7 +139,8 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 				question: 'Redaction Question',
 				fieldName: 'field-name',
 				value: 'value',
-				valueRedacted: 'value-redacted'
+				valueRedacted: 'value-redacted',
+				valueOriginal: 'value'
 			},
 			redactionSuggestions: [
 				{ category: 'Person', suggestion: 'Test Person' },
@@ -151,6 +152,7 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
 		};
 		const viewModel = question.prepQuestionForRendering(section, journey, customViewData);
+		assert.strictEqual(viewModel.question.valueOriginal, 'value');
 		question.renderAction(mockRes, viewModel);
 		assert.strictEqual(mockRes.render.mock.callCount(), 1);
 		const view = mockRes.render.mock.calls[0].result;
@@ -158,6 +160,49 @@ describe('./src/dynamic-forms/components/text-entry-redact/question.js', () => {
 		assert.match(view, /Redaction Question/);
 		assert.match(view, /Redaction suggestions/);
 		assert.match(view, /We have suggested some common redactions/);
+		assert.match(view, /data-original="value"/);
+	});
+	it('should use <br> tags for newlines', () => {
+		const question = createQuestion(true);
+		const section = {
+			name: 'section-name'
+		};
+		const journey = {
+			baseUrl: '',
+			taskListUrl: 'task',
+			journeyTemplate: 'template',
+			journeyTitle: 'title',
+			journeyId: 'manage-representations',
+			getBackLink: () => {
+				return 'back';
+			},
+			response: {
+				answers: {}
+			}
+		};
+		const customViewData = {
+			layoutTemplate: 'lib/test-layout.njk',
+			question: {
+				question: 'Redaction Question',
+				fieldName: 'field-name',
+				value: 'This is my comment.\nIt has multiple lines.\r\nHere is another line.',
+				valueRedacted: 'value-redacted'
+			},
+			redactionSuggestions: [
+				{ category: 'Person', suggestion: 'Test Person' },
+				{ category: 'Address', suggestion: '123 Fake Street' }
+			]
+		};
+		const nunjucks = configureNunjucks();
+		const mockRes = {
+			render: mock.fn((view, data) => nunjucks.render(view + '.njk', data))
+		};
+		const viewModel = question.prepQuestionForRendering(section, journey, customViewData);
+		question.renderAction(mockRes, viewModel);
+		assert.strictEqual(mockRes.render.mock.callCount(), 1);
+		const view = mockRes.render.mock.calls[0].result;
+		assert.ok(view);
+		assert.match(view, /This is my comment\.<br>It has multiple lines\.<br>Here is another line\./);
 	});
 	it('should format answer for summary', () => {
 		const question = createQuestion();