hof 19.14.2 → 20.0.0-beta.2

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

@@ -5,25 +5,32 @@
   {{$pageTitle}}
     {{#errorlist.length}}{{#t}}errorlist.prefix{{/t}}{{/errorlist.length}}{{$header}}{{/header}} – GOV.UK
   {{/pageTitle}}
-  {{$headerClass}}with-proposition{{/headerClass}}
+  {{$bodyStart}}
+    <a href="#{{#skipToMain}}{{skipToMain}}{{/skipToMain}}{{^skipToMain}}main-content{{/skipToMain}}" class="govuk-skip-link" id="skip-to-main">Skip to main content</a>
+  {{/bodyStart}}
+  {{$headerClass}}govuk-header{{/headerClass}}
   {{$insideHeader}}{{/insideHeader}}
   {{$main}}
-    <main class="main" role="main">
-      <div class="phase-banner">
-        <p>
-          <strong class="phase-tag">{{#t}}journey.phase{{/t}}</strong>
-          <span>This is a new service – your <a href="{{feedbackUrl}}{{^feedbackUrl}}https://eforms.homeoffice.gov.uk/outreach/feedback.ofml{{/feedbackUrl}}">feedback</a> will help us to improve it.</span>
-        </p>
-      </div>
+	  <div class="govuk-width-container ">
+		{{#feedbackUrl}}
+			<div class="govuk-phase-banner">
+				<p class="govuk-phase-banner__content">
+				<strong class="govuk-tag govuk-phase-banner__content__tag">{{#t}}journey.phase{{/t}}</strong>
+				<span  class="govuk-phase-banner__text">This is a new service – your <a href="{{feedbackUrl}}{{^feedbackUrl}}https://eforms.homeoffice.gov.uk/outreach/feedback.ofml{{/feedbackUrl}}" class="govuk-link" id="feedback-link" target="_blank">feedback</a> will help us to improve it.</span>
+				</p>
+			</div>
+		{{/feedbackUrl}}      
       <span id="step">
         {{> partials-back}} <span>{{$step}}{{/step}}</span>
       </span>
-      <div class="grid-row" id="content">
-        {{> partials-maincontent-left}}
-      </div>
+	  <main class="govuk-main-wrapper govuk-main-wrapper--auto-spacing" id="main-content" role="main">
+		  <div class="govuk-grid-row" id="gov-grid-row-content">
+			{{> partials-maincontent-left}}
+		  </div>
+	  </main>
       {{> partials-continue}}
       <script type="text/javascript" src="{{assetPath}}/js/bundle.js"></script>
-    </main>
+	  </div>
   {{/main}}
   {{$cookieMessage}}
     {{#gaTagId}}
@@ -37,16 +44,9 @@
     {{/gaTagId}}
   {{/cookieMessage}}
   {{$footerSupportLinks}}
-    <ul>
-      {{#footerSupportLinks}}
-        <li><a href="{{path}}">{{#t}}{{property}}{{/t}}</a></li>
-      {{/footerSupportLinks}}
-      {{^footerSupportLinks}}
-        <li><a href="/cookies">{{#t}}base.cookies{{/t}}</a></li>
-        <li><a href="/terms-and-conditions">{{#t}}base.terms{{/t}}</a></li>
-        <li><a href="/accessibility">{{#t}}base.accessibility{{/t}}</a></li>
-      {{/footerSupportLinks}}
-    </ul>
+    <li class="govuk-footer__inline-list-item"><a class="govuk-footer__link" href="/cookies">{{#t}}base.cookies{{/t}}</a></li>
+    <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/accessibility">{{#t}}base.accessibility{{/t}}</a></li>
+    <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/terms-and-conditions">{{#t}}base.terms{{/t}}</a></li>
   {{/footerSupportLinks}}
   {{$bodyEnd}}
     {{> partials-gatag}}

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

@@ -1,5 +1,5 @@
 {{$back}}
   {{#backLink}}
-    <a class="link-back" href="{{#url}}{{backLink}}{{/url}}">{{#t}}buttons.back{{/t}}</a>
+    <a class="govuk-back-link" href="{{#url}}{{backLink}}{{/url}}">{{#t}}buttons.back{{/t}}</a>
   {{/backLink}}
 {{/back}}

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" tabindex="0" 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="/student-help/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,6 +1,6 @@
 <form action="" method="POST" {{$encoding}}{{/encoding}} autocomplete="off" novalidate="true" spellcheck="false">
   {{$intro}}
-    {{#intro}}<p class="form-block">{{intro}}</p>{{/intro}}
+    {{#intro}}<span class="govuk-hint" >{{intro}}</span>{{/intro}}
   {{/intro}}
   {{$form}}{{/form}}
   {{#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-xl">{{header}}</h1>{{/header}}
+    {{#subHeading}}<div id="page-header" class="govuk-heading-l">{{subHeading}}</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="{{baseUrl}}" 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/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/session-timeout.html

@@ -1,6 +1,6 @@
 {{<error}}
   {{$content}}
     <p>{{{content.message}}}</p>
-    <a href="{{startLink}}" class="button" role="button">{{#t}}buttons.start-again{{/t}}</a>
+    <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,122 @@
+(function () {
+  "use strict"
+  var 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 });
+      } else {
+        return GOVUK.setCookie(name, value, options);
+      }
+    } else {
+      return GOVUK.getCookie(name);
+    }
+  };
+  GOVUK.setCookie = function (name, value, options) {
+    if(typeof options === 'undefined') {
+      options = {};
+    }
+    var cookieString = name + "=" + value + "; path=/";
+    if (options.days) {
+      var 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) {
+    var nameEQ = name + "=";
+    var cookies = document.cookie.split(';');
+    for(var i = 0, len = cookies.length; i < len; i++) {
+      var 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'
+  var root = this
+  if (typeof root.GOVUK === 'undefined') { root.GOVUK = {} }
+
+  GOVUK.addCookieMessage = function () {
+    var message = document.getElementById('global-cookie-message')
+
+    var 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){
+    var els = document.querySelectorAll('.js-header-toggle'),
+        i, _i;
+    for(i=0,_i=els.length; i<_i; i++){
+      els[i].addEventListener('click', function(e){
+        e.preventDefault();
+        var target = document.getElementById(this.getAttribute('href').substr(1)),
+            targetClass = target.getAttribute('class') || '',
+            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

@@ -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,18 @@
+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) {
+      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/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;
 }

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/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;
 }