@defra/forms-engine-plugin 4.0.12 → 4.0.14

package/src/server/plugins/engine/components/NationalGridFieldNumberField.test.ts

@@ -103,23 +103,15 @@ describe('NationalGridFieldNumberField', () => {
         const result1 = collection.validate(getFormData('TQ12345678'))
         const result2 = collection.validate(getFormData('TQ 1234 5678'))
 
-        // Test 10-digit OS grid reference format (2x5)
-        const result3 = collection.validate(getFormData('SU1234567890'))
-        const result4 = collection.validate(getFormData('SU 12345 67890'))
-
         expect(result1.errors).toBeUndefined()
         expect(result2.errors).toBeUndefined()
-        expect(result3.errors).toBeUndefined()
-        expect(result4.errors).toBeUndefined()
 
         // Test case-insensitive
-        const result5 = collection.validate(getFormData('nt12345678'))
+        const result3 = collection.validate(getFormData('nt12345678'))
 
         expect(result1.errors).toBeUndefined()
         expect(result2.errors).toBeUndefined()
         expect(result3.errors).toBeUndefined()
-        expect(result4.errors).toBeUndefined()
-        expect(result5.errors).toBeUndefined()
       })
 
       it('formats values with spaces per GDS guidance', () => {
@@ -265,6 +257,7 @@ describe('NationalGridFieldNumberField', () => {
         description: 'Trim empty spaces',
         component: {
           title: 'Example National Grid field number',
+          shortDescription: 'Grid field',
           name: 'myComponent',
           type: ComponentType.NationalGridFieldNumberField,
           options: {}
@@ -288,6 +281,7 @@ describe('NationalGridFieldNumberField', () => {
         description: 'Pattern validation',
         component: {
           title: 'Example National Grid field number',
+          shortDescription: 'Grid field',
           name: 'myComponent',
           type: ComponentType.NationalGridFieldNumberField,
           options: {}
@@ -299,7 +293,7 @@ describe('NationalGridFieldNumberField', () => {
               value: getFormData('NG1234567'),
               errors: expect.arrayContaining([
                 expect.objectContaining({
-                  text: 'Enter a valid National Grid field number for Example National Grid field number like NG 1234 5678'
+                  text: 'Enter a valid National Grid field number for grid field like NG 1234 5678'
                 })
               ])
             }
@@ -310,7 +304,7 @@ describe('NationalGridFieldNumberField', () => {
               value: getFormData('N123456789'),
               errors: expect.arrayContaining([
                 expect.objectContaining({
-                  text: 'Enter a valid National Grid field number for Example National Grid field number like NG 1234 5678'
+                  text: 'Enter a valid National Grid field number for grid field like NG 1234 5678'
                 })
               ])
             }
@@ -321,7 +315,7 @@ describe('NationalGridFieldNumberField', () => {
               value: getFormData('NGABCDEFGH'),
               errors: expect.arrayContaining([
                 expect.objectContaining({
-                  text: 'Enter a valid National Grid field number for Example National Grid field number like NG 1234 5678'
+                  text: 'Enter a valid National Grid field number for grid field like NG 1234 5678'
                 })
               ])
             }
@@ -332,6 +326,7 @@ describe('NationalGridFieldNumberField', () => {
         description: 'Custom validation message',
         component: {
           title: 'Example National Grid field number',
+          shortDescription: 'Grid field',
           name: 'myComponent',
           type: ComponentType.NationalGridFieldNumberField,
           options: {
@@ -367,6 +362,7 @@ describe('NationalGridFieldNumberField', () => {
         description: 'Custom validation messages (multiple)',
         component: {
           title: 'Example National Grid field number',
+          shortDescription: 'Grid field',
           name: 'myComponent',
           type: ComponentType.NationalGridFieldNumberField,
           options: {
@@ -417,6 +413,7 @@ describe('NationalGridFieldNumberField', () => {
         description: 'Optional field',
         component: {
           title: 'Example National Grid field number',
+          shortDescription: 'Grid field',
           name: 'myComponent',
           type: ComponentType.NationalGridFieldNumberField,
           options: {

package/src/server/plugins/engine/components/NationalGridFieldNumberField.ts

@@ -1,4 +1,5 @@
 import { type NationalGridFieldNumberFieldComponent } from '@defra/forms-model'
+import lowerFirst from 'lodash/lowerFirst.js'
 
 import { LocationFieldBase } from '~/src/server/plugins/engine/components/LocationFieldBase.js'
 
@@ -6,16 +7,15 @@ export class NationalGridFieldNumberField extends LocationFieldBase {
   declare options: NationalGridFieldNumberFieldComponent['options']
 
   protected getValidationConfig() {
-    // Regex for OS grid references and parcel IDs
+    // Regex for OS national grid field references (NGFR)
     // Validates specific valid OS grid letter combinations with:
-    // - 2 letters & 8 digits in 2 blocks of 4 (parcel ID) e.g., ST 6789 6789
-    // - 2 letters & 10 digits in 2 blocks of 5 (OS grid reference) e.g., SO 12345 12345
+    // - 2 letters & 8 digits in 2 blocks of 4 e.g. ST 6789 6789
     const pattern =
-      /^((([sS]|[nN])[a-hA-Hj-zJ-Z])|(([tT]|[oO])[abfglmqrvwABFGLMQRVW])|([hH][l-zL-Z])|([jJ][lmqrvwLMQRVW]))\s?(([0-9]{4})\s?([0-9]{4})|([0-9]{5})\s?([0-9]{5}))$/
+      /^((([sS]|[nN])[a-hA-Hj-zJ-Z])|(([tT]|[oO])[abfglmqrvwABFGLMQRVW])|([hH][l-zL-Z])|([jJ][lmqrvwLMQRVW]))\s?([0-9]{4})\s?([0-9]{4})$/
 
     return {
       pattern,
-      patternErrorMessage: `Enter a valid National Grid field number for ${this.title} like NG 1234 5678`
+      patternErrorMessage: `Enter a valid National Grid field number for ${lowerFirst(this.label)} like NG 1234 5678`
     }
   }
 

package/src/server/plugins/engine/components/OsGridRefField.test.ts

@@ -100,12 +100,22 @@ describe('OsGridRefField', () => {
         const result1 = collection.validate(getFormData('SD865005'))
         const result2 = collection.validate(getFormData('SD 865 005'))
 
+        const result3 = collection.validate(getFormData('SD86565005'))
+        const result4 = collection.validate(getFormData('SD 8656 0065'))
+
+        const result5 = collection.validate(getFormData('SD8654454005'))
+        const result6 = collection.validate(getFormData('SD 86455 00545'))
+
         // Test case-insensitive
-        const result3 = collection.validate(getFormData('nt123456'))
+        const result7 = collection.validate(getFormData('nt123456'))
 
         expect(result1.errors).toBeUndefined()
         expect(result2.errors).toBeUndefined()
         expect(result3.errors).toBeUndefined()
+        expect(result4.errors).toBeUndefined()
+        expect(result5.errors).toBeUndefined()
+        expect(result6.errors).toBeUndefined()
+        expect(result7.errors).toBeUndefined()
       })
 
       it('retains values with spaces per GDS guidance', () => {
@@ -137,8 +147,9 @@ describe('OsGridRefField', () => {
         const result4 = collection.validate(getFormData('TQ1234567')) // Wrong number of digits (7)
 
         // Test mismatched digit counts (must be either 3+3, 4+4 or 5+5, not mixed)
-        const result5 = collection.validate(getFormData('SN 4444 55555')) // mismatched digit counts
-        const result6 = collection.validate(getFormData('SN 55555 4444')) // mismatched digit counts
+        const result5 = collection.validate(getFormData('SN 333 4444')) // mismatched digit counts
+        const result6 = collection.validate(getFormData('SN 4444 55555')) // mismatched digit counts
+        const result7 = collection.validate(getFormData('SN 55555 4444')) // mismatched digit counts
 
         expect(result1.errors).toBeTruthy()
         expect(result2.errors).toBeTruthy()
@@ -146,6 +157,7 @@ describe('OsGridRefField', () => {
         expect(result4.errors).toBeTruthy()
         expect(result5.errors).toBeTruthy()
         expect(result6.errors).toBeTruthy()
+        expect(result7.errors).toBeTruthy()
       })
     })
 
@@ -284,6 +296,7 @@ describe('OsGridRefField', () => {
         description: 'Pattern validation',
         component: {
           title: 'Example OS grid reference',
+          shortDescription: 'Grid reference',
           name: 'myComponent',
           type: ComponentType.OsGridRefField,
           options: {}
@@ -295,7 +308,7 @@ describe('OsGridRefField', () => {
               value: getFormData('TQ12345'),
               errors: expect.arrayContaining([
                 expect.objectContaining({
-                  text: 'Enter a valid OS grid reference for Example OS grid reference like TQ123456'
+                  text: 'Enter a valid OS grid reference for grid reference like TQ123456'
                 })
               ])
             }
@@ -306,7 +319,7 @@ describe('OsGridRefField', () => {
               value: getFormData('AA1234567'),
               errors: expect.arrayContaining([
                 expect.objectContaining({
-                  text: 'Enter a valid OS grid reference for Example OS grid reference like TQ123456'
+                  text: 'Enter a valid OS grid reference for grid reference like TQ123456'
                 })
               ])
             }
@@ -317,7 +330,7 @@ describe('OsGridRefField', () => {
               value: getFormData('TQABCDEF'),
               errors: expect.arrayContaining([
                 expect.objectContaining({
-                  text: 'Enter a valid OS grid reference for Example OS grid reference like TQ123456'
+                  text: 'Enter a valid OS grid reference for grid reference like TQ123456'
                 })
               ])
             }

package/src/server/plugins/engine/components/OsGridRefField.ts

@@ -1,4 +1,5 @@
 import { type OsGridRefFieldComponent } from '@defra/forms-model'
+import lowerFirst from 'lodash/lowerFirst.js'
 
 import { LocationFieldBase } from '~/src/server/plugins/engine/components/LocationFieldBase.js'
 
@@ -6,15 +7,18 @@ export class OsGridRefField extends LocationFieldBase {
   declare options: OsGridRefFieldComponent['options']
 
   protected getValidationConfig() {
-    // Regex for OS grid references and parcel IDs
+    // Regex for OS national grid references (NGR)
     // Validates specific valid OS grid letter combinations with:
-    // - 2 letters & 6 digits (e.g., SD865005 or SD 865 005)
+    // - 2 letters & 6 digits in 2 blocks of 3 e.g. ST 678 678
+    // - 2 letters & 8 digits in 2 blocks of 4 e.g. ST 6789 6789
+    // - 2 letters & 10 digits in 2 blocks of 5 e.g. SO 12345 12345
+    // Optional spaces between each block
     const pattern =
-      /^((([sS]|[nN])[a-hA-Hj-zJ-Z])|(([tT]|[oO])[abfglmqrvwABFGLMQRVW])|([hH][l-zL-Z])|([jJ][lmqrvwLMQRVW]))\s?(([0-9]{3})\s?([0-9]{3}))$/
+      /^((([sS]|[nN])[a-hA-Hj-zJ-Z])|(([tT]|[oO])[abfglmqrvwABFGLMQRVW])|([hH][l-zL-Z])|([jJ][lmqrvwLMQRVW]))\s?(([0-9]{3})\s?([0-9]{3})|([0-9]{4})\s?([0-9]{4})|([0-9]{5})\s?([0-9]{5}))$/
 
     return {
       pattern,
-      patternErrorMessage: `Enter a valid OS grid reference for ${this.title} like TQ123456`
+      patternErrorMessage: `Enter a valid OS grid reference for ${lowerFirst(this.label)} like TQ123456`
     }
   }
 

package/src/server/plugins/engine/components/types.ts

@@ -64,6 +64,9 @@ export interface DateInputItem {
   // but not by date fields. This interface is reused by both component types.
   prefix?: ComponentText
   suffix?: ComponentText
+  errorMessage?: {
+    text: string
+  }
   condition?: undefined
 }
 

package/src/server/plugins/engine/models/FormModel.ts

@@ -24,7 +24,7 @@ import {
   type Page
 } from '@defra/forms-model'
 import { add, format } from 'date-fns'
-import { Parser, type Value } from 'expr-eval'
+import { Parser, type Value } from 'expr-eval-fork'
 import joi from 'joi'
 
 import { createLogger } from '~/src/server/common/helpers/logging/logger.js'

package/src/server/plugins/engine/models/types.ts

@@ -3,7 +3,7 @@ import {
   type FormComponentsDef,
   type Section
 } from '@defra/forms-model'
-import { type Expression } from 'expr-eval'
+import { type Expression } from 'expr-eval-fork'
 
 import {
   getAnswer,

package/src/server/plugins/engine/views/components/_location-field-base.html

@@ -12,22 +12,22 @@
       }) }}
     {% endif %}
 
-    <div class="app-location-input">
+    <div class="govuk-grid-row">
       {% for item in component.model.items %}
-        <div class="app-location-input__item">
+        <div class="govuk-grid-column-one-third">
           {{ govukInput({
             id: item.id,
             name: item.name,
             label: {
-              text: item.label,
-              classes: "govuk-label--s"
+              text: item.label
             },
             classes: item.classes,
             value: item.value,
             type: inputType,
             inputmode: inputMode,
             prefix: item.prefix,
-            suffix: item.suffix
+            suffix: item.suffix,
+            errorMessage: item.errorMessage
           }) }}
         </div>
       {% endfor %}
@@ -41,13 +41,21 @@
     {% endif %}
   {% endset %}
 
-  {{ govukFieldset({
-    legend: {
-      text: component.model.fieldset.legend.text,
-      classes: component.model.fieldset.legend.classes,
-      isPageHeading: false
-    },
-    html: fieldsetHtml
-  }) }}
-{% endmacro %}
+  {% set hasErrors = false %}
+  {% for item in component.model.items %}
+    {% if item.errorMessage %}
+      {% set hasErrors = true %}
+    {% endif %}
+  {% endfor %}
 
+  <div class="govuk-form-group {{ "govuk-form-group--error" if (hasErrors or component.model.errors) }}">
+    {{ govukFieldset({
+      legend: {
+        text: component.model.fieldset.legend.text,
+        classes: component.model.fieldset.legend.classes,
+        isPageHeading: false
+      },
+      html: fieldsetHtml
+    }) }}
+  </div>
+{% endmacro %}

package/.server/client/stylesheets/_location-input.scss

@@ -1,60 +0,0 @@
-@use "govuk-frontend" as *;
-
-.app-location-input {
-  @include govuk-clearfix;
-  font-size: 0; // removes whitespace caused by inline-block
-  margin-bottom: govuk-spacing(6);
-
-  &:has(.govuk-input--error) {
-    border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
-    padding-left: govuk-spacing(3);
-    margin-top: 0;
-  }
-}
-
-.govuk-hint:has(+ .app-location-input .govuk-input--error) {
-  border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
-  padding-left: govuk-spacing(3);
-  margin-bottom: 0;
-}
-
-.govuk-fieldset:has(.app-location-input .govuk-input--error) {
-  .govuk-fieldset__legend {
-    border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
-    padding-left: govuk-spacing(3);
-    margin-bottom: 0;
-  }
-
-  .govuk-fieldset__legend + .govuk-hint {
-    margin-top: 0;
-  }
-}
-
-.app-location-input__item {
-  display: inline-block;
-  margin-right: govuk-spacing(4);
-  margin-bottom: govuk-spacing(4);
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  @include govuk-media-query($from: tablet) {
-    margin-bottom: 0;
-  }
-
-  .govuk-form-group {
-    margin-bottom: 0;
-    display: inline-block;
-    width: auto;
-  }
-
-  .govuk-label {
-    display: block;
-  }
-
-  .govuk-input {
-    margin-bottom: 0;
-    width: auto;
-  }
-}

package/src/client/stylesheets/_location-input.scss

@@ -1,60 +0,0 @@
-@use "govuk-frontend" as *;
-
-.app-location-input {
-  @include govuk-clearfix;
-  font-size: 0; // removes whitespace caused by inline-block
-  margin-bottom: govuk-spacing(6);
-
-  &:has(.govuk-input--error) {
-    border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
-    padding-left: govuk-spacing(3);
-    margin-top: 0;
-  }
-}
-
-.govuk-hint:has(+ .app-location-input .govuk-input--error) {
-  border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
-  padding-left: govuk-spacing(3);
-  margin-bottom: 0;
-}
-
-.govuk-fieldset:has(.app-location-input .govuk-input--error) {
-  .govuk-fieldset__legend {
-    border-left: $govuk-border-width-form-group-error solid $govuk-error-colour;
-    padding-left: govuk-spacing(3);
-    margin-bottom: 0;
-  }
-
-  .govuk-fieldset__legend + .govuk-hint {
-    margin-top: 0;
-  }
-}
-
-.app-location-input__item {
-  display: inline-block;
-  margin-right: govuk-spacing(4);
-  margin-bottom: govuk-spacing(4);
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  @include govuk-media-query($from: tablet) {
-    margin-bottom: 0;
-  }
-
-  .govuk-form-group {
-    margin-bottom: 0;
-    display: inline-block;
-    width: auto;
-  }
-
-  .govuk-label {
-    display: block;
-  }
-
-  .govuk-input {
-    margin-bottom: 0;
-    width: auto;
-  }
-}