@ons/design-system 70.0.7 → 70.0.8

package/components/mutually-exclusive/mutually-exclusive.email.spec.js

@@ -3,115 +3,115 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 const SCREEN_READER_TIMEOUT_DELAY = 300;
 
 const EXAMPLE_MUTUALLY_EXCLUSIVE_EMAIL_INPUT_PARAMS = {
-  id: 'email',
-  type: 'email',
-  legend: 'Get a confirmation email',
-  label: {
-    text: 'Enter an email',
-  },
-  mutuallyExclusive: {
-    or: 'Or',
-    deselectMessage: 'Selecting this will clear your email',
-    deselectGroupAdjective: 'cleared',
-    deselectExclusiveOptionAdjective: 'deselected',
-    exclusiveOptions: [
-      {
-        id: 'email-exclusive-option',
-        name: 'no-email',
-        value: 'no-email',
-        label: {
-          text: 'I dont want to receive a confirmation email',
-        },
-      },
-    ],
-  },
+    id: 'email',
+    type: 'email',
+    legend: 'Get a confirmation email',
+    label: {
+        text: 'Enter an email',
+    },
+    mutuallyExclusive: {
+        or: 'Or',
+        deselectMessage: 'Selecting this will clear your email',
+        deselectGroupAdjective: 'cleared',
+        deselectExclusiveOptionAdjective: 'deselected',
+        exclusiveOptions: [
+            {
+                id: 'email-exclusive-option',
+                name: 'no-email',
+                value: 'no-email',
+                label: {
+                    text: 'I dont want to receive a confirmation email',
+                },
+            },
+        ],
+    },
 };
 
 describe('script: mutually-exclusive', () => {
-  describe('email input', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('input', EXAMPLE_MUTUALLY_EXCLUSIVE_EMAIL_INPUT_PARAMS));
-    });
-
-    describe('Given the user populated the email input', () => {
-      beforeEach(async () => {
-        await page.type('#email', 'email@email.com');
-      });
-
-      describe('when the user clicks the mutually exclusive option', () => {
+    describe('email input', () => {
         beforeEach(async () => {
-          await page.click('#email-exclusive-option');
-        });
-
-        it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#email-exclusive-option', (node) => node.checked);
-          expect(isChecked).toBe(true);
+            await setTestPage('/test', renderComponent('input', EXAMPLE_MUTUALLY_EXCLUSIVE_EMAIL_INPUT_PARAMS));
         });
 
-        it('then the email input should be cleared', async () => {
-          const inputValue = await page.$eval('#email', (node) => node.value);
-          expect(inputValue).toBe('');
+        describe('Given the user populated the email input', () => {
+            beforeEach(async () => {
+                await page.type('#email', 'email@email.com');
+            });
+
+            describe('when the user clicks the mutually exclusive option', () => {
+                beforeEach(async () => {
+                    await page.click('#email-exclusive-option');
+                });
+
+                it('then the mutually exclusive option should be checked', async () => {
+                    const isChecked = await page.$eval('#email-exclusive-option', (node) => node.checked);
+                    expect(isChecked).toBe(true);
+                });
+
+                it('then the email input should be cleared', async () => {
+                    const inputValue = await page.$eval('#email', (node) => node.value);
+                    expect(inputValue).toBe('');
+                });
+
+                it('then the aria alert should tell the user that the email input has been cleared', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('Enter an email cleared.');
+                });
+            });
         });
 
-        it('then the aria alert should tell the user that the email input has been cleared', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
-
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('Enter an email cleared.');
-        });
-      });
-    });
-
-    describe('Given the user has checked the mutually exclusive exclusive option', () => {
-      beforeEach(async () => {
-        await page.click('#email-exclusive-option');
-      });
+        describe('Given the user has checked the mutually exclusive exclusive option', () => {
+            beforeEach(async () => {
+                await page.click('#email-exclusive-option');
+            });
 
-      describe('when the user populates the email input', () => {
-        beforeEach(async () => {
-          await page.type('#email', 'email@email.com');
-        });
+            describe('when the user populates the email input', () => {
+                beforeEach(async () => {
+                    await page.type('#email', 'email@email.com');
+                });
 
-        it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#email-exclusive-option', (node) => node.checked);
-          expect(isChecked).toBe(false);
-        });
+                it('then the exclusive option should be unchecked', async () => {
+                    const isChecked = await page.$eval('#email-exclusive-option', (node) => node.checked);
+                    expect(isChecked).toBe(false);
+                });
 
-        it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('I dont want to receive a confirmation email deselected.');
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('I dont want to receive a confirmation email deselected.');
+                });
+            });
         });
