@ons/design-system 68.0.0 → 68.0.1

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) %}
+    {% set fields %}
+        {% if params.numberOfFields > 1 %}
+            <div class="ons-field-group">
+                {{ params.fields | safe }}
+            </div>
+        {% else %}
+            {{ params.fields | safe }}
+        {% endif %}
+    {% endset %}
+
+    {% 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', () => {

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

@@ -80,22 +80,22 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the mutually exclusive option is checked', async () => {
-          const isChecked = await page.$eval('#no-central-heating', node => node.checked);
+          const isChecked = await page.$eval('#no-central-heating', (node) => node.checked);
           expect(isChecked).toBe(true);
         });
 
         it('then the checkboxes are not checked', async () => {
-          expect(await page.$eval('#gas', node => node.checked)).toBe(false);
-          expect(await page.$eval('#electric', node => node.checked)).toBe(false);
-          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel-textbox', node => node.value)).toBe('');
+          expect(await page.$eval('#gas', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#electric', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel-textbox', (node) => node.value)).toBe('');
         });
 
         it('then the aria-live message should reflect the removed non exclusive options', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.');
         });
       });
@@ -114,20 +114,20 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the expected checkboxes are checked', async () => {
-          expect(await page.$eval('#gas', node => node.checked)).toBe(true);
-          expect(await page.$eval('#electric', node => node.checked)).toBe(true);
-          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(true);
+          expect(await page.$eval('#gas', (node) => node.checked)).toBe(true);
+          expect(await page.$eval('#electric', (node) => node.checked)).toBe(true);
+          expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(true);
         });
 
         it('then the exclusive option should not be checked', async () => {
-          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
+          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
         });
 
         it('then the aria-live message should reflect the removed exclusive option', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('No central heating deselected.');
         });
 
@@ -139,7 +139,7 @@ describe('script: mutually-exclusive', () => {
           it('the aria-live message should not be updated', async () => {
             await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-            const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+            const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
             expect(alertText).toBe('No central heating deselected.');
           });
         });
@@ -155,20 +155,20 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the expected checkboxes are checked', async () => {
-          expect(await page.$eval('#gas', node => node.checked)).toBe(true);
-          expect(await page.$eval('#electric', node => node.checked)).toBe(true);
-          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(true);
+          expect(await page.$eval('#gas', (node) => node.checked)).toBe(true);
+          expect(await page.$eval('#electric', (node) => node.checked)).toBe(true);
+          expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(true);
         });
 
         it('then the exclusive option should not be checked', async () => {
-          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
+          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
         });
 
         it('then the aria-live message should say nothing', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });
@@ -181,20 +181,20 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the expected checkboxes are not checked', async () => {
-          expect(await page.$eval('#gas', node => node.checked)).toBe(false);
-          expect(await page.$eval('#electric', node => node.checked)).toBe(false);
-          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
-          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#gas', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#electric', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#solid-fuel', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', (node) => node.checked)).toBe(false);
         });
 
         it('then the exclusive option should be checked', async () => {
-          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(true);
+          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(true);
         });
 
         it('then the aria-live message should say nothing', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });