@ons/design-system 70.0.8 → 70.0.9

package/components/list/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsList(params) %}
-    {% set variants = params.variants if params.variants else '' %}
+    {% set variants = params.variants if params.variants %}
     {% set listLength = params.itemsList | length %}
 
     {% if params.itemsList[0].prefix %}
@@ -8,7 +8,7 @@
         {% set otherClasses = 'ons-list--bare ons-list--suffix' %}
     {% elif params.iconPosition %}
         {% set otherClasses = 'ons-list--bare ons-list--icons' %}
-        {% set iconType = params.iconType if params.iconType else '' %}
+        {% set iconType = params.iconType if params.iconType %}
     {% else %}
         {% set otherClasses = '' %}
     {% endif %}
@@ -20,85 +20,105 @@
     {% else %}
         {% set listEl = 'ul' %}
     {% endif %}
-    <{{ listEl }} {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes %} {{ params.classes -}}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
-        {%- for item in params.itemsList -%}
-            {% set sublistClasses = item.listClasses if item.listClasses else '' %}
-            {% set sublistParams = {
+    {% set openingTag = "<" + listEl %}
+    {% set closingTag = "</" + listEl + ">" %}
+
+    {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %}
+    class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+    {%- for item in params.itemsList -%}
+        {% set sublistClasses = item.listClasses if item.listClasses %}
+        {%
+            set sublistParams = {
                 'variants': variants,
                 'itemsList': item.itemsList,
                 'classes': sublistClasses
-            } %}
-            {% if listLength > 1 or listEl == 'ul' %}
-                <li class="ons-list__item{% if item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current %} aria-current="true"{% endif %}>
+            }
+        %}
+        {% set listItem %}
+        {% set itemText = item.text %}
+            {% if item.text %}
+                {% set itemIconType = item.iconType if item.iconType else iconType %}
             {% endif %}
-                {% set itemText = item.text %}
-                    {% if item.text %}
-                    {% set itemIconType = item.iconType if item.iconType else iconType %} {% endif %}
 
