@ons/design-system 70.0.7 → 70.0.9

package/components/message/_macro.njk

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

package/components/message/_macro.spec.js

@@ -6,107 +6,107 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_MESSAGE_MINIMAL = {
-  variant: 'sent',
-  fromLabel: 'From',
-  fromValue: 'Example Sender',
-  sentLabel: 'Date sent',
-  sentValue: 'Tue 4 Jul 2020 at 7:47',
+    variant: 'sent',
+    fromLabel: 'From',
+    fromValue: 'Example Sender',
+    sentLabel: 'Date sent',
+    sentValue: 'Tue 4 Jul 2020 at 7:47',
 };
 
 const EXAMPLE_MESSAGE = {
-  ...EXAMPLE_MESSAGE_MINIMAL,
-  unreadLink: 'https://example.com/message/1',
-  unreadLinkText: 'Unread message',
-  id: 'message1',
-  fromId: 'from1',
-  sentId: 'sent1',
-  unreadLinkId: 'unreadLink1',
-  messageID: 'messageBody1',
+    ...EXAMPLE_MESSAGE_MINIMAL,
+    unreadLink: 'https://example.com/message/1',
+    unreadLinkText: 'Unread message',
+    id: 'message1',
+    fromId: 'from1',
+    sentId: 'sent1',
+    unreadLinkId: 'unreadLink1',
+    messageID: 'messageBody1',
 };
 
 describe('macro: message', () => {
-  it('passes jest-axe checks when all parameters are provided', async () => {
-    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
+    it('passes jest-axe checks when all parameters are provided', async () => {
+        const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it.each([
-    ['sent', 'ons-message--sent'],
-    ['received', 'ons-message--received'],
-  ])('has appropriate class for provided `variant` (%s -> %s)', (variant, expectedClass) => {
-    const $ = cheerio.load(
-      renderComponent(
-        'message',
-        {
-          ...EXAMPLE_MESSAGE_MINIMAL,
-          variant,
-        },
-        ['Message content...'],
-      ),
-    );
+    it.each([
+        ['sent', 'ons-message--sent'],
+        ['received', 'ons-message--received'],
+    ])('has appropriate class for provided `variant` (%s -> %s)', (variant, expectedClass) => {
+        const $ = cheerio.load(
+            renderComponent(
+                'message',
+                {
+                    ...EXAMPLE_MESSAGE_MINIMAL,
+                    variant,
+                },
+                ['Message content...'],
+            ),
+        );
 
-    expect($('.ons-message').hasClass(expectedClass)).toBe(true);
-  });
+        expect($('.ons-message').hasClass(expectedClass)).toBe(true);
+    });
 
-  it('has `id` attribute on `.ons-message__metadata` using the provided value', () => {
-    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
+    it('has `id` attribute on `.ons-message__metadata` using the provided value', () => {
+        const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
 
-    expect($('.ons-message__metadata').attr('id')).toBe('message1');
-  });
+        expect($('.ons-message__metadata').attr('id')).toBe('message1');
+    });
 
-  it('has the provided `fromLabel`', () => {
-    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE_MINIMAL, ['Message content...']));
+    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...']));
+    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`', () => {
-    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
+    it('has the provided `fromId`', () => {
+        const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
 
-    expect($('.ons-message__sender .ons-message__value').attr('id')).toBe('from1');
-  });
+        expect($('.ons-message__sender .ons-message__value').attr('id')).toBe('from1');
+    });
 
-  it('has the provided `sentLabel`', () => {
-    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE_MINIMAL, ['Message content...']));
+    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...']));
+    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`', () => {
-    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
+    it('has the provided `sentId`', () => {
+        const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
 
-    expect($('.ons-message__timestamp .ons-message__value').attr('id')).toBe('sent1');
-  });
+        expect($('.ons-message__timestamp .ons-message__value').attr('id')).toBe('sent1');
+    });
 
-  it('has the provided `unreadLink`', () => {
-    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
+    it('has the provided `unreadLink`', () => {
+        const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
 
-    expect($('.ons-message__unread-link').attr('href')).toBe('https://example.com/message/1');
-  });
+        expect($('.ons-message__unread-link').attr('href')).toBe('https://example.com/message/1');
+    });
 
-  it('has the provided `unreadLinkText`', () => {
-    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
+    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...']));
+    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/_message.scss

@@ -1,55 +1,55 @@
 @use 'sass:math';
 
 .ons-message {
-  border-radius: math.div($grid-gutters, 2);
-  margin-bottom: 2rem;
-  outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+    border-radius: math.div($grid-gutters, 2);
+    margin-bottom: 2rem;
+    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 
-  &--sent {
-    background: var(--ons-color-info-tint);
+    &--sent {
+        background: var(--ons-color-info-tint);
 
-    @include mq(m) {
-      margin-left: 4rem;
+        @include mq(m) {
+            margin-left: 4rem;
+        }
     }
-  }
 
-  &--received {
-    background: var(--ons-color-success-tint);
+    &--received {
+        background: var(--ons-color-success-tint);
 
-    @include mq(m) {
-      margin-right: 4rem;
+        @include mq(m) {
+            margin-right: 4rem;
+        }
     }
-  }
 
-  &__head {
-    border-bottom: 1px solid var(--ons-color-borders);
-    padding: $grid-gutters;
-    position: relative;
-  }
+    &__head {
+        border-bottom: 1px solid var(--ons-color-borders);
+        padding: $grid-gutters;
+        position: relative;
+    }
 
-  &__metadata {
-    margin: 0;
+    &__metadata {
+        margin: 0;
 
-    @include mq(m) {
-      width: 65%;
+        @include mq(m) {
+            width: 65%;
+        }
     }
-  }
-
-  &__term,
-  &__value {
-    display: inline-block;
-    margin: 0;
-  }
-
-  &__unread-link {
-    @include mq(m) {
-      position: absolute;
-      right: 1rem;
-      top: 1rem;
+
+    &__term,
+    &__value {
+        display: inline-block;
+        margin: 0;
     }
-  }
 
-  &__body {
-    padding: $grid-gutters;
-  }
+    &__unread-link {
+        @include mq(m) {
+            position: absolute;
+            right: 1rem;
+            top: 1rem;
+        }
+    }
+
+    &__body {
+        padding: $grid-gutters;
+    }
 }

package/components/message-list/_macro.njk

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

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

@@ -6,122 +6,122 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_MESSAGE_LIST_MINIMAL = {
-  unreadText: 'New',
-  fromLabel: 'From',
-  dateLabel: 'Date',
-  hiddenReadLabel: 'Read the message',
-  messages: [
-    {
-      id: 'message1',
-      unread: true,
-      url: 'https://example.com/message/1',
-      subject: 'Example message subject',
-      fromText: 'Example Sender 1',
-      dateText: 'Tue 4 Jul 2020 at 7:47',
-      body: 'An example message.',
-    },
-    {
-      id: 'message2',
-      url: 'https://example.com/message/2',
-      subject: 'Another example message subject',
-      fromText: 'Example Sender 2',
-      dateText: 'Mon 1 Oct 2019 at 9:52',
-      body: 'Another example message.',
-    },
-  ],
+    unreadText: 'New',
+    fromLabel: 'From',
+    dateLabel: 'Date',
+    hiddenReadLabel: 'Read the message',
+    messages: [
+        {
+            id: 'message1',
+            unread: true,
+            url: 'https://example.com/message/1',
+            subject: 'Example message subject',
+            fromText: 'Example Sender 1',
+            dateText: 'Tue 4 Jul 2020 at 7:47',
+            body: 'An example message.',
+        },
+        {
+            id: 'message2',
+            url: 'https://example.com/message/2',
+            subject: 'Another example message subject',
+            fromText: 'Example Sender 2',
+            dateText: 'Mon 1 Oct 2019 at 9:52',
+            body: 'Another example message.',
+        },
+    ],
 };
 
 const EXAMPLE_MESSAGE_LIST = {
-  ...EXAMPLE_MESSAGE_LIST_MINIMAL,
-  ariaLabel: 'Message list for ONS Business Surveys',
-  ariaLabelMetaData: 'Message information',
-  ariaLabelMsg: 'Message preview',
+    ...EXAMPLE_MESSAGE_LIST_MINIMAL,
+    ariaLabel: 'Message list for ONS Business Surveys',
+    ariaLabelMetaData: 'Message information',
+    ariaLabelMsg: 'Message preview',
 };
 
 describe('macro: message-list', () => {
-  it('passes jest-axe checks when all parameters are provided', async () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
+    it('passes jest-axe checks when all parameters are provided', async () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has `aria-label` attribute on `.ons-message-list` with the correct default value', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+    it('has `aria-label` attribute on `.ons-message-list` with the correct default value', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
-    expect($('.ons-message-list').attr('aria-label')).toBe('Message List');
-  });
+        expect($('.ons-message-list').attr('aria-label')).toBe('Message List');
+    });
 
-  it('has `aria-label` attribute on `.ons-message-list` using the provided value', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
+    it('has `aria-label` attribute on `.ons-message-list` using the provided value', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
 
-    expect($('.ons-message-list').attr('aria-label')).toBe('Message list for ONS Business Surveys');
-  });
+        expect($('.ons-message-list').attr('aria-label')).toBe('Message list for ONS Business Surveys');
+    });
 
-  it('has `aria-label` attribute on `.ons-message-item__metadata` with the correct default value', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+    it('has `aria-label` attribute on `.ons-message-item__metadata` with the correct default value', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
-    expect($('.ons-message-item__metadata:first').attr('aria-label')).toBe('Message metadata');
-  });
+        expect($('.ons-message-item__metadata:first').attr('aria-label')).toBe('Message metadata');
+    });
 
-  it('has `aria-label` attribute on `.ons-message-item__metadata` using the provided value', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
+    it('has `aria-label` attribute on `.ons-message-item__metadata` using the provided value', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
 
-    expect($('.ons-message-item__metadata:first').attr('aria-label')).toBe('Message information');
-  });
+        expect($('.ons-message-item__metadata:first').attr('aria-label')).toBe('Message information');
+    });
 
-  it('has `aria-label` attribute on `.ons-message-item__body` with the correct default value', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+    it('has `aria-label` attribute on `.ons-message-item__body` with the correct default value', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
-    expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message text');
-  });
+        expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message text');
+    });
 
-  it('has `aria-label` attribute on `.ons-message-item__body` using the provided value', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
+    it('has `aria-label` attribute on `.ons-message-item__body` using the provided value', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST));
 
-    expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message preview');
-  });
+        expect($('.ons-message-item__body:first').attr('aria-label')).toBe('Message preview');
+    });
 
