@planning-inspectorate/dynamic-forms 1.14.0 → 1.15.0

package/test/snapshots/holiday-snack.html

@@ -0,0 +1,33 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+                    <h1 class="govuk-heading-l">
+                        What is your favourite snack to eat on holiday?
+                    </h1>
+
+
+
+                    <div class="govuk-form-group">
+  <label class="govuk-label govuk-label" for="holidaySnack">
+    Snack
+  </label>
+  <div id="holidaySnack-hint" class="govuk-hint">
+    
+  </div>
+  <input class="govuk-input" id="holidaySnack" name="holidaySnack" type="text" value="" aria-describedby="holidaySnack-hint">
+</div>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/hotel-address.html

@@ -0,0 +1,65 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+<fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      What is the address of your hotel?
+    </h1>
+  </legend>
+
+
+                    <div class="govuk-form-group">
+  <label class="govuk-label" for="address-line-1">
+    Address line 1 (optional)
+  </label>
+  <input class="govuk-input" id="address-line-1" name="hotelAddress_addressLine1" type="text" value="" autocomplete="address-line1">
+</div>
+
+
+                    <div class="govuk-form-group">
+  <label class="govuk-label" for="address-line-2">
+    Address line 2 (optional)
+  </label>
+  <input class="govuk-input" id="address-line-2" name="hotelAddress_addressLine2" type="text" value="" autocomplete="address-line2">
+</div>
+
+
+                    <div class="govuk-form-group">
+  <label class="govuk-label" for="address-town">
+    Town or city (optional)
+  </label>
+  <input class="govuk-input govuk-!-width-two-thirds" id="address-town" name="hotelAddress_townCity" type="text" value="" autocomplete="address-level2">
+</div>
+
+
+                    <div class="govuk-form-group">
+  <label class="govuk-label" for="address-county">
+    County (optional)
+  </label>
+  <input class="govuk-input govuk-!-width-two-thirds" id="address-county" name="hotelAddress_county" type="text" value="" autocomplete="address-level1">
+</div>
+
+
+                    <div class="govuk-form-group">
+  <label class="govuk-label" for="address-postcode">
+    Postcode (optional)
+  </label>
+  <input class="govuk-input govuk-input--width-10" id="address-postcode" name="hotelAddress_postcode" type="text" value="" autocomplete="postal-code">
+</div>
+
+                    <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+
+</fieldset>
+            </form>
+        </div>
+    </div>

package/test/snapshots/luggage-weight-units.html

@@ -0,0 +1,75 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+<fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Select your luggage weight and unit.
+    </h1>
+  </legend>
+
+                    <p class="govuk-body"></p>
+
+                    <div class="govuk-form-group">
+  <div class="govuk-radios govuk-radios" data-module="govuk-radios">
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="luggageWeightUnits" name="luggageWeightUnits" type="radio" value="kg" data-aria-controls="conditional-luggageWeightUnits" data-cy="answer-kg">
+      <label class="govuk-label govuk-radios__label" for="luggageWeightUnits">
+        Kilograms
+      </label>
+    </div>
+    <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-luggageWeightUnits">
+      <div class="govuk-form-group">
+  <label class="govuk-label" for="luggageWeightValue_kg">
+    Weight in kilograms
+  </label>
+  <div id="luggageWeightValue_kg-hint" class="govuk-hint">
+    
+  </div>
+  <div class="govuk-input__wrapper">
+    <input class="govuk-input govuk-input--width-5" id="luggageWeightValue_kg" name="luggageWeightValue_kg" type="text" spellcheck="false" value="" aria-describedby="luggageWeightValue_kg-hint" inputmode="numeric">
+    <div class="govuk-input__suffix" aria-hidden="true">kg</div>
+  </div>
+</div>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="luggageWeightUnits-2" name="luggageWeightUnits" type="radio" value="lbs" data-aria-controls="conditional-luggageWeightUnits-2" data-cy="answer-lbs">
+      <label class="govuk-label govuk-radios__label" for="luggageWeightUnits-2">
+        Pounds
+      </label>
+    </div>
+    <div class="govuk-radios__conditional govuk-radios__conditional--hidden" id="conditional-luggageWeightUnits-2">
+      <div class="govuk-form-group">
+  <label class="govuk-label" for="luggageWeightValue_lbs">
+    Weight in pounds
+  </label>
+  <div id="luggageWeightValue_lbs-hint" class="govuk-hint">
+    
+  </div>
+  <div class="govuk-input__wrapper">
+    <input class="govuk-input govuk-input--width-5" id="luggageWeightValue_lbs" name="luggageWeightValue_lbs" type="text" spellcheck="false" value="" aria-describedby="luggageWeightValue_lbs-hint" inputmode="numeric">
+    <div class="govuk-input__suffix" aria-hidden="true">lbs</div>
+  </div>
+</div>
+    </div>
+  </div>
+</div>
+
+
+
+</fieldset>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/nights.html

