@defra/forms-engine-plugin 0.0.1

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

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

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

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

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

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

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

@@ -0,0 +1,6 @@
+{% from "govuk/components/details/macro.njk" import govukDetails %}
+
+{% macro Details(component) %}
+  {# {{ getContext(component) | dump | safe }} #}
+  {{ govukDetails(component.model)}}
+{% endmacro %}

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

@@ -0,0 +1,5 @@
+{% from "components/textfield.html" import TextField %}
+
+{% macro EmailAddressField(component) %}
+  {{ TextField(component) }}
+{% endmacro %}

package/src/server/plugins/engine/views/components/fileuploadfield-key.html

@@ -0,0 +1,8 @@
+{% if params.errorMessage %}
+  <div class="govuk-form-group govuk-form-group--error govuk-!-margin-bottom-0">
+    <div class="govuk-!-margin-bottom-3">{{ params.name }}</div>
+    <p class="govuk-error-message">{{ params.errorMessage }}</p>
+  </div>
+{% else %}
+  {{ params.name }}
+{% endif %}

package/src/server/plugins/engine/views/components/fileuploadfield-value.html

@@ -0,0 +1,3 @@
+{% from "govuk/components/tag/macro.njk" import govukTag -%}
+
+{{ govukTag(params.tag) }}

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

@@ -0,0 +1,24 @@
+{% from "govuk/components/summary-list/macro.njk" import govukSummaryList -%}
+
+{% macro FileUploadField(component) %}
+  {% set upload = component.model.upload %}
+
+  <div id="uploadedFilesContainer">
+    <h2 class="govuk-heading-m">Uploaded files</h2>
+    {% if upload.count %}
+      <p class="govuk-body">{{upload.count}} file{{ "s" if upload.count > 1}} uploaded</p>
+      <p class="govuk-body">
+      </p>
+
+      <div class="govuk-visually-hidden" aria-live="polite" id="statusInformation">
+        {{upload.count}} file{{ "s" if upload.count > 1}} uploaded
+      </div>
+
+      {% if upload.summaryList.rows | length %}
+        {{ govukSummaryList(upload.summaryList) }}
+      {% endif %}
+    {% else %}
+      <p class="govuk-body">{{upload.count}} files uploaded</p>
+    {% endif %}
+  </div>
+{% endmacro %}

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

@@ -0,0 +1,3 @@
+{% macro Html(component) %}
+    {{ component.model.content | safe }}
+{% endmacro %}

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

@@ -0,0 +1,7 @@
+{% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+
+{% macro InsetText(component) %}
+  {{ govukInsetText({
+    html: component.model.content
+  }) }}
+{% endmacro %}

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

@@ -0,0 +1,36 @@
+{% macro List(component) %}
+  {% set params = component.model %}
+
+  <div class="govuk-form-group">
+    {% if params.content.title %}
+      <h2 class="govuk-heading-m govuk-!-margin-bottom-3">
+        {{ params.content.title }}
+      </h2>
+    {% endif %}
+
+    {% if params.content.text %}
+      <p class="govuk-body">
+        {{ params.content.text }}
+      </p>
+    {% endif %}
+
+    {% if params.type == 'numbered' %}
+      <ol class="govuk-list govuk-list--number {%- if params.classes %} {{ params.classes }}{% endif %}">
+    {% else %}
+      <ul class="govuk-list govuk-list--bullet {%- if params.classes %} {{ params.classes }}{% endif %}">
+    {% endif %}
+    {% for item in params.items %}
+      <li>
+        {{ item.text }}
+        {% if item.hint.text | length %}
+          <br><span class="govuk-hint govuk-!-display-inline-block">{{ item.hint.text }}</span>
+        {% endif %}
+      </li>
+    {% endfor %}
+    {% if params.type == 'numbered' %}
+      </ol>
+    {% else %}
+      </ul>
+    {% endif %}
+  </div>
+{% endmacro %}

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

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

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

@@ -0,0 +1,10 @@
+{% from "govuk/components/textarea/macro.njk" import govukTextarea %}
+{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+
+{% macro MultilineTextField(component) %}
+  {% if component.model.isCharacterOrWordCount == true %}
+    {{ govukCharacterCount(component.model) }}
+  {% else %}
+    {{ govukTextarea(component.model) }}
+  {% endif %}
+{% endmacro %}

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

@@ -0,0 +1,5 @@
+{% from "components/textfield.html" import TextField %}
+
+{% macro NumberField(component) %}
+  {{ TextField(component) }}
+{% endmacro %}

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

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

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

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

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

@@ -0,0 +1,5 @@
+{% from "components/textfield.html" import TextField %}
+
+{% macro TelephoneNumberField(component) %}
+  {{ TextField(component) }}
+{% endmacro %}

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/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/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"
+}) }}