@ons/design-system 70.0.7 → 70.0.9

package/components/modal/_macro.njk

@@ -1,24 +1,23 @@
 {% macro onsModal(params) %}
     {% set modalId = params.id | default('dialog') %}
-    <dialog class="ons-modal ons-js-modal {{ params.classes if params.classes else '' }}"
+    <dialog
+        class="ons-modal ons-js-modal {{ params.classes if params.classes }}"
         id="{{ modalId }}"
         role="dialog"
         aria-labelledby="ons-modal-title"
-        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
+        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
     >
         <div class="ons-modal__content">
-            <h2 id="ons-modal-title" class="ons-modal__title">
-                {{ params.title }}
-            </h2>
-            <div class="ons-modal__body">
-                {{ (params.body if params.body else "") | safe }}{{ caller() if caller }}
-            </div>
+            <h2 id="ons-modal-title" class="ons-modal__title">{{ params.title }}</h2>
+            <div class="ons-modal__body">{{ (params.body if params.body) | safe }}{{ caller() if caller }}</div>
             {% if params.btnText %}
                 {% from "components/button/_macro.njk" import onsButton %}
-                {{ onsButton({
-                    "text": params.btnText,
-                    "classes": "ons-js-modal-btn ons-u-mt-s"
-                }) }}
+                {{
+                    onsButton({
+                        "text": params.btnText,
+                        "classes": "ons-js-modal-btn ons-u-mt-s"
+                    })
+                }}
             {% endif %}
         </div>
     </dialog>

package/components/modal/_macro.spec.js

@@ -6,76 +6,76 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_MODAL_BASIC = {
-  title: 'Modal title',
-  body: 'Modal body text',
-  btnText: 'Modal button',
+    title: 'Modal title',
+    body: 'Modal body text',
+    btnText: 'Modal button',
 };
 
 describe('macro: modal', () => {
-  it('passes jest-axe checks with', async () => {
-    const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has expected `title`', () => {
-    const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
-
-    const title = $('.ons-modal__title').html().trim();
-    expect(title).toBe('Modal title');
-  });
-
-  it('has expected `body`', () => {
-    const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
-
-    const title = $('.ons-modal__body').html().trim();
-    expect(title).toBe('Modal body text');
-  });
-
-  it('has the default ID', () => {
-    const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
-    expect($('#dialog').length).toBe(1);
-  });
-
-  it('has the provided `id`', () => {
-    const $ = cheerio.load(renderComponent('modal', { ...EXAMPLE_MODAL_BASIC, id: 'modal-id' }));
-    expect($('#modal-id').length).toBe(1);
-  });
-
-  it('has the provided `classes`', () => {
-    const $ = cheerio.load(renderComponent('modal', { ...EXAMPLE_MODAL_BASIC, classes: 'modal-class' }));
-    expect($('.modal-class').length).toBe(1);
-  });
-
-  it('outputs the expected button', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
-
-    faker.renderComponent('modal', EXAMPLE_MODAL_BASIC);
-
-    expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Modal button');
-  });
-
-  it('calls with content', () => {
-    const $ = cheerio.load(renderComponent('modal', { EXAMPLE_MODAL_BASIC }, 'Example content...'));
-
-    const content = $('.ons-modal__body').text().trim();
-    expect(content).toBe('Example content...');
-  });
-
-  it('has additionally provided `attributes`', () => {
-    const $ = cheerio.load(
-      renderComponent('modal', {
-        ...EXAMPLE_MODAL_BASIC,
-        attributes: {
-          a: 123,
-          b: 456,
-        },
-      }),
-    );
-
-    expect($('.ons-modal').attr('a')).toBe('123');
-    expect($('.ons-modal').attr('b')).toBe('456');
-  });
+    it('passes jest-axe checks with', async () => {
+        const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has expected `title`', () => {
+        const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
+
+        const title = $('.ons-modal__title').html().trim();
+        expect(title).toBe('Modal title');
+    });
+
+    it('has expected `body`', () => {
+        const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
+
+        const title = $('.ons-modal__body').html().trim();
+        expect(title).toBe('Modal body text');
+    });
+
+    it('has the default ID', () => {
+        const $ = cheerio.load(renderComponent('modal', EXAMPLE_MODAL_BASIC));
+        expect($('#dialog').length).toBe(1);
+    });
+
+    it('has the provided `id`', () => {
+        const $ = cheerio.load(renderComponent('modal', { ...EXAMPLE_MODAL_BASIC, id: 'modal-id' }));
+        expect($('#modal-id').length).toBe(1);
+    });
+
+    it('has the provided `classes`', () => {
+        const $ = cheerio.load(renderComponent('modal', { ...EXAMPLE_MODAL_BASIC, classes: 'modal-class' }));
+        expect($('.modal-class').length).toBe(1);
+    });
+
+    it('outputs the expected button', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
+
+        faker.renderComponent('modal', EXAMPLE_MODAL_BASIC);
+
+        expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Modal button');
+    });
+
+    it('calls with content', () => {
+        const $ = cheerio.load(renderComponent('modal', { EXAMPLE_MODAL_BASIC }, 'Example content...'));
+
+        const content = $('.ons-modal__body').text().trim();
+        expect(content).toBe('Example content...');
+    });
+
+    it('has additionally provided `attributes`', () => {
+        const $ = cheerio.load(
+            renderComponent('modal', {
+                ...EXAMPLE_MODAL_BASIC,
+                attributes: {
+                    a: 123,
+                    b: 456,
+                },
+            }),
+        );
+
+        expect($('.ons-modal').attr('a')).toBe('123');
+        expect($('.ons-modal').attr('b')).toBe('456');
+    });
 });

