@ons/design-system 67.2.0 → 68.0.1

package/components/panel/_macro.spec.js

@@ -20,12 +20,12 @@ describe('macro: panel', () => {
     ['branded', 'Important information:'],
     ['success', 'Completed:'],
     ['announcement', 'Announcement:'],
-  ])('mode: %s', (panelType, accessibleText) => {
+  ])('mode: %s', (panelVariant, accessibleText) => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
       const results = await axe($.html());
@@ -36,18 +36,18 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
-      expect($('.ons-panel').hasClass(`ons-panel--${panelType}`)).toBe(true);
+      expect($('.ons-panel').hasClass(`ons-panel--${panelVariant}`)).toBe(true);
     });
 
     it('has the provided `body` text', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -55,7 +55,7 @@ describe('macro: panel', () => {
     });
 
     it('calls with content', () => {
-      const $ = cheerio.load(renderComponent('panel', { EXAMPLE_PANEL_BASIC, type: panelType }, 'Example content...'));
+      const $ = cheerio.load(renderComponent('panel', { EXAMPLE_PANEL_BASIC, variant: panelVariant }, 'Example content...'));
 
       const content = $('.ons-panel__body').text().trim();
       expect(content).toBe('Example content...');
@@ -65,7 +65,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -76,7 +76,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
           classes: 'ons-custom-class',
         }),
       );
@@ -88,7 +88,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
           attributes: {
             a: '123',
             b: '456',
@@ -103,7 +103,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -114,7 +114,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -125,7 +125,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
           assistiveTextPrefix: 'Some helpful text:',
         }),
       );
@@ -176,13 +176,13 @@ describe('macro: panel', () => {
   describe.each([
     ['error', 'h2'],
     ['success', 'div'],
-  ])('mode: %s', (panelType, tagEl) => {
+  ])('mode: %s', (panelVariant, tagEl) => {
     it('has the default id set', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -194,7 +194,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -207,7 +207,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -219,7 +219,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -231,7 +231,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -243,7 +243,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -259,7 +259,7 @@ describe('macro: panel', () => {
           {
             ...EXAMPLE_PANEL_BASIC,
             title: 'Title',
-            type: panelType,
+            variant: panelVariant,
           },
           null,
           null,
@@ -289,7 +289,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: 'announcement',
+          variant: 'announcement',
         }),
       );
 
@@ -303,7 +303,7 @@ describe('macro: panel', () => {
 
       faker.renderComponent('panel', {
         ...EXAMPLE_PANEL_BASIC,
-        type: 'announcement',
+        variant: 'announcement',
       });
 
       expect(iconsSpy.occurrences[0].iconType).toBe('arrow-forward');
@@ -315,7 +315,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: 'warn',
+          variant: 'warn',
         }),
       );
 
@@ -328,7 +328,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: 'warn-branded',
+          variant: 'warn-branded',
         }),
       );
 
@@ -340,7 +340,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: 'warn-branded',
+          variant: 'warn-branded',
         }),
       );
 

package/components/panel/_panel.scss

@@ -1,4 +1,4 @@
-@mixin panel-type($name, $color, $color-bg) {
+@mixin panel-variant($name, $color, $color-bg) {
   .ons-panel {
     &--#{$name} {
       background: $color-bg;
@@ -144,7 +144,8 @@
 
   &--announcement {
     a:focus {
-      box-shadow: 0 -2px var(--ons-color-focus), 0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
+      box-shadow: 0 -2px var(--ons-color-focus),
+        0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
     }
   }
 
@@ -249,10 +250,10 @@
   }
 }
 
-@include panel-type(error, var(--ons-color-errors), var(--ons-color-errors-tint));
-@include panel-type(success, var(--ons-color-success), var(--ons-color-success-tint));
-@include panel-type(info, var(--ons-color-info), var(--ons-color-info-tint));
-@include panel-type(branded, var(--ons-color-branded), var(--ons-color-branded-tint));
-@include panel-type(warn, transparent, transparent);
-@include panel-type(warn-branded, var(--ons-color-branded-tertiary), var(--ons-color-branded-tertiary));
-@include panel-type(announcement, var(--ons-color-black), var(--ons-color-black));
+@include panel-variant(error, var(--ons-color-errors), var(--ons-color-errors-tint));
+@include panel-variant(success, var(--ons-color-success), var(--ons-color-success-tint));
+@include panel-variant(info, var(--ons-color-info), var(--ons-color-info-tint));
+@include panel-variant(branded, var(--ons-color-branded), var(--ons-color-branded-tint));
+@include panel-variant(warn, transparent, transparent);
+@include panel-variant(warn-branded, var(--ons-color-branded-tertiary), var(--ons-color-branded-tertiary));
+@include panel-variant(announcement, var(--ons-color-black), var(--ons-color-black));

package/components/panel/example-panel-bare.njk

@@ -1,9 +1,8 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsPanel({
-        "type": 'bare',
-        "iconType": 'lock'
-    })
-%}
+    "variant": 'bare',
+    "iconType": 'lock'
+}) %}
     Here is some text with an icon
 {% endcall %}

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

@@ -1,18 +1,14 @@
 ---
-
 "fullWidth": true
 ---
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsPanel({
-        "type": 'announcement'
-    })
-%}
-
-<p class="ons-u-mb-no">National lockdown: stay at home</p>
-
-<div class="ons-u-fs-r">
-    <p>Coronavirus (COVID-19) remains a serious threat across the country. <a href="#0">Find out more</a></p>
-</div>
+    "variant": 'announcement'
+}) %}
+    <p class="ons-u-mb-no">National lockdown: stay at home</p>
 
+    <div class="ons-u-fs-r">
+        <p>Coronavirus (COVID-19) remains a serious threat across the country. <a href="#0">Find out more</a></p>
+    </div>
 {% endcall %}

package/components/panel/example-panel-with-error-summary.njk

@@ -2,8 +2,8 @@
 {% from "components/list/_macro.njk" import onsList %}
 
 {% call onsPanel({
-        "title": 'There are 2 problems with your answer',
-        "type": 'error'
+    "title": 'There are 2 problems with your answer',
+    "variant": 'error'
 }) %}
     {{
         onsList({

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

@@ -1,5 +1,4 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
-
 {{
     onsPanel({
         "body": '<p>Include all rooms built or converted for use as bedrooms</p>'

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);
       });