hof 19.13.15 → 20.0.0-beta.1

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

@@ -0,0 +1,38 @@
+<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 govuk-fieldset__legend--l{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+            {{^noHeading}}<h1 class="govuk-fieldset__heading">{{/noHeading}}
+                {{legend}}
+            {{^noHeading}}</h1>{{/noHeading}}
+        </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}}
+        </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 govuk-radios__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}} invalid-input{{/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,15 @@
-<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}}">
+    {{^noHeading}}<h1 class="govuk-label-wrapper">{{/noHeading}}<label for="{{id}}" class="{{labelClassName}}">
+        {{{label}}}
+      </label>
+    {{^noHeading}}</h1>{{/noHeading}}
+    {{#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">
         {{#attributes}}
             {{#prefix}}
                 <div class="govuk-input__prefix" aria-hidden="true">{{prefix}}</div>
@@ -15,7 +19,7 @@
             type="{{type}}"
             name="{{id}}"
             id="{{id}}"
-            class="form-control{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}"
+            class="govuk-input{{#className}} {{className}}{{/className}}{{#error}} invalid-input{{/error}}"
             aria-required="{{required}}"
             {{#value}} value="{{value}}"{{/value}}
             {{#min}} min="{{min}}"{{/min}}
@@ -34,5 +38,4 @@
                 <div class="govuk-input__prefix" aria-hidden="true">{{suffix}}</div>
             {{/suffix}}
         {{/attributes}}
-    </div>
 </div>

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

@@ -1,27 +1,34 @@
-<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 govuk-fieldset__legend--l{{#legendClassName}} {{legendClassName}}{{/legendClassName}}">
+          {{^noHeading}}<h1 class="govuk-fieldset__heading">{{/noHeading}}
+              {{legend}}
+          {{^noHeading}}</h1>{{/noHeading}}
+      </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>

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}}">
+    {{^noHeading}}<h1 class="govuk-label-wrapper">{{/noHeading}}<label for="{{id}}" class="{{labelClassName}}{{^noHeading}}govuk-label--l{{/noHeading}}">
         {{{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}}">
+    {{^noHeading}}</h1>{{/noHeading}}
+    <select id="{{id}}" class="govuk-select{{#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,14 +1,22 @@
-<div id="{{id}}-group" class="form-group{{#compound}} form-group-compound{{/compound}}{{#formGroupClassName}} {{formGroupClassName}}{{/formGroupClassName}}{{#error}} validation-error{{/error}}">
-    <label for="{{id}}" class="{{labelClassName}}">
+{{#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}}">
+    {{^noHeading}}<h1 class="govuk-label-wrapper">{{/noHeading}}<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}}
+        {{#error}} 
+        <p id="{{id}}-error" class="govuk-error-message">
+            <span id="{{id}}-error" class="govuk-visually-hidden">Error:</span>{{error.message}}
+          </p>
+        {{/error}}
     </label>
+    {{^noHeading}}</h1>{{/noHeading}}
+    {{#hint}}<div {{$hintId}}id="{{hintId}}" {{/hintId}}class="govuk-hint">{{hint}}</div>{{/hint}}
     {{#renderChild}}{{/renderChild}}
     <textarea
         name="{{id}}"
         id="{{id}}"
-        class="form-control{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} invalid-input{{/error}}"
+        class="govuk-textarea{{#className}} {{className}}{{/className}} {{#maxlength}}maxlength{{/maxlength}}{{#error}} invalid-input{{/error}}"
         aria-required="{{required}}"
         {{#maxlength}} maxlength="{{maxlength}}"{{/maxlength}}
         {{#attributes}}
@@ -19,5 +27,6 @@
         {{^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}}
+    {{#maxlength}}<div id="{{id}}-maxlength-hint" class="govuk-character-count__message" aria-live="polite">You have {{maxlength}} characters remaining</div>{{/maxlength}}
 </div>
+{{#maxlength}}</div>{{/maxlength}}

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

@@ -1,5 +1,5 @@
 <div id="{{toggle}}-panel" class="reveal js-hidden">
-    <div class="panel-indent">
+    <div class="govuk-inset-text">
         {{#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="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,16 +44,9 @@
     {{/gaTagId}}
   {{/cookieMessage}}
   {{$footerSupportLinks}}
-    <ul>
-      {{#footerSupportLinks}}
-        <li><a href="{{path}}">{{#t}}{{property}}{{/t}}</a></li>
-      {{/footerSupportLinks}}
-      {{^footerSupportLinks}}
-        <li><a href="/cookies">{{#t}}base.cookies{{/t}}</a></li>
-        <li><a href="/terms-and-conditions">{{#t}}base.terms{{/t}}</a></li>
-        <li><a href="/accessibility">{{#t}}base.accessibility{{/t}}</a></li>
-      {{/footerSupportLinks}}
-    </ul>
+    <li class="govuk-footer__inline-list-item"><a class="govuk-footer__link" href="/cookies">{{#t}}base.cookies{{/t}}</a></li>
+    <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/accessibility">{{#t}}base.accessibility{{/t}}</a></li>
+    <li class="govuk-footer__inline-list-item"><a  class="govuk-footer__link" href="/terms-and-conditions">{{#t}}base.terms{{/t}}</a></li>
   {{/footerSupportLinks}}
   {{$bodyEnd}}
     {{> partials-gatag}}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 <form action="" method="POST" {{$encoding}}{{/encoding}} autocomplete="off" novalidate="true" spellcheck="false">
   {{$intro}}
-    {{#intro}}<p class="form-block">{{intro}}</p>{{/intro}}
+    {{#intro}}<span class="govuk-hint" >{{intro}}</span>{{/intro}}
   {{/intro}}
   {{$form}}{{/form}}
   {{#csrf-token}}

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

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

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

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

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

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

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

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

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

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