package/components/modal/_modal.scss

@@ -1,47 +1,47 @@
 $backdrop-colour: rgb(0 0 0 / 80%);
 
 .ons-modal {
-  border: none;
-  border-radius: 0.4rem;
-  box-shadow: 0 0 7px 0 #000;
-  display: none;
-  left: 0;
-  margin-left: 2rem;
-  margin-right: 2rem;
-  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
-  padding: 2rem;
-  position: fixed;
-  top: 0;
+    border: 0;
+    border-radius: 0.4rem;
+    box-shadow: 0 0 7px 0 #000;
+    display: none;
+    left: 0;
+    margin-left: 2rem;
+    margin-right: 2rem;
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+    padding: 2rem;
+    position: fixed;
+    top: 0;
 
-  @media screen and (width >= 600px) {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 500px;
-  }
+    @media screen and (width >= 600px) {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 500px;
+    }
 
-  &-ie11 & {
-    background: var(--ons-color-white);
-    inset: 50% 0 0;
-    height: 350px;
-    position: fixed;
-    transform: translate(0, -50%);
-  }
+    &-ie11 & {
+        background: var(--ons-color-white);
+        inset: 50% 0 0;
+        height: 350px;
+        position: fixed;
+        transform: translate(0, -50%);
+    }
 
-  &::backdrop {
-    backdrop-filter: blur(3px);
-    background: $backdrop-colour;
-  }
+    &::backdrop {
+        backdrop-filter: blur(3px);
+        background: $backdrop-colour;
+    }
 
-  & + .backdrop {
-    background: $backdrop-colour;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
+    + .backdrop {
+        background: $backdrop-colour;
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
 }
 
 .ons-modal-overlay {
-  overflow: hidden;
+    overflow: hidden;
 }

package/components/modal/modal.dom.js

@@ -1,14 +1,14 @@
 import domready from '../../js/domready';
 
 async function modals() {
-  const modals = [...document.querySelectorAll('.ons-js-modal')];
-  const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
+    const modals = [...document.querySelectorAll('.ons-js-modal')];
+    const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
 
-  if (modals.length && !timeouts.length) {
-    const Modal = (await import('./modal')).default;
+    if (modals.length && !timeouts.length) {
+        const Modal = (await import('./modal')).default;
 
-    modals.forEach((component) => new Modal(component));
-  }
+        modals.forEach((component) => new Modal(component));
+    }
 }
 
 domready(modals);

package/components/modal/modal.js

@@ -4,110 +4,110 @@ const overLayClass = 'ons-modal-overlay';
 const ie11Class = 'ons-modal-ie11';
 
 export default class Modal {
-  constructor(component) {
-    this.component = component;
-    this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
-    this.closeButton = component.querySelector('.ons-js-modal-btn');
-    this.lastFocusedEl = null;
-    this.dialogCSSSupported = true;
-    this.modalType = this.component.classList.contains('ons-js-timeout-modal') ? 'Timeout' : 'Generic';
-
-    this.initialise();
-  }
-
-  initialise() {
-    if (!this.dialogSupported()) {
-      /* istanbul ignore next */
-      return;
+    constructor(component) {
+        this.component = component;
+        this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
+        this.closeButton = component.querySelector('.ons-js-modal-btn');
+        this.lastFocusedEl = null;
+        this.dialogCSSSupported = true;
+        this.modalType = this.component.classList.contains('ons-js-timeout-modal') ? 'Timeout' : 'Generic';
+
+        this.initialise();
     }
 
-    if (this.launcher) {
-      this.launcher.addEventListener('click', this.openDialog.bind(this));
-    }
+    initialise() {
+        if (!this.dialogSupported()) {
+            /* istanbul ignore next */
+            return;
+        }
 
-    if (this.closeButton) {
-      this.closeButton.addEventListener('click', this.closeDialog.bind(this));
-    }
+        if (this.launcher) {
+            this.launcher.addEventListener('click', this.openDialog.bind(this));
+        }
 
-    if (this.modalType !== 'Timeout') {
-      window.addEventListener('keydown', this.escToClose.bind(this));
+        if (this.closeButton) {
+            this.closeButton.addEventListener('click', this.closeDialog.bind(this));
+        }
+
+        if (this.modalType !== 'Timeout') {
+            window.addEventListener('keydown', this.escToClose.bind(this));
+        }
     }
-  }
-
-  dialogSupported() {
-    if (typeof HTMLDialogElement === 'function') {
-      return true;
-    } else {
-      try {
-        dialogPolyfill.registerDialog(this.component);
-        this.dialogCSSSupported = false;
-        return true;
-      } catch (error) {
-        /* istanbul ignore next */
-        return false;
-      }
+
+    dialogSupported() {
+        if (typeof HTMLDialogElement === 'function') {
+            return true;
+        } else {
+            try {
+                dialogPolyfill.registerDialog(this.component);
+                this.dialogCSSSupported = false;
+                return true;
+            } catch (error) {
+                /* istanbul ignore next */
+                return false;
+            }
+        }
     }
-  }
 
-  openDialog(event) {
-    if (!this.isDialogOpen()) {
-      this.component.classList.add('ons-u-db');
-      document.querySelector('body').classList.add(overLayClass);
+    openDialog(event) {
+        if (!this.isDialogOpen()) {
+            this.component.classList.add('ons-u-db');
+            document.querySelector('body').classList.add(overLayClass);
 
-      if (!this.dialogCSSSupported) {
-        document.querySelector('body').classList.add(ie11Class);
-      }
+            if (!this.dialogCSSSupported) {
+                document.querySelector('body').classList.add(ie11Class);
+            }
 
-      this.saveLastFocusedEl();
+            this.saveLastFocusedEl();
 
-      if (event) {
-        const modal = document.getElementById(event.target.getAttribute('data-modal-id'));
-        modal.showModal();
-      } else {
-        this.component.showModal();
-      }
+            if (event) {
+                const modal = document.getElementById(event.target.getAttribute('data-modal-id'));
+                modal.showModal();
+            } else {
+                this.component.showModal();
+            }
+        }
     }
-  }
-
-  saveLastFocusedEl() {
-    this.lastFocusedEl = document.activeElement;
-    if (!this.lastFocusedEl || this.lastFocusedEl === document.body) {
-      this.lastFocusedEl = null;
-    } else if (document.querySelector) {
-      this.lastFocusedEl = document.querySelector(':focus');
+
+    saveLastFocusedEl() {
+        this.lastFocusedEl = document.activeElement;
+        if (!this.lastFocusedEl || this.lastFocusedEl === document.body) {
+            this.lastFocusedEl = null;
+        } else if (document.querySelector) {
+            this.lastFocusedEl = document.querySelector(':focus');
+        }
+    }
+
+    setFocusOnLastFocusedEl(lastFocusedEl) {
+        if (lastFocusedEl) {
+            lastFocusedEl.focus();
+        }
     }
-  }
 
-  setFocusOnLastFocusedEl(lastFocusedEl) {
-    if (lastFocusedEl) {
-      lastFocusedEl.focus();
+    isDialogOpen() {
+        return this.component['open'];
     }
-  }
-
-  isDialogOpen() {
-    return this.component['open'];
-  }
-
-  closeDialog(event) {
-    if (this.isDialogOpen()) {
-      if (event) {
-        event.preventDefault();
-      }
-      this.component.classList.remove('ons-u-db');
-      document.querySelector('body').classList.remove(overLayClass);
-
-      if (!this.dialogCSSSupported) {
-        document.querySelector('body').classList.remove(ie11Class);
-      }
-
-      this.component.close();
-      this.setFocusOnLastFocusedEl(this.lastFocusedEl);
+
+    closeDialog(event) {
+        if (this.isDialogOpen()) {
+            if (event) {
+                event.preventDefault();
+            }
+            this.component.classList.remove('ons-u-db');
+            document.querySelector('body').classList.remove(overLayClass);
+
+            if (!this.dialogCSSSupported) {
+                document.querySelector('body').classList.remove(ie11Class);
+            }
+
+            this.component.close();
+            this.setFocusOnLastFocusedEl(this.lastFocusedEl);
+        }
     }
-  }
 
-  escToClose(event) {
-    if (this.isDialogOpen() && event.keyCode === 27) {
-      this.closeDialog(event);
+    escToClose(event) {
+        if (this.isDialogOpen() && event.keyCode === 27) {
+            this.closeDialog(event);
+        }
     }
-  }
 }

package/components/modal/modal.spec.js

@@ -1,72 +1,72 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_MODAL = {
-  title: 'Modal title',
-  body: 'Modal body text',
-  btnText: 'Modal button',
+    title: 'Modal title',
+    body: 'Modal body text',
+    btnText: 'Modal button',
 };
 
 describe('script: modal', () => {
-  beforeEach(async () => {
-    const component = renderComponent('modal', EXAMPLE_MODAL);
-    const template = `
+    beforeEach(async () => {
+        const component = renderComponent('modal', EXAMPLE_MODAL);
+        const template = `
       <div class="ons-page">
         <button id="launcher" data-modal-id="dialog">Launcher</button> 
         ${component}
       </div>
   `;
-    await setTestPage('/test', template);
-  });
-
-  describe('when the modal launcher is clicked', () => {
-    beforeEach(async () => {
-      await page.focus('#launcher');
-      await page.keyboard.press('Enter');
+        await setTestPage('/test', template);
     });
 
-    it('displays the modal', async () => {
-      const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
-      expect(modalIsVisible).toBe(true);
-    });
+    describe('when the modal launcher is clicked', () => {
+        beforeEach(async () => {
+            await page.focus('#launcher');
+            await page.keyboard.press('Enter');
+        });
 
-    it('has the correct body class added', async () => {
-      const bodyClassAddition = await page.$eval('body', (node) => node.classList.contains('ons-modal-overlay'));
-      expect(bodyClassAddition).toBe(true);
-    });
+        it('displays the modal', async () => {
+            const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
+            expect(modalIsVisible).toBe(true);
+        });
 
-    describe('when the modal close button is clicked', () => {
-      beforeEach(async () => {
-        await page.focus('.ons-js-modal-btn');
-        await page.keyboard.press('Enter');
-      });
+        it('has the correct body class added', async () => {
+            const bodyClassAddition = await page.$eval('body', (node) => node.classList.contains('ons-modal-overlay'));
+            expect(bodyClassAddition).toBe(true);
+        });
 
-      it('hides the modal', async () => {
-        const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
-        expect(modalIsVisible).toBe(false);
-      });
+        describe('when the modal close button is clicked', () => {
+            beforeEach(async () => {
+                await page.focus('.ons-js-modal-btn');
+                await page.keyboard.press('Enter');
+            });
 
-      it('has the body class removed', async () => {
-        const bodyClassAddition = await page.$eval('body', (node) => node.classList.contains('ons-modal-overlay'));
-        expect(bodyClassAddition).toBe(false);
-      });
+            it('hides the modal', async () => {
+                const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
+                expect(modalIsVisible).toBe(false);
+            });
 
-      it('focuses the last active element', async () => {
-        const activeElementId = await page.evaluate(() => document.activeElement.id);
-        expect(activeElementId).toBe('launcher');
-      });
-    });
+            it('has the body class removed', async () => {
+                const bodyClassAddition = await page.$eval('body', (node) => node.classList.contains('ons-modal-overlay'));
+                expect(bodyClassAddition).toBe(false);
+            });
+
+            it('focuses the last active element', async () => {
+                const activeElementId = await page.evaluate(() => document.activeElement.id);
+                expect(activeElementId).toBe('launcher');
+            });
+        });
 
-    describe('when the `esc` key is pressed', () => {
-      beforeEach(async () => {
-        await page.focus('.ons-js-modal-btn');
-        await page.keyboard.press('Enter');
-        await page.keyboard.press('Escape');
-      });
+        describe('when the `esc` key is pressed', () => {
+            beforeEach(async () => {
+                await page.focus('.ons-js-modal-btn');
+                await page.keyboard.press('Enter');
+                await page.keyboard.press('Escape');
+            });
 
-      it('closes the modal', async () => {
-        const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
-        expect(modalIsVisible).toBe(false);
-      });
+            it('closes the modal', async () => {
+                const modalIsVisible = await page.$eval('.ons-modal', (node) => node.classList.contains('ons-u-db'));
+                expect(modalIsVisible).toBe(false);
+            });
+        });
     });
-  });
 });