@@ -0,0 +1,28 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <h1 class="govuk-heading-l">How many nights will you stay on holiday?</h1>
+            <p class="govuk-body"></p>
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+                <div class="govuk-form-group">
+  <label class="govuk-label" for="nights">
+    Nights
+  </label>
+  <div id="nights-hint" class="govuk-hint">
+    
+  </div>
+  <input class="govuk-input govuk-input--width-5" id="nights" name="nights" type="text" spellcheck="false" value="" aria-describedby="nights-hint" inputmode="numeric">
+</div>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/snapshots/secret-wish.html

@@ -0,0 +1,173 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+                    <h1 class="govuk-label-wrapper">
+  <label class="govuk-label govuk-label--l" for="secretWish">
+    Share a secret wish for your holiday (will be redacted).
+  </label>
+</h1>
+
+
+
+
+                <h2 class="govuk-heading-m">Redaction preview</h2>
+
+                <details id="secretWish-unredacted" class="govuk-details" data-original="">
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      Original
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+    
+  </div>
+</details>
+
+
+                <div class="govuk-form-group">
+  <label class="govuk-label" for="secretWish">
+    Secret wish
+  </label>
+  <textarea class="govuk-textarea" id="secretWish" name="secretWish" rows="8" readonly="true"></textarea>
+</div>
+
+
+                <div class="govuk-button-group">
+                    <button type="button" class="govuk-button govuk-button--secondary" data-module="govuk-button" id="redact-selected-text">
+  Redact selected text
+</button>
+
+                    <button type="button" class="govuk-button govuk-button--secondary" data-module="govuk-button" id="redact-undo">
+  Undo
+</button>
+
+                    <button type="button" class="govuk-button govuk-button--secondary" data-module="govuk-button" id="redact-undo-all">
+  Undo all changes
+</button>
+                </div>
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+
+        <script >
+          /**
+           * @param {HTMLTextAreaElement} textArea
+           * @param {HTMLButtonElement} redactSelectedText
+           * @param {HTMLButtonElement} redactUndo
+           * @param {HTMLButtonElement} redactUndoAll
+           * @param {HTMLDetailsElement} unredactedText
+           * @param {HTMLAnchorElement[]} rejectLinks
+           * @param {import('@azure/ai-text-analytics').PiiEntity[]} suggestions
+           */
+          function registerEventListeners({textArea, redactSelectedText, redactUndo, redactUndoAll, unredactedText, rejectLinks, suggestions}) {
+            const formGroup = textArea.parentElement;
+            const errorMessage = document.createElement('p');
+            errorMessage.id = 'secretWish-error';
+            errorMessage.classList.add('govuk-error-message');
+
+            const history = [];
+            function showError(message) {
+              formGroup.classList.add('govuk-form-group--error');
+              errorMessage.textContent = message;
+              formGroup.prepend(errorMessage);
+            }
+            function hideError() {
+              textArea.parentElement.classList.remove('govuk-form-group--error');
+              errorMessage.remove();
+            }
+            redactSelectedText.addEventListener('click', () => {
+              const { selectionStart, selectionEnd } = textArea;
+              if (selectionStart === selectionEnd) {
+                // no selected text
+                showError('Select text to redact');
+                return;
+              }
+              hideError();
+              // replace the text with the 'full block' █ character
+              const selectedText = textArea.value.substring(selectionStart, selectionEnd);
+              const redactedText = '█'.repeat(selectionEnd - selectionStart);
+              textArea.value = textArea.value.substring(0, selectionStart) + redactedText + textArea.value.substring(selectionEnd);
+              // add to history for undo functionality
+              history.push({
+                selectionStart,
+                selectionEnd,
+                selectedText
+              });
+            });
+            redactUndo.addEventListener('click', () => {
+              const { selectionStart, selectionEnd, selectedText } = history.pop() || {};
+              if (selectionStart !== undefined && selectionEnd !== undefined && selectedText) {
+                hideError();
+                textArea.value = textArea.value.substring(0, selectionStart) + selectedText + textArea.value.substring(selectionEnd);
+              } else {
+                showError('No changes to undo');
+              }
+            });
+            redactUndoAll.addEventListener('click', () => {
+              const unredated = unredactedText.dataset.original;
+              if (history.length === 0 && textArea.value === unredated) {
+                showError('No changes to undo');
+                return;
+              }
+              hideError();
+              textArea.value = unredated || '';
+              history.length = 0;
+            });
+            for (const rejectLink of rejectLinks) {
+              rejectLink.addEventListener('click', () => {
+                const index = parseInt(rejectLink.getAttribute('data-redact').replace('suggestion-reject-', ''));
+                const suggestion = suggestions[index];
+                if (rejectLink.text === 'Reject') {
+                  textArea.value = textArea.value.substring(0, suggestion.offset) + suggestion.text + textArea.value.substring(suggestion.offset + suggestion.length);
+                  rejectLink.text = 'Accept';
+                } else {
+                  const redactedText = '█'.repeat(suggestion.length);
+                  textArea.value = textArea.value.substring(0, suggestion.offset) + redactedText+ textArea.value.substring(suggestion.offset + suggestion.length);
+                  rejectLink.text = 'Reject';
+                }
+              });
+            }
+          }
+
+          function initRedact() {
+            const textArea = document.querySelector('#secretWish');
+            const redactSelectedText = document.querySelector('#redact-selected-text');
+            const redactUndo = document.querySelector('#redact-undo');
+            const redactUndoAll = document.querySelector('#redact-undo-all');
+            const unredactedText = document.querySelector('#secretWish-unredacted');
+            const rejectLinks = document.querySelectorAll('[data-redact]');
+            const suggestions = []
+
+            if (!textArea || !(textArea instanceof HTMLTextAreaElement)) {
+              return;
+            }
+            if (!redactSelectedText || !(redactSelectedText instanceof HTMLButtonElement)) {
+              return;
+            }
+            if (!redactUndo || !(redactUndo instanceof HTMLButtonElement)) {
+              return;
+            }
+            if (!redactUndoAll || !(redactUndoAll instanceof HTMLButtonElement)) {
+              return;
+            }
+            if (!unredactedText || !(unredactedText instanceof HTMLDetailsElement)) {
+              return;
+            }
+
+            registerEventListeners({textArea, redactSelectedText, redactUndo, redactUndoAll, unredactedText, rejectLinks, suggestions});
+          }
+
+          initRedact();
+        </script>
+    </div>

