@defra/forms-engine-plugin 0.1.10 → 0.1.12

package/src/client/javascripts/file-upload.js

@@ -1,4 +1,6 @@
 export const MAX_POLLING_DURATION = 300 // 5 minutes
+const ARIA_DESCRIBEDBY = 'aria-describedby'
+const ERROR_SUMMARY_TITLE_ID = 'error-summary-title'
 
 /**
  * Creates or updates status announcer for screen readers
@@ -127,7 +129,7 @@ function renderSummary(selectedFile, statusText, form) {
   const fileInput = form.querySelector('input[type="file"]')
 
   if (fileInput) {
-    fileInput.setAttribute('aria-describedby', 'statusInformation')
+    fileInput.setAttribute(ARIA_DESCRIBEDBY, 'statusInformation')
   }
 
   const summaryList = findOrCreateSummaryList(
@@ -150,17 +152,30 @@ function renderSummary(selectedFile, statusText, form) {
 
 /**
  * Shows an error message using the GOV.UK error summary component
+ * and adds inline error styling to the file input
  * @param {string} message - The error message to display
  * @param {HTMLElement | null} errorSummary - The error summary container
  * @param {HTMLInputElement} fileInput - The file input element
  * @returns {void}
  */
 function showError(message, errorSummary, fileInput) {
+  const topErrorSummary = document.querySelector('.govuk-error-summary')
+
+  if (topErrorSummary) {
+    const titleElement = document.getElementById(ERROR_SUMMARY_TITLE_ID)
+    if (titleElement) {
+      fileInput.setAttribute(ARIA_DESCRIBEDBY, ERROR_SUMMARY_TITLE_ID)
+    } else {
+      fileInput.removeAttribute(ARIA_DESCRIBEDBY)
+    }
+    return
+  }
+
   if (errorSummary) {
     errorSummary.innerHTML = `
         <div class="govuk-error-summary" data-module="govuk-error-summary">
           <div role="alert">
-            <h2 class="govuk-error-summary__title" id="error-summary-title">
+            <h2 class="govuk-error-summary__title" id="${ERROR_SUMMARY_TITLE_ID}">
               There is a problem
             </h2>
             <div class="govuk-error-summary__body">
@@ -173,7 +188,30 @@ function showError(message, errorSummary, fileInput) {
           </div>
         </div>
       `
-    fileInput.setAttribute('aria-describedby', 'error-summary-title')
+
+    fileInput.setAttribute(ARIA_DESCRIBEDBY, ERROR_SUMMARY_TITLE_ID)
+  }
+
+  const formGroup = fileInput.closest('.govuk-form-group')
+  if (formGroup) {
+    formGroup.classList.add('govuk-form-group--error')
+    fileInput.classList.add('govuk-file-upload--error')
+
+    const inputId = fileInput.id
+    let errorMessage = document.getElementById(`${inputId}-error`)
+
+    if (!errorMessage) {
+      errorMessage = document.createElement('p')
+      errorMessage.id = `${inputId}-error`
+      errorMessage.className = 'govuk-error-message'
+      errorMessage.innerHTML = `<span class="govuk-visually-hidden">Error:</span> ${message}`
+      formGroup.insertBefore(errorMessage, fileInput)
+    }
+
+    fileInput.setAttribute(
+      ARIA_DESCRIBEDBY,
+      `error-summary-title ${inputId}-error`
+    )
   }
 }
 
@@ -190,6 +228,18 @@ function reloadPage() {
   window.location.href = window.location.pathname
 }
 
