@ons/design-system 67.2.0 → 69.0.0

package/components/panel/example-panel-with-success-message.njk

@@ -2,7 +2,7 @@
 
 {{
     onsPanel({
-        "type": 'success',
+        "variant": 'success',
         "id": 'success-id',
         "iconType": 'check',
         "body": 'Information has been successfully submitted'

package/components/panel/example-panel-with-warning.njk

@@ -1,8 +1,7 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsPanel({
-        "type": 'warn'
-    })
-%}
+    "variant": 'warn'
+}) %}
     All of the information about this person will be deleted
 {% endcall %}

package/components/password/password.dom.js

@@ -6,7 +6,7 @@ async function initialisePasswords() {
   if (passwordFields.length) {
     const Password = (await import('./password')).default;
 
-    passwordFields.forEach(field => new Password(field));
+    passwordFields.forEach((field) => new Password(field));
   }
 }
 

package/components/phase-banner/_macro.spec.js

@@ -20,18 +20,14 @@ describe('macro: phase-banner', () => {
   it('has expected html content', () => {
     const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
 
-    const htmlContent = $('.ons-phase-banner__desc')
-      .html()
-      .trim();
+    const htmlContent = $('.ons-phase-banner__desc').html().trim();
     expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
   });
 
   it('has the "Beta" badge by default', () => {
     const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
 
-    const badgeText = $('.ons-phase-banner__badge')
-      .text()
-      .trim();
+    const badgeText = $('.ons-phase-banner__badge').text().trim();
     expect(badgeText).toBe('Beta');
   });
 
@@ -43,9 +39,7 @@ describe('macro: phase-banner', () => {
       }),
     );
 
-    const badgeText = $('.ons-phase-banner__badge')
-      .text()
-      .trim();
+    const badgeText = $('.ons-phase-banner__badge').text().trim();
     expect(badgeText).toBe('Alpha');
   });
 

package/components/question/_macro.njk

@@ -74,7 +74,7 @@
                 {% from "components/panel/_macro.njk" import onsPanel %}
                 {% call onsPanel({
                     "id": params.warning.id,
-                    "type": "warn"
+                    "variant": "warn"
                 }) %}
                     <p>{{ params.warning.body }}</p>
                 {% endcall %}

package/components/question/_macro.spec.js

@@ -112,11 +112,7 @@ describe('macro: question', () => {
     it('has the `title` text', () => {
       const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_BASIC));
 
-      expect(
-        $('.ons-question__title')
-          .text()
-          .trim(),
-      ).toBe('Question title');
+      expect($('.ons-question__title').text().trim()).toBe('Question title');
     });
 
     it('has the provided `id` attribute', () => {
@@ -155,19 +151,13 @@ describe('macro: question', () => {
     it('has the `description` text', () => {
       const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_BASIC));
 
-      expect(
-        $('.ons-question__description')
-          .text()
-          .trim(),
-      ).toBe('Question description');
+      expect($('.ons-question__description').text().trim()).toBe('Question description');
     });
 
     it('calls with content', () => {
       const $ = cheerio.load(renderComponent('question', { EXAMPLE_QUESTION_BASIC }, 'Example content...'));
 
-      const content = $('.ons-question__answer')
-        .text()
-        .trim();
+      const content = $('.ons-question__answer').text().trim();
       expect(content).toEqual(expect.stringContaining('Example content...'));
     });
   });
