From 133637dce50268d09adcc8d6960c788eaa56cb90 Mon Sep 17 00:00:00 2001
From: "Paul D. Waite" <paul@pauldwaite.co.uk>
Date: Mon, 25 Sep 2017 11:53:30 +0100
Subject: [PATCH] Changed error layout for single-question form pages, and
 tweaked form-group-error styles to support this HTML use.

---
 app/views/snippets/form_error_radio_h1_legend.html | 6 +++++-
 app/views/snippets/form_error_text_h1_label.html   | 6 +++++-
 assets/sass/elements/forms/_form-validation.scss   | 1 +
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/views/snippets/form_error_radio_h1_legend.html b/app/views/snippets/form_error_radio_h1_legend.html
index 4c249675b..2a2570d19 100644
--- a/app/views/snippets/form_error_radio_h1_legend.html
+++ b/app/views/snippets/form_error_radio_h1_legend.html
@@ -16,7 +16,7 @@ <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
 </div>
 {% endif %}
 
-<div class="form-group {% if error %} form-group-error{% endif %}">
+<div class="form-group">
   <fieldset class="with-heading-large">
 
     <legend {% if error %} id="example-personal-details"{% endif %}>
@@ -24,16 +24,19 @@ <h1 class="heading-large">
         Are your personal details correct and up-to-date?
       </h1>
 
+      {% if error %}<div class="form-group-error">{% endif %}
       <span class="form-hint">Look at your name, signature and other details.</span>
 
       {% if error %}
         <span class="error-message">
           Error message about personal details goes here
         </span>
+      </div>
       {% endif %}
 
     </legend>
 
+    {% if error %}<div class="form-group-error">{% endif %}
     <div class="multiple-choice">
       <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
       <label for="personal_details_yes">Yes, my personal details are correct</label>
@@ -43,6 +46,7 @@ <h1 class="heading-large">
       <input id="personal_details_no" type="radio" name="personalDetails" value="No">
       <label for="personal_details_no">No, some details are wrong or have changed</label>
     </div>
+    {% if error %}</div>{% endif %}
 
   </fieldset>
 </div>
diff --git a/app/views/snippets/form_error_text_h1_label.html b/app/views/snippets/form_error_text_h1_label.html
index ff5377c31..87780084e 100644
--- a/app/views/snippets/form_error_text_h1_label.html
+++ b/app/views/snippets/form_error_text_h1_label.html
@@ -17,22 +17,26 @@ <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
 {% endif %}
 
 
-<div class="form-group {% if error %} form-group-error{% endif %}">
+<div class="form-group">
     <h1>
       <label for="name"{% if error %} id="example-name"{% endif %}>
         <span class="heading-large">What is your name?</span>
 
+        {% if error %}<div class="form-group-error">{% endif %}
         <span class="form-hint">You can enter your full name</span>
 
         {% if error %}
           <span class="error-message">
             Error message about name goes here
           </span>
+        </div>
         {% endif %}
       </label>
     </h1>
 
+    {% if error %}<div class="form-group-error">{% endif %}
     <input type="text" class="form-control{% if error %} form-control-error{% endif %}" id="name" name="name" value="">
+    {% if error %}</div>{% endif %}
 </div>
 
 <input class="button" type="submit" value="Continue">
diff --git a/assets/sass/elements/forms/_form-validation.scss b/assets/sass/elements/forms/_form-validation.scss
index 742d1f8ba..e372075e0 100644
--- a/assets/sass/elements/forms/_form-validation.scss
+++ b/assets/sass/elements/forms/_form-validation.scss
@@ -3,6 +3,7 @@
 
 // Use .form-group-error to add a red border to the left of a .form-group
 .form-group-error {
+  @extend %contain-floats;
   margin-right: 15px;
   border-left: 4px solid $error-colour;
   padding-left: 10px;