+/**
+ * Build the upload status URL given the current pathname and the upload ID.
+ * @param {string} pathname – e.g. window.location.pathname
+ * @param {string} uploadId
+ * @returns {string} e.g. "/form/upload-status/abc123"
+ */
+export function buildUploadStatusUrl(pathname, uploadId) {
+  const pathSegments = pathname.split('/').filter((segment) => segment)
+  const prefix = pathSegments.length > 0 ? `/${pathSegments[0]}` : ''
+  return `${prefix}/upload-status/${uploadId}`
+}
+
 /**
  * Polls the upload status endpoint until the file is ready or timeout occurs
  * @param {string} uploadId - The upload ID to check
@@ -205,7 +255,12 @@ function pollUploadStatus(uploadId) {
       return
     }
 
-    fetch(`/upload-status/${uploadId}`, {
+    const uploadStatusUrl = buildUploadStatusUrl(
+      window.location.pathname,
+      uploadId
+    )
+
+    fetch(uploadStatusUrl, {
       headers: {
         Accept: 'application/json'
       }
@@ -343,6 +398,7 @@ export function initFileUpload() {
     if (errorSummary) {
       errorSummary.innerHTML = ''
     }
+
     if (fileInput.files && fileInput.files.length > 0) {
       selectedFile = fileInput.files[0]
     }

package/src/client/stylesheets/application.scss

@@ -12,3 +12,13 @@
 .autocomplete__option {
   @include govuk-typography-common;
 }
+
+//  An example of some user-supplied styling
+//  Not great practice but it illustrates the point
+.govuk-header {
+  background: #008531;
+}
+
+.govuk-header__container {
+  border-bottom: 10px solid #003d16;
+}

package/src/config/index.ts

@@ -179,12 +179,6 @@ export const config = convict({
   /**
    * API integrations
    */
-  managerUrl: {
-    format: String,
-    default: 'http://localhost:3001',
-    env: 'MANAGER_URL'
-  } as SchemaObj<string>,
-
   designerUrl: {
     format: String,
     default: 'http://localhost:3000',
@@ -253,19 +247,12 @@ export const config = convict({
     env: 'STAGING_PREFIX'
   },
 
-  serviceBannerText: {
-    doc: 'Service banner text used to show a maintenance message on all pages when set',
-    format: String,
-    default: '',
-    env: 'SERVICE_BANNER_TEXT'
-  },
-
-  googleAnalyticsTrackingId: {
-    doc: 'Google analytics tracking ID to be used when a user has opted in to additional cookies',
+  submissionEmailAddress: {
+    doc: 'Email address to send the form to (local devtool only)',
     format: String,
     default: '',
-    env: 'GOOGLE_ANALYTICS_TRACKING_ID'
-  }
+    env: 'SUBMISSION_EMAIL_ADDRESS'
+  } as SchemaObj<string>
 })
 
 config.validate({ allowed: 'strict' })

package/src/server/constants.js

@@ -1 +1,3 @@
 export const PREVIEW_PATH_PREFIX = '/preview'
+export const ERROR_PREVIEW_PATH_PREFIX = '/error-preview'
+export const FORM_PREFIX = ''

package/src/server/devserver/dxt-devtool-baselayout.html

