@benwatsonuk/govuk-pages-plugin 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## v1.0.0
+
+### Notes
+
+- Initial release. Validates page and stage data and returns very simple views for page indexes so that users can easily navigate to selected pages.

package/LICENCE.txt

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (C) 2014 Crown Copyright (Government Digital Service)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,192 @@
+# govuk-pages-plugin
+A plugin for GOVUK Prototype Kit that shows selected pages in an index (list) so that users can navigate directly to them. 
+
+For more information about the GOV.UK Prototype kit:
+
+https://govuk-prototype-kit.herokuapp.com/docs
+
+## Requirements
+
+To use this plugin, first start a prototype by installing the GOV.UK Prototype Kit (version 13 or later).
+
+### 1. Install the plugin
+
+In the folder that contains your prototype, install the plugin by running the following terminal command:
+
+```bash
+npm install https://github.com/benwatsonuk/govuk-pages-plugin
+```
+
+### 2. Add the following code to your prototype's routes.js file(s)
+
+#### Basic Setup
+
+```js
+const { govukPagesPlugin } = require('@benwatsonuk/govuk-pages-plugin')
+```
+
+If you use multiple routes files, include the above code on the pages that you wish to use the features of the plugin on.
+
+#### Advanced Setup
+
+Call and use any of the exported functions available in dist/index.js file - this can be useful if you wish to use the plugin's data to create your own views or you wish to set up custom paths/routes.
+
+See the examples below for more details.
+
+## Using the plugin
+
+There are two main ways in which you might want to use the plugin.
+    
+1. To supply the relevant page data (in the expected format - see below) and have the plugin render indexes, directories and user-flows using the supplied templates
+2. Create views yourself by supplying the relevant page data to the plugin and have it return a usable data object, that you can either use yourself or call components and templates from the plugin to create your own bespoke views
+
+## What data do I need to supply the plugin?
+
+That depends on which of the plugin's features you wish to use. There are 3 types of data that you could provide the plugin:
+
+1. **Page Data** - REQUIRED - this is information at the page level, all pages that will be referenced or indexed will need to be included.
+2. **Stage Data** - OPTIONAL -this is a type of grouping that pages can belong to (they don't have to!) e.g. 'authentication' or 'registering' etc. it can group pages based on a subset of a journey.
+3. **Flow Data** - OPTIONAL - this type of data describes discrete journeys or flows. It can string pages together to visualise the journey a user might take.
+
+### Page Data (required)
+
+At the most basic level, the plugin will need a list of pages to work with. This ***must*** be passed to the plugin (via the Express route) as a valid JSON object that matches the schema defined at https://github.com/benwatsonuk/govuk-pages-plugin/blob/main/src/schema.json under the 'pages' definition. 
+
+If you are familiar with TypeScript, you could also reference https://github.com/benwatsonuk/govuk-pages-plugin/blob/main/src/types.ts (see 'Page').
+
+In future, hopefully this can be automated but for now, you will need to create this array in order to use the plugin.
+
+### Stage Data (optional)
+
+Stages aren't required but they can add useful groupings to series of pages that are useful when visualising or listing a large number of pages at once. For example, a series of 'stages' that might exist when accessing your 'Personal Tax Account' from HMRC might be:
+
+- GOV.UK Guidance
+- Authentication
+- Personal Account Dashboard
+
+There is also the concept of 'sub-stages' which allows you to break these down even further, for example:
+
+- Authentication
+    - Select Method
+    - Government Gateway
+    - One Login
+- Personal Tax Account 
+    - PAYE
+    - Account Management
+    - Messages
+
+If stages are provided and the page data refers to the relevant ID in the pages object, the ability to visualise by stages, group indexes by stages etc. will be possible.
+
+Make sure the 'stages' array matches the schema defined at https://github.com/benwatsonuk/govuk-pages-plugin/blob/main/src/schema.json under the 'stages' definition. 
+
+If you are familiar with TypeScript, you could also reference https://github.com/benwatsonuk/govuk-pages-plugin/blob/main/src/types.ts (see 'Stage').
+
+### Flow Data (optional)
+
+If this is passed to the plugin, we can visualise user journeys from end to end and the prototype will allow navigaton directly to the relevant pages. This can be useful when giving an overview of a flow that a user might go through, or to give context as to a page's position in a longer journey.
+
+## Examples
+
+Here are some recipes for adding data to your routes:
+
+```js
+const { govukPagesPlugin, pageIndex, stageIndex, stageIndexData, pageIndexData } = require('@benwatsonuk/govuk-pages-plugin')
+
+router.use(`/path-of-your-choice/pages`, govukPagesPlugin(pages))
+router.use(`/path-of-your-choice/page-index`, pageIndex(pages))
+router.use(`/path-of-your-choice/stage-index`, stageIndex(stages, pages))
+
+router.get(`/path-of-your-choice/stage-index-test`, (req, res) => {
+  res.render(`path-of-your-choice/stage-index-test`, {
+    stages: stageIndexData(stages, pages)
+  })
+})
+
+router.get(`/path-of-your-choice/page-index-test`, (req, res) => {
+  res.render(`path-of-your-choice/page-index-test`, {
+    pages: pageIndexData(pages)
+  })
+})
+```
+
+Here are some examples of 'stage' and 'page' data arrays:
+
+### Pages
+
+```js
+const pages = [
+  {
+    id: 1,
+    title: 'Title 1',
+    type: 'email',
+    description: 'A description about item 1',
+    route: '/a/a/1',
+    stage: {main: 'stage1', subStage: 1}
+  },
+  {
+    id: 2,
+    title: 'Title 2',
+    type: 'email',
+    description: 'A description about item 2',
+    route: '/b/b/2',
+    stage: {main: 'stage2', subStage: 2}
+  },
+  {
+    id: 3,
+    title: 'Title 3',
+    type: 'email',
+    description: 'A description about item 3',
+    route: '/a/b/3'
+  }
+];
+```
+
+### Stages
+
+``` js
+const stages = [
+  {
+    id: 'stage1',
+    title: 'Stage 1',
+    description: 'A description about stage 1',
+    route: '/a',
+    subStages: [
+      {
+        id: 1,
+        title: 'Sub-stage 1-1',
+        description: 'A description about sub-stage 1-1',
+        route: '/a/a'
+      },
+    {
+        id: 2,
+        title: 'Sub-stage 1-2',
+        description: 'A description about sub-stage 1-2',
+        route: '/a/b'
+      }
+    ]
+  },
+    {
+    id: 'stage2',
+    title: 'Stage 2',
+    description: 'A description about stage 2',
+    route: '/b',
+    subStages: [
+      {
+        id: 1,
+        title: 'Sub-stage 2-1',
+        description: 'A description about sub-stage 2-1',
+        route: '/b/a'
+      },
+    {
+        id: 2,
+        title: 'Sub-stage 2-2',
+        description: 'A description about sub-stage 2-2',
+        route: '/b/b'
+      }
+    ]
+  }
+]
+```
+
+
+

package/dist/assets/images/arrow.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="157px" height="32px" viewBox="0 0 157 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Connection/Single Copy</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Flow" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="11-12-2018-Defendant-Flow" transform="translate(-2970.000000, -757.000000)">
+            <g id="Screen-flows" transform="translate(406.000000, 410.000000)">
+                <g id="Group-16" transform="translate(1629.000000, 0.000000)">
+                    <g id="Group-13" transform="translate(341.000000, 197.000000)">
+                        <g id="Group-12">
+                            <g id="Group-2" transform="translate(594.000000, 83.000000)">
+                                <g id="Connection/Single" transform="translate(0.000000, 67.000000)">
+                                    <g id="Single-connection">
+                                        <polygon id="Connection" fill="#005EA5" fill-rule="nonzero" points="16 18 141 18 141 14 16 14"></polygon>
+                                        <circle id="Dot" stroke="#005EA5" stroke-width="4" fill="#FFFFFF" cx="16" cy="16" r="14"></circle>
+                                        <polygon id="Rectangle" fill="#005EA5" points="125 0 157 16 125 32"></polygon>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/assets/images/page-types/arrow-base.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Dot</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Connection/Single" fill="#FFFFFF" stroke="#005EA5" stroke-width="4">
+            <g id="Single-connection">
+                <circle id="Dot" cx="16" cy="16" r="14"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/assets/images/page-types/arrow-head.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Rectangle</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Connection/Single" transform="translate(-288.000000, 0.000000)" fill="#005EA5">
+            <g id="Single-connection">
+                <polygon id="Rectangle" points="288 0 320 16 288 32"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/assets/images/page-types/check-answers.svg

@@ -0,0 +1,142 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="160px" viewBox="0 0 200 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Screen/Check your answers</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect x="2" y="4" width="8.99672131" height="8" id="rect-1"></rect>
+    </defs>
+    <g id="Screen/Check-your-answers" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="_Canvas/Browser">
+            <rect id="BG" fill="#FFFFFF" x="1" y="1" width="196" height="156"></rect>
+            <rect id="Top-Bar" fill="#F2F2F2" x="1" y="1" width="196" height="11"></rect>
+            <rect id="Divider" fill="#DEE0E2" x="1" y="11" width="196" height="1"></rect>
+            <path d="M7.96153846,8 C6.87821068,8 6,7.1045695 6,6 C6,4.8954305 6.87821068,4 7.96153846,4 C9.04486624,4 9.92307692,4.8954305 9.92307692,6 C9.92307692,7.1045695 9.04486624,8 7.96153846,8 Z M14.5,8 C13.4166722,8 12.5384615,7.1045695 12.5384615,6 C12.5384615,4.8954305 13.4166722,4 14.5,4 C15.5833278,4 16.4615385,4.8954305 16.4615385,6 C16.4615385,7.1045695 15.5833278,8 14.5,8 Z M21.0384615,8 C19.9551338,8 19.0769231,7.1045695 19.0769231,6 C19.0769231,4.8954305 19.9551338,4 21.0384615,4 C22.1217893,4 23,4.8954305 23,6 C23,7.1045695 22.1217893,8 21.0384615,8 Z" id="Combined-Shape" fill="#DEE0E2"></path>
+            <polygon id="BG_Border_Top_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="0 0 200 0 197 1 1 1"></polygon>
+            <polygon id="BG_Border_Right_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="200 0 200 160 197 157 197 1"></polygon>
+            <polygon id="BG_Border_Bottom_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="200 160 0 160 1 157 197 157"></polygon>
+            <polygon id="BG_Border_Left_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="0 160 0 0 1 1 1 157"></polygon>
+        </g>
+        <g id="Button/Primary" transform="translate(5.000000, 142.000000)" fill="#00823B">
+            <g id="Fill/$button-colour">
+                <rect id="Rectangle" x="0" y="0" width="32" height="8"></rect>
+            </g>
+        </g>
+        <g id="CYA-Section" transform="translate(5.000000, 64.000000)">
+            <g id="CYA-Question" transform="translate(0.000000, 23.000000)">
+                <g id="Fill/$border-colour" transform="translate(0.000000, 7.000000)" fill="#BFC1C3">
+                    <rect id="Rectangle" x="0" y="0" width="120" height="1"></rect>
+                </g>
+                <g id="Text/Link" transform="translate(104.000000, 0.000000)" fill="#005EA5">
+                    <g id="Fill/$link-colour">
+                        <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Text/Body/Line" transform="translate(24.000000, 0.000000)" fill="#6F777B">
+                    <g id="Fill/$secondary-text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="48" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Text/Heading/Small" fill="#0B0C0C">
+                    <g id="Fill/$text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="CYA-Question" transform="translate(0.000000, 12.000000)">
+                <g id="Fill/$border-colour" transform="translate(0.000000, 7.000000)" fill="#BFC1C3">
+                    <rect id="Rectangle" x="0" y="0" width="120" height="1"></rect>
+                </g>
+                <g id="Text/Link" transform="translate(104.000000, 0.000000)" fill="#005EA5">
+                    <g id="Fill/$link-colour">
+                        <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Text/Body/Line" transform="translate(24.000000, 0.000000)" fill="#6F777B">
+                    <g id="Fill/$secondary-text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="48" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Text/Heading/Small" fill="#0B0C0C">
+                    <g id="Fill/$text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="Text/Heading/Medium" fill="#0B0C0C">
+                <g id="Fill/$text-colour">
+                    <rect id="Rectangle" x="0" y="0" width="32" height="8"></rect>
+                </g>
+            </g>
+        </g>
+        <g id="CYA-Section" transform="translate(5.000000, 103.000000)">
+            <g id="CYA-Question" transform="translate(0.000000, 23.000000)">
+                <g id="Fill/$border-colour" transform="translate(0.000000, 7.000000)" fill="#BFC1C3">
+                    <rect id="Rectangle" x="0" y="0" width="120" height="1"></rect>
+                </g>
+                <g id="Text/Link" transform="translate(104.000000, 0.000000)" fill="#005EA5">
+                    <g id="Fill/$link-colour">
+                        <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Text/Body/Line" transform="translate(24.000000, 0.000000)" fill="#6F777B">
+                    <g id="Fill/$secondary-text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="48" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Text/Heading/Small" fill="#0B0C0C">
+                    <g id="Fill/$text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="CYA-Question" transform="translate(0.000000, 12.000000)">
+                <g id="Fill/$border-colour" transform="translate(0.000000, 7.000000)" fill="#BFC1C3">
+                    <rect id="Rectangle" x="0" y="0" width="120" height="1"></rect>
+                </g>
+                <g id="Text/Link" transform="translate(104.000000, 0.000000)" fill="#005EA5">
+                    <g id="Fill/$link-colour">
+                        <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Text/Body/Line" transform="translate(24.000000, 0.000000)" fill="#6F777B">
+                    <g id="Fill/$secondary-text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="48" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Text/Heading/Small" fill="#0B0C0C">
+                    <g id="Fill/$text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+                    </g>
+                </g>
+            </g>
+            <g id="Text/Heading/Medium" fill="#0B0C0C">
+                <g id="Fill/$text-colour">
+                    <rect id="Rectangle" x="0" y="0" width="32" height="8"></rect>
+                </g>
+            </g>
+        </g>
+        <g id="Text/Heading/Large" transform="translate(5.000000, 44.000000)" fill="#0B0C0C">
+            <g id="Fill/$text-colour">
+                <rect id="Rectangle" x="0" y="0" width="120" height="12"></rect>
+            </g>
+        </g>
+        <g id="Object/Back" transform="translate(5.000000, 32.000000)" fill="#6F777B">
+            <g id="Fill/$secondary-text-colour">
+                <rect id="Rectangle" x="0" y="0" width="16" height="2"></rect>
+            </g>
+        </g>
+        <g id="Object/Header" transform="translate(3.000000, 12.000000)">
+            <g id="👑Crown">
+                <image x="2" y="4" width="8.99672131" height="8" xlink:href="data:image/png;base64,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"></image>
+                <use fill="#0B0C0C" fill-rule="evenodd" xlink:href="#rect-1"></use>
+            </g>
+            <text id="🖊️Global_Header_Text" font-family="Helvetica" font-size="8" font-weight="normal" fill="#0B0C0C">
+                <tspan x="13" y="11">GOV.UK</tspan>
+            </text>
+            <g id="Fill/$link-colour" transform="translate(2.000000, 15.000000)" fill="#005EA5" fill-rule="evenodd">
+                <rect id="Rectangle" x="0" y="0" width="188" height="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/assets/images/page-types/checkbox-input.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="160px" viewBox="0 0 200 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Screen/Question page/Checkbox input</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect x="2" y="4" width="8.99672131" height="8" id="rect-1"></rect>
+    </defs>
+    <g id="Screen/Question-page/Checkbox-input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Question-page/Checkbox-input">
+            <g id="_Canvas/Browser">
+                <rect id="BG" fill="#FFFFFF" x="1" y="1" width="196" height="156"></rect>
+                <rect id="Top-Bar" fill="#F2F2F2" x="1" y="1" width="196" height="11"></rect>
+                <rect id="Divider" fill="#DEE0E2" x="1" y="11" width="196" height="1"></rect>
+                <path d="M7.96153846,8 C6.87821068,8 6,7.1045695 6,6 C6,4.8954305 6.87821068,4 7.96153846,4 C9.04486624,4 9.92307692,4.8954305 9.92307692,6 C9.92307692,7.1045695 9.04486624,8 7.96153846,8 Z M14.5,8 C13.4166722,8 12.5384615,7.1045695 12.5384615,6 C12.5384615,4.8954305 13.4166722,4 14.5,4 C15.5833278,4 16.4615385,4.8954305 16.4615385,6 C16.4615385,7.1045695 15.5833278,8 14.5,8 Z M21.0384615,8 C19.9551338,8 19.0769231,7.1045695 19.0769231,6 C19.0769231,4.8954305 19.9551338,4 21.0384615,4 C22.1217893,4 23,4.8954305 23,6 C23,7.1045695 22.1217893,8 21.0384615,8 Z" id="Combined-Shape" fill="#DEE0E2"></path>
+                <polygon id="BG_Border_Top_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="0 0 200 0 197 1 1 1"></polygon>
+                <polygon id="BG_Border_Right_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="200 0 200 160 197 157 197 1"></polygon>
+                <polygon id="BG_Border_Bottom_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="200 160 0 160 1 157 197 157"></polygon>
+                <polygon id="BG_Border_Left_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="0 160 0 0 1 1 1 157"></polygon>
+            </g>
+            <g id="Button/Primary" transform="translate(5.000000, 116.000000)" fill="#00823B">
+                <g id="Fill/$button-colour">
+                    <rect id="Rectangle" x="0" y="0" width="32" height="8"></rect>
+                </g>
+            </g>
+            <g id="Text/Heading/Large" transform="translate(5.000000, 44.000000)" fill="#0B0C0C">
+                <g id="Fill/$text-colour">
+                    <rect id="Rectangle" x="0" y="0" width="120" height="12"></rect>
+                </g>
+            </g>
+            <g id="Object/Header" transform="translate(3.000000, 12.000000)">
+                <g id="👑Crown">
+                    <image x="2" y="4" width="8.99672131" height="8" xlink:href="data:image/png;base64,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"></image>
+                    <use fill="#0B0C0C" fill-rule="evenodd" xlink:href="#rect-1"></use>
+                </g>
+                <text id="🖊️Global_Header_Text" font-family="Helvetica" font-size="8" font-weight="normal" fill="#0B0C0C">
+                    <tspan x="13" y="11">GOV.UK</tspan>
+                </text>
+                <g id="Fill/$link-colour" transform="translate(2.000000, 15.000000)" fill="#005EA5" fill-rule="evenodd">
+                    <rect id="Rectangle" x="0" y="0" width="188" height="1"></rect>
+                </g>
+            </g>
+            <g id="Question/Checkbox-input" transform="translate(5.000000, 64.000000)">
+                <g id="Form/Label" transform="translate(16.000000, 36.000000)" fill="#0B0C0C">
+                    <g id="Fill/$text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="80" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Form/Checkbox-input" transform="translate(0.000000, 32.000000)">
+                    <g id="Fill/$black" fill="#0B0C0C">
+                        <rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
+                    </g>
+                    <rect id="Inside" fill="#FFFFFF" x="2" y="2" width="8" height="8"></rect>
+                </g>
+                <g id="Form/Label" transform="translate(16.000000, 20.000000)" fill="#0B0C0C">
+                    <g id="Fill/$text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="80" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Form/Checkbox-input" transform="translate(0.000000, 16.000000)">
+                    <g id="Fill/$black" fill="#0B0C0C">
+                        <rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
+                    </g>
+                    <rect id="Inside" fill="#FFFFFF" x="2" y="2" width="8" height="8"></rect>
+                </g>
+                <g id="Form/Label" transform="translate(16.000000, 4.000000)" fill="#0B0C0C">
+                    <g id="Fill/$text-colour">
+                        <rect id="Rectangle" x="0" y="0" width="80" height="4"></rect>
+                    </g>
+                </g>
+                <g id="Form/Checkbox-input">
+                    <g id="Fill/$black" fill="#0B0C0C">
+                        <rect id="Rectangle" x="0" y="0" width="12" height="12"></rect>
+                    </g>
+                    <rect id="Inside" fill="#FFFFFF" x="2" y="2" width="8" height="8"></rect>
+                </g>
+            </g>
+            <g id="Object/Back" transform="translate(5.000000, 32.000000)" fill="#6F777B">
+                <g id="Fill/$secondary-text-colour">
+                    <rect id="Rectangle" x="0" y="0" width="16" height="2"></rect>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/dist/assets/images/page-types/confirmation.svg

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="160px" viewBox="0 0 200 160" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>Screen/Confirmation</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect x="2" y="4" width="8.99672131" height="8" id="rect-1"></rect>
+    </defs>
+    <g id="Screen/Confirmation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="_Canvas/Browser">
+            <rect id="BG" fill="#FFFFFF" x="1" y="1" width="196" height="156"></rect>
+            <rect id="Top-Bar" fill="#F2F2F2" x="1" y="1" width="196" height="11"></rect>
+            <rect id="Divider" fill="#DEE0E2" x="1" y="11" width="196" height="1"></rect>
+            <path d="M7.96153846,8 C6.87821068,8 6,7.1045695 6,6 C6,4.8954305 6.87821068,4 7.96153846,4 C9.04486624,4 9.92307692,4.8954305 9.92307692,6 C9.92307692,7.1045695 9.04486624,8 7.96153846,8 Z M14.5,8 C13.4166722,8 12.5384615,7.1045695 12.5384615,6 C12.5384615,4.8954305 13.4166722,4 14.5,4 C15.5833278,4 16.4615385,4.8954305 16.4615385,6 C16.4615385,7.1045695 15.5833278,8 14.5,8 Z M21.0384615,8 C19.9551338,8 19.0769231,7.1045695 19.0769231,6 C19.0769231,4.8954305 19.9551338,4 21.0384615,4 C22.1217893,4 23,4.8954305 23,6 C23,7.1045695 22.1217893,8 21.0384615,8 Z" id="Combined-Shape" fill="#DEE0E2"></path>
+            <polygon id="BG_Border_Top_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="0 0 200 0 197 1 1 1"></polygon>
+            <polygon id="BG_Border_Right_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="200 0 200 160 197 157 197 1"></polygon>
+            <polygon id="BG_Border_Bottom_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="200 160 0 160 1 157 197 157"></polygon>
+            <polygon id="BG_Border_Left_2B99C93C-C2D2-47D8-92D7-E97EC61A7761" fill="#0B0C0C" points="0 160 0 0 1 1 1 157"></polygon>
+        </g>
+        <g id="Text/Link" transform="translate(5.000000, 132.000000)" fill="#005EA5">
+            <g id="Fill/$link-colour">
+                <rect id="Rectangle" x="0" y="0" width="16" height="4"></rect>
+            </g>
+        </g>
+        <g id="Text/Body/Paragraph" transform="translate(5.000000, 80.000000)" fill="#0B0C0C">
+            <g id="Fill/$text-colour" transform="translate(0.000000, 40.000000)">
+                <rect id="Rectangle" x="0" y="0" width="64" height="4"></rect>
+            </g>
+            <g id="Fill/$text-colour" transform="translate(0.000000, 32.000000)">
+                <rect id="Rectangle" x="0" y="0" width="96" height="4"></rect>
+            </g>
+            <g id="Fill/$text-colour" transform="translate(0.000000, 24.000000)">
+                <rect id="Rectangle" x="0" y="0" width="96" height="4"></rect>
+            </g>
+            <g id="Fill/$text-colour" transform="translate(0.000000, 16.000000)">
+                <rect id="Rectangle" x="0" y="0" width="96" height="4"></rect>
+            </g>
+            <g id="Fill/$text-colour" transform="translate(0.000000, 8.000000)">
+                <rect id="Rectangle" x="0" y="0" width="96" height="4"></rect>
+            </g>
+            <g id="Fill/$text-colour">
+                <rect id="Rectangle" x="0" y="0" width="64" height="4"></rect>
+            </g>
+        </g>
+        <g id="Object/Confirmation-box" transform="translate(5.000000, 32.000000)">
+            <g id="Fill/$turquoise" fill="#28A197">
+                <rect id="Rectangle" x="0" y="0" width="120" height="40"></rect>
+            </g>
+            <g id="Text/Body/Line" transform="translate(28.000000, 26.000000)" fill="#FFFFFF">
+                <g id="Fill/$page-colour">
+                    <rect id="Rectangle" x="0" y="0" width="64" height="4"></rect>
+                </g>
+            </g>
+            <g id="Text/Heading/Large" transform="translate(12.000000, 10.000000)" fill="#FFFFFF">
+                <g id="Fill/$page-colour">
+                    <rect id="Rectangle" x="0" y="0" width="96" height="12"></rect>
+                </g>
+            </g>
+        </g>
+        <g id="Object/Header" transform="translate(3.000000, 12.000000)">
+            <g id="👑Crown">
+                <image x="2" y="4" width="8.99672131" height="8" xlink:href="data:image/png;base64,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"></image>
+                <use fill="#0B0C0C" fill-rule="evenodd" xlink:href="#rect-1"></use>
+            </g>
+            <text id="🖊️Global_Header_Text" font-family="Helvetica" font-size="8" font-weight="normal" fill="#0B0C0C">
+                <tspan x="13" y="11">GOV.UK</tspan>
+            </text>
+            <g id="Fill/$link-colour" transform="translate(2.000000, 15.000000)" fill="#005EA5" fill-rule="evenodd">
+                <rect id="Rectangle" x="0" y="0" width="188" height="1"></rect>
+            </g>
+        </g>
+    </g>
+</svg>