@ons/design-system 70.0.7 → 70.0.8

package/components/accordion/_macro.spec.js

@@ -6,176 +6,176 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_ACCORDION_WITH_TWO_ITEMS = {
-  id: 'accordion-identifier',
-  itemsList: [
-    {
-      title: 'Title for item 1',
-      content: 'Content for item 1',
-    },
-    {
-      title: 'Title for item 2',
-      content: 'Content for item 2',
-    },
-  ],
+    id: 'accordion-identifier',
+    itemsList: [
+        {
+            title: 'Title for item 1',
+            content: 'Content for item 1',
+        },
+        {
+            title: 'Title for item 2',
+            content: 'Content for item 2',
+        },
+    ],
 };
 
 const EXAMPLE_ACCORDION = {
-  ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-  allButton: {
-    open: 'Open label',
-    close: 'Close label',
-  },
+    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+    allButton: {
+        open: 'Open label',
+        close: 'Close label',
+    },
 };
 
 describe('macro: accordion', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-    expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('accordion', {
-        ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-        classes: 'extra-class another-extra-class',
-      }),
-    );
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION));
 
-    expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
-    expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
-  });
-
-  describe('item', () => {
-    it('has provided title text', () => {
-      const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
-
-      const titleText = $('.ons-details__title').first().text().trim();
-      expect(titleText).toBe('Title for item 1');
-    });
-
-    it('has title with provided tag override', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              titleTag: 'h5',
-              content: 'Content for item 1',
-            },
-          ],
-        }),
-      );
-
-      const titleTag = $('.ons-details__title')[0].tagName;
-      expect(titleTag).toBe('h5');
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
 
-    it('has provided content text', () => {
-      const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
-      const titleText = $('.ons-details__content').first().text().trim();
-      expect(titleText).toBe('Content for item 1');
+        expect($('.ons-accordion').attr('id')).toBe('accordion-identifier');
     });
 
-    it('has additionally provided `attributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              attributes: {
-                a: 123,
-                b: 456,
-              },
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-details').attr('a')).toBe('123');
-      expect($('.ons-details').attr('b')).toBe('456');
-    });
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('accordion', {
+                ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                classes: 'extra-class another-extra-class',
+            }),
+        );
 
-    it('has additionally provided `headingAttributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              headingAttributes: {
-                a: 123,
-                b: 456,
-              },
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-details__heading').attr('a')).toBe('123');
-      expect($('.ons-details__heading').attr('b')).toBe('456');
+        expect($('.ons-accordion').hasClass('extra-class')).toBe(true);
+        expect($('.ons-accordion').hasClass('another-extra-class')).toBe(true);
     });
 
-    it('has additionally provided `contentAttributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              content: 'Content for item 1',
-              contentAttributes: {
-                a: 123,
-                b: 456,
-              },
-            },
-          ],
-        }),
-      );
-
-      expect($('.ons-details__content').attr('a')).toBe('123');
-      expect($('.ons-details__content').attr('b')).toBe('456');
-    });
-  });
-
-  describe('toggle all button', () => {
-    it('outputs a button with the expected class', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-          allButton: {
-            open: 'Open label',
-            close: 'Close label',
-          },
-        }),
-      );
-
-      expect($('button.ons-accordion__toggle-all').length).toBe(1);
+    describe('item', () => {
+        it('has provided title text', () => {
+            const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
+
+            const titleText = $('.ons-details__title').first().text().trim();
+            expect(titleText).toBe('Title for item 1');
+        });
+
+        it('has title with provided tag override', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            titleTag: 'h5',
+                            content: 'Content for item 1',
+                        },
+                    ],
+                }),
+            );
+
+            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-details__content').first().text().trim();
+            expect(titleText).toBe('Content for item 1');
+        });
+
+        it('has additionally provided `attributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            attributes: {
+                                a: 123,
+                                b: 456,
+                            },
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-details').attr('a')).toBe('123');
+            expect($('.ons-details').attr('b')).toBe('456');
+        });
+
+        it('has additionally provided `headingAttributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            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('accordion', {
+                    itemsList: [
+                        {
+                            title: 'Title for item 1',
+                            content: 'Content for item 1',
+                            contentAttributes: {
+                                a: 123,
+                                b: 456,
+                            },
+                        },
+                    ],
+                }),
+            );
+
+            expect($('.ons-details__content').attr('a')).toBe('123');
+            expect($('.ons-details__content').attr('b')).toBe('456');
+        });
     });
 
-    it('has additionally provided `attributes`', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-          allButton: {
-            open: 'Open label',
-            close: 'Close label',
-            attributes: {
-              a: 123,
-              b: 456,
-            },
-          },
-        }),
-      );
-
-      expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
-      expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+    describe('toggle all button', () => {
+        it('outputs a button with the expected class', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                    },
+                }),
+            );
+
+            expect($('button.ons-accordion__toggle-all').length).toBe(1);
+        });
+
+        it('has additionally provided `attributes`', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                        attributes: {
+                            a: 123,
+                            b: 456,
+                        },
+                    },
+                }),
+            );
+
+            expect($('button.ons-accordion__toggle-all').attr('a')).toBe('123');
+            expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
+        });
     });
-  });
 });

package/components/accordion/accordion.dom.js

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

package/components/accordion/accordion.js

@@ -1,64 +1,64 @@
 export default class Accordion {
-  constructor(button, detailsEls) {
-    this.openDetailsEls = 0;
+    constructor(button, detailsEls) {
+        this.openDetailsEls = 0;
 
-    this.button = button;
-    this.buttonInner = button.querySelector('.ons-accordion__toggle-all-inner');
-    this.group = button.getAttribute('data-group');
-    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.detailsEls.find((details) => details.open === true);
+        this.button = button;
+        this.buttonInner = button.querySelector('.ons-accordion__toggle-all-inner');
+        this.group = button.getAttribute('data-group');
+        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.detailsEls.find((details) => details.open === true);
 
-    this.detailsEls.forEach((details) => {
-      details.onOpen = this.onOpen.bind(this);
-      details.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.openDetailsEls = this.totalDetailsEls;
-    }
+        if (this.open) {
+            this.openDetailsEls = this.totalDetailsEls;
+        }
 
-    this.button.addEventListener('click', this.handleButtonClick.bind(this));
-    this.setButton();
-    this.button.classList.remove('ons-u-d-no');
-  }
+        this.button.addEventListener('click', this.handleButtonClick.bind(this));
+        this.setButton();
+        this.button.classList.remove('ons-u-d-no');
+    }
 
-  handleButtonClick(event) {
-    event.preventDefault();
+    handleButtonClick(event) {
+        event.preventDefault();
 
-    const open = !this.canClose();
+        const open = !this.canClose();
 
-    this.detailsEls.forEach((details) => {
-      details.setOpen(open);
-    });
-  }
+        this.detailsEls.forEach((details) => {
+            details.setOpen(open);
+        });
+    }
 
-  onOpen() {
-    this.openDetailsEls++;
-    this.setButton();
-  }
+    onOpen() {
+        this.openDetailsEls++;
+        this.setButton();
+    }
 
-  onClose() {
-    this.openDetailsEls--;
-    this.setButton();
-  }
+    onClose() {
+        this.openDetailsEls--;
+        this.setButton();
+    }
 
-  canClose() {
-    return this.openDetailsEls === this.totalDetailsEls;
-  }
+    canClose() {
+        return this.openDetailsEls === this.totalDetailsEls;
+    }
 
-  setButton() {
-    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');
+    setButton() {
+        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');
+        }
     }
-  }
 }