@ons/design-system 53.1.1 → 54.0.0

package/components/accordion/_macro.njk

@@ -15,9 +15,9 @@
                 onsButton({
                     "type": "button",
                     "text": params.allButton.open,
-                    "classes": "ons-js-collapsible-all ons-u-mb-s ons-u-d-no",
+                    "classes": "ons-js-accordion-all ons-u-mb-s ons-u-d-no",
                     "variants": ["secondary", "small"],
-                    "innerClasses": "ons-js-collapsible-all-inner",
+                    "innerClasses": "ons-js-accordion-all-inner",
                     "attributes": attributes
                 })
             }}
@@ -36,7 +36,6 @@
                     "content": item.content,
                     "group": params.id,
                     "saveState": params.saveState,
-                    "variants": params.variants,
                     "open": params.open
                 })
             }}

package/components/accordion/_macro.spec.js

@@ -54,18 +54,6 @@ describe('macro: accordion', () => {
   });
 
   describe('item', () => {
-    it('has provided variant style classes', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-          variants: ['variant-a', 'variant-b'],
-        }),
-      );
-
-      expect($('.ons-collapsible--variant-a').length).toBe(2);
-      expect($('.ons-collapsible--variant-b').length).toBe(2);
-    });
-
     it('has provided title text', () => {
       const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
@@ -103,31 +91,6 @@ describe('macro: accordion', () => {
       expect(titleText).toBe('Content for item 1');
     });
 
-    it('outputs a button with the expected class', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              button: {
-                open: 'Open label',
-                close: 'Close label',
-              },
-            },
-            {
-              title: 'Title for item 2',
-              button: {
-                open: 'Open label',
-                close: 'Close label',
-              },
-            },
-          ],
-        }),
-      );
-
-      expect($('button.ons-js-collapsible-button').length).toBe(2);
-    });
-
     it('has additionally provided `attributes`', () => {
       const $ = cheerio.load(
         renderComponent('accordion', {
@@ -199,7 +162,7 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('button.ons-js-collapsible-all').length).toBe(1);
+      expect($('button.ons-js-accordion-all').length).toBe(1);
     });
 
     it('has additionally provided `attributes`', () => {
@@ -217,8 +180,8 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('button.ons-js-collapsible-all').attr('a')).toBe('123');
-      expect($('button.ons-js-collapsible-all').attr('b')).toBe('456');
+      expect($('button.ons-js-accordion-all').attr('a')).toBe('123');
+      expect($('button.ons-js-accordion-all').attr('b')).toBe('456');
     });
   });
 });

package/components/accordion/accordion.dom.js

@@ -0,0 +1,19 @@
+import domready from '../../js/domready';
+
+async function initialiseAccordions() {
+  const toggleAllButtons = [...document.querySelectorAll('.ons-js-accordion-all')];
+
+  if (toggleAllButtons.length) {
+    const collapsibleComponents = [...document.querySelectorAll('.ons-js-collapsible')];
+
+    const Collapsible = (await import('../collapsible/collapsible')).default;
+    const Accordion = (await import('./accordion')).default;
+    const collapsibles = collapsibleComponents.map(element => new Collapsible(element));
+
+    toggleAllButtons.forEach(button => {
+      new Accordion(button, collapsibles);
+    });
+  }
+}
+
+domready(initialiseAccordions);

package/components/{collapsible/collapsible.group.js → accordion/accordion.js}

