hof 21.0.0-instrumentation-beta.0 → 21.0.0

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}}
     </label>
-    <select id="{{id}}" class="form-control{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}" name="{{id}}" aria-required="{{required}}">
+    {{#isPageHeading}}</h1>{{/isPageHeading}}
+    {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</div>{{/hint}}
+    {{#error}}
+      <p class="govuk-error-message">
+        <span class="govuk-visually-hidden">Error:</span> {{error.message}}
+      </p>
+     {{/error}}
+    <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}}-hint {{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}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -34,7 +34,6 @@
           ga('govuk_shared.send', 'pageview')
         {{/gaCrossDomainTrackingTagId}}
       }
-
     </script>
 {{/gaTagId}}
 

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

@@ -1,2 +1,25 @@
+{{#gtmTagId}}
+{{#cookiesAccepted}}
+<!-- Google Tag Manager Data Layer  -->
+<script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>
+  var dataLayer = window.dataLayer || [];
+  dataLayer.push(
+    {{{gtmConfig}}}
+  );
+</script>
+<!-- End Google Tag Manager Data Layer  -->
+
+<!-- Google Tag Manager -->
+<script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer','{{gtmTagId}}');
+</script>
+<!-- End Google Tag Manager -->
+{{/cookiesAccepted}}
+{{/gtmTagId}}
+
 <meta name="format-detection" content="telephone=no">
 <link rel="stylesheet" href="{{assetPath}}/css/app.css">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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