@defra/forms-engine-plugin 4.15.0 → 4.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/forms-engine-plugin",
-  "version": "4.15.0",
+  "version": "4.17.0",
   "description": "Defra forms engine",
   "type": "module",
   "files": [
@@ -87,7 +87,7 @@
   },
   "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@defra/forms-model": "^3.0.674",
+    "@defra/forms-model": "^3.0.678",
     "@defra/hapi-tracing": "^1.29.0",
     "@defra/interactive-map": "^0.0.22-alpha",
     "@elastic/ecs-pino-format": "^1.5.0",

package/src/client/stylesheets/_prose.scss

@@ -54,3 +54,22 @@
     @extend %govuk-section-break--xl;
   }
 }
+
+.govuk-notification-banner__content {
+  .app-prose-scope > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+// GOV.UK Frontend does not expose placeholder selectors for these — class selectors are the only option.
+.app-prose-notification-banner-scope {
+  p {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
+    @extend .govuk-notification-banner__heading;
+  }
+
+  a {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
+    @extend .govuk-notification-banner__link;
+  }
+}

package/src/server/forms/simple-form.yaml

@@ -78,6 +78,25 @@ pages:
         id: '00738799-3489-4ab2-a57b-542eecb31bfa'
     next: []
     id: da0fbdb4-a2de-4650-be16-9ba552af135f
+  - title: ''
+    path: '/notification-demo'
+    components:
+      - type: NotificationBanner
+        title: Important
+        name: notificationImportant
+        content: 'Contact us if you need [help with your application](https://www.defra.gov.uk).'
+        options:
+          heading: There may be a delay in processing your application.
+        id: ca6b6590-1608-49f4-82f9-9d92e38e66ea
+      - type: NotificationBanner
+        title: Success
+        name: notificationSuccess
+        content: 'Your application has been submitted.'
+        options:
+          type: success
+        id: b6960f4b-d771-4956-9c9b-17da5c603062
+    next: []
+    id: be4b4b86-514c-43bb-8cdc-f9aed6155924
   - id: 449a45f6-4541-4a46-91bd-8b8931b07b50
     title: ''
     path: '/summary'

package/src/server/plugins/engine/components/DatePartsField.ts

@@ -229,7 +229,9 @@ export class DatePartsField extends FormComponent {
       ],
       advancedSettingsErrors: [
         { type: 'dateMin', template: messageTemplate.dateMin },
-        { type: 'dateMax', template: messageTemplate.dateMax }
+        { type: 'dateMax', template: messageTemplate.dateMax },
+        { type: 'earliestDate', template: messageTemplate.dateMin },
+        { type: 'latestDate', template: messageTemplate.dateMax }
       ]
     }
   }
@@ -281,20 +283,38 @@ export function getValidatorDate(component: DatePartsField) {
         ? sub(startOfToday(), { days: options.maxDaysInPast })
         : undefined
 
+    if (dateMin && date < dateMin) {
+      return helpers.error('date.min', { ...context, limit: dateMin })
+    }
+
     // Maximum date from today
     const dateMax =
       options.maxDaysInFuture || options.maxDaysInFuture === 0
         ? add(startOfToday(), { days: options.maxDaysInFuture })
         : undefined
 
-    if (dateMin && date < dateMin) {
-      return helpers.error('date.min', { ...context, limit: dateMin })
-    }
-
     if (dateMax && date > dateMax) {
       return helpers.error('date.max', { ...context, limit: dateMax })
     }
 
+    // Minimum date from today
+    const earliestDate = options.earliestDate
+      ? new Date(options.earliestDate)
+      : undefined
+
+    if (earliestDate && date < earliestDate) {
+      return helpers.error('date.min', { ...context, limit: earliestDate })
+    }
+
+    // Maximum date from today
+    const latestDate = options.latestDate
+      ? new Date(options.latestDate)
+      : undefined
+
+    if (latestDate && date > latestDate) {
+      return helpers.error('date.max', { ...context, limit: latestDate })
+    }
+
     return payload
   }
 