-                    {# For Craft support we also support title and navigation title #}
-                    {% if item.navigationTitle %}
-                        {% set itemText = item.navigationTitle %}
-                    {% elif item.title %}
-                        {% set itemText = item.title %}
-                    {% endif %}
+            {# For Craft support we also support title and navigation title #}
+            {% if item.navigationTitle %}
+                {% set itemText = item.navigationTitle %}
+            {% elif item.title %}
+                {% set itemText = item.title %}
+            {% endif %}
 
-                    {%- if item.prefix or (params.iconPosition == 'before') -%}
-                        <span class="ons-list__prefix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
-                            {%- if item.prefix -%}
-                                {{- item.prefix -}}.
-                            {% elif params.iconPosition == 'before' %}
-                                {% from "components/icon/_macro.njk" import onsIcon %}
-                                {{-
-                                    onsIcon({
-                                        "iconType": itemIconType,
-                                        "iconSize": params.iconSize
-                                    })
-                                -}}
-                            {%- endif -%}
-                        </span>
+            {%- if item.prefix or (params.iconPosition == 'before') -%}
+                <span class="ons-list__prefix" {% if listEl != 'ol' %}aria-hidden="true"{% endif %}>
+                    {%- if item.prefix -%}
+                        {{- item.prefix -}}.
+                    {% elif params.iconPosition == 'before' %}
+                        {% from "components/icon/_macro.njk" import onsIcon %}
+                        {{-
+                            onsIcon({
+                                "iconType": itemIconType,
+                                "iconSize": params.iconSize
+                            })
+                        -}}
                     {%- endif -%}
-                    {%- if item.url and item.current != true -%}
-                        {%- if item.external -%}
-                            {% from "components/external-link/_macro.njk" import onsExternalLink %}
-                            {{
-                                onsExternalLink({
-                                    "url": item.url,
-                                    "linkText": itemText
-                                })
-                            }}
-                        {%- else -%}
-                            <a href="{{ item.url }}" class="ons-list__link{% if item.variants == 'inPageLink' %} ons-js-inpagelink{% endif %}{% if item.classes %} {{ item.classes }}{% endif %}"{% if item.target %} target="{{ item.target }}"{% endif %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
-                                {%- if item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
-                                {%- if item.target == "_blank" -%}<span class="ons-u-vh"> ({{- item.screenreaderMessage | default("opens in a new tab") -}})</span>{%- endif -%}
-                            </a>
+                </span>
+            {%- endif -%}
+            {%- if item.url and item.current != true -%}
+                {%- if item.external -%}
+                    {% from "components/external-link/_macro.njk" import onsExternalLink %}
+                    {{
+                        onsExternalLink({
+                            "url": item.url,
+                            "linkText": itemText
+                        })
+                    }}
+                {%- else -%}
+                    <a
+                        href="{{ item.url }}"
+                        class="ons-list__link{{ ' ons-js-inpagelink' if item.variants == 'inPageLink' }}{{ ' ' + item.classes if item.classes else '' }}"
+                        {% if item.target %}target="{{ item.target }}"{% endif %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+                    >
+                        {%- if item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
+                        {%- if item.target == "_blank" -%}
+                            <span class="ons-u-vh"> ({{- item.screenreaderMessage | default("opens in a new tab") -}})</span>
                         {%- endif -%}
-                    {%- else -%}
-                        {{- itemText | safe -}}
-                    {%- endif -%}
-                    {%- if item.suffix or (params.iconPosition == 'after') -%}
-                        <span class="ons-list__suffix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
-                        {%- if item.suffix -%}
-                            {{- item.suffix -}}
-                        {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
-                            {{- loop.index -}}
-                        {% elif params.iconPosition == 'after' %}
-                            {% from "components/icon/_macro.njk" import onsIcon %}
-                            {{-
-                                onsIcon({
-                                    "iconType": itemIconType,
-                                    "iconSize": params.iconSize
-                                })
-                            -}}
-                        {%- endif -%}</span>
-                    {%- endif -%}
-                {% if item.itemsList %}
-                    {# Handle nested lists with recursive call for sub layer #}
-                    {{ onsList(sublistParams) }}
-                {% endif %}
-            {% if listLength > 1 or listEl == 'ul' %}
-                </li>
+                    </a>
+                {%- endif -%}
+            {%- else -%}
+                {{- itemText | safe -}}
+            {%- endif -%}
+            {%- if item.suffix or (params.iconPosition == 'after') -%}
+                <span class="ons-list__suffix" {% if listEl != 'ol' %}aria-hidden="true"{% endif %}>
+                    {%- if item.suffix -%}
+                        {{- item.suffix -}}
+                    {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
+                        {{- loop.index -}}
+                    {% elif params.iconPosition == 'after' %}
+                        {% from "components/icon/_macro.njk" import onsIcon %}
+                        {{-
+                            onsIcon({
+                                "iconType": itemIconType,
+                                "iconSize": params.iconSize
+                            })
+                        -}}
+                    {%- endif -%}</span
+                >
+            {%- endif -%}
+            {% if item.itemsList %}
+                {# Handle nested lists with recursive call for sub layer #}
+                {{ onsList(sublistParams) }}
             {% endif %}
-        {%- endfor -%}
-    </{{ listEl }}>
+        {% endset %}
 
+        {% if listLength > 1 or listEl == 'ul' %}
+            <li
+                class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}"
+                {% if item.current %}aria-current="true"{% endif %}
+            >
+                {{- listItem | safe -}}
+            </li>
+        {% else %}
+            {{- listItem | safe -}}
+        {% endif %}
+    {%- endfor -%}
+    {{ closingTag | safe }}
 {% endmacro %}

package/components/message/_macro.njk

@@ -1,22 +1,35 @@
 {%- macro onsMessage(params) -%}
     <div class="ons-message ons-message--{{ params.variant }}">
         <div class="ons-message__head">
-            <dl class="ons-message__metadata"{% if params.id %} id="{{ params.id }}"{% endif %}>
+            <dl class="ons-message__metadata" {% if params.id %}id="{{ params.id }}"{% endif %}>
                 <div class="ons-message__sender">
                     <dt class="ons-message__term ons-u-fw-b">{{ params.fromLabel }}:</dt>
-                    <dd class="ons-message__value ons-u-fw-b"{% if params.fromId %} id="{{ params.fromId }}"{% endif %}{% if params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
+                    <dd
+                        class="ons-message__value ons-u-fw-b"
+                        {% if params.fromId %}id="{{ params.fromId }}"{% endif %}{% if params.fromName %}{{ ' ' }}name="{{ params.fromName }}"{% endif %}
+                    >
+                        {{ params.fromValue }}
+                    </dd>
                 </div>
                 <div class="ons-message__timestamp">
                     <dt class="ons-message__term ons-u-fs-s">{{ params.sentLabel }}:</dt>
-                    <dd class="ons-message__value ons-u-fs-s"{% if params.sentId %} id="{{ params.sentId }}"{% endif %}{% if params.sentName %} name="{{ params.sentName }}"{% endif %}>{{ params.sentValue }}</dd>
+                    <dd
+                        class="ons-message__value ons-u-fs-s"
+                        {% if params.sentId %}id="{{ params.sentId }}"{% endif %}{% if params.sentName %}{{ ' ' }}name="{{ params.sentName }}"{% endif %}
+                    >
+                        {{ params.sentValue }}
+                    </dd>
                 </div>
             </dl>
             {% if params.unreadLink %}
-                <a class="ons-message__unread-link"{% if params.unreadLinkId %} id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
+                <a
+                    class="ons-message__unread-link"
+                    {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %}
+                    href="{{ params.unreadLink }}"
+                    >{{ params.unreadLinkText }}</a
+                >
             {% endif %}
         </div>
-        <div class="ons-message__body"{% if params.messageID %} id="{{ params.messageID }}"{% endif %}>
-            {{ caller() }}
-        </div>
+        <div class="ons-message__body" {% if params.messageID %}id="{{ params.messageID }}"{% endif %}>{{ caller() }}</div>
     </div>
 {%- endmacro -%}

package/components/message-list/_macro.njk

@@ -1,22 +1,28 @@
 {%- macro onsMessageList(params) -%}
-<ul class="ons-message-list" aria-label="{{ params.ariaLabel | default("Message List") }}">
-  {% for message in params.messages %}
-    <li class="ons-message-item" aria-labelledby="{{ message.id }}">
-      <h3 class="ons-message-item__subject" id="{{ message.id }}">
-        <a href="{{ message.url }}" class="ons-u-fs-r--b">{{ message.subject }}</a>
-        {% if message.unread %}<span class="ons-message-item__unread ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
-      </h3>
-      <dl class="ons-message-item__metadata" aria-label="{{ params.ariaLabelMetaData | default("Message metadata") }}">
-        <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--from ons-u-vh">{{ params.fromLabel }}:</dt>
-        <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--from ons-u-fs-r--b">{{ message.fromText }}</dd>
-        <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--date ons-u-vh">{{ params.dateLabel }}:</dt>
-        <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date ons-u-fs-s">{{ message.dateText }}</dd>
-      </dl>
-      <div class="ons-message-item__body" aria-label="{{ params.ariaLabelMsg | default("Message text") }}">
-        {{ message.body | safe }}
-      </div>
-      <div class="ons-message-item__link ons-u-vh"><a href="{{ message.url }}">{{ params.hiddenReadLabel }}: {{ message.subject }}</a></div>
-    </li>
-  {% endfor %}
-</ul>
+    <ul class="ons-message-list" aria-label="{{ params.ariaLabel | default("Message List") }}">
+        {% for message in params.messages %}
+            <li class="ons-message-item" aria-labelledby="{{ message.id }}">
+                <h3 class="ons-message-item__subject" id="{{ message.id }}">
+                    <a href="{{ message.url }}" class="ons-u-fs-r--b">{{ message.subject }}</a>
+                    {% if message.unread %}<span class="ons-message-item__unread ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
+                </h3>
+                <dl class="ons-message-item__metadata" aria-label="{{ params.ariaLabelMetaData | default("Message metadata") }}">
+                    <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--from ons-u-vh">{{ params.fromLabel }}:</dt>
+                    <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--from ons-u-fs-r--b">
+                        {{ message.fromText }}
+                    </dd>
+                    <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--date ons-u-vh">{{ params.dateLabel }}:</dt>
+                    <dd class="ons-message-item__metadata-value ons-message-item__metadata-value--date ons-u-fs-s">
+                        {{ message.dateText }}
+                    </dd>
+                </dl>
+                <div class="ons-message-item__body" aria-label="{{ params.ariaLabelMsg | default("Message text") }}">
+                    {{ message.body | safe }}
+                </div>
+                <div class="ons-message-item__link ons-u-vh">
+                    <a href="{{ message.url }}">{{ params.hiddenReadLabel }}: {{ message.subject }}</a>
+                </div>
+            </li>
+        {% endfor %}
+    </ul>
 {%- endmacro -%}

package/components/modal/_macro.njk

@@ -1,24 +1,23 @@
 {% macro onsModal(params) %}
     {% set modalId = params.id | default('dialog') %}
-    <dialog class="ons-modal ons-js-modal {{ params.classes if params.classes else '' }}"
+    <dialog
+        class="ons-modal ons-js-modal {{ params.classes if params.classes }}"
         id="{{ modalId }}"
         role="dialog"
         aria-labelledby="ons-modal-title"
-        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
+        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
     >
         <div class="ons-modal__content">
-            <h2 id="ons-modal-title" class="ons-modal__title">
-                {{ params.title }}
-            </h2>
-            <div class="ons-modal__body">
-                {{ (params.body if params.body else "") | safe }}{{ caller() if caller }}
-            </div>
+            <h2 id="ons-modal-title" class="ons-modal__title">{{ params.title }}</h2>
+            <div class="ons-modal__body">{{ (params.body if params.body) | safe }}{{ caller() if caller }}</div>
             {% if params.btnText %}
                 {% from "components/button/_macro.njk" import onsButton %}
-                {{ onsButton({
-                    "text": params.btnText,
-                    "classes": "ons-js-modal-btn ons-u-mt-s"
-                }) }}
+                {{
+                    onsButton({
+                        "text": params.btnText,
+                        "classes": "ons-js-modal-btn ons-u-mt-s"
+                    })
+                }}
             {% endif %}
         </div>
     </dialog>

package/components/multiple-input-fields/_macro.njk

@@ -4,43 +4,45 @@
 {% macro onsMultipleInputFields(params) %}
     {% set fields %}
         {% if params.numberOfFields > 1 %}
-            <div class="ons-field-group">
-                {{ params.fields | safe }}
-            </div>
+            <div class="ons-field-group">{{ params.fields | safe }}</div>
         {% else %}
             {{ params.fields | safe }}
         {% endif %}
     {% endset %}
 
     {% if params.mutuallyExclusive %}
-        {% call onsMutuallyExclusive({
-            "id": params.id,
-            "legend": params.legendOrLabel,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "classes": params.classes,
-            "dontWrap": params.dontWrap if params.numberOfFields > 1 else true,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
-            "or": params.mutuallyExclusive.or,
-            "deselectMessage": params.mutuallyExclusive.deselectMessage,
-            "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
-            "error": params.error
-        }) %}
+        {%
+            call onsMutuallyExclusive({
+                "id": params.id,
+                "legend": params.legendOrLabel,
+                "legendClasses": params.legendClasses,
+                "description": params.description,
+                "classes": params.classes,
+                "dontWrap": params.dontWrap if params.numberOfFields > 1 else true,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
+                "or": params.mutuallyExclusive.or,
+                "deselectMessage": params.mutuallyExclusive.deselectMessage,
+                "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
+                "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
+                "error": params.error
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% elif params.numberOfFields > 1 %}
-        {% call onsFieldset({
-            "id": params.id,
-            "legend": params.legendOrLabel,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "classes": params.classes,
-            "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "error": params.error
-        }) %}
+        {%
+            call onsFieldset({
+                "id": params.id,
+                "legend": params.legendOrLabel,
+                "legendClasses": params.legendClasses,
+                "description": params.description,
+                "classes": params.classes,
+                "dontWrap": params.dontWrap,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "error": params.error
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% else %}

package/components/mutually-exclusive/_macro.njk

@@ -1,4 +1,3 @@
-
 {% macro onsMutuallyExclusive(params) %}
     {% from "components/fieldset/_macro.njk" import onsFieldset %}
     {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
@@ -9,17 +8,19 @@
     {% set exclusiveOptionsLength = params.exclusiveOptions | length %}
     {% set or = params.or | default("Or") %}
 
-    {% call onsFieldset({
-        "id": params.id,
-        "classes": params.classes,
-        "legend": params.legend,
-        "legendClasses": params.legendClasses,
-        "description": params.description,
-        "attributes": params.attributes,
-        "dontWrap": params.dontWrap,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle,
-        "error": params.error
-    }) %}
+    {%
+        call onsFieldset({
+            "id": params.id,
+            "classes": params.classes,
+            "legend": params.legend,
+            "legendClasses": params.legendClasses,
+            "description": params.description,
+            "attributes": params.attributes,
+            "dontWrap": params.dontWrap,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle,
+            "error": params.error
+        })
+    %}
         <div class="ons-js-mutually-exclusive ons-mutually-exclusive">
             {{ content | safe }}
             {% if params.autosuggestResults %}
@@ -59,7 +60,13 @@
                     }}
                 </p>
             {% endif %}
-            <span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="{{ params.deselectGroupAdjective }}" data-option-adjective="{{ params.deselectExclusiveOptionAdjective }}"></span>
+            <span
+                class="ons-js-exclusive-alert ons-u-vh"
+                role="alert"
+                aria-live="polite"
+                data-group-adjective="{{ params.deselectGroupAdjective }}"
+                data-option-adjective="{{ params.deselectExclusiveOptionAdjective }}"
+            ></span>
         </div>
     {% endcall %}
 {% endmacro %}

package/components/mutually-exclusive/example-mutually-exclusive-checkboxes.njk

@@ -1,10 +1,12 @@
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What type of central heating do you have?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What type of central heating do you have?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsCheckboxes({
             "id": "central-heating-answers",

package/components/mutually-exclusive/example-mutually-exclusive-date.njk

@@ -1,11 +1,13 @@
 {% from "components/date-input/_macro.njk" import onsDateInput %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "When did you leave your last paid job?",
-    "description": "<p>For example, 31 3 2018</p>",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "When did you leave your last paid job?",
+        "description": "<p>For example, 31 3 2018</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsDateInput({
             "id": "date-mutually-exclusive",

package/components/mutually-exclusive/example-mutually-exclusive-duration.njk

@@ -1,45 +1,49 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
-{% call onsQuestion({
-    "title": "How long have you lived at this address?",
-    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
-    "legendIsQuestionTitle": true
-}) %}
-    {{ onsDuration({
-        "id": "address-duration",
-        "dontWrap": true,
-        "field1": {
-            "id": "address-duration-years",
-            "name": "address-duration-years",
-            "suffix": {
-                "text": "Years",
-                "id": "address-duration-years-suffix"
-            }
-        },
-        "field2": {
-            "id": "address-duration-months",
-            "name": "address-duration-months",
-            "suffix": {
-                "text": "Months",
-                "id": "address-duration-months-suffix"
-            }
-        },
-        "mutuallyExclusive": {
-            "or": "Or",
-            "deselectMessage": "Selecting this will clear the date if one has been inputted",
-            "deselectGroupAdjective": "cleared",
-            "deselectExclusiveOptionAdjective": "deselected",
-            "exclusiveOptions": [
-                {
-                    "id": "duration-exclusive-checkbox",
-                    "name": "no-duration",
-                    "value": "no-duration",
-                    "label": {
-                        "text": "I have not moved in to this address yet"
-                    }
+{%
+    call onsQuestion({
+        "title": "How long have you lived at this address?",
+        "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
+    {{
+        onsDuration({
+            "id": "address-duration",
+            "dontWrap": true,
+            "field1": {
+                "id": "address-duration-years",
+                "name": "address-duration-years",
+                "suffix": {
+                    "text": "Years",
+                    "id": "address-duration-years-suffix"
                 }
-            ]
-        }
-    }) }}
+            },
+            "field2": {
+                "id": "address-duration-months",
+                "name": "address-duration-months",
+                "suffix": {
+                    "text": "Months",
+                    "id": "address-duration-months-suffix"
+                }
+            },
+            "mutuallyExclusive": {
+                "or": "Or",
+                "deselectMessage": "Selecting this will clear the date if one has been inputted",
+                "deselectGroupAdjective": "cleared",
+                "deselectExclusiveOptionAdjective": "deselected",
+                "exclusiveOptions": [
+                    {
+                        "id": "duration-exclusive-checkbox",
+                        "name": "no-duration",
+                        "value": "no-duration",
+                        "label": {
+                            "text": "I have not moved in to this address yet"
+                        }
+                    }
+                ]
+            }
+        })
+    }}
 {% endcall %}

package/components/mutually-exclusive/example-mutually-exclusive-email.njk

@@ -1,11 +1,13 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "Get a confirmation email",
-    "description": "<p>Enter your email address if you would like to be sent confirmation that you have completed your survey</p>",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "Get a confirmation email",
+        "description": "<p>Enter your email address if you would like to be sent confirmation that you have completed your survey</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsInput({
             "id": "email-example-mutually-exclusive",

package/components/mutually-exclusive/example-mutually-exclusive-multiple-options.njk

@@ -1,10 +1,12 @@
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What type of central heating do you have?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What type of central heating do you have?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsCheckboxes({
             "id": "central-heating-answers",