Merge branch 'develop'

CHANGELOG.md

@@ -1,7 +1,23 @@
 # NHS digital service manual Changelog
 
+## 2.0.0 - Unreleased
+
+:new: **New features**
+
+- Add search functionality to the service manual
+
+:new: **New content**
+
+- NHS service standard 
+
+:wrench: **Fixes**
+
+- Update package dependencies to latest versions
+
 ## 1.13.4 - 09 December 2019
 
+:wrench: **Fixes**
+
 - Add missing Details component JavaScript polyfill
 - Use https on all external links and fix broken link on the test your questions page
 - Remove the unnecessary type attribute from JavaScript resources
@@ -11,6 +27,8 @@
 
 ## 1.13.3 - 25 November 2019
 
+:wrench: **Fixes**
+
 - Made it clear in PDF guidance that PDFs can be used for a permanent record
 - Added an additional bullet point on PDFs being used as a permanent record.
 - Refactor CSS and HTML to clean up the code base and make the spacing more consistent

app.js

@@ -16,7 +16,7 @@ const locals = require('./app/locals');
 const routing = require('./middleware/routing.js');
 const PageIndex = require('./middleware/page-index.js');
 
-var pageIndex = new PageIndex(config);
+const pageIndex = new PageIndex(config);
 
 // Initialise applications
 const app = express();
