New designer: Consolidate form views, attributes, buttons etc

designer/server/src/common/components/page-body/macro.njk

@@ -61,5 +61,15 @@
 
   <div class="govuk-width-container app-width-container--wide {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
     {{ appGridLayout(rows) }}
+
+    {% if params.buttons | length > 1 %}
+      <div class="govuk-button-group">
+        {% for button in params.buttons %}
+          {{ govukButton(button) }}
+        {% endfor %}
+      </div>
+    {% elif params.buttons | length %}
+      {{ govukButton(params.buttons[0]) }}
+    {% endif %}
   </div>
 {% endmacro %}

designer/server/src/models/file/file.js

@@ -18,14 +18,23 @@ export function fileViewModel(email, validation) {
       id: 'email',
       name: 'email',
       label: {
-        text: 'Email address'
+        text: 'Email address',
+        classes: 'govuk-label--m',
+        isPageHeading: false
       },
-      value: validation?.formValues.email ?? email
+      type: 'email',
+      value: validation?.formValues.email ?? email,
+      autocomplete: 'email',
+      spellcheck: false
     },
     errorList: buildErrorList(validation?.formErrors, ['email']),
     formErrors: validation?.formErrors,
     formValues: validation?.formValues,
-    buttonText: 'Download file'
+    buttons: [
+      {
+        text: 'Download file'
+      }
+    ]
   }
 }
 

designer/server/src/models/forms/contact/email.js

