@ons/design-system 67.2.0 → 69.0.0

package/components/char-check-limit/character-check.spec.js

@@ -2,7 +2,7 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_INPUT_WITH_CHARACTER_CHECK = {
   id: 'search-field',
-  type: 'number',
+  variant: 'number',
   width: '6',
   label: {
     text: 'Filter results',
@@ -24,7 +24,7 @@ const EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE = {
   id: 'feedback',
   name: 'feedback',
   width: '30',
-  legend: 'Feeback legend',
+  legend: 'Feedback legend',
   label: {
     text: 'Enter your feedback',
   },
@@ -59,12 +59,12 @@ describe('script: character-check', () => {
 
     describe('Given that the char check helper has initialised correctly', () => {
       it('the char check readout should be invisible', async () => {
-        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(true);
       });
 
       it('then the character limit readout should reflect the number of characters remaining', async () => {
-        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
         expect(innerHtml.trim()).toBe('You have 11 characters remaining');
       });
     });
@@ -76,17 +76,17 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 10 characters remaining');
         });
 
         it('the char check readout should be visible', async () => {
-          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(false);
         });
 
         it('then aria-live should be set to polite', async () => {
-          const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
+          const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
           expect(ariaLiveAttribute).toBe('polite');
         });
       });
@@ -97,7 +97,7 @@ describe('script: character-check', () => {
         });
 
         it('the char check readout should be invisible', async () => {
-          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(true);
         });
       });
@@ -108,7 +108,7 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 1 character remaining');
         });
       });
@@ -120,24 +120,26 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
         expect(innerHtml.trim()).toBe('1 number too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
-        const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
+        const hasClassOnSearchInput = await page.$eval('#search-field', (element) =>
+          element.classList.contains('ons-input--limit-reached'),
+        );
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', (element) =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -150,24 +152,26 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
         expect(innerHtml.trim()).toBe('2 numbers too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
-        const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
+        const hasClassOnSearchInput = await page.$eval('#search-field', (element) =>
+          element.classList.contains('ons-input--limit-reached'),
+        );
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', (element) =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -188,7 +192,7 @@ describe('script: character-check', () => {
       });
 
       it('then aria-live attribute should removed', async () => {
-        const hasAriaLiveAttribute = await page.$eval('#feedback-lim', element => element.hasAttribute('aria-live'));
+        const hasAriaLiveAttribute = await page.$eval('#feedback-lim', (element) => element.hasAttribute('aria-live'));
         expect(hasAriaLiveAttribute).toBe(false);
       });
     });

package/components/checkboxes/_checkbox-macro.njk

@@ -7,7 +7,7 @@
             id="{{ params.id }}"
             class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses else '' }}"
             value="{{ params.value }}"
-            {% if params.disabled == true %}disabled aria-disabled="true"{%endif %}
+            {% if params.disabled == true %}disabled aria-disabled="true"{% endif %}
             {% if params.name %} name="{{ params.name }}"{% endif %}
             {% if params.checked %} checked{% endif %}
             {% if params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% endif %}

package/components/checkboxes/_checkbox.scss

