@ons/design-system 70.0.8 → 70.0.10

package/components/char-check-limit/_macro.njk

@@ -1,9 +1,7 @@
 {% macro onsCharLimit(params) %}
     {% if params.variant == "check" %}
         {% set content = caller() %}
-        <span class="ons-js-char-check-input">
-            {{ content | safe }}
-        </span>
+        <span class="ons-js-char-check-input">{{ content | safe }}</span>
     {% endif %}
     <span
         id="{{ params.id }}"

package/components/checkboxes/_checkbox-macro.njk

@@ -1,28 +1,32 @@
 {% macro onsCheckbox(params) %}
     {% from "components/label/_macro.njk" import onsLabel %}
 
-    <span class="ons-checkbox{% if params.hideLabel == true %} ons-checkbox--no-label{% endif %}{{ ' ' + params.classes if params.classes else '' }}">
+    <span
+        class="ons-checkbox{{ ' ons-checkbox--no-label' if params.hideLabel == true }}{{ ' ' + params.classes if params.classes else '' }}"
+    >
         <input
             type="checkbox"
             id="{{ params.id }}"
             class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses else '' }}"
             value="{{ params.value }}"
             {% if params.disabled == true %}disabled aria-disabled="true"{% endif %}
-            {% if params.name %} name="{{ params.name }}"{% endif %}
-            {% if params.checked %} checked{% endif %}
-            {% if params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% 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 %}
-            {% if params.deselectMessage %} data-deselect-message="{{ params.deselectMessage }}"{% endif %}
-        >
+            {% if params.name %}{{ ' ' }}name="{{ params.name }}"{% endif %}
+            {% if params.checked %}{{ ' ' }}checked{% endif %}
+            {% if params.other and not params.other.open %}{{ ' ' }}aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% 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 %}
+            {% if params.deselectMessage %}{{ ' ' }}data-deselect-message="{{ params.deselectMessage }}"{% endif %}
+        />
 
-        {{ onsLabel({
-            "id": params.id + "-label",
-            "for": params.id,
-            "inputType": "checkbox",
-            "text": params.label.text,
-            "classes": "ons-checkbox__label " + params.label.classes | default(''),
-            "description": params.label.description
-        }) }}
+        {{
+            onsLabel({
+                "id": params.id + "-label",
+                "for": params.id,
+                "inputType": "checkbox",
+                "text": params.label.text,
+                "classes": "ons-checkbox__label" + (' ' + params.label.classes if params.label.classes else ''),
+                "description": params.label.description
+            })
+        }}
 
         {% if params.other %}
             {% set otherType = params.other.otherType | default('input') %}

package/components/checkboxes/_macro.njk