@@ -1,23 +1,28 @@
-export default class CollapsibleGroup {
+export default class Accordion {
   constructor(button, collapsibles) {
     this.openCollapsibles = 0;
 
     this.button = button;
-    this.buttonInner = button.querySelector('.ons-js-collapsible-all-inner');
+    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.buttonOpen = this.buttonInner.innerHTML.trim();
+    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.collapsibles.forEach(collapsible => {
       collapsible.onOpen = this.onOpen.bind(this);
       collapsible.onClose = this.onClose.bind(this);
     });
 
-    this.button.addEventListener('click', this.handleButtonClick.bind(this));
+    if (this.open) {
+      this.openCollapsibles = this.totalCollapsibles;
+    }
 
+    this.button.addEventListener('click', this.handleButtonClick.bind(this));
+    this.setButton();
     this.button.classList.remove('ons-u-d-no');
   }
 
@@ -49,9 +54,11 @@ export default class CollapsibleGroup {
     if (this.canClose()) {
       this.buttonInner.innerHTML = this.closeButton;
       this.button.setAttribute('data-ga-label', this.buttonOpen);
+      this.button.setAttribute('aria-expanded', 'true');
     } else {
       this.buttonInner.innerHTML = this.buttonOpen;
       this.button.setAttribute('data-ga-label', this.closeButton);
+      this.button.setAttribute('aria-expanded', 'false');
     }
   }
 }

package/components/accordion/accordion.spec.js

@@ -6,26 +6,14 @@ const EXAMPLE_ACCORDION_WITH_THREE_ITEMS = {
     {
       title: 'Title for item 1',
       content: 'Content for item 1',
-      button: {
-        open: 'Open item',
-        close: 'Close item',
-      },
     },
     {
       title: 'Title for item 2',
       content: 'Content for item 2',
-      button: {
-        open: 'Open item',
-        close: 'Close item',
-      },
     },
     {
       title: 'Title for item 3',
       content: 'Content for item 3',
-      button: {
-        open: 'Open item',
-        close: 'Close item',
-      },
     },
   ],
 };
