@defra/forms-engine-plugin 5.0.0-alpha.12 → 5.0.0-alpha.13

package/.server/server/plugins/engine/pageControllers/helpers/pages.js

@@ -1,4 +1,5 @@
 import { ControllerType, controllerNameFromPath } from '@defra/forms-model';
+import { UnknownPageControllerError } from "../../errors.js";
 import * as PageControllers from "../index.js";
 /**
  * Creates page instance for each {@link Page} type
@@ -44,7 +45,7 @@ export function createPage(model, pageDef) {
     }
   }
   if (typeof controller === 'undefined') {
-    throw new Error(`Page controller ${pageDef.controller} does not exist`);
+    throw new UnknownPageControllerError(pageDef.controller);
   }
   return controller;
 }

package/.server/server/plugins/engine/pageControllers/helpers/pages.js.map

@@ -1 +1 @@
-{"version":3,"file":"pages.js","names":["ControllerType","controllerNameFromPath","PageControllers","createPage","model","pageDef","controllerName","controller","QuestionPageController","Start","StartPageController","Page","Terminal","TerminalPageController","Summary","SummaryPageController","Status","StatusPageController","FileUpload","FileUploadPageController","Repeat","RepeatPageController","controllers","Ctrl","Error"],"sources":["../../../../../../src/server/plugins/engine/pageControllers/helpers/pages.ts"],"sourcesContent":["import {\n  ControllerType,\n  controllerNameFromPath,\n  type Page\n} from '@defra/forms-model'\n\nimport { type FormModel } from '~/src/server/plugins/engine/models/index.js'\nimport * as PageControllers from '~/src/server/plugins/engine/pageControllers/index.js'\n\nexport type PageControllerClass = InstanceType<PageControllerType>\nexport type PageControllerType =\n  (typeof PageControllers)[keyof typeof PageControllers]\n\n/**\n * Creates page instance for each {@link Page} type\n */\nexport function createPage(model: FormModel, pageDef: Page) {\n  const controllerName = controllerNameFromPath(pageDef.controller)\n\n  if (!pageDef.controller) {\n    return new PageControllers.QuestionPageController(model, pageDef)\n  }\n\n  // Patch legacy controllers\n  if (controllerName && pageDef.controller !== controllerName) {\n    pageDef.controller = controllerName\n  }\n\n  let controller: PageControllerClass | undefined\n\n  switch (pageDef.controller) {\n    case ControllerType.Start:\n      controller = new PageControllers.StartPageController(model, pageDef)\n      break\n\n    case ControllerType.Page:\n      controller = new PageControllers.QuestionPageController(model, pageDef)\n      break\n\n    case ControllerType.Terminal:\n      controller = new PageControllers.TerminalPageController(model, pageDef)\n      break\n\n    case ControllerType.Summary:\n      controller = new PageControllers.SummaryPageController(model, pageDef)\n      break\n\n    case ControllerType.Status:\n      controller = new PageControllers.StatusPageController(model, pageDef)\n      break\n\n    case ControllerType.FileUpload:\n      controller = new PageControllers.FileUploadPageController(model, pageDef)\n      break\n\n    case ControllerType.Repeat:\n      controller = new PageControllers.RepeatPageController(model, pageDef)\n      break\n  }\n\n  if (typeof controller === 'undefined') {\n    if (model.controllers?.[pageDef.controller]) {\n      const Ctrl = model.controllers[pageDef.controller]\n      controller = new Ctrl(model, pageDef) as unknown as PageControllerClass // type assertion needed because TS can't verify custom controller structure\n    }\n  }\n\n  if (typeof controller === 'undefined') {\n    throw new Error(`Page controller ${pageDef.controller} does not exist`)\n  }\n\n  return controller\n}\n"],"mappings":"AAAA,SACEA,cAAc,EACdC,sBAAsB,QAEjB,oBAAoB;AAG3B,OAAO,KAAKC,eAAe;AAM3B;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,KAAgB,EAAEC,OAAa,EAAE;EAC1D,MAAMC,cAAc,GAAGL,sBAAsB,CAACI,OAAO,CAACE,UAAU,CAAC;EAEjE,IAAI,CAACF,OAAO,CAACE,UAAU,EAAE;IACvB,OAAO,IAAIL,eAAe,CAACM,sBAAsB,CAACJ,KAAK,EAAEC,OAAO,CAAC;EACnE;;EAEA;EACA,IAAIC,cAAc,IAAID,OAAO,CAACE,UAAU,KAAKD,cAAc,EAAE;IAC3DD,OAAO,CAACE,UAAU,GAAGD,cAAc;EACrC;EAEA,IAAIC,UAA2C;EAE/C,QAAQF,OAAO,CAACE,UAAU;IACxB,KAAKP,cAAc,CAACS,KAAK;MACvBF,UAAU,GAAG,IAAIL,eAAe,CAACQ,mBAAmB,CAACN,KAAK,EAAEC,OAAO,CAAC;MACpE;IAEF,KAAKL,cAAc,CAACW,IAAI;MACtBJ,UAAU,GAAG,IAAIL,eAAe,CAACM,sBAAsB,CAACJ,KAAK,EAAEC,OAAO,CAAC;MACvE;IAEF,KAAKL,cAAc,CAACY,QAAQ;MAC1BL,UAAU,GAAG,IAAIL,eAAe,CAACW,sBAAsB,CAACT,KAAK,EAAEC,OAAO,CAAC;MACvE;IAEF,KAAKL,cAAc,CAACc,OAAO;MACzBP,UAAU,GAAG,IAAIL,eAAe,CAACa,qBAAqB,CAACX,KAAK,EAAEC,OAAO,CAAC;MACtE;IAEF,KAAKL,cAAc,CAACgB,MAAM;MACxBT,UAAU,GAAG,IAAIL,eAAe,CAACe,oBAAoB,CAACb,KAAK,EAAEC,OAAO,CAAC;MACrE;IAEF,KAAKL,cAAc,CAACkB,UAAU;MAC5BX,UAAU,GAAG,IAAIL,eAAe,CAACiB,wBAAwB,CAACf,KAAK,EAAEC,OAAO,CAAC;MACzE;IAEF,KAAKL,cAAc,CAACoB,MAAM;MACxBb,UAAU,GAAG,IAAIL,eAAe,CAACmB,oBAAoB,CAACjB,KAAK,EAAEC,OAAO,CAAC;MACrE;EACJ;EAEA,IAAI,OAAOE,UAAU,KAAK,WAAW,EAAE;IACrC,IAAIH,KAAK,CAACkB,WAAW,GAAGjB,OAAO,CAACE,UAAU,CAAC,EAAE;MAC3C,MAAMgB,IAAI,GAAGnB,KAAK,CAACkB,WAAW,CAACjB,OAAO,CAACE,UAAU,CAAC;MAClDA,UAAU,GAAG,IAAIgB,IAAI,CAACnB,KAAK,EAAEC,OAAO,CAAmC,EAAC;IAC1E;EACF;EAEA,IAAI,OAAOE,UAAU,KAAK,WAAW,EAAE;IACrC,MAAM,IAAIiB,KAAK,CAAC,mBAAmBnB,OAAO,CAACE,UAAU,iBAAiB,CAAC;EACzE;EAEA,OAAOA,UAAU;AACnB","ignoreList":[]}
+{"version":3,"file":"pages.js","names":["ControllerType","controllerNameFromPath","UnknownPageControllerError","PageControllers","createPage","model","pageDef","controllerName","controller","QuestionPageController","Start","StartPageController","Page","Terminal","TerminalPageController","Summary","SummaryPageController","Status","StatusPageController","FileUpload","FileUploadPageController","Repeat","RepeatPageController","controllers","Ctrl"],"sources":["../../../../../../src/server/plugins/engine/pageControllers/helpers/pages.ts"],"sourcesContent":["import {\n  ControllerType,\n  controllerNameFromPath,\n  type Page\n} from '@defra/forms-model'\n\nimport { UnknownPageControllerError } from '~/src/server/plugins/engine/errors.js'\nimport { type FormModel } from '~/src/server/plugins/engine/models/index.js'\nimport * as PageControllers from '~/src/server/plugins/engine/pageControllers/index.js'\n\nexport type PageControllerClass = InstanceType<PageControllerType>\nexport type PageControllerType =\n  (typeof PageControllers)[keyof typeof PageControllers]\n\n/**\n * Creates page instance for each {@link Page} type\n */\nexport function createPage(model: FormModel, pageDef: Page) {\n  const controllerName = controllerNameFromPath(pageDef.controller)\n\n  if (!pageDef.controller) {\n    return new PageControllers.QuestionPageController(model, pageDef)\n  }\n\n  // Patch legacy controllers\n  if (controllerName && pageDef.controller !== controllerName) {\n    pageDef.controller = controllerName\n  }\n\n  let controller: PageControllerClass | undefined\n\n  switch (pageDef.controller) {\n    case ControllerType.Start:\n      controller = new PageControllers.StartPageController(model, pageDef)\n      break\n\n    case ControllerType.Page:\n      controller = new PageControllers.QuestionPageController(model, pageDef)\n      break\n\n    case ControllerType.Terminal:\n      controller = new PageControllers.TerminalPageController(model, pageDef)\n      break\n\n    case ControllerType.Summary:\n      controller = new PageControllers.SummaryPageController(model, pageDef)\n      break\n\n    case ControllerType.Status:\n      controller = new PageControllers.StatusPageController(model, pageDef)\n      break\n\n    case ControllerType.FileUpload:\n      controller = new PageControllers.FileUploadPageController(model, pageDef)\n      break\n\n    case ControllerType.Repeat:\n      controller = new PageControllers.RepeatPageController(model, pageDef)\n      break\n  }\n\n  if (typeof controller === 'undefined') {\n    if (model.controllers?.[pageDef.controller]) {\n      const Ctrl = model.controllers[pageDef.controller]\n      controller = new Ctrl(model, pageDef) as unknown as PageControllerClass // type assertion needed because TS can't verify custom controller structure\n    }\n  }\n\n  if (typeof controller === 'undefined') {\n    throw new UnknownPageControllerError(pageDef.controller)\n  }\n\n  return controller\n}\n"],"mappings":"AAAA,SACEA,cAAc,EACdC,sBAAsB,QAEjB,oBAAoB;AAE3B,SAASC,0BAA0B;AAEnC,OAAO,KAAKC,eAAe;AAM3B;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,KAAgB,EAAEC,OAAa,EAAE;EAC1D,MAAMC,cAAc,GAAGN,sBAAsB,CAACK,OAAO,CAACE,UAAU,CAAC;EAEjE,IAAI,CAACF,OAAO,CAACE,UAAU,EAAE;IACvB,OAAO,IAAIL,eAAe,CAACM,sBAAsB,CAACJ,KAAK,EAAEC,OAAO,CAAC;EACnE;;EAEA;EACA,IAAIC,cAAc,IAAID,OAAO,CAACE,UAAU,KAAKD,cAAc,EAAE;IAC3DD,OAAO,CAACE,UAAU,GAAGD,cAAc;EACrC;EAEA,IAAIC,UAA2C;EAE/C,QAAQF,OAAO,CAACE,UAAU;IACxB,KAAKR,cAAc,CAACU,KAAK;MACvBF,UAAU,GAAG,IAAIL,eAAe,CAACQ,mBAAmB,CAACN,KAAK,EAAEC,OAAO,CAAC;MACpE;IAEF,KAAKN,cAAc,CAACY,IAAI;MACtBJ,UAAU,GAAG,IAAIL,eAAe,CAACM,sBAAsB,CAACJ,KAAK,EAAEC,OAAO,CAAC;MACvE;IAEF,KAAKN,cAAc,CAACa,QAAQ;MAC1BL,UAAU,GAAG,IAAIL,eAAe,CAACW,sBAAsB,CAACT,KAAK,EAAEC,OAAO,CAAC;MACvE;IAEF,KAAKN,cAAc,CAACe,OAAO;MACzBP,UAAU,GAAG,IAAIL,eAAe,CAACa,qBAAqB,CAACX,KAAK,EAAEC,OAAO,CAAC;MACtE;IAEF,KAAKN,cAAc,CAACiB,MAAM;MACxBT,UAAU,GAAG,IAAIL,eAAe,CAACe,oBAAoB,CAACb,KAAK,EAAEC,OAAO,CAAC;MACrE;IAEF,KAAKN,cAAc,CAACmB,UAAU;MAC5BX,UAAU,GAAG,IAAIL,eAAe,CAACiB,wBAAwB,CAACf,KAAK,EAAEC,OAAO,CAAC;MACzE;IAEF,KAAKN,cAAc,CAACqB,MAAM;MACxBb,UAAU,GAAG,IAAIL,eAAe,CAACmB,oBAAoB,CAACjB,KAAK,EAAEC,OAAO,CAAC;MACrE;EACJ;EAEA,IAAI,OAAOE,UAAU,KAAK,WAAW,EAAE;IACrC,IAAIH,KAAK,CAACkB,WAAW,GAAGjB,OAAO,CAACE,UAAU,CAAC,EAAE;MAC3C,MAAMgB,IAAI,GAAGnB,KAAK,CAACkB,WAAW,CAACjB,OAAO,CAACE,UAAU,CAAC;MAClDA,UAAU,GAAG,IAAIgB,IAAI,CAACnB,KAAK,EAAEC,OAAO,CAAmC,EAAC;IAC1E;EACF;EAEA,IAAI,OAAOE,UAAU,KAAK,WAAW,EAAE;IACrC,MAAM,IAAIN,0BAA0B,CAACI,OAAO,CAACE,UAAU,CAAC;EAC1D;EAEA,OAAOA,UAAU;AACnB","ignoreList":[]}

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

@@ -73,6 +73,7 @@
   <div id="{{component.model.name}}" class="govuk-form-group app-location-field {{ "govuk-form-group--error" if hasErrors }}"
     data-locationtype="{{component.type | lower}}"
     data-country="{{component.model.country}}"
+    data-lang="{{component.model.lang}}"
     data-maplayers="{{component.model.mapLayers}}">
     {{ govukFieldset({
       legend: {

package/.server/server/plugins/engine/views/components/geospatialfield.html

@@ -2,6 +2,7 @@
 
 {% macro GeospatialField(component) %}
   <div class="app-geospatial-field"
+    data-lang="{{component.model.lang}}"
     data-country="{{component.model.country}}"
     data-geometryTypes="{{component.model.geometryTypes}}"
     data-maplayers="{{component.model.mapLayers}}">

package/.server/server/plugins/engine/views/components/osgridreffield.html

@@ -3,7 +3,9 @@
 
 {% macro OsGridRefField(component) %}
   {% set hasErrors = component.model.errorMessage %}
-  <div class="govuk-form-group app-location-field {{ "govuk-form-group--error" if hasErrors }}" data-locationtype="{{component.type | lower}}">
+  <div class="govuk-form-group app-location-field {{ "govuk-form-group--error" if hasErrors }}"
+    data-locationtype="{{component.type | lower}}"
+    data-lang="{{component.model.lang}}">
     <div class="app-location-field-inputs">
       {{ TextField(component) }}
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-engine-plugin",
-  "version": "5.0.0-alpha.12",
+  "version": "5.0.0-alpha.13",
   "description": "Defra forms engine",
   "type": "module",
   "files": [

package/src/client/javascripts/geospatial-map.js

@@ -4,6 +4,11 @@ import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
 import createDrawPlugin from '@defra/interactive-map/plugins/draw-ml'
 import { bbox } from '@turf/bbox'
 
+import {
+  DEFAULT_LANG,
+  ENGLISH_LANG,
+  WELSH_LANG
+} from './map-constants.js'
 import {
   EVENTS,
   createMap,
@@ -15,11 +20,31 @@ import {
 } from './map.js'
 import sssiDataset from './sssi-dataset.js'
 import { formatDelimtedList } from './utils.js'
+import cy from '../../server/plugins/engine/i18n/translations/cy.json' with { type: 'json' }
+import enGB from '../../server/plugins/engine/i18n/translations/en-GB.json' with { type: 'json' }
+
+const englishTranslations = enGB.components.geospatialField.map
+const welshTranslations = cy.components.geospatialField.map
+
+/**
+ * @type {Record<LanguageCode, GeospatialLanguageTexts>}
+ */
+export const languageTexts = {
+  [ENGLISH_LANG]: englishTranslations,
+  [WELSH_LANG]: welshTranslations
+}
+
+/**
+ * Get the map texts for the given language code
+ * @param {LanguageCode} lang - the lanugae code
+ */
+export function getTexts(lang = DEFAULT_LANG) {
+  return languageTexts[lang]
+}
 
 const helpPanelConfig = {
   focus: false,
   showLabel: true,
-  label: 'How to use this map',
   mobile: {
     slot: 'drawer',
     open: true,
@@ -41,59 +66,79 @@ const helpPanelConfig = {
 }
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getLineOrShapeText(allowLine, allowShape) {
+function getLineOrShapeText(texts, allowLine, allowShape) {
   if (allowLine && allowShape) {
-    return 'a line or shape'
+    return texts.lineOrShapeText
   }
   if (allowLine) {
-    return 'a line'
+    return texts.lineText
   }
   if (allowShape) {
-    return 'a shape'
+    return texts.shapeText
   }
   return ''
 }
 
 /**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getAllowedTypesPhrase(allowPoint, allowLine, allowShape) {
+function getAllowedTypesPhrase(texts, allowPoint, allowLine, allowShape) {
   const items = []
 
   if (allowPoint) {
-    items.push('points')
+    items.push(texts.typesPhrasePoint)
   }
   if (allowLine) {
-    items.push('lines')
+    items.push(texts.typesPhraseLine)
   }
   if (allowShape) {
-    items.push('shapes')
+    items.push(texts.typesPhraseShape)
   }
 
-  return formatDelimtedList(items, ',', 'or')
+  return formatDelimtedList(items, ',', texts.typesPhraseOr)
 }
 
 /**
+ * Gets the type description for a given feature
+ * @param {Feature} feature - the geojson feature
+ * @param {GeometryTexts} typeDescriptions
+ */
+function getTypeDescription(feature, typeDescriptions) {
+  switch (feature.geometry.type) {
+    case 'Point':
+      return typeDescriptions.point
+    case 'LineString':
+      return typeDescriptions.line
+    case 'Polygon':
+      return typeDescriptions.polygon
+  }
+}
+
+/**
+ * @param {GeospatialPanelTexts} texts
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-export function getHelpPanelHtml(allowPoint, allowLine, allowShape) {
-  const lineOrShapeText = getLineOrShapeText(allowLine, allowShape)
-  const doneExtra = lineOrShapeText
-    ? `<li>Double‑click, or select 'Done', when you have finished drawing ${lineOrShapeText}</li>`
+export function getHelpPanelHtml(texts, allowPoint, allowLine, allowShape) {
+  const lineOrShapeText = getLineOrShapeText(texts, allowLine, allowShape)
+  const point3 = lineOrShapeText
+    ? `<li>${texts.point3} ${lineOrShapeText}</li>`
     : ''
   const allowedTypesText = getAllowedTypesPhrase(
+    texts,
     allowPoint,
     allowLine,
     allowShape
   )
-  return `<p class="govuk-body-s govuk-!-margin-bottom-2">You can add ${allowedTypesText} to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li>${doneExtra}<li>Give the location a name</li></ul>`
+  return `<p class="govuk-body-s govuk-!-margin-bottom-2">${texts.ledeIntro} ${allowedTypesText} ${texts.ledeOutro}</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>${texts.point1}</li><li>${texts.point2}</li>${point3}<li>${texts.point4}</li></ul>`
 }
 
 const lineFeatureProperties = {
@@ -108,15 +153,6 @@ const polygonFeatureProperties = {
   strokeWidth: 2
 }
 
-/**
- * @type {Record<'Point' | 'LineString' | 'Polygon', string>}
- */
-const typeDescriptions = {
-  Point: 'Point',
-  LineString: 'Line',
-  Polygon: 'Shape'
-}
-
 const POINT_SVG =
   '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" /><circle cx="12" cy="10" r="3" />'
 const POLYGON_SVG =
@@ -199,19 +235,30 @@ export function processGeospatial(config, geospatial, index) {
   const options = {
     geometryTypes
   }
+  const lang = /** @type {LanguageCode} */ (
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    geospatial.dataset.lang || DEFAULT_LANG
+  )
   const uiManager = getUIManager(
     geojson,
     map,
     mapId,
     listEl,
     geospatialInput,
-    options
+    options,
+    lang
   )
 
+  const languageManager = {
+    lang,
+    texts: getTexts(lang)
+  }
+
   /**
    * @type {Context}
    */
   const context = {
+    languageManager,
     map,
     featuresManager,
     activeFeatureManager,
@@ -251,15 +298,17 @@ export function addFeatureToMap(feature, drawPlugin, map) {
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
 export function createFeaturesHTML(
   features,
   mapId,
   disabled = false,
-  readonly = false
+  readonly = false,
+  lang = DEFAULT_LANG
 ) {
   return `<dl class="govuk-summary-list">
-    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, disabled, readonly)).join('\n')}
+    ${features.map((feature, index) => createFeatureHTML(feature, index, mapId, disabled, readonly, lang)).join('\n')}
   </dl>`
 }
 
@@ -279,14 +328,17 @@ export function focusFeature(feature, mapProvider) {
  * @param {string} mapId - the ID of the map
  * @param {boolean} [disabled] - render the list with disabled links
  * @param {boolean} [readonly] - render the list item in readonly mode
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
 export function createFeatureHTML(
   feature,
   index,
   mapId,
   disabled = false,
-  readonly = false
+  readonly = false,
+  lang = DEFAULT_LANG
 ) {
+  const texts = getTexts(lang)
   const flattened = feature.geometry.coordinates.flat(2)
 
   const points = []
@@ -302,28 +354,28 @@ export function createFeatureHTML(
   // Change action link
   const changeAction = () => `<li class="govuk-summary-list__actions-list-item">
   <a class="govuk-link govuk-link--no-visited-state ${disabled ? 'govuk-link--disabled' : ''}" href="#${mapId}" data-action="edit" data-id="${feature.id}"
-    data-type="${feature.geometry.type}">Update<span class="govuk-visually-hidden"> location</span></a>
+    data-type="${feature.geometry.type}">${texts.itemUpdateLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`
 
   // Delete action link
   const deleteAction = () => `<li class="govuk-summary-list__actions-list-item">
   <a class="govuk-link govuk-link--no-visited-state ${disabled ? 'govuk-link--disabled' : ''}" href="#" data-action="delete" data-id="${feature.id}"
-    data-type="${feature.geometry.type}">Delete<span class="govuk-visually-hidden"> location</span></a>
+    data-type="${feature.geometry.type}">${texts.itemDeleteLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`
 
   // Focus action link
   const focusAction = () => `<li class="govuk-summary-list__actions-list-item">
-  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="focus" data-id="${feature.id}">Show<span class="govuk-visually-hidden"> location</span></a>
+  <a class="govuk-link govuk-link--no-visited-state" href="#${mapId}" data-action="focus" data-id="${feature.id}">${texts.itemFocusLink}<span class="govuk-visually-hidden"> ${texts.itemVisuallyHidden}</span></a>
 </li>`
 
   const links = readonly ? focusAction() : `${changeAction()}${deleteAction()}`
-
   const actions = `<ul class="govuk-summary-list__actions-list">${links}</ul>`
+  const typeDescription = getTypeDescription(feature, texts.typeDescriptions)
 
   return `<div class="govuk-summary-list__row govuk-summary-list__row--no-border">
   <dt class="govuk-summary-list__key">
     <div class="govuk-form-group">
-      <label class="govuk-label govuk-label--s" ${readonly ? '' : `for="description_${index}"`}>Location ${index + 1} description</label>
+      <label class="govuk-label govuk-label--s" ${readonly ? '' : `for="description_${index}"`}>${texts.itemLabel1} ${index + 1} ${texts.itemLabel2}</label>
       ${description}
     </div>
   </dt>
@@ -334,24 +386,24 @@ export function createFeatureHTML(
 <div class="govuk-summary-list__row">
   <details class="govuk-details govuk-!-margin-bottom-2">
     <summary class="govuk-details__summary">
-      <span class="govuk-details__summary-text">Coordinates</span>
+      <span class="govuk-details__summary-text">${texts.details.summary}</span>
     </summary>
     <div class="govuk-details__text">
       <dl class="govuk-summary-list">
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Type</dt>
-          <dd class="govuk-summary-list__value">${typeDescriptions[feature.geometry.type]}</dd>
+          <dt class="govuk-summary-list__key">${texts.details.type}</dt>
+          <dd class="govuk-summary-list__value">${typeDescription}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Centre grid reference</dt>
+          <dt class="govuk-summary-list__key">${texts.details.centroidGridReference}</dt>
           <dd class="govuk-summary-list__value">${feature.properties.centroidGridReference}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">First point grid reference</dt>
+          <dt class="govuk-summary-list__key">${texts.details.firstPointGridReference}</dt>
           <dd class="govuk-summary-list__value">${feature.properties.coordinateGridReference}</dd>
         </div>
         <div class="govuk-summary-list__row">
-          <dt class="govuk-summary-list__key">Detailed coordinates</dt>
+          <dt class="govuk-summary-list__key">${texts.details.detailedCoordinates}</dt>
           <dd class="govuk-summary-list__value">
             <ol class="govuk-list govuk-list--number">${coordinates}</ol>
           </dd>
@@ -510,11 +562,24 @@ function getFeaturesManager(geojson) {
  * @param {string} mapId - the ID of the map
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {Function} renderValue - function that renders the features JSON into the hidden textarea
+ * @param {LanguageCode} [lang] - the language for the feature details
  * @returns {RenderList}
  */
-function getListRenderer(geojson, mapId, listEl, renderValue) {
+function getListRenderer(
+  geojson,
+  mapId,
+  listEl,
+  renderValue,
+  lang = DEFAULT_LANG
+) {
   return function renderList(disabled = false) {
-    const html = createFeaturesHTML(geojson.features, mapId, disabled)
+    const html = createFeaturesHTML(
+      geojson.features,
+      mapId,
+      disabled,
+      false,
+      lang
+    )
 
     listEl.innerHTML = html
 
@@ -542,6 +607,7 @@ function getValueRenderer(geojson, geospatialInput) {
  * @param {HTMLDivElement} listEl - where to render the feature list
  * @param {HTMLTextAreaElement} geospatialInput - the geospatial textarea
  * @param { UIManagerOptions | undefined } options - extra options such as allowable geometry types
+ * @param {LanguageCode} [lang] - the language for the feature details
  */
 export function getUIManager(
   geojson,
@@ -549,7 +615,8 @@ export function getUIManager(
   mapId,
   listEl,
   geospatialInput,
-  options
+  options,
+  lang = DEFAULT_LANG
 ) {
   /**
    * Get a CSV list of geometry types the user can create
@@ -594,7 +661,7 @@ export function getUIManager(
   }
 
   const renderValue = getValueRenderer(geojson, geospatialInput)
-  const renderList = getListRenderer(geojson, mapId, listEl, renderValue)
+  const renderList = getListRenderer(geojson, mapId, listEl, renderValue, lang)
 
   /** @type {UIManager} */
   return {
@@ -661,17 +728,19 @@ function onMapReadyFactory(context) {
     const allowPoint = types.includes('point')
     const allowLine = types.includes('line')
     const allowShape = types.includes('shape')
+    const { texts } = context.languageManager
 
     // Add info panel
     map.addPanel('info', {
       ...helpPanelConfig,
-      html: getHelpPanelHtml(allowPoint, allowLine, allowShape)
+      label: texts.helpPanel.label,
+      html: getHelpPanelHtml(texts.helpPanel, allowPoint, allowLine, allowShape)
     })
 
     if (allowPoint) {
       map.addButton('btnAddPoint', {
         variant: 'tertiary',
-        label: 'Add point',
+        label: texts.buttons.point,
         iconSvgContent: POINT_SVG,
         onClick: () => {
           resetActiveFeature()
@@ -688,7 +757,7 @@ function onMapReadyFactory(context) {
     if (allowShape) {
       map.addButton('btnAddPolygon', {
         variant: 'tertiary',
-        label: 'Add shape',
+        label: texts.buttons.polygon,
         iconSvgContent: POLYGON_SVG,
         onClick: () => {
           resetActiveFeature()
@@ -705,7 +774,7 @@ function onMapReadyFactory(context) {
     if (allowLine) {
       map.addButton('btnAddLine', {
         variant: 'tertiary',
-        label: 'Add line',
+        label: texts.buttons.line,
         iconSvgContent: LINE_SVG,
         onClick: () => {
           resetActiveFeature()
@@ -1129,6 +1198,7 @@ function onListElKeydownFactory() {
  * Renders the features into the list
  * @callback RenderList
  * @param {boolean} [disabled] - whether to render the list with disabled links
+ * @param {LanguageCode} [lang] - the language for the feature details
  * @returns {void}
  */
 
@@ -1183,8 +1253,59 @@ function onListElKeydownFactory() {
  * @property {GetAllowableGeometryTypes} getAllowableGeometryTypes - function that returns the array of geometry types a user can create
  */
 
+/**
+ * @typedef {object} GeometryTexts
+ * @property {string} point - the label for a point feature in the list
+ * @property {string} line - the label for a line string feature in the list
+ * @property {string} polygon - the label for a polygon feature in the list
+ */
+
+/**
+ * @typedef {object} GeospatialPanelTexts
+ * @property {string} label - the label for the info panel
+ * @property {string} ledeIntro - the lede intro text for the info panel
+ * @property {string} ledeOutro - the lede outro text for the info panel
+ * @property {string} lineText - the label for the info panel line text
+ * @property {string} shapeText - the label for the info panel shape text
+ * @property {string} point1 - the text for bullet point 1 in the info panel
+ * @property {string} point2 - the text for bullet point 2 in the info panel
+ * @property {string} point3 - the text for bullet point 3 in the info panel
+ * @property {string} point4 - the text for bullet point 4 in the info panel
+ * @property {string} lineOrShapeText - the label for the info panel line or shape text
+ * @property {string} typesPhrasePoint - the label for the info panel types phrase point
+ * @property {string} typesPhraseLine - the label for the info panel types phrase line
+ * @property {string} typesPhraseShape - the label for the info panel types phrase shape
+ * @property {string} typesPhraseOr - the label for the info panel types phrase "or"
+ */
+
+/**
+ * @typedef {object} GeospatialLanguageTexts
+ * @property {GeometryTexts} typeDescriptions - the descriptions of the geometry types
+ * @property {GeospatialPanelTexts} helpPanel - texts for the info panel
+ * @property {GeometryTexts} buttons - the labels for the action buttons
+ * @property {string} itemLabel1 - the first part of the label for a feature in the list
+ * @property {string} itemLabel2 - the second part of the label for a feature in the list
+ * @property {string} itemUpdateLink - the label for the "update" link for a feature in the list
+ * @property {string} itemDeleteLink - the label for the "delete" link for a feature in the list
+ * @property {string} itemFocusLink - the label for the "focus" link for a feature in the list
+ * @property {string} itemVisuallyHidden - visually hidden text to add context to action links
+ * @property {object} details - labels for the details section of a feature in the list
+ * @property {string} details.summary - label for the summary of a feature in the list
+ * @property {string} details.type - label for the type of a feature in the list
+ * @property {string} details.centroidGridReference - label for the centroid grid reference of a feature in the list
+ * @property {string} details.firstPointGridReference - label for the first point grid reference of a feature in the list
+ * @property {string} details.detailedCoordinates - label for the detailed coordinates of a feature in the list
+ */
+
+/**
+ * @typedef {object} LanguageManager
+ * @property {LanguageCode} lang - the language for the interactive map
+ * @property {GeospatialLanguageTexts} texts - the descriptions of the geometry types
+ */
+
 /**
  * @typedef {object} Context
+ * @property {LanguageManager} languageManager - the language manager for the interactive map
  * @property {InteractiveMap} map - the interactive map
  * @property {MapLibreMap} [mapProvider] - the interactive map provider
  * @property {FeaturesManager} featuresManager - the features manager
@@ -1195,5 +1316,6 @@ function onListElKeydownFactory() {
  */
 
 /**
+ * @import { LanguageCode } from './map.js'
  * @import { MapLibreMap, UIManagerOptions } from './map.js'
  */

package/src/client/javascripts/location-map.js

@@ -1,6 +1,11 @@
 // @ts-expect-error - no types
 import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
 
+import {
+  DEFAULT_LANG,
+  ENGLISH_LANG,
+  WELSH_LANG
+} from './map-constants.js'
 import {
   EVENTS,
   centerMap,
@@ -14,9 +19,30 @@ import {
   osGridRefToLatLong
 } from './map.js'
 import sssiDataset from './sssi-dataset.js'
+import cy from '../../server/plugins/engine/i18n/translations/cy.json' with { type: 'json' }
+import enGB from '../../server/plugins/engine/i18n/translations/en-GB.json' with { type: 'json' }
+
+const englishTranslations = enGB.components.locationFieldBase.map
+const welshTranslations = cy.components.locationFieldBase.map
 
 const LOCATION_FIELD_SELECTOR = 'input.govuk-input'
 
+/**
+ * @type {Record<LanguageCode, LocationLanguageTexts>}
+ */
+export const languageTexts = {
+  [ENGLISH_LANG]: englishTranslations,
+  [WELSH_LANG]: welshTranslations
+}
+
+/**
+ * Get the map texts for the given language code
+ * @param {LanguageCode} lang - the lanugae code
+ */
+export function getTexts(lang = DEFAULT_LANG) {
+  return languageTexts[lang]
+}
+
 /**
  * Gets initial map config for a location field
  * @param {HTMLDivElement} locationField - the location field element
@@ -437,6 +463,11 @@ export function processLocation(config, location, index) {
     initConfig.plugins = [createDatasetsPlugin({ datasets })]
   }
 
+  const lang = /** @type {LanguageCode} */ (
+    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+    location.dataset.lang || DEFAULT_LANG
+  )
+
   const { map, interactPlugin } = createMap(mapId, initConfig, config)
 
   map.on(
@@ -461,11 +492,13 @@ export function processLocation(config, location, index) {
           throw new Error('Not implemented')
       }
 
+      const texts = getTexts(lang)
+
       // Add info panel
       map.addPanel('info', {
         focus: false,
         showLabel: true,
-        label: 'How to use the map',
+        label: texts.helpPanel.label,
         mobile: {
           slot: 'drawer',
           open: true,
@@ -484,7 +517,7 @@ export function processLocation(config, location, index) {
           dismissible: true,
           modal: false
         },
-        html: '<ul><li>Search for a place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Use a mouse or keyboard to centre the point at the location</li><li>Click to add the location to the map</li></ul>'
+        html: `<ul><li>${texts.helpPanel.point1}</li><li>${texts.helpPanel.point2}</li><li>${texts.helpPanel.point3}</li><li>${texts.helpPanel.point4}</li></ul>`
       })
 
       // Enable the interact plugin
@@ -494,5 +527,20 @@ export function processLocation(config, location, index) {
 }
 
 /**
+ * @typedef {object} LocationPanelTexts
+ * @property {string} label - the label for the info panel
+ * @property {string} point1 - the text for bullet point 1 in the info panel
+ * @property {string} point2 - the text for bullet point 2 in the info panel
+ * @property {string} point3 - the text for bullet point 3 in the info panel
+ * @property {string} point4 - the text for bullet point 4 in the info panel
+ */
+
+/**
+ * @typedef {object} LocationLanguageTexts
+ * @property {LocationPanelTexts} helpPanel - texts for the info panel
+ */
+
+/**
+ * @import { LanguageCode } from './map.js'
  * @import { InteractiveMap, InteractiveMapInitConfig, MapCenter, MapLibreMap, MapsEnvironmentConfig } from './map.js'
  */

package/src/client/javascripts/map-constants.js

@@ -0,0 +1,3 @@
+export const ENGLISH_LANG = 'en-GB'
+export const WELSH_LANG = 'cy'
+export const DEFAULT_LANG = ENGLISH_LANG

package/src/client/javascripts/map.js

@@ -460,3 +460,8 @@ export function getMapCountryLayers(apiPath, country) {
 /**
  * @import { Feature } from '../../server/plugins/engine/types.js'
  */
+
+/**
+ * Supported language codes
+ * @typedef {('en-GB'|'cy')} LanguageCode
+ */