@ons/design-system 67.2.0 → 69.0.0

package/components/footer/_macro.spec.js

@@ -225,7 +225,7 @@ describe('macro: footer', () => {
 
       expect(panelSpy.occurrences).toContainEqual(
         expect.objectContaining({
-          type: 'warn',
+          variant: 'warn',
           classes: 'ons-panel--warn--footer',
         }),
       );
@@ -278,7 +278,7 @@ describe('macro: footer', () => {
     it('renders expected column titles', () => {
       const $ = cheerio.load(renderComponent('footer', params));
 
-      const titleHeadings = mapAll($('.ons-footer__heading'), node => node.text().trim());
+      const titleHeadings = mapAll($('.ons-footer__heading'), (node) => node.text().trim());
       expect(titleHeadings).toEqual(['First column', 'Second column']);
     });
 
@@ -411,6 +411,18 @@ describe('macro: footer', () => {
         });
       });
     });
+    describe('correct link for language', () => {
+      it('has the Welsh lang link when the default Welsh lang ons icon is present', () => {
+        const $ = cheerio.load(renderComponent('footer', { lang: 'cy' }));
+
+        expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://cy.ons.gov.uk/');
+      });
+      it('has the English lang link when the default English lang ons icon is present', () => {
+        const $ = cheerio.load(renderComponent('footer', { lang: 'en' }));
+
+        expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://www.ons.gov.uk/');
+      });
+    });
     describe('provided poweredBy logo', () => {
       describe.each([
         [

package/components/helpers/grid.njk

@@ -1,19 +1,19 @@
 {% macro patternLibExampleGrid(params) %}
-  {% if params.container -%}
-    <div class="ons-container">
-  {% endif -%}
+    {% if params.container -%}
+        <div class="ons-container">
+    {% endif -%}
 
-  <div class="ons-grid">
-      {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
-          {% for i in range(0, item.repeat | default(1)  ) -%}
-              <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
-                  <div class="ons-pl-grid-col">{{ item.col }} col</div>
-              </div>
-          {%- endfor %}
-      {%- endfor %}
-  </div>
-
-  {% if params.container -%}
+    <div class="ons-grid">
+        {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+            {% for i in range(0, item.repeat | default(1) ) -%}
+                <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
+                    <div class="ons-pl-grid-col">{{ item.col }} col</div>
+                </div>
+            {%- endfor %}
+        {%- endfor %}
     </div>
-  {% endif -%}
+
+    {% if params.container -%}
+        </div>
+    {% endif -%}
 {% endmacro %}

package/components/icon/_macro.njk

@@ -17,6 +17,10 @@
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
             <path d="M6.4.2.3 6.4c-.2.2-.2.4 0 .6l6.2 5.8c.2.2.4.1.6 0l.8-.9c.2-.2.1-.4 0-.6l-4-3.7h12.5c.2 0 .4-.2.4-.4V6c0-.2-.2-.4-.4-.4H3.8l4-4c.2-.1.2-.4.1-.5L7 .2c-.1-.1-.4-.1-.6 0z"/>
         </svg>
+    {%- elif params.iconType == "arrow-up" -%}
+        <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" viewBox="0 0 13 20" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
+            <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+        </svg>
     {%- elif params.iconType == "check" -%}
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
             <path d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z" transform="translate(-1.51 -3.04)"/>
@@ -73,9 +77,9 @@
         </svg>
     {%- elif params.iconType == "twitter" -%}
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0 90.01 90.01" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-	        <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01"/>
-	        <path d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z"/>
-	    </svg>
+            <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01"/>
+            <path d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z"/>
+        </svg>
     {%- elif params.iconType == "instagram" -%}
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-instagram" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
             <path d="M21.34,9.46c0.66,0,1.2,0.54,1.2,1.2c0,0.66-0.54,1.2-1.2,1.2c-0.66,0-1.2-0.54-1.2-1.2C20.14,10,20.68,9.46,21.34,9.46z M16,12.67c-1.84,0-3.33,1.49-3.33,3.33c0,1.84,1.49,3.33,3.33,3.33c1.84,0,3.33-1.49,3.33-3.33C19.33,14.16,17.84,12.67,16,12.67z M16,10.86c2.84,0,5.14,2.3,5.14,5.14c0,2.84-2.3,5.14-5.14,5.14c-2.84,0-5.14-2.3-5.14-5.14C10.86,13.16,13.16,10.86,16,10.86z M16.56,7.8h-1.11c-2.17,0-2.51,0.01-3.49,0.06c-0.97,0.04-1.5,0.21-1.86,0.34C9.64,8.39,9.3,8.6,8.95,8.95C8.6,9.3,8.39,9.64,8.2,10.1c-0.14,0.35-0.3,0.88-0.34,1.86c-0.04,0.98-0.06,1.32-0.06,3.49v1.11c0,2.17,0.01,2.51,0.06,3.49c0.04,0.97,0.21,1.5,0.34,1.86c0.18,0.47,0.4,0.8,0.75,1.15c0.35,0.35,0.68,0.57,1.15,0.75c0.35,0.14,0.88,0.3,1.86,0.34c0.94,0.04,1.29,0.06,3.23,0.06h1.61c1.94,0,2.3-0.02,3.23-0.06c0.97-0.04,1.5-0.21,1.86-0.34c0.47-0.18,0.8-0.4,1.15-0.75c0.35-0.35,0.57-0.68,0.75-1.15c0.14-0.35,0.3-0.88,0.34-1.86c0.04-0.94,0.06-1.29,0.06-3.23v-1.61c0-1.94-0.02-2.3-0.06-3.23c-0.04-0.97-0.21-1.5-0.34-1.86c-0.18-0.47-0.4-0.8-0.75-1.15C22.7,8.6,22.36,8.39,21.9,8.2c-0.35-0.14-0.88-0.3-1.86-0.34C19.06,7.82,18.72,7.8,16.56,7.8z M17.03,6c1.8,0,2.18,0.02,3.1,0.06c1.06,0.05,1.79,0.22,2.43,0.46c0.66,0.26,1.22,0.6,1.77,1.15c0.56,0.56,0.9,1.11,1.15,1.77c0.25,0.64,0.42,1.36,0.46,2.43c0.05,0.99,0.06,1.35,0.06,3.58v1.09c0,2.22-0.01,2.59-0.06,3.58c-0.05,1.06-0.22,1.79-0.46,2.43c-0.26,0.66-0.6,1.22-1.15,1.77c-0.56,0.56-1.11,0.9-1.77,1.15c-0.64,0.25-1.36,0.42-2.43,0.46C19.13,25.99,18.77,26,16.55,26h-1.09c-2.22,0-2.59-0.01-3.58-0.06c-1.06-0.05-1.79-0.22-2.43-0.46c-0.66-0.26-1.22-0.6-1.77-1.15c-0.56-0.56-0.9-1.11-1.15-1.77c-0.25-0.64-0.42-1.36-0.46-2.43C6.02,19.21,6,18.83,6,17.03v-2.06c0-1.8,0.02-2.18,0.06-3.1c0.05-1.06,0.22-1.79,0.46-2.43c0.26-0.66,0.6-1.22,1.15-1.77c0.56-0.56,1.11-0.9,1.77-1.15c0.64-0.25,1.36-0.42,2.43-0.46C12.79,6.02,13.17,6,14.97,6H17.03z M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>

package/components/icon/_macro.spec.js

@@ -33,7 +33,7 @@ describe('macro: icon', () => {
     'crest',
     'ogl',
     'circle-lined',
-  ])('icon type: %s', iconType => {
+  ])('icon type: %s', (iconType) => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(renderComponent('icon', { iconType }));
 
@@ -77,7 +77,7 @@ describe('macro: icon', () => {
     'twitter',
     'instagram',
     'linkedin',
-  ])('icon type: %s', iconType => {
+  ])('icon type: %s', (iconType) => {
     it('has style variation class for provided icon size', () => {
       const $ = cheerio.load(
         renderComponent('icon', {
@@ -101,11 +101,7 @@ describe('macro: icon', () => {
     it(`has default alt text '${expectedAltText}'`, () => {
       const $ = cheerio.load(renderComponent('icon', { iconType }));
 
-      expect(
-        $('title')
-          .text()
-          .trim(),
-      ).toBe(expectedAltText);
+      expect($('title').text().trim()).toBe(expectedAltText);
     });
 
     it('has provided alt text', () => {
@@ -116,11 +112,7 @@ describe('macro: icon', () => {
         }),
       );
 
-      expect(
-        $('title')
-          .text()
-          .trim(),
-      ).toBe('Example alt text');
+      expect($('title').text().trim()).toBe('Example alt text');
     });
   });
 });

package/components/image/_macro.spec.js

@@ -42,11 +42,7 @@ describe('macro: image', () => {
       }),
     );
 
-    expect(
-      $('.ons-image__caption')
-        .text()
-        .trim(),
-    ).toBe('Example image caption');
+    expect($('.ons-image__caption').text().trim()).toBe('Example image caption');
   });
 
   describe('mode: url', () => {

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/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));
   }
 }