hof 21.0.0-instrumentation-beta.0 → 21.0.1-axios-beta

package/frontend/template-partials/views/partials/bullet-list.html

@@ -1,4 +1,4 @@
-<ul class="list-bullet">
+<ul class="govuk-list govuk-list--bullet">
   {{#items}}
     <li>
       {{.}}

package/frontend/template-partials/views/partials/confirmation-alert.html

@@ -1,5 +1,6 @@
-<div class="alert-complete" role="alert">
-  <div class="alert-message">
-    <h1>{{#t}}journey.confirmation.message{{/t}}</h1>
+<div class="govuk-panel govuk-panel--confirmation" role="alert">
+  <h1 govuk-panel__title>{{#t}}journey.confirmation.message{{/t}}</h1>
+  <div class="govuk-panel__body">
+    {{#t}}journey.confirmation.details{{/t}}
   </div>
 </div>

package/frontend/template-partials/views/partials/continue.html

@@ -1,5 +1,5 @@
 {{$continue}}
     {{#continueLink}}
-        <a class="button" href="{{#url}}{{continueLink}}{{/url}}">{{#t}}buttons.continue{{/t}}</a>
+        <a class="govuk-button" href="{{#url}}{{continueLink}}{{/url}}">{{#t}}buttons.continue{{/t}}</a>
     {{/continueLink}}
 {{/continue}}

package/frontend/template-partials/views/partials/cookie-banner.html

@@ -1,26 +1,29 @@
-<div id="cookie-banner" class="grid-row">
-  <div id="cookie-banner-info" class="column-two-thirds">
-    <h1 class="heading-medium js-enabled">Cookies on {{#appName}}{{appName}}{{/appName}}{{^appName}}this service{{/appName}}</h1>
-    <p class="js-enabled">We use some essential cookies to make this website work.</p>
-    <p class="js-enabled">We'd like to set additional cookies to understand how you use this service, remember your settings and improve government services.</p>
-    <p class="js-enabled">We also use cookies set by other sites to help us deliver content from their services.</p>
-    <!--Non-javascript fallback content-->
-    <h1 class="heading-medium js-disabled">Tell us whether you accept cookies</h1>
-    <p class="js-disabled">
-    We use some essential cookies to make this website work.
-    We'd like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.
-    We also use cookies set by other sites to help us deliver content from their services.
+<div id="cookie-banner"  class="govuk-cookie-banner gem-c-cookie-banner govuk-clearfix">
+	<div class="gem-c-cookie-banner__message govuk-cookie-banner__message govuk-width-container">
+		<div id="cookie-banner-info" class="govuk-grid-row">
+			<div class="govuk-grid-column-two-thirds">
+				<h2 class="govuk-cookie-banner__heading govuk-heading-m">Cookies on {{#appName}}{{appName}}{{/appName}}{{^appName}}this service{{/appName}}</h2>
+				<div class="govuk-cookie-banner__content">
+					<p class="govuk-body">We use some essential cookies to make this website work.</p>
+					<p class="govuk-body">We'd like to set additional cookies to understand how you use GOV.UK, remember your settings and improve government services.</p>
+					<p class="govuk-body">We also use cookies set by other sites to help us deliver content from their services.</p>
+				</div>
+			</div>
+		</div>
+		<div id="cookie-banner-actions" class="govuk-button-group">         
+				<button id="accept-cookies-button" class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-accept-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner accepted" data-cookie-types="all">Accept additional cookies</button>
+	
+				<button id="reject-cookies-button" class="gem-c-button govuk-button" type="submit" data-module="gem-track-click" data-reject-cookies="true" data-track-category="cookieBanner" data-track-action="Cookie banner rejected">Reject additional cookies</button>
+
+				<a class="govuk-link" href="/cookies">View cookies</a>
+		</div>
+	</div>
+	<div class="gem-c-cookie-banner__confirmation govuk-width-container" hidden=""  id="cookie-banner-submitted" >
+		<p class="gem-c-cookie-banner__confirmation-message" role="alert">
+      Your cookie preferences have been saved. You can <a class="govuk-link" data-module="gem-track-click" data-track-category="cookieBanner" data-track-action="Cookie banner settings clicked from confirmation" href="/cookies">change your cookie settings</a> at any time.
     </p>
-  </div>
-  <div id="cookie-banner-actions" class="column-two-thirds">
-    <button id="accept-cookies-button" class="button js-enabled" type="button" aria-label="Yes, accept cookies that measure website usage">Accept additional cookies</button>
-    <button id="reject-cookies-button" class="button js-enabled" type="button" aria-label="No, decline cookies that measure website usage">Reject additional cookies</button>
-    <a href="/cookies" class="js-enabled">View cookies</a>
-    <!--Non-javascript fallback content-->
-    <a href="/cookies" role="button" class="button js-disabled">Set cookie preferences</a>
-  </div>
-  <div id="cookie-banner-submitted" tabindex="-1">
-    <p>Your cookie preferences have been saved. You can <a href="/cookies">change your cookie settings</a> at any time.</p>
-    <button id="hide-cookie-banner" class="button" type="button" aria-label="Hide cookie banner">Hide</button>
-  </div>
+		<div class="govuk-button-group">
+			<button   class="gem-c-cookie-banner__hide-button govuk-button"  id="hide-cookie-banner">Hide this message</button>
+		</div>
+	</div>
 </div>

package/frontend/template-partials/views/partials/cookie-settings-radio.html

@@ -1,8 +1,8 @@
-<div class="multiple-choice">
-  <input id="radio-1" type="radio" name="radio-group" value="Use cookies that measure my website use">
-  <label for="radio-1">Use cookies that measure my website use</label>
+<div class="govuk-radios__item">
+  <input class="govuk-radios__input" id="radio-1" type="radio" name="radio-group" value="Use cookies that measure my website use">
+  <label class="govuk-label govuk-radios__label" for="radio-1">Use cookies that measure my website use</label>
 </div>
-<div class="multiple-choice">
-  <input id="radio-2" type="radio" name="radio-group" value="Do not use cookies that measure my website use">
-  <label for="radio-2">Do not use cookies that measure my website use</label>
+<div class="govuk-radios__item">
+  <input class="govuk-radios__input"  id="radio-2" type="radio" name="radio-group" value="Do not use cookies that measure my website use">
+  <label class="govuk-label govuk-radios__label" for="radio-2">Do not use cookies that measure my website use</label>
 </div>

package/frontend/template-partials/views/partials/external-link.html

@@ -1 +1 @@
-<p>{{before}}<a href="{{href}}" rel="external">{{link}}</a>{{after}}</p>
+<p class="govuk-body">{{before}}<a class="govuk-link" href="{{href}}" rel="external">{{link}}</a>{{after}}</p>

package/frontend/template-partials/views/partials/form.html

@@ -1,7 +1,8 @@
 <form action="" method="POST" {{$encoding}}{{/encoding}} autocomplete="off" novalidate="true" spellcheck="false">
   {{$intro}}
-    {{#intro}}<p class="form-block">{{intro}}</p>{{/intro}}
+    {{#intro}}<p>{{intro}}</p>{{/intro}}
   {{/intro}}
+
   {{$form}}{{/form}}
   {{#csrf-token}}
     <input type="hidden" name="x-csrf-token" value="{{csrf-token}}" />

package/frontend/template-partials/views/partials/maincontent-left.html

@@ -1,10 +1,10 @@
 {{$content-outer}}
 {{$preloader}}{{/preloader}}
-  <div class="column-two-thirds">
+  <div class="govuk-grid-column-two-thirds">
     {{$validationSummary}}{{/validationSummary}}
-    <header>
-      <h1>{{$header}}{{/header}}</h1>
-    </header>
+    {{#captionHeading}}<span class="govuk-caption-l">{{captionHeading}}</span>{{/captionHeading}}
+    {{#header}}<h1 class="govuk-heading-l">{{header}}</h1>{{/header}}
+    {{#subHeading}}<div id="page-header"><h2 class="govuk-heading-m">{{subHeading}}</h2></div>{{/subHeading}}
     {{$content}}{{/content}}
   </div>
 {{/content-outer}}

package/frontend/template-partials/views/partials/navigation.html

@@ -1,7 +1,8 @@
-<div class="header-proposition">
-  <div class="content">
-    <nav id="proposition-menu">
-      <a href="{{baseUrl}}" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
-    </nav>
-  </div>
+<div class="govuk-header__content">
+  {{#startPageRedirectUrl}}
+    <a href="{{startPageRedirectUrl}}" class="govuk-header__link govuk-header__link--service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
+  {{/startPageRedirectUrl}}
+  {{^startPageRedirectUrl}}
+    <a href="{{journeyHeaderURL}}" class="govuk-header__link govuk-header__link--service-name" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
+  {{/startPageRedirectUrl}}
 </div>

package/frontend/template-partials/views/partials/session-cookies-table.html

@@ -1,15 +1,15 @@
-<table>
-  <thead>
-  <tr>
+<table class="govuk-table">
+  <thead class="govuk-table__head">
+  <tr class="govuk-table__row">
     {{#headers}}
-    <th>{{.}}</th>
+    <th scope="col" class="govuk-table__header app-custom-class">{{.}}</th>
     {{/headers}}
   </tr>
   </thead>
   <tbody>
-  <tr>
+  <tr class="govuk-table__row">
     {{#cookieName}}
-      <td>{{cookieName}}</td>
+      <td scope="row" class="govuk-table__header">{{cookieName}}</td>
     {{/cookieName}}
     {{^cookieName}}
       <td>{{defaultCookieName}}</td>

package/frontend/template-partials/views/partials/summary-table-row.html

@@ -5,10 +5,10 @@
         <dt class="confirm-label">{{label}}</dt>
         <dd class="confirm-value" data-value="{{value}}">{{value}}</dd>
     {{#changeLink}}
-        <dd><span class="link"><a href="{{changeLink}}" id="{{field}}-change-{{index}}">{{#t}}buttons.change{{/t}} <span class="visuallyhidden">{{changeLinkDescription}} from {{value}}</span></a></span></dd>
+        <dd><span><a class="govuk-link" href="{{changeLink}}" id="{{field}}-change-{{index}}">{{#t}}buttons.change{{/t}} <span class="visuallyhidden">{{changeLinkDescription}} from {{value}}</span></a></span></dd>
     {{/changeLink}}
     {{^changeLink}}
-        <dd><span class="link"><a href="{{baseUrl}}{{step}}/edit#{{field}}" id="{{field}}-change">{{#t}}buttons.change{{/t}} <span class="visuallyhidden">{{changeLinkDescription}} from {{value}}</span></a></span></dd>
+        <dd><span><a class="govuk-link" href="{{baseUrl}}{{step}}/edit#{{field}}" id="{{field}}-change">{{#t}}buttons.change{{/t}} <span class="visuallyhidden">{{changeLinkDescription}} from {{value}}</span></a></span></dd>
     {{/changeLink}}
     {{/isSeparator}}
 </div>

package/frontend/template-partials/views/partials/table.html

@@ -1,16 +1,16 @@
-<table>
-  <thead>
-    <tr>
+<table class="govuk-table">
+  <thead class="govuk-table__head">
+    <tr class="govuk-table__row">
       {{#headers}}
-        <th>{{.}}</th>
+        <th scope="col" class="govuk-table__header app-custom-class">{{.}}</th>
       {{/headers}}
     </tr>
   </thead>
-  <tbody>
+  <tbody class="govuk-table__body"> 
     {{#rows}}
-      <tr>
+      <tr class="govuk-table__row">
         {{#.}}
-          <td>{{.}}</td>
+          <td  class="govuk-table__cell">{{.}}</td>
         {{/.}}
       </tr>
     {{/rows}}

package/frontend/template-partials/views/partials/validation-list.html

@@ -1,3 +1,3 @@
-<ul>
-{{$validation-list}}{{/validation-list}}
+<ul class="govuk-list govuk-error-summary__list">
+    {{$validation-list}}{{/validation-list}}
 </ul>

package/frontend/template-partials/views/partials/validation-summary.html

@@ -1,24 +1,25 @@
 {{#errorlist.length}}
-<div class="validation-summary" tabindex="-1">
+<div class="govuk-error-summary" aria-labelledby="error-summary-title" data-module="govuk-error-summary" role="alert" tabindex="-1">
     {{$errorlist-title}}
 
       {{#errorLength.single}}
-        <h2 id="error-summary-title">{{#t}}errorlist.title.single{{/t}}</h2>
+        <h2 class="govuk-error-summary__title" id="error-summary-title">{{#t}}errorlist.title.single{{/t}}</h2>
       {{/errorLength.single}}
       {{#errorLength.multiple}}
-        <h2 id="error-summary-title">{{#t}}errorlist.title.multiple{{/t}}</h2>
+        <h2 class="govuk-error-summary__title" id="error-summary-title">{{#t}}errorlist.title.multiple{{/t}}</h2>
       {{/errorLength.multiple}}
 
     {{/errorlist-title}}
-
-    {{<partials-validation-list}}
-        {{$validation-list}}
-            {{#errorlist}}
-                {{#message}}
-                  <li><a href="#{{key}}">{{ message }}</a></li>
-                {{/message}}
-            {{/errorlist}}
-        {{/validation-list}}
-    {{/partials-validation-list}}
+	<div class="govuk-error-summary__body">
+		{{<partials-validation-list}}
+			{{$validation-list}}
+				{{#errorlist}}
+					{{#message}}
+						<li><a href="#{{errorLinkId}}">{{ message }}</a></li>
+					{{/message}}
+				{{/errorlist}}
+			{{/validation-list}}
+		{{/partials-validation-list}}
+	</div>
 </div>
 {{/errorlist.length}}

package/frontend/template-partials/views/partials/warn.html

@@ -0,0 +1,7 @@
+<div class="govuk-warning-text">
+    <span class="govuk-warning-text__icon" aria-hidden="true">!</span>
+    <strong class="govuk-warning-text__text">
+    <span class="govuk-warning-text__assistive">Warning</span>
+        {{warning}}
+    </strong>
+</div>

package/frontend/template-partials/views/session-timeout.html

@@ -1,6 +1,7 @@
 {{<error}}
   {{$content}}
-    <p>{{{content.message}}}</p>
-    <a href="{{startLink}}" class="button" role="button">{{#t}}buttons.start-again{{/t}}</a>
+    <h1 class="govuk-heading-l">{{{content.title}}}</h1>
+    <h2 class="govuk-heading-m">{{{content.message}}}</h2>
+    <a href="{{startLink}}" class="govuk-button" role="button">{{#t}}buttons.start-again{{/t}}</a>
   {{/content}}
 {{/error}}

package/frontend/themes/gov-uk/client-js/cookieSettings.js

@@ -35,7 +35,7 @@ function showCookieBannerSubmitted() {
   document.getElementById('cookie-banner-info').style.display = 'none';
   document.getElementById('cookie-banner-actions').style.display = 'none';
   var cookieBannerSubmitted = document.getElementById('cookie-banner-submitted');
-  cookieBannerSubmitted.style.display = 'flex';
+  cookieBannerSubmitted.style.display = 'block';
   cookieBannerSubmitted.focus();
 }
 

package/frontend/themes/gov-uk/client-js/govuk-cookies.js

@@ -0,0 +1,121 @@
+/* eslint-disable no-undef, no-param-reassign, no-unused-vars */
+(function () {
+  'use strict';
+  const root = this;
+  if(typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  /*
+    Cookie methods
+    ==============
+
+    Usage:
+
+      Setting a cookie:
+      GOVUK.cookie('hobnob', 'tasty', { days: 30 });
+
+      Reading a cookie:
+      GOVUK.cookie('hobnob');
+
+      Deleting a cookie:
+      GOVUK.cookie('hobnob', null);
+  */
+  GOVUK.cookie = function (name, value, options) {
+    if(typeof value !== 'undefined') {
+      if(value === false || value === null) {
+        return GOVUK.setCookie(name, '', { days: -1 });
+      }
+      return GOVUK.setCookie(name, value, options);
+    }
+    return GOVUK.getCookie(name);
+  };
+  GOVUK.setCookie = function (name, value, options) {
+    if(typeof options === 'undefined') {
+      options = {};
+    }
+    let cookieString = name + '=' + value + '; path=/';
+    if (options.days) {
+      const date = new Date();
+      date.setTime(date.getTime() + (options.days * 24 * 60 * 60 * 1000));
+      cookieString = cookieString + '; expires=' + date.toGMTString();
+    }
+    if (document.location.protocol === 'https:') {
+      cookieString = cookieString + '; Secure';
+    }
+    document.cookie = cookieString;
+  };
+  GOVUK.getCookie = function (name) {
+    const nameEQ = name + '=';
+    const cookies = document.cookie.split(';');
+    for(let i = 0, len = cookies.length; i < len; i++) {
+      let cookie = cookies[i];
+      while (cookie.charAt(0) === ' ') {
+        cookie = cookie.substring(1, cookie.length);
+      }
+      if (cookie.indexOf(nameEQ) === 0) {
+        return decodeURIComponent(cookie.substring(nameEQ.length));
+      }
+    }
+    return null;
+  };
+}).call(this);
+(function () {
+  'use strict';
+  const root = this;
+  if (typeof root.GOVUK === 'undefined') { root.GOVUK = {}; }
+
+  GOVUK.addCookieMessage = function () {
+    const message = document.getElementById('global-cookie-message');
+
+    const hasCookieMessage = (message && GOVUK.cookie('seen_cookie_message') === null);
+
+    if (hasCookieMessage) {
+      message.style.display = 'block';
+      GOVUK.cookie('seen_cookie_message', 'yes', { days: 28 });
+
+      document.addEventListener('DOMContentLoaded', function (event) {
+        if (GOVUK.analytics && typeof GOVUK.analytics.trackEvent === 'function') {
+          GOVUK.analytics.trackEvent('cookieBanner', 'Cookie banner shown', {
+            value: 1,
+            nonInteraction: true
+          });
+        }
+      });
+    }
+  };
+}).call(this)
+;
+(function () {
+  'use strict';
+
+  // add cookie message
+  if (window.GOVUK && GOVUK.addCookieMessage) {
+    GOVUK.addCookieMessage();
+  }
+
+  // header navigation toggle
+  if (document.querySelectorAll && document.addEventListener) {
+    const els = document.querySelectorAll('.js-header-toggle');
+    let i; let _i;
+    for(i = 0, _i = els.length; i < _i; i++) {
+      els[i].addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.getElementById(this.getAttribute('href').substr(1));
+        const targetClass = target.getAttribute('class') || '';
+        const sourceClass = this.getAttribute('class') || '';
+
+        if(targetClass.indexOf('js-visible') !== -1) {
+          target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''));
+        } else {
+          target.setAttribute('class', targetClass + ' js-visible');
+        }
+        if(sourceClass.indexOf('js-visible') !== -1) {
+          this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''));
+        } else {
+          this.setAttribute('class', sourceClass + ' js-visible');
+        }
+        this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true');
+        target.setAttribute('aria-hidden', target.getAttribute('aria-hidden') === 'false');
+      });
+    }
+  }
+}).call(this);

package/frontend/themes/gov-uk/client-js/index.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-var */
+/* eslint-disable no-var, vars-on-top, no-unused-vars */
 'use strict';
 
 var toolkit = require('../../../toolkit');
@@ -8,6 +8,11 @@ var formFocus = toolkit.formFocus;
 var characterCount = toolkit.characterCount;
 var validation = toolkit.validation;
 
+var GOVUK = require('govuk-frontend');
+GOVUK.initAll();
+window.GOVUK = GOVUK;
+var skipToMain = require('./skip-to-main');
+var cookie = require('./govuk-cookies');
 var cookieSettings = require('./cookieSettings');
 
 toolkit.detailsSummary();

package/frontend/themes/gov-uk/client-js/skip-to-main.js

@@ -0,0 +1,19 @@
+const skipToMain = function () {
+  const skipToMainLink = document.getElementById('skip-to-main');
+  const firstControlId = skipToMainLink.hash.split('#')[1] ? skipToMainLink.hash.split('#')[1] : 'main-content';
+  if(firstControlId === 'main-content') {
+    skipToMainLink.setAttribute('href', '#main-content');
+  }
+  if(firstControlId) {
+    // eslint-disable-next-line no-unused-vars
+    skipToMainLink.onclick = function (e) {
+      // here timeout added just to make this functionality asynchronous
+      // to focus on form as well as non form contents
+      setTimeout(() => {
+        const firstControl = document.getElementById(firstControlId);
+        firstControl.focus();
+      }, 10);
+    };
+  }
+};
+skipToMain();

package/frontend/themes/gov-uk/styles/_cookie-banner.scss

@@ -10,7 +10,6 @@
 }
 
 #cookie-banner {
-  max-width: 960px;
   margin: 0 15px;
   p {
     margin: 0;
@@ -62,3 +61,54 @@
     height: fit-content;
   }
 }
+
+// the following are additional hof specific govuk cookie banner styling
+.govuk-banner--success {
+  border-color: #00703c;
+  color: #00703c;
+}
+
+.govuk-banner {
+  border: 5px solid #1d70b8;
+  font-size: 0;
+  margin-bottom: 30px;
+  padding: 10px;
+}
+
+.govuk-banner__icon{
+  display: inline-block;
+}
+
+.govuk-banner__message {
+  font-family: "GDS Transport", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.25;
+  color: #0b0c0c;
+  display: block;
+  overflow: hidden;
+  display: inline-block;
+  margin-left: 10px;
+}
+
+.govuk-banner__assistive {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0 0 0 0) !important;
+  clip-path: inset(50%) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  }
+
+.cookie-table-holder > table > tbody > tr > td:first-child{
+  font-weight:bold;
+}
+
+.js-enabled #global-cookie-message {
+  display: none;
+}

package/frontend/themes/gov-uk/styles/govuk.scss

@@ -12,6 +12,10 @@ $path: "/public/images/" !default;
 // https://github.com/alphagov/govuk_elements/blob/master/packages/govuk-elements-sass/public/sass/_elements.scss
 @import "govuk-elements-sass/public/sass/elements";
 
+// Govuk frontend
+// https://github.com/alphagov/govuk-frontend-docs
+@import "govuk-frontend";
+
 // Custom
 @import "base";
 @import "layout";

package/frontend/themes/gov-uk/styles/modules/_validation.scss

@@ -22,10 +22,10 @@
     }
 }
 
-.validation-error {
+.govuk-form-group--error {
     box-sizing: border-box;
     padding-left: $gutter-half - $validation-bdr-size;
-    border-left: $validation-bdr-size-lg solid $error-colour;
+    //border-left: $validation-bdr-size-lg solid $error-colour;
 
     &:focus {
         outline: $focus-outline;
@@ -36,16 +36,16 @@
     }
 }
 
-.error-message {
+.govuk-error-message {
     display: block;
     @include media(tablet) {
         margin-bottom: 0.5em;
     }
     @include bold-19;
-    color: $error-colour;
+    //color: $error-colour;
 }
 
 .invalid-input,
-.validation-error .date-input {
+.govuk-form-group--error .date-input {
     border: $validation-bdr-size solid $error-colour;
 }

package/frontend/toolkit/assets/javascript/character-count.js

@@ -30,12 +30,12 @@ CharacterCount.prototype.updateCount = function () {
   this.$maxlengthHint.innerHTML = 'You have ' + number + characterNoun + remainderSuffix;
 
   if (currentLength >= this.maxLength + 1) {
-    helpers.removeClass(this.$maxlengthHint, 'form-hint');
-    helpers.addClass(this.$maxlengthHint, 'error-message');
+    helpers.removeClass(this.$maxlengthHint, 'govuk-hint');
+    helpers.addClass(this.$maxlengthHint, 'govuk-error-message');
     helpers.addClass(this.$textarea, 'textarea-error');
   } else {
-    helpers.addClass(this.$maxlengthHint, 'form-hint');
-    helpers.removeClass(this.$maxlengthHint, 'error-message');
+    helpers.addClass(this.$maxlengthHint, 'govuk-hint');
+    helpers.removeClass(this.$maxlengthHint, 'govuk-error-message');
     helpers.removeClass(this.$textarea, 'textarea-error');
   }
 };

package/frontend/toolkit/assets/javascript/progressive-reveal.js

@@ -7,12 +7,14 @@ var groupBy = require('lodash').groupBy;
 var helpers = require('./helpers');
 var inputs; var groups;
 var toggleAttr = 'data-toggle';
-var hiddenClass = 'js-hidden';
+var checkboxHiddenClass = 'govuk-checkboxes__conditional--hidden';
+var radioHiddenClass = 'govuk-radios__conditional--hidden';
 
 function inputClicked(e, target) {
   target = target || helpers.target(e);
   var shown;
   each(groups[target.name], function (input) {
+    var hiddenClass = (input.type.match(/checkbox/)) ? checkboxHiddenClass : radioHiddenClass;
     var id = input.getAttribute('aria-controls');
     var toggle = document.getElementById(id);
     if (toggle) {

package/frontend/toolkit/assets/javascript/validation.js

@@ -53,7 +53,11 @@ function setup(summary) {
 }
 
 function validation() {
-  var summaries = helpers.getElementsByClass(document.getElementById('content'), 'div', 'validation-summary');
+  var summaries = [];
+
+  if (document.getElementById('content')) {
+    summaries = helpers.getElementsByClass(document.getElementById('content'), 'div', 'validation-summary');
+  }
 
   if (summaries.length) {
     summary = summaries[0];

package/frontend/toolkit/assets/stylesheets/modules/_validation.scss

@@ -22,7 +22,7 @@
     }
 }
 
-.validation-error {
+.govuk-form-group--error {
     box-sizing: border-box;
     padding-left: $gutter-half - $validation-bdr-size;
     border-left: $validation-bdr-size-lg solid $error-colour;
@@ -36,7 +36,7 @@
     }
 }
 
-.error-message {
+.govuk-error-message {
     display: block;
     @include media(tablet) {
         margin-bottom: 0.5em;
@@ -46,6 +46,6 @@
 }
 
 .invalid-input,
-.validation-error .date-input {
+.govuk-form-group--error .date-input {
     border: $validation-bdr-size solid $error-colour;
 }