@ons/design-system 68.0.0 → 70.0.0

package/components/input/_macro.njk

@@ -68,7 +68,6 @@
                 "accessiblePlaceholder": params.accessiblePlaceholder,
                 "inline": params.label.inline
             }) }}
-
         {% endif %}
 
         {% if params.prefix or params.suffix %}
@@ -103,16 +102,16 @@
         {% elif params.searchButton %}
             <span class="ons-grid--flex  ons-input_search-button{% if params.label.description %} ons-input--with-text-description{% endif %}"> 
                 {% if params.accessiblePlaceholder %}
-                {{ onsLabel({
-                    "for": params.id,
-                    "id": params.label.id,
-                    "text": params.label.text,
-                    "classes": params.label.classes,
-                    "attributes": params.label.attributes,
-                    "accessiblePlaceholder": params.accessiblePlaceholder,
-                    "inline": params.label.inline
-                }) }}
-           {% endif %}
+                    {{ onsLabel({
+                        "for": params.id,
+                        "id": params.label.id,
+                        "text": params.label.text,
+                        "classes": params.label.classes,
+                        "attributes": params.label.attributes,
+                        "accessiblePlaceholder": params.accessiblePlaceholder,
+                        "inline": params.label.inline
+                    }) }}
+                {% endif %}
 
                 {{ input | safe }}
                 {%- set buttonLabel -%}
@@ -138,23 +137,23 @@
             </span>
         {% else %}
             {% if params.accessiblePlaceholder %}
-            <span class="ons-grid--flex {% if params.label.description %} ons-input--with-text-description{% endif %}">
+                <span class="ons-grid--flex {% if params.label.description %} ons-input--with-text-description{% endif %}">
                 {% if params.accessiblePlaceholder %}
                     {{ onsLabel({
-                    "for": params.id,
-                    "id": params.label.id,
-                    "text": params.label.text,
-                    "classes": params.label.classes,
-                    "attributes": params.label.attributes,
-                    "accessiblePlaceholder": params.accessiblePlaceholder,
-                    "inline": params.label.inline
-                }) }}
+                        "for": params.id,
+                        "id": params.label.id,
+                        "text": params.label.text,
+                        "classes": params.label.classes,
+                        "attributes": params.label.attributes,
+                        "accessiblePlaceholder": params.accessiblePlaceholder,
+                        "inline": params.label.inline
+                    }) }}
                 {% endif %}
             {% endif %}
             {{ input | safe }}
             {% if params.accessiblePlaceholder %}
-            </span>
-         {% endif %}
+                </span>
+            {% endif %}
         {% endif %}
     {% endset %}
 
