Add notification banner to a full page example

Add a version of an ‘error’ style notification banner to a new full page example based on ‘Upload a Photo’, where the photo upload always fails.

app/full-page-examples.js

@@ -9,6 +9,7 @@ module.exports = (app) => {
   require('./views/full-page-examples/passport-details')(app)
   require('./views/full-page-examples/update-your-account-details')(app)
   require('./views/full-page-examples/upload-your-photo')(app)
+  require('./views/full-page-examples/upload-your-photo-error')(app)
   require('./views/full-page-examples/what-is-your-address')(app)
   require('./views/full-page-examples/what-is-your-nationality')(app)
   require('./views/full-page-examples/what-is-your-postcode')(app)

app/views/full-page-examples/upload-your-photo-error/confirm.njk

@@ -0,0 +1,34 @@
+{% extends "_generic.njk" %}
+
+{% from "panel/macro.njk" import govukPanel %}
+
+{% set pageTitle = "Photo submitted" %}
+{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% block header %}
+  {% include "../../partials/banner.njk" %}
+  {{ govukHeader({
+    serviceName: "Apply for a passport",
+    navigation: [
+        {
+            href: "#",
+            text: "Home"
+        },
+        {
+            href: "#upload-a-photo",
+            text: "Upload a photo",
+            active: true
+        }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      {{ govukPanel({
+        titleText: pageTitle
+      }) }}
+    </div>
+  </div>
+{% endblock %}

app/views/full-page-examples/upload-your-photo-error/index.js

@@ -0,0 +1,10 @@
+module.exports = (app) => {
+  app.post(
+    '/full-page-examples/upload-your-photo-error',
+    (request, response) => {
+      return response.render('./full-page-examples/upload-your-photo-error/index', {
+        isError: true
+      })
+    }
+  )
+}

app/views/full-page-examples/upload-your-photo-error/index.njk

@@ -0,0 +1,93 @@
+---
+scenario: >-
+  As part of an online service, you are asked to upload your photo.
+
+  The upload will always fail with an error that uses the notification banner.
+---
+
+{# This example is based of the live "Passport" service: https://www.passport.service.gov.uk/photo/upload #}
+{% extends "_generic.njk" %}
+
+{% from "back-link/macro.njk" import govukBackLink %}
+{% from "button/macro.njk" import govukButton %}
+{% from "checkboxes/macro.njk" import govukCheckboxes %}
+{% from "file-upload/macro.njk" import govukFileUpload %}
+{% from "notification-banner/macro.njk" import govukNotificationBanner %}
+{% from "phase-banner/macro.njk" import govukPhaseBanner %}
+{% from "radios/macro.njk" import govukRadios %}
+
+{% block pageTitle %}Upload your photo - GOV.UK{% endblock %}
+
+{% block header %}
+  {% include "../../partials/banner.njk" %}
+  {{ govukHeader({
+    serviceName: "Apply for a passport"
+  }) }}
+{% endblock %}
+
+{% block beforeContent %}
+    {{ govukPhaseBanner({
+        tag: {
+            text: "beta"
+        },
+        html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
+    }) }}
+    {{ govukBackLink({
+        text: "Back",
+        href: "#"
+    }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+        <form method="post" novalidate>
+            {% if isError %}
+                {{ govukNotificationBanner({
+                "type": "error",
+                "html": "<p class=\"govuk-notification-banner__heading\">There was a problem uploading your file. <a href=\"#\" class=\"govuk-notification-banner__link\">Please try again.</a></p>\n"
+                }) }}
+            {% endif %}
+
+            <h1 class="govuk-heading-xl">Upload your photo</h1>
+
+            <p class="govuk-body">
+                Your photo will now go through an automated check.
+            </p>
+
+            <p class="govuk-body">
+                You’ll need to review it before you add the photo to your application.
+            </p>
+
+            {{ govukFileUpload({
+                id: "photo",
+                name: "photo",
+                label: {
+                    text: "Upload your photo"
+                },
+                hint: {
+                    text: "Your photo must be at least 50KB and no more than 10MB"
+                },
+                errorMessage: errors["photo"]
+            }) }}
+
+            {{ govukCheckboxes({
+                idPrefix: "terms-and-conditions",
+                name: "terms-and-conditions",
+                items: [
+                    {
+                        value: "true",
+                        html: 'I accept the <a class="govuk-link" href="#">terms and conditions</a>',
+                        checked: values["terms-and-conditions"]
+                    }
+                ],
+                errorMessage: errors["terms-and-conditions"]
+            }) }}
+
+            {{ govukButton({
+                text: "Submit your photo"
+            }) }}
+        </form>
+    </div>
+  </div>
+{% endblock %}