@benwatsonuk/govuk-pages-plugin 1.3.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## v1.4.1
+
+### Fixes
+- Incompatible with updated GOVUK FRONTEND - issue resolved with this fix.
+
+
+## v1.4.0
+
+### Features
+- 'Overview Page' added to offer a step between the index/flow and the page itself. This allows users to zoom in to the page and its detail without being dropped directly to the page. It is a 'slightly elevated' view of the page.
+
 ## v1.3.0
 
 ### Features

package/README.md

@@ -22,7 +22,7 @@ npm install https://github.com/benwatsonuk/govuk-pages-plugin
 #### Basic Setup
 
 ```js
-const { govukPagesPlugin } = require('@benwatsonuk/govuk-pages-plugin')
+const { govukPagesPlugin, pageOverview } = 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.
@@ -31,6 +31,10 @@ Then for the most basic implementation declare the route that you wish to use an
 
 ```js
 router.use(`/path-of-your-choice/pages`, govukPagesPlugin(pages, stages, flows))
+
+router.get(`/path-of-your-choice/page/:pageId`, (req, res) => {
+  pageOverview(Number(req.params.pageId), pages, req, res)
+})
 ```
 
 For all functions, you MUST provide a valid `pages` property (see below), `stages` and `flows` are always optional but provide some useful functionality. See below about how to use these optionally.

package/dist/assets/javascripts/all.js

@@ -1,8 +1,8 @@
 import { defineCustomElements } from "./vendors/ukic/loader.js";
-import { InitPageFlowTypeToggles } from "./modules/pageFlowTypeToggle.js"
+import { InitIcSwitches } from "./modules/pageOptions.js"
 
 document.addEventListener("DOMContentLoaded", () => {
     defineCustomElements();
-    InitPageFlowTypeToggles();
+    InitIcSwitches();
 });
 

package/dist/assets/javascripts/modules/pageOptions.js

@@ -0,0 +1,160 @@
+/* ============================================================
+   Actions
+   ============================================================ */
+
+const ACTIONS = {
+  toggleElement: (checked, cfg) => {
+    const el = document.getElementById(cfg.actionTarget);
+    if (!el) return;
+    el.classList.toggle("govuk-visually-hidden", !checked);
+  }
+};
+
+/* ============================================================
+   Switch configuration
+   ============================================================ */
+
+const SWITCH_HANDLERS = {
+  showPageOptions: {
+    targets: ".govuk-pages-plugin__page-options",
+    className: "govuk-visually-hidden",
+    inverse: true,
+    onToggleOn: exampleFunc,
+    onToggleOff: exampleFunc
+  },
+
+  showList: {
+    targets: ".govuk-pages-plugin__flows__flow",
+    className: "govuk-pages-plugin__flows__flow--list",
+    hideControls: ["showFullWidth", "showInline"],
+    hideOnChecked: true
+  },
+
+  showInline: {
+    targets: ".govuk-pages-plugin__flows__flow",
+    className: "govuk-pages-plugin__flows__flow--inline",
+    hideControls: ["showFullWidth"],
+    hideOnChecked: false
+  },
+
+  showFullWidth: {
+    targets: ".govuk-pages-plugin__flows__flow",
+    className: "govuk-pages-plugin__flows__flow--full-width"
+  }
+};
+
+/* ============================================================
+   Helper functions
+   ============================================================ */
+
+const toggleClassOnTargets = (selector, className, add) => {
+  document.querySelectorAll(selector).forEach(el => {
+    el.classList.toggle(className, add);
+  });
+};
+
+const setControlVisibility = (ids, hide) => {
+  ids.forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.classList.toggle("govuk-visually-hidden", hide);
+  });
+};
+
+/* ============================================================
+   Main icChange handler
+   ============================================================ */
+
+const handleIcChange = ev => {
+  const src = ev.target;
+  if (!src || !src.id) return;
+
+  const cfg = SWITCH_HANDLERS[src.id];
+  if (!cfg) return;
+
+  const checked = !!ev.detail?.checked;
+
+  // Toggle classes
+  if (cfg.targets && cfg.className) {
+    const add = cfg.inverse ? !checked : checked;
+    toggleClassOnTargets(cfg.targets, cfg.className, add);
+  }
+
+  // Hide/show related controls
+  if (cfg.hideControls) {
+    const hide = cfg.hideOnChecked ? checked : !checked;
+    setControlVisibility(cfg.hideControls, hide);
+  }
+
+  // Run actions
+  const runAction = action => {
+    if (typeof action === "string") action = ACTIONS[action];
+    if (typeof action === "function") {
+      try {
+        action(checked, cfg, ev);
+      } catch (e) {
+        console.error("Switch action error", e);
+      }
+    }
+  };
+
+  if (checked && cfg.onToggleOn) runAction(cfg.onToggleOn);
+  if (!checked && cfg.onToggleOff) runAction(cfg.onToggleOff);
+};
+
+/* ============================================================
+   Init ic-switch handling
+   ============================================================ */
+
+export const InitIcSwitches = () => {
+  document.addEventListener("icChange", handleIcChange);
+  watchForPageOverviewToggle();
+};
+
+/* ============================================================
+   Page overview toggle logic
+   ============================================================ */
+
+export const updateFlowLinks = useOverview => {
+  document.querySelectorAll(".govuk-pages-plugin__pages__link").forEach(link => {
+    const { overviewPageLink, directLink } = link.dataset;
+    if (!overviewPageLink || !directLink) return;
+    link.href = useOverview ? overviewPageLink : directLink;
+  });
+};
+
+const watchForPageOverviewToggle = () => {
+  const init = toggle => {
+    if (toggle.dataset.bound) return;
+    toggle.dataset.bound = "true";
+
+    updateFlowLinks(toggle.attributes.checked);
+
+    toggle.addEventListener("icChange", e => {
+      updateFlowLinks(e.detail.checked);
+    });
+  };
+
+  const existing = document.querySelector("#usePageOverview");
+  if (existing) return init(existing);
+
+  const observer = new MutationObserver(() => {
+    const toggle = document.querySelector("#usePageOverview");
+    if (!toggle) return;
+
+    observer.disconnect();
+    init(toggle);
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+};
+
+/* ============================================================
+   Example custom action
+   ============================================================ */
+
+function exampleFunc(checked, cfg){
+  console.log("Switch toggled:", checked, cfg);
+};

package/dist/assets/styles/scss/_page.scss

@@ -0,0 +1,30 @@
+.govuk-pages-plugin__page {
+
+  &__preview {
+    width: 100%;
+    height: 400px;
+    overflow: hidden;
+    border: 1px solid $govuk-border-colour;
+    border-radius: 4px;
+    &__screen {
+      width: 200%;
+      height: 800px;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      background: none;
+      border: 0;
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .govuk-button {
+        @include govuk-responsive-margin(2, "top");
+        @include govuk-responsive-margin(2, "bottom");
+    }
+  }
+  
+}

package/dist/assets/styles/scss/_pages-plugin.scss

@@ -1,4 +1,5 @@
 @import "pages";
+@import "page";
 @import "stages";
 @import "flows";
 @import "overview-page";

package/dist/functions/pages/getPages.js

@@ -1,9 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPages = void 0;
+exports.getPage = exports.getPages = void 0;
 const validate_1 = require("../../validate");
 const getPages = (pages) => {
     const validatedPages = (0, validate_1.validatePagesArray)(pages);
     return validatedPages;
 };
 exports.getPages = getPages;
+const getPage = (pageId, pages) => {
+    const validatedPages = (0, validate_1.validatePagesArray)(pages);
+    const page = validatedPages.find(p => p.id === pageId);
+    if (page) {
+        return page;
+    }
+    throw new Error(`Page ID ${pageId} does not exist`);
+};
+exports.getPage = getPage;

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.govukPagesPlugin = exports.flowIndex = exports.flowIndexData = exports.stageIndex = exports.stageIndexData = exports.pageIndex = exports.pageIndexData = exports.omniPage = void 0;
+exports.govukPagesPlugin = exports.flowIndex = exports.flowIndexData = exports.stageIndex = exports.stageIndexData = exports.pageIndex = exports.pageIndexData = exports.pageOverview = exports.pageOverviewData = exports.omniPage = void 0;
 const express_1 = require("express");
 const getPages_1 = require("./functions/pages/getPages");
 const getStages_1 = require("./functions/stages/getStages");
@@ -30,6 +30,20 @@ const omniPage = (pages, stages, flows) => {
     }
 };
 exports.omniPage = omniPage;
+// Single Page Overview 
+const pageOverviewData = (pageId, pages) => {
+    const pagesData = (0, getPages_1.getPages)(pages);
+    return pagesData.find(page => pageId === page.id);
+};
+exports.pageOverviewData = pageOverviewData;
+const pageOverview = (pageId, pages, req, res) => {
+    const page = pages.find(p => p.id === pageId);
+    if (!page) {
+        return res.status(404).render("page-overview", { noPage: true });
+    }
+    res.render("page-overview", { page });
+};
+exports.pageOverview = pageOverview;
 // Pages
 const pageIndexData = (pages) => {
     return (0, getPages_1.getPages)(pages);

package/dist/views/components/pageItem.njk

@@ -1,7 +1,7 @@
 {% macro pageItem(params) %}
 
     <div class="govuk-pages-plugin__page__item">
-        <a href="{{ params.page.route }}">
+        <a class="govuk-pages-plugin__pages__link" href="{{ params.page.route }}" data-overview-page-link="./page/{{params.page.id}}" data-direct-link="{{ params.page.route }}">
         {{ params.page.title }}
         </a>
     </div>

package/dist/views/components/step.njk

@@ -1,6 +1,6 @@
 {% macro govukPagesPluginStep(step) %}
     <div class="govuk-pages-plugin__flows__step">
-    <a href="{{ step.route }}" class="govuk-pages-plugin__flows__step">
+    <a href="{{ step.route }}" class="govuk-pages-plugin__flows__step govuk-pages-plugin__pages__link" data-overview-page-link="./page/{{step.id}}" data-direct-link="{{ step.route }}">
         <div class="govuk-pages-plugin__screen-icon {% if step.type %}govuk-pages-plugin__screen-icon--{{ step.type }}{% endif%}"></div>
         {{ step.title }}
     </a>

package/dist/views/includes/flows.html

@@ -6,11 +6,10 @@
 }) }} 
 
 <div class="govuk-pages-plugin__page-options__trigger">
-    <ic-switch id="showPageOptions" label="Show page options" checked="false" size=""></ic-switch>
+    <ic-switch id="showPageOptions" label="Show Flow options" checked="false" size=""></ic-switch>
 </div>
 
 <div class="govuk-pages-plugin__page-options govuk-visually-hidden">
-    <h2 class="govuk-heading-s">Page options</h2>
     <div class="govuk-pages-plugin__page-options__container">
     <ic-switch id="showList" label="Show Flows as list" checked="false" size="small" helper-text="Toggle between vertical list and horizontal flow"></ic-switch>
     {% if not hasStages %}
@@ -19,75 +18,7 @@
     <ic-switch id="showFullWidth" label="Show full width" checked="false" size="small" helper-text="Allow large flows to extend beyond edge of screen"></ic-switch>
 
     <script>
-        const switchEl = document.querySelectorAll('ic-switch');
-        switchEl.forEach( el => { addEventListener('icChange', (ev) => {
-        if (ev.srcElement.id === 'showList') {
-            const target = document.querySelectorAll(".govuk-pages-plugin__flows__flow");
-            const classToUse = 'govuk-pages-plugin__flows__flow--list'
-            const showFullWidth = document.getElementById("showFullWidth");
-            const showInline = document.getElementById("showInline");
-            if (ev.detail.checked === true) {
-            target.forEach(a => {
-                a.classList.add(classToUse)
-                if (showFullWidth) {
-                showFullWidth.classList.add("govuk-visually-hidden");
-                }
-                if (showInline) {
-                showInline.classList.add("govuk-visually-hidden");
-                }
-                })  
-            } else {
-            target.forEach(a => {
-                a.classList.remove(classToUse)
-                if (showFullWidth) {
-                showFullWidth.classList.remove("govuk-visually-hidden");
-                }
-                if (showInline) {
-                showInline.classList.remove("govuk-visually-hidden");
-                }
-            })  
-            }
-        } else if (ev.srcElement.id === 'showInline') {
-            const target = document.querySelectorAll(".govuk-pages-plugin__flows__flow");
-            const classToUse = 'govuk-pages-plugin__flows__flow--inline'
-            if (ev.detail.checked === true) {
-            target.forEach(a => {
-                a.classList.add(classToUse)
-                document.getElementById('showFullWidth').classList.remove('govuk-visually-hidden')
-            })  
-            } else {
-            target.forEach(a => {
-                a.classList.remove(classToUse)
-                document.getElementById('showFullWidth').classList.add('govuk-visually-hidden')
-            })  
-            }
-        } else if (ev.srcElement.id === 'showPageOptions') {
-            const target = document.querySelectorAll(".govuk-pages-plugin__page-options");
-            const classToUse = 'govuk-visually-hidden'
-            if (ev.detail.checked === true) {
-            target.forEach(a => {
-                a.classList.remove(classToUse)
-            })  
-            } else {
-            target.forEach(a => {
-                a.classList.add(classToUse)
-            })  
-            }
-        } else if (ev.srcElement.id === 'showFullWidth') {
-            const target = document.querySelectorAll(".govuk-pages-plugin__flows__flow");
-            const classToUse = 'govuk-pages-plugin__flows__flow--full-width'
-            if (ev.detail.checked === true) {
-            target.forEach(a => {
-                a.classList.add(classToUse)
-            })  
-            } else {
-            target.forEach(a => {
-                a.classList.remove(classToUse)
-            })  
-            }
-        }
-        })
-    })
+       
     </script>
     </div>
 </div>

package/dist/views/includes/page-overview.html

@@ -0,0 +1,15 @@
+{% if page.description %}
+    <p>{{ page.description }}</p>
+{% endif %}
+
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+        <div class="govuk-pages-plugin__page__preview">
+            <iframe class="govuk-pages-plugin__page__preview__screen" src="../{{page.route}}"></iframe>
+        </div>
+    </div>
+    <div class="govuk-grid-column-one-third">
+
+        <!-- <a href="../{{ page.route }}">Go to page</a> -->
+    </div>
+</div>

package/dist/views/includes/stages.html

@@ -9,7 +9,8 @@
     {% endif %}
     <ol>
     {% for page in stage.pages %}
-        <li><a href="{{ page.route }}">{{ page.title }}</a>{% if page.description %} - <span class="govuk-body-s">{{ page.description }}</span> {% endif %}</li>
+    <li><a class="govuk-pages-plugin__pages__link" href="{{ page.route }}" data-overview-page-link="./page/{{page.id}}" data-direct-link="{{ page.route }}">
+        {{ page.title }}</a>{% if page.description %} - <span class="govuk-body-s">{{ page.description }}</span> {% endif %}</li>
     {% endfor %}
     </ol>
     <hr/>

package/dist/views/omni-page.html

@@ -9,12 +9,19 @@
       <div class="govuk-pages-plugin">
         <ic-theme theme="light">
           <h1 class="govuk-heading-l">Pages</h1>
-          {% from "govuk/components/details/macro.njk" import govukDetails %}
 
-          <!-- {{ govukDetails({
-            summaryText: "What is the 'Stage Index'?",
-            html: "<p>This page contains links to tracked pages in this prototype, these pages are grouped by the 'stages' that they are assigned to. It is useful for navigating the prototype without having to go through flows.</p><p>'Stages' are defined by the plugin user but can be throught about as logical groups of pages that work to achieve a common goal, such as 'authenticating' or 'registering'.</p><p class='govuk-body-s'> Note, the prototype might contain more pages than are listed here.</p>"
-          }) }}  -->
+          {% set pageOptions %}
+            <div class="govuk-pages-plugin__page-options__container">
+              <ic-switch id="usePageOverview" label="Page links go to an overview page" checked="true" size="small" helper-text="If checked, all links to pages will go to an overview page rather than directly to referenced page"></ic-switch>
+            </div>
+          {% endset %}
+
+          {{ govukDetails({
+            summaryText: "Page options",
+            html: pageOptions
+          })}}
+          
+          {% from "govuk/components/details/macro.njk" import govukDetails %}
 
           {% set tabItems = [] %}
 

package/dist/views/page-overview.html

@@ -0,0 +1,36 @@
+{% extends "./layouts/govuk-pages-plugin.html" %}
+
+{% block pageTitle %}
+  Page Overview
+{% endblock %}
+
+{% block beforeContent %}
+    <div class="govuk-pages-plugin__page__header">
+        {{ govukBackLink({
+            href: "javascript:history.back(-1)"
+        })}}
+
+        {{ govukButton({
+            text: "Go to page",
+            href: "../" + page.route,
+            isStartButton: true
+        })}}
+    </div>  
+{% endblock %}
+
+{% block content %}
+
+    <div class="govuk-pages-plugin">
+        {% if noPage %}
+        <h1 class="govuk-heading-l">Oops, no page exists with that ID!</h1>
+        {% else %}
+        <span class="govuk-caption-m">Page Overview</span>
+        <h1 class="govuk-heading-l">{{ page.title }}</h1>
+
+        {% include './includes/page-overview.html' %}
+
+        {% endif %}
+
+    </div>
+
+{% endblock %}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@benwatsonuk/govuk-pages-plugin",
   "author": "BenWatsonUK",
   "description": "A plugin to visualise selected pages of a GOV.UK prototype with a linear user journey or page index.",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/benwatsonuk/govuk-pages-plugin",

package/src/assets/javascripts/all.js

@@ -1,8 +1,8 @@
 import { defineCustomElements } from "./vendors/ukic/loader.js";
-import { InitPageFlowTypeToggles } from "./modules/pageFlowTypeToggle.js"
+import { InitIcSwitches } from "./modules/pageOptions.js"
 
 document.addEventListener("DOMContentLoaded", () => {
     defineCustomElements();
-    InitPageFlowTypeToggles();
+    InitIcSwitches();
 });
 

package/src/assets/javascripts/modules/pageOptions.js

@@ -0,0 +1,160 @@
+/* ============================================================
+   Actions
+   ============================================================ */
+
+const ACTIONS = {
+  toggleElement: (checked, cfg) => {
+    const el = document.getElementById(cfg.actionTarget);
+    if (!el) return;
+    el.classList.toggle("govuk-visually-hidden", !checked);
+  }
+};
+
+/* ============================================================
+   Switch configuration
+   ============================================================ */
+
+const SWITCH_HANDLERS = {
+  showPageOptions: {
+    targets: ".govuk-pages-plugin__page-options",
+    className: "govuk-visually-hidden",
+    inverse: true,
+    onToggleOn: exampleFunc,
+    onToggleOff: exampleFunc
+  },
+
+  showList: {
+    targets: ".govuk-pages-plugin__flows__flow",
+    className: "govuk-pages-plugin__flows__flow--list",
+    hideControls: ["showFullWidth", "showInline"],
+    hideOnChecked: true
+  },
+
+  showInline: {
+    targets: ".govuk-pages-plugin__flows__flow",
+    className: "govuk-pages-plugin__flows__flow--inline",
+    hideControls: ["showFullWidth"],
+    hideOnChecked: false
+  },
+
+  showFullWidth: {
+    targets: ".govuk-pages-plugin__flows__flow",
+    className: "govuk-pages-plugin__flows__flow--full-width"
+  }
+};
+
+/* ============================================================
+   Helper functions
+   ============================================================ */
+
+const toggleClassOnTargets = (selector, className, add) => {
+  document.querySelectorAll(selector).forEach(el => {
+    el.classList.toggle(className, add);
+  });
+};
+
+const setControlVisibility = (ids, hide) => {
+  ids.forEach(id => {
+    const el = document.getElementById(id);
+    if (el) el.classList.toggle("govuk-visually-hidden", hide);
+  });
+};
+
+/* ============================================================
+   Main icChange handler
+   ============================================================ */
+
+const handleIcChange = ev => {
+  const src = ev.target;
+  if (!src || !src.id) return;
+
+  const cfg = SWITCH_HANDLERS[src.id];
+  if (!cfg) return;
+
+  const checked = !!ev.detail?.checked;
+
+  // Toggle classes
+  if (cfg.targets && cfg.className) {
+    const add = cfg.inverse ? !checked : checked;
+    toggleClassOnTargets(cfg.targets, cfg.className, add);
+  }
+
+  // Hide/show related controls
+  if (cfg.hideControls) {
+    const hide = cfg.hideOnChecked ? checked : !checked;
+    setControlVisibility(cfg.hideControls, hide);
+  }
+
+  // Run actions
+  const runAction = action => {
+    if (typeof action === "string") action = ACTIONS[action];
+    if (typeof action === "function") {
+      try {
+        action(checked, cfg, ev);
+      } catch (e) {
+        console.error("Switch action error", e);
+      }
+    }
+  };
+
+  if (checked && cfg.onToggleOn) runAction(cfg.onToggleOn);
+  if (!checked && cfg.onToggleOff) runAction(cfg.onToggleOff);
+};
+
+/* ============================================================
+   Init ic-switch handling
+   ============================================================ */
+
+export const InitIcSwitches = () => {
+  document.addEventListener("icChange", handleIcChange);
+  watchForPageOverviewToggle();
+};
+
+/* ============================================================
+   Page overview toggle logic
+   ============================================================ */
+
+export const updateFlowLinks = useOverview => {
+  document.querySelectorAll(".govuk-pages-plugin__pages__link").forEach(link => {
+    const { overviewPageLink, directLink } = link.dataset;
+    if (!overviewPageLink || !directLink) return;
+    link.href = useOverview ? overviewPageLink : directLink;
+  });
+};
+
+const watchForPageOverviewToggle = () => {
+  const init = toggle => {
+    if (toggle.dataset.bound) return;
+    toggle.dataset.bound = "true";
+
+    updateFlowLinks(toggle.attributes.checked);
+
+    toggle.addEventListener("icChange", e => {
+      updateFlowLinks(e.detail.checked);
+    });
+  };
+
+  const existing = document.querySelector("#usePageOverview");
+  if (existing) return init(existing);
+
+  const observer = new MutationObserver(() => {
+    const toggle = document.querySelector("#usePageOverview");
+    if (!toggle) return;
+
+    observer.disconnect();
+    init(toggle);
+  });
+
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true
+  });
+};
+
+/* ============================================================
+   Example custom action
+   ============================================================ */
+
+function exampleFunc(checked, cfg){
+  console.log("Switch toggled:", checked, cfg);
+};

package/src/assets/styles/scss/_page.scss

@@ -0,0 +1,30 @@
+.govuk-pages-plugin__page {
+
+  &__preview {
+    width: 100%;
+    height: 400px;
+    overflow: hidden;
+    border: 1px solid $govuk-border-colour;
+    border-radius: 4px;
+    &__screen {
+      width: 200%;
+      height: 800px;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      background: none;
+      border: 0;
+    }
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .govuk-button {
+        @include govuk-responsive-margin(2, "top");
+        @include govuk-responsive-margin(2, "bottom");
+    }
+  }
+  
+}

package/src/assets/styles/scss/_pages-plugin.scss

@@ -1,4 +1,5 @@
 @import "pages";
+@import "page";
 @import "stages";
 @import "flows";
 @import "overview-page";

package/src/functions/pages/getPages.ts

@@ -4,4 +4,15 @@ import { validatePagesArray } from "../../validate"
 export const getPages = (pages: PagesArray) => {
   const validatedPages = validatePagesArray(pages)
   return validatedPages
+}
+
+export const getPage = (pageId: number, pages: PagesArray) => {
+  const validatedPages = validatePagesArray(pages)
+  const page = validatedPages.find(p => p.id === pageId)
+  if (page) {
+    return page
+  } 
+  throw new Error(
+    `Page ID ${pageId} does not exist`
+  )
 }

package/src/index.ts

@@ -2,7 +2,7 @@ import {Router} from "express"
 import { getPages } from "./functions/pages/getPages"
 import { getStagesWithPages } from "./functions/stages/getStages"
 import { getFlows } from "./functions/flows/getFlows"
-import { PagesArray, StagesArray, PageFlowArray } from "./types"
+import { PagesArray, StagesArray, PageFlowArray, PageOutput } from "./types"
 
 /*--- UTILITIES (used by supplied routes AND made available to plugin users) ---*/
 
@@ -27,6 +27,20 @@ export const omniPage = (pages: PagesArray, stages?: StagesArray, flows?: PageFl
   }
 }
 
+// Single Page Overview 
+export const pageOverviewData = (pageId: number, pages: PagesArray): PageOutput | undefined => {
+  const pagesData = getPages(pages)
+  return pagesData.find(page => pageId === page.id)
+}
+
+export const pageOverview = (pageId: number, pages: PagesArray, req: any, res: any) => {
+  const page = pages.find(p => p.id === pageId);
+  if (!page) {
+    return res.status(404).render("page-overview", {noPage: true});
+  }
+  res.render("page-overview", { page });
+}
+
 // Pages
 export const pageIndexData = (pages: PagesArray) => {
   return getPages(pages)

package/src/views/components/pageItem.njk

@@ -1,7 +1,7 @@
 {% macro pageItem(params) %}
 
     <div class="govuk-pages-plugin__page__item">
-        <a href="{{ params.page.route }}">
+        <a class="govuk-pages-plugin__pages__link" href="{{ params.page.route }}" data-overview-page-link="./page/{{params.page.id}}" data-direct-link="{{ params.page.route }}">
         {{ params.page.title }}
         </a>
     </div>

package/src/views/components/step.njk

@@ -1,6 +1,6 @@
 {% macro govukPagesPluginStep(step) %}
     <div class="govuk-pages-plugin__flows__step">
-    <a href="{{ step.route }}" class="govuk-pages-plugin__flows__step">
+    <a href="{{ step.route }}" class="govuk-pages-plugin__flows__step govuk-pages-plugin__pages__link" data-overview-page-link="./page/{{step.id}}" data-direct-link="{{ step.route }}">
         <div class="govuk-pages-plugin__screen-icon {% if step.type %}govuk-pages-plugin__screen-icon--{{ step.type }}{% endif%}"></div>
         {{ step.title }}
     </a>

package/src/views/includes/flows.html

@@ -6,11 +6,10 @@
 }) }} 
 
 <div class="govuk-pages-plugin__page-options__trigger">
-    <ic-switch id="showPageOptions" label="Show page options" checked="false" size=""></ic-switch>
+    <ic-switch id="showPageOptions" label="Show Flow options" checked="false" size=""></ic-switch>
 </div>
 
 <div class="govuk-pages-plugin__page-options govuk-visually-hidden">
-    <h2 class="govuk-heading-s">Page options</h2>
     <div class="govuk-pages-plugin__page-options__container">
     <ic-switch id="showList" label="Show Flows as list" checked="false" size="small" helper-text="Toggle between vertical list and horizontal flow"></ic-switch>
     {% if not hasStages %}
@@ -19,75 +18,7 @@
     <ic-switch id="showFullWidth" label="Show full width" checked="false" size="small" helper-text="Allow large flows to extend beyond edge of screen"></ic-switch>
 
     <script>
-        const switchEl = document.querySelectorAll('ic-switch');
-        switchEl.forEach( el => { addEventListener('icChange', (ev) => {
-        if (ev.srcElement.id === 'showList') {
-            const target = document.querySelectorAll(".govuk-pages-plugin__flows__flow");
-            const classToUse = 'govuk-pages-plugin__flows__flow--list'
-            const showFullWidth = document.getElementById("showFullWidth");
-            const showInline = document.getElementById("showInline");
-            if (ev.detail.checked === true) {
-            target.forEach(a => {
-                a.classList.add(classToUse)
-                if (showFullWidth) {
-                showFullWidth.classList.add("govuk-visually-hidden");
-                }
-                if (showInline) {
-                showInline.classList.add("govuk-visually-hidden");
-                }
-                })  
-            } else {
-            target.forEach(a => {
-                a.classList.remove(classToUse)
-                if (showFullWidth) {
-                showFullWidth.classList.remove("govuk-visually-hidden");
-                }
-                if (showInline) {
-                showInline.classList.remove("govuk-visually-hidden");
-                }
-            })  
-            }
-        } else if (ev.srcElement.id === 'showInline') {
-            const target = document.querySelectorAll(".govuk-pages-plugin__flows__flow");
-            const classToUse = 'govuk-pages-plugin__flows__flow--inline'
-            if (ev.detail.checked === true) {
-            target.forEach(a => {
-                a.classList.add(classToUse)
-                document.getElementById('showFullWidth').classList.remove('govuk-visually-hidden')
-            })  
-            } else {
-            target.forEach(a => {
-                a.classList.remove(classToUse)
-                document.getElementById('showFullWidth').classList.add('govuk-visually-hidden')
-            })  
-            }
-        } else if (ev.srcElement.id === 'showPageOptions') {
-            const target = document.querySelectorAll(".govuk-pages-plugin__page-options");
-            const classToUse = 'govuk-visually-hidden'
-            if (ev.detail.checked === true) {
-            target.forEach(a => {
-                a.classList.remove(classToUse)
-            })  
-            } else {
-            target.forEach(a => {
-                a.classList.add(classToUse)
-            })  
-            }
-        } else if (ev.srcElement.id === 'showFullWidth') {
-            const target = document.querySelectorAll(".govuk-pages-plugin__flows__flow");
-            const classToUse = 'govuk-pages-plugin__flows__flow--full-width'
-            if (ev.detail.checked === true) {
-            target.forEach(a => {
-                a.classList.add(classToUse)
-            })  
-            } else {
-            target.forEach(a => {
-                a.classList.remove(classToUse)
-            })  
-            }
-        }
-        })
-    })
+       
     </script>
     </div>
 </div>

package/src/views/includes/page-overview.html

@@ -0,0 +1,15 @@
+{% if page.description %}
+    <p>{{ page.description }}</p>
+{% endif %}
+
+<div class="govuk-grid-row">
+    <div class="govuk-grid-column-two-thirds">
+        <div class="govuk-pages-plugin__page__preview">
+            <iframe class="govuk-pages-plugin__page__preview__screen" src="../{{page.route}}"></iframe>
+        </div>
+    </div>
+    <div class="govuk-grid-column-one-third">
+
+        <!-- <a href="../{{ page.route }}">Go to page</a> -->
+    </div>
+</div>

package/src/views/includes/stages.html

@@ -9,7 +9,8 @@
     {% endif %}
     <ol>
     {% for page in stage.pages %}
-        <li><a href="{{ page.route }}">{{ page.title }}</a>{% if page.description %} - <span class="govuk-body-s">{{ page.description }}</span> {% endif %}</li>
+    <li><a class="govuk-pages-plugin__pages__link" href="{{ page.route }}" data-overview-page-link="./page/{{page.id}}" data-direct-link="{{ page.route }}">
+        {{ page.title }}</a>{% if page.description %} - <span class="govuk-body-s">{{ page.description }}</span> {% endif %}</li>
     {% endfor %}
     </ol>
     <hr/>

package/src/views/omni-page.html

@@ -9,12 +9,19 @@
       <div class="govuk-pages-plugin">
         <ic-theme theme="light">
           <h1 class="govuk-heading-l">Pages</h1>
-          {% from "govuk/components/details/macro.njk" import govukDetails %}
 
-          <!-- {{ govukDetails({
-            summaryText: "What is the 'Stage Index'?",
-            html: "<p>This page contains links to tracked pages in this prototype, these pages are grouped by the 'stages' that they are assigned to. It is useful for navigating the prototype without having to go through flows.</p><p>'Stages' are defined by the plugin user but can be throught about as logical groups of pages that work to achieve a common goal, such as 'authenticating' or 'registering'.</p><p class='govuk-body-s'> Note, the prototype might contain more pages than are listed here.</p>"
-          }) }}  -->
+          {% set pageOptions %}
+            <div class="govuk-pages-plugin__page-options__container">
+              <ic-switch id="usePageOverview" label="Page links go to an overview page" checked="true" size="small" helper-text="If checked, all links to pages will go to an overview page rather than directly to referenced page"></ic-switch>
+            </div>
+          {% endset %}
+
+          {{ govukDetails({
+            summaryText: "Page options",
+            html: pageOptions
+          })}}
+          
+          {% from "govuk/components/details/macro.njk" import govukDetails %}
 
           {% set tabItems = [] %}
 

package/src/views/page-overview.html

@@ -0,0 +1,36 @@
+{% extends "./layouts/govuk-pages-plugin.html" %}
+
+{% block pageTitle %}
+  Page Overview
+{% endblock %}
+
+{% block beforeContent %}
+    <div class="govuk-pages-plugin__page__header">
+        {{ govukBackLink({
+            href: "javascript:history.back(-1)"
+        })}}
+
+        {{ govukButton({
+            text: "Go to page",
+            href: "../" + page.route,
+            isStartButton: true
+        })}}
+    </div>  
+{% endblock %}
+
+{% block content %}
+
+    <div class="govuk-pages-plugin">
+        {% if noPage %}
+        <h1 class="govuk-heading-l">Oops, no page exists with that ID!</h1>
+        {% else %}
+        <span class="govuk-caption-m">Page Overview</span>
+        <h1 class="govuk-heading-l">{{ page.title }}</h1>
+
+        {% include './includes/page-overview.html' %}
+
+        {% endif %}
+
+    </div>
+
+{% endblock %}

package/test/data/outputs.ts

@@ -1,4 +1,4 @@
-import { PageFlowOutput } from "../../src/types"
+import { PageFlowOutput, PageOutput } from "../../src/types"
 
 export const getPagesTest = {
     output: [
@@ -427,4 +427,16 @@ export const getPageFlowTestB : { output: { hasStages: boolean, flows: PageFlowO
             }
         ]
     }
+}
+
+export const getPageTestA: PageOutput = {
+    id: 1,
+    title: "Title 1",
+    type: "email",
+    description: "A description about item 1",
+    route: "/a/a/1",    
+    stage: {
+        main: "stage1",
+        subStage: 1,
+    }
 }

package/test/getPages.test.js

@@ -17,3 +17,21 @@ describe('Basic getPages functions', () => {
       })
     });
 });
+
+describe('Basic getPage functions', () => {
+    describe('getPage', () => {
+      it('should return an object with information about the given page', () => {
+        const result = getPages.getPage(1, validPages)
+        const output = outputs.getPageTestA
+        expect(result).to.eql(output)
+      })
+      
+      it('should return a useful error if an INVALID page ID is provided', () => {
+        expect(() => getPages.getPage(100, validPages)).to.throw("Page ID 100 does not exist")
+      })
+
+      it('should return a useful error when INVALID pages JSON is provided', () => {
+        expect(() => getPages.getPage(1, invalidPages)).to.throw("Invalid array of PAGES passed to govuk-pages-plugin - please check the documentation to ensure the JSON schema you are passing matches what is expected")
+      })
+    });
+});

package/dist/assets/javascripts/modules/pageFlowTypeToggle.js

@@ -1,12 +0,0 @@
-export const PageFlowTypeToggle = () => {
-    console.log('The type toggle is being called')
-}
-
-export const InitPageFlowTypeToggles = () => {
-  PageFlowTypeToggle();
-  document.querySelectorAll("[data-toggle]").forEach(el => {
-    el.addEventListener("click", () => {
-      el.classList.toggle("active");
-    });
-  });
-}

package/src/assets/javascripts/modules/pageFlowTypeToggle.js

@@ -1,12 +0,0 @@
-export const PageFlowTypeToggle = () => {
-    console.log('The type toggle is being called')
-}
-
-export const InitPageFlowTypeToggles = () => {
-  PageFlowTypeToggle();
-  document.querySelectorAll("[data-toggle]").forEach(el => {
-    el.addEventListener("click", () => {
-      el.classList.toggle("active");
-    });
-  });
-}