@ons/design-system 60.0.3 → 61.0.0

package/components/accordion/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsAccordion(params) %}
-    {% from "components/collapsible/_macro.njk" import onsCollapsible %}
+    {% from "components/details/_macro.njk" import onsDetails %}
 
     <div id="{{params.id}}" class="ons-accordion{{ ' ' + params.classes if params.classes }}">
         {% if params.allButton %}
@@ -24,10 +24,9 @@
         {% endif %}
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
             {{
-                onsCollapsible({
+                onsDetails({
                     "isAccordion": true,
                     "id": params.id + "-" + (loop.index | string),
-                    "button": item.button,
                     "attributes": item.attributes,
                     "headingAttributes": item.headingAttributes,
                     "contentAttributes": item.contentAttributes,

package/components/accordion/_macro.spec.js

@@ -57,7 +57,7 @@ describe('macro: accordion', () => {
     it('has provided title text', () => {
       const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
-      const titleText = $('.ons-collapsible__title')
+      const titleText = $('.ons-details__title')
         .first()
         .text()
         .trim();
@@ -77,14 +77,14 @@ describe('macro: accordion', () => {
         }),
       );
 
-      const titleTag = $('.ons-collapsible__title')[0].tagName;
+      const titleTag = $('.ons-details__title')[0].tagName;
       expect(titleTag).toBe('h5');
     });
 
     it('has provided content text', () => {
       const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
-      const titleText = $('.ons-collapsible__content')
+      const titleText = $('.ons-details__content')
         .first()
         .text()
         .trim();
@@ -106,8 +106,8 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('.ons-collapsible').attr('a')).toBe('123');
-      expect($('.ons-collapsible').attr('b')).toBe('456');
+      expect($('.ons-details').attr('a')).toBe('123');
+      expect($('.ons-details').attr('b')).toBe('456');
     });
 
     it('has additionally provided `headingAttributes`', () => {
@@ -125,8 +125,8 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('.ons-collapsible__heading').attr('a')).toBe('123');
-      expect($('.ons-collapsible__heading').attr('b')).toBe('456');
+      expect($('.ons-details__heading').attr('a')).toBe('123');
+      expect($('.ons-details__heading').attr('b')).toBe('456');
     });
 
     it('has additionally provided `contentAttributes`', () => {
@@ -145,8 +145,8 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('.ons-collapsible__content').attr('a')).toBe('123');
-      expect($('.ons-collapsible__content').attr('b')).toBe('456');
+      expect($('.ons-details__content').attr('a')).toBe('123');
+      expect($('.ons-details__content').attr('b')).toBe('456');
     });
   });
 

package/components/accordion/accordion.dom.js

@@ -4,14 +4,14 @@ async function initialiseAccordions() {
   const toggleAllButtons = [...document.querySelectorAll('.ons-js-accordion-all')];
 
   if (toggleAllButtons.length) {
-    const collapsibleComponents = [...document.querySelectorAll('.ons-js-collapsible')];
+    const detailsComponents = [...document.querySelectorAll('.ons-js-details')];
 
-    const Collapsible = (await import('../collapsible/collapsible')).default;
+    const Details = (await import('../details/details')).default;
     const Accordion = (await import('./accordion')).default;
-    const collapsibles = collapsibleComponents.map(element => new Collapsible(element));
+    const detailsEls = detailsComponents.map(element => new Details(element));
 
     toggleAllButtons.forEach(button => {
-      new Accordion(button, collapsibles);
+      new Accordion(button, detailsEls);
     });
   }
 }

package/components/accordion/accordion.js

@@ -1,24 +1,24 @@
 export default class Accordion {
-  constructor(button, collapsibles) {
-    this.openCollapsibles = 0;
+  constructor(button, detailsEls) {
+    this.openDetailsEls = 0;
 
     this.button = button;
     this.buttonInner = button.querySelector('.ons-js-accordion-all-inner');
     this.group = button.getAttribute('data-group');
-    this.collapsibles = collapsibles.filter(collapsible => collapsible.group === this.group);
-    this.totalCollapsibles = this.collapsibles.length;
+    this.detailsEls = detailsEls.filter(details => details.group === this.group);
+    this.totalDetailsEls = this.detailsEls.length;
     this.buttonOpenEl = this.buttonInner.querySelector('.ons-btn__text');
     this.buttonOpen = this.buttonOpenEl.innerHTML.trim();
     this.closeButton = button.getAttribute('data-close-all');
-    this.open = this.collapsibles.find(collapsible => collapsible.open === true);
+    this.open = this.detailsEls.find(details => details.open === true);
 
-    this.collapsibles.forEach(collapsible => {
-      collapsible.onOpen = this.onOpen.bind(this);
-      collapsible.onClose = this.onClose.bind(this);
+    this.detailsEls.forEach(details => {
+      details.onOpen = this.onOpen.bind(this);
+      details.onClose = this.onClose.bind(this);
     });
 
     if (this.open) {
-      this.openCollapsibles = this.totalCollapsibles;
+      this.openDetailsEls = this.totalDetailsEls;
     }
 
     this.button.addEventListener('click', this.handleButtonClick.bind(this));
@@ -31,23 +31,23 @@ export default class Accordion {
 
     const open = !this.canClose();
 
-    this.collapsibles.forEach(collapsible => {
-      collapsible.setOpen(open);
+    this.detailsEls.forEach(details => {
+      details.setOpen(open);
     });
   }
 
   onOpen() {
-    this.openCollapsibles++;
+    this.openDetailsEls++;
     this.setButton();
   }
 
   onClose() {
-    this.openCollapsibles--;
+    this.openDetailsEls--;
     this.setButton();
   }
 
   canClose() {
-    return this.openCollapsibles === this.totalCollapsibles;
+    return this.openDetailsEls === this.totalDetailsEls;
   }
 
   setButton() {

package/components/accordion/accordion.spec.js

@@ -39,7 +39,7 @@ describe('script: accordion', () => {
       }),
     );
 
-    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    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);
@@ -76,7 +76,7 @@ describe('script: accordion', () => {
 
     await page.click('button[data-test-trigger]');
 
-    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    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);
@@ -88,7 +88,7 @@ describe('script: accordion', () => {
     await page.click('button[data-test-trigger]');
     await page.click('button[data-test-trigger]');
 
-    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    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);
@@ -129,9 +129,9 @@ describe('script: accordion', () => {
   it('sets toggle all button label to "Hide all" when all items are shown', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('#example-accordion-1 .ons-collapsible__heading');
-    await page.click('#example-accordion-2 .ons-collapsible__heading');
-    await page.click('#example-accordion-3 .ons-collapsible__heading');
+    await page.click('#example-accordion-1 .ons-details__heading');
+    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);
     expect(buttonText.trim()).toBe('Close all');

package/components/collapsible/_macro.njk

@@ -1,30 +1,22 @@
+{# OnsCollapsible has been superceded by onsDetails and will be deprecated in due course. Please upgrade to use onsDetails. Configuration is unchanged, only the component name and classes have changed name. #}
 {% macro onsCollapsible(params) %}
-    <details
-        id="{{ params.id }}"
-        class="ons-collapsible ons-js-collapsible{% if params.isAccordion %} ons-collapsible--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
-            class="ons-collapsible__heading ons-js-collapsible-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 %}
-        >
-                {% set titleTag = params.titleTag | default("h2") %}
-                <{{ titleTag }} class="ons-collapsible__title">{{ params.title }}</{{ titleTag }}>
-                <span class="ons-collapsible__icon">
-                    {% from "components/icons/_macro.njk" import onsIcon %}
-                    {{
-                        onsIcon({
-                            "iconType": "chevron"
-                        })
-                    }}</span>
-        </summary>
-        <div id="{{ params.id }}-content" class="ons-collapsible__content ons-js-collapsible-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>
+    {% from "components/details/_macro.njk" import onsDetails %}
+
+    {% set content = caller() if caller else params.content | safe %}
+
+    {{
+        onsDetails({
+            "id": params.id,
+            "classes": params.classes,
+            "attributes": params.attributes,
+            "headingAttributes": params.headingAttributes,
+            "contentAttributes": params.contentAttributes,
+            "title": params.title,
+            "titleTag": params.titleTag,
+            "content": content,
+            "saveState": params.saveState,
+            "open": params.open
+        })
+    }}
+    
 {% endmacro %}

package/components/collapsible/_macro.spec.js

@@ -22,7 +22,7 @@ describe('macro: collapsible', () => {
   it('has the provided `id` attribute', () => {
     const $ = cheerio.load(renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
 
-    expect($('.ons-collapsible').attr('id')).toBe('collapsible-id');
+    expect($('.ons-details').attr('id')).toBe('collapsible-id');
   });
 
   it('has additionally provided style classes', () => {
@@ -33,14 +33,14 @@ describe('macro: collapsible', () => {
       }),
     );
 
-    expect($('.ons-collapsible').hasClass('extra-class')).toBe(true);
-    expect($('.ons-collapsible').hasClass('another-extra-class')).toBe(true);
+    expect($('.ons-details').hasClass('extra-class')).toBe(true);
+    expect($('.ons-details').hasClass('another-extra-class')).toBe(true);
   });
 
   it('has provided title text', () => {
     const $ = cheerio.load(renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
 
-    const titleText = $('.ons-collapsible__title')
+    const titleText = $('.ons-details__title')
       .first()
       .text()
       .trim();
@@ -55,14 +55,14 @@ describe('macro: collapsible', () => {
       }),
     );
 
-    const titleTag = $('.ons-collapsible__title')[0].tagName;
+    const titleTag = $('.ons-details__title')[0].tagName;
     expect(titleTag).toBe('h4');
   });
 
   it('has provided content text', () => {
     const $ = cheerio.load(renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
 
-    const titleText = $('.ons-collapsible__content')
+    const titleText = $('.ons-details__content')
       .text()
       .trim();
     expect(titleText).toEqual(expect.stringContaining('Content for collapsible'));
@@ -78,8 +78,8 @@ describe('macro: collapsible', () => {
         },
       }),
     );
-    expect($('.ons-collapsible').attr('a')).toBe('123');
-    expect($('.ons-collapsible').attr('b')).toBe('456');
+    expect($('.ons-details').attr('a')).toBe('123');
+    expect($('.ons-details').attr('b')).toBe('456');
   });
 
   it('has the correct data attribute when `saveState` is provided', () => {
@@ -89,7 +89,7 @@ describe('macro: collapsible', () => {
         saveState: true,
       }),
     );
-    expect($('.ons-collapsible').attr('data-save-state')).toBe('true');
+    expect($('.ons-details').attr('data-save-state')).toBe('true');
   });
 
   it('has the correct data attribute when `open` is provided', () => {
@@ -99,7 +99,7 @@ describe('macro: collapsible', () => {
         open: true,
       }),
     );
-    expect($('.ons-collapsible').attr('data-open')).toBe('true');
+    expect($('.ons-details').attr('data-open')).toBe('true');
   });
 
   it('has additionally provided `headingAttributes`', () => {
@@ -113,8 +113,8 @@ describe('macro: collapsible', () => {
       }),
     );
 
-    expect($('.ons-collapsible__heading').attr('a')).toBe('123');
-    expect($('.ons-collapsible__heading').attr('b')).toBe('456');
+    expect($('.ons-details__heading').attr('a')).toBe('123');
+    expect($('.ons-details__heading').attr('b')).toBe('456');
   });
 
   it('has additionally provided `contentAttributes`', () => {
@@ -128,8 +128,8 @@ describe('macro: collapsible', () => {
       }),
     );
 
-    expect($('.ons-collapsible__content').attr('a')).toBe('123');
-    expect($('.ons-collapsible__content').attr('b')).toBe('456');
+    expect($('.ons-details__content').attr('a')).toBe('123');
+    expect($('.ons-details__content').attr('b')).toBe('456');
   });
 
   it('has `chevron` icon', () => {
@@ -143,7 +143,7 @@ describe('macro: collapsible', () => {
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('collapsible', { EXAMPLE_COLLAPSIBLE_BASIC }, 'Example content...'));
 
-    const content = $('.ons-collapsible__content')
+    const content = $('.ons-details__content')
       .text()
       .trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));

package/components/{collapsible/_collapsible.scss → details/_details.scss}

@@ -1,12 +1,12 @@
-$collapsible-caret-width: 1.5rem;
+$details-caret-width: 1.5rem;
 
-.ons-collapsible {
+.ons-details {
   &__heading {
     color: var(--ons-color-text-link);
     cursor: pointer;
     display: inline-block;
     outline: none;
-    padding: 0 0 0 $collapsible-caret-width;
+    padding: 0 0 0 $details-caret-width;
     pointer-events: initial;
     position: relative;
 
@@ -16,23 +16,23 @@ $collapsible-caret-width: 1.5rem;
     }
 
     &:focus {
-      .ons-collapsible__title {
+      .ons-details__title {
         @extend %a-focus;
-        // extend collapsible focus background behind caret
-        margin-left: -$collapsible-caret-width;
-        padding-left: $collapsible-caret-width;
+        // extend details focus background behind caret
+        margin-left: -$details-caret-width;
+        padding-left: $details-caret-width;
       }
-      .ons-collapsible__icon .ons-svg-icon {
+      .ons-details__icon .ons-svg-icon {
         fill: var(--ons-color-text-link-focus);
       }
     }
 
     &:hover:not(:focus) {
       color: var(--ons-color-text-link-hover);
-      .ons-collapsible__icon {
+      .ons-details__icon {
         fill: var(--ons-color-text-link-hover);
       }
-      .ons-collapsible__title {
+      .ons-details__title {
         text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
       }
     }
@@ -41,11 +41,11 @@ $collapsible-caret-width: 1.5rem;
   &__icon {
     display: inline-block;
     fill: var(--ons-color-text-link);
-    height: $collapsible-caret-width;
+    height: $details-caret-width;
     left: -0.15rem;
     position: absolute;
     top: -0.2rem;
-    width: $collapsible-caret-width;
+    width: $details-caret-width;
   }
 
   &__title {
@@ -112,9 +112,9 @@ $collapsible-caret-width: 1.5rem;
   }
 }
 
-.ons-collapsible--accordion {
+.ons-details--accordion {
   &[open] {
-    .ons-collapsible__icon {
+    .ons-details__icon {
       top: 1.2rem;
     }
   }

package/components/details/_macro.njk

@@ -0,0 +1,30 @@
+{% macro onsDetails(params) %}
+    <details
+        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
+            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 %}
+        >
+                {% set titleTag = params.titleTag | default("h2") %}
+                <{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
+                <span class="ons-details__icon">
+                    {% from "components/icons/_macro.njk" import onsIcon %}
+                    {{
+                        onsIcon({
+                            "iconType": "chevron"
+                        })
+                    }}</span>
+        </summary>
+        <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>
+{% endmacro %}

package/components/details/_macro.spec.js

@@ -0,0 +1,151 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_DETAILS_BASIC = {
+  id: 'details-id',
+  title: 'Title for details',
+  content: 'Content for details',
+};
+
+describe('macro: details', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('details', EXAMPLE_DETAILS_BASIC));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `id` attribute', () => {
+    const $ = cheerio.load(renderComponent('details', EXAMPLE_DETAILS_BASIC));
+
+    expect($('.ons-details').attr('id')).toBe('details-id');
+  });
+
+  it('has additionally provided style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('details', {
+        ...EXAMPLE_DETAILS_BASIC,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-details').hasClass('extra-class')).toBe(true);
+    expect($('.ons-details').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('has provided title text', () => {
+    const $ = cheerio.load(renderComponent('details', EXAMPLE_DETAILS_BASIC));
+
+    const titleText = $('.ons-details__title')
+      .first()
+      .text()
+      .trim();
+    expect(titleText).toBe('Title for details');
+  });
+
+  it('has title with provided tag override', () => {
+    const $ = cheerio.load(
+      renderComponent('details', {
+        ...EXAMPLE_DETAILS_BASIC,
+        titleTag: 'h4',
+      }),
+    );
+
+    const titleTag = $('.ons-details__title')[0].tagName;
+    expect(titleTag).toBe('h4');
+  });
+
+  it('has provided content text', () => {
+    const $ = cheerio.load(renderComponent('details', EXAMPLE_DETAILS_BASIC));
+
+    const titleText = $('.ons-details__content')
+      .text()
+      .trim();
+    expect(titleText).toEqual(expect.stringContaining('Content for details'));
+  });
+
+  it('has additionally provided `attributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('details', {
+        ...EXAMPLE_DETAILS_BASIC,
+        attributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+    expect($('.ons-details').attr('a')).toBe('123');
+    expect($('.ons-details').attr('b')).toBe('456');
+  });
+
+  it('has the correct data attribute when `saveState` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('details', {
+        ...EXAMPLE_DETAILS_BASIC,
+        saveState: true,
+      }),
+    );
+    expect($('.ons-details').attr('data-save-state')).toBe('true');
+  });
+
+  it('has the correct data attribute when `open` is provided', () => {
+    const $ = cheerio.load(
+      renderComponent('details', {
+        ...EXAMPLE_DETAILS_BASIC,
+        open: true,
+      }),
+    );
+    expect($('.ons-details').attr('data-open')).toBe('true');
+  });
+
+  it('has additionally provided `headingAttributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('details', {
+        ...EXAMPLE_DETAILS_BASIC,
+        headingAttributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('.ons-details__heading').attr('a')).toBe('123');
+    expect($('.ons-details__heading').attr('b')).toBe('456');
+  });
+
+  it('has additionally provided `contentAttributes`', () => {
+    const $ = cheerio.load(
+      renderComponent('details', {
+        ...EXAMPLE_DETAILS_BASIC,
+        contentAttributes: {
+          a: 123,
+          b: 456,
+        },
+      }),
+    );
+
+    expect($('.ons-details__content').attr('a')).toBe('123');
+    expect($('.ons-details__content').attr('b')).toBe('456');
+  });
+
+  it('has `chevron` icon', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+    faker.renderComponent('details', EXAMPLE_DETAILS_BASIC);
+
+    expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
+  });
+
+  it('calls with content', () => {
+    const $ = cheerio.load(renderComponent('details', { EXAMPLE_DETAILS_BASIC }, 'Example content...'));
+
+    const content = $('.ons-details__content')
+      .text()
+      .trim();
+    expect(content).toEqual(expect.stringContaining('Example content...'));
+  });
+});

package/components/details/details.dom.js

@@ -0,0 +1,13 @@
+import domready from '../../js/domready';
+
+async function initialiseDetailsEls() {
+  const detailsComponents = [...document.querySelectorAll('.ons-js-details')];
+  const accordionComponents = [...document.querySelectorAll('.ons-js-accordion')];
+
+  if (detailsComponents.length && !accordionComponents.length) {
+    const Details = (await import('./details')).default;
+    detailsComponents.map(element => new Details(element));
+  }
+}
+
+domready(initialiseDetailsEls);