feat DF-527: location components

package.json

@@ -27,7 +27,7 @@
     "./components": "./.server/server/plugins/engine/components/index.js",
     "./services/*": "./.server/server/plugins/engine/services/*",
     "./engine/*": "./.server/server/plugins/engine/*",
-    "./helpers.js": "./.server/server/plugins/engine/components/helpers.js",
+    "./helpers.js": "./.server/server/plugins/engine/components/helpers/index.js",
     "./schema.js": "./.server/server/schemas/index.js",
     "./templates/*": "./.server/server/plugins/engine/views/*",
     "./cache-service.js": "./.server/server/services/cacheService.js",
@@ -70,7 +70,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@defra/forms-model": "^3.0.560",
+    "@defra/forms-model": "^3.0.569",
     "@defra/hapi-tracing": "^1.26.0",
     "@elastic/ecs-pino-format": "^1.5.0",
     "@hapi/boom": "^10.0.1",

src/client/stylesheets/_location-input.scss

@@ -0,0 +1,60 @@
+@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;
+  }
+}

src/client/stylesheets/application.scss

@@ -2,6 +2,7 @@
 @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

src/client/stylesheets/shared.scss

@@ -2,6 +2,7 @@
 @use "pkg:accessible-autocomplete";
 @use "prose";
 @use "summary-list";
+@use "location-input";
 
 // Use default GDS Transport font for autocomplete
 .autocomplete__hint,

src/server/forms/register-as-a-unicorn-breeder.yaml

@@ -163,6 +163,34 @@ pages:
     next:
       - path: '/how-many-members-of-staff-will-look-after-the-unicorns'
     components:
+      - name: dfGYuk
+        options: {}
+        schema: {}
+        type: EastingNorthingField
+        title: Easting and northing
+        hint:
+          This is an Easting and Northing component
+      - name: seTThb
+        options: {}
+        schema: {}
+        type: LatLongField
+        title: Latitute and longitude
+        hint:
+          This is an Latitute and Longitude component
+      - name: bhjloS
+        options: {}
+        schema: {}
+        type: NationalGridFieldNumberField
+        title: National grid field number
+        hint:
+          This is an National Grid Field Number component
+      - name: dfQQws
+        options: {}
+        schema: {}
+        type: OsGridRefField
+        title: Ordnance survey grid reference
+        hint:
+          This is an Ordnance survey Grid Reference component
       - name: bClCvo
         options: {}
         schema: {}

src/server/plugins/engine/components/ComponentBase.ts

@@ -22,7 +22,7 @@ export class ComponentBase {
   type: ComponentDef['type']
   name: ComponentDef['name']
   title: ComponentDef['title']
-  schema?: Extract<ComponentDef, { schema: object }>['schema']
+  schema?: Extract<ComponentDef, { schema?: object }>['schema']
   options?: Extract<ComponentDef, { options: object }>['options']
 
   isFormComponent = false