@@ -163,7 +162,7 @@
             {% call onsCharLimit({
                 "id": params.id ~ "-check",
                 "limit": params.charCheckLimit.limit,
-                "type": "check",
+                "variant": "check",
                 "charCountSingular": params.charCheckLimit.charCountSingular,
                 "charCountPlural": params.charCheckLimit.charCountPlural,
                 "charCountOverLimitSingular": params.charCheckLimit.charCountOverLimitSingular,

package/components/input/_macro.spec.js

@@ -617,7 +617,7 @@ describe('macro: input', () => {
       expect(charCheckLimitSpy.occurrences).toContainEqual({
         id: 'example-id-check',
         limit: 200,
-        type: 'check',
+        variant: 'check',
         charCountSingular: 'You have {x} character remaining',
         charCountPlural: 'You have {x} characters remaining',
         charCountOverLimitSingular: '{x} character too many',

package/components/input/character-check.dom.js

@@ -6,7 +6,7 @@ async function initialise() {
   if (checkedInputs.length) {
     const CharCheck = (await import('../char-check-limit/character-check')).default;
 
-    checkedInputs.forEach(input => new CharCheck(input));
+    checkedInputs.forEach((input) => new CharCheck(input));
   }
 }
 

package/components/input/input.spec.js

@@ -1,7 +1,4 @@
-import * as cheerio from 'cheerio';
-
-import axe from '../../tests/helpers/axe';
-import { renderComponent, templateFaker, setTestPage } from '../../tests/helpers/rendering';
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_INPUT_MINIMAL = {
   id: 'example-id',

package/components/label/_label.scss

@@ -19,6 +19,7 @@
   &--placeholder {
     font-size: 1rem;
     font-weight: $font-weight-regular;
+    color: var(--ons-color-text-placeholder);
     left: 10px;
     position: absolute;
     top: 6px;

package/components/label/_macro.njk

@@ -17,7 +17,7 @@
         </span>
     {%- endset %}
     {%- if params.description and params.accessiblePlaceholder -%}
-        {{- description | safe -}}    
+        {{- description | safe -}}
     {%- else -%}
     <label
         class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
@@ -43,5 +43,5 @@
                 {{- description | safe -}}
             {%- endif -%}
         {%- endif %}
-    {%- endif -%} 
+    {%- endif -%}
 {% endmacro %}

package/components/label/_macro.spec.js

@@ -119,12 +119,7 @@ describe('macro: label', () => {
   ])('has the provided `text` %s', (_, params) => {
     const $ = cheerio.load(renderComponent('label', params));
 
-    expect(
-      $('.ons-label')
-        .text()
-        .trim()
-        .startsWith('Example label text'),
-    ).toBe(true);
+    expect($('.ons-label').text().trim().startsWith('Example label text')).toBe(true);
   });
 
   describe('description element', () => {
@@ -147,11 +142,7 @@ describe('macro: label', () => {
     ])('has the provided `description` text %s', (_, params) => {
       const $ = cheerio.load(renderComponent('label', params));
 
-      expect(
-        $('.ons-label__description')
-          .text()
-          .trim(),
-      ).toBe('An example description');
+      expect($('.ons-label__description').text().trim()).toBe('An example description');
     });
 
     it('has a default `id` attribute of `description-hint`', () => {
@@ -192,7 +183,7 @@ describe('macro: label', () => {
       expect($('.ons-label__description').hasClass('ons-input--with-description')).toBe(false);
     });
 
-    it.each([['checkbox'], ['radio']])('has the description in an `aria-hidden` element when "%s" `inputType` is provided', inputType => {
+    it.each([['checkbox'], ['radio']])('has the description in an `aria-hidden` element when "%s" `inputType` is provided', (inputType) => {
       const $ = cheerio.load(
         renderComponent('label', {
           ...EXAMPLE_LABEL_WITH_DESCRIPTION,
@@ -205,7 +196,7 @@ describe('macro: label', () => {
 
     it.each([['checkbox'], ['radio']])(
       'has a duplicate description in a visually hidden element when "%s" `inputType` is provided',
-      inputType => {
+      (inputType) => {
         const $ = cheerio.load(
           renderComponent('label', {
             ...EXAMPLE_LABEL_WITH_DESCRIPTION,

package/components/list/_macro.spec.js

@@ -465,11 +465,7 @@ describe('macro: list', () => {
         }),
       );
 
-      expect(
-        $('.ons-list__prefix')
-          .text()
-          .trim(),
-      ).toBe('[PREFIX].');
+      expect($('.ons-list__prefix').text().trim()).toBe('[PREFIX].');
     });
 
     it('marks `prefix` content as visually hidden when list element is not <ol>', () => {
@@ -521,11 +517,7 @@ describe('macro: list', () => {
         }),
       );
 
-      expect(
-        $('.ons-list__suffix')
-          .text()
-          .trim(),
-      ).toBe('[SUFFIX]');
+      expect($('.ons-list__suffix').text().trim()).toBe('[SUFFIX]');
     });
 
     it('marks `suffix` content as visually hidden when list element is not <ol>', () => {
@@ -565,7 +557,7 @@ describe('macro: list', () => {
   });
 
   describe('icons', () => {
-    it.each([['before'], ['after']])('renders default icon on list items when icon is positioned %s', iconPosition => {
+    it.each([['before'], ['after']])('renders default icon on list items when icon is positioned %s', (iconPosition) => {
       const faker = templateFaker();
       const iconsSpy = faker.spy('icon');
 
@@ -580,7 +572,7 @@ describe('macro: list', () => {
       expect(iconsSpy.occurrences[1]).toEqual({ iconType: 'check', iconSize: 'xl' });
     });
 
-    it.each([['before'], ['after']])('renders a custom icon on specific list items when icon is positioned %s', iconPosition => {
+    it.each([['before'], ['after']])('renders a custom icon on specific list items when icon is positioned %s', (iconPosition) => {
       const faker = templateFaker();
       const iconsSpy = faker.spy('icon');
 

package/components/message/_macro.njk

@@ -1,22 +1,22 @@
 {%- macro onsMessage(params) -%}
-  <div class="ons-message ons-message--{{ params.type }}">
-    <div class="ons-message__head">
-      <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>
+    <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 %}>
+                <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>
+                </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>
+                </div>
+            </dl>
+            {% if params.unreadLink %}
+                <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__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>
+        <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %}>
+            {{ caller() }}
         </div>
-      </dl>
-      {% if params.unreadLink %}
-          <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>
 {%- endmacro -%}

package/components/message/_macro.spec.js

@@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_MESSAGE_MINIMAL = {
-  type: 'sent',
+  variant: 'sent',
   fromLabel: 'From',
   fromValue: 'Example Sender',
   sentLabel: 'Date sent',
@@ -35,13 +35,13 @@ describe('macro: message', () => {
   it.each([
     ['sent', 'ons-message--sent'],
     ['received', 'ons-message--received'],
-  ])('has appropriate class for provided `type` (%s -> %s)', (type, expectedClass) => {
+  ])('has appropriate class for provided `variant` (%s -> %s)', (variant, expectedClass) => {
     const $ = cheerio.load(
       renderComponent(
         'message',
         {
           ...EXAMPLE_MESSAGE_MINIMAL,
-          type,
+          variant,
         },
         ['Message content...'],
       ),
@@ -59,21 +59,13 @@ describe('macro: message', () => {
   it('has the provided `fromLabel`', () => {
     const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE_MINIMAL, ['Message content...']));
 
-    expect(
-      $('.ons-message__sender .ons-message__term')
-        .text()
-        .trim(),
-    ).toBe('From:');
+    expect($('.ons-message__sender .ons-message__term').text().trim()).toBe('From:');
   });
 
   it('has the provided `fromValue`', () => {
     const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE_MINIMAL, ['Message content...']));
 
-    expect(
-      $('.ons-message__sender .ons-message__value')
-        .text()
-        .trim(),
-    ).toBe('Example Sender');
+    expect($('.ons-message__sender .ons-message__value').text().trim()).toBe('Example Sender');
   });
 
   it('has the provided `fromId`', () => {
@@ -85,21 +77,13 @@ describe('macro: message', () => {
   it('has the provided `sentLabel`', () => {
     const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE_MINIMAL, ['Message content...']));
 
-    expect(
-      $('.ons-message__timestamp .ons-message__term')
-        .text()
-        .trim(),
-    ).toBe('Date sent:');
+    expect($('.ons-message__timestamp .ons-message__term').text().trim()).toBe('Date sent:');
   });
 
   it('has the provided `sentValue`', () => {
     const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE_MINIMAL, ['Message content...']));
 
-    expect(
-      $('.ons-message__timestamp .ons-message__value')
-        .text()
-        .trim(),
-    ).toBe('Tue 4 Jul 2020 at 7:47');
+    expect($('.ons-message__timestamp .ons-message__value').text().trim()).toBe('Tue 4 Jul 2020 at 7:47');
   });
 
   it('has the provided `sentId`', () => {
@@ -117,20 +101,12 @@ describe('macro: message', () => {
   it('has the provided `unreadLinkText`', () => {
     const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
 
-    expect(
-      $('.ons-message__unread-link')
-        .text()
-        .trim(),
-    ).toBe('Unread message');
+    expect($('.ons-message__unread-link').text().trim()).toBe('Unread message');
   });
 
   it('has the message content', () => {
     const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE_MINIMAL, ['Message content...']));
 
-    expect(
-      $('.ons-message__body')
-        .text()
-        .trim(),
-    ).toBe('Message content...');
+    expect($('.ons-message__body').text().trim()).toBe('Message content...');
   });
 });

package/components/message-list/_macro.spec.js

@@ -85,31 +85,19 @@ describe('macro: message-list', () => {
   it('has `unreadText` for unread messages', () => {
     const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
 
-    expect(
-      $('#message1 .ons-message-item__unread')
-        .text()
-        .trim(),
-    ).toBe('(New)');
+    expect($('#message1 .ons-message-item__unread').text().trim()).toBe('(New)');
   });
 
   it('has visually hidden label `fromLabel`', () => {
     const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
-    expect(
-      $('.ons-message-item__metadata-term--from:first')
-        .text()
-        .trim(),
-    ).toBe('From:');
+    expect($('.ons-message-item__metadata-term--from:first').text().trim()).toBe('From:');
   });
 
   it('has visually hidden label `dateLabel`', () => {
     const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
-    expect(
-      $('.ons-message-item__metadata-term--date:first')
-        .text()
-        .trim(),
-    ).toBe('Date:');
+    expect($('.ons-message-item__metadata-term--date:first').text().trim()).toBe('Date:');
   });
 
   it('has visually hidden label `hiddenReadLabel`', () => {
@@ -123,31 +111,11 @@ describe('macro: message-list', () => {
 
     const $message2 = $('.ons-message-item:nth-child(2)');
 
-    expect(
-      $message2
-        .find('.ons-message-item__subject')
-        .text()
-        .trim(),
-    ).toBe('Another example message subject');
+    expect($message2.find('.ons-message-item__subject').text().trim()).toBe('Another example message subject');
     expect($message2.find('.ons-message-item__subject').attr('id')).toBe('message2');
-    expect(
-      $message2
-        .find('.ons-message-item__metadata-value--from')
-        .text()
-        .trim(),
-    ).toBe('Example Sender 2');
-    expect(
-      $message2
-        .find('.ons-message-item__metadata-value--date')
-        .text()
-        .trim(),
-    ).toBe('Mon 1 Oct 2019 at 9:52');
-    expect(
-      $message2
-        .find('.ons-message-item__body')
-        .text()
-        .trim(),
-    ).toBe('Another example message.');
+    expect($message2.find('.ons-message-item__metadata-value--from').text().trim()).toBe('Example Sender 2');
+    expect($message2.find('.ons-message-item__metadata-value--date').text().trim()).toBe('Mon 1 Oct 2019 at 9:52');
+    expect($message2.find('.ons-message-item__body').text().trim()).toBe('Another example message.');
     expect($message2.find('.ons-message-item__link a').attr('href')).toBe('https://example.com/message/2');
   });
 

package/components/metadata/_macro.njk

@@ -1,14 +1,14 @@
 {% from "components/description-list/_macro.njk" import onsDescriptionList %}
 
 {% macro onsMetadata(params) %}
-{{
-    onsDescriptionList({
-        "id": params.id,
-        "classes": params.classes,
-        "descriptionListLabel": params.metadataLabel,
-        "termCol": params.termCol,
-        "descriptionCol": params.descriptionCol,
-        "itemsList": params.itemsList
-    })
-}}
+    {{
+        onsDescriptionList({
+            "id": params.id,
+            "classes": params.classes,
+            "descriptionListLabel": params.metadataLabel,
+            "termCol": params.termCol,
+            "descriptionCol": params.descriptionCol,
+            "itemsList": params.itemsList
+        })
+    }}
 {% endmacro %}

package/components/modal/_macro.spec.js

@@ -22,18 +22,14 @@ describe('macro: modal', () => {
   it('has expected `title`', () => {
     const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
 
-    const title = $('.ons-modal__title')
-      .html()
-      .trim();
+    const title = $('.ons-modal__title').html().trim();
     expect(title).toBe('Modal title');
   });
 
   it('has expected `body`', () => {
     const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
 
-    const title = $('.ons-modal__body')
-      .html()
-      .trim();
+    const title = $('.ons-modal__body').html().trim();
     expect(title).toBe('Modal body text');
   });
 
@@ -64,9 +60,7 @@ describe('macro: modal', () => {
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('modal', { EXAMPLE_MODAL_BASIC }, 'Example content...'));
 
-    const content = $('.ons-modal__body')
-      .text()
-      .trim();
+    const content = $('.ons-modal__body').text().trim();
     expect(content).toBe('Example content...');
   });
 

package/components/modal/modal.dom.js

@@ -7,7 +7,7 @@ async function modals() {
   if (modals.length && !timeouts.length) {
     const Modal = (await import('./modal')).default;
 
-    modals.forEach(component => new Modal(component));
+    modals.forEach((component) => new Modal(component));
   }
 }
 

package/components/modal/modal.spec.js

@@ -25,12 +25,12 @@ describe('script: modal', () => {
     });
 
     it('displays the modal', async () => {
-      const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+      const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
       expect(modalIsVisible).toBe(true);
     });
 
     it('has the correct body class added', async () => {
-      const bodyClassAddition = await page.$eval('body', node => node.classList.contains('ons-modal-overlay'));
+      const bodyClassAddition = await page.$eval('body', (node) => node.classList.contains('ons-modal-overlay'));
       expect(bodyClassAddition).toBe(true);
     });
 
@@ -41,12 +41,12 @@ describe('script: modal', () => {
       });
 
       it('hides the modal', async () => {
-        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
         expect(modalIsVisible).toBe(false);
       });
 
       it('has the body class removed', async () => {
-        const bodyClassAddition = await page.$eval('body', node => node.classList.contains('ons-modal-overlay'));
+        const bodyClassAddition = await page.$eval('body', (node) => node.classList.contains('ons-modal-overlay'));
         expect(bodyClassAddition).toBe(false);
       });
 
@@ -64,7 +64,7 @@ describe('script: modal', () => {
       });
 
       it('closes the modal', async () => {
-        const modalIsVisible = await page.$eval('.ons-modal', node => node.classList.contains('ons-u-db'));
+        const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
         expect(modalIsVisible).toBe(false);
       });
     });

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

@@ -0,0 +1,49 @@
+{% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
+{% from "components/fieldset/_macro.njk" import onsFieldset %}
+
+{% macro onsMultipleInputFields(params) %}
+    {% if params.numberOfFields > 1 %}
+        {% set fields %}
+            <div class="ons-field-group">
+                {{ params.fields | safe }}
+            </div>
+        {% endset %}
+    {% else %}
+        {{ params.fields | safe }}
+    {% endif %}
+
+    {% 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
+        }) %}
+            {{ 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
+        }) %}
+            {{ fields | safe }}
+        {% endcall %}
+    {% else %}
+        {{ fields | safe }}
+    {% endif %}
+{% endmacro %}

package/components/mutually-exclusive/_macro.spec.js

@@ -123,11 +123,7 @@ describe('macro: mutually-exclusive', () => {
     it('renders visually hidden "Or" label', () => {
       const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE, FAKE_FIELD));
 
-      expect(
-        $('.ons-checkboxes__label')
-          .text()
-          .trim(),
-      ).toBe('Or');
+      expect($('.ons-checkboxes__label').text().trim()).toBe('Or');
     });
 
     it('renders a checkbox component with the expected parameters', () => {
@@ -159,11 +155,7 @@ describe('macro: mutually-exclusive', () => {
     it('renders visually hidden "Or" label', () => {
       const $ = cheerio.load(renderComponent('mutually-exclusive', EXAMPLE_MUTUALLY_EXCLUSIVE_RADIOS, FAKE_FIELD));
 
-      expect(
-        $('.ons-checkboxes__label')
-          .text()
-          .trim(),
-      ).toBe('Or');
+      expect($('.ons-checkboxes__label').text().trim()).toBe('Or');
     });
 
     it('renders a radios component with the expected parameters', () => {