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

package/frontend/govuk-template/index.js

@@ -5,18 +5,18 @@ const servestatic = require('serve-static');
 const Router = require('express').Router;
 const buildTemplateLayout = require('./build');
 
-const basedir = path.dirname(require.resolve('govuk_template_mustache/package.json'));
+const basedir = path.dirname(require.resolve('govuk-frontend/package.json'));
 
 const setup = (opts, router) => {
   buildTemplateLayout();
   const options = opts || {};
-  options.path = options.path || '/govuk-assets';
+  options.path = options.path || '/assets';
 
-  router.use(options.path, servestatic(path.join(basedir, './assets'), options));
+  router.use(options.path, servestatic(path.join(basedir, './govuk/assets'), options));
   router.use((req, res, next) => {
     res.locals.govukAssetPath = req.baseUrl + options.path + '/';
     res.locals.partials = res.locals.partials || {};
-    res.locals.partials['govuk-template'] = path.resolve(__dirname, './govuk_template');
+    res.locals.partials['govuk-template'] = path.resolve(__dirname, './govuk_template_generated');
     next();
   });
 

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

@@ -12,11 +12,13 @@ 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/option-group',
+  'partials/forms/checkbox-group'
 ];
 
 // This returns a middleware that places mixins against the `res.locals` object.
@@ -40,6 +42,15 @@ module.exports = function (options) {
     return null;
   }
 
+  function maxword(field) {
+    const validation = field.validate || [];
+    const mw = _.findWhere(validation, { type: 'maxword' });
+    if (mw) {
+      return _.isArray(mw.arguments) ? mw.arguments[0] : mw.arguments;
+    }
+    return null;
+  }
+
   function type(field) {
     return field.type || 'text';
   }
@@ -191,6 +202,7 @@ 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, {
@@ -199,18 +211,22 @@ module.exports = function (options) {
         type: extension.type || type(field),
         value: this.values && this.values[key],
         label: t(lKey),
-        labelClassName: classNames(field, 'labelClassName') || 'form-label',
-        formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'form-group',
+        labelClassName: labelClassName ? `govuk-label ${labelClassName}` : 'govuk-label',
+        formGroupClassName: classNames(field, 'formGroupClassName') || extension.formGroupClassName || 'govuk-form-group',
         hint: hint,
         hintId: extension.hintId || (hint ? key + '-hint' : null),
         error: this.errors && this.errors[key],
         maxlength: maxlength(field) || extension.maxlength,
+        maxword: maxword(field) || extension.maxword,
         required: required,
         pattern: extension.pattern,
         date: extension.date,
         autocomplete: autocomplete,
         child: field.child,
+        isPageHeading: field.isPageHeading,
         attributes: field.attributes,
+        isPrefixOrSuffix: _.map(field.attributes, item => {if (item.prefix || item.suffix !== undefined) return true;}),
+        isMaxlengthOrMaxword: maxlength(field) || extension.maxlength || maxword(field) || extension.maxword,
         renderChild: renderChild.bind(this)
       });
     }
