@ons/design-system 60.0.3 → 61.0.1

package/scss/main.scss

@@ -13,7 +13,7 @@
 @import '../components/card/card';
 @import '../components/checkboxes/checkbox';
 @import '../components/checkboxes/checkboxes';
-@import '../components/collapsible/collapsible';
+@import '../components/details/details';
 @import '../components/content-pagination/content-pagination';
 @import '../components/cookies-banner/cookies-banner';
 @import '../components/document-list/document-list';

package/scss/objects/_page.scss

@@ -34,7 +34,7 @@
     margin-top: 2rem;
   }
   .ons-panel__body,
-  .ons-collapsible {
+  .ons-details {
     h2,
     h3,
     h4,

package/scss/objects/_spacing.scss

@@ -5,7 +5,7 @@
 .ons-figure +,
 .ons-panel +,
 .ons-summary__group +,
-.ons-collapsible:not(.ons-collapsible--accordion) + {
+.ons-details:not(.ons-details--accordion) + {
   .ons-figure,
   .ons-panel,
   .ons-field,

package/scss/overrides/hcm.scss

@@ -47,7 +47,7 @@
   }
 
   // Element icons – matches icon with the link colour
-  .ons-collapsible,
+  .ons-details,
   .ons-breadcrumb__item,
   .ons-panel,
   .ons-btn__inner,

package/scss/print.scss

@@ -48,7 +48,7 @@ a::after {
   }
 }
 
-.ons-collapsible {
+.ons-details {
   &--initialised & {
     &__icon {
       display: none;

package/components/collapsible/collapsible.dom.js

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

package/components/collapsible/collapsible.js

@@ -1,66 +0,0 @@
-export default class Collapsible {
-  constructor(collapsibleElement) {
-    this.saveState = collapsibleElement.getAttribute('data-save-state') === 'true';
-    this.open = collapsibleElement.getAttribute('data-open') === 'true';
-    this.group = collapsibleElement.getAttribute('data-group');
-
-    // Elements
-    this.collapsible = collapsibleElement;
-    this.collapsibleHeader = this.collapsible.querySelector('.ons-js-collapsible-heading');
-
-    // Initialise
-    const collapsibleId = collapsibleElement.getAttribute('id');
-
-    if (localStorage.getItem(collapsibleId) || this.open) {
-      this.setOpen(true);
-      this.collapsible['setAttribute']('open', '');
-    }
-
-    this.collapsibleHeader.addEventListener('click', this.toggle.bind(this));
-    this.collapsibleHeader.addEventListener('keydown', this.keyboardInteraction.bind(this));
-  }
-
-  toggle(event) {
-    event.preventDefault();
-    this.setOpen(!this.isOpen);
-  }
-
-  setOpen(open) {
-    if (open !== this.isOpen) {
-      const action = open ? 'Open' : 'Close';
-      const openAttribute = open ? 'set' : 'remove';
-
-      this.isOpen = open;
-      this.collapsible[`${openAttribute}Attribute`]('open', '');
-      this.collapsibleHeader.setAttribute('data-ga-action', `${action} panel`);
-
-      if (this.onOpen && this.onClose) {
-        if (open) {
-          this.onOpen();
-        } else {
-          this.onClose();
-        }
-      }
-    }
-
-    if (this.saveState === true && open === true) {
-      localStorage.setItem(this.collapsible.getAttribute('id'), true);
-    } else {
-      localStorage.removeItem(this.collapsible.getAttribute('id'));
-    }
-  }
-
-  keyboardInteraction(event) {
-    const keyCode = event.which;
-    switch (keyCode) {
-      // Enter/Space
-      case 13:
-      case 32:
-        event.preventDefault();
-        event.stopPropagation();
-
-        this.toggle(event);
-        break;
-    }
-  }
-}

package/components/collapsible/collapsible.spec.js

@@ -1,103 +0,0 @@
-import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
-
-const EXAMPLE_COLLAPSIBLE_BASIC = {
-  id: 'collapsible-id',
-  title: 'Title for collapsible',
-  content: 'Content for collapsible',
-};
-
-describe('script: collapsible', () => {
-  it('begins open when specified', async () => {
-    await setTestPage(
-      '/test',
-      renderComponent('collapsible', {
-        ...EXAMPLE_COLLAPSIBLE_BASIC,
-        open: true,
-      }),
-    );
-
-    const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open !== null);
-    expect(openAttribute).toBe(true);
-  });
-
-  describe('when the collapsible heading is clicked to open the collapsible', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-      await page.click('.ons-js-collapsible-heading');
-    });
-
-    it('sets the `open` attribute', async () => {
-      const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open !== null);
-      expect(openAttribute).toBe(true);
-    });
-
-    it('sets the `ga` attributes', async () => {
-      const gaHeadingAttribute = await page.$eval('.ons-js-collapsible-heading', element => element.getAttribute('data-ga-action'));
-
-      expect(gaHeadingAttribute).toBe('Open panel');
-    });
-  });
-
-  describe('when the collapsible heading is focused', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('collapsible', EXAMPLE_COLLAPSIBLE_BASIC));
-      await page.focus('.ons-js-collapsible-heading');
-    });
-
-    describe('when the space bar is pressed', () => {
-      beforeEach(async () => {
-        await page.keyboard.press('Space');
-      });
-
-      it('opens the collapsible content', async () => {
-        const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open !== null);
-        expect(openAttribute).toBe(true);
-      });
-    });
-
-    describe('when the Enter key is pressed', () => {
-      beforeEach(async () => {
-        await page.keyboard.press('Enter');
-      });
-
-      it('opens the collapsible content', async () => {
-        const openAttribute = await page.$eval('.ons-js-collapsible', node => node.open !== null);
-        expect(openAttribute).toBe(true);
-      });
-    });
-  });
-
-  describe('when the state is set to save', () => {
-    beforeEach(async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('collapsible', {
-          ...EXAMPLE_COLLAPSIBLE_BASIC,
-          saveState: true,
-        }),
-      );
-    });
-
-    describe('when the collapsible is opened', () => {
-      beforeEach(async () => {
-        await page.click('.ons-js-collapsible-heading');
-      });
-
-      it('sets state in localStorage', async () => {
-        const localStorage = await page.evaluate(() => localStorage.getItem('collapsible-id'));
-        expect(localStorage).toBe('true');
-      });
-    });
-
-    describe('when the collapsible is closed', () => {
-      beforeEach(async () => {
-        await page.click('.ons-js-collapsible-heading');
-      });
-
-      it('removes state in localStorage', async () => {
-        const localStorage = await page.evaluate(() => localStorage.getItem('collapsible-id'));
-        expect(localStorage).toBe(null);
-      });
-    });
-  });
-});