@@ -13,34 +13,48 @@ export function emailViewModel(metadata, validation) {
     form: metadata,
     backLink: formOverviewBackLink(metadata.slug),
     pageTitle,
+    pageHeading: {
+      text: pageTitle,
+      caption: metadata.title,
+      size: 'large'
+    },
     errorList: buildErrorList(formErrors),
     formErrors: validation?.formErrors,
     formValues: validation?.formValues,
-    fields: {
-      address: {
+    fields: [
+      {
         id: 'address',
         name: 'address',
         label: {
-          text: 'Email address'
+          text: 'Email address',
+          isPageHeading: false
         },
         hint: {
           text: 'Enter a dedicated support team email address. Do not enter a named individual. For example, ‘[email protected]’'
         },
-        value: formValues?.address ?? metadata.contact?.email?.address
+        type: 'email',
+        value: formValues?.address ?? metadata.contact?.email?.address,
+        autocomplete: 'email',
+        spellcheck: false
       },
-      responseTime: {
+      {
         id: 'responseTime',
         name: 'responseTime',
         label: {
-          text: 'Response time'
+          text: 'Response time',
+          isPageHeading: false
         },
         hint: {
           text: 'Enter how long it takes to receive a response, for example, ‘We aim to respond within 2 working days’'
         },
         value: formValues?.responseTime ?? metadata.contact?.email?.responseTime
       }
-    },
-    buttonText: 'Save and continue'
+    ],
+    buttons: [
+      {
+        text: 'Save and continue'
+      }
+    ]
   }
 }
 

designer/server/src/models/forms/contact/email.test.js

@@ -38,12 +38,12 @@ describe('edit - model - contact - email', () => {
   it('should test email view model', () => {
     const result = emailViewModel(formMetadata)
     expect(result.pageTitle).toBe('Email address for support')
-    expect(result.fields.address.id).toBe('address')
-    expect(result.fields.address.name).toBe('address')
-    expect(result.fields.address.value).toBe('[email protected]')
-    expect(result.fields.responseTime.id).toBe('responseTime')
-    expect(result.fields.responseTime.name).toBe('responseTime')
-    expect(result.fields.responseTime.value).toBe('2 weeks')
+    expect(result.fields[0].id).toBe('address')
+    expect(result.fields[0].name).toBe('address')
+    expect(result.fields[0].value).toBe('[email protected]')
+    expect(result.fields[1].id).toBe('responseTime')
+    expect(result.fields[1].name).toBe('responseTime')
+    expect(result.fields[1].value).toBe('2 weeks')
   })
 })
 

designer/server/src/models/forms/contact/online.js

@@ -13,34 +13,45 @@ export function onlineViewModel(metadata, validation) {
     form: metadata,
     backLink: formOverviewBackLink(metadata.slug),
     pageTitle,
+    pageHeading: {
+      text: pageTitle,
+      caption: metadata.title,
+      size: 'large'
+    },
     errorList: buildErrorList(formErrors),
     formErrors: validation?.formErrors,
     formValues: validation?.formValues,
-    fields: {
-      url: {
+    fields: [
+      {
         id: 'url',
         name: 'url',
         label: {
-          text: 'Contact link'
+          text: 'Contact link',
+          isPageHeading: false
         },
         hint: {
           text: 'For example, ‘https://www.gov.uk/guidance/contact-defra’'
         },
         value: formValues?.url ?? metadata.contact?.online?.url
       },
-      text: {
+      {
         id: 'text',
         name: 'text',
         label: {
-          text: 'Text to describe the contact link'
+          text: 'Text to describe the contact link',
+          isPageHeading: false
         },
         hint: {
           text: 'For example, ‘Online contact form’'
         },
         value: formValues?.text ?? metadata.contact?.online?.text
       }
-    },
-    buttonText: 'Save and continue'
+    ],
+    buttons: [
+      {
+        text: 'Save and continue'
+      }
+    ]
   }
 }
 

designer/server/src/models/forms/contact/online.test.js

@@ -38,14 +38,14 @@ describe('edit - model - contact - online', () => {
   it('should test online view model', () => {
     const result = onlineViewModel(formMetadata)
     expect(result.pageTitle).toBe('Contact link for support')
-    expect(result.fields.url.id).toBe('url')
-    expect(result.fields.url.name).toBe('url')
-    expect(result.fields.url.value).toBe(
+    expect(result.fields[0].id).toBe('url')
+    expect(result.fields[0].name).toBe('url')
+    expect(result.fields[0].value).toBe(
       'https://www.gov.uk/guidance/contact-defra'
     )
-    expect(result.fields.text.id).toBe('text')
-    expect(result.fields.text.name).toBe('text')
-    expect(result.fields.text.value).toBe('Online contact form')
+    expect(result.fields[1].id).toBe('text')
+    expect(result.fields[1].name).toBe('text')
+    expect(result.fields[1].value).toBe('Online contact form')
   })
 })
 

designer/server/src/models/forms/contact/phone.js

@@ -7,24 +7,43 @@ import { formOverviewBackLink } from '~/src/models/links.js'
  */
 export function phoneViewModel(metadata, validation) {
   const pageTitle = 'Phone number and opening times'
+  const backLink = formOverviewBackLink(metadata.slug)
   const { formValues, formErrors } = validation ?? {}
 
   return {
     form: metadata,
-    backLink: formOverviewBackLink(metadata.slug),
+    backLink,
     pageTitle,
+    pageHeading: {
+      text: pageTitle,
+      caption: metadata.title,
+      size: 'large'
+    },
     errorList: buildErrorList(formErrors),
     formErrors: validation?.formErrors,
     formValues: validation?.formValues,
     field: {
       id: 'phone',
       name: 'phone',
       label: {
-        text: 'What’s the phone number and opening times for users to get help?'
+        text: 'What’s the phone number and opening times for users to get help?',
+        classes: 'govuk-label--m',
+        isPageHeading: false
       },
-      value: formValues?.phone ?? metadata.contact?.phone
+      type: 'tel',
+      value: formValues?.phone ?? metadata.contact?.phone,
+      autocomplete: 'tel'
     },
-    buttonText: 'Save and continue'
+    buttons: [
+      {
+        text: 'Save and continue'
+      },
+      {
+        text: 'Cancel',
+        href: backLink.href,
+        classes: 'govuk-button--secondary'
+      }
+    ]
   }
 }
 

designer/server/src/models/forms/create.js

@@ -25,13 +25,19 @@ export function titleViewModel(metadata, validation) {
       id: 'title',
       name: 'title',
       label: {
-        text: 'Enter a name for your form'
+        text: 'Enter a name for your form',
+        classes: 'govuk-label--l',
+        isPageHeading: true
       },
       value: formValues?.title ?? metadata?.title,
       autocapitalize: true,
       spellcheck: true
     },
-    buttonText: 'Continue'
+    buttons: [
+      {
+        text: 'Continue'
+      }
+    ]
   }
 }
 
@@ -54,16 +60,24 @@ export function organisationViewModel(metadata, validation) {
     field: {
       id: 'organisation',
       name: 'organisation',
-      legend: {
-        text: 'Choose a lead organisation for this form'
+      fieldset: {
+        legend: {
+          text: 'Choose a lead organisation for this form',
+          isPageHeading: true,
+          classes: 'govuk-fieldset__legend--l'
+        }
       },
       items: organisations.map((organisation) => ({
         text: organisation,
         value: organisation
       })),
       value: formValues?.organisation ?? metadata?.organisation
     },
-    buttonText: 'Continue'
+    buttons: [
+      {
+        text: 'Continue'
+      }
+    ]
   }
 }
 
@@ -120,12 +134,17 @@ export function teamViewModel(metadata, validation) {
         hint: {
           text: 'Used to contact the form subject matter expert (SME) or key stakeholder. Must be a UK email address, like [email protected]'
         },
+        type: 'email',
         value: formValues?.teamEmail ?? metadata?.teamEmail,
         autocomplete: 'email',
         spellcheck: false
       }
     ],
