@ons/design-system 67.2.0 → 68.0.1

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

@@ -87,22 +87,22 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the mutually exclusive option is checked', async () => {
-          const isChecked = await page.$eval('#dont-know', node => node.checked);
+          const isChecked = await page.$eval('#dont-know', (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.');
         });
       });
@@ -121,21 +121,21 @@ 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 options should not be checked', async () => {
-          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
-          expect(await page.$eval('#dont-know', node => node.checked)).toBe(false);
+          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', (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('Dont know deselected.');
         });
 
@@ -147,7 +147,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('Dont know deselected.');
           });
         });
@@ -163,21 +163,21 @@ 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 options should not be checked', async () => {
-          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
-          expect(await page.$eval('#dont-know', node => node.checked)).toBe(false);
+          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', (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('');
         });
       });
@@ -190,21 +190,21 @@ 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(false);
-          expect(await page.$eval('#dont-know', node => node.checked)).toBe(true);
+          expect(await page.$eval('#no-central-heating', (node) => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', (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('');
         });
       });

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

@@ -53,19 +53,19 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#currency-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#currency-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(true);
         });
 
         it('then the number input should be cleared', async () => {
-          const inputValue = await page.$eval('#currency', node => node.value);
+          const inputValue = await page.$eval('#currency', (node) => node.value);
           expect(inputValue).toBe('');
         });
 
         it('then the aria alert should tell the user that the number input has been cleared', 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('Gross annual income cleared.');
         });
       });
@@ -82,14 +82,14 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#currency-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#currency-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(false);
         });
 
         it('then the aria alert should tell the user that the exclusive option has been unchecked', 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('I prefer not to say deselected.');
         });
       });
@@ -104,7 +104,7 @@ describe('script: mutually-exclusive', () => {
         it('then the aria alert shouldnt say anything', 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('');
         });
       });
@@ -117,7 +117,7 @@ describe('script: mutually-exclusive', () => {
         it('then the aria alert shouldnt say anything', 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('');
         });
       });

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

@@ -53,24 +53,24 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#feedback-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#feedback-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(true);
         });
 
         it('then the textarea should be cleared', async () => {
-          const textareaValue = await page.$eval('#feedback', node => node.value);
+          const textareaValue = await page.$eval('#feedback', (node) => node.value);
           expect(textareaValue).toBe('');
         });
 
         it('then the characters remaining readout should be reset', async () => {
-          const limitText = await page.$eval('#feedback-lim', node => node.textContent);
+          const limitText = await page.$eval('#feedback-lim', (node) => node.textContent);
           expect(limitText).toBe('You have 200 characters remaining');
         });
 
         it('then the aria alert should tell the user that the textarea has been cleared', 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('Enter your feedback cleared.');
         });
       });
@@ -87,14 +87,14 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#feedback-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#feedback-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(false);
         });
 
         it('then the aria alert should tell the user that the exclusive option has been unchecked', 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('I dont want to provide feedback deselected.');
         });
       });
@@ -109,7 +109,7 @@ describe('script: mutually-exclusive', () => {
         it('then the aria alert shouldnt say anything', 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('');
         });
       });
@@ -122,7 +122,7 @@ describe('script: mutually-exclusive', () => {
         it('then the aria alert shouldnt say anything', 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('');
         });
       });

package/components/navigation/navigation.spec.js

@@ -303,5 +303,3 @@ describe('level: sub navigation', () => {
     });
   });
 });
-
-

package/components/pagination/_macro.spec.js

@@ -3,7 +3,7 @@
 import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