@@ -0,0 +1,71 @@
+{% extends "govuk/template.njk" %}
+
+{% from "govuk/components/back-link/macro.njk" import govukBackLink -%}
+{% from "govuk/components/footer/macro.njk" import govukFooter -%}
+{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner -%}
+{% from "govuk/components/skip-link/macro.njk" import govukSkipLink -%}
+{% from "govuk/macros/attributes.njk" import govukAttributes -%}
+{% from "components/service-banner/macro.njk" import appServiceBanner -%}
+{% from "components/tag-env/macro.njk" import appTagEnv -%}
+{% from "govuk/components/cookie-banner/macro.njk" import govukCookieBanner -%}
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner -%}
+
+{% set productName %}
+  {{ appTagEnv({ env: "devtool" }) }}
+{% endset %}
+
+{% block head %}
+  <link rel="preload" as="font" href="{{ assetPath }}/fonts/bold-b542beb274-v2.woff2" type="font/woff2" crossorigin="anonymous">
+  <link rel="preload" as="font" href="{{ assetPath }}/fonts/light-94a07e06a1-v2.woff2" type="font/woff2" crossorigin="anonymous">
+  <link rel="stylesheet" href="{{ getDxtAssetPath("stylesheets/application.scss") }}">
+{% endblock %}
+
+{% block pageTitle -%}
+  {{ "Error: " if errors | length }}{{ pageTitle | evaluate }} - {{ name if name else config.serviceName }} - GOV.UK
+{%- endblock %}
+
+{% block skipLink %}
+  {{ govukSkipLink({
+    href: '#main-content',
+    text: 'Skip to main content'
+  }) }}
+{% endblock %}
+
+{% block header %}
+  {{ govukHeader({
+    homepageUrl: currentPath if context.isForceAccess else "https://defra.github.io/forms-engine-plugin/",
+    containerClasses: "govuk-width-container",
+    productName: productName | safe | trim,
+    serviceName: "Digital Express Toolkit",
+    serviceUrl: currentPath if context.isForceAccess else serviceUrl
+  }) }}
+{% endblock %}
+
+{% block beforeContent %}
+  {% if backLink %}
+    {{ govukBackLink(backLink) }}
+  {% endif %}
+{% endblock %}
+
+{% block content %}
+  <h1 class="govuk-heading-l">Default page template</h1>
+{% endblock %}
+
+{% block bodyEnd %}
+  <script type="module" nonce="{{ cspNonce }}" src="{{ getDxtAssetPath("application.js") }}"></script>
+{% endblock %}
+
+{% block footer %}
+  {% set meta = {
+    items: [
+      {
+        href: 'https://defra.github.io/forms-engine-plugin/',
+        text: 'DXT documentation'
+      }
+    ]
+  } if slug %}
+
+  {% if not context.isForceAccess %}
+    {{ govukFooter({ meta: meta }) }}
+  {% endif %}
+{% endblock %}

package/src/server/forms/register-as-a-unicorn-breeder.json

