Fix layout of mutually exclusive when its wrapped in a question compo…

…nent (#424) * Fix layout of mutually exclusive when its wrapped in a question component * Fix mutually exclusive field wrapping when in a question
ONSdigital · Jun 13, 2019 · bc242a9 · bc242a9
1 parent c220867
commit bc242a9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/src/components/checkboxes/_macro.njk b/src/components/checkboxes/_macro.njk
@@ -4,14 +4,14 @@
 
     {% call onsField({
         "id": params.id,
-        "legend": params.legend,
         "description": params.description,
         "classes": params.classes,
         "mutuallyExclusive": params.mutuallyExclusive,
-        "legendClasses": params.legendClasses
+        "legendClasses": params.legendClasses,
+        "noField": params.noField
     }) %}
-        <div class="field__label">{{ params.checkboxesLabel }}</div>
-        <div class="field__items">
+        <span class="field__label">{{ params.checkboxesLabel }}</span>
+        <span class="field__items">
             {% for checkbox in params.checkboxes %}
                 {% set labelHTML = checkbox.label.text %}
                 {% if params.mutuallyExclusive %}  
@@ -54,6 +54,6 @@
                     <br>
                 {% endif %}
             {% endfor %}
-        </div>
+        </span>
     {% endcall %}
 {% endmacro %}
diff --git a/src/components/field/_field.scss b/src/components/field/_field.scss
@@ -20,13 +20,16 @@
     margin-top: -1rem;
   }
 
+  &__items {
+    display: block;
+  }
+
   &__item {
     display: inline-block;
     position: relative;
   }
 
-  & > &,
-  &__items > & {
+  *:not(.field__group) > & {
     &__item {
       margin: 0 0 0.5rem;
       width: 100%;

diff --git a/src/components/field/_macro.njk b/src/components/field/_macro.njk
@@ -43,16 +43,17 @@
             </fieldset>
         {% endif %}
     {% else %}
+        {% set tag = "div" if params.mutuallyExclusive else "p" %}
         {% if not params.noField %}
-            <p{% if params.id %} id="{{ params.id }}"{% endif %} class="field{% if params.mutuallyExclusive %} js-mutually-exclusive{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}">
+            <{{ tag }}{% if params.id %} id="{{ params.id }}"{% endif %} class="field{% if params.mutuallyExclusive %} js-mutually-exclusive{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}">
         {% endif %}
             {% if params.description %}
-                <div class="field__description">{{ params.description }}</div>
+                <span class="field__description">{{ params.description }}</span>
             {% endif %}
             {{ caller() }}
             {{ mutuallyExclusive | safe }}
         {% if not params.noField %}
-            </p>
+            </{{ tag }}>
         {% endif %}
     {% endif %}
 {% endmacro %}