@ons/design-system 49.2.0 → 51.0.0

package/components/message/_macro.spec.js

@@ -0,0 +1,137 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_MESSAGE_MINIMAL = {
+  type: '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',
+  name: 'example-message-1',
+  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...']));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it.each([
+    ['sent', 'ons-message--sent'],
+    ['received', 'ons-message--received'],
+  ])('has appropriate class for provided `type` (%s -> %s)', (type, expectedClass) => {
+    const $ = cheerio.load(
+      renderComponent(
+        'message',
+        {
+          ...EXAMPLE_MESSAGE_MINIMAL,
+          type,
+        },
+        ['Message content...'],
+      ),
+    );
+
+    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...']));
+
+    expect($('.ons-message__metadata').attr('id')).toBe('message1');
+  });
+
+  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:');
+  });
+
+  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');
+  });
+
+  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');
+  });
+
+  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:');
+  });
+
+  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');
+  });
+
+  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');
+  });
+
+  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');
+  });
+
+  it('has the provided `unreadLinkText`', () => {
+    const $ = cheerio.load(renderComponent('message', EXAMPLE_MESSAGE, ['Message content...']));
+
+    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...');
+  });
+});

package/components/message-list/_macro.njk

@@ -4,14 +4,14 @@
     <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 is defined and message.unread %}<span class="ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
+        {% if message.unread is defined and 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-u-vh">{{ params.fromLabel }}:</dt>
-          <dd class="ons-message-item__metadata-value ons-u-fs-r--b">{{ message.fromText }}</dd>
-          <dt class="ons-message-item__metadata-term ons-u-vh">{{ params.dateLabel }}:</dt>
-          <dd class="ons-message-item__metadata-value ons-u-fs-s">{{ message.dateText }}</dd>
-        </dl>
+      <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>

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

@@ -0,0 +1,159 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+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.',
+    },
+  ],
+};
+
+const EXAMPLE_MESSAGE_LIST = {
+  ...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));
+
+    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));
+
+    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));
+
+    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));
+
+    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));
+
+    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));
+
+    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));
+
+    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));
+
+    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:');
+  });
+
+  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:');
+  });
+
+  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: ');
+  });
+
+  it('has message as expected', () => {
+    const $ = cheerio.load(renderComponent('message-list', EXAMPLE_MESSAGE_LIST_MINIMAL));
+
+    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');
+  });
+
+  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');
+  });
+});

package/components/metadata/_macro.spec.js

