@ons/design-system 70.0.7 → 70.0.9

package/components/details/_macro.njk

@@ -1,28 +1,35 @@
 {% macro onsDetails(params) %}
     <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 %}
+        class="ons-details ons-js-details{{ ' ons-details--accordion' if params.isAccordion }}{{ ' ' + params.classes if params.classes else '' }}"
+        {% 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 %}
     >
         <div
-            class="ons-details__heading ons-js-details-heading" role="button"
-            {% 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 %}
+            class="ons-details__heading ons-js-details-heading"
+            role="button"
+            {% 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 }}>
+            {% set openingTag = "<" + titleTag %}
+            {% set closingTag = "</" + titleTag + ">" %}
+            {{ openingTag | safe }}
+            class="ons-details__title">{{ params.title }}{{ closingTag | safe }}
             <span class="ons-details__icon">
                 {% from "components/icon/_macro.njk" import onsIcon %}
                 {{-
                     onsIcon({
                         "iconType": "chevron"
                     })
-                -}}</span>
+                -}}</span
+            >
         </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 %}
+        <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>

package/components/details/_macro.spec.js

@@ -6,139 +6,139 @@ 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',
+    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('icon');
-    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...'));
-  });
+    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('icon');
+        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

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

package/components/details/details.js

@@ -1,78 +1,78 @@
 export default class Details {
-  constructor(detailsElement) {
-    this.saveState = detailsElement.getAttribute('data-save-state') === 'true';
-    this.open = detailsElement.getAttribute('data-open') === 'true';
-    this.group = detailsElement.getAttribute('data-group');
+    constructor(detailsElement) {
+        this.saveState = detailsElement.getAttribute('data-save-state') === 'true';
+        this.open = detailsElement.getAttribute('data-open') === 'true';
+        this.group = detailsElement.getAttribute('data-group');
 
-    // Elements
-    this.details = detailsElement;
-    this.detailsHeader = this.details.querySelector('.ons-js-details-heading');
-    this.content = this.details.querySelector('.ons-js-details-content');
+        // Elements
+        this.details = detailsElement;
+        this.detailsHeader = this.details.querySelector('.ons-js-details-heading');
+        this.content = this.details.querySelector('.ons-js-details-content');
 
-    // Initialise
-    const detailsId = detailsElement.getAttribute('id');
+        // Initialise
+        const detailsId = detailsElement.getAttribute('id');
 
-    this.details.setAttribute('role', 'group');
-    this.detailsHeader.setAttribute('role', 'link');
-    this.detailsHeader.setAttribute('aria-controls', detailsId);
-    this.detailsHeader.setAttribute('tabindex', 0);
+        this.details.setAttribute('role', 'group');
+        this.detailsHeader.setAttribute('role', 'link');
+        this.detailsHeader.setAttribute('aria-controls', detailsId);
+        this.detailsHeader.setAttribute('tabindex', 0);
 
-    if (localStorage.getItem(detailsId) || this.open) {
-      this.setOpen(true);
-    } else {
-      this.setOpen(false);
+        if (localStorage.getItem(detailsId) || this.open) {
+            this.setOpen(true);
+        } else {
+            this.setOpen(false);
+        }
+
+        this.detailsHeader.addEventListener('click', this.toggle.bind(this));
+        this.detailsHeader.addEventListener('keydown', this.keyboardInteraction.bind(this));
+        this.details.classList.add('ons-details--initialised');
     }
 
-    this.detailsHeader.addEventListener('click', this.toggle.bind(this));
-    this.detailsHeader.addEventListener('keydown', this.keyboardInteraction.bind(this));
-    this.details.classList.add('ons-details--initialised');
-  }
+    toggle(event) {
+        event.preventDefault();
+        this.setOpen(!this.isOpen);
+    }
 
-  toggle(event) {
-    event.preventDefault();
-    this.setOpen(!this.isOpen);
-  }
+    setOpen(open) {
+        if (open !== this.isOpen) {
+            const action = open ? 'Open' : 'Close';
+            const cls = open ? 'add' : 'remove';
+            const openAttribute = open ? 'set' : 'remove';
 
-  setOpen(open) {
-    if (open !== this.isOpen) {
-      const action = open ? 'Open' : 'Close';
-      const cls = open ? 'add' : 'remove';
-      const openAttribute = open ? 'set' : 'remove';
+            this.isOpen = open;
+            this.details[`${openAttribute}Attribute`]('open', '');
+            this.details.classList[cls]('ons-details--open');
+            this.detailsHeader.setAttribute('aria-expanded', open);
+            this.content.setAttribute('aria-hidden', !open);
+            this.detailsHeader.setAttribute('data-ga-action', `${action} panel`);
 
-      this.isOpen = open;
-      this.details[`${openAttribute}Attribute`]('open', '');
-      this.details.classList[cls]('ons-details--open');
-      this.detailsHeader.setAttribute('aria-expanded', open);
-      this.content.setAttribute('aria-hidden', !open);
-      this.detailsHeader.setAttribute('data-ga-action', `${action} panel`);
+            if (this.onOpen && this.onClose) {
+                if (open) {
+                    this.onOpen();
+                } else {
+                    this.onClose();
+                }
+            }
+        }
 
-      if (this.onOpen && this.onClose) {
-        if (open) {
-          this.onOpen();
+        if (this.saveState === true && open === true) {
+            localStorage.setItem(this.details.getAttribute('id'), true);
         } else {
-          this.onClose();
+            localStorage.removeItem(this.details.getAttribute('id'));
         }
-      }
     }
 
-    if (this.saveState === true && open === true) {
-      localStorage.setItem(this.details.getAttribute('id'), true);
-    } else {
-      localStorage.removeItem(this.details.getAttribute('id'));
-    }
-  }
+    keyboardInteraction(event) {
+        const keyCode = event.which;
+        switch (keyCode) {
+            // Enter/Space
+            case 13:
+            case 32:
+                event.preventDefault();
+                event.stopPropagation();
 
-  keyboardInteraction(event) {
-    const keyCode = event.which;
-    switch (keyCode) {
-      // Enter/Space
-      case 13:
-      case 32:
-        event.preventDefault();
-        event.stopPropagation();
-
-        this.toggle(event);
-        break;
+                this.toggle(event);
+                break;
+        }
     }
-  }
 }