Revert details component to JS version to fix printing issue (#2944)

ONSdigital · Nov 21, 2023 · 35ca312 · 35ca312
1 parent df708d1
commit 35ca312
Show file tree

Hide file tree

Showing 20 changed files with 199 additions and 129 deletions.
diff --git a/...s-vr-test__components_accordion_example-accordion-open_0_document_0_desktop.png b/...s-vr-test__components_accordion_example-accordion-open_0_document_0_desktop.png
diff --git a/...ds-vr-test__components_accordion_example-accordion-open_0_document_1_tablet.png b/...ds-vr-test__components_accordion_example-accordion-open_0_document_1_tablet.png
diff --git a/...nents_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png b/...nents_timeout-panel_example-panel-with-timeout-warning_0_document_0_desktop.png
diff --git a/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png b/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png
diff --git a/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png b/...onents_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
diff --git 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
@@ -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
@@ -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
@@ -105,7 +105,7 @@
 {% endset %}
 
 <div class="ons-grid">
-    <div class="ons-grid__col ons-col-3@xs">
+    <div class="ons-grid__col ons-col-4@m">
         {{
             onsAccordion({
                 "id": "accordion",

diff --git 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
@@ -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
@@ -1,13 +1,13 @@
 {% macro onsDetails(params) %}
-    <details
+    <div
         id="{{ params.id }}"
         class="ons-details ons-js-details{% if params.isAccordion %} ons-details--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
         {% if params.group %} data-group="{{ params.group }}"{% endif %}
         {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         {% if params.saveState %} data-save-state="true"{% endif %}
         {% if params.open %} data-open="true"{% endif %}
     >
-        <summary
+        <div
             class="ons-details__heading ons-js-details-heading"
             {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
@@ -20,11 +20,11 @@
                             "iconType": "chevron"
                         })
                     }}</span>
-        </summary>
+        </div>
         <div id="{{ params.id }}-content" class="ons-details__content ons-js-details-content"
             {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
             {{ params.content | safe }}{{ caller() if caller }}
         </div>
-    </details>
+    </div>
 {% endmacro %}
diff --git 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));
   }
 }