-  it('has `unreadText` for unread messages', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_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));
+    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));
+    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`', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+    it('has visually hidden label `hiddenReadLabel`', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
-    expect($('.ons-message-item__link:first').text()).toContain('Read the message: ');
-  });
+        expect($('.ons-message-item__link:first').text()).toContain('Read the message: ');
+    });
 
-  it('has message as expected', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+    it('has message as expected', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
-    const $message2 = $('.ons-message-item:nth-child(2)');
+        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').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__link a').attr('href')).toBe('https://example.com/message/2');
-  });
+        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__link a').attr('href')).toBe('https://example.com/message/2');
+    });
 
-  it('has `aria-labelledby` attribute on message', () => {
-    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+    it('has `aria-labelledby` attribute on message', () => {
+        const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
 
-    expect($('.ons-message-item:first').attr('aria-labelledby')).toBe('message1');
-  });
+        expect($('.ons-message-item:first').attr('aria-labelledby')).toBe('message1');
+    });
 });

package/components/message-list/_message-list.scss

@@ -1,26 +1,26 @@
 .ons-message-list {
-  padding-left: 0;
+    padding-left: 0;
 }
 
 .ons-message-item {
-  list-style: none;
-  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
+    list-style: none;
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
 
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--ons-color-borders);
-  }
+    &:not(:last-child) {
+        border-bottom: 1px solid var(--ons-color-borders);
+    }
 
-  &__subject {
-    margin: 0 0 0.2rem;
-  }
+    &__subject {
+        margin: 0 0 0.2rem;
+    }
 
-  &__metadata {
-    margin: 0 0 1rem;
+    &__metadata {
+        margin: 0 0 1rem;
 
-    &-term,
-    &-value {
-      margin: 0 0 0.3rem;
+        &-term,
+        &-value {
+            margin: 0 0 0.3rem;
+        }
     }
-  }
 }