@@ -219,7 +235,8 @@ 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;
+      const warningValue = 'fields.' + key + '.warning';
       let legendClassName;
       let legendValue = 'fields.' + key + '.legend';
       if (legend) {
@@ -236,7 +253,10 @@ module.exports = function (options) {
         legend: t(legendValue),
         legendClassName: legendClassName,
         role: opts.type === 'radio' ? 'radiogroup' : 'group',
-        ariaRequired: opts.type === 'radio',
+        isPageHeading: field.isPageHeading,
+        isWarning: field.isWarning,
+        warning: t(warningValue),
+        detail: detail ? detail : '',
         hint: conditionalTranslate(getTranslationKey(field, key, 'hint')),
         options: _.map(field.options, function (obj) {
           let selected = false;
@@ -245,6 +265,7 @@ module.exports = function (options) {
           let toggle;
           let child;
           let optionHint;
+          let useHintText;
 
           if (typeof obj === 'string') {
             value = obj;
@@ -255,6 +276,7 @@ module.exports = function (options) {
             label = obj.label || 'fields.' + key + '.options.' + obj.value + '.label';
             toggle = obj.toggle;
             child = obj.child;
+            useHintText = obj.useHintText;
             optionHint = obj.hint || 'fields.' + key + '.options.' + obj.value + '.hint';
           }
 
@@ -270,9 +292,10 @@ module.exports = function (options) {
             value: value,
             type: opts.type,
             selected: selected,
+            radioOption: opts.type === 'radio',
             toggle: toggle,
             child: child,
-            optionHint: conditionalTranslate(optionHint) || ''
+            optionHint: useHintText ? optionHint : conditionalTranslate(optionHint) || ''
           };
         }, this),
         className: classNames(field),
@@ -297,7 +320,7 @@ module.exports = function (options) {
         invalid: this.errors && this.errors[key] && opts.required,
         label: t(fieldLabel || 'fields.' + key + '.label'),
         selected: selected,
-        className: classNames(field) || 'block-label',
+        className: classNames(field) || 'govuk-label govuk-checkboxes__label',
         child: field.child,
         renderChild: renderChild.bind(this)
       });
@@ -355,7 +378,7 @@ module.exports = function (options) {
         }
       },
       'checkbox-group': {
-        path: 'partials/forms/option-group',
+        path: 'partials/forms/checkbox-group',
         renderWith: optionGroup,
         options: {
           type: 'checkbox'
@@ -425,16 +448,21 @@ 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-group'].render(inputText.call(this, key + '-day', { pattern: '[0-9]*', min: 1, max: 31, maxlength: 2, hintId: key + '-hint', date: true, autocomplete: autocomplete.day }));
+              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 }));
               parts.push(dayPart);
             }
 
-            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 }));
+            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, isThisRequired }));
+            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, isThisRequired }));
 
             return parts.concat(monthPart, yearPart).join('\n');
           };

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

