Merge pull request #266 from nhsuk/develop

Release 1.7.0

CHANGELOG.md

@@ -1,5 +1,18 @@
 # NHS digital service manual Changelog
 
+## 1.7.0 - 06 August 2019
+
+:new: **New content**
+
+- Add new page in content style guide with updated guidance on numbers, measurement, dates and time
+- Add new numbers terms to A to Z of health writing
+
+:wrench: **Fixes**
+
+- Update the guidance for how we use the microgram symbol
+- Update the guidance for how we write concisely with example 
+- Update package dependencies to latest versions
+
 ## 1.6.2 - 30 July 2019
 
 :wrench: **Fixes**
@@ -102,7 +115,7 @@
 
 :new: **New features**
 
-- Publish new components; Back link, Contents list, Details, 
+- Publish new components; Back link, Contents list, Details,
 Expander, Images, Pagination, Review date, Skip link and Table
 - Draft first release of the service standard pages
 

app.js

@@ -14,6 +14,9 @@ const config = require('./app/config');
 const fileHelper = require('./middleware/file-helper.js');
 const locals = require('./app/locals');
 const routing = require('./middleware/routing.js');
+const PageIndex = require('./middleware/page-index.js');
+
+var pageIndex = new PageIndex(config);
 
 // Initialise applications
 const app = express();
@@ -72,6 +75,16 @@ app.get('/service-manual/design-example/:example', (req, res) => {
   res.render('includes/design-example-wrapper.njk', { 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 });
+});
+
+app.get('/service-manual/suggestions', (req, res) => {
+  res.set({ 'Content-Type': 'application/json' });
+  res.send(JSON.stringify(pageIndex.search(req.query.search)));
+});
+
 app.get('/', (req, res) => {
   res.redirect('/service-manual');
 });
@@ -137,4 +150,8 @@ if (config.env === 'development') {
   app.listen(config.port);
 }
 
+setTimeout(function(){
+  pageIndex.init();
+}, 2000);
+
 module.exports = app;

app/scripts/main.js

@@ -3,6 +3,7 @@ import './polyfills';
 
 // NHS.UK frontend
 import nhsuk_skipLink from '../../node_modules/nhsuk-frontend/packages/components/skip-link/skip-link'; /* eslint-disable-line camelcase */
+import './search';
 import digitalData from './digitalData';
 import DesignExample from './design-example';
 import cookieConsent from './cookieConsent';

app/scripts/search.js

@@ -0,0 +1,49 @@
+import nhsukHeader from '../../node_modules/nhsuk-frontend/packages/components/header/header';
+import autocomplete from '../../node_modules/nhsuk-frontend/packages/components/header/autocomplete';
+
+function suggestionTemplate(data) {
+  const result = data.title;
+  const truncateLength = 36;
+  const dots = result.length > truncateLength ? '...' : '';
+  const resultTruncated = result.substring(0, truncateLength) + dots;
+  const svgIcon = '<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>';
+  const resultsHref = `<a href="${data.url}">${resultTruncated}</a>`;
+
+  return svgIcon + resultsHref;
+}
+
+function searchSource(query, callback) {
+  const url = `/service-manual/suggestions/?search=${encodeURIComponent(query)}`;
+  const xhr = new XMLHttpRequest();
+  xhr.open('GET', url);
+  xhr.onload = () => {
+    if (xhr.status === 200) {
+      const data = JSON.parse(xhr.responseText);
+      callback(data);
+    }
+  };
+  xhr.send();
+}
+
+function inputValueTemplate(selected) {
+  if (selected) {
+    return selected.title;
+  }
+  return '';
+}
+
+const searchConfig = {
+  onConfirm: (selected) => {
+    window.location.href = selected.url;
+  },
+  required: false,
+  showNoOptionsFound: false,
+  source: searchSource,
+  templates: {
+    inputValue: inputValueTemplate,
+    suggestion: suggestionTemplate,
+  },
+};
+
+nhsukHeader();
+autocomplete(searchConfig);

app/styles/app/_app.scss

@@ -6,3 +6,4 @@
 @import 'homepage';
 @import 'related-nav';
 @import 'utilities';
