@defra/forms-engine-plugin 0.0.4 → 0.0.6

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

@@ -0,0 +1,5 @@
+{% from "govuk/components/input/macro.njk" import govukInput %}
+
+{% macro TextField(component) %}
+  {{ govukInput(component.model) }}
+{% endmacro %}

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

@@ -0,0 +1,25 @@
+{% from "partials/components.html" import componentList %}
+{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
+{% from "govuk/components/hint/macro.njk" import govukHint %}
+
+{% macro UkAddressField(component) %}
+  {% set fieldset = component.model.fieldset %}
+  {% set addressFieldHtml = componentList(component.model.components) %}
+
+  {% if component.model.hint %}
+    {% set addressHintHtml %}
+      {{ govukHint({
+        id: component.model.name + "-hint",
+        text: component.model.hint.text
+      } if fieldset else component.model.hint) }}
+    {% endset %}
+
+    {% set addressFieldHtml = addressHintHtml + addressFieldHtml %}
+  {% endif %}
+
+  {{ govukFieldset({
+    legend: fieldset.legend,
+    attributes: fieldset.attributes,
+    html: addressFieldHtml
+  }) if fieldset else addressFieldHtml }}
+{% endmacro %}

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

@@ -0,0 +1,5 @@
+{% from "components/radiosfield.html" import RadiosField %}
+
+{% macro YesNoField(component) %}
+  {{ RadiosField(component) }}
+{% endmacro %}

package/src/server/plugins/engine/views/confirmation.html

@@ -0,0 +1,19 @@
+{% extends "layout.html" %}
+
+{% from "govuk/components/panel/macro.njk" import govukPanel %}
+
+{% set mainClasses = "govuk-main-wrapper--l" %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      {{ govukPanel({
+        titleText: pageTitle
+      }) }}
+      <h2 class="govuk-heading-m">What happens next</h2>
+      <div class="app-prose-scope">
+        {{ submissionGuidance | markdown | safe }}
+      </div>
+    </div>
+  </div>
+{% endblock %}

package/src/server/plugins/engine/views/file-upload.html

@@ -0,0 +1,45 @@
+{% extends "index.html" %}
+
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/file-upload/macro.njk" import govukFileUpload %}
+{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
+
+{% block form %}
+  {{ componentList(componentsBefore) }}
+
+  <div class="govuk-error-summary-container"></div>
+
+  <form method="post" {%- if formAction and not context.isForceAccess %} action="{{ formAction }}" enctype="multipart/form-data" data-upload-id="{{ uploadId }}" {% if proxyUrl %}data-proxy-url="{{ proxyUrl }}"{% endif %} {%- endif %} novalidate>
+    {{ govukFileUpload(formComponent.model) }}
+
+    {% if formAction %}
+      {{ govukButton({
+        text: "Upload file",
+        classes: "govuk-button--secondary upload-file-button",
+        preventDoubleClick: true
+      }) }}
+    {% else %}
+      {{ govukWarningText({
+        text: "You have reached the maximum number of files. Please remove a file to upload more.",
+        iconFallbackText: "Warning"
+      }) }}
+    {% endif %}
+  </form>
+
+  {{ super() }}
+
+  <div class="govuk-summary-list-container"></div>
+
+  {% endblock %}
+
+{% block bodyEnd %}
+  {{ super() }}
+  <script type="module" nonce="{{ cspNonce }}">
+    import { initFileUpload } from '{{ getAssetPath("file-upload.js") }}';
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', initFileUpload);
+    } else {
+      initFileUpload();
+    }
+  </script>
+{% endblock %}

package/src/server/plugins/engine/views/index.html

@@ -0,0 +1,39 @@
+{% extends 'layout.html' %}
+
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+{% from "partials/components.html" import componentList with context %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      {% if previewMode %}
+        {% include "partials/preview-banner.html" %}
+      {% endif %}
+
+      {% if errors %}
+        {{ govukErrorSummary({
+          titleText: "There is a problem",
+          errorList: checkErrorTemplates(errors)
+        }) }}
+      {% endif %}
+
+      {% if hasMissingNotificationEmail %}
+        {% include "partials/warn-missing-notification-email.html" %}
+      {% endif %}
+
+      {% include "partials/heading.html" %}
+
+      {% block form %}
+        {% if page.allowContinue %}
+          {% include "partials/form.html" %}
+        {% else %}
+          {{ componentList(components) }}
+        {% endif %}
+      {% endblock %}
+    </div>
+  </div>
+
+  {% if config.cdpEnvironment == 'local' and context | length and not context.isForceAccess %}
+    {% include "partials/debug.html" %}
+  {% endif %}
+{% endblock %}

package/src/server/plugins/engine/views/item-delete.html

@@ -0,0 +1,56 @@
+{% extends "layout.html" %}
+
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/radios/macro.njk" import govukRadios %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      {% if previewMode %}
+        {% include "partials/preview-banner.html" %}
+      {% endif %}
+
+      {% if errors %}
+        {{ govukErrorSummary({
+          titleText: "There is a problem",
+          errorList: errors
+        }) }}
+      {% endif %}
+
+      {% include "partials/heading.html" %}
+
+      {% if confirmation %}
+        <p class="govuk-body govuk-!-margin-bottom-6">
+          {{ confirmation.html | safe if confirmation.html else confirmation.text }}
+        </p>
+      {% endif %}
+
+      <form method="post" novalidate>
+        <input type="hidden" name="crumb" value="{{ crumb }}">
+        <input type="hidden" name="action" value="delete">
+
+        <div class="govuk-button-group">
+          {{ govukButton({
+            text: buttonConfirm.text,
+            html: buttonConfirm.html,
+            name: "confirm",
+            value: "true",
+            classes: "govuk-button--warning",
+            preventDoubleClick: true
+          }) }}
+
+          {{ govukButton({
+            text: buttonCancel.text,
+            html: buttonCancel.html,
+            classes: "govuk-button--secondary"
+          }) }}
+        </div>
+      </form>
+    </div>
+  </div>
+
+  {% if config.cdpEnvironment == 'local' and context | length and not context.isForceAccess %}
+    {% include "partials/debug.html" %}
+  {% endif %}
+{% endblock %}

package/src/server/plugins/engine/views/layout.html

@@ -0,0 +1,199 @@
+{% 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 %}
+  {% if config.cdpEnvironment !== "prod" %}
+    {{ appTagEnv({ env: config.cdpEnvironment }) }}
+  {% endif %}
+{% endset %}
+
+{% block head %}
+  <meta name="application-name" content="@defra/forms-runner" {{- govukAttributes({
+    "data-environment": {
+      value: config.cdpEnvironment,
+      optional: true
+    },
+    "data-version": {
+      value: config.serviceVersion,
+      optional: true
+    }
+  }) }}>
+
+  <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="{{ getAssetPath("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 %}
+  {% if config.googleAnalyticsTrackingId and slug %}
+    <form method="post" action="/help/cookie-preferences/{{ slug }}?returnUrl={{ currentPath | urlencode }}">
+      <input type="hidden" name="crumb" value="{{ crumb }}">
+
+    {% set acceptHtml %}
+      <p class="govuk-body">You’ve accepted analytics cookies. You can <a class="govuk-link" href="/help/cookies/{{ slug }}">change your cookie settings</a> at any time.</p>
+    {% endset %}
+
+    {% set rejectedHtml %}
+      <p class="govuk-body">You’ve rejected analytics cookies. You can <a class="govuk-link" href="/help/cookies/{{ slug }}">change your cookie settings</a> at any time.</p>
+    {% endset %}
+
+    {% if cookieConsent.analytics !== true and cookieConsent.analytics !== false and cookieConsent.dismissed !== true %}
+      {% set html %}
+        <p class="govuk-body">We use some essential cookies to make this service work.</p>
+        <p class="govuk-body">We’d like to set analytics cookies so we can understand how people use the service and make improvements.</p>
+      {% endset %}
+
+      {{ govukCookieBanner({
+        ariaLabel: "Cookies on " + config.serviceName,
+        messages: [
+          {
+            headingText: config.serviceName,
+            html: html,
+            actions: [
+              {
+                text: "Accept analytics cookies",
+                type: "submit",
+                name: "cookies[analytics]",
+                value: "yes"
+              },
+              {
+                text: "Reject analytics cookies",
+                type: "submit",
+                name: "cookies[analytics]",
+                value: "no"
+              },
+              {
+                text: "View cookies",
+                href: "/help/cookies/" + slug
+              }
+            ]
+          }
+        ]
+      }) }}
+    {% elif cookieConsent.dismissed === false %}
+      {{ govukCookieBanner({
+        ariaLabel: "Cookies on " + config.serviceName,
+        messages: [
+          {
+            html: acceptHtml if cookieConsent.analytics === true else rejectedHtml,
+            actions: [
+              {
+                text: "Hide cookie message",
+                type: "submit",
+                name: "cookies[dismissed]",
+                value: "yes"
+              }
+            ]
+          }
+        ]
+      }) }}
+    {% endif %}
+
+    </form>
+  {% endif %}
+
+  {% if config.serviceBannerText | length %}
+    {{ appServiceBanner({
+      title: "Service status",
+      text: config.serviceBannerText
+    }) }}
+  {% endif %}
+
+  {{ govukHeader({
+    homepageUrl: currentPath if context.isForceAccess else "https://www.gov.uk",
+    containerClasses: "govuk-width-container",
+    productName: productName | safe | trim,
+    serviceName: name if name else config.serviceName,
+    serviceUrl: currentPath if context.isForceAccess else serviceUrl
+  }) }}
+{% endblock %}
+
+{% block beforeContent %}
+  {% set feedbackLink = feedbackLink or config.feedbackLink -%}
+  {% set phaseTag = phaseTag or config.phaseTag -%}
+
+  {% if phaseTag %}
+    {% set feedbackLinkHtml -%}
+      <a href="{{ currentPath if context.isForceAccess else feedbackLink }}" class="govuk-link" {%- if not context.isForceAccess %} target="_blank" rel="noopener noreferrer" {%- endif %}>
+        {%- if "mailto:" in feedbackLink -%}
+          give your feedback by email
+        {%- else -%}
+          give your feedback (opens in new tab)
+        {%- endif -%}
+      </a>
+    {%- endset %}
+
+    {{ govukPhaseBanner({
+      tag: { text: phaseTag | capitalize },
+      html: "This is a new service. Help us improve it and " + feedbackLinkHtml | safe + "."
+    }) }}
+  {% endif %}
+  {% 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="{{ getAssetPath("application.js") }}"></script>
+
+  {% if config.googleAnalyticsTrackingId and cookieConsent.analytics === true %}
+  <script id="ga-tag-js-main" nonce="{{ cspNonce }}" src="https://www.googletagmanager.com/gtag/js?id={{ config.googleAnalyticsTrackingId }}" defer></script>
+  <script id="ga-tag-js-init" nonce="{{ cspNonce }}">
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', '{{ config.googleAnalyticsTrackingId }}');
+  </script>
+{% endif %}
+{% endblock %}
+
+{% block footer %}
+  {% set meta = {
+    items: [
+      {
+        href: '/help/get-support/' + slug,
+        text: 'Get help with this form'
+      },
+      {
+        href: '/help/privacy/' + slug,
+        text: 'Privacy'
+      },
+      {
+        href: '/help/cookies/' + slug,
+        text: 'Cookies'
+      },
+      {
+        href: '/help/accessibility-statement/' + slug,
+        text: 'Accessibility Statement'
+      }
+    ]
+  } if slug %}
+
+  {% if not context.isForceAccess %}
+    {{ govukFooter({ meta: meta }) }}
+  {% endif %}
+{% endblock %}

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

@@ -0,0 +1,6 @@
+{% macro componentList(components) %}
+  {% for component in components %}
+    {% import "../components/" + component.type.toLowerCase() + ".html" as view with context %}
+    {{ view[component.type](checkComponentTemplates(component)) }}
+  {% endfor %}
+{% endmacro %}

package/src/server/plugins/engine/views/partials/conditional-components.html

@@ -0,0 +1,3 @@
+{% from "partials/components.html" import componentList with context %}
+
+{{ componentList(components) }}

package/src/server/plugins/engine/views/partials/debug.html

@@ -0,0 +1,44 @@
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+{% from "components/debug/macro.njk" import appDebug -%}
+
+{%- set debugHtml %}
+  <h2 class="govuk-heading-m">
+    Pages walked
+  </h2>
+
+  {% for question in context.relevantPages %}
+    <h3 class="govuk-heading-s govuk-!-margin-bottom-2">
+      {% if question.section %}
+      <span class="govuk-caption-m">{{ question.section.title }}</span>
+      {% endif -%}
+      {{ question.title }}
+    </h3>
+
+    {% if question.viewName !== "summary" %}
+      <p class="govuk-body">
+        <a class="govuk-link--no-visited-state" href="{{ question.href }}">
+          Edit answer <span class="govuk-visually-hidden">for {{ question.title }}</span>
+        </a>
+      </p>
+
+      {{ appDebug({
+        content: question.getFormDataFromState(undefined, context.state)
+      }) }}
+    {% else %}
+      {{ appDebug({
+        content: context.relevantState
+      }) }}
+    {% endif %}
+  {% endfor %}
+{% endset -%}
+
+<div class="govuk-grid-row">
+  <div class="govuk-grid-column-full">
+    <hr class="govuk-section-break govuk-section-break--xl govuk-section-break--visible">
+
+    {{ govukDetails({
+      summaryText: "Form context",
+      html: debugHtml | safe
+    }) }}
+  </div>
+</div>

package/src/server/plugins/engine/views/partials/form.html

@@ -0,0 +1,15 @@
+{% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/summary-list/macro.njk" import govukSummaryList -%}
+
+<form method="post" novalidate>
+  <input type="hidden" name="crumb" value="{{ crumb }}">
+  <input type="hidden" name="action" value="validate">
+
+  {{ componentList(components) }}
+
+  {{ govukButton({
+    text: "Start now" if isStartPage else "Continue",
+    isStartButton: isStartPage,
+    preventDoubleClick: true
+  }) }}
+</form>

package/src/server/plugins/engine/views/partials/heading.html

@@ -0,0 +1,16 @@
+{% if sectionTitle and (sectionTitle !== pageTitle) or itemTitle %}
+  <h2 class="govuk-caption-l govuk-!-margin-top-0" id="section-title">
+    {% if sectionTitle and itemTitle %}
+      {{- sectionTitle }}: {{ evaluate(itemTitle) -}}
+    {% elif not sectionTitle %}
+      {{- evaluate(itemTitle) -}}
+    {% else %}
+      {{- sectionTitle -}}
+    {% endif %}
+  </h2>
+{% endif %}
+{% if showTitle %}
+  <h1 class="govuk-heading-l">
+    {{ evaluate(pageTitle) }}
+  </h1>
+{% endif %}

package/src/server/plugins/engine/views/partials/preview-banner.html

@@ -0,0 +1,32 @@
+{% from "govuk/components/notification-banner/macro.njk" import govukNotificationBanner -%}
+
+{% set hasPreviousPages = context.relevantPages | length > 1 -%}
+
+{%- macro _closeLink() -%}
+  <p class="govuk-notification-banner__heading govuk-!-margin-top-1 js-preview-banner-close" hidden>
+    <a href="{{ config.designerUrl }}/library/{{ slug }}/editor" class="govuk-link--no-visited-state">Go back to the editor</a>
+  </p>
+{%- endmacro -%}
+
+{% call govukNotificationBanner() %}
+  {% if not context.isForceAccess %}
+    <p class="govuk-notification-banner__heading govuk-!-margin-bottom-0">
+      This is a preview of a {{ previewMode }} form. Do not enter personal information.
+    </p>
+
+    {{ _closeLink() }}
+  {% else %}
+    <p class="govuk-notification-banner__heading govuk-!-margin-bottom-0">
+      This is a preview of a {{ previewMode }} form page you are editing.
+    </p>
+
+    {{ _closeLink() }}
+
+    {% if hasPreviousPages %}
+      <p class="govuk-body govuk-!-margin-top-2">
+        It depends on answers from earlier pages in the form. In the live
+        version, users will need to complete those questions first.
+      </p>
+    {% endif %}
+  {% endif %}
+{% endcall %}

package/src/server/plugins/engine/views/partials/preview-banner.test.js

@@ -0,0 +1,122 @@
+import { FormStatus } from '~/src/server/routes/types.js'
+import { renderView } from '~/test/helpers/component-helpers.js'
+
+describe('Preview banner partial', () => {
+  describe.each([
+    {
+      status: FormStatus.Draft
+    },
+    {
+      status: FormStatus.Live
+    }
+  ])('Status: $status', ({ status }) => {
+    let $component = /** @type {HTMLElement | null} */ (null)
+    let $paragraphs = /** @type {HTMLElement[]} */ ([])
+
+    describe('Form preview', () => {
+      beforeEach(() => {
+        const { container } = renderView('partials/preview-banner.html', {
+          context: {
+            previewMode: status,
+            context: {
+              isForceAccess: false,
+              relevantPages: [{ title: 'Page 1' }]
+            }
+          }
+        })
+
+        $component = container.getByRole('region')
+        $paragraphs = container.getAllByRole('paragraph')
+      })
+
+      it('should render contents', () => {
+        expect($component).toBeInTheDocument()
+        expect($component).toContainElement($paragraphs[0])
+        expect($component).toHaveClass('govuk-notification-banner')
+
+        expect($paragraphs).toHaveLength(1)
+        expect($paragraphs[0]).toHaveClass('govuk-notification-banner__heading')
+      })
+
+      it('should have accessible name', () => {
+        expect($component).toHaveAccessibleName('Important')
+      })
+
+      it('should have text content', () => {
+        expect($paragraphs[0]).toHaveTextContent(
+          `This is a preview of a ${status} form. Do not enter personal information.`
+        )
+      })
+    })
+
+    describe('Preview URL direct access', () => {
+      beforeEach(() => {
+        const { container } = renderView('partials/preview-banner.html', {
+          context: {
+            previewMode: status,
+            context: {
+              isForceAccess: true,
+              relevantPages: [{ title: 'Page 1' }]
+            }
+          }
+        })
+
+        $component = container.getByRole('region')
+        $paragraphs = container.getAllByRole('paragraph')
+      })
+
+      it('should have text content', () => {
+        expect($paragraphs[0]).toHaveTextContent(
+          `This is a preview of a ${status} form page you are editing.`
+        )
+
+        expect($paragraphs[1]).toBeUndefined()
+      })
+    })
+
+    describe('Preview URL direct access (with previous pages)', () => {
+      beforeEach(() => {
+        const { container } = renderView('partials/preview-banner.html', {
+          context: {
+            previewMode: status,
+            context: {
+              isForceAccess: true,
+              relevantPages: [
+                { title: 'Page 1' },
+                { title: 'Page 2' },
+                { title: 'Page 3' }
+              ]
+            }
+          }
+        })
+
+        $component = container.getByRole('region')
+        $paragraphs = container.getAllByRole('paragraph')
+      })
+
+      it('should render contents', () => {
+        expect($component).toBeInTheDocument()
+        expect($component).toContainElement($paragraphs[0])
+        expect($component).toHaveClass('govuk-notification-banner')
+
+        expect($paragraphs).toHaveLength(2)
+        expect($paragraphs[0]).toHaveClass('govuk-notification-banner__heading')
+        expect($paragraphs[1]).toHaveClass('govuk-body')
+      })
+
+      it('should have accessible name', () => {
+        expect($component).toHaveAccessibleName('Important')
+      })
+
+      it('should have text content', () => {
+        expect($paragraphs[0]).toHaveTextContent(
+          `This is a preview of a ${status} form page you are editing.`
+        )
+
+        expect($paragraphs[1]).toHaveTextContent(
+          'It depends on answers from earlier pages in the form. In the live version, users will need to complete those questions first.'
+        )
+      })
+    })
+  })
+})

package/src/server/plugins/engine/views/partials/warn-missing-notification-email.html

@@ -0,0 +1,10 @@
+{% from "govuk/components/warning-text/macro.njk" import govukWarningText %}
+
+{% set html %}
+    If you want to receive a test email, <a target="_blank" rel="noopener noreferrer" class="govuk-link" href="{{ config.designerUrl }}/library/{{ slug }}/edit/notification-email">enter the email address (opens in new tab)</a> you want form submissions to go to.
+{% endset %}
+
+{{ govukWarningText({
+    html: html,
+    iconFallbackText: "Warning"
+}) }}