From 35ca312be287cbaafeb2b72e0a0173ef2d100230 Mon Sep 17 00:00:00 2001 From: rmccar <42928680+rmccar@users.noreply.github.com> Date: Tue, 21 Nov 2023 15:32:34 +0000 Subject: [PATCH] Revert details component to JS version to fix printing issue (#2944) --- ...le-accordion-open_0_document_0_desktop.png | 2 +- ...ple-accordion-open_0_document_1_tablet.png | 4 +- ...h-timeout-warning_0_document_0_desktop.png | 4 +- ...th-timeout-warning_0_document_1_tablet.png | 4 +- ...th-timeout-warning_0_document_2_mobile.png | 4 +- src/components/accordion/_macro.spec.js | 10 +- src/components/accordion/accordion.dom.js | 4 +- src/components/accordion/accordion.spec.js | 41 +++--- .../accordion/example-accordion-open.njk | 2 +- src/components/card/_card.scss | 2 +- src/components/details/_details.scss | 123 ++++++++++-------- src/components/details/_macro.njk | 8 +- src/components/details/details.dom.js | 2 +- src/components/details/details.js | 14 +- src/components/details/details.spec.js | 54 ++++++-- .../details/example-details-with-warning.njk | 3 +- src/scss/objects/_page.scss | 8 +- src/scss/print.scss | 33 ++++- src/tests/helpers/rendering.js | 4 +- src/tests/helpers/rendering.spec.js | 2 +- 20 files changed, 199 insertions(+), 129 deletions(-) diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_accordion_example-accordion-open_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_accordion_example-accordion-open_0_document_0_desktop.png index 7333aefc1a..dd99396737 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_accordion_example-accordion-open_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_accordion_example-accordion-open_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c76da4e581b4970566201c939c6959c2eb228fbf89aa91bd220adb9e3684b2f5 +oid sha256:a2f97b7a4f2e401c87439afcf7febff00c7e6a60b3f341e56e3a1a0476f15991 size 34425 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_accordion_example-accordion-open_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_accordion_example-accordion-open_0_document_1_tablet.png index 1d0d95b0c8..3385d676f2 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_accordion_example-accordion-open_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_accordion_example-accordion-open_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e8a527844146ede2cc703030d3642cd03a89d991558b797a8d240431a19af90a -size 29061 +oid sha256:dc9c285441e42cb2a82146325c3c769fa82498d4434ff4b582428c5659c5f5fb +size 28440 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png index 6ff63d5d1d..7f20b39e92 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:47df53d9a4630fa991d39f9420d0920c814cbf2b78891da45b678b1f45452b04 -size 17486 +oid sha256:67986068c453ec5534fd2138bd3974e43a6b837e2603416495be0e48679a66d6 +size 17441 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png index e57dee7bd7..38d3cec173 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8cb52531d1d281043cf0541c3c8d2a5b93bbc00c3d2a60d1244b4949a954c265 -size 13505 +oid sha256:255ba5261f88e83a8fb612ac518ba06379e3d196a20b65f9d17e2b856fe84124 +size 13594 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png index f0f681a56c..2695f0770a 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f67e4ca5163a3770c17f4768fd548fc4e4ac0099d5cef4330b6176ee7c5174f2 -size 13805 +oid sha256:ca21587d7e4bf313e46414c7c484509716ee93ad9d66e7b02efc844b2757bb25 +size 13752 diff --git a/src/components/accordion/_macro.spec.js b/src/components/accordion/_macro.spec.js index 955a5cc942..017c45554f 100644 --- a/src/components/accordion/_macro.spec.js +++ b/src/components/accordion/_macro.spec.js @@ -57,10 +57,7 @@ describe('macro: accordion', () => { it('has provided title text', () => { const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS)); - const titleText = $('.ons-details__title') - .first() - .text() - .trim(); + const titleText = $('.ons-details__title').first().text().trim(); expect(titleText).toBe('Title for item 1'); }); @@ -84,10 +81,7 @@ describe('macro: accordion', () => { it('has provided content text', () => { const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS)); - const titleText = $('.ons-details__content') - .first() - .text() - .trim(); + const titleText = $('.ons-details__content').first().text().trim(); expect(titleText).toBe('Content for item 1'); }); diff --git a/src/components/accordion/accordion.dom.js b/src/components/accordion/accordion.dom.js index 11c466684b..e7c0f7724b 100644 --- a/src/components/accordion/accordion.dom.js +++ b/src/components/accordion/accordion.dom.js @@ -8,9 +8,9 @@ async function initialiseAccordions() { const Details = (await import('../details/details')).default; const Accordion = (await import('./accordion')).default; - const detailsEls = detailsComponents.map(element => new Details(element)); + const detailsEls = detailsComponents.map((element) => new Details(element)); - toggleAllButtons.forEach(button => { + toggleAllButtons.forEach((button) => { new Accordion(button, detailsEls); }); } diff --git a/src/components/accordion/accordion.spec.js b/src/components/accordion/accordion.spec.js index c7da888d5a..c4059ba958 100644 --- a/src/components/accordion/accordion.spec.js +++ b/src/components/accordion/accordion.spec.js @@ -39,10 +39,11 @@ describe('script: accordion', () => { }), ); - const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open)); - expect(openElements[0]).not.toBe(undefined); - expect(openElements[1]).not.toBe(undefined); - expect(openElements[2]).not.toBe(undefined); + const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) => + nodes.map((node) => node.classList.contains('ons-details--open')), + ); + + expect(detailsElementStates).toEqual([true, true, true]); }); it('sets toggle all button label to "Hide all" when open is specified', async () => { @@ -54,7 +55,7 @@ describe('script: accordion', () => { }), ); - const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText); + const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText); expect(buttonText.trim()).toBe('Close all'); }); @@ -67,7 +68,7 @@ describe('script: accordion', () => { }), ); - const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded')); + const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded')); expect(ariaExpanded).toBe('true'); }); @@ -76,10 +77,11 @@ describe('script: accordion', () => { await page.click('button[data-test-trigger]'); - const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open)); - expect(openElements[0]).not.toBe(undefined); - expect(openElements[1]).not.toBe(undefined); - expect(openElements[2]).not.toBe(undefined); + const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) => + nodes.map((node) => node.classList.contains('ons-details--open')), + ); + + expect(detailsElementStates).toEqual([true, true, true]); }); it('closes all items when accordion `allbutton` is clicked twice', async () => { @@ -88,23 +90,24 @@ describe('script: accordion', () => { await page.click('button[data-test-trigger]'); await page.click('button[data-test-trigger]'); - const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open)); - expect(openElements[0]).toBe(undefined); - expect(openElements[1]).toBe(undefined); - expect(openElements[2]).toBe(undefined); + const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) => + nodes.map((node) => node.classList.contains('ons-details--open')), + ); + + expect(detailsElementStates).toEqual([false, false, false]); }); it('starts with the toggle all button labelled as "Open all"', async () => { await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON)); - const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText); + const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText); expect(buttonText.trim()).toBe('Open all'); }); it('starts with the toggle all button aria-expanded set to false', async () => { await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON)); - const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded')); + const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded')); expect(ariaExpanded).toBe('false'); }); @@ -113,7 +116,7 @@ describe('script: accordion', () => { await page.click('button[data-test-trigger]'); - const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText); + const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText); expect(buttonText.trim()).toBe('Close all'); }); @@ -122,7 +125,7 @@ describe('script: accordion', () => { await page.click('button[data-test-trigger]'); - const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded')); + const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded')); expect(ariaExpanded).toBe('true'); }); @@ -133,7 +136,7 @@ describe('script: accordion', () => { await page.click('#example-accordion-2 .ons-details__heading'); await page.click('#example-accordion-3 .ons-details__heading'); - const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText); + const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText); expect(buttonText.trim()).toBe('Close all'); }); }); diff --git a/src/components/accordion/example-accordion-open.njk b/src/components/accordion/example-accordion-open.njk index a276c18769..723940a13e 100644 --- a/src/components/accordion/example-accordion-open.njk +++ b/src/components/accordion/example-accordion-open.njk @@ -105,7 +105,7 @@ {% endset %}
-
+
{{ onsAccordion({ "id": "accordion", diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss index 627cfd5e26..c489c98ae9 100644 --- a/src/components/card/_card.scss +++ b/src/components/card/_card.scss @@ -11,7 +11,7 @@ & > .ons-card__title { margin-bottom: 0; } - } + } &__link:hover { text-decoration-thickness: 3px; diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss index 25bee2bc1d..9c5bffa72a 100644 --- a/src/components/details/_details.scss +++ b/src/components/details/_details.scss @@ -1,75 +1,81 @@ $details-caret-width: 1.5rem; .ons-details { - &__heading { - color: var(--ons-color-text-link); - cursor: pointer; - display: inline-block; - outline: none; - padding: 0 0 0 $details-caret-width; - pointer-events: initial; - position: relative; - - &::marker, - &::-webkit-details-marker { - display: none; - } - - &:focus { - .ons-details__title { - @extend %a-focus; - // extend details focus background behind caret - margin-left: -$details-caret-width; - padding-left: $details-caret-width; - } - .ons-details__icon .ons-icon { - fill: var(--ons-color-text-link-focus); + &--initialised & { + &__heading { + color: var(--ons-color-text-link); + cursor: pointer; + display: inline-block; + outline: none; + padding: 0 0 0 $details-caret-width; + pointer-events: initial; + position: relative; + + &::marker, + &::-webkit-details-marker { + display: none; } - } - &:hover:not(:focus) { - color: var(--ons-color-text-link-hover); - .ons-details__icon { - fill: var(--ons-color-text-link-hover); + &:focus { + .ons-details__title { + @extend %a-focus; + // extend details focus background behind caret + margin-left: -$details-caret-width; + padding-left: $details-caret-width; + } + .ons-details__icon .ons-icon { + fill: var(--ons-color-text-link-focus); + } } - .ons-details__title { - text-decoration: underline solid var(--ons-color-text-link-hover) 2px; + + &:hover:not(:focus) { + color: var(--ons-color-text-link-hover); + .ons-details__icon { + fill: var(--ons-color-text-link-hover); + } + .ons-details__title { + text-decoration: underline solid var(--ons-color-text-link-hover) 2px; + } } } - } - &__icon { - display: inline-block; - fill: var(--ons-color-text-link); - height: $details-caret-width; - left: -0.15rem; - position: absolute; - top: -0.2rem; - width: $details-caret-width; - } + &__icon { + display: inline-block; + fill: var(--ons-color-text-link); + height: $details-caret-width; + left: -0.15rem; + position: absolute; + top: -0.2rem; + width: $details-caret-width; + } - &__title { - display: inline-block; - font-size: 1rem; - font-weight: $font-weight-bold; - margin-bottom: 0; - text-underline-position: under; - transform: translateY(-1px); - } + &__content { + display: none; + } - &__content { - border-left: 4px solid var(--ons-color-borders-indent); - display: block; - margin: 1rem 0 0; - padding: 0 0 0 1.3em; + &__title { + display: inline-block; + font-size: 1rem; + font-weight: $font-weight-bold; + margin-bottom: 0; + text-underline-position: under; + transform: translateY(-1px); + } } - &[open] & { + &--open & { &__icon { left: -0.1rem; top: 0.2rem; transform: rotate(90deg); } + + &__content { + border-left: 4px solid var(--ons-color-borders-indent); + display: block; + margin: 1rem 0 0; + padding: 0 0 0 1.3em; + } } &--accordion & { @@ -110,12 +116,15 @@ $details-caret-width: 1.5rem; padding: 0; } } -} -.ons-details--accordion { - &[open] { + &--accordion.ons-details--open { .ons-details__icon { + position: absolute; top: 1.2rem; } } + + &__icon { + display: none; + } } diff --git a/src/components/details/_macro.njk b/src/components/details/_macro.njk index 007879736d..034ecb4d73 100644 --- a/src/components/details/_macro.njk +++ b/src/components/details/_macro.njk @@ -1,5 +1,5 @@ {% macro onsDetails(params) %} -
- @@ -20,11 +20,11 @@ "iconType": "chevron" }) }} - +
{{ params.content | safe }}{{ caller() if caller }}
- +
{% endmacro %} diff --git a/src/components/details/details.dom.js b/src/components/details/details.dom.js index f1ec934764..81112d0b99 100644 --- a/src/components/details/details.dom.js +++ b/src/components/details/details.dom.js @@ -6,7 +6,7 @@ async function initialiseDetailsEls() { if (detailsComponents.length && !accordionComponents.length) { const Details = (await import('./details')).default; - detailsComponents.map(element => new Details(element)); + detailsComponents.map((element) => new Details(element)); } } diff --git a/src/components/details/details.js b/src/components/details/details.js index c0ccf2fe24..ddf986911f 100644 --- a/src/components/details/details.js +++ b/src/components/details/details.js @@ -7,17 +7,25 @@ export default class Details { // Elements this.details = detailsElement; this.detailsHeader = this.details.querySelector('.ons-js-details-heading'); + this.content = this.details.querySelector('.ons-js-details-content'); // Initialise const detailsId = detailsElement.getAttribute('id'); + this.details.setAttribute('role', 'group'); + this.detailsHeader.setAttribute('role', 'link'); + this.detailsHeader.setAttribute('aria-controls', detailsId); + this.detailsHeader.setAttribute('tabindex', 0); + if (localStorage.getItem(detailsId) || this.open) { this.setOpen(true); - this.details['setAttribute']('open', ''); + } else { + this.setOpen(false); } this.detailsHeader.addEventListener('click', this.toggle.bind(this)); this.detailsHeader.addEventListener('keydown', this.keyboardInteraction.bind(this)); + this.details.classList.add('ons-details--initialised'); } toggle(event) { @@ -28,10 +36,14 @@ export default class Details { setOpen(open) { if (open !== this.isOpen) { const action = open ? 'Open' : 'Close'; + const cls = open ? 'add' : 'remove'; const openAttribute = open ? 'set' : 'remove'; this.isOpen = open; this.details[`${openAttribute}Attribute`]('open', ''); + this.details.classList[cls]('ons-details--open'); + this.detailsHeader.setAttribute('aria-expanded', open); + this.content.setAttribute('aria-hidden', !open); this.detailsHeader.setAttribute('data-ga-action', `${action} panel`); if (this.onOpen && this.onClose) { diff --git a/src/components/details/details.spec.js b/src/components/details/details.spec.js index 8aed19bde9..67fa49139b 100644 --- a/src/components/details/details.spec.js +++ b/src/components/details/details.spec.js @@ -1,4 +1,4 @@ -import { renderComponent, setTestPage } from '../../tests/helpers/rendering'; +import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering'; const EXAMPLE_DETAILS_BASIC = { id: 'details-id', @@ -6,6 +6,22 @@ const EXAMPLE_DETAILS_BASIC = { content: 'Content for details', }; +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', + })} + `; + +const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE); + describe('script: details', () => { it('begins open when specified', async () => { await setTestPage( @@ -16,8 +32,8 @@ describe('script: details', () => { }), ); - const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null); - expect(openAttribute).toBe(true); + const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open')); + expect(detailsOpenClass).toBe(true); }); describe('when the details heading is clicked to open the details', () => { @@ -26,18 +42,34 @@ describe('script: details', () => { await page.click('.ons-js-details-heading'); }); - it('sets the `open` attribute', async () => { - const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null); - expect(openAttribute).toBe(true); + it('sets the `open` attribute and adds the correct class', async () => { + const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open')); + + expect(detailsOpenClass).toBe(true); }); it('sets the `ga` attributes', async () => { - const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', element => element.getAttribute('data-ga-action')); + const gaHeadingAttribute = await page.$eval('.ons-js-details-heading', (element) => element.getAttribute('data-ga-action')); expect(gaHeadingAttribute).toBe('Open panel'); }); }); + describe('when there is more than one details component and a details heading is clicked to open the details', () => { + beforeEach(async () => { + await setTestPage('/test', RENDERED_EXAMPLE_PAGE); + await page.click('#details-id > .ons-js-details-heading'); + }); + + it('sets the `open` attribute and open class on the right component', async () => { + const detailsOpenClass = await page.$eval('#details-id', (node) => node.classList.contains('ons-details--open')); + const detailsOpenClass2 = await page.$eval('#details-id-2', (node) => node.classList.contains('ons-details--open')); + + expect(detailsOpenClass).toBe(true); + expect(detailsOpenClass2).toBe(false); + }); + }); + describe('when the details heading is focused', () => { beforeEach(async () => { await setTestPage('/test', renderComponent('details', EXAMPLE_DETAILS_BASIC)); @@ -50,8 +82,8 @@ describe('script: details', () => { }); it('opens the details content', async () => { - const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null); - expect(openAttribute).toBe(true); + const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open')); + expect(detailsOpenClass).toBe(true); }); }); @@ -61,8 +93,8 @@ describe('script: details', () => { }); it('opens the details content', async () => { - const openAttribute = await page.$eval('.ons-js-details', node => node.open !== null); - expect(openAttribute).toBe(true); + const detailsOpenClass = await page.$eval('.ons-js-details', (node) => node.classList.contains('ons-details--open')); + expect(detailsOpenClass).toBe(true); }); }); }); diff --git a/src/components/details/example-details-with-warning.njk b/src/components/details/example-details-with-warning.njk index bea57bf79a..bdbb8dd2ed 100644 --- a/src/components/details/example-details-with-warning.njk +++ b/src/components/details/example-details-with-warning.njk @@ -1,8 +1,7 @@ {% from "components/details/_macro.njk" import onsDetails %} {% from "components/panel/_macro.njk" import onsPanel %} -{% - call onsDetails({ +{% call onsDetails({ "id": "details-example-with-warning", "title": "Need to answer separately from your household?" }) diff --git a/src/scss/objects/_page.scss b/src/scss/objects/_page.scss index e2c6f2ae2c..c312b213dc 100644 --- a/src/scss/objects/_page.scss +++ b/src/scss/objects/_page.scss @@ -21,13 +21,11 @@ @include mq(xxs, m) { margin-top: 1.5rem; } - } -// Adjust margin-top when .ons-page__main contains .ons-panel--error */ -.ons-breadcrumbs ~ .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error){ - margin-top: 1rem; - +// Adjust margin-top when .ons-page__main contains .ons-panel--error +.ons-breadcrumbs ~ .ons-grid .ons-grid__col .ons-page__main:has(.ons-panel--error) { + margin-top: 1rem; } .ons-page__body { diff --git a/src/scss/print.scss b/src/scss/print.scss index a553051f70..49ed307310 100644 --- a/src/scss/print.scss +++ b/src/scss/print.scss @@ -45,11 +45,6 @@ a::after { } } -details, -details > summary { - display: block !important; -} - .ons-hero { print-color-adjust: exact; } @@ -68,3 +63,31 @@ h6, p { break-inside: avoid; } + +.ons-details { + &--initialised & { + &__heading { + padding: 0; + margin: 0 0 1rem; + } + + &__title { + color: var(--ons-color-black); + font-size: 24px; + } + + &__icon { + display: none; + } + + &__content { + display: block; + } + } + + &--accordion & { + &__heading { + padding-top: 1rem; + } + } +} diff --git a/src/tests/helpers/rendering.js b/src/tests/helpers/rendering.js index 2f8c9a73e0..4cb1f921b7 100644 --- a/src/tests/helpers/rendering.js +++ b/src/tests/helpers/rendering.js @@ -144,7 +144,7 @@ export class TemplateFakerContext { return output; } - const renderedSpies = matchedSpies.map(entry => entry.split(',')); + const renderedSpies = matchedSpies.map((entry) => entry.split(',')); for (let key of Object.keys(this._spiedOutputs)) { const spiedComponent = this._spiedOutputs[key]; @@ -153,7 +153,7 @@ export class TemplateFakerContext { // Nullify occurrences that were not in the rendered output. spiedComponent.occurrences = spiedComponent.occurrences.map((occurrence, i) => { - const wasRendered = !!renderedSpies.find(entry => entry[0] === key && parseInt(entry[1]) === i); + const wasRendered = !!renderedSpies.find((entry) => entry[0] === key && parseInt(entry[1]) === i); return wasRendered ? occurrence : undefined; }); } diff --git a/src/tests/helpers/rendering.spec.js b/src/tests/helpers/rendering.spec.js index c5d4f556cf..aa01804866 100644 --- a/src/tests/helpers/rendering.spec.js +++ b/src/tests/helpers/rendering.spec.js @@ -150,7 +150,7 @@ describe('templateFaker()', () => { it.each([ ['when output is not suppressed', null], ['when `suppressOutput` option is provided', { suppressOutput: false }], - ])('still renders component output when component is being spied on %s', options => { + ])('still renders component output when component is being spied on %s', (options) => { const faker = helper.templateFaker(); /*const buttonSpy =*/ faker.spy('button', options);