+@import 'search';

app/styles/app/_search.scss

@@ -0,0 +1,118 @@
+.nhsuk-list--border li {
+  border-bottom: 1px solid $color_nhsuk-grey-4;
+  padding: 8px 0 16px;
+}
+
+.nhsuk-list--border li>:first-child {
+  margin-top: 0;
+}
+
+.nhsuk-list--border li>:last-child {
+  margin-bottom: 0;
+}
+
+.nhsuk-list--border li:first-of-type {
+  border-top: 1px solid $color_nhsuk-grey-4;
+  padding: 16px 0;
+}
+
+.nhsuk-header__search-form--search-results {
+  @include nhsuk-responsive-margin(7, 'bottom');
+
+  background-color: transparent;
+  display: -ms-flexbox; /* [14] */
+  display: flex; // sass-lint:disable-line no-duplicate-properties
+  padding: 0;
+  width: 100%;
+
+  .autocomplete-container {
+    width: 100%;
+  }
+
+  .autocomplete__menu--hidden {
+    display: none;
+  }
+
+  .autocomplete__input,
+  .nhsuk-search__input {
+    -ms-flex-positive: 2; /* [14] */
+    -webkit-appearance: listbox; // sass-lint:disable-line prefixes /* [5] */
+    background-color: $color_nhsuk-white !important; // sass-lint:disable-line no-important /* [6] */
+    border-bottom: 1px solid $color_nhsuk-grey-3;
+    border-bottom-left-radius: $nhsuk-border-radius;
+    border-bottom-right-radius: 0;
+    border-left: 1px solid $color_nhsuk-grey-3;
+    border-right: 0;
+    border-top: 1px solid $color_nhsuk-grey-3;
+    border-top-left-radius: $nhsuk-border-radius;
+    border-top-right-radius: 0;
+    flex-grow: 2;
+    font-size: inherit;
+    height: 52px; /* [2] */
+    margin: 0;
+    outline: none;
+    padding: 0 nhsuk-spacing(3);
+    width: 100%; /* [2] */
+
+    &:focus {
+      box-shadow: inset 0 0 0 $nhsuk-box-shadow-spread $nhsuk-focus-color;
+    }
+  }
+
+  .nhsuk-search__submit {
+    background-color: $color_nhsuk-green;
+    border: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: $nhsuk-border-radius;
+    border-top-left-radius: 0;
+    border-top-right-radius: $nhsuk-border-radius;
+    float: right;
+    font-size: inherit;
+    height: 52px; /* [2] */
+    line-height: inherit;
+    margin: 0;
+    outline: none;
+    padding: nhsuk-spacing(2) nhsuk-spacing(2) 0;
+    width: 52px;
+
+    .nhsuk-icon__search {
+      fill: $color_nhsuk-white;
+      height: 38px; /* [3] */
+      width: 38px; /* [3] */
+    }
+
+    &::-moz-focus-inner {
+      border: 0; /* [4] */
+    }
+
+    &:hover {
+      background-color: $nhsuk-button-hover-color;
+      cursor: pointer;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 $nhsuk-box-shadow-spread $nhsuk-focus-color;
+    }
+
+    &:active {
+      background-color: $nhsuk-button-active-color;
+    }
+
+  }
+
+}
+
+.app-search-results-item {
+  @include nhsuk-typography-responsive(22);
+
+  font-weight: $nhsuk-font-bold;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.app-search-results-item::first-letter {
+  text-transform: uppercase;
+}

app/styles/main.scss

@@ -79,3 +79,22 @@ h1 + .nhsuk-lede-text--small {
     }
   }
 }
+
+
+// App page contents
+.app-page-contents {
+  @include nhsuk-responsive-margin(5, 'bottom');
+}
+
+.app-page-contents__heading {
+  @include nhsuk-font(19, $weight: bold);
+  @include nhsuk-responsive-margin(3, 'bottom');
+}
+
+.app-page-contents__list {
+  @include nhsuk-font(16);
+}
+
+.app-page-contents__item {
+  @include nhsuk-responsive-margin(1, 'bottom');
+}