@ons/design-system 55.1.0 → 56.0.0

package/components/button/_macro.spec.js

@@ -57,33 +57,33 @@ describe('macro: button', () => {
     expect($('.ons-btn').hasClass('ons-btn--variant-b')).toBe(true);
   });
 
-  it('has download variant style class when `buttonStyle` is `download`', () => {
+  it('has download variant style class when `variants` contains `download`', () => {
     const $ = cheerio.load(
       renderComponent('button', {
         url: 'http://example.com',
-        buttonStyle: 'download',
+        variants: 'download',
       }),
     );
 
     expect($('.ons-btn').hasClass('ons-btn--download')).toBe(true);
   });
 
-  it('has `download` icon when `buttonStyle` is "download"', () => {
+  it('has `download` icon when `variants` contains "download"', () => {
     const faker = templateFaker();
     const iconsSpy = faker.spy('icons');
 
     faker.renderComponent('button', {
       url: 'http://example.com',
-      buttonStyle: 'download',
+      variants: 'download',
     });
 
     expect(iconsSpy.occurrences[0].iconType).toBe('download');
   });
 
-  it('has provided variant style classes when `buttonStyle` is "print"', () => {
+  it('has provided variant style classes when `variants` contains "print"', () => {
     const $ = cheerio.load(
       renderComponent('button', {
-        buttonStyle: 'print',
+        variants: 'print',
       }),
     );
 
@@ -92,22 +92,22 @@ describe('macro: button', () => {
     expect($('.ons-btn').hasClass('ons-js-print-btn')).toBe(true);
   });
 
-  it('has `print` icon when `buttonStyle` is "print"', () => {
+  it('has `print` icon when `variants` contains "print"', () => {
     const faker = templateFaker();
     const iconsSpy = faker.spy('icons');
 
     faker.renderComponent('button', {
       url: 'http://example.com',
-      buttonStyle: 'print',
+      variants: 'print',
     });
 
     expect(iconsSpy.occurrences[0].iconType).toBe('print');
   });
 
-  it('has provided variant style classes when `submitType` is "loader"', () => {
+  it('has provided variant style classes when `variants` contains "loader"', () => {
     const $ = cheerio.load(
       renderComponent('button', {
-        submitType: 'loader',
+        variants: 'loader',
       }),
     );
 
@@ -116,32 +116,32 @@ describe('macro: button', () => {
     expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
   });
 
-  it('has `loader` icon when `submitType` is "loader"', () => {
+  it('has `loader` icon when `variants` contains "loader"', () => {
     const faker = templateFaker();
     const iconsSpy = faker.spy('icons');
 
     faker.renderComponent('button', {
-      submitType: 'loader',
+      variants: 'loader',
     });
 
     expect(iconsSpy.occurrences[0].iconType).toBe('loader');
   });
 
-  it('has `chevron` icon when `buttonStyle` is "mobile"', () => {
+  it('has `chevron` icon when `variants` contains "mobile"', () => {
     const faker = templateFaker();
     const iconsSpy = faker.spy('icons');
 
     faker.renderComponent('button', {
-      buttonStyle: 'mobile',
+      variants: 'mobile',
     });
 
     expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
   });
 
-  it('has provided variant style classes when `submitType` is "timer"', () => {
+  it('has provided variant style classes when `variants` contains "timer"', () => {
     const $ = cheerio.load(
       renderComponent('button', {
-        submitType: 'timer',
+        variants: 'timer',
       }),
     );
 
@@ -259,11 +259,11 @@ describe('macro: button', () => {
       expect($('button').attr('type')).toBe('special-type');
     });
 
-    it('has the provided `type` attribute even if `buttonStyle` is provided', () => {
+    it('has the provided `type` attribute even if print variant is provided', () => {
       const $ = cheerio.load(
         renderComponent('button', {
           type: 'special-type',
-          buttonStyle: 'print',
+          variants: 'print',
         }),
       );
 
@@ -276,10 +276,10 @@ describe('macro: button', () => {
       expect($('button').attr('type')).toBe('submit');
     });
 
-    it('defaults to being a "button" when `type` is not provided and `buttonStyle` is set to "print"', () => {
+    it('defaults to being a "button" when `type` is not provided and `variants` contains "print"', () => {
       const $ = cheerio.load(
         renderComponent('button', {
-          buttonStyle: 'print',
+          variants: 'print',
         }),
       );
 
@@ -422,20 +422,20 @@ describe('macro: button', () => {
       expect($('.ons-btn__new-window-description').text()).toBe(' (custom opens in a new window text)');
     });
 
-    it('has the `download` attribute when `buttonStyle` is "download"', () => {
+    it('has the `download` attribute when `variants` contains "download"', () => {
       const $ = cheerio.load(
         renderComponent('button', {
-          buttonStyle: 'download',
+          variants: 'download',
         }),
       );
 
       expect($('.ons-btn').attr('download')).toBeDefined();
     });
 
-    it('does not have the `download` attribute when `buttonStyle` is "download" and `removeDownloadAttribute` is `true`', () => {
+    it('does not have the `download` attribute when `variants` contains "download" and `removeDownloadAttribute` is `true`', () => {
       const $ = cheerio.load(
         renderComponent('button', {
-          buttonStyle: 'download',
+          variants: 'download',
           removeDownloadAttribute: true,
         }),
       );

package/components/button/button.spec.js

@@ -56,7 +56,7 @@ describe('script: button', () => {
         renderComponent('button', {
           id: 'test-button',
           text: 'Submit',
-          submitType: 'loader',
+          variants: 'loader',
         }),
       );
 
@@ -72,7 +72,7 @@ describe('script: button', () => {
         renderComponent('button', {
           id: 'test-button',
           text: 'Submit',
-          submitType: 'loader',
+          variants: 'loader',
         }),
       );
 
@@ -86,7 +86,7 @@ describe('script: button', () => {
         renderComponent('button', {
           id: 'test-button',
           text: 'Submit',
-          submitType: 'loader',
+          variants: 'loader',
         }),
       );
 
@@ -104,7 +104,7 @@ describe('script: button', () => {
           ${renderComponent('button', {
             id: 'test-button',
             text: 'Submit',
-            submitType: 'loader',
+            variants: 'loader',
           })}
         </form>
       `,
@@ -124,7 +124,7 @@ describe('script: button', () => {
           ${renderComponent('button', {
             id: 'test-button',
             text: 'Submit',
-            submitType: 'loader',
+            variants: 'loader',
           })}
         </form>
       `,
@@ -142,7 +142,7 @@ describe('script: button', () => {
           ${renderComponent('button', {
             id: 'test-button',
             text: 'Submit',
-            submitType: 'loader',
+            variants: 'loader',
           })}
         </form>
       `,
@@ -161,7 +161,7 @@ describe('script: button', () => {
         '/test',
         renderComponent('button', {
           id: 'test-button',
-          submitType: 'timer',
+          variants: 'timer',
           text: 'Submit',
         }),
       );
@@ -186,7 +186,7 @@ describe('script: button', () => {
         '/test',
         renderComponent('button', {
           id: 'test-button',
-          submitType: 'timer',
+          variants: 'timer',
           text: 'Submit',
         }),
       );
@@ -213,7 +213,7 @@ describe('script: button', () => {
         <form>
           ${renderComponent('button', {
             id: 'test-button',
-            submitType: 'timer',
+            variants: 'timer',
             text: 'Submit',
           })}
         </form>
@@ -242,7 +242,7 @@ describe('script: button', () => {
         <form>
           ${renderComponent('button', {
             id: 'test-button',
-            submitType: 'timer',
+            variants: 'timer',
             text: 'Submit',
           })}
         </form>
@@ -273,7 +273,7 @@ describe('script: button', () => {
           id: 'test-button',
           type: 'button',
           text: 'Print this page',
-          buttonStyle: 'print',
+          variants: 'print',
         }),
       );
 

package/components/call-to-action/_macro.njk

@@ -5,7 +5,7 @@
             <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
                     <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">{{ params.headingText }}</h2>
-                    {% if params.paragraphText is defined and params.paragraphText %}
+                    {% if params.paragraphText %}
                         <p class="ons-call-to-action__text ons-u-di">{{ params.paragraphText }}</p>
                     {% endif %}
                 </div>

package/components/card/_macro.njk

@@ -6,31 +6,31 @@
 
   <div class="ons-card" aria-describedBy="{{ params.textId }}">
 
-    {%- if params.image is defined and params.image -%}
-      {%- if params.url is defined and params.url -%}
+    {%- if params.image -%}
+      {%- if params.url -%}
         <a href="{{ params.url }}" class="ons-card__link ons-u-db">
       {%- endif -%}
-          {% if params.image.smallSrc is defined and params.image.smallSrc %}
-            <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc is defined and params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-          {% elif params.image == true or params.image.placeholderURL is defined %}
-            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+          {% if params.image.smallSrc %}
+            <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+          {% elif params.image == true or params.image.placeholderURL %}
+            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
           {% endif %}
 
           <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
             {{ params.title }}
           </h{{ titleSize }}>
-      {%- if params.url is defined and params.url -%}
+      {%- if params.url -%}
         </a>
       {%- endif -%}
 
     {%- else -%}
 
       <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}">
-        {%- if params.url is defined and params.url -%}
+        {%- if params.url -%}
           <a class="ons-card__link" href="{{ params.url }}">
         {%- endif -%}
           {{ params.title }}
-        {%- if params.url is defined and params.url -%}
+        {%- if params.url -%}
           </a>
         {%- endif -%}
       </h{{ titleSize }}>
@@ -39,7 +39,7 @@
 
     <p id="{{ params.textId }}">{{ params.text }}</p>
 
-    {% if params.itemsList is defined and params.itemsList -%}
+    {% if params.itemsList -%}
       {{
           onsList({
               "variants": 'dashed',

package/components/checkboxes/_checkbox-macro.njk

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

package/components/checkboxes/_macro.njk

@@ -8,13 +8,13 @@
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
-            {% if checkbox.other is defined and checkbox.other %}
+            {% if checkbox.other %}
                 {% set hasOther = true %}
             {% endif %}
         {% endfor %}
-        {% if hasOther == false and params.autoSelect is defined and params.autoSelect and params.autoSelect.selectAllText is defined %}
+        {% if hasOther == false and params.autoSelect and params.autoSelect.selectAllText %}
             {% set btnClasses = ['small', 'secondary'] %}
-            {% if params.borderlessParent is defined and params.borderlessParent == false %}
+            {% if params.borderlessParent == false %}
                 {% set btnClasses = ['small', 'secondary', 'ghost-dark'] %}
             {% endif %}
             {{
@@ -33,19 +33,19 @@
             {% for checkbox in params.checkboxes %}
                 {% set childIsChecked = false %}
                 {% set labelHTML = checkbox.label.text %}
-                {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+                {% if params.mutuallyExclusive %}
                     {% set exclusiveClass = ' ons-js-exclusive-group-item' %}
                 {% endif %}
-                {% if params.borderless is defined and params.borderless %}
+                {% if params.borderless %}
                     {% set borderless = " ons-checkbox--no-border" %}
                 {% endif %}
-                {% if checkbox.other is defined and checkbox.other %}
+                {% if checkbox.other %}
                     {% set otherClass = " ons-js-other" %}
-                    {% if checkbox.other.selectAllChildren is defined and checkbox.other.selectAllChildren == true %}
+                    {% if checkbox.other.selectAllChildren == true %}
                         {% set otherClass = otherClass + " ons-js-select-all-children" %}
                     {% endif %}
                     {% for otherCheckbox in checkbox.other.checkboxes %}
-                        {% if otherCheckbox.checked is defined and otherCheckbox.checked %}
+                        {% if otherCheckbox.checked %}
                             {% set childIsChecked = true %}
                         {% endif %}
                     {% endfor %}
@@ -69,7 +69,7 @@
                         "attributes": checkbox.attributes
                     } %}
 
-                    {% if checkbox.other is defined and checkbox.other %}
+                    {% if checkbox.other %}
                         {% set config = config | setAttributes({
                             "other": {
                                 "open": checkbox.other.open | default(false),
@@ -103,7 +103,7 @@
         </div>
     {% endset %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.id,
             "classes": params.classes,

package/components/checkboxes/checkbox-with-fieldset.js

@@ -1,14 +1,15 @@
 export default class CheckboxWithFieldset {
-  constructor(fieldset, inputs) {
+  constructor(fieldset, checkboxes) {
     this.fieldset = fieldset;
-    this.inputs = inputs;
+    this.checkboxes = checkboxes;
+    this.fieldsetParent = fieldset.closest('.ons-checkbox');
+    this.selectAllChildrenInput = this.fieldsetParent.querySelector('.ons-js-select-all-children');
     this.childInputs = [...this.fieldset.querySelectorAll('input')];
-    this.selectAllChildrenInput = this.inputs.find(input => input.classList.contains('ons-js-select-all-children'));
 
     if (this.selectAllChildrenInput) {
       this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
     } else {
-      this.inputs.forEach(input => input.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
+      this.checkboxes.forEach(checkbox => checkbox.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
     }
   }
 
@@ -19,7 +20,7 @@ export default class CheckboxWithFieldset {
   }
 
   uncheckChildInputsOnDeselect() {
-    const isOther = this.inputs.find(input => input.classList.contains('ons-js-other'));
+    const isOther = this.checkboxes.find(checkbox => checkbox.classList.contains('ons-js-other'));
     if (isOther && isOther.checked === false) {
       this.childInputs.forEach(input => {
         input.checked = false;

package/components/checkboxes/checkboxes.dom.js

@@ -15,16 +15,13 @@ domready(async () => {
       new CheckCheckbox(checkboxInput, openOther);
     }
 
-    const other = document.querySelector('.ons-js-other');
-    if (other) {
-      const selectAllChildrenInput = other.classList.contains('ons-js-select-all-children');
-      const otherFieldset = other.parentNode.querySelector('.ons-js-other-fieldset');
+    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset')];
+    if (otherFieldsets) {
+      const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
 
-      if (otherFieldset) {
-        const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
-
-        new CheckboxWithInnerFieldset(otherFieldset, checkboxes, selectAllChildrenInput);
-      }
+      otherFieldsets.forEach(otherFieldset => {
+        new CheckboxWithInnerFieldset(otherFieldset, checkboxes);
+      });
     }
 
     const autoSelectButtons = [...document.querySelectorAll('.ons-js-auto-selector')];

package/components/code-highlight/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsCodeHighlight(params) %}
     <pre class="ons-patternlib-example__pre">{#
-        #}<code class="ons-patternlib-example__code ons-language-{{ params.language if params.language and params.language is defined else 'markup' }}">{{ params.code }}</code>{#
+        #}<code class="ons-patternlib-example__code ons-language-{{ params.language if params.language else 'markup' }}">{{ params.code }}</code>{#
     #}</pre>
 {% endmacro %}

package/components/collapsible/_macro.njk

@@ -1,15 +1,15 @@
 {% macro onsCollapsible(params) %}
     <details
         id="{{ params.id }}"
-        class="ons-collapsible ons-js-collapsible{% if params.isAccordion is defined and params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
-        {% if params.group is defined and params.group %} data-group="{{ params.group }}"{% endif %}
-        {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
-        {% if params.saveState is defined and params.saveState %} data-save-state="true"{% endif %}
-        {% if params.open is defined and params.open %} data-open="true"{% endif %}
+        class="ons-collapsible ons-js-collapsible{% if params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
+        {% if params.group %} data-group="{{ params.group }}"{% 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.saveState %} data-save-state="true"{% endif %}
+        {% if params.open %} data-open="true"{% endif %}
     >
         <summary
             class="ons-collapsible__heading ons-js-collapsible-heading"
-            {% if params.headingAttributes is defined and params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
                 {% set titleTag = params.titleTag | default("h2") %}
                 <{{ titleTag }} class="ons-collapsible__title">{{ params.title }}</{{ titleTag }}>
@@ -22,7 +22,7 @@
                     }}</span>
         </summary>
         <div id="{{ params.id }}-content" class="ons-collapsible__content ons-js-collapsible-content"
-            {% if params.contentAttributes is defined and params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
             {{ params.content | safe }}{{ caller() if caller }}
         </div>

package/components/date-input/_macro.njk

@@ -21,7 +21,7 @@
     {%- endif -%}
 
     {% set fields %}
-        {% if params.day is defined and params.day %}
+        {% if params.day %}
             {{ onsInput({
                 "id": params.id + "-day",
                 "type": "number",
@@ -41,7 +41,7 @@
             }) }}
         {% endif %}
 
-        {% if params.month is defined and params.month %}
+        {% if params.month %}
             {{ onsInput({
                 "id": params.id + "-month",
                 "type": "number",
@@ -61,7 +61,7 @@
             }) }}
         {% endif %}
 
-        {% if params.year is defined and params.year %}
+        {% if params.year %}
             {{ onsInput({
                 "id": params.id + "-year",
                 "type": "number",
@@ -90,7 +90,7 @@
         {% endset %}
     {% endif %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.id,
             "legend": params.legendOrLabel,
@@ -109,7 +109,7 @@
             {{ fields | safe }}
         {% endcall %}
     {% elif numberOfFields == 1 %}
-        {% if params.error is defined and params.error %}
+        {% if params.error %}
             {% call onsError(params.error) %}
                 {{ fields | safe }}
             {% endcall %}