-      });
-    });
 
-    describe('Given the user has not populated the email input or checked the exclusive option', () => {
-      describe('when the user populates the email input', () => {
-        beforeEach(async () => {
-          await page.type('#email', 'email@email.com');
-        });
+        describe('Given the user has not populated the email input or checked the exclusive option', () => {
+            describe('when the user populates the email input', () => {
+                beforeEach(async () => {
+                    await page.type('#email', 'email@email.com');
+                });
 
-        it('then the aria alert shouldnt say anything', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert shouldnt say anything', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('');
-        });
-      });
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('');
+                });
+            });
 
-      describe('when the user clicks the mutually exclusive option', () => {
-        beforeEach(async () => {
-          await page.click('#email-exclusive-option');
-        });
+            describe('when the user clicks the mutually exclusive option', () => {
+                beforeEach(async () => {
+                    await page.click('#email-exclusive-option');
+                });
 
-        it('then the aria alert shouldnt say anything', async () => {
-          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+                it('then the aria alert shouldnt say anything', async () => {
+                    await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
-          expect(alertText).toBe('');
+                    const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
+                    expect(alertText).toBe('');
+                });
+            });
         });
-      });
     });
-  });
 });

package/components/mutually-exclusive/mutually-exclusive.js

@@ -7,162 +7,162 @@ const inputAbbrClass = 'ons-js-input-abbr';
 const inputLegendClass = 'ons-js-input-legend';
 
 export default class MutuallyExclusive {
-  constructor(context) {
-    this.context = context;
-
-    const groupInputs = [...context.getElementsByClassName(exclusiveGroupItemClass)];
-    this.numberOfGroupInputs = groupInputs.length;
-    this.groupInputs = groupInputs.map((element) => ({
-      element,
-      labelText: this.getElementLabelText(element),
-      hasValue: this.inputHasValue(element),
-      exclusive: false,
-    }));
-
-    const exclusiveElements = [...context.getElementsByClassName(optionClass)];
-    this.numberOfExclusiveElements = exclusiveElements.length;
-    this.exclusiveElements = exclusiveElements.map((element) => ({
-      element,
-      label: context.querySelector(`label[for=${element.id}]`),
-      labelText: this.getElementLabelText(element),
-      hasValue: this.inputHasValue(element),
-      exclusive: true,
-    }));
-
-    this.allInputs = [...this.groupInputs, ...this.exclusiveElements];
-    this.voiceOverAlertElement = context.querySelector(`.${voiceOverAlertClass}`);
-    this.groupAdjective = this.voiceOverAlertElement.getAttribute(groupAttrAdjective);
-    this.optionAttrAdjective = this.voiceOverAlertElement.getAttribute(optionAttrAdjective);
-    this.deselectMessage = this.exclusiveElements[0].element.getAttribute('data-deselect-message');
-
-    this.bindEventListeners();
-  }
-
-  bindEventListeners() {
-    this.allInputs.forEach((input) => {
-      const event = ['checkbox', 'radio'].includes(input.element.type) ? 'click' : 'input';
-      input.element.addEventListener(event, () => this.handleValueChange(input));
-    });
-  }
-
-  handleValueChange(input) {
-    const previousSelectedValues = this.allInputs.filter((input) => input.hasValue).map((input) => input.labelText);
-    let adjective;
-
-    input.hasValue = this.inputHasValue(input.element);
-
-    if (input.hasValue) {
-      // if not self deselect
-      if (input.exclusive) {
-        adjective = this.groupAdjective;
-
-        this.allInputs
-          .filter((input) => !input.exclusive)
-          .forEach((input) => {
-            input.hasValue = false;
-
-            if (['checkbox', 'radio'].includes(input.element.type)) {
-              input.element.checked = false;
-              this.triggerEvent(input.element, 'change');
-            } else {
-              input.element.value = '';
-              this.triggerEvent(input.element, 'input');
-            }
-          });
-      } else if (!input.exclusive) {
-        const inputs = this.allInputs.filter((input) => input.exclusive);
-        adjective = this.optionAttrAdjective;
-
-        inputs.forEach((input) => {
-          input.hasValue = false;
-          input.element.checked = false;
+    constructor(context) {
+        this.context = context;
+
+        const groupInputs = [...context.getElementsByClassName(exclusiveGroupItemClass)];
+        this.numberOfGroupInputs = groupInputs.length;
+        this.groupInputs = groupInputs.map((element) => ({
+            element,
+            labelText: this.getElementLabelText(element),
+            hasValue: this.inputHasValue(element),
+            exclusive: false,
+        }));
+
+        const exclusiveElements = [...context.getElementsByClassName(optionClass)];
+        this.numberOfExclusiveElements = exclusiveElements.length;
+        this.exclusiveElements = exclusiveElements.map((element) => ({
+            element,
+            label: context.querySelector(`label[for=${element.id}]`),
+            labelText: this.getElementLabelText(element),
+            hasValue: this.inputHasValue(element),
+            exclusive: true,
+        }));
+
+        this.allInputs = [...this.groupInputs, ...this.exclusiveElements];
+        this.voiceOverAlertElement = context.querySelector(`.${voiceOverAlertClass}`);
+        this.groupAdjective = this.voiceOverAlertElement.getAttribute(groupAttrAdjective);
+        this.optionAttrAdjective = this.voiceOverAlertElement.getAttribute(optionAttrAdjective);
+        this.deselectMessage = this.exclusiveElements[0].element.getAttribute('data-deselect-message');
+
+        this.bindEventListeners();
+    }
+
+    bindEventListeners() {
+        this.allInputs.forEach((input) => {
+            const event = ['checkbox', 'radio'].includes(input.element.type) ? 'click' : 'input';
+            input.element.addEventListener(event, () => this.handleValueChange(input));
         });
+    }
 
-        this.triggerEvent(input.element, 'change');
-      }
+    handleValueChange(input) {
+        const previousSelectedValues = this.allInputs.filter((input) => input.hasValue).map((input) => input.labelText);
+        let adjective;
+
+        input.hasValue = this.inputHasValue(input.element);
+
+        if (input.hasValue) {
+            // If not self deselect
+            if (input.exclusive) {
+                adjective = this.groupAdjective;
+
+                this.allInputs
+                    .filter((input) => !input.exclusive)
+                    .forEach((input) => {
+                        input.hasValue = false;
+
+                        if (['checkbox', 'radio'].includes(input.element.type)) {
+                            input.element.checked = false;
+                            this.triggerEvent(input.element, 'change');
+                        } else {
+                            input.element.value = '';
+                            this.triggerEvent(input.element, 'input');
+                        }
+                    });
+            } else if (!input.exclusive) {
+                const inputs = this.allInputs.filter((input) => input.exclusive);
+                adjective = this.optionAttrAdjective;
+
+                inputs.forEach((input) => {
+                    input.hasValue = false;
+                    input.element.checked = false;
+                });
+
+                this.triggerEvent(input.element, 'change');
+            }
 
-      const updatedSelectedValues = this.allInputs.filter((input) => input.hasValue).map((input) => input.labelText);
-      const deselectedValues = previousSelectedValues.filter((labelText) => !updatedSelectedValues.includes(labelText));
+            const updatedSelectedValues = this.allInputs.filter((input) => input.hasValue).map((input) => input.labelText);
+            const deselectedValues = previousSelectedValues.filter((labelText) => !updatedSelectedValues.includes(labelText));
 
-      this.setDeselectMessage();
+            this.setDeselectMessage();
 
-      // Must wait 300ms for screen reader to finish describing ticked item before trigging aria-alert
-      setTimeout(() => this.setAriaLive(deselectedValues, adjective), 300);
+            // Must wait 300ms for screen reader to finish describing ticked item before trigging aria-alert
+            setTimeout(() => this.setAriaLive(deselectedValues, adjective), 300);
+        }
     }
-  }
 
-  getElementLabelText(element) {
-    let label = this.context.querySelector(`label[for=${element.id}]`);
+    getElementLabelText(element) {
+        let label = this.context.querySelector(`label[for=${element.id}]`);
 
-    if (!label && this.numberOfGroupInputs > 1) {
-      label = element.parentNode.querySelector(`.${inputAbbrClass}`);
-    }
+        if (!label && this.numberOfGroupInputs > 1) {
+            label = element.parentNode.querySelector(`.${inputAbbrClass}`);
+        }
 
-    if (!label) {
-      label = this.context.querySelector(`.${inputLegendClass}`);
-    }
+        if (!label) {
+            label = this.context.querySelector(`.${inputLegendClass}`);
+        }
 
-    // This filter is used to strip out any text that is in 'ons-u-vh' elements for accessibility
-    let labelText;
-
-    if (label) {
-      if (label.classList.contains(inputAbbrClass) && label.querySelector('abbr')) {
-        labelText = label.getAttribute('title');
-      } else if (label.classList.contains(inputAbbrClass) && label.querySelector('span')) {
-        labelText = label.querySelector('span').innerText;
-      } else if (label.classList.contains(inputLegendClass) && label.querySelector('h1')) {
-        labelText = label.querySelector('h1').innerText;
-      } else {
-        labelText = [...label.childNodes].filter((node) => node.nodeType === 3 && node.textContent.trim())[0].textContent.trim();
-      }
-    }
+        // This filter is used to strip out any text that is in 'ons-u-vh' elements for accessibility
+        let labelText;
 
-    return labelText;
-  }
+        if (label) {
+            if (label.classList.contains(inputAbbrClass) && label.querySelector('abbr')) {
+                labelText = label.getAttribute('title');
+            } else if (label.classList.contains(inputAbbrClass) && label.querySelector('span')) {
+                labelText = label.querySelector('span').innerText;
+            } else if (label.classList.contains(inputLegendClass) && label.querySelector('h1')) {
+                labelText = label.querySelector('h1').innerText;
+            } else {
+                labelText = [...label.childNodes].filter((node) => node.nodeType === 3 && node.textContent.trim())[0].textContent.trim();
+            }
+        }
 
-  inputHasValue(input) {
-    if (['checkbox', 'radio'].includes(input.type)) {
-      return !!input.checked;
-    } else {
-      return !!input.value.trim().length;
+        return labelText;
     }
-  }
 
-  setAriaLive(deselectedValues, adjective) {
-    const deselectionMessage = deselectedValues.map((label) => `${label} ${adjective}.`).join(' ');
+    inputHasValue(input) {
+        if (['checkbox', 'radio'].includes(input.type)) {
+            return !!input.checked;
+        } else {
+            return !!input.value.trim().length;
+        }
+    }
 
-    // Only update aria-live if value changes to prevent typing from clearing the message before it's read
-    if (deselectionMessage) {
-      this.voiceOverAlertElement.innerHTML = deselectionMessage;
+    setAriaLive(deselectedValues, adjective) {
+        const deselectionMessage = deselectedValues.map((label) => `${label} ${adjective}.`).join(' ');
+
+        // Only update aria-live if value changes to prevent typing from clearing the message before it's read
+        if (deselectionMessage) {
+            this.voiceOverAlertElement.innerHTML = deselectionMessage;
+        }
     }
-  }
 
-  setDeselectMessage() {
-    const groupElementSelected = this.groupInputs.find((input) => input.hasValue);
+    setDeselectMessage() {
+        const groupElementSelected = this.groupInputs.find((input) => input.hasValue);
 
-    if (!this.deselectMessageElement && groupElementSelected) {
-      const deselectMessageElement = document.createElement('span');
-      deselectMessageElement.classList.add('ons-u-vh');
-      deselectMessageElement.innerHTML = `. ${this.deselectMessage}`;
+        if (!this.deselectMessageElement && groupElementSelected) {
+            const deselectMessageElement = document.createElement('span');
+            deselectMessageElement.classList.add('ons-u-vh');
+            deselectMessageElement.innerHTML = `. ${this.deselectMessage}`;
 
-      this.deselectMessageElement = deselectMessageElement;
-      this.exclusiveElements[0].label.appendChild(deselectMessageElement);
-    } else if (this.deselectMessageElement && !groupElementSelected) {
-      this.deselectMessageElement.remove();
-      this.deselectMessageElement = null;
-    }
-  }
-
-  triggerEvent(input, eventType) {
-    let event;
-    if (typeof Event === 'function') {
-      event = new Event(eventType, { bubbles: false, cancelable: true });
-    } else {
-      // IE11 requires a custom event
-      event = document.createEvent('HTMLEvents');
-      event.initEvent(eventType, false, true);
+            this.deselectMessageElement = deselectMessageElement;
+            this.exclusiveElements[0].label.appendChild(deselectMessageElement);
+        } else if (this.deselectMessageElement && !groupElementSelected) {
+            this.deselectMessageElement.remove();
+            this.deselectMessageElement = null;
+        }
     }
 
-    input.dispatchEvent(event);
-  }
+    triggerEvent(input, eventType) {
+        let event;
+        if (typeof Event === 'function') {
+            event = new Event(eventType, { bubbles: false, cancelable: true });
+        } else {
+            // IE11 requires a custom event
+            event = document.createEvent('HTMLEvents');
+            event.initEvent(eventType, false, true);
+        }
+
+        input.dispatchEvent(event);
+    }
 }