@@ -0,0 +1,47 @@
+<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>
+        {{#isWarning}}
+        <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>
+        {{/isWarning}}
+        {{#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}}
+        </span>
+        {{/error}}
+        {{{detail}}}
+		<div class="govuk-checkboxes" data-module="govuk-checkboxes">
+        {{#options}}
+        <div class="govuk-checkboxes__item">
+            <input
+				class="govuk-checkboxes__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-checkboxes__label" for="{{key}}-{{value}}">
+                {{{label}}}
+                {{#optionHint}}<div id="{{key}}-{{value}}-item-hint" class="govuk-hint">{{optionHint}}</div>{{/optionHint}}
+            </label>
+        </div>
+        {{#renderChild}}{{/renderChild}}
+        {{/options}}
+		</div>
+    </fieldset>
+</div>

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

@@ -1,7 +1,7 @@
-<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}}>
+<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}}>
         <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="button">
+<input type="submit" {{#id}}id="{{id}}"{{/id}} value="{{{value}}}" class="govuk-button">

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

@@ -0,0 +1,37 @@
+<div class="govuk-date-input__item">
+    <div id="{{id}}-group" class="{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}">
+      <label for="{{id}}" class="{{labelClassName}}">
+          <span class="label-text">{{{label}}}</span>
+      </label>
+      {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</span>{{/hint}}
+      {{#renderChild}}{{/renderChild}}
+          {{#attributes}}
+              {{#prefix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
+              {{/prefix}}
+          {{/attributes}}
+          <input
+              type="{{type}}"
+              name="{{id}}"
+              id="{{id}}"
+              class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
+              aria-required="{{required}}"
+              {{#value}} value="{{value}}"{{/value}}
+              {{#min}} min="{{min}}"{{/min}}
+              {{#max}} max="{{max}}"{{/max}}
+              {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
+              {{#pattern}} pattern="{{pattern}}"{{/pattern}}
+              {{#hintId}} aria-describedby="{{hintId}}"{{/hintId}}
+              {{#error}} aria-invalid="true"{{/error}}
+              {{#autocomplete}} autocomplete="{{autocomplete}}"{{/autocomplete}}
+              {{#attributes}}
+                  {{attribute}}="{{value}}"
+              {{/attributes}}
+          >
+          {{#attributes}}
+              {{#suffix}}
+                  <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+              {{/suffix}}
+          {{/attributes}}
+    </div>
+</div>

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

@@ -1,11 +1,16 @@
-<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>
+<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}}">
+        {{{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}}
     {{#renderChild}}{{/renderChild}}
-    <div class="govuk-input__wrapper">
+    {{#isPrefixOrSuffix}}<div class="govuk-input__wrapper">{{/isPrefixOrSuffix}}
         {{#attributes}}
             {{#prefix}}
                 <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
@@ -15,7 +20,7 @@
             type="{{type}}"
             name="{{id}}"
             id="{{id}}"
-            class="form-control{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}"
+            class="{{^className}}govuk-input{{/className}}{{#className}}{{className}}{{/className}}{{#error}} govuk-input--error{{/error}}"
             aria-required="{{required}}"
             {{#value}} value="{{value}}"{{/value}}
             {{#min}} min="{{min}}"{{/min}}
@@ -31,8 +36,8 @@
         >
         {{#attributes}}
             {{#suffix}}
-                <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
+                <div class="govuk-input__suffix" aria-hidden="true">{{suffix}}</div>
             {{/suffix}}
         {{/attributes}}
-    </div>
+    {{#isPrefixOrSuffix}}</div>{{/isPrefixOrSuffix}}
 </div>

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

@@ -1,27 +1,43 @@
-<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 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>
+      {{#isWarning}}
+        <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>
+        {{/isWarning}}
+      {{#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}}-item-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>

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

@@ -1,10 +1,15 @@
-<div id="{{id}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
-    <label for="{{id}}" class="{{labelClassName}}">
+<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}}">
         {{{label}}}
-        {{#hint}}<span {{$hintId}}id="{{hintId}}" {{/hintId}}class="form-hint">{{hint}}</span>{{/hint}}
-        {{#error}}<span class="error-message">{{error.message}}</span>{{/error}}
+        {{#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}}
     </label>
-    <select id="{{id}}" class="form-control{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}" name="{{id}}" aria-required="{{required}}">
+    {{#isPageHeading}}</h1>{{/isPageHeading}}
+    <select id="{{id}}" class="govuk-select{{#className}} {{className}}{{/className}}{{#error}} govuk-select--error{{/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,23 +1,37 @@
-<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="form-hint">{{hint}}</span>{{/hint}}
-        {{#error}}<span id="{{id}}-error" class="error-message">{{error.message}}</span>{{/error}}
-    </label>
-    {{#renderChild}}{{/renderChild}}
-    <textarea
-        name="{{id}}"
-        id="{{id}}"
-        class="form-control{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} invalid-input{{/error}}"
-        aria-required="{{required}}"
-        {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
-        {{#attributes}}
-            {{attribute}}="{{value}}"
-        {{/attributes}}
-        {{^error}}{{#hintId}}{{#maxlength}} aria-describedby="{{id}}-maxlength-hint {{hintId}}"{{/maxlength}}{{/hintId}}{{/error}}
-        {{^error}}{{#hintId}}{{^maxlength}} aria-describedby="{{hintId}}"{{/maxlength}}{{/hintId}}{{/error}}
-        {{^error}}{{^hintId}}{{#maxlength}} aria-describedby="{{id}}-maxlength-hint"{{/maxlength}}{{/hintId}}{{/error}}
-        {{#error}} aria-invalid="true" aria-describedby="{{id}}-error"{{/error}}
-    >{{value}}</textarea>
-    {{#maxlength}}<span id="{{id}}-maxlength-hint" class="maxlength-hint form-hint" aria-live="polite">You can enter up to {{maxlength}} characters</span>{{/maxlength}}
-</div>
+{{#isMaxlengthOrMaxword}}<div class="govuk-character-count" data-module="govuk-character-count"
+    {{#maxlength}}data-maxlength="{{maxlength}}" {{/maxlength}} {{#maxword}}data-maxwords="{{maxword}}" {{/maxword}}>
+    {{/isMaxlengthOrMaxword}}
+    <div id="{{id}}-group" class="govuk-form-group {{#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}}">
+                {{{label}}}
+                {{#error}}
+                <p id="{{id}}-error" class="govuk-error-message">
+                    <span id="{{id}}-error" class="govuk-visually-hidden">Error:</span>{{error.message}}
+                </p>
+                {{/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 {{#isMaxlengthOrMaxword}}govuk-js-character-count{{/isMaxlengthOrMaxword}} {{#className}}{{className}}{{/className}} {{#error}}govuk-input--error{{/error}}"
+            {{#isMaxlengthOrMaxword}}
+            aria-describedby="{{id}}-info"
+            {{/isMaxlengthOrMaxword}}
+            {{#attributes}} 
+                {{attribute}}="{{value}}" 
+            {{/attributes}}
+            {{^error}}{{#hintId}}{{#maxlength}} aria-describedby="{{id}}-maxlength-hint {{hintId}}"{{/maxlength}}{{/hintId}}{{/error}}
+            {{^error}}{{#hintId}}{{^maxlength}} aria-describedby="{{hintId}}"{{/maxlength}}{{/hintId}}{{/error}}
+            {{^error}}{{^hintId}}{{#maxlength}}aria-describedby="{{id}}-maxlength-hint" {{/maxlength}}{{/hintId}}{{/error}}
+            {{#error}} aria-invalid="true" aria-describedby="{{id}}-error" {{/error}}
+            >{{value}}</textarea>
+        {{#isMaxlengthOrMaxword}}
+        <div id="{{id}}-info" class=" govuk-hint govuk-character-count__message" aria-live="polite">You have {{#maxlength}}{{maxlength}} characters{{/maxlength}}{{#maxword}}{{maxword}}
+            words{{/maxword}} remaining
+        </div>
+        {{/isMaxlengthOrMaxword}}
+    </div>
+{{#isMaxlengthOrMaxword}}</div>{{/isMaxlengthOrMaxword}}

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

@@ -1,5 +1,4 @@
-<div id="{{toggle}}-panel" class="reveal js-hidden">
-    <div class="panel-indent">
-        {{#renderMixin}}{{/renderMixin}}
-    </div>
+<div id="{{toggle}}-panel" class="{{#radioOption}}govuk-radios__conditional{{/radioOption}}
+  {{^radioOption}}govuk-checkboxes__conditional{{/radioOption}}">
+  {{#renderMixin}}{{/renderMixin}}
 </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="list list-bullet">
+    <ul class="govuk-list">
         <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="list list-bullet">
+    <ul class="govuk-list">
         <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="list list-bullet">
+    <ul class="govuk-list">
         <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="list list-bullet">
+    <ul class="govuk-list">
         <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="form-group">
+            <div class="govuk-form-group">
               <fieldset>
                 <legend>
                   <h2>{{measuring-use}}</h2>

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,14 +44,14 @@
     {{/gaTagId}}
   {{/cookieMessage}}
   {{$footerSupportLinks}}
-    <ul>
+    <ul class="govuk-footer__inline-list">
       {{#footerSupportLinks}}
-        <li><a href="{{path}}">{{#t}}{{property}}{{/t}}</a></li>
+        <li class="govuk-footer__inline-list-item"><a class="govuk-footer__link" 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>
+        <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="/terms-and-conditions">{{#t}}base.terms{{/t}}</a></li>
+        <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/accessibility">{{#t}}base.accessibility{{/t}}</a></li>
       {{/footerSupportLinks}}
     </ul>
   {{/footerSupportLinks}}

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