-    buttonText: 'Save and continue'
+    buttons: [
+      {
+        text: 'Save and continue'
+      }
+    ]
   }
 }
 

designer/server/src/models/forms/form-lifecycle.js

@@ -1,4 +1,3 @@
-import { render } from '~/src/common/nunjucks/index.js'
 import { getFormSpecificNavigation } from '~/src/models/forms/library.js'
 import { formOverviewPath } from '~/src/models/links.js'
 
@@ -14,26 +13,14 @@ export function confirmationPageViewModel(form, errorList) {
   const navigation = getFormSpecificNavigation(formPath, form)
 
   return {
+    form,
     navigation,
     pageTitle,
     pageHeading: {
       text: pageTitle,
       caption: form.title
     },
-
     errorList,
-
-    warning: form.live
-      ? { text: `It will replace the form that is currently live.` }
-      : undefined,
-
-    bodyText: form.notificationEmail
-      ? render.string(
-          'Completed forms will be sent to <a href="mailto:{{ notificationEmail | urlencode }}" class="govuk-link">{{ notificationEmail }}</a>.',
-          { context: form }
-        )
-      : undefined,
-
     buttons: [
       {
         text: 'Make draft live'

designer/server/src/models/forms/notification-email.js

@@ -13,6 +13,11 @@ export function notificationEmailViewModel(metadata, validation) {
     form: metadata,
     backLink: formOverviewBackLink(metadata.slug),
     pageTitle,
+    pageHeading: {
+      text: pageTitle,
+      caption: metadata.title,
+      size: 'large'
+    },
     errorList: buildErrorList(formErrors),
     formErrors: validation?.formErrors,
     formValues: validation?.formValues,
@@ -22,12 +27,19 @@ export function notificationEmailViewModel(metadata, validation) {
       label: {
         text: 'What email address should submitted forms be sent to?'
       },
-      value: formValues?.notificationEmail ?? metadata.notificationEmail,
       hint: {
         text: 'Used to send submitted forms for processing. Emails must end with ‘.gov.uk’ or ‘.org.uk’, like [email protected] or [email protected]'
-      }
+      },
+      type: 'email',
+      value: formValues?.notificationEmail ?? metadata.notificationEmail,
+      autocomplete: 'email',
+      spellcheck: false
     },
-    buttonText: 'Save and continue'
+    buttons: [
+      {
+        text: 'Save and continue'
+      }
+    ]
   }
 }