@@ -0,0 +1,393 @@
+{
+  "name": "Register as a unicorn breeder",
+  "pages": [
+    {
+      "path": "/whats-your-name",
+      "title": "What's your name?",
+      "components": [
+        {
+          "type": "TextField",
+          "name": "textField",
+          "title": "Name",
+          "hint": "This is a single line text box. We use it to ask for information that's likely to be 1 sentence",
+          "options": {
+            "required": true
+          },
+          "schema": {}
+        }
+      ],
+      "next": [
+        {
+          "path": "/whats-your-email-address"
+        }
+      ],
+      "section": "section"
+    },
+    {
+      "title": "Summary",
+      "path": "/summary",
+      "controller": "./pages/summary.js",
+      "components": [],
+      "next": []
+    },
+    {
+      "path": "/whats-your-email-address",
+      "title": "What's your email address?",
+      "components": [
+        {
+          "name": "MaTzaT",
+          "options": {
+            "required": true
+          },
+          "type": "EmailAddressField",
+          "title": "Email adress",
+          "schema": {},
+          "hint": "This is an email address. An email address must contain an at sign @"
+        }
+      ],
+      "next": [
+        {
+          "path": "/whats-your-phone-number"
+        }
+      ],
+      "section": "section"
+    },
+    {
+      "path": "/whats-your-phone-number",
+      "title": "What's your phone number?",
+      "components": [
+        {
+          "name": "BdKgCe",
+          "options": {
+            "required": true
+          },
+          "type": "TelephoneNumberField",
+          "title": "Phone number",
+          "schema": {},
+          "hint": "This is a telephone number. This field can only contain numbers and the + symbol"
+        }
+      ],
+      "next": [
+        {
+          "path": "/whats-your-address"
+        }
+      ],
+      "section": "section"
+    },
+    {
+      "path": "/whats-your-address",
+      "title": "What's your address?",
+      "components": [
+        {
+          "name": "wZLWPy",
+          "options": {
+            "required": true
+          },
+          "type": "UkAddressField",
+          "title": "Address",
+          "schema": {},
+          "hint": "This is a UK address. Users must enter address line 1, town and a postcode"
+        }
+      ],
+      "next": [
+        {
+          "path": "/do-you-want-your-unicorn-breeder-certificate-sent-to-this-address"
+        }
+      ],
+      "section": "section"
+    },
+    {
+      "path": "/do-you-want-your-unicorn-breeder-certificate-sent-to-this-address",
+      "title": "Do you want your unicorn breeder certificate sent to this address?",
+      "components": [
+        {
+          "name": "dBfuID",
+          "options": {},
+          "type": "YesNoField",
+          "title": "Send certificate to same address",
+          "schema": {},
+          "hint": "This is a yes or no question. We can branch to different questions based on the answer",
+          "values": {
+            "type": "listRef"
+          }
+        }
+      ],
+      "next": [
+        {
+          "path": "/what-address-do-you-want-the-certificate-sent-to",
+          "condition": "oyGPwP"
+        },
+        {
+          "path": "/when-does-your-unicorn-insurance-policy-start",
+          "condition": ""
+        }
+      ],
+      "section": "section"
+    },
+    {
+      "path": "/what-address-do-you-want-the-certificate-sent-to",
+      "title": "What address do you want the certificate sent to?",
+      "components": [
+        {
+          "name": "AegFro",
+          "options": {},
+          "type": "UkAddressField",
+          "title": "Address to send certificate",
+          "schema": {},
+          "hint": "This is a simple branch to an extra question - it's shown to users who select 'no' when asked if this is the address where the certificate should be sent"
+        }
+      ],
+      "next": [
+        {
+          "path": "/when-does-your-unicorn-insurance-policy-start"
+        }
+      ],
+      "section": "section"
+    },
+    {
+      "title": "When does your unicorn insurance policy start?",
+      "path": "/when-does-your-unicorn-insurance-policy-start",
+      "section": "Regnsa",
+      "next": [
+        {
+          "path": "/upload-your-insurance-certificate"
+        }
+      ],
+      "components": [
+        {
+          "name": "mjAccr",
+          "options": {},
+          "type": "DatePartsField",
+          "title": "Unicorn insurance policy start date",
+          "schema": {},
+          "hint": "This is a date. We can add custom validation to the field based on your requirements. For example, the date entered must be before or after a certain date"
+        }
+      ]
+    },
+    {
+      "title": "How many unicorns do you expect to breed each year?",
+      "path": "/how-many-unicorns-do-you-expect-to-breed-each-year",
+      "section": "susaYr",
+      "next": [
+        {
+          "path": "/what-type-of-unicorns-will-you-breed"
+        }
+      ],
+      "components": [
+        {
+          "name": "aitzzV",
+          "options": {},
+          "type": "RadiosField",
+          "list": "IeFOkf",
+          "title": "Number of unicorns",
+          "schema": {},
+          "hint": "This is a radio button. Users can only select one option from the list",
+          "values": {
+            "type": "listRef"
+          }
+        }
+      ]
+    },
+    {
+      "title": "What type of unicorns will you breed?",
+      "path": "/what-type-of-unicorns-will-you-breed",
+      "section": "susaYr",
+      "next": [
+        {
+          "path": "/where-will-you-keep-the-unicorns"
+        }
+      ],
+      "components": [
+        {
+          "name": "DyfjJC",
+          "options": {},
+          "type": "CheckboxesField",
+          "list": "fXiZrL",
+          "title": "Type of unicorn",
+          "schema": {},
+          "hint": "This is a check box. Users can select more than one option",
+          "values": {
+            "type": "listRef"
+          }
+        }
+      ]
+    },
+    {
+      "title": "Where will you keep the unicorns?",
+      "path": "/where-will-you-keep-the-unicorns",
+      "section": "susaYr",
+      "next": [
+        {
+          "path": "/how-many-members-of-staff-will-look-after-the-unicorns"
+        }
+      ],
+      "components": [
+        {
+          "name": "bClCvo",
+          "options": {},
+          "schema": {},
+          "type": "MultilineTextField",
+          "title": "Where you keep the unicorn",
+          "hint": "This is a multi-line text box. We use it when you expect the response to be more than 1 sentence long"
+        }
+      ]
+    },
+    {
+      "title": "How many members of staff will look after the unicorns?",
+      "path": "/how-many-members-of-staff-will-look-after-the-unicorns",
+      "section": "susaYr",
+      "next": [
+        {
+          "path": "/summary"
+        }
+      ],
+      "components": [
+        {
+          "name": "zhJMaM",
+          "options": {
+            "classes": "govuk-!-width-one-quarter"
+          },
+          "type": "NumberField",
+          "title": "Number of staff",
+          "schema": {},
+          "hint": "This is a number field. The answer must be a number. We can use custom validation to set decimal places, minimum and maximum values"
+        }
+      ]
+    },
+    {
+      "title": "Upload your insurance certificate",
+      "path": "/upload-your-insurance-certificate",
+      "controller": "FileUploadPageController",
+      "section": "Regnsa",
+      "next": [
+        {
+          "path": "/how-many-unicorns-do-you-expect-to-breed-each-year"
+        }
+      ],
+      "components": [
+        {
+          "name": "dLzALM",
+          "title": "Documents",
+          "type": "FileUploadField",
+          "hint": "We can specify the format and number of uploaded files",
+          "options": {
+            "required": false
+          },
+          "schema": {
+            "min": 1,
+            "max": 3
+          }
+        }
+      ]
+    }
+  ],
+  "conditions": [
+    {
+      "displayName": "Address is different",
+      "name": "IrVmYz",
+      "value": {
+        "name": "Address is different",
+        "conditions": [
+          {
+            "field": {
+              "name": "dBfuID",
+              "type": "YesNoField",
+              "display": "Contact details: Send certificate to same address"
+            },
+            "operator": "is",
+            "value": {
+              "type": "Value",
+              "value": "false",
+              "display": "false"
+            }
+          }
+        ]
+      }
+    },
+    {
+      "displayName": "Address is not the same",
+      "name": "oyGPwP",
+      "value": {
+        "name": "Address is not the same",
+        "conditions": [
+          {
+            "field": {
+              "name": "dBfuID",
+              "type": "YesNoField",
+              "display": "Contact details: Send certificate to same address"
+            },
+            "operator": "is",
+            "value": {
+              "type": "Value",
+              "value": "false",
+              "display": "No"
+            }
+          }
+        ]
+      }
+    }
+  ],
+  "sections": [
+    {
+      "name": "section",
+      "title": "Contact details",
+      "hideTitle": false
+    },
+    {
+      "title": "Unicorn details",
+      "name": "susaYr",
+      "hideTitle": false
+    },
+    {
+      "title": "Insurance details",
+      "name": "Regnsa",
+      "hideTitle": false
+    }
+  ],
+  "lists": [
+    {
+      "title": "number of unicorns",
+      "name": "IeFOkf",
+      "type": "string",
+      "items": [
+        {
+          "text": "1 to 5",
+          "value": "1 to 5"
+        },
+        {
+          "text": "6 to 10",
+          "value": "6 to 10"
+        },
+        {
+          "text": "11 or more",
+          "value": "11 or more"
+        }
+      ]
+    },
+    {
+      "title": "Type of unicorn",
+      "name": "fXiZrL",
+      "type": "string",
+      "items": [
+        {
+          "text": "Flying",
+          "value": "Flying"
+        },
+        {
+          "text": "Fire breathing",
+          "value": "Fire breathing"
+        },
+        {
+          "text": "Aquatic",
+          "value": "Aquatic"
+        },
+        {
+          "text": "Rainbow",
+          "value": "Rainbow"
+        }
+      ]
+    }
+  ],
+  "outputEmail": "defraforms@defra.gov.uk",
+  "startPage": "/whats-your-name"
+}