alphagov · CharlotteDowns · Jun 24, 2021 · Jun 28, 2021 · Jun 28, 2021 · Jun 28, 2021
diff --git a/app/src/app.test.mjs b/app/src/app.test.mjs
@@ -1,8 +1,5 @@
-import { join } from 'path'
-
 import { load } from 'cheerio'
-import { paths, ports } from 'govuk-frontend-config'
-import { getDirectories } from 'govuk-frontend-lib/files'
+import { ports } from 'govuk-frontend-config'
 
 const expectedPages = [
   '/',
@@ -41,21 +38,6 @@ describe(`http://localhost:${ports.app}`, () => {
     })
   })
 
-  describe('/', () => {
-    it('should display the list of components', async () => {
-      const response = await fetchPath('/')
-      const $ = load(await response.text())
-
-      const componentNames = await getDirectories(join(paths.src, 'govuk/components'))
-      const componentsList = $('li a[href^="/components/"]').get()
-
-      // Since we have an 'all' component link that renders the default example of all
-      // components, there will always be one more expected link.
-      const expectedComponentLinks = componentNames.length + 1
-      expect(componentsList.length).toEqual(expectedComponentLinks)
-    })
-  })
-
   describe('/robots.txt', () => {
     it('should allow crawling by robots', async () => {
       const response = await fetchPath('/robots.txt')

diff --git a/app/src/routes/full-page-examples.mjs b/app/src/routes/full-page-examples.mjs
@@ -12,15 +12,21 @@ export default (app) => {
   routes.haveYouChangedYourName(app)
   routes.feedback(app)
   routes.howDoYouWantToSignIn(app)
+  routes.makeAPayment(app)
   routes.search(app)
+  routes.searchThree(app)
   routes.passportDetails(app)
   routes.updateYourAccountDetails(app)
   routes.uploadYourPhoto(app)
   routes.uploadYourPhotoSuccess(app)
   routes.whatIsYourAddress(app)
+  routes.whatAreYourBankDetails(app)
+  routes.whatIsYourNationalInsuranceNumber(app)
   routes.whatIsYourNationality(app)
+  routes.whatIsYourTelephoneNumber(app)
   routes.whatIsYourPostcode(app)
   routes.whatWasTheLastCountryYouVisited(app)
+  routes.willYouBeTravellingTo(app)
 
   app.get('/full-page-examples', async (req, res, next) => {
     res.locals.fullPageExamples = await getFullPageExamples()

diff --git a/app/src/views/examples/exit-this-page-with-skiplink/index.njk b/app/src/views/examples/exit-this-page-with-skiplink/index.njk
@@ -0,0 +1,20 @@
+{% extends "layout.njk" %}
+
+{% from "exit-this-page/macro.njk" import govukExitThisPage %}
+{% from "skip-link/macro.njk" import govukSkipLink %}
+
+{% block skipLink %}
+  {{ super() }}
+  {{ govukSkipLink({
+    href: "https://www.gov.uk/",
+    text: "Exit this page",
+    classes: "govuk-js-exit-this-page-skiplink"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  {{ govukExitThisPage({
+    text: "Exit this page",
+    redirectUrl: "https://www.gov.uk/"
+  }) }}
+{% endblock %}
diff --git a/app/src/views/full-page-examples/announcements/index.njk b/app/src/views/full-page-examples/announcements/index.njk
@@ -1,6 +1,8 @@
 ---
 scenario: You want to read this article about '2018’s oddest requests from Brits abroad'.
 notes: Based on https://www.gov.uk/government/news/strictly-vampires-and-sausages-2018s-oddest-requests-from-brits-abroad
+
+hidden: true
 ---
 {% extends "full-page-example.njk" %}
 

diff --git a/app/src/views/full-page-examples/applicant-details/index.njk b/app/src/views/full-page-examples/applicant-details/index.njk
@@ -6,6 +6,8 @@ notes: >-
   This example shows GOV.UK Frontend used alongside our 'legacy' frontend
   frameworks. The full name field, and links within the header and footer have
   known accessibility issues.
+
+hidden: true
 ---
 
 {% extends "full-page-example-legacy.njk" %}

diff --git a/app/src/views/full-page-examples/bank-holidays/index.njk b/app/src/views/full-page-examples/bank-holidays/index.njk
@@ -12,6 +12,8 @@ scenario: >-
 notes: >-
   This example is based on https://www.gov.uk/bank-holidays.
   The data is not 'live' and so the answer is unlikely to be correct.
+
+hidden: true
 ---
 {% extends "full-page-example.njk" %}
 

diff --git a/app/src/views/full-page-examples/campaign-page/index.njk b/app/src/views/full-page-examples/campaign-page/index.njk
@@ -6,6 +6,8 @@ scenario: >-
 
 notes: >-
   Based on https://www.gov.uk/coronavirus
+
+hidden: true
 ---
 
 {% extends "full-page-example.njk" %}

diff --git a/app/src/views/full-page-examples/check-your-answers/index.njk b/app/src/views/full-page-examples/check-your-answers/index.njk
@@ -9,6 +9,8 @@ scenario: >-
   1. You would like to change your answer for one of the questions.
 
 notes: The links to change your answers are not functional.
+
+hidden: true
 ---
 
 {# This example is based of the  "Check your answers before sending your application" example: https://design-system.service.gov.uk/patterns/check-answers/default/index.html #}

diff --git a/app/src/views/full-page-examples/child-maintenance/index.njk b/app/src/views/full-page-examples/child-maintenance/index.njk
@@ -0,0 +1,164 @@
+---
+scenario: >-
+  This page includes an Exit this Page component. Things to try:
+
+  1. Activate the Exit this Page button using your keyboard, mouse or trackpad.
+
+  2. Click the Esc key on your keyboard 3 times to use the 'Exit this page' button.
+
+  3. Activating the Exit this Page button on a small screen view.
+
+  4. Scroll down the page to see if the Exit this Page button remains sticky.
+
+  5. Tabbing through the page to find the Exit this Page "skip link" at the top of the accessibility tree.
+
+notes: The Exit this Page button and skip link are the only navigational elements you need to interact with as part of this example.
+---
+
+{% extends "full-page-example.njk" %}
+
+{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
+{% from "phase-banner/macro.njk" import govukPhaseBanner %}
+{% from "exit-this-page/macro.njk" import govukExitThisPage %}
+{% from "inset-text/macro.njk" import govukInsetText %}
+{% from "details/macro.njk" import govukDetails %}
+{% from "button/macro.njk" import govukButton %}
+
+{% set pageTitle = "Child maintenance" %}
+{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
+
+{% block skipLink %}
+  {{ super() }}
+  {{ govukSkipLink({
+    href: 'https://bbc.co.uk/weather/',
+    text: 'Exit this page',
+    classes: 'govuk-js-exit-this-page-skiplink'
+  }) }}
+{% 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.'
+  }) }}
+
+  {{ govukBreadcrumbs({
+    classes: '',
+    collapseOnMobile: true,
+    items: [
+      {
+        html: 'Home',
+        href: '/'
+      },
+      {
+        html: ' Births, deaths, marriages and care',
+        href: '/'
+      },
+      {
+        html: 'Having a child, parenting and adoption',
+        href: '/'
+      }
+    ]
+  }) }}
+{% endblock %}
+
+{% block content %}
+  {{ govukExitThisPage({
+    text: "Exit this page",
+    redirectUrl: "https://www.google.com/"
+  }) }}
+
+  <div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+      <h1 class="govuk-heading-xl">Get help arranging child maintenance</h1>
+
+      <p class="govuk-body-m">This service will give you information about the different options available to make a child maintenance arrangement. These are:</p>
+
+      <ul class="govuk-list govuk-list--bullet">
+        <li>making your own arrangement</li>
+        <li>using the Child Maintenance Service</li>
+      </ul>
+
+      <p class="govuk-body-m">
+        <a class="govuk-link" href="contact-child-maintenance-choices">Contact Child Maintenance Choices if you live in Northern Ireland</a>
+      </p>
+
+      <h2 class="govuk-heading-m">Using the Child Maintenance Service</h2>
+      <h3 class="govuk-heading-s">If you already have an active case</h3>
+      <p class="govuk-body-m">If you have a case with the same parent you should <a href="https://www.gov.uk/child-maintenance-service/change-of-circumstances" class="govuk-link"> report a change of circumstances </a>instead of making a new arrangement. You can use this service if you want to set up a new arrangement with a different parent.</p>
+
+      <h3 class="govuk-heading-s">Fees</h3>
+      <p class="govuk-body-m">If you decide to use the Child Maintenance Service the application fee is £20 and cannot be refunded. You’ll need a debit or credit card to pay this. It does not guarantee an arrangement.</p>
+      <p class="govuk-body-m">You will not have to pay the application fee if you:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>are under 19 years old</li>
+        <li>have experienced domestic abuse</li>
+      </ul>
+      <p class="govuk-body-m">
+        <a class="govuk-link" href="https://www.gov.uk/guidance/domestic-abuse-how-to-get-help">Get help if you have experienced domestic abuse</a>
+      </p>
+
+      <h3 class="govuk-heading-s">If you’re worried about contacting the other parent</h3>
+      <p class="govuk-body-m">If you decide to use the Child Maintenance Service, we will try to contact the other parent about setting up child maintenance – you do not need to.</p>
+      <p class="govuk-body-m">We will share the following details with the other parent:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>your name</li>
+        <li>your child’s name and date of birth</li>
+        <li>the number of days your child stays with the parent who will be making payments - the other parent will need to confirm this</li>
+      </ul>
+
+      <p class="govuk-body-m">If you are the parent who will be paying child maintenance, we will also share the following details with the other parent:</p>
+      <ul class="govuk-list govuk-list--bullet">
+        <li>your income information</li>
+        <li>whether any additional children are taken into account in the calculation - we will not share identifying details about these children, only how many have been taken into account</li>
+      </ul>
+
+      {{ govukInsetText({
+        text: "We will not share any other information with the other parent as a part of your application."
+      }) }}
+
+      {% set doIHaveAnActiveCase %}
+        You will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" target="_blank" class="govuk-link">contact child maintenance (opens in new tab)</a>.
+      {% endset %}
+
+      {% set payingToRecieving %}
+        <p class="govuk-body">You will need to close your existing Child Maintenance case and open a new one.</p>
+        <p class="govuk-body">If you were the original applicant, you can close your case in <a href="https://childmaintenanceservice.direct.gov.uk/onlinerevive/public/landing-screen" target="blank" class="govuk-link">MCMC</a> , or you can <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" target="blank" class="govuk-link">contact child maintenance (opens in new tab)</a>.</p>
+        <p class="govuk-body">If you were not the original applicant, you will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" target="_blank" class="govuk-link">contact child maintenance (opens in new tab)</a>.</p>
+      {% endset %}
+
+      {% set recievingToPaying %}
+        <p class="govuk-body">You will need to close your existing Child Maintenance case and open a new one.</p>
+        <p class="govuk-body">If you were the original applicant, you can close your case in <a href="https://childmaintenanceservice.direct.gov.uk/onlinerevive/public/landing-screen" target="blank" class="govuk-link">MCMC</a> , or you can <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" target="blank" class="govuk-link">contact child maintenance (opens in new tab)</a>.</p>
+        <p class="govuk-body">If you were not the original applicant, you will need to <a href="/get-help-arranging-child-maintenance/contact-child-maintenance-service" target="_blank" class="govuk-link">contact child maintenance (opens in new tab)</a>.</p>
+      {% endset %}
+
+      {{ govukDetails({
+        summaryText: 'I do not know if I have an active case',
+        html: doIHaveAnActiveCase
+      }) }}
+
+      {{ govukDetails({
+        summaryText: 'I need to change from paying to receiving child maintenance',
+        html: payingToRecieving
+      }) }}
+
+      {{ govukDetails({
+        summaryText: 'I need to change from receiving to paying child maintenance',
+        html: recievingToPaying
+      }) }}
+
+      {{ govukButton({
+        text: "Start now",
+        href: "#",
+        isStartButton: true
+      }) }}
+    </div>
+    <div class="govuk-grid-column-one-third">
+      <p class="govuk-body">There could be other content here.</p>
+      <p class="govuk-body">In ea ex nulla veniam commodo Lorem labore dolor et ea in deserunt qui. Enim adipisicing dolore est amet magna. Cupidatat adipisicing labore consectetur exercitation Lorem dolor ipsum et deserunt est. Sit laborum dolore sit id eiusmod.</p>
+    </div>
+  </div>
+{% endblock %}
diff --git a/app/src/views/full-page-examples/confirm-delete/index.njk b/app/src/views/full-page-examples/confirm-delete/index.njk
@@ -1,3 +1,9 @@
+---
+
+hidden: true
+
+---
+
 {% extends "full-page-example.njk" %}
 
 {% from "warning-text/macro.njk" import govukWarningText %}

diff --git a/app/src/views/full-page-examples/cookie-banner-client-side/index.njk b/app/src/views/full-page-examples/cookie-banner-client-side/index.njk
@@ -1,17 +1,14 @@
 ---
 name: Cookie banner (client side)
 scenario: >-
-  You need to make a choice about whether to accept cookies or not.
+  This page includes a Cookie banner component. Things to try:
 
-notes: >-
-  For this example, when the user makes a choice to accept or reject cookies
-  their preference is handled entirely on the client side with no page
-  navigation, and JavaScript is used to swap out the cookie banner for the
-  'confirmation' banner.
-
-  The choice to accept or reject cookies will not be remembered.
+  1. Make a choice about whether to accept cookies or not.
 
-  The content of the page is not important for this scenario.
+notes: >-
+  For this example, when the user makes a choice to accept or reject cookies their preference is handled with no page navigation. JavaScript is used to swap out the cookie banner for the 'confirmation' banner. 
+
+  The choice to accept or reject cookies will not be remembered. 
 ---
 
 {# This example is based of the live "Apply online for a UK passport" start page: https://www.gov.uk/apply-renew-passport #}
@@ -161,37 +158,6 @@ notes: >-
         ]
       }) }}
     </div>
-
-    <div class="govuk-grid-column-one-third">
-
-      <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
-
-      <aside class="app-related-items" role="complementary">
-        <h2 class="govuk-heading-m" id="subsection-title">
-          Related content
-        </h2>
-        <nav role="navigation" aria-labelledby="subsection-title">
-          <ul class="govuk-list govuk-!-font-size-16">
-            <li class="gem-c-related-navigation__link">
-              <a class="govuk-link" href="#/get-a-passport-urgently">Get a passport urgently</a>
-            </li>
-            <li class="gem-c-related-navigation__link">
-              <a class="govuk-link" href="#/renew-adult-passport">Renew or replace your adult passport</a>
-            </li>
-            <li class="gem-c-related-navigation__link">
-              <a class="govuk-link" href="#/passport-fees">Passport fees</a>
-            </li>
-            <li class="gem-c-related-navigation__link">
-              <a class="govuk-link" href="#/government/news/need-to-renew-your-british-passport-go-online">Need to renew your British passport? Go online</a>
-            </li>
-            <li class="gem-c-related-navigation__link">
-              <a class="govuk-link" href="#/government/news/changes-to-passport-applications-for-british-nationals-living-abroad">Changes to passport applications for British nationals living abroad</a>
-            </li>
-          </ul>
-        </nav>
-      </aside>
-
-    </div>
   </div>
 
   <script>