package/test/snapshots/travel-class.html

@@ -0,0 +1,52 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="POST" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+
+                <div class="govuk-form-group">
+  <h1 class="govuk-label-wrapper">
+    <label class="govuk-label govuk-label--l" for="travelClass">
+      Which class do you want to travel in?
+    </label>
+  </h1>
+  <select class="govuk-select" id="travelClass" name="travelClass">
+    <option value="economy" data-cy="answer-economy">Economy</option>
+    <option value="business" data-cy="answer-business">Business</option>
+    <option value="first" data-cy="answer-first">First Class</option>
+  </select>
+</div>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+
+
+            </form>
+        </div>
+    </div>
+    <script src="/assets/js/accessible-autocomplete.min.js"></script>
+    <script >
+        if (window.accessibleAutocomplete) {
+            accessibleAutocomplete.enhanceSelectElement({
+                selectElement: document.querySelector('#travelClass'),
+                onConfirm: () => {
+                    let input = document.querySelector('#travelClass');
+                    let select = document.querySelector('#travelClass-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>

package/test/snapshots/travel-insurance-type.html

@@ -0,0 +1,56 @@
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+        </div>
+    </div>
+
+    
+    <div class="govuk-grid-row">
+        <div class="govuk-grid-column-two-thirds">
+            <form action="" method="post" novalidate>
+                <input type="hidden" name="_csrf" value="">
+
+
+<fieldset class="govuk-fieldset">
+  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+    <h1 class="govuk-fieldset__heading">
+      Which type of travel insurance would you like?
+    </h1>
+  </legend>
+
+                        <p class="govuk-body"></p>
+
+
+                        <div class="govuk-form-group">
+  <div class="govuk-radios govuk-radios" data-module="govuk-radios">
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="travelInsuranceType" name="travelInsuranceType" type="radio" value="basic" data-cy="answer-basic">
+      <label class="govuk-label govuk-radios__label" for="travelInsuranceType">
+        Basic
+      </label>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="travelInsuranceType-2" name="travelInsuranceType" type="radio" value="comprehensive" data-cy="answer-comprehensive">
+      <label class="govuk-label govuk-radios__label" for="travelInsuranceType-2">
+        Comprehensive
+      </label>
+    </div>
+    <div class="govuk-radios__item">
+      <input class="govuk-radios__input" id="travelInsuranceType-3" name="travelInsuranceType" type="radio" value="premium" data-cy="answer-premium">
+      <label class="govuk-label govuk-radios__label" for="travelInsuranceType-3">
+        Premium
+      </label>
+    </div>
+  </div>
+</div>
+
+
+
+</fieldset>
+
+
+                <button type="submit" class="govuk-button" data-module="govuk-button" data-cy="button-save-and-continue">
+  Continue
+</button>
+            </form>
+        </div>
+    </div>

package/test/utils/app.js

@@ -0,0 +1,41 @@
+import bodyParser from 'body-parser';
+import express from 'express';
+import session from 'express-session';
+import crypto from 'node:crypto';
+import { configureNunjucksTestEnv } from './nunjucks.js';
+
+/**
+ * Create an Express app configured for testing with Nunjucks and session support.
+ * @returns {import('express').Express}
+ */
+export function createApp() {
+	const app = express();
+
+	// configure body-parser, to populate req.body
+	// see https://expressjs.com/en/resources/middleware/body-parser.html
+	app.use(bodyParser.urlencoded({ extended: true }));
+	app.use(bodyParser.json());
+
+	app.use(
+		session({
+			secret: crypto.randomUUID(),
+			resave: false,
+			saveUninitialized: false,
+			store: new session.MemoryStore(),
+			unset: 'destroy',
+			cookie: {
+				secure: false,
+				maxAge: 86_400_000 // 1 day in milliseconds
+			}
+		})
+	);
+
+	const nunjucksEnvironment = configureNunjucksTestEnv();
+	// Set the express view engine to nunjucks
+	// calls to res.render will use nunjucks
+	nunjucksEnvironment.addGlobal('govukRebrand', true);
+	nunjucksEnvironment.express(app);
+	app.set('view engine', 'njk');
+
+	return app;
+}

package/test/utils/nunjucks.js

@@ -0,0 +1,20 @@
+import nunjucks from 'nunjucks';
+import { createRequire } from 'module';
+import path from 'path';
+import { testDir as getTestDir } from './utils.js';
+
+export function configureNunjucksTestEnv() {
+	const require = createRequire(import.meta.url);
+	const testDir = getTestDir();
+	const srcDir = path.resolve(testDir, '..', 'src');
+	const govukFrontendRoot = path.resolve(require.resolve('govuk-frontend'), '../..');
+
+	return nunjucks.configure([testDir, srcDir, govukFrontendRoot], {
+		// output with dangerous characters are escaped automatically
+		autoescape: true,
+		// automatically remove trailing newlines from a block/tag
+		trimBlocks: true,
+		// automatically remove leading whitespace from a block/tag
+		lstripBlocks: true
+	});
+}