@@ -24,7 +24,6 @@ $checkbox-padding: 11px;
     // Check icon
     &::after {
       border: solid var(--ons-color-input-border);
-      border-radius: 1px;
       border-top-color: var(--ons-color-input-bg);
       border-width: 0 0 3px 3px;
       box-sizing: border-box;
@@ -94,7 +93,6 @@ $checkbox-padding: 11px;
 
       &:checked,
       &:focus {
-
         & + .ons-checkbox__label::before {
           background: none;
           border: none;
@@ -122,7 +120,6 @@ $checkbox-padding: 11px;
 
       &:checked,
       &:focus {
-
         & + .ons-checkbox__label::before {
           background: none;
           border: none;

package/components/checkboxes/_macro.spec.js

@@ -125,11 +125,7 @@ describe('macro: checkboxes', () => {
     it('has the expected text', () => {
       const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOXES));
 
-      expect(
-        $('.ons-checkboxes__label')
-          .text()
-          .trim(),
-      ).toBe('Select all that apply');
+      expect($('.ons-checkboxes__label').text().trim()).toBe('Select all that apply');
     });
 
     it('has additionally provided `checkboxesLabelClasses`', () => {

package/components/checkboxes/checkbox-with-autoselect.js

@@ -6,7 +6,7 @@ export default class CheckboxWithAutoSelect {
     this.insideReveal = insideReveal;
     // Event listeners
     this.button.addEventListener('click', this.handleButtonEvent.bind(this));
-    this.checkboxes.forEach(checkbox => checkbox.addEventListener('change', this.handleCheckboxEvent.bind(this)));
+    this.checkboxes.forEach((checkbox) => checkbox.addEventListener('change', this.handleCheckboxEvent.bind(this)));
     if (this.insideReveal) {
       this.insideReveal.addEventListener('change', this.handleCheckboxEvent.bind(this));
     }
@@ -23,7 +23,7 @@ export default class CheckboxWithAutoSelect {
 
   handleButtonEvent(event) {
     event.preventDefault();
-    this.checkboxes.forEach(checkbox => {
+    this.checkboxes.forEach((checkbox) => {
       checkbox.checked = this.allChecked === false ? true : false;
     });
     this.buttonText.innerHTML = this.allChecked === false ? this.unselectAllText : this.selectAllText;
@@ -31,7 +31,7 @@ export default class CheckboxWithAutoSelect {
   }
 
   handleCheckboxEvent() {
-    const totalChecked = this.checkboxes.filter(checkbox => checkbox.checked).length;
+    const totalChecked = this.checkboxes.filter((checkbox) => checkbox.checked).length;
     this.buttonText.innerHTML = totalChecked === this.numberOfCheckboxes ? this.unselectAllText : this.selectAllText;
     this.allChecked = totalChecked === this.numberOfCheckboxes ? true : false;
   }

package/components/checkboxes/checkbox-with-fieldset.js

@@ -13,14 +13,14 @@ export default class CheckboxWithFieldset {
   }
 
   checkChildInputsOnSelect() {
-    this.childInputs.forEach(input => {
+    this.childInputs.forEach((input) => {
       input.checked = this.selectAllChildrenInput.checked === true ? true : false;
     });
   }
 
   uncheckChildInputsOnDeselect() {
     if (this.checkbox.checked === false) {
-      this.childInputs.forEach(input => {
+      this.childInputs.forEach((input) => {
         input.checked = false;
       });
     }

package/components/checkboxes/checkboxes-with-reveal.js

@@ -1,11 +1,13 @@
 export default class Checkboxes {
   constructor(inputs) {
     this.inputs = inputs;
-    this.inputs.forEach(input => input.addEventListener('change', this.setExpandedAttributes.bind(this)));
+    this.inputs.forEach((input) => input.addEventListener('change', this.setExpandedAttributes.bind(this)));
     this.setExpandedAttributes();
   }
 
   setExpandedAttributes() {
-    this.inputs.filter(input => input.hasAttribute('aria-haspopup')).forEach(input => input.setAttribute('aria-expanded', input.checked));
+    this.inputs
+      .filter((input) => input.hasAttribute('aria-haspopup'))
+      .forEach((input) => input.setAttribute('aria-expanded', input.checked));
   }
 }

package/components/checkboxes/checkboxes.dom.js

@@ -18,7 +18,7 @@ domready(async () => {
     const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-checkbox')];
     if (otherFieldsets) {
       const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
-      otherFieldsets.forEach(otherFieldset => {
+      otherFieldsets.forEach((otherFieldset) => {
         const context = otherFieldset.closest('.ons-checkbox');
         new CheckboxWithInnerFieldset(context);
       });
@@ -27,7 +27,7 @@ domready(async () => {
     const autoSelectButtons = [...document.querySelectorAll('.ons-js-auto-selector')];
     if (autoSelectButtons) {
       const CheckboxWithAutoSelect = (await import('./checkbox-with-autoselect')).default;
-      autoSelectButtons.forEach(button => {
+      autoSelectButtons.forEach((button) => {
         const context = button.parentNode;
         const insideReveal = context.parentNode.parentNode.querySelector('.ons-js-other');
         new CheckboxWithAutoSelect(context, button, insideReveal);

package/components/checkboxes/checkboxes.spec.js

@@ -47,12 +47,12 @@ describe('script: checkboxes', () => {
       });
 
       it('all checkboxes should be checked', async () => {
-        const checkedStates = await page.$$eval('.ons-js-checkbox', nodes => nodes.map(node => node.checked));
+        const checkedStates = await page.$$eval('.ons-js-checkbox', (nodes) => nodes.map((node) => node.checked));
         expect(checkedStates).toEqual([true, true, true]);
       });
 
       it('the button text should have changed', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', node => node.textContent);
+        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
         expect(buttonText).toBe('Unselect all');
       });
     });
@@ -64,23 +64,23 @@ describe('script: checkboxes', () => {
       });
 
       it('all checkboxes should be unchecked', async () => {
-        const checkedStates = await page.$$eval('.ons-js-checkbox', nodes => nodes.map(node => node.checked));
+        const checkedStates = await page.$$eval('.ons-js-checkbox', (nodes) => nodes.map((node) => node.checked));
         expect(checkedStates).toEqual([false, false, false]);
       });
 
       it('the button text should have changed', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', node => node.textContent);
+        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
         expect(buttonText).toBe('Select all');
       });
     });
 
     describe('when all except one checkbox is checked', () => {
       beforeEach(async () => {
-        await page.$eval('#olives-other', node => (node.checked = true));
+        await page.$eval('#olives-other', (node) => (node.checked = true));
       });
 
       it('the button text should be select all', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', node => node.textContent);
+        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
         expect(buttonText).toBe('Select all');
       });
     });
@@ -93,13 +93,13 @@ describe('script: checkboxes', () => {
       });
 
       it('the button text should be unselect all', async () => {
-        const buttonText = await page.$eval('.ons-js-button-text', node => node.textContent);
+        const buttonText = await page.$eval('.ons-js-button-text', (node) => node.textContent);
         expect(buttonText).toBe('Unselect all');
       });
     });
   });
 
-  describe('reveal and fieldset', function() {
+  describe('reveal and fieldset', function () {
     const params = {
       legend: 'What are your favourite pizza toppings?',
       checkboxesLabel: 'Select all that apply',
@@ -157,7 +157,7 @@ describe('script: checkboxes', () => {
     });
 
     it('checkboxes with other options should be given aria-expanded attributes', async () => {
-      const ariaExpanded = await page.$eval('#other-checkbox', node => node.getAttribute('aria-expanded'));
+      const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
       expect(ariaExpanded).toBe('false');
     });
 
@@ -167,7 +167,7 @@ describe('script: checkboxes', () => {
       });
 
       it('has aria-expanded attribute should be set to true', async () => {
-        const ariaExpanded = await page.$eval('#other-checkbox', node => node.getAttribute('aria-expanded'));
+        const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
         expect(ariaExpanded).toBe('true');
       });
 
@@ -177,7 +177,7 @@ describe('script: checkboxes', () => {
         });
 
         it('the checkbox with an other input aria-expanded attribute not change', async () => {
-          const ariaExpanded = await page.$eval('#other-checkbox', node => node.getAttribute('aria-expanded'));
+          const ariaExpanded = await page.$eval('#other-checkbox', (node) => node.getAttribute('aria-expanded'));
           expect(ariaExpanded).toBe('true');
         });
       });
@@ -193,12 +193,12 @@ describe('script: checkboxes', () => {
           });
 
           it('its aria-expanded attribute should be set to false', async () => {
-            const ariaExpanded = await page.$eval('#other-checkbox', node => node.getAttribute('aria-expanded'));
+            const ariaExpanded = await page.$eval('#other-checkbox', (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/content-pagination/_macro.spec.js

@@ -128,7 +128,7 @@ describe('macro: content-pagination', () => {
       it('renders the provided `bridgingText`', () => {
         const $ = cheerio.load(
           renderComponent('content-pagination', {
-            contentPaginationItems: params.contentPaginationItems.map(item => ({
+            contentPaginationItems: params.contentPaginationItems.map((item) => ({
               ...item,
               bridgingText: 'custom bridging text:',
             })),
@@ -177,7 +177,7 @@ describe('macro: content-pagination', () => {
       it('renders the provided `bridgingText`', () => {
         const $ = cheerio.load(
           renderComponent('content-pagination', {
-            contentPaginationItems: params.contentPaginationItems.map(item => ({
+            contentPaginationItems: params.contentPaginationItems.map((item) => ({
               ...item,
               bridgingText: 'custom bridging text:',
             })),

package/components/cookies-banner/cookies-banner.dom.js

@@ -5,7 +5,7 @@ async function cookiesBanner() {
 
   if (cookiesBanner.length) {
     const CookiesBanner = (await import('./cookies-banner')).default;
-    cookiesBanner.forEach(banner => {
+    cookiesBanner.forEach((banner) => {
       new CookiesBanner(banner);
     });
   }

package/components/cookies-banner/cookies-banner.js

@@ -70,7 +70,7 @@ export default class CookiesBanner {
 
   updateRadios(action) {
     const radios = [...document.querySelectorAll('.ons-js-radio')];
-    radios.forEach(radio => {
+    radios.forEach((radio) => {
       if (action == 'reject') {
         radio.value == 'off' ? (radio.checked = true) : (radio.checked = false);
       } else if (action == 'accept') {

package/components/cookies-banner/cookies-banner.spec.js

@@ -11,7 +11,7 @@ describe('script: cookies-banner', () => {
   it('should show the cookie banner', async () => {
     await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+    const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
     expect(displayStyle).toBe('block');
   });
   describe.each([
@@ -24,7 +24,7 @@ describe('script: cookies-banner', () => {
       await page.click(`.ons-js-${action}-cookies`);
 
       const cookies = await page.cookies();
-      const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
+      const ons_cookie_policy = cookies.find((cookie) => cookie.name === 'ons_cookie_policy');
       const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
 
       expect(policy).toEqual({
@@ -41,7 +41,7 @@ describe('script: cookies-banner', () => {
       await page.click(`.ons-js-${action}-cookies`);
 
       const cookies = await page.cookies();
-      const ons_cookie_message_displayed = cookies.find(cookie => cookie.name === 'ons_cookie_message_displayed');
+      const ons_cookie_message_displayed = cookies.find((cookie) => cookie.name === 'ons_cookie_message_displayed');
 
       expect(ons_cookie_message_displayed.value).toBe('true');
     });
@@ -51,7 +51,7 @@ describe('script: cookies-banner', () => {
 
       await page.click(`.ons-js-${action}-cookies`);
 
-      const displayStyle = await page.$eval('.ons-cookies-banner__primary', node =>
+      const displayStyle = await page.$eval('.ons-cookies-banner__primary', (node) =>
         window.getComputedStyle(node).getPropertyValue('display'),
       );
       expect(displayStyle).toBe('none');
@@ -62,7 +62,7 @@ describe('script: cookies-banner', () => {
 
       await page.click(`.ons-js-${action}-cookies`);
 
-      const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', node =>
+      const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', (node) =>
         window.getComputedStyle(node).getPropertyValue('display'),
       );
       expect(displayStyle).not.toBe('none');
@@ -76,7 +76,7 @@ describe('script: cookies-banner', () => {
       await page.click('.ons-js-accept-cookies');
       await page.click('.ons-js-hide-button');
 
-      const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+      const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
       expect(displayStyle).toBe('none');
     });
   });
@@ -87,7 +87,7 @@ describe('script: cookies-banner', () => {
 
       await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-      const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+      const displayStyle = await page.$eval('.ons-cookies-banner', (node) => window.getComputedStyle(node).getPropertyValue('display'));
       expect(displayStyle).toBe('none');
     });
   });

package/components/details/details.spec.js

@@ -7,18 +7,18 @@ const EXAMPLE_DETAILS_BASIC = {
 };
 
 const EXAMPLE_PAGE = `
-      ${renderComponent('details', {
-        id: 'details-id',
-        title: 'Title for details',
-        content: 'Content for details',
-      })}
-
-      ${renderComponent('details', {
-        id: 'details-id-2',
-        title: 'Title for details',
-        content: 'Content for details',
-      })}
-  `;
+  ${renderComponent('details', {
+    id: 'details-id',
+    title: 'Title for details',
+    content: 'Content for details',
+  })}
+
+  ${renderComponent('details', {
+    id: 'details-id-2',
+    title: 'Title for details',
+    content: 'Content for details',
+  })}
+`;
 
 const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
 

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

@@ -2,16 +2,14 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsDetails({
-        "id": "details-example-with-warning",
-        "title": "Need to answer separately from your household?"
-    })
-%}
+    "id": "details-example-with-warning",
+    "title": "Need to answer separately from your household?"
+}) %}
 
     <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start a separate survey.</p>
     {% call onsPanel({
-            type: "warn"
-        })
-    %}
+        "variant": "warn"
+    }) %}
         Someone in your household must still complete a survey using a household access code
     {% endcall %}
 

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

@@ -167,9 +167,7 @@ describe('macro: document list', () => {
 
     it('has expected `title`', () => {
       const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC] }));
-      const title = $('.ons-document-list__item-title a')
-        .html()
-        .trim();
+      const title = $('.ons-document-list__item-title a').html().trim();
       expect(title).toBe('Crime and justice');
     });
 
@@ -180,9 +178,7 @@ describe('macro: document list', () => {
 
     it('has expected `description`', () => {
       const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC] }));
-      const title = $('.ons-document-list__item-description')
-        .html()
-        .trim();
+      const title = $('.ons-document-list__item-description').html().trim();
       expect(title).toBe('Some description');
     });
   });
@@ -244,9 +240,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const hiddenText = $('.ons-document-list__item-title a .ons-u-vh')
-        .text()
-        .trim();
+      const hiddenText = $('.ons-document-list__item-title a .ons-u-vh').text().trim();
       expect(hiddenText).toBe(', PDF document download, 499KB, 1 page');
     });
 
@@ -257,9 +251,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const hiddenText = $('.ons-document-list__item-attribute')
-        .text()
-        .trim();
+      const hiddenText = $('.ons-document-list__item-attribute').text().trim();
       expect(hiddenText).toBe('PDF, 499KB, 1 page');
     });
   });
@@ -289,17 +281,13 @@ describe('macro: document list', () => {
 
     it('has expected `text`', () => {
       const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] }));
-      const text = $('.ons-document-list__attribute-link > span')
-        .text()
-        .trim();
+      const text = $('.ons-document-list__attribute-link > span').text().trim();
       expect(text).toBe('Poster:');
     });
 
     it('has expected `ref`', () => {
       const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] }));
-      const text = $('.ons-document-list__attribute-link + span')
-        .text()
-        .trim();
+      const text = $('.ons-document-list__attribute-link + span').text().trim();
       expect(text).toBe('some ref');
     });
   });
@@ -343,9 +331,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const text = $('.ons-document-list__item-attribute > span')
-        .text()
-        .trim();
+      const text = $('.ons-document-list__item-attribute > span').text().trim();
       expect(text).toBe('Published:');
     });
 
@@ -386,9 +372,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const text = $('.ons-document-list__item-attribute > span')
-        .text()
-        .trim();
+      const text = $('.ons-document-list__item-attribute > span').text().trim();
       expect(text).toBe('Released:');
     });
 
@@ -449,9 +433,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const time = $('.ons-document-list__item-attribute time')
-        .text()
-        .trim();
+      const time = $('.ons-document-list__item-attribute time').text().trim();
       expect(time).toBe('1 January 2022');
     });
   });

package/components/document-list/document-list.scss

@@ -62,7 +62,7 @@
     width: 100%;
 
     &:focus {
-      background-color: var(--ons-color-placeholder) !important;
+      background-color: var(--ons-color-image-placeholder) !important;
       border: 2px solid var(--ons-color-borders-document-image-focus);
       box-shadow: none;
       outline: 4px solid var(--ons-color-focus) !important;