package/src/server/plugins/engine/components/MonthYearField.ts

@@ -1,5 +1,5 @@
 import { ComponentType, type MonthYearFieldComponent } from '@defra/forms-model'
-import { format, isValid } from 'date-fns'
+import { format, isValid, parse } from 'date-fns'
 import {
   type Context,
   type CustomValidator,
@@ -259,6 +259,34 @@ export function getValidatorMonthYear(component: MonthYearField) {
         : payload
     }
 
+    const date = parse(
+      `${values.year}-${values.month}-01`,
+      'yyyy-MM-dd',
+      new Date()
+    )
+
+    if (!isValid(date)) {
+      return helpers.error('date.format', context)
+    }
+
+    // Minimum date from today
+    const earliestDate = options.earliestMonthYear
+      ? new Date(`${options.earliestMonthYear}-01`)
+      : undefined
+
+    if (earliestDate && date < earliestDate) {
+      return helpers.error('date.min', { ...context, limit: earliestDate })
+    }
+
+    // Maximum date from today
+    const latestDate = options.latestMonthYear
+      ? new Date(`${options.latestMonthYear}-01`)
+      : undefined
+
+    if (latestDate && date > latestDate) {
+      return helpers.error('date.max', { ...context, limit: latestDate })
+    }
+
     return payload
   }
 

package/src/server/plugins/engine/components/NotificationBanner.ts

@@ -0,0 +1,32 @@
+import { type NotificationBannerComponent } from '@defra/forms-model'
+
+import { ComponentBase } from './ComponentBase.js'
+
+export class NotificationBanner extends ComponentBase {
+  declare options: NotificationBannerComponent['options']
+  content: NotificationBannerComponent['content']
+
+  constructor(
+    def: NotificationBannerComponent,
+    props: ConstructorParameters<typeof ComponentBase>[1]
+  ) {
+    super(def, props)
+
+    const { content, options } = def
+
+    this.content = content
+    this.options = options
+  }
+
+  getViewModel() {
+    const { content, title, viewModel } = this
+
+    return {
+      ...viewModel,
+      titleHtml: title,
+      content,
+      heading: this.options.heading,
+      type: this.options.type
+    }
+  }
+}

package/src/server/plugins/engine/components/helpers/components.ts

@@ -46,6 +46,7 @@ export type Guidance =
   | InstanceType<typeof Components.Markdown>
   | InstanceType<typeof Components.InsetText>
   | InstanceType<typeof Components.List>
+  | InstanceType<typeof Components.NotificationBanner>
 
 // List component instances only
 export type ListField = InstanceType<
@@ -134,6 +135,10 @@ export function createComponent(
       component = new Components.Markdown(def, options)
       break
 
+    case ComponentType.NotificationBanner:
+      component = new Components.NotificationBanner(def, options)
+      break
+
     case ComponentType.MultilineTextField:
       component = new Components.MultilineTextField(def, options)
       break

package/src/server/plugins/engine/components/index.ts

@@ -15,6 +15,7 @@ export { Html } from './Html.js'
 export { InsetText } from './InsetText.js'
 export { List } from './List.js'
 export { Markdown } from './Markdown.js'
+export { NotificationBanner } from './NotificationBanner.js'
 export { MonthYearField } from './MonthYearField.js'
 export { MultilineTextField } from './MultilineTextField.js'
 export { NumberField } from './NumberField.js'

package/src/server/plugins/engine/views/components/notificationbanner.html

@@ -0,0 +1,15 @@
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner %}
+
+{% macro NotificationBanner(component) %}
+  {%- set bannerHtml -%}
+    {%- if component.model.heading -%}
+      <div class="app-prose-notification-banner-scope">{{ component.model.heading | markdown | safe }}</div>
+    {%- endif -%}
+    <div class="app-prose-scope">{{ component.model.content | markdown | safe }}</div>
+  {%- endset -%}
+  {{ govukNotificationBanner({
+    titleHtml: component.model.titleHtml,
+    html: bannerHtml,
+    type: component.model.type
+  }) }}
+{% endmacro %}