@@ -180,7 +170,7 @@ describe('macro: question', () => {
       faker.renderComponent('question', EXAMPLE_QUESTION_WARNING);
 
       expect(panelSpy.occurrences[0]).toHaveProperty('id', 'warning-id');
-      expect(panelSpy.occurrences[0]).toHaveProperty('type', 'warn');
+      expect(panelSpy.occurrences[0]).toHaveProperty('variant', 'warn');
     });
 
     it('outputs the expected panel content', () => {
@@ -321,11 +311,7 @@ describe('macro: question', () => {
     it('has a description element visually hidden before the title', () => {
       const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_DESCRIPTION_FIRST));
 
-      expect(
-        $('.ons-question__title')
-          .text()
-          .trim(),
-      ).toBe('Question description Question title');
+      expect($('.ons-question__title').text().trim()).toBe('Question description Question title');
     });
 
     it('has the visible description element with aria-hidden attribute', () => {

package/components/question/_question.scss

@@ -4,16 +4,13 @@
   &__title {
     @extend .ons-u-mb-m;
 
-    em,
-    .ons-highlight {
-      @extend .ons-highlight;
-    }
     mark,
     .ons-instruction {
       background-color: var(--ons-color-instruction);
       color: var(--ons-color-text-inverse);
       margin-right: 0.5rem;
       padding: 0 0.5rem;
+      box-shadow: none;
     }
   }
 

package/components/question/example-question-interviewer-note.njk

@@ -24,7 +24,7 @@ layout: ~
 
 {% block main %}
     {% call onsQuestion({
-        "title": "<mark class=\"ons-instruction\">Interviewer note:</mark>Who to interview",
+        "title": "<mark>Interviewer note:</mark>Who to interview",
         "instruction": "<p>Only interview a person who was usually living at the property on <strong>Sunday 21 March 2021</strong>.</p><p>If none of those house members are available, you must save and sign out and return to the address to interview one of them at a later date.</p>",
         "submitButton": {
             "variants": "timer",

package/components/quote/_macro.spec.js

@@ -25,11 +25,7 @@ describe('macro: quote', () => {
       }),
     );
 
-    expect(
-      $('.ons-quote__text')
-        .text()
-        .trim(),
-    ).toBe('Example quote text.');
+    expect($('.ons-quote__text').text().trim()).toBe('Example quote text.');
   });
 
   it('has the provided `ref` text with a leading "—" character', () => {
@@ -40,11 +36,7 @@ describe('macro: quote', () => {
       }),
     );
 
-    expect(
-      $('.ons-quote__ref')
-        .text()
-        .trim(),
-    ).toBe('— Example quote reference.');
+    expect($('.ons-quote__ref').text().trim()).toBe('— Example quote reference.');
   });
 
   it('has a default `textFontSize` of "l"', () => {

package/components/radios/clear-radios.js

@@ -8,7 +8,7 @@ export default class ClearRadios {
     this.clearAlert = this.ariaElement.getAttribute('data-clear');
     this.clearedAlert = this.ariaElement.getAttribute('data-cleared');
 
-    this.inputs.forEach(input => input.addEventListener('click', this.setClearAttributes.bind(this)));
+    this.inputs.forEach((input) => input.addEventListener('click', this.setClearAttributes.bind(this)));
     this.button.addEventListener('click', this.clearRadios.bind(this));
     this.checkRadios();
 
@@ -22,7 +22,7 @@ export default class ClearRadios {
   }
 
   checkRadios() {
-    this.inputs.forEach(input => {
+    this.inputs.forEach((input) => {
       if (input.checked) {
         this.setClearAttributes();
       }
@@ -40,7 +40,7 @@ export default class ClearRadios {
   clearRadios() {
     event.preventDefault();
 
-    this.inputs.forEach(input => {
+    this.inputs.forEach((input) => {
       input.checked = false;
     });
 

package/components/radios/radio-with-fieldset.js

@@ -8,20 +8,20 @@ export default class RadioWithFieldset {
     if (this.selectAllChildrenInput) {
       this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
     } else {
-      this.radios.forEach(radio => radio.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
+      this.radios.forEach((radio) => radio.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
     }
   }
 
   checkChildInputsOnSelect() {
-    this.childInputs.forEach(input => {
+    this.childInputs.forEach((input) => {
       input.checked = this.selectAllChildrenInput.checked === true ? true : false;
     });
   }
 
   uncheckChildInputsOnDeselect() {
-    const isOther = this.radios.find(radio => radio.classList.contains('ons-js-other'));
+    const isOther = this.radios.find((radio) => radio.classList.contains('ons-js-other'));
     if (isOther && isOther.checked === false) {
-      this.childInputs.forEach(input => {
+      this.childInputs.forEach((input) => {
         input.checked = false;
       });
     }

package/components/radios/radios.dom.js

@@ -28,7 +28,7 @@ domready(async () => {
     const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-radio')];
     if (otherFieldsets) {
       const RadioWithInnerFieldset = (await import('./radio-with-fieldset')).default;
-      otherFieldsets.forEach(otherFieldset => {
+      otherFieldsets.forEach((otherFieldset) => {
         const context = otherFieldset.closest('.ons-radio');
         new RadioWithInnerFieldset(context);
       });

package/components/radios/radios.spec.js

@@ -64,14 +64,14 @@ describe('script: radios', () => {
     });
 
     it('radios with other options should be given aria-expanded attributes', async () => {
-      const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+      const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpandedOption1).toBe('false');
-      const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+      const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpandedOption2).toBe('false');
     });
 
     it('radios with "open" other options should not be given aria-expanded attributes', async () => {
-      const hasAriaExpandedOption3 = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+      const hasAriaExpandedOption3 = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
       expect(hasAriaExpandedOption3).toBe(false);
     });
 
@@ -81,27 +81,27 @@ describe('script: radios', () => {
       });
 
       it('then the checked radio aria-expanded attribute should be set to true', async () => {
-        const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+        const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpandedOption1).toBe('true');
       });
 
       it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
-        const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+        const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpandedOption2).toBe('false');
       });
 
       it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
-        const hasAriaExpanded = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+        const hasAriaExpanded = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
         expect(hasAriaExpanded).toBe(false);
       });
 
       it('then the clear button should be visible', async () => {
-        const isHidden = await page.$eval('.ons-js-clear-btn', node => node.classList.contains('ons-u-db-no-js_enabled'));
+        const isHidden = await page.$eval('.ons-js-clear-btn', (node) => node.classList.contains('ons-u-db-no-js_enabled'));
         expect(isHidden).toBe(false);
       });
 
       it('then the aria live message should announce that the answer can be cleared', async () => {
-        const alertText = await page.$eval('.ons-js-clear-radio-alert', node => node.innerHTML);
+        const alertText = await page.$eval('.ons-js-clear-radio-alert', (node) => node.innerHTML);
         expect(alertText).toBe('You can clear your answer by clicking the clear selection button under the radio buttons');
       });
 
@@ -111,17 +111,17 @@ describe('script: radios', () => {
         });
 
         it('then the checked radio aria-expanded attribute should be set to true', async () => {
-          const ariaExpandedOption2 = await page.$eval('#phone', node => node.getAttribute('aria-expanded'));
+          const ariaExpandedOption2 = await page.$eval('#phone', (node) => node.getAttribute('aria-expanded'));
           expect(ariaExpandedOption2).toBe('true');
         });
 
         it('then the unchecked radio aria-expanded attribute should be set to false', async () => {
-          const ariaExpandedOption1 = await page.$eval('#email', node => node.getAttribute('aria-expanded'));
+          const ariaExpandedOption1 = await page.$eval('#email', (node) => node.getAttribute('aria-expanded'));
           expect(ariaExpandedOption1).toBe('false');
         });
 
         it('then the unchecked radio aria-expanded attribute of "open" radio should not be set', async () => {
-          const hasAriaExpanded = await page.$eval('#text', node => node.hasAttribute('aria-expanded'));
+          const hasAriaExpanded = await page.$eval('#text', (node) => node.hasAttribute('aria-expanded'));
           expect(hasAriaExpanded).toBe(false);
         });
       });
@@ -129,30 +129,30 @@ describe('script: radios', () => {
 
     describe('the clear button is clicked', () => {
       beforeEach(async () => {
-        await page.$eval('.ons-js-clear-btn', node => node.click());
+        await page.$eval('.ons-js-clear-btn', (node) => node.click());
       });
 
       it('then the clear button should not be visible', async () => {
-        const isHidden = await page.$eval('.ons-js-clear-btn', node => node.classList.contains('ons-u-db-no-js_enabled'));
+        const isHidden = await page.$eval('.ons-js-clear-btn', (node) => node.classList.contains('ons-u-db-no-js_enabled'));
         expect(isHidden).toBe(true);
       });
 
       it('then the aria live message should announce that the answer has been cleared', async () => {
-        const alertText = await page.$eval('.ons-js-clear-radio-alert', node => node.innerHTML);
+        const alertText = await page.$eval('.ons-js-clear-radio-alert', (node) => node.innerHTML);
         expect(alertText).toBe('You have cleared your answer');
       });
 
       it('then all radios should not be checked', async () => {
-        const checkedRadios = await page.$$eval('.ons-js-radio', nodes => nodes.map(node => node.checked));
+        const checkedRadios = await page.$$eval('.ons-js-radio', (nodes) => nodes.map((node) => node.checked));
         expect(checkedRadios).not.toContain(true);
       });
 
       it('then all other input fields should be empty', async () => {
-        const emailOtherValue = await page.$eval('#email-other', node => node.value);
+        const emailOtherValue = await page.$eval('#email-other', (node) => node.value);
         expect(emailOtherValue).toBe('');
-        const telOtherValue = await page.$eval('#tel-other', node => node.value);
+        const telOtherValue = await page.$eval('#tel-other', (node) => node.value);
         expect(telOtherValue).toBe('');
-        const textOtherValue = await page.$eval('#text-other', node => node.value);
+        const textOtherValue = await page.$eval('#text-other', (node) => node.value);
         expect(textOtherValue).toBe('');
       });
     });
@@ -163,7 +163,7 @@ describe('script: radios', () => {
       });
 
       it('then the radio button should be checked', async () => {
-        const isRadioChecked = await page.$eval('#text', node => node.checked);
+        const isRadioChecked = await page.$eval('#text', (node) => node.checked);
         expect(isRadioChecked).toBe(true);
       });
     });
@@ -174,13 +174,13 @@ describe('script: radios', () => {
       });
 
       it('then the input should have a tab index of 0', async () => {
-        const tabIndex = await page.$eval('#text-other', node => node.getAttribute('tabindex'));
+        const tabIndex = await page.$eval('#text-other', (node) => node.getAttribute('tabindex'));
         expect(tabIndex).toBe('0');
       });
     });
   });
 
-  describe('reveal and fieldset', function() {
+  describe('reveal and fieldset', function () {
     const params = {
       legend: 'What are your favourite pizza toppings?',
       name: 'food-other',
@@ -237,7 +237,7 @@ describe('script: radios', () => {
     });
 
     it('radios with other options should be given aria-expanded attributes', async () => {
-      const ariaExpanded = await page.$eval('#other-radio', node => node.getAttribute('aria-expanded'));
+      const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpanded).toBe('false');
     });
 
@@ -247,7 +247,7 @@ describe('script: radios', () => {
       });
 
       it('has aria-expanded attribute should be set to true', async () => {
-        const ariaExpanded = await page.$eval('#other-radio', node => node.getAttribute('aria-expanded'));
+        const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpanded).toBe('true');
       });
 
@@ -257,7 +257,7 @@ describe('script: radios', () => {
         });
 
         it('the radio with an other input aria-expanded attribute changes', async () => {
-          const ariaExpanded = await page.$eval('#other-radio', node => node.getAttribute('aria-expanded'));
+          const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
           expect(ariaExpanded).toBe('false');
         });
       });
@@ -273,12 +273,12 @@ describe('script: radios', () => {
           });
 
           it('the other radio aria-expanded attribute should be set to false', async () => {
-            const ariaExpanded = await page.$eval('#other-radio', node => node.getAttribute('aria-expanded'));
+            const ariaExpanded = await page.$eval('#other-radio', (node) => node.getAttribute('aria-expanded'));
             expect(ariaExpanded).toBe('false');
           });
 
           it('the child of other checkbox should be unchecked', async () => {
-            const innerInputChecked = await page.$eval('#inner-bacon-other', node => node.checked);
+            const innerInputChecked = await page.$eval('#inner-bacon-other', (node) => node.checked);
             expect(innerInputChecked).toBe(false);
           });
         });

package/components/related-content/_macro.spec.js

@@ -82,9 +82,7 @@ describe('macro: related-content', () => {
     it('calls with content', () => {
       const $ = cheerio.load(renderComponent('related-content', { EXAMPLE_RELATED_CONTENT_GENERAL }, 'Example content...'));
 
-      const content = $('.ons-related-content')
-        .text()
-        .trim();
+      const content = $('.ons-related-content').text().trim();
       expect(content).toEqual(expect.stringContaining('Example content...'));
     });
   });
@@ -105,7 +103,7 @@ describe('macro: related-content', () => {
     it('has the `aria-labelledby` attribute for each section of links', () => {
       const $ = cheerio.load(renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS));
 
-      const values = mapAll($('.ons-related-content__navigation'), node => node.attr('aria-labelledby'));
+      const values = mapAll($('.ons-related-content__navigation'), (node) => node.attr('aria-labelledby'));
       expect(values).toEqual(['related-articles', 'related-links']);
     });
 

package/components/related-content/_section-macro.spec.js

@@ -20,11 +20,7 @@ describe('macro: related-content/section', () => {
 
   it('has the provided `title` text', () => {
     const $ = cheerio.load(renderComponent('related-content/section', EXAMPLE_RELATED_SECTION_CONTENT));
-    expect(
-      $('.ons-related-content__title')
-        .text()
-        .trim(),
-    ).toEqual('Related information');
+    expect($('.ons-related-content__title').text().trim()).toEqual('Related information');
   });
 
   it('has the `id` attribute for the title', () => {
@@ -35,9 +31,7 @@ describe('macro: related-content/section', () => {
   it('has the provided content', () => {
     const $ = cheerio.load(renderComponent('related-content/section', { EXAMPLE_RELATED_SECTION_CONTENT }, 'Example content...'));
 
-    const content = $('.ons-related-content__content')
-      .text()
-      .trim();
+    const content = $('.ons-related-content__content').text().trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 });

package/components/relationships/example-relationships-error.njk

@@ -25,24 +25,22 @@ layout: ~
 
 {% block main %}
 
-    {% call
-        onsPanel({
-            title: "There is a problem with your answer",
-            type: "error"
-        })
-    %}
-    {{
-        onsList({
-            "element": "ol",
-            "itemsList": [
-                {
-                    "text": "Select a relationship",
-                    "url": "#relationship-error",
-                    "variants": "inPageLink"
-                }
-            ]
-        })
-    }}
+    {% call onsPanel({
+        "title": "There is a problem with your answer",
+        "variant": "error"
+    }) %}
+        {{
+            onsList({
+                "element": "ol",
+                "itemsList": [
+                    {
+                        "text": "Select a relationship",
+                        "url": "#relationship-error",
+                        "variants": "inPageLink"
+                    }
+                ]
+            })
+        }}
     {% endcall %}
     {% call onsQuestion({
         "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",

package/components/relationships/relationships.dom.js

@@ -6,6 +6,6 @@ domready(async () => {
   if (relationships.length) {
     const Relationships = (await import('./relationships')).default;
 
-    relationships.forEach(element => new Relationships(element));
+    relationships.forEach((element) => new Relationships(element));
   }
 });

package/components/relationships/relationships.js

@@ -7,7 +7,7 @@ export default class Relationships {
     this.radios = [...context.querySelectorAll('input[type=radio]')];
     this.playback = context.querySelector('.ons-js-relationships-playback');
 
-    this.radios.forEach(radio => radio.addEventListener('change', this.setPlayback.bind(this)));
+    this.radios.forEach((radio) => radio.addEventListener('change', this.setPlayback.bind(this)));
 
     this.setPlayback();
 
@@ -15,7 +15,7 @@ export default class Relationships {
   }
 
   setPlayback() {
-    const radio = this.radios.find(radio => radio.checked);
+    const radio = this.radios.find((radio) => radio.checked);
 
     if (radio) {
       const title = radio.getAttribute('data-title');

package/components/reply/_macro.spec.js

@@ -13,9 +13,9 @@ const EXAMPLE_TEXTAREA = {
     description: 'Reply description',
   },
   charCheckLimit: {
-      limit: 300,
-      charCountSingular: '{x} more character needed',
-      charCountPlural: '{x} more characters needed',
+    limit: 300,
+    charCountSingular: '{x} more character needed',
+    charCountPlural: '{x} more characters needed',
   },
   rows: 5,
 };

package/components/reply/reply.dom.js

@@ -6,7 +6,7 @@ async function initialise() {
   if (replyInputs.length) {
     const ReplyInput = (await import('./reply-input')).default;
 
-    replyInputs.forEach(input => new ReplyInput(input));
+    replyInputs.forEach((input) => new ReplyInput(input));
   }
 }
 

package/components/reply/reply.spec.js

@@ -29,7 +29,7 @@ describe('script: reply', () => {
 
     it('the button has classes applied', async () => {
       await setTestPage('/test', renderComponent('reply', EXAMPLE_REPLY));
-      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      const disabledButton = await page.$eval('#reply-button', (element) => element.classList.contains('ons-btn--disabled'));
       expect(disabledButton).toBe(true);
     });
   });
@@ -49,7 +49,7 @@ describe('script: reply', () => {
       await page.focus('#reply-textarea');
       await page.keyboard.type('Sausages');
 
-      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      const disabledButton = await page.$eval('#reply-button', (element) => element.classList.contains('ons-btn--disabled'));
       expect(disabledButton).toBe(false);
     });
   });
@@ -71,7 +71,7 @@ describe('script: reply', () => {
       await page.keyboard.type('s');
       await page.keyboard.press('Backspace');
 
-      const disabledButton = await page.$eval('#reply-button', element => element.classList.contains('ons-btn--disabled'));
+      const disabledButton = await page.$eval('#reply-button', (element) => element.classList.contains('ons-btn--disabled'));
       expect(disabledButton).toBe(true);
     });
   });