@@ -3,12 +3,13 @@
     {% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
     {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
     {% from "components/button/_macro.njk" import onsButton %}
-
     {% set fields %}
     {% if params.checkboxesLabel is defined %}
-        <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
+        <p class="ons-checkboxes__label{{ ' ' + params.checkboxesLabelClasses if params.checkboxesLabelClasses else '' }}">
+            {{ params.checkboxesLabel }}
+        </p>
     {% endif %}
-        {% set hasOther = false %}
+    {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
             {% if checkbox.other %}
                 {% set hasOther = true %}
@@ -52,90 +53,98 @@
                         {% endif %}
                     {% endfor %}
                 {% endif %}
-                <span class="ons-checkboxes__item{{ " ons-checkboxes__item--no-border" if params.borderless }}">
-                    {% set config = {
-                        "id": checkbox.id,
-                        "name": checkbox.name,
-                        "value": checkbox.value,
-                        "checked": childIsChecked if childIsChecked == true else checkbox.checked,
-                        "disabled": checkbox.disabled,
-                        "borderless": params.borderless,
-                        "classes": checkbox.classes | default('') + borderless | default(''),
-                        "inputClasses": exclusiveClass | default('') + otherClass | default(''),
-                        "label": {
-                            "for": checkbox.id,
-                            "text": labelHTML,
-                            "description": checkbox.label.description,
-                            "classes": checkbox.label.classes | default('')
-                        },
-                        "attributes": checkbox.attributes
-                    } %}
+                <span class="ons-checkboxes__item{{ ' ons-checkboxes__item--no-border' if params.borderless }}">
+                    {%
+                        set config = {
+                            "id": checkbox.id,
+                            "name": checkbox.name,
+                            "value": checkbox.value,
+                            "checked": childIsChecked if childIsChecked == true else checkbox.checked,
+                            "disabled": checkbox.disabled,
+                            "borderless": params.borderless,
+                            "classes": checkbox.classes | default('') + borderless | default(''),
+                            "inputClasses": exclusiveClass | default('') + otherClass | default(''),
+                            "label": {
+                                "for": checkbox.id,
+                                "text": labelHTML,
+                                "description": checkbox.label.description,
+                                "classes": checkbox.label.classes | default('')
+                            },
+                            "attributes": checkbox.attributes
+                        }
+                    %}
 
                     {% if checkbox.other %}
-                        {% set config = config | setAttributes({
-                            "other": {
-                                "open": checkbox.other.open | default(false),
-                                "id": checkbox.other.id,
-                                "name": checkbox.other.name,
-                                "type": checkbox.other.type,
-                                "otherType": checkbox.other.otherType,
-                                "options": checkbox.other.options,
-                                "width": checkbox.other.width,
-                                "classes": ("ons-input--error" if params.error and checkbox.checked else "") + checkbox.other.classes | default('') + exclusiveClass | default(''),
-                                "attributes": checkbox.other.attributes,
-                                "label": {
-                                    "text": checkbox.other.label.text
-                                },
-                                "legend": checkbox.other.legend,
-                                "legendClasses": checkbox.other.legendClasses,
-                                "value": checkbox.other.value,
-                                "autoSelect": checkbox.other.autoSelect,
-                                "selectAllChildren": checkbox.other.selectAllChildren,
-                                "checkboxes": checkbox.other.checkboxes,
-                                "radios": checkbox.other.radios
-                            }
-                        }) %}
+                        {%
+                            set config = config | setAttributes({
+                                "other": {
+                                    "open": checkbox.other.open | default(false),
+                                    "id": checkbox.other.id,
+                                    "name": checkbox.other.name,
+                                    "type": checkbox.other.type,
+                                    "otherType": checkbox.other.otherType,
+                                    "options": checkbox.other.options,
+                                    "width": checkbox.other.width,
+                                    "classes": ("ons-input--error" if params.error and checkbox.checked else "") + checkbox.other.classes | default('') + exclusiveClass | default(''),
+                                    "attributes": checkbox.other.attributes,
+                                    "label": {
+                                        "text": checkbox.other.label.text
+                                    },
+                                    "legend": checkbox.other.legend,
+                                    "legendClasses": checkbox.other.legendClasses,
+                                    "value": checkbox.other.value,
+                                    "autoSelect": checkbox.other.autoSelect,
+                                    "selectAllChildren": checkbox.other.selectAllChildren,
+                                    "checkboxes": checkbox.other.checkboxes,
+                                    "radios": checkbox.other.radios
+                                }
+                            })
+                        %}
                     {% endif %}
                     {{ onsCheckbox(config) }}
                 </span>
                 {% if not loop.last %}
-                    <br>
+                    <br />
                 {% endif %}
             {% endfor %}
         </div>
     {% endset %}
 
     {% if params.mutuallyExclusive %}
-        {% call onsMutuallyExclusive({
-            "id": params.id,
-            "classes": params.classes,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses,
-            "description": params.description,
-            "attributes": params.attributes,
-            "dontWrap": params.dontWrap,
-            "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,
+                "classes": params.classes,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses,
+                "description": params.description,
+                "attributes": params.attributes,
+                "dontWrap": params.dontWrap,
+                "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 %}
     {% else %}
-        {% call onsFieldset({
-            "id": params.id,
-            "classes": params.classes,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "description": params.description,
-            "attributes": params.attributes,
-            "dontWrap": params.dontWrap,
-            "error": params.error
-        }) %}
+        {%
+            call onsFieldset({
+                "id": params.id,
+                "classes": params.classes,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "description": params.description,
+                "attributes": params.attributes,
+                "dontWrap": params.dontWrap,
+                "error": params.error
+            })
+        %}
             {{ fields | safe }}
         {% endcall %}
     {% endif %}

package/components/checkboxes/example-checkboxes-disabled.njk

@@ -1,34 +1,34 @@
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-    {{
-        onsCheckboxes({
-            "legend": "Content type",
-            "checkboxesLabel": "Show only:",
-            "borderless": true,
-            "name": "dietary",
-            "checkboxes": [
-                {
-                    "id": "data-checkbox-disabled",
-                    "label": {
-                        "text": "Data (309)"
-                    },
-                    "value": "data"
+{{
+    onsCheckboxes({
+        "legend": "Content type",
+        "checkboxesLabel": "Show only:",
+        "borderless": true,
+        "name": "dietary",
+        "checkboxes": [
+            {
+                "id": "data-checkbox-disabled",
+                "label": {
+                    "text": "Data (309)"
                 },
-                {
-                    "id": "publications-checkbox-disabled",
-                    "label": {
-                        "text": "Publications (137)"
-                    },
-                    "value": "publications"
+                "value": "data"
+            },
+            {
+                "id": "publications-checkbox-disabled",
+                "label": {
+                    "text": "Publications (137)"
                 },
-                {
-                    "id": "areas-checkbox-disabled",
-                    "label": {
-                        "text": "Areas (0)"
-                    },
-                    "value": "areas",
-                    "disabled": true
-                }
-            ]
-        })
-    }}
+                "value": "publications"
+            },
+            {
+                "id": "areas-checkbox-disabled",
+                "label": {
+                    "text": "Areas (0)"
+                },
+                "value": "areas",
+                "disabled": true
+            }
+        ]
+    })
+}}

package/components/checkboxes/example-checkboxes-error.njk

@@ -1,4 +1,3 @@
-
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
 {{

package/components/checkboxes/example-checkboxes-with-descriptions.njk

@@ -1,11 +1,13 @@
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What type of central heating does your accommodation have?",
-    "classes": "ons-u-mt-no",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What type of central heating does your accommodation have?",
+        "classes": "ons-u-mt-no",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsCheckboxes({
             "checkboxesLabel": "Select all that apply",