From 4ee83502851cb25226bb2958a31dfef4a886e08c Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Wed, 12 Nov 2025 15:21:22 +0000 Subject: [PATCH 01/10] feat: errors inline on Location components - Improved error message handling in `LocationFieldHelpers` by including `errorMessage` in the view model. - Modified HTML template to display error messages and adjust form group classes based on error presence. --- src/client/stylesheets/_location-input.scss | 62 +++++++++++-------- .../engine/components/LocationFieldHelpers.ts | 12 +--- src/server/plugins/engine/components/types.ts | 3 + .../components/_location-field-base.html | 14 ++++- 4 files changed, 56 insertions(+), 35 deletions(-) diff --git a/src/client/stylesheets/_location-input.scss b/src/client/stylesheets/_location-input.scss index 5cf52f72b..aeb549b55 100644 --- a/src/client/stylesheets/_location-input.scss +++ b/src/client/stylesheets/_location-input.scss @@ -2,59 +2,71 @@ .app-location-input { @include govuk-clearfix; - font-size: 0; // removes whitespace caused by inline-block margin-bottom: govuk-spacing(6); + display: flex; + flex-wrap: nowrap; + gap: govuk-spacing(4); - &:has(.govuk-input--error) { + @include govuk-media-query($until: tablet) { + flex-wrap: wrap; + } +} + +.govuk-fieldset.govuk-form-group--error { + .app-location-input { 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; + .govuk-hint { + border-left: $govuk-border-width-form-group-error solid $govuk-error-colour; + padding-left: govuk-spacing(3); + margin-bottom: 0; } } .app-location-input__item { - display: inline-block; - margin-right: govuk-spacing(4); - margin-bottom: govuk-spacing(4); + flex: 1 1 0; + min-width: 0; - &:last-child { - margin-right: 0; + @include govuk-media-query($until: tablet) { + flex: 1 1 100%; // Full width on mobile } - @include govuk-media-query($from: tablet) { - margin-bottom: 0; - } - - .govuk-form-group { - margin-bottom: 0; - display: inline-block; - width: auto; + .govuk-form-group, + .govuk-form-group--error { + margin-bottom: 0 !important; + display: block !important; + border: 0 !important; + padding: 0 !important; } .govuk-label { display: block; + font-size: 1rem; } .govuk-input { margin-bottom: 0; width: auto; } + + .govuk-input--error { + border: 2px solid $govuk-border-colour !important; + } + + .govuk-error-message { + display: block; + margin-bottom: govuk-spacing(1); + font-size: 1rem; + white-space: normal; + word-wrap: break-word; + } } diff --git a/src/server/plugins/engine/components/LocationFieldHelpers.ts b/src/server/plugins/engine/components/LocationFieldHelpers.ts index ec721df2c..7e1e70a0a 100644 --- a/src/server/plugins/engine/components/LocationFieldHelpers.ts +++ b/src/server/plugins/engine/components/LocationFieldHelpers.ts @@ -30,12 +30,9 @@ export function getLocationFieldViewModel( payload: FormPayload, errors?: FormSubmissionError[] ) { - const { collection, name } = component + const { collection } = component const { fieldset: existingFieldset, label } = viewModel - // Check for component errors only - const hasError = errors?.some((error) => error.name === name) - // Use the component collection to generate the subitems const items: DateInputItem[] = collection .getViewModel(payload, errors) @@ -46,10 +43,6 @@ export function getLocationFieldViewModel( label.toString = () => label.text // Use string labels } - if (hasError || errorMessage) { - classes = `${classes ?? ''} govuk-input--error`.trim() - } - // Allow any `toString()`-able value so non-numeric // values are shown alongside their error messages if (!isFormValue(value)) { @@ -64,7 +57,8 @@ export function getLocationFieldViewModel( value, classes, prefix, - suffix + suffix, + errorMessage } }) diff --git a/src/server/plugins/engine/components/types.ts b/src/server/plugins/engine/components/types.ts index 0d8e37266..0f369d483 100644 --- a/src/server/plugins/engine/components/types.ts +++ b/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 } diff --git a/src/server/plugins/engine/views/components/_location-field-base.html b/src/server/plugins/engine/views/components/_location-field-base.html index df6dbfffc..571c6c94f 100644 --- a/src/server/plugins/engine/views/components/_location-field-base.html +++ b/src/server/plugins/engine/views/components/_location-field-base.html @@ -27,7 +27,11 @@ type: inputType, inputmode: inputMode, prefix: item.prefix, - suffix: item.suffix + suffix: item.suffix, + errorMessage: item.errorMessage, + formGroup: { + classes: "govuk-!-margin-bottom-0" + } }) }} {% endfor %} @@ -41,12 +45,20 @@ {% endif %} {% endset %} + {% set hasErrors = false %} + {% for item in component.model.items %} + {% if item.errorMessage %} + {% set hasErrors = true %} + {% endif %} + {% endfor %} + {{ govukFieldset({ legend: { text: component.model.fieldset.legend.text, classes: component.model.fieldset.legend.classes, isPageHeading: false }, + classes: "govuk-form-group--error" if (hasErrors or component.model.errors), html: fieldsetHtml }) }} {% endmacro %} From 3ba929446dac95b023e7c6db12d1a35a8f949b73 Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Wed, 12 Nov 2025 15:28:28 +0000 Subject: [PATCH 02/10] lint: fixes --- src/client/stylesheets/_location-input.scss | 10 +++++----- .../engine/views/components/_location-field-base.html | 1 - 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/client/stylesheets/_location-input.scss b/src/client/stylesheets/_location-input.scss index aeb549b55..c3fecbac5 100644 --- a/src/client/stylesheets/_location-input.scss +++ b/src/client/stylesheets/_location-input.scss @@ -42,10 +42,10 @@ .govuk-form-group, .govuk-form-group--error { - margin-bottom: 0 !important; - display: block !important; - border: 0 !important; - padding: 0 !important; + margin-bottom: 0; + display: block; + border: 0; + padding: 0; } .govuk-label { @@ -59,7 +59,7 @@ } .govuk-input--error { - border: 2px solid $govuk-border-colour !important; + border: 2px solid $govuk-border-colour; } .govuk-error-message { diff --git a/src/server/plugins/engine/views/components/_location-field-base.html b/src/server/plugins/engine/views/components/_location-field-base.html index 571c6c94f..4d51e14a8 100644 --- a/src/server/plugins/engine/views/components/_location-field-base.html +++ b/src/server/plugins/engine/views/components/_location-field-base.html @@ -62,4 +62,3 @@ html: fieldsetHtml }) }} {% endmacro %} - From c566d4735bb4a47bca47b23fc4504a02086c1f3f Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Wed, 12 Nov 2025 15:49:46 +0000 Subject: [PATCH 03/10] test: update tests --- .../components/EastingNorthingField.test.ts | 12 +++++++++--- .../engine/components/LatLongField.test.ts | 12 +++++++++--- .../components/LocationFieldHelpers.test.ts | 19 ++++++++++++++----- 3 files changed, 32 insertions(+), 11 deletions(-) diff --git a/src/server/plugins/engine/components/EastingNorthingField.test.ts b/src/server/plugins/engine/components/EastingNorthingField.test.ts index 8cbebf244..3777eb7b1 100644 --- a/src/server/plugins/engine/components/EastingNorthingField.test.ts +++ b/src/server/plugins/engine/components/EastingNorthingField.test.ts @@ -335,7 +335,7 @@ describe('EastingNorthingField', () => { expect(instructionText).toContain('meters') }) - it('sets error classes when component has errors', () => { + it('handles errors when component has validation errors', () => { const payload = getFormData({ easting: '', northing: '' @@ -352,15 +352,21 @@ describe('EastingNorthingField', () => { const viewModel = field.getViewModel(payload, errors) + // Check that error is passed to the viewModel + expect(viewModel.errors).toEqual(errors) + + // Items should be present with their basic structure expect(viewModel.items?.[0]).toEqual( expect.objectContaining({ - classes: expect.stringContaining('govuk-input--error') + id: 'myComponent__easting', + name: 'myComponent__easting' }) ) expect(viewModel.items?.[1]).toEqual( expect.objectContaining({ - classes: expect.stringContaining('govuk-input--error') + id: 'myComponent__northing', + name: 'myComponent__northing' }) ) }) diff --git a/src/server/plugins/engine/components/LatLongField.test.ts b/src/server/plugins/engine/components/LatLongField.test.ts index 6536506f6..57bac38e4 100644 --- a/src/server/plugins/engine/components/LatLongField.test.ts +++ b/src/server/plugins/engine/components/LatLongField.test.ts @@ -324,7 +324,7 @@ describe('LatLongField', () => { expect(instructionText).toContain('decimal') }) - it('sets error classes when component has errors', () => { + it('handles errors when component has validation errors', () => { const payload = getFormData({ latitude: '', longitude: '' @@ -341,15 +341,21 @@ describe('LatLongField', () => { const viewModel = field.getViewModel(payload, errors) + // Check that error is passed to the viewModel + expect(viewModel.errors).toEqual(errors) + + // Items should be present with their basic structure expect(viewModel.items?.[0]).toEqual( expect.objectContaining({ - classes: expect.stringContaining('govuk-input--error') + id: 'myComponent__latitude', + name: 'myComponent__latitude' }) ) expect(viewModel.items?.[1]).toEqual( expect.objectContaining({ - classes: expect.stringContaining('govuk-input--error') + id: 'myComponent__longitude', + name: 'myComponent__longitude' }) ) }) diff --git a/src/server/plugins/engine/components/LocationFieldHelpers.test.ts b/src/server/plugins/engine/components/LocationFieldHelpers.test.ts index 3adf8fee7..1cf77a087 100644 --- a/src/server/plugins/engine/components/LocationFieldHelpers.test.ts +++ b/src/server/plugins/engine/components/LocationFieldHelpers.test.ts @@ -71,7 +71,7 @@ describe('LocationFieldHelpers', () => { expect(instructionText).toContain('decimal format') }) - it('should add error classes to items when component has errors', () => { + it('should handle component-level errors correctly', () => { const def: LatLongFieldComponent = { title: 'Example lat long', name: 'myComponent', @@ -99,20 +99,26 @@ describe('LocationFieldHelpers', () => { const viewModel = field.getViewModel(payload, errors) + // Check that errors are passed to the viewModel + expect(viewModel.errors).toEqual(errors) + + // Items should still have their structure expect(viewModel.items[0]).toEqual( expect.objectContaining({ - classes: expect.stringContaining('govuk-input--error') + id: 'myComponent__latitude', + name: 'myComponent__latitude' }) ) expect(viewModel.items[1]).toEqual( expect.objectContaining({ - classes: expect.stringContaining('govuk-input--error') + id: 'myComponent__longitude', + name: 'myComponent__longitude' }) ) }) - it('should add error classes to items when subfield has errors', () => { + it('should pass error messages to individual items when subfield has errors', () => { const def: LatLongFieldComponent = { title: 'Example lat long', name: 'myComponent', @@ -140,9 +146,12 @@ describe('LocationFieldHelpers', () => { const viewModel = field.getViewModel(payload, errors) + // Check that errorMessage is passed through to the item expect(viewModel.items[0]).toEqual( expect.objectContaining({ - classes: expect.stringContaining('govuk-input--error') + errorMessage: { + text: 'Invalid latitude' + } }) ) }) From 239e231a672a999ccbc6db0d241459a1dc89f87d Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Wed, 12 Nov 2025 16:25:07 +0000 Subject: [PATCH 04/10] fix: remove unnecessary whitespace in location field template --- src/client/stylesheets/_location-input.scss | 20 +++++++++++++++---- .../components/_location-field-base.html | 2 +- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/client/stylesheets/_location-input.scss b/src/client/stylesheets/_location-input.scss index c3fecbac5..a26f6e0d0 100644 --- a/src/client/stylesheets/_location-input.scss +++ b/src/client/stylesheets/_location-input.scss @@ -1,5 +1,15 @@ @use "govuk-frontend" as *; +.govuk-fieldset__legend { + &.govuk-fieldset__legend--m { + margin-bottom: govuk-spacing(3); + } +} + +.govuk-hint + .app-location-input { + margin-top: govuk-spacing(3); +} + .app-location-input { @include govuk-clearfix; margin-bottom: govuk-spacing(6); @@ -30,6 +40,10 @@ padding-left: govuk-spacing(3); margin-bottom: 0; } + + .govuk-hint + .app-location-input { + margin-top: 0; + } } .app-location-input__item { @@ -50,7 +64,6 @@ .govuk-label { display: block; - font-size: 1rem; } .govuk-input { @@ -59,13 +72,12 @@ } .govuk-input--error { - border: 2px solid $govuk-border-colour; + border: 2px solid $govuk-error-colour; } .govuk-error-message { display: block; - margin-bottom: govuk-spacing(1); - font-size: 1rem; + margin-bottom: govuk-spacing(3); white-space: normal; word-wrap: break-word; } diff --git a/src/server/plugins/engine/views/components/_location-field-base.html b/src/server/plugins/engine/views/components/_location-field-base.html index 4d51e14a8..897f83d59 100644 --- a/src/server/plugins/engine/views/components/_location-field-base.html +++ b/src/server/plugins/engine/views/components/_location-field-base.html @@ -51,7 +51,7 @@ {% set hasErrors = true %} {% endif %} {% endfor %} - + {{ govukFieldset({ legend: { text: component.model.fieldset.legend.text, From e0aa51eb6832a08a8a6a8df10fa4da0f9f2fd7ef Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Wed, 12 Nov 2025 16:54:12 +0000 Subject: [PATCH 05/10] style: Updated flex properties for better layout on desktop and mobile views. --- src/client/stylesheets/_location-input.scss | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/client/stylesheets/_location-input.scss b/src/client/stylesheets/_location-input.scss index a26f6e0d0..e7b940243 100644 --- a/src/client/stylesheets/_location-input.scss +++ b/src/client/stylesheets/_location-input.scss @@ -17,7 +17,8 @@ flex-wrap: nowrap; gap: govuk-spacing(4); - @include govuk-media-query($until: tablet) { + // Wrap items on tablet and below to prevent bleeding when error messages are present + @include govuk-media-query($until: desktop) { flex-wrap: wrap; } } @@ -50,8 +51,13 @@ flex: 1 1 0; min-width: 0; - @include govuk-media-query($until: tablet) { - flex: 1 1 100%; // Full width on mobile + @include govuk-media-query($until: desktop) { + flex: 1 1 100%; + min-width: 100%; + } + + @include govuk-media-query($from: desktop) { + min-width: 280px; } .govuk-form-group, @@ -69,6 +75,8 @@ .govuk-input { margin-bottom: 0; width: auto; + max-width: 100%; + box-sizing: border-box; } .govuk-input--error { @@ -80,5 +88,8 @@ margin-bottom: govuk-spacing(3); white-space: normal; word-wrap: break-word; + overflow-wrap: break-word; + max-width: 100%; + box-sizing: border-box; } } From 7470a20af81ebb885a448ce9809812d752fd0855 Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Wed, 12 Nov 2025 18:04:18 +0000 Subject: [PATCH 06/10] style: refactor location input styles and HTML structure for improved error handling and layout - Updated SCSS for error states in location input fields, ensuring consistent padding and margin. - Refactored HTML structure to utilize grid layout for better responsiveness and alignment of input items. --- src/client/stylesheets/_location-input.scss | 104 ++++-------------- .../components/_location-field-base.html | 63 +++++------ 2 files changed, 51 insertions(+), 116 deletions(-) diff --git a/src/client/stylesheets/_location-input.scss b/src/client/stylesheets/_location-input.scss index e7b940243..f76f8eddd 100644 --- a/src/client/stylesheets/_location-input.scss +++ b/src/client/stylesheets/_location-input.scss @@ -1,95 +1,29 @@ @use "govuk-frontend" as *; -.govuk-fieldset__legend { - &.govuk-fieldset__legend--m { - margin-bottom: govuk-spacing(3); +.govuk-form-group--error { + .govuk-fieldset { + .govuk-fieldset__legend { + padding-left: 0; + margin-bottom: 0; + } + + .govuk-hint { + padding-left: 0; + margin-bottom: 0; + margin-top: 0; + } + + > .govuk-grid-row { + .govuk-grid-column-two-thirds { + padding-left: govuk-spacing(3); + } + } } } -.govuk-hint + .app-location-input { - margin-top: govuk-spacing(3); -} - -.app-location-input { - @include govuk-clearfix; - margin-bottom: govuk-spacing(6); - display: flex; - flex-wrap: nowrap; - gap: govuk-spacing(4); - - // Wrap items on tablet and below to prevent bleeding when error messages are present - @include govuk-media-query($until: desktop) { - flex-wrap: wrap; - } -} - -.govuk-fieldset.govuk-form-group--error { - .app-location-input { - border-left: $govuk-border-width-form-group-error solid $govuk-error-colour; - padding-left: govuk-spacing(3); - margin-top: 0; - } - - .govuk-fieldset__legend { - border-left: $govuk-border-width-form-group-error solid $govuk-error-colour; - padding-left: govuk-spacing(3); - margin-bottom: 0; - } - - .govuk-hint { - border-left: $govuk-border-width-form-group-error solid $govuk-error-colour; - padding-left: govuk-spacing(3); - margin-bottom: 0; - } - - .govuk-hint + .app-location-input { - margin-top: 0; - } -} - -.app-location-input__item { - flex: 1 1 0; - min-width: 0; - - @include govuk-media-query($until: desktop) { - flex: 1 1 100%; - min-width: 100%; - } - - @include govuk-media-query($from: desktop) { - min-width: 280px; - } - +.govuk-grid-column-one-half { .govuk-form-group, .govuk-form-group--error { margin-bottom: 0; - display: block; - border: 0; - padding: 0; - } - - .govuk-label { - display: block; - } - - .govuk-input { - margin-bottom: 0; - width: auto; - max-width: 100%; - box-sizing: border-box; - } - - .govuk-input--error { - border: 2px solid $govuk-error-colour; - } - - .govuk-error-message { - display: block; - margin-bottom: govuk-spacing(3); - white-space: normal; - word-wrap: break-word; - overflow-wrap: break-word; - max-width: 100%; - box-sizing: border-box; } } diff --git a/src/server/plugins/engine/views/components/_location-field-base.html b/src/server/plugins/engine/views/components/_location-field-base.html index 897f83d59..a2cfacf9b 100644 --- a/src/server/plugins/engine/views/components/_location-field-base.html +++ b/src/server/plugins/engine/views/components/_location-field-base.html @@ -12,29 +12,29 @@ }) }} {% endif %} -
- {% for item in component.model.items %} -
- {{ govukInput({ - id: item.id, - name: item.name, - label: { - text: item.label, - classes: "govuk-label--s" - }, - classes: item.classes, - value: item.value, - type: inputType, - inputmode: inputMode, - prefix: item.prefix, - suffix: item.suffix, - errorMessage: item.errorMessage, - formGroup: { - classes: "govuk-!-margin-bottom-0" - } - }) }} +
+
+
+ {% for item in component.model.items %} +
+ {{ govukInput({ + id: item.id, + name: item.name, + label: { + text: item.label + }, + classes: item.classes, + value: item.value, + type: inputType, + inputmode: inputMode, + prefix: item.prefix, + suffix: item.suffix, + errorMessage: item.errorMessage + }) }} +
+ {% endfor %}
- {% endfor %} +
{% if component.model.instructionText %} @@ -52,13 +52,14 @@ {% endif %} {% endfor %} - {{ govukFieldset({ - legend: { - text: component.model.fieldset.legend.text, - classes: component.model.fieldset.legend.classes, - isPageHeading: false - }, - classes: "govuk-form-group--error" if (hasErrors or component.model.errors), - html: fieldsetHtml - }) }} +
+ {{ govukFieldset({ + legend: { + text: component.model.fieldset.legend.text, + classes: component.model.fieldset.legend.classes, + isPageHeading: false + }, + html: fieldsetHtml + }) }} +
{% endmacro %} From ce6e46ec0b905532eb3bdee5283eafe086f21860 Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Wed, 12 Nov 2025 18:12:05 +0000 Subject: [PATCH 07/10] style: add margin-top to location input grid row for improved spacing --- src/client/stylesheets/_location-input.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/client/stylesheets/_location-input.scss b/src/client/stylesheets/_location-input.scss index f76f8eddd..da1d73917 100644 --- a/src/client/stylesheets/_location-input.scss +++ b/src/client/stylesheets/_location-input.scss @@ -12,12 +12,14 @@ margin-bottom: 0; margin-top: 0; } + } - > .govuk-grid-row { - .govuk-grid-column-two-thirds { - padding-left: govuk-spacing(3); - } - } + .govuk-fieldset > .govuk-grid-row { + margin-top: govuk-spacing(1); + } + + .govuk-fieldset > .govuk-grid-row .govuk-grid-column-two-thirds { + padding-left: govuk-spacing(3); } } From aca29ce1c7056b487d79680ea9c81de99d326d33 Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Thu, 13 Nov 2025 09:46:22 +0000 Subject: [PATCH 08/10] style: remove unused location input styles --- src/client/stylesheets/_location-input.scss | 31 --------------------- 1 file changed, 31 deletions(-) delete mode 100644 src/client/stylesheets/_location-input.scss diff --git a/src/client/stylesheets/_location-input.scss b/src/client/stylesheets/_location-input.scss deleted file mode 100644 index da1d73917..000000000 --- a/src/client/stylesheets/_location-input.scss +++ /dev/null @@ -1,31 +0,0 @@ -@use "govuk-frontend" as *; - -.govuk-form-group--error { - .govuk-fieldset { - .govuk-fieldset__legend { - padding-left: 0; - margin-bottom: 0; - } - - .govuk-hint { - padding-left: 0; - margin-bottom: 0; - margin-top: 0; - } - } - - .govuk-fieldset > .govuk-grid-row { - margin-top: govuk-spacing(1); - } - - .govuk-fieldset > .govuk-grid-row .govuk-grid-column-two-thirds { - padding-left: govuk-spacing(3); - } -} - -.govuk-grid-column-one-half { - .govuk-form-group, - .govuk-form-group--error { - margin-bottom: 0; - } -} From 6eac18c06d3f7b48a7f1802574ed7ccdf7d3c008 Mon Sep 17 00:00:00 2001 From: David Stone Date: Thu, 13 Nov 2025 09:46:24 +0000 Subject: [PATCH 09/10] Remove two thirds wrapper --- .../components/_location-field-base.html | 38 +++++++++---------- 1 file changed, 17 insertions(+), 21 deletions(-) diff --git a/src/server/plugins/engine/views/components/_location-field-base.html b/src/server/plugins/engine/views/components/_location-field-base.html index a2cfacf9b..742a9b448 100644 --- a/src/server/plugins/engine/views/components/_location-field-base.html +++ b/src/server/plugins/engine/views/components/_location-field-base.html @@ -13,28 +13,24 @@ {% endif %}
-
-
- {% for item in component.model.items %} -
- {{ govukInput({ - id: item.id, - name: item.name, - label: { - text: item.label - }, - classes: item.classes, - value: item.value, - type: inputType, - inputmode: inputMode, - prefix: item.prefix, - suffix: item.suffix, - errorMessage: item.errorMessage - }) }} -
- {% endfor %} + {% for item in component.model.items %} +
+ {{ govukInput({ + id: item.id, + name: item.name, + label: { + text: item.label + }, + classes: item.classes, + value: item.value, + type: inputType, + inputmode: inputMode, + prefix: item.prefix, + suffix: item.suffix, + errorMessage: item.errorMessage + }) }}
-
+ {% endfor %}
{% if component.model.instructionText %} From f01c9c53399935c65151bc147811f099c683416a Mon Sep 17 00:00:00 2001 From: Mohammed Khalid Date: Thu, 13 Nov 2025 09:48:56 +0000 Subject: [PATCH 10/10] style: remove unused location input imports from references --- src/client/stylesheets/application.scss | 1 - src/client/stylesheets/shared.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/src/client/stylesheets/application.scss b/src/client/stylesheets/application.scss index bb90268a1..349c344c2 100644 --- a/src/client/stylesheets/application.scss +++ b/src/client/stylesheets/application.scss @@ -2,7 +2,6 @@ @use "shared"; @use "code"; @use "tag-env"; -@use "location-input"; // An example of some user-supplied styling // Not great practice but it illustrates the point diff --git a/src/client/stylesheets/shared.scss b/src/client/stylesheets/shared.scss index daeadccba..cb7277959 100644 --- a/src/client/stylesheets/shared.scss +++ b/src/client/stylesheets/shared.scss @@ -2,7 +2,6 @@ @use "pkg:accessible-autocomplete"; @use "prose"; @use "summary-list"; -@use "location-input"; // Use default GDS Transport font for autocomplete .autocomplete__hint,