@@ -65,7 +65,7 @@ env.addFilter('highlight', (code, language) => {
 
 // Render standalone design examples
 app.get('/service-manual/design-example/:example', (req, res) => {
-  const displayFullPage = req.query.fullpage === "true";
+  const displayFullPage = req.query.fullpage === 'true';
   const example = req.params.example;
   const examplePath = path.join(__dirname, `/app/components/${example}.njk`);
 
@@ -74,47 +74,67 @@ app.get('/service-manual/design-example/:example', (req, res) => {
 
   // Wrap the example HTML in a basic html base template.
   var baseTemplate = 'includes/design-example-wrapper.njk';
-  if(displayFullPage) {
+  if (displayFullPage) {
     baseTemplate = 'includes/design-example-wrapper-full.njk';
   }
+
   res.render(baseTemplate, { body: exampleHtml });
 });
 
-/*
 app.get('/service-manual/search', (req, res) => {
-  var query = req.query['search-field'] || '';
-  res.render('includes/search.njk', { results: pageIndex.search(query), query: query });
+  const query = req.query['search-field'] || '';
+  const resultsPerPage = 10;
+  let currentPage = parseInt(req.query.page, 10);
+  const results = pageIndex.search(query);
+  const maxPage = Math.ceil(results.length / resultsPerPage);
+  if (!Number.isInteger(currentPage)) {
+    currentPage = 1;
+  } else if (currentPage > maxPage || currentPage < 1) {
+    currentPage = 1;
+  }
+
+  const startingIndex = resultsPerPage * (currentPage - 1);
+  const endingIndex = startingIndex + resultsPerPage;
+
+  res.render('includes/search.njk', {
+    currentPage,
+    maxPage,
+    query,
+    results: results.slice(startingIndex, endingIndex),
+    resultsLen: results.length,
+  });
 });
 
 app.get('/service-manual/suggestions', (req, res) => {
+  const results = pageIndex.search(req.query.search);
+  const slicedResults = results.slice(0, 10);
   res.set({ 'Content-Type': 'application/json' });
-  res.send(JSON.stringify(pageIndex.search(req.query.search)));
+  res.send(JSON.stringify(slicedResults));
 });
-*/
 
-app.get('/', (req, res) => {
+app.get('/', (_, res) => {
   res.redirect('/service-manual');
 });
 
 // The practices pages have moved or been deleted
 // Temporary redirects incase anyone still visits /practices pages
-app.get('/service-manual/practices/create-content-for-users-with-low-health-literacy', (req, res) => {
+app.get('/service-manual/practices/create-content-for-users-with-low-health-literacy', (_, res) => {
   res.redirect('/service-manual/content/health-literacy');
 });
 
-app.get('/service-manual/practices/create-content-for-users-with-low-health-literacy/use-a-readability-tool-to-prioritise-content', (req, res) => {
+app.get('/service-manual/practices/create-content-for-users-with-low-health-literacy/use-a-readability-tool-to-prioritise-content', (_, res) => {
   res.redirect('/service-manual/content/health-literacy/use-a-readability-tool-to-prioritise-content');
 });
 
-app.get('/service-manual/practices', (req, res) => {
+app.get('/service-manual/practices', (_, res) => {
   res.redirect('/service-manual');
 });
 
-app.get('/service-manual/practices/make-your-service-accessible', (req, res) => {
+app.get('/service-manual/practices/make-your-service-accessible', (_, res) => {
   res.redirect('/service-manual/accessibility');
 });
 
-app.get('/service-manual/content/writing-for-accessibility', (req, res) => {
+app.get('/service-manual/content/writing-for-accessibility', (_, res) => {
   res.redirect('/service-manual/accessibility/content');
 });
 
@@ -124,19 +144,19 @@ app.get(/^([^.]+)$/, (req, res, next) => {
 });
 
 // Render sitemap.xml in XML format
-app.get('/service-manual/sitemap.xml', (req, res) => {
+app.get('/service-manual/sitemap.xml', (_, res) => {
   res.set({ 'Content-Type': 'application/xml' });
   res.render('sitemap.xml');
 });
 
 // Render robots.txt in text format
-app.get('/service-manual/robots.txt', (req, res) => {
+app.get('/service-manual/robots.txt', (_, res) => {
   res.set('text/plain');
   res.render('robots.txt');
 });
 
 // Render 404 page
-app.get('*', (req, res) => {
+app.get('*', (_, res) => {
   res.statusCode = 404;
   res.render('page-not-found');
 });
@@ -157,10 +177,8 @@ if (config.env === 'development') {
   app.listen(config.port);
 }
 
-/*
-setTimeout(function(){
+setTimeout(() => {
   pageIndex.init();
 }, 2000);
-*/
 
 module.exports = app;

app/scripts/main.js

@@ -2,14 +2,36 @@
 import './polyfills';
 
 // NHS.UK frontend
+import AutoComplete from 'nhsuk-frontend/packages/components/header/autoCompleteConfig';
+import Header from '../../node_modules/nhsuk-frontend/packages/components/header/header';
 import SkipLink from '../../node_modules/nhsuk-frontend/packages/components/skip-link/skip-link';
 import Details from '../../node_modules/nhsuk-frontend/packages/components/details/details';
 import DesignExample from './design-example';
+import {
+  inputValue,
+  onConfirm,
+  source,
+  suggestion,
+} from './search';
 
 // Initialise components
+Header();
 Details();
 SkipLink();
 
 document.querySelectorAll(DesignExample.selector()).forEach((el) => {
   new DesignExample(el);
 });
+
+// Header autocomplete
+AutoComplete({
+  containerId: 'autocomplete-container',
+  formId: 'search',
+  inputId: 'search-field',
+  onConfirm,
+  source,
+  templates: {
+    inputValue,
+    suggestion,
+  },
+});

app/scripts/search.js

@@ -0,0 +1,41 @@
+/**
+ * Function to build truncated result with svg for search autocomplete
+ * @param {string} result String containing individual result from autocomplete source function
+ * @returns {string} String of HTML containing passed result
+*/
+export const suggestion = ({ title }) => {
+  const truncateLength = 36;
+  const dots = title.length > truncateLength ? '...' : '';
+  const resultTruncated = title.substring(0, truncateLength) + dots;
+  return ` <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"><path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path></svg>
+    <span class="autocomplete__option-title">${resultTruncated}</span>
+  `;
+};
+
+export const inputValue = (obj) => {
+  if (obj && obj.title) return obj.title.trim();
+  return '';
+};
+
+/**
+ * Function to populate the search autocomplete.
+ * @param {string} query Query to pass to search API
+ * @param {function} populateResults Callback function passed to source by autocomplete plugin
+*/
+export const source = (query, populateResults) => {
+  // Build URL for search endpoint
+  const url = `/service-manual/suggestions/?search=${query}`;
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.onload = () => {
+    if (xhr.status === 200) {
+      const json = JSON.parse(xhr.responseText);
+      populateResults(json);
+    }
+  };
+  xhr.send();
+};
+
+export const onConfirm = ({ url }) => {
+  window.location = url;
+};

app/styles/app/_app-reading-width.scss

@@ -10,7 +10,7 @@
   .app-component-reading-width {
 
     h1 {
-      max-width: 14em;
+      max-width: 14.5em;
     }
 
     h2 {
@@ -33,6 +33,10 @@
       max-width: 37em;
     }
 
+    .nhsuk-body-s {
+      max-width: 47em;
+    }
+
     .app-example,
     .nhsuk-table,
     .app-colour-list,

app/styles/app/_app.scss

@@ -1,4 +1,5 @@
 @import 'app-reading-width';
+@import 'beta-banner';
 @import 'code-block';
 @import 'code-highlight';
 @import 'colour-swatch';

app/styles/app/_beta-banner.scss

@@ -0,0 +1,24 @@
+/* ==========================================================================
+   #BETA-BANNER
+   ========================================================================== */
+
+.app-beta__container {
+  border-bottom: 1px solid $nhsuk-border-color;
+  padding: nhsuk-spacing(2) 0;
+}
+
+.app-beta__content {
+  display: table;
+  margin-bottom: 0;
+
+  .app-beta__tag {
+    display: block;
+    margin-right: nhsuk-spacing(2);
+  }
+}
+
+.app-beta__text {
+  @include nhsuk-font($size: 16, $line-height: 1.2);
+  display: table-cell;
+  vertical-align: baseline;
+}

app/styles/app/_featured-list.scss

@@ -8,25 +8,25 @@
 
 .featured-list {
   list-style: none;
-  margin: nhsuk-spacing(7) 0 nhsuk-spacing(5);
+  margin: nhsuk-spacing(4) 0 nhsuk-spacing(5);
   padding-left: 0;
 }
 
 @include mq($from: tablet) {
   .featured-list {
-    margin: 96px 0 nhsuk-spacing(9);
+    margin: nhsuk-spacing(6) 0 nhsuk-spacing(5);
   }
 }
 
 .featured-list--item {
-  margin-bottom: nhsuk-spacing(6);
+  margin-bottom: nhsuk-spacing(5);
 }
 
 @include mq($from: tablet) {
   .featured-list--item {
     display: -ms-flexbox; // sass-lint:disable-line no-duplicate-properties
     display: flex; // sass-lint:disable-line no-duplicate-properties
-    margin-bottom: nhsuk-spacing(9);
+    margin-bottom: nhsuk-spacing(6);
     padding-left: nhsuk-spacing(9);
   }
 }

app/styles/app/_search.scss

@@ -59,7 +59,8 @@
     width: 100%; /* [2] */
 
     &:focus {
-      box-shadow: inset 0 0 0 $nhsuk-box-shadow-spread $nhsuk-focus-color;
+      border: $nhsuk-box-shadow-spread solid $nhsuk-focus-color;
+      box-shadow: inset 0 0 0 $nhsuk-box-shadow-spread $nhsuk-focus-text-color;
     }
   }
 
@@ -95,7 +96,12 @@
     }
 
     &:focus {
-      box-shadow: inset 0 0 0 $nhsuk-box-shadow-spread $nhsuk-focus-color;
+      background-color: $nhsuk-focus-color;
+      border-bottom: 4px solid $nhsuk-text-color;
+
+      .nhsuk-icon__search {
+        fill: $nhsuk-focus-text-color;
+      }
     }
 
     &:active {
@@ -120,3 +126,42 @@
 .app-search-results-item::first-letter {
   text-transform: uppercase;
 }
+
+.autocomplete__option {
+  text-decoration: none;
+
+  &:focus {
+    .autocomplete__option-title {
+      @include nhsuk-focused-text;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    .autocomplete__option-title {
+      text-decoration: none;
+    }
+  }
+
+  &-title {
+    text-decoration: underline;
+  }
+}
+
+// Autocomplete list hotfixes
+
+.autocomplete__option .nhsuk-icon__search {
+  margin: 2px 4px 2px 0;
+}
+
+@include mq($from: tablet) {
+
+  .autocomplete__option:last-child {
+    padding-bottom: 0;
+  }
+
+  .autocomplete__menu {
+    padding: 16px 8px;
+  }
+
+}