@@ -42,43 +30,68 @@ const EXAMPLE_ACCORDION_WITH_ALL_BUTTON = {
 };
 
 describe('script: accordion', () => {
-  it('begins with all items closed', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
+  it('begins with all items open when specified', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('accordion', {
+        ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
+        open: true,
+      }),
+    );
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(0);
+    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    expect(openElements[0]).not.toBe(undefined);
+    expect(openElements[1]).not.toBe(undefined);
+    expect(openElements[2]).not.toBe(undefined);
   });
 
-  it('begins with all items open when specified', async () => {
+  it('sets toggle all button label to "Hide all" when open is specified', async () => {
     await setTestPage(
       '/test',
       renderComponent('accordion', {
-        ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
+        ...EXAMPLE_ACCORDION_WITH_ALL_BUTTON,
+        open: true,
+      }),
+    );
+
+    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    expect(buttonText.trim()).toBe('Close all');
+  });
+
+  it('sets toggle all button aria-expanded set to true when open is specified', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('accordion', {
+        ...EXAMPLE_ACCORDION_WITH_ALL_BUTTON,
         open: true,
       }),
     );
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(3);
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    expect(ariaExpanded).toBe('true');
   });
 
-  it('opens all items when accordion "Open all" button is clicked', async () => {
+  it('opens all items when accordion `allbutton` is clicked', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
     await page.click('button[data-test-trigger]');
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(3);
+    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    expect(openElements[0]).not.toBe(undefined);
+    expect(openElements[1]).not.toBe(undefined);
+    expect(openElements[2]).not.toBe(undefined);
   });
 
-  it('closes all items when accordion "Open all" button is clicked twice', async () => {
+  it('closes all items when accordion `allbutton` is clicked twice', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
     await page.click('button[data-test-trigger]');
     await page.click('button[data-test-trigger]');
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(0);
+    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    expect(openElements[0]).toBe(undefined);
+    expect(openElements[1]).toBe(undefined);
+    expect(openElements[2]).toBe(undefined);
   });
 
   it('starts with the toggle all button labelled as "Open all"', async () => {
@@ -88,47 +101,39 @@ describe('script: accordion', () => {
     expect(buttonText.trim()).toBe('Open all');
   });
 
-  it('sets toggle all button label to "Hide all" when clicked', async () => {
+  it('starts with the toggle all button aria-expanded set to false', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('button[data-test-trigger]');
-
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
-    expect(buttonText.trim()).toBe('Close all');
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    expect(ariaExpanded).toBe('false');
   });
 
-  it('sets toggle all button label to "Hide all" when all items are shown', async () => {
+  it('sets toggle all button label to "Hide all" when clicked', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('#example-accordion-1 .ons-collapsible__btn');
-    await page.click('#example-accordion-2 .ons-collapsible__btn');
-    await page.click('#example-accordion-3 .ons-collapsible__btn');
+    await page.click('button[data-test-trigger]');
 
     const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
     expect(buttonText.trim()).toBe('Close all');
   });
 
-  it('opens an item when its open button is clicked', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
+  it('sets toggle all button aria-expanded set to true when clicked', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('#example-accordion-2 .ons-collapsible__btn');
-    await page.click('#example-accordion-3 .ons-collapsible__btn');
+    await page.click('button[data-test-trigger]');
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(2);
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    expect(ariaExpanded).toBe('true');
   });
 
-  it('closes an item when its open button is clicked twice', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
-
-    await page.click('#example-accordion-2 .ons-collapsible__btn');
-    await page.click('#example-accordion-3 .ons-collapsible__btn');
-    await page.click('#example-accordion-3 .ons-collapsible__btn');
+  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));
 
-    const isItem2Open = await page.$eval('#example-accordion-2', element => element.classList.contains('ons-collapsible--open'));
-    expect(isItem2Open).toBe(true);
+    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');
 
-    const isItem3Open = await page.$eval('#example-accordion-3', element => element.classList.contains('ons-collapsible--open'));
-    expect(isItem3Open).toBe(false);
+    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    expect(buttonText.trim()).toBe('Close all');
   });
 });

package/components/collapsible/_collapsible.scss

@@ -1,106 +1,81 @@
 $collapsible-caret-width: 1.5rem;
 
 .ons-collapsible {
-  &--initialised & {
-    &__heading {
-      color: $color-text-link;
-      cursor: pointer;
-      display: inline-block;
-      outline: none;
-      padding: 0 0 0 $collapsible-caret-width;
-      pointer-events: initial;
-      position: relative;
-
-      &::marker {
-        display: none;
-      }
+  &__heading {
+    color: $color-text-link;
+    cursor: pointer;
+    display: inline-block;
+    outline: none;
+    padding: 0 0 0 $collapsible-caret-width;
+    pointer-events: initial;
+    position: relative;
+
+    &::marker {
+      display: none;
+    }
 
-      &:focus {
-        .ons-collapsible__title {
-          @extend %a-focus;
-          // extend collapsible focus background behind caret
-          margin-left: -$collapsible-caret-width;
-          padding-left: $collapsible-caret-width;
-        }
-        .ons-collapsible__icon .ons-svg-icon {
-          fill: $color-text-link-focus;
-        }
+    &:focus {
+      .ons-collapsible__title {
+        @extend %a-focus;
+        // extend collapsible focus background behind caret
+        margin-left: -$collapsible-caret-width;
+        padding-left: $collapsible-caret-width;
       }
-
-      &:hover:not(:focus) {
-        color: $color-text-link-hover;
-        .ons-collapsible__icon {
-          fill: $color-text-link-hover;
-        }
-        .ons-collapsible__title {
-          text-decoration: underline solid $color-text-link-hover 2px;
-        }
+      .ons-collapsible__icon .ons-svg-icon {
+        fill: $color-text-link-focus;
       }
     }
 
-    &__icon {
-      display: inline-block;
-      fill: $color-text-link;
-      height: $collapsible-caret-width;
-      left: -0.15rem;
-      position: absolute;
-      top: -0.25rem;
-      width: $collapsible-caret-width;
+    &:hover:not(:focus) {
+      color: $color-text-link-hover;
+      .ons-collapsible__icon {
+        fill: $color-text-link-hover;
+      }
+      .ons-collapsible__title {
+        text-decoration: underline solid $color-text-link-hover 2px;
+      }
     }
+  }
 
-    &__title {
-      font-size: 1rem;
-      font-weight: $font-weight-bold;
-      margin-bottom: 0;
-      text-decoration: underline;
-      text-underline-position: under;
-      transform: translateY(-1px);
-    }
+  &__icon {
+    display: inline-block;
+    fill: $color-text-link;
+    height: $collapsible-caret-width;
+    left: -0.15rem;
+    position: absolute;
+    top: -0.2rem;
+    width: $collapsible-caret-width;
+  }
 
-    &__content {
-      display: none;
-    }
+  &__title {
+    display: inline-block;
+    font-size: 1rem;
+    font-weight: $font-weight-bold;
+    margin-bottom: 0;
+    text-underline-position: under;
+    transform: translateY(-1px);
   }
 
-  &__icon {
-    display: none;
+  &__content {
+    border-left: 4px solid $color-borders-indent;
+    display: block;
+    margin: 1rem 0 0;
+    padding: 0 0 0 1.3em;
   }
 
-  &--open & {
+  &[open] & {
     &__icon {
       left: -0.1rem;
-      top: 0.1rem;
+      top: 0.2rem;
       transform: rotate(90deg);
     }
-
-    &__content {
-      border-left: 4px solid $color-borders-indent;
-      display: block;
-      margin: 1rem 0 0;
-      padding: 0 0 0 1.3em;
-
-      .ons-btn {
-        margin-bottom: 0.5rem;
-      }
-    }
-  }
-
-  &--accordion {
-    margin: 0;
-    &.ons-collapsible--open {
-      .ons-svg-icon {
-        left: 0.4rem;
-        position: absolute;
-        top: 0.25rem;
-      }
-    }
   }
 
   &--accordion & {
     &__heading {
       border-top: 1px solid $color-borders;
       margin: 0;
-      padding-bottom: 1rem;
+      padding-bottom: 0.9rem;
       padding-top: 1rem;
       width: 100%;
 
@@ -115,10 +90,6 @@ $collapsible-caret-width: 1.5rem;
 
     &__icon {
       top: 0.8rem;
-
-      @include mq(s) {
-        top: 1.15rem;
-      }
     }
 
     &__controls {
@@ -138,10 +109,12 @@ $collapsible-caret-width: 1.5rem;
       padding: 0;
     }
   }
+}
 
-  &--simple & {
-    &__icon {
-      top: 0.8rem;
+.ons-collapsible--accordion {
+  &[open] {
+    .ons-collapsible__icon {
+      top: 1.2rem;
     }
   }
 }

package/components/collapsible/_macro.njk

@@ -1,21 +1,16 @@
 {% macro onsCollapsible(params) %}
-    {% from "components/button/_macro.njk" import onsButton %}
-
-    <div
+    <details
         id="{{ params.id }}"
-        class="ons-collapsible ons-js-collapsible{% if params.isAccordion is defined and params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-collapsible--{{ variant }}{% endfor %}{% else %} ons-collapsible--{{ params.variants }}{% endif %}{% endif %}"
-        {% if params.button is defined and params.button and params.button.close is defined and params.button.close %} data-btn-close="{{ params.button.close }}"{% endif %}
+        class="ons-collapsible ons-js-collapsible{% if params.isAccordion is defined and params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
         {% if params.group is defined and params.group %} data-group="{{ params.group }}"{% endif %}
         {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         {% if params.saveState is defined and params.saveState %} data-save-state="true"{% endif %}
         {% if params.open is defined and params.open %} data-open="true"{% endif %}
     >
-        <div
+        <summary
             class="ons-collapsible__heading ons-js-collapsible-heading"
             {% if params.headingAttributes is defined and params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
-            {# Required to use display flex on Safari as it's not currently supported: https://bugs.webkit.org/show_bug.cgi?id=167111 #}
-            <div class="ons-collapsible__controls">
                 {% set titleTag = params.titleTag | default("h2") %}
                 <{{ titleTag }} class="ons-collapsible__title">{{ params.title }}</{{ titleTag }}>
                 <span class="ons-collapsible__icon">
@@ -25,39 +20,11 @@
                             "iconType": "chevron"
                         })
                     }}</span>
-                {% if params.button is defined and params.button and params.button.open is defined and params.button.open and params.isAccordion is defined and params.isAccordion %}
-                    {{
-                        onsButton({
-                            "type": "button",
-                            "text": params.button.open,
-                            "classes": "ons-collapsible__btn ons-js-collapsible-button ons-u-d-no ons-u-d-no@xxs@s",
-                            "innerClasses": "ons-js-collapsible-button-inner",
-                            "variants": ["secondary", "small"],
-                            "attributes": params.button.attributes
-                        })
-                    }}
-                {% endif %}
-            </div>
-        </div>
+        </summary>
         <div id="{{ params.id }}-content" class="ons-collapsible__content ons-js-collapsible-content"
             {% if params.contentAttributes is defined and params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
-            {% if params.isAccordion is defined and params.isAccordion %}
-                {{ params.content | safe }}{{ caller() if caller }}
-            {% else %}
-                {{ params.content | safe }}{{ caller() if caller }}
-                {{
-                    onsButton({
-                        "type": "button",
-                        "text": params.button.close | default ('Hide this'),
-                        "buttonContext": (params.button.context | default(params.title)) + " " + params.button.contextSuffix | default("content"),
-                        "classes": "ons-js-collapsible-button ons-u-d-no " + (params.button.classes | default("ons-btn--secondary")),
-                        "innerClasses": "ons-js-collapsible-button-inner",
-                        "variants": "small",
-                        "attributes": params.button.attributes
-                    })
-                }}
-            {% endif %}
+            {{ params.content | safe }}{{ caller() if caller }}
         </div>
-    </div>
+    </details>
 {% endmacro %}

package/components/collapsible/_macro.spec.js

@@ -37,18 +37,6 @@ describe('macro: collapsible', () => {
     expect($('.ons-collapsible').hasClass('another-extra-class')).toBe(true);
   });
 
-  it('has provided variant style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('collapsible', {
-        ...EXAMPLE_COLLAPSIBLE_BASIC,
-        variants: ['variant-a', 'variant-b'],
-      }),
-    );
-
-    expect($('.ons-collapsible--variant-a').length).toBe(1);
-    expect($('.ons-collapsible--variant-b').length).toBe(1);
-  });
-
   it('has provided title text', () => {
     const $ = cheerio.load(renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
 
@@ -152,47 +140,6 @@ describe('macro: collapsible', () => {
     expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
   });
 
-  it('has the expected button output', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
-
-    faker.renderComponent('collapsible', {
-      ...EXAMPLE_COLLAPSIBLE_BASIC,
-      button: {
-        close: 'Close this',
-        attributes: {
-          a: 123,
-          b: 456,
-        },
-      },
-    });
-
-    expect(buttonSpy.occurrences[0]).toEqual({
-      text: 'Close this',
-      type: 'button',
-      buttonContext: 'Title for collapsible content',
-      classes: 'ons-js-collapsible-button ons-u-d-no ons-btn--secondary',
-      innerClasses: 'ons-js-collapsible-button-inner',
-      variants: 'small',
-      attributes: {
-        a: 123,
-        b: 456,
-      },
-    });
-  });
-
-  it('has the expected data attribute when `button` is provided', () => {
-    const $ = cheerio.load(
-      renderComponent('collapsible', {
-        ...EXAMPLE_COLLAPSIBLE_BASIC,
-        button: {
-          close: 'Close this',
-        },
-      }),
-    );
-    expect($('.ons-collapsible').attr('data-btn-close')).toBe('Close this');
-  });
-
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('collapsible', { EXAMPLE_COLLAPSIBLE_BASIC }, 'Example content...'));