hof 20.0.0-beta.8 → 21.0.0-instrumentation-beta.0

package/frontend/template-mixins/mixins/template-mixins.js

@@ -12,13 +12,11 @@ const renderer = require('./render');
 const PANELMIXIN = 'partials/mixins/panel';
 const PARTIALS = [
   'partials/forms/input-text-group',
-  'partials/forms/input-text-date',
   'partials/forms/input-submit',
   'partials/forms/select',
   'partials/forms/checkbox',
   'partials/forms/textarea-group',
-  'partials/forms/option-group',
-  'partials/forms/checkbox-group'
+  'partials/forms/option-group'
 ];
 
 // This returns a middleware that places mixins against the `res.locals` object.
@@ -193,7 +191,6 @@ module.exports = function (options) {
       const lKey = getTranslationKey(field, key, 'label');
       const hint = conditionalTranslate(hKey);
       const required = isRequired(field);
-      const labelClassName = classNames(field, 'labelClassName');
       const autocomplete = field.autocomplete || extension.autocomplete;
 
       return Object.assign({}, extension, {
@@ -202,8 +199,8 @@ module.exports = function (options) {
         type: extension.type || type(field),
         value: this.values && this.values[key],
         label: t(lKey),
-        labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',
-        formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'govuk-form-group',
+        labelClassName: classNames(field, 'labelClassName') || 'form-label',
+        formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'form-group',
         hint: hint,
         hintId: extension.hintId || (hint ? key + '-hint' : null),
         error: this.errors && this.errors[key],
@@ -213,7 +210,6 @@ module.exports = function (options) {
         date: extension.date,
         autocomplete: autocomplete,
         child: field.child,
-        isPageHeading: field.isPageHeading,
         attributes: field.attributes,
         renderChild: renderChild.bind(this)
       });
@@ -223,7 +219,7 @@ module.exports = function (options) {
       opts = opts || {};
       const field = Object.assign({}, this.options.fields[key] || options.fields[key]);
       const legend = field.legend;
-      const detail = field.detail;
+
       let legendClassName;
       let legendValue = 'fields.' + key + '.legend';
       if (legend) {
@@ -240,8 +236,7 @@ module.exports = function (options) {
         legend: t(legendValue),
         legendClassName: legendClassName,
         role: opts.type === 'radio' ? 'radiogroup' : 'group',
-        isPageHeading: field.isPageHeading,
-        detail: detail ? detail : '',
+        ariaRequired: opts.type === 'radio',
         hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
         options: _.map(field.options, function (obj) {
           let selected = false;
@@ -275,7 +270,6 @@ module.exports = function (options) {
             value: value,
             type: opts.type,
             selected: selected,
-            radioOption: opts.type === 'radio',
             toggle: toggle,
             child: child,
             optionHint: conditionalTranslate(optionHint) || ''
@@ -361,7 +355,7 @@ module.exports = function (options) {
         }
       },
       'checkbox-group': {
-        path: 'partials/forms/checkbox-group',
+        path: 'partials/forms/option-group',
         renderWith: optionGroup,
         options: {
           type: 'checkbox'
@@ -431,21 +425,16 @@ module.exports = function (options) {
                 year: autocomplete + '-year'
               };
             }
-            const isThisRequired = field.validate ? field.validate.indexOf('required') > -1 : false;
-            const formGroupClassName = (field.formGroup && field.formGroup.className) ? field.formGroup.className : '';
-            const classNameDay = (field.controlsClass && field.controlsClass.day) ? field.controlsClass.day : 'govuk-date-input__input govuk-input--width-2';
-            const classNameMonth = (field.controlsClass && field.controlsClass.month) ? field.controlsClass.month : 'govuk-date-input__input govuk-input--width-2';
-            const classNameYear = (field.controlsClass && field.controlsClass.year) ? field.controlsClass.year : 'govuk-date-input__input govuk-input--width-4';
 
             const parts = [];
 
             if (isExact) {
-              const dayPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-day', { pattern: '[0-9]*', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day, formGroupClassName, className: classNameDay, isThisRequired }));
+              const dayPart = compiled['partials/forms/input-text-group'].render(inputText.call(this, key + '-day', { pattern: '[0-9]*', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day }));
               parts.push(dayPart);
             }
 
-            const monthPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-month', { pattern: '[0-9]*', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month, formGroupClassName, className: classNameMonth, isRequired }));
-            const yearPart = compiled['partials/forms/input-text-date'].render(inputText.call(this, key + '-year', { pattern: '[0-9]*', maxlength: 4, hintId: key + '-hint', date: true, autocomplete: autocomplete.year, formGroupClassName, className: classNameYear, isRequired }));
+            const monthPart = compiled['partials/forms/input-text-group'].render(inputText.call(this, key + '-month', { pattern: '[0-9]*', min: 1, max: 12, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.month }));
+            const yearPart = compiled['partials/forms/input-text-group'].render(inputText.call(this, key + '-year', { pattern: '[0-9]*', maxlength: 4, hintId: key + '-hint', date: true, formGroupClassName: 'form-group-year', autocomplete: autocomplete.year }));
 
             return parts.concat(monthPart, yearPart).join('\n');
           };

package/frontend/template-mixins/partials/forms/checkbox.html

@@ -1,7 +1,7 @@
-<div id="{{key}}-group" class="govuk-form-group {{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#error}}<p class="govuk-error-message" aria-hidden="true">{{error.message}}</p>{{/error}}
-    <div class="govuk-checkboxes__item">
-        <input class="govuk-checkboxes__input" type="checkbox" id="{{key}}" name="{{key}}" value="true" aria-required="{{required}}"{{#error}} aria-invalid="true"{{/error}}{{^error}}{{#toggle}} data-toggle="{{toggle}}"{{/toggle}}{{#selected}} checked="checked"{{/selected}}{{/error}}>
+<div id="{{key}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
+    {{#error}}<p class="error-message" aria-hidden="true">{{error.message}}</p>{{/error}}
+    <div class="multiple-choice">
+        <input type="checkbox" id="{{key}}" name="{{key}}" value="true" aria-required="{{required}}"{{#error}} aria-invalid="true"{{/error}}{{^error}}{{#toggle}} data-toggle="{{toggle}}"{{/toggle}}{{#selected}} checked="checked"{{/selected}}{{/error}}>
         <label for="{{key}}" class="{{#className}}{{className}} {{/className}}{{#invalid}}invalid-input{{/invalid}}">
             {{{label}}}
             {{#error}}<span class="visuallyhidden">{{error.message}}</span>{{/error}}

package/frontend/template-mixins/partials/forms/input-submit.html

@@ -1 +1 @@
-<input type="submit" {{#id}}id="{{id}}"{{/id}} value="{{{value}}}" class="govuk-button">
+<input type="submit" {{#id}}id="{{id}}"{{/id}} value="{{{value}}}" class="button">

package/frontend/template-mixins/partials/forms/input-text-group.html

@@ -1,15 +1,11 @@
-<div id="{{id}}-group" class="{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}}{{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}}">
-        {{{label}}}
-      </label>
-    {{#isPageHeading}}</h1>{{/isPageHeading}}
-    {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</span>{{/hint}}
-    {{#error}}
-      <p class="govuk-error-message">
-        <span class="govuk-visually-hidden">Error:</span> {{error.message}}
-      </p>
-    {{/error}}
+<div id="{{id}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{^date}}{{#error}} validation-error{{/error}}{{/date}}">
+    <label for="{{id}}" class="{{labelClassName}}">
+        <span class="label-text">{{{label}}}</span>
+        {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="form-hint">{{hint}}</span>{{/hint}}
+        {{^date}}{{#error}}<span class="error-message">{{error.message}}</span>{{/error}}{{/date}}
+    </label>
     {{#renderChild}}{{/renderChild}}
+    <div class="govuk-input__wrapper">
         {{#attributes}}
             {{#prefix}}
                 <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
@@ -19,7 +15,7 @@
             type="{{type}}"
             name="{{id}}"
             id="{{id}}"
-            class="{{^className}}govuk-input{{/className}}{{#className}}{{className}}{{/className}}{{#error}} invalid-input{{/error}}"
+            class="form-control{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}"
             aria-required="{{required}}"
             {{#value}} value="{{value}}"{{/value}}
             {{#min}} min="{{min}}"{{/min}}
@@ -38,4 +34,5 @@
                 <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
             {{/suffix}}
         {{/attributes}}
+    </div>
 </div>

package/frontend/template-mixins/partials/forms/option-group.html

@@ -1,34 +1,27 @@
-<div id="{{key}}-group" class="govuk-form-group{{#className}} {{className}} {{/className}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-  <fieldset class="govuk-fieldset" {{#hint}} aria-describedby="{{key}}-hint"{{/hint}}>
-      <legend class="govuk-fieldset__legend {{#isPageHeading}}govuk-fieldset__legend--l{{/isPageHeading}}{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
-          {{#isPageHeading}}<h1 class="govuk-fieldset__heading">{{/isPageHeading}}
-              {{legend}}
-          {{#isPageHeading}}</h1>{{/isPageHeading}}
-      </legend>
-      {{#hint}}<div id="{{key}}-hint" class="govuk-hint">{{hint}}</div>{{/hint}}
-      {{#error}}<p id="{{key}}-error" class="govuk-error-message"><span class="govuk-visually-hidden">Error:</span> {{error.message}}</p>{{/error}}
-      {{{detail}}}
-  <div class="govuk-radios" data-module="govuk-radios">
-      {{#options}}
-      <div class="govuk-radios__item">
-          <input
-      class="govuk-radios__input"
-              type="{{type}}"
-              name="{{key}}"
-              id="{{key}}-{{value}}"
-              value="{{value}}"
-              {{#toggle}} data-toggle="{{toggle}}"{{/toggle}}
-              {{#selected}} checked="checked"{{/selected}}
-              {{^error}}{{#optionHint}} aria-describedby="{{key}}-{{value}}-hint"{{/optionHint}}{{^optionHint}}{{#hint}} aria-describedby="{{key}}-hint"{{/hint}}{{/optionHint}}{{/error}}
-              {{#error}} aria-describedby="{{key}}-error" aria-invalid="true"{{/error}}
-          >
-          <label class="govuk-label govuk-radios__label" for="{{key}}-{{value}}">
-              {{{label}}}
-              {{#optionHint}}<div id="{{key}}-{{value}}-item-hint" class="govuk-hint govuk-radios__hint">{{optionHint}}</div>{{/optionHint}}
-          </label>
-      </div>
-      {{#renderChild}}{{/renderChild}}
-      {{/options}}
-  </div>
-  </fieldset>
+<div id="{{key}}-group" class="form-group{{#className}} {{className}} {{/className}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
+    <fieldset role="{{role}}"{{#ariaRequired}} aria-required="true"{{/ariaRequired}}{{#hint}} aria-describedby="{{key}}-hint"{{/hint}}>
+        <legend>
+            <span{{#legendClassName}} class="{{legendClassName}}"{{/legendClassName}}>{{legend}}</span>
+            {{#hint}}<span id="{{key}}-hint" class="form-hint">{{hint}}</span>{{/hint}}
+            {{#error}}<span id="{{key}}-error" class="error-message">{{error.message}}</span>{{/error}}
+        </legend>
+        {{#options}}
+            <label class="block-label" for="{{key}}-{{value}}">
+                <input
+                    type="{{type}}"
+                    name="{{key}}"
+                    id="{{key}}-{{value}}"
+                    value="{{value}}"
+                    required="true"
+                    {{#toggle}} data-toggle="{{toggle}}"{{/toggle}}
+                    {{#selected}} checked="checked"{{/selected}}
+                    {{^error}}{{#optionHint}} aria-describedby="{{key}}-{{value}}-hint"{{/optionHint}}{{^optionHint}}{{#hint}} aria-describedby="{{key}}-hint"{{/hint}}{{/optionHint}}{{/error}}
+                    {{#error}} aria-describedby="{{key}}-error" aria-invalid="true"{{/error}}
+                >
+                {{{label}}}
+                {{#optionHint}}<span id="{{key}}-{{value}}-hint" class="form-hint">{{optionHint}}</span>{{/optionHint}}
+            </label>
+            {{#renderChild}}{{/renderChild}}
+        {{/options}}
+    </fieldset>
 </div>

package/frontend/template-mixins/partials/forms/select.html

@@ -1,15 +1,10 @@
-<div id="{{id}}-group" class="{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}}{{#isPageHeading}}govuk-label--l{{/isPageHeading}}">
+<div id="{{id}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
+    <label for="{{id}}" class="{{labelClassName}}">
         {{{label}}}
-        {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</span>{{/hint}}
-        {{#error}}
-          <p class="govuk-error-message">
-            <span class="govuk-visually-hidden">Error:</span> {{error.message}}
-          </p>
-        {{/error}}
+        {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="form-hint">{{hint}}</span>{{/hint}}
+        {{#error}}<span class="error-message">{{error.message}}</span>{{/error}}
     </label>
-    {{#isPageHeading}}</h1>{{/isPageHeading}}
-    <select id="{{id}}" class="govuk-select{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}" name="{{id}}" aria-required="{{required}}">
+    <select id="{{id}}" class="form-control{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}" name="{{id}}" aria-required="{{required}}">
     {{#options}}
         <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
     {{/options}}

package/frontend/template-mixins/partials/forms/textarea-group.html

@@ -1,22 +1,14 @@
-{{#maxlength}}
-<div class="govuk-character-count" data-module="govuk-character-count" data-maxlength="{{maxlength}}">
-{{/maxlength}}
-<div id="{{id}}-group" class="{{#compound}}form-group-compound {{/compound}}{{#formGroupClassName}}{{formGroupClassName}}{{/formGroupClassName}}{{#error}} govuk-form-group--error{{/error}}">
-    {{#isPageHeading}}<h1 class="govuk-label-wrapper">{{/isPageHeading}}<label for="{{id}}" class="{{labelClassName}}">
+<div id="{{id}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
+    <label for="{{id}}" class="{{labelClassName}}">
         {{{label}}}
-        {{#error}} 
-        <p id="{{id}}-error" class="govuk-error-message">
-            <span id="{{id}}-error" class="govuk-visually-hidden">Error:</span>{{error.message}}
-          </p>
-        {{/error}}
+        {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="form-hint">{{hint}}</span>{{/hint}}
+        {{#error}}<span id="{{id}}-error" class="error-message">{{error.message}}</span>{{/error}}
     </label>
-    {{#isPageHeading}}</h1>{{/isPageHeading}}
-    {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</div>{{/hint}}
     {{#renderChild}}{{/renderChild}}
     <textarea
         name="{{id}}"
         id="{{id}}"
-        class="govuk-textarea{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} invalid-input{{/error}}"
+        class="form-control{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} invalid-input{{/error}}"
         aria-required="{{required}}"
         {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
         {{#attributes}}
@@ -27,6 +19,5 @@
         {{^error}}{{^hintId}}{{#maxlength}} aria-describedby="{{id}}-maxlength-hint"{{/maxlength}}{{/hintId}}{{/error}}
         {{#error}} aria-invalid="true" aria-describedby="{{id}}-error"{{/error}}
     >{{value}}</textarea>
-    {{#maxlength}}<div id="{{id}}-maxlength-hint" class="govuk-character-count__message" aria-live="polite">You have {{maxlength}} characters remaining</div>{{/maxlength}}
+    {{#maxlength}}<span id="{{id}}-maxlength-hint" class="maxlength-hint form-hint" aria-live="polite">You can enter up to {{maxlength}} characters</span>{{/maxlength}}
 </div>
-{{#maxlength}}</div>{{/maxlength}}

package/frontend/template-mixins/partials/mixins/panel.html

@@ -1,4 +1,5 @@
-<div id="{{toggle}}-panel" class="{{#radioOption}}govuk-radios__conditional govuk-radios__conditional--hidden{{/radioOption}}
-  {{^radioOption}}govuk-checkboxes__conditional govuk-checkboxes__conditional--hidden{{/radioOption}}">
-  {{#renderMixin}}{{/renderMixin}}
+<div id="{{toggle}}-panel" class="reveal js-hidden">
+    <div class="panel-indent">
+        {{#renderMixin}}{{/renderMixin}}
+    </div>
 </div>

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

@@ -8,7 +8,7 @@
 
   {{$content}}
     <p class="govuk-body">{{#t}}accessibility.intro-p2{{/t}}</p>
-    <ul class="govuk-list">
+    <ul class="list list-bullet">
         <li>{{#t}}accessibility.intro-p2-li1{{/t}}</li>
         <li>{{#t}}accessibility.intro-p2-li2{{/t}}</li>
         <li>{{#t}}accessibility.intro-p2-li3{{/t}}</li>
@@ -18,13 +18,13 @@
     <p class="govuk-body">{{#t}}accessibility.intro-p3-pre-link{{/t}} <a href="https://mcmw.abilitynet.org.uk/">{{#t}}accessibility.intro-p3-link{{/t}}</a> {{#t}}accessibility.intro-p3-post-link{{/t}}</p>
     <h2 class="govuk-heading-m">{{#t}}accessibility.how-accessible-header{{/t}}</h2>
     <p class="govuk-body">{{#t}}accessibility.how-accessible-p1{{/t}}</p>
-    <ul class="govuk-list">
+    <ul class="list list-bullet">
         <li>{{#t}}accessibility.how-accessible-p1-li1{{/t}}</li>
         <li>{{#t}}accessibility.how-accessible-p1-li2{{/t}}</li>
     </ul>
     <h2 class="govuk-heading-m">{{#t}}accessibility.reporting-header{{/t}}</h2>
     <p class="govuk-body">{{#t}}accessibility.reporting-p1{{/t}}</p>
-    <ul class="govuk-list">
+    <ul class="list list-bullet">
         <li>{{#t}}accessibility.reporting-p1-li1-pre-link{{/t}} <a href="mailto:{{#t}}accessibility.contact-email-accessibility{{/t}}">{{#t}}accessibility.contact-email-accessibility{{/t}}</a></li>
     </ul>
     <p class="govuk-body">
@@ -40,7 +40,7 @@
     <h2 class="govuk-heading-m">{{#t}}accessibility.non-accessible-header{{/t}}</h2>
     <p class="govuk-body">{{#t}}accessibility.non-accessible-p1{{/t}}</p>
     <h3 class="govuk-heading-m">{{#t}}accessibility.non-compliance-header{{/t}}</h3>
-    <ul class="govuk-list">
+    <ul class="list list-bullet">
         <li>{{#t}}accessibility.non-compliance-li1{{/t}}</li>
     </ul>
     <h3 class="govuk-heading-m">{{#t}}accessibility.disproportionate-burden-header{{/t}}</h3>

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

@@ -53,7 +53,7 @@
           {{/session-cookies-table}}
         <div class="js-enabled">
           <form>
-            <div class="govuk-form-group">
+            <div class="form-group">
               <fieldset>
                 <legend>
                   <h2>{{measuring-use}}</h2>

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

@@ -5,32 +5,25 @@
   {{$pageTitle}}
     {{#errorlist.length}}{{#t}}errorlist.prefix{{/t}}{{/errorlist.length}}{{$header}}{{/header}} – GOV.UK
   {{/pageTitle}}
-  {{$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}}
+  {{$headerClass}}with-proposition{{/headerClass}}
   {{$insideHeader}}{{/insideHeader}}
   {{$main}}
-	  <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}}      
+    <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>
       <span id="step">
         {{> partials-back}} <span>{{$step}}{{/step}}</span>
       </span>
-	  <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>
+      <div class="grid-row" id="content">
+        {{> partials-maincontent-left}}
+      </div>
       {{> partials-continue}}
       <script type="text/javascript" src="{{assetPath}}/js/bundle.js"></script>
-	  </div>
+    </main>
   {{/main}}
   {{$cookieMessage}}
     {{#gaTagId}}
@@ -44,9 +37,16 @@
     {{/gaTagId}}
   {{/cookieMessage}}
   {{$footerSupportLinks}}
-    <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>
+    <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>
   {{/footerSupportLinks}}
   {{$bodyEnd}}
     {{> partials-gatag}}

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

@@ -1,5 +1,5 @@
 {{$back}}
   {{#backLink}}
-    <a class="govuk-back-link" href="{{#url}}{{backLink}}{{/url}}">{{#t}}buttons.back{{/t}}</a>
+    <a class="link-back" 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="govuk-list govuk-list--bullet">
+<ul class="list-bullet">
   {{#items}}
     <li>
       {{.}}

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

@@ -1,6 +1,5 @@
-<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 class="alert-complete" role="alert">
+  <div class="alert-message">
+    <h1>{{#t}}journey.confirmation.message{{/t}}</h1>
   </div>
 </div>

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

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

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

@@ -1,29 +1,26 @@
-<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.
+<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.
     </p>
-		<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>
+  <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>

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

@@ -1,8 +1,8 @@
-<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 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>
-<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 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>

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

@@ -1 +1 @@
-<p class="govuk-body">{{before}}<a class="govuk-link" href="{{href}}" rel="external">{{link}}</a>{{after}}</p>
+<p>{{before}}<a 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}}<span class="govuk-hint" >{{intro}}</span>{{/intro}}
+    {{#intro}}<p class="form-block">{{intro}}</p>{{/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="govuk-grid-column-two-thirds">
+  <div class="column-two-thirds">
     {{$validationSummary}}{{/validationSummary}}
-    {{#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}}
+    <header>
+      <h1>{{$header}}{{/header}}</h1>
+    </header>
     {{$content}}{{/content}}
   </div>
 {{/content-outer}}

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

@@ -1,8 +1,7 @@
-<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 class="header-proposition">
+  <div class="content">
+    <nav id="proposition-menu">
+      <a href="{{baseUrl}}" id="proposition-name">{{$journeyHeader}}{{/journeyHeader}}</a>
+    </nav>
+  </div>
 </div>

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

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

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

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