Hint text radios fix (#88)

* Add hint text to radio button fieldsets * Add hint to radiobutton macro * Add endif * fix up a bit (Thanks Steve!)
researchops · Oct 9, 2019 · a696e23 · a696e23
1 parent 6822cad
commit a696e23
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/assets/scss/_forms.scss b/assets/scss/_forms.scss
@@ -188,7 +188,6 @@
 
   &__legend {
     border-bottom: 0;
-    margin-bottom: $space-md;
 
     * {
       margin: 0;

diff --git a/assets/scss/components/_multiple-choice.scss b/assets/scss/components/_multiple-choice.scss
@@ -57,6 +57,10 @@
   }
 }
 
+.multiple-choice--radios  {
+  margin-top: $space-md;
+}
+
 .multiple-choice--radios .multiple-choice__item {
   > input[type='radio'] {
     top: -2px;

diff --git a/routes/questions-1/questions-1.njk b/routes/questions-1/questions-1.njk
@@ -64,7 +64,7 @@
 
             {{ radioButtons('consent', { '1':'Verbally','2':'On paper'}, data.consent, 'form.consent', errors) }}
 
-            {{ radioButtons('is_business', { '1':'Yes','2':'No'}, data.is_business, 'form.is_business', {hint: 'form.is_business.desc'},  errors) }}
+            {{ radioButtons('is_business', { '1':'Yes','2':'No'}, data.is_business, 'form.is_business', errors, {hint: 'form.is_business.desc'}) }}
 
             <div class="toggle-area">
                 {{ radioButtons('recording_type', { 'on-1':'Video and audio','on-2':'Audio only','on-3':'Screen recording with audio','off-1':'Screen recording only','off-2':'No recording'}, data.recording_type, 'form.recording_type', errors) }}

diff --git a/views/macros/radios.njk b/views/macros/radios.njk
@@ -1,7 +1,12 @@
 {% macro radioButtons(key, values, value, question, errors, attributes) %}
     <div class="{{ 'has-error' if errors and errors[key] }}">
         <fieldset class="fieldset">
-            <legend class="fieldset__legend">{{ __(question) }}</legend>
+            <legend class="fieldset__legend">
+                {{ __(question) }}
+            </legend>
+                {% if attributes.hint %}
+                    <span class="form-message">{{ __(attributes.hint) }}</span>
+                {% endif %}
             <div class="multiple-choice multiple-choice--radios" id="{{ key }}">
                 {% if errors and errors[key] %}
                     {{ validationMessage(errors[key].msg, key) }}
@@ -15,4 +20,4 @@
             </div>
         </fieldset>
     </div>
-{% endmacro %}
+{% endmacro %}