Merge pull request #127 from hmcts/DIV-3893_use_govuk_frontend

move errors above title, correct textbox sizes update confirmation co…

assets/scss/look-and-feel/confirmation-statement.scss

@@ -1,9 +1,37 @@
 .confirmation-container {
-  background: #dee0e2;
-  padding: 25px;
+  background: govuk-colour("grey-3");
   margin-bottom: 30px;
 
   .govuk-form-group {
     margin: 0;
+    padding: 25px 25px 0px 25px;
+  }
+
+  .govuk-checkboxes__label::before {
+    background: govuk-colour("white");
+  }
+
+  .govuk-list.govuk-list--bullet {
+    padding-left: 100px;
+  }
+
+  details {
+    padding-left: 80px;
+  }
+
+  .form-section {
+    margin-bottom: 25px;
+  }
+
+  .govuk-warning-text {
+    font-weight: normal;
+    background: govuk-colour("grey-3");
+    padding: 4px 25px 25px 25px;
+
+    .govuk-warning-text__icon {
+      left: 26px;
+      top: 30%;
+      margin-top: -17px;
+    }
   }
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hmcts/look-and-feel",
   "description": "One question per page apps made easy",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "main": "./src/main.js",
   "dependencies": {
     "babel-core": "^6.26.0",

templates/look-and-feel/components/fields.njk

@@ -34,7 +34,7 @@
     {%- endif %}
 
     {{ errorsFor(field) }}
-    <input class="govuk-input"
+    <input class="govuk-input govuk-input--width-20"
            id="{{ field.id }}"
            name="{{ field.id }}"
            type="text"
@@ -151,9 +151,7 @@
 
   <div class="govuk-form-group {{ errorClass(field) }} {{ groupClass }}">
     <fieldset class="govuk-fieldset" id="{{ field.id }}">
-      <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl {% if hideQuestion %}visually-hidden{% endif %}">
-          <h2 class="govuk-heading-m">{{ question }}</h2>
-      </legend>
+      <legend class="govuk-fieldset__legend govuk-fieldset__legend--m {% if hideQuestion %}visually-hidden{% endif %}">{{ question }}</legend>
       {% if hint -%}
         <span id="{{ field.id }}-hint" class="govuk-hint">
           {{ hint }}

templates/look-and-feel/layouts/question.html

@@ -12,10 +12,10 @@
 
 {% block two_thirds %}
 
-{{ header(title, size='l', fieldsValidated=fields.validated, fieldsValid=fields.valid) }}
-
 {{ errorSummary(fields) }}
 
+{{ header(title, size='l', fieldsValidated=fields.validated, fieldsValid=fields.valid) }}
+
 <form
   enctype="{{ enc_type | default('application/x-www-form-urlencoded') }}"
   action="{{ postUrl | default(path if path else url) }}"