-import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+import { renderComponent } from '../../tests/helpers/rendering';
 
 const PAGINATION_PREV_NEXT_LABELS = {
   previous: 'Previous page',
@@ -70,11 +70,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 1 of 1');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 1 of 1');
     });
 
     it('has a single list item', () => {
@@ -102,11 +98,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 1 of 2');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 1 of 2');
     });
 
     it('has a 3 list items ("1", "2", "Next page")', () => {
@@ -136,11 +128,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 2 of 2');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 2');
     });
 
     it('has a 3 list items ("Previous page", "1", "2")', () => {
@@ -170,11 +158,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 2 of 3');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 3');
     });
 
     it('has a 5 list items ("Previous page", "1", "2", "3", "Next page")', () => {
@@ -206,11 +190,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 2 of 5');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 5');
     });
 
     it('has a 7 list items ("Previous page", "1", "2", "3", "4", "5", "Next page")', () => {
@@ -244,11 +224,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 2 of 6');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 6');
     });
 
     it('has 7 list items ("Previous page", "1", "2", "3", "...", "6", "Next page")', () => {
@@ -294,11 +270,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 5 of 11');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 5 of 11');
     });
 
     it('has a 9 list items ("Previous page", "1", "...", "4", "5", "6", "...", "11", "Next page")', () => {
@@ -346,11 +318,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 10 of 11');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 10 of 11');
     });
 
     it('has a 7 list items ("Previous page", "1", "...", "9", "10", "11", "Next page")', () => {
@@ -371,12 +339,7 @@ function assertIsCurrentPage(pageItem, url, label, text) {
   expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
   expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBe('true');
   expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
-  expect(
-    pageItem
-      .find('.ons-pagination__link')
-      .text()
-      .trim(),
-  ).toBe(text);
+  expect(pageItem.find('.ons-pagination__link').text().trim()).toBe(text);
 }
 
 function assertIsOtherPage(pageItem, url, label, text) {
@@ -384,12 +347,7 @@ function assertIsOtherPage(pageItem, url, label, text) {
   expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
   expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBeUndefined();
   expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
-  expect(
-    pageItem
-      .find('.ons-pagination__link')
-      .text()
-      .trim(),
-  ).toBe(text);
+  expect(pageItem.find('.ons-pagination__link').text().trim()).toBe(text);
 }
 
 function assertIsPreviousPage(pageItem, url, label, text) {

package/components/panel/_macro.njk

@@ -4,21 +4,21 @@
         {% set classes = ' ' + params.classes %}
     {% endif %}
 
-    {% if params is not defined or params.title is not defined and params.type != "bare" %}
+    {% if params.title is not defined and params.variant != "bare" %}
         {% set noTitleClass = ' ons-panel--no-title' %}
     {% endif %}
 
-    {% if params.type %}
-        {% set typeClass = ' ons-panel--' + params.type %}
+    {% if params.variant %}
+        {% set variantClass = ' ons-panel--' + params.variant %}
     {% else %}
-        {% set typeClass = ' ons-panel--info' %}
+        {% set variantClass = ' ons-panel--info' %}
     {% endif %}
 
-    {% if params.type == "warn-branded" %}
+    {% if params.variant == "warn-branded" %}
         {% set containerClass = 'ons-branded-warning' %}
     {% endif %}
 
-    {% if params.type == "announcement" %}
+    {% if params.variant == "announcement" %}
         {% set containerClass = 'ons-announcement' %}
     {% endif %}
 
@@ -26,19 +26,19 @@
         {% set spaciousClass = ' ons-panel--spacious' %}
     {% endif %}
 
-    {% if params.type == "warn-branded" or params.type == "announcement" %}
+    {% if params.variant == "warn-branded" or params.variant == "announcement" %}
         <div class="{{containerClass}}">
             <div class="ons-container">
     {% endif %}
 
-        <div {% if (params.type == 'error' and params.title) or params.type == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if not isDesignSystemExample %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
+        <div {% if (params.variant == 'error' and params.title) or params.variant == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if not isDesignSystemExample %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ variantClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
 
-            {% if params.type == "warn" or params.type == "warn-branded" %}
+            {% if params.variant == "warn" or params.variant == "warn-branded" %}
                 <span class="ons-panel__icon" aria-hidden="true">!</span>
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
             {% endif %}
 
-            {% if params.type == "announcement" %}
+            {% if params.variant == "announcement" %}
                 {% from "components/icon/_macro.njk" import onsIcon %}
                 <span class="ons-panel__icon" aria-hidden="true">
                     {{-
@@ -51,21 +51,21 @@
             {% endif %}
 
             {% if params.title %}
-                {% if params.type == 'error' %}
+                {% if params.variant == 'error' %}
                     {% set defaultTitleTag = "h2" %}
                 {% else %}
                     {% set defaultTitleTag = "div" %}
                 {% endif %}
                 {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                 <div class="ons-panel__header">
-                    <{{ titleTag }} id="alert"{% if params.type %} data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
+                    <{{ titleTag }} id="alert"{% if params.variant %} data-qa="{{ params.variant }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                 </div>
             {% else %}
-                {% if not params.type or params.type == "branded" or params.type == "info" or params.type == "bare" %}
+                {% if not params.variant or params.variant == "branded" or params.variant == "info" or params.variant == "bare" %}
                     <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
-                {% elif params.type == 'error' or params.type == 'success' %} 
-                    {% set defaultText = "Completed" if params.type == "success" else "Error" %}
-                    <span{% if params.type == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
+                {% elif params.variant == 'error' or params.variant == 'success' %} 
+                    {% set defaultText = "Completed" if params.variant == "success" else "Error" %}
+                    <span{% if params.variant == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
                 {% endif %}
             {% endif %}
 
@@ -86,7 +86,7 @@
             </div>
         </div>
 
-    {% if params.type == "warn-branded" or params.type == "announcement"  %}
+    {% if params.variant == "warn-branded" or params.variant == "announcement"  %}
             </div>
         </div>
     {% endif %}