@@ -0,0 +1,167 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_METADATA_FULL = {
+  id: 'example-id',
+  classes: 'ons-u-mb-no',
+  metadataLabel: 'This is an example of the metadata component',
+  termCol: 2,
+  descriptionCol: 10,
+  itemsList: [
+    {
+      term: 'Survey:',
+      descriptions: [
+        {
+          id: 'description-1',
+          description: 'Bricks & Blocks',
+        },
+      ],
+    },
+    {
+      term: 'RU Refs:',
+      descriptions: [
+        {
+          id: 'description-2',
+          description: '49900000118',
+        },
+        {
+          id: 'description-3',
+          description: '49300005832',
+        },
+      ],
+    },
+  ],
+};
+
+const EXAMPLE_METADATA_MINIMAL = {
+  itemsList: [
+    {
+      term: 'Survey:',
+      descriptions: [
+        {
+          description: 'Bricks & Blocks',
+        },
+      ],
+    },
+    {
+      term: 'RU Refs:',
+      descriptions: [
+        {
+          description: '49900000118',
+        },
+        {
+          description: '49300005832',
+        },
+      ],
+    },
+  ],
+};
+
+describe('macro: metadata', () => {
+  it('passes jest-axe checks when all parameters are provided', async () => {
+    const $ = cheerio.load(renderComponent('metadata', EXAMPLE_METADATA_FULL));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('passes jest-axe checks when minimal parameters are provided', async () => {
+    const $ = cheerio.load(renderComponent('metadata', EXAMPLE_METADATA_MINIMAL));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(
+      renderComponent('metadata', {
+        ...EXAMPLE_METADATA_MINIMAL,
+        id: 'example-id',
+      }),
+    );
+
+    expect($('#example-id').length).toBe(1);
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('metadata', {
+        ...EXAMPLE_METADATA_MINIMAL,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-metadata').hasClass('extra-class')).toBe(true);
+    expect($('.ons-metadata').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('outputs `title` and `aria-label` attributes when `metadataLabel` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('metadata', {
+        ...EXAMPLE_METADATA_MINIMAL,
+        metadataLabel: 'This is an example of the metadata component',
+      }),
+    );
+
+    expect($('.ons-metadata').attr('title')).toBe('This is an example of the metadata component');
+    expect($('.ons-metadata').attr('aria-label')).toBe('This is an example of the metadata component');
+  });
+
+  it('outputs list items as expected', () => {
+    const $ = cheerio.load(renderComponent('metadata', EXAMPLE_METADATA_FULL));
+
+    const $listElements = $('.ons-metadata__term, .ons-metadata__value');
+
+    expect($listElements[0].tagName).toBe('dt');
+    expect($($listElements[0]).text()).toBe('Survey:');
+
+    expect($listElements[1].tagName).toBe('dd');
+    expect($($listElements[1]).attr('id')).toBe('description-1');
+    expect($($listElements[1]).text()).toBe('Bricks & Blocks');
+
+    expect($listElements[2].tagName).toBe('dt');
+    expect($($listElements[2]).text()).toBe('RU Refs:');
+
+    expect($listElements[3].tagName).toBe('dd');
+    expect($($listElements[3]).attr('id')).toBe('description-2');
+    expect($($listElements[3]).text()).toBe('49900000118');
+
+    expect($listElements[4].tagName).toBe('dd');
+    expect($($listElements[4]).attr('id')).toBe('description-3');
+    expect($($listElements[4]).text()).toBe('49300005832');
+  });
+
+  it.each([
+    [1, 'ons-col-1\\@m'],
+    [4, 'ons-col-4\\@m'],
+  ])('applies class for the provided `termCol` (%i -> %s)', (termCol, expectedClass) => {
+    const $ = cheerio.load(
+      renderComponent('metadata', {
+        ...EXAMPLE_METADATA_MINIMAL,
+        termCol,
+      }),
+    );
+
+    const $termElements = $(`.ons-metadata__term.${expectedClass}`);
+    expect($termElements.length).toBe(2);
+  });
+
+  it.each([
+    [1, 'ons-col-1\\@m'],
+    [4, 'ons-col-4\\@m'],
+  ])('applies class for the provided `descriptionCol` (%i -> %s)', (descriptionCol, expectedClass) => {
+    const $ = cheerio.load(
+      renderComponent('metadata', {
+        ...EXAMPLE_METADATA_MINIMAL,
+        descriptionCol,
+      }),
+    );
+
+    const $valueElements = $(`.ons-metadata__value.${expectedClass}`);
+    expect($valueElements.length).toBe(3);
+  });
+});

package/components/modal/_macro.njk

@@ -1,19 +1,19 @@
 {% macro onsModal(params) %}
-    {% set modalID = params.id | default('dialog') %}
-    <dialog class="ons-modal ons-js-modal {{ params.classes }}"
-        id="{{ modalID }}"
+    {% set modalId = params.id | default('dialog') %}
+    <dialog class="ons-modal ons-js-modal {{ params.classes if params.classes is defined and params.classes else '' }}"
+        id="{{ modalId }}"
         role="dialog"
         aria-labelledby="ons-modal-title"
         {% 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}}="{{value}}"{% endfor %}{% endif %}
-    >   
+    >
         <div class="ons-modal__content">
             <h1 id="ons-modal-title" class="ons-modal__title">
                 {{ params.title }}
             </h1>
             <div class="ons-modal__body">
-                {{ (params.body if params else "") | safe }}{{ caller() if caller }}
+                {{ (params.body if params.body is defined and params.body else "") | safe }}{{ caller() if caller }}
             </div>
-            {% if params.btnText %}
+            {% if params.btnText is defined and params.btnText %}
                 {% from "components/button/_macro.njk" import onsButton %}
                 {{ onsButton({
                     "text": params.btnText,

package/components/modal/_macro.spec.js

@@ -0,0 +1,87 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_MODAL_BASIC = {
+  title: 'Modal title',
+  body: 'Modal body text',
+  btnText: 'Modal button',
+};
+
+describe('macro: modal', () => {
+  it('passes jest-axe checks with', async () => {
+    const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has expected `title`', () => {
+    const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
+
+    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();
+    expect(title).toBe('Modal body text');
+  });
+
+  it('has the default ID', () => {
+    const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
+    expect($('#dialog').length).toBe(1);
+  });
+
+  it('has the provided `id`', () => {
+    const $ = cheerio.load(renderComponent('modal', { ...EXAMPLE_MODAL_BASIC, id: 'modal-id' }));
+    expect($('#modal-id').length).toBe(1);
+  });
+
+  it('has the provided `classes`', () => {
+    const $ = cheerio.load(renderComponent('modal', { ...EXAMPLE_MODAL_BASIC, classes: 'modal-class' }));
+    expect($('.modal-class').length).toBe(1);
+  });
+
+  it('outputs the expected button', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
+
+    faker.renderComponent('modal', EXAMPLE_MODAL_BASIC);
+
+    expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Modal button');
+  });
+
+  it('calls with content', () => {
+    const $ = cheerio.load(renderComponent('modal', { EXAMPLE_MODAL_BASIC }, 'Example content...'));
+
+    const content = $('.ons-modal__body')
+      .text()
+      .trim();
+    expect(content).toBe('Example content...');
+  });
+
+  it('has additionally provided `attributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('modal', {
+        ...EXAMPLE_MODAL_BASIC,
+        attributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('.ons-modal').attr('a')).toBe('123');
+    expect($('.ons-modal').attr('b')).toBe('456');
+  });
+});

package/components/modal/modal.js

@@ -52,7 +52,6 @@ export default class Modal {
         document.querySelector('body').classList.add(ie11Class);
       }
 
-      this.makePageContentInert();
       this.saveLastFocusedEl();
 
       if (event) {
@@ -79,20 +78,6 @@ export default class Modal {
     }
   }
 
-  makePageContentInert() {
-    if (document.querySelector('.ons-page')) {
-      document.querySelector('.ons-page').inert = true;
-      document.querySelector('.ons-page').setAttribute('aria-hidden', 'true');
-    }
-  }
-
-  removeInertFromPageContent() {
-    if (document.querySelector('.ons-page')) {
-      document.querySelector('.ons-page').inert = false;
-      document.querySelector('.ons-page').setAttribute('aria-hidden', 'false');
-    }
-  }
-
   isDialogOpen() {
     return this.component['open'];
   }
@@ -111,7 +96,6 @@ export default class Modal {
 
       this.component.close();
       this.setFocusOnLastFocusedEl(this.lastFocusedEl);
-      this.removeInertFromPageContent();
     }
   }
 }