@ons/design-system 49.2.0 → 51.0.0

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

@@ -0,0 +1,141 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
+  id: 'address-duration',
+  legendOrLabel: 'How long have you lived at this address?',
+  description: 'If you have lived at this address for less than a year then enter 0 into the year input.',
+  field1: {
+    id: 'address-duration-years',
+    name: 'address-duration-years',
+    suffix: {
+      text: 'Years',
+    },
+    attributes: {
+      min: 0,
+      max: 100,
+    },
+  },
+  field2: {
+    id: 'address-duration-months',
+    name: 'address-duration-months',
+    suffix: {
+      text: 'Months',
+    },
+    attributes: {
+      min: 0,
+      max: 11,
+    },
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear the date if one has been inputted',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'duration-exclusive-option',
+        name: 'no-duration',
+        value: 'no-duration',
+        label: {
+          text: 'I have not moved in to this address yet',
+        },
+      },
+    ],
+  },
+};
+
+describe('script: mutually-exclusive', () => {
+  describe('duration', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('duration', EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS));
+    });
+
+    describe('Given the user populated the duration', () => {
+      beforeEach(async () => {
+        await page.type('#address-duration-years', '2');
+        await page.type('#address-duration-months', '4');
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#duration-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#duration-exclusive-option', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the inputs should be cleared', async () => {
+          const yearsValue = await page.$eval('#address-duration-years', node => node.value);
+          expect(yearsValue).toBe('');
+          const monthsValue = await page.$eval('#address-duration-months', node => node.value);
+          expect(monthsValue).toBe('');
+        });
+
+        it('then the aria alert should tell the user that the inputs have 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('Years cleared. Months cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#duration-exclusive-option');
+      });
+
+      describe('when the user populates the duration fields', () => {
+        beforeEach(async () => {
+          await page.type('#address-duration-years', '2');
+          await page.type('#address-duration-months', '4');
+        });
+
+        it('then the exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#duration-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);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('I have not moved in to this address yet deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the duration inputs or checked the exclusive option', () => {
+      describe('when the user populates the duration inputs', () => {
+        beforeEach(async () => {
+          await page.type('#address-duration-years', '2');
+          await page.type('#address-duration-months', '4');
+        });
+
+        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('');
+        });
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#duration-exclusive-option');
+        });
+
+        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('');
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,117 @@
+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',
+        },
+      },
+    ],
+  },
+};
+
+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', () => {
+        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.');
+        });
+      });
+    });
+
+    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');
+        });
+
+        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);
+
+          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');
+        });
+
+        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('');
+        });
+      });
+
+      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);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
+});

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

@@ -1,8 +1,8 @@
 const exclusiveGroupItemClass = 'ons-js-exclusive-group-item';
-const checkboxClass = 'ons-js-exclusive-checkbox';
+const optionClass = 'ons-js-exclusive-option';
 const voiceOverAlertClass = 'ons-js-exclusive-alert';
 const groupAttrAdjective = 'data-group-adjective';
-const checkboxAttrAdjective = 'data-checkbox-adjective';
+const optionAttrAdjective = 'data-option-adjective';
 const inputAbbrClass = 'ons-js-input-abbr';
 const inputLegendClass = 'ons-js-input-legend';
 
@@ -19,28 +19,28 @@ export default class MutuallyExclusive {
       exclusive: false,
     }));
 
-    const checkboxElement = context.querySelector(`.${checkboxClass}`);
-    this.checkbox = {
-      element: checkboxElement,
-      label: context.querySelector(`label[for=${checkboxElement.id}]`),
-      labelText: this.getElementLabelText(checkboxElement),
-      hasValue: this.inputHasValue(checkboxElement),
+    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.checkbox];
+    this.allInputs = [...this.groupInputs, ...this.exclusiveElements];
     this.voiceOverAlertElement = context.querySelector(`.${voiceOverAlertClass}`);
     this.groupAdjective = this.voiceOverAlertElement.getAttribute(groupAttrAdjective);
-    this.checkboxAdjective = this.voiceOverAlertElement.getAttribute(checkboxAttrAdjective);
-    this.deselectMessage = this.checkbox.element.getAttribute('data-deselect-message');
+    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 = input.element.type === 'checkbox' ? 'click' : 'input';
-
+      const event = ['checkbox', 'radio'].includes(input.element.type) ? 'click' : 'input';
       input.element.addEventListener(event, () => this.handleValueChange(input));
     });
   }
@@ -61,7 +61,7 @@ export default class MutuallyExclusive {
           .forEach(input => {
             input.hasValue = false;
 
-            if (input.element.type === 'checkbox') {
+            if (['checkbox', 'radio'].includes(input.element.type)) {
               input.element.checked = false;
               this.triggerEvent(input.element, 'change');
             } else {
@@ -70,11 +70,13 @@ export default class MutuallyExclusive {
             }
           });
       } else if (!input.exclusive) {
-        const input = this.allInputs.find(input => input.exclusive);
-        adjective = this.checkboxAdjective;
+        const inputs = this.allInputs.filter(input => input.exclusive);
+        adjective = this.optionAttrAdjective;
 
-        input.hasValue = false;
-        input.element.checked = false;
+        inputs.forEach(input => {
+          input.hasValue = false;
+          input.element.checked = false;
+        });
 
         this.triggerEvent(input.element, 'change');
       }
@@ -117,7 +119,7 @@ export default class MutuallyExclusive {
   }
 
   inputHasValue(input) {
-    if (input.type === 'checkbox') {
+    if (['checkbox', 'radio'].includes(input.type)) {
       return !!input.checked;
     } else {
       return !!input.value.trim().length;
@@ -142,7 +144,7 @@ export default class MutuallyExclusive {
       deselectMessageElement.innerHTML = `. ${this.deselectMessage}`;
 
       this.deselectMessageElement = deselectMessageElement;
-      this.checkbox.label.appendChild(deselectMessageElement);
+      this.exclusiveElements[0].label.appendChild(deselectMessageElement);
     } else if (this.deselectMessageElement && !groupElementSelected) {
       this.deselectMessageElement.remove();
       this.deselectMessageElement = null;
@@ -150,8 +152,15 @@ export default class MutuallyExclusive {
   }
 
   triggerEvent(input, eventType) {
-    const event = document.createEvent('HTMLEvents');
-    event.initEvent(eventType, false, true);
+    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);
   }
 }

package/components/mutually-exclusive/mutually-exclusive.multiple-options.checkboxes.spec.js

@@ -0,0 +1,213 @@
+import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
+
+const SCREEN_READER_TIMEOUT_DELAY = 300;
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS = {
+  legend: 'What type of central heating do you have?',
+  checkboxesLabel: 'Select all that apply',
+  name: 'mutually-exclusive',
+  checkboxes: [
+    {
+      id: 'gas',
+      label: {
+        text: 'Gas',
+      },
+      value: 'gas',
+    },
+    {
+      id: 'electric',
+      label: {
+        text: 'Electric',
+      },
+      value: 'electric',
+    },
+    {
+      id: 'solid-fuel',
+      label: {
+        text: 'Solid fuel',
+      },
+      value: 'solid-fuel',
+    },
+    {
+      id: 'other-fuel',
+      label: {
+        text: 'Other',
+      },
+      value: 'other',
+      other: {
+        id: 'other-fuel-textbox',
+        name: 'other-fuel-answer',
+        label: {
+          text: 'Please specify',
+        },
+      },
+    },
+  ],
+  mutuallyExclusive: {
+    or: 'or',
+    deselectMessage: 'Selecting this will uncheck all other checkboxes',
+    deselectGroupAdjective: 'deselected',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'no-central-heating',
+        label: {
+          text: 'No central heating',
+        },
+        value: 'no-central-heating',
+      },
+      {
+        id: 'dont-know',
+        label: {
+          text: 'Dont know',
+        },
+        value: 'dont-know',
+      },
+    ],
+  },
+};
+
+describe('script: mutually-exclusive', () => {
+  describe('checkboxes', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('checkboxes', EXAMPLE_MUTUALLY_EXCLUSIVE_CHECKBOXES_PARAMS));
+    });
+
+    describe('Given the user has clicked multiple non-exclusive options', () => {
+      beforeEach(async () => {
+        await page.click('#gas');
+        await page.click('#electric');
+        await page.click('#other-fuel');
+        await page.type('#other-fuel-textbox', 'Biofuel');
+      });
+
+      describe('when the user clicks a mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#dont-know');
+        });
+
+        it('then the mutually exclusive option is checked', async () => {
+          const isChecked = await page.$eval('#dont-know', node => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the checkboxes are not checked', async () => {
+          expect(await page.$eval('#gas', node => node.checked)).toBe(false);
+          expect(await page.$eval('#electric', node => node.checked)).toBe(false);
+          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel-textbox', node => node.value)).toBe('');
+        });
+
+        it('then the aria-live message should reflect the removed non exclusive options', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('Gas deselected. Electric deselected. Other deselected. Please specify deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has clicked the mutually exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#dont-know');
+      });
+
+      describe('when the user clicks the non-exclusive options', () => {
+        beforeEach(async () => {
+          await page.click('#gas');
+          await page.click('#electric');
+          await page.click('#other-fuel');
+        });
+
+        it('then the expected checkboxes are checked', async () => {
+          expect(await page.$eval('#gas', node => node.checked)).toBe(true);
+          expect(await page.$eval('#electric', node => node.checked)).toBe(true);
+          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(true);
+        });
+
+        it('then the exclusive options should not be checked', async () => {
+          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', node => node.checked)).toBe(false);
+        });
+
+        it('then the aria-live message should reflect the removed exclusive option', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('Dont know deselected.');
+        });
+
+        describe('and the user deselects an non-exclusive option', () => {
+          beforeEach(async () => {
+            await page.click('#electric');
+          });
+
+          it('the aria-live message should not be updated', async () => {
+            await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+            const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+            expect(alertText).toBe('Dont know deselected.');
+          });
+        });
+      });
+    });
+
+    describe('Given the user has not clicked the mutually exclusive option', () => {
+      describe('when the user clicks multiple non-exclusive options', () => {
+        beforeEach(async () => {
+          await page.click('#gas');
+          await page.click('#electric');
+          await page.click('#other-fuel');
+        });
+
+        it('then the expected checkboxes are checked', async () => {
+          expect(await page.$eval('#gas', node => node.checked)).toBe(true);
+          expect(await page.$eval('#electric', node => node.checked)).toBe(true);
+          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(true);
+        });
+
+        it('then the exclusive options should not be checked', async () => {
+          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', node => node.checked)).toBe(false);
+        });
+
+        it('then the aria-live message should say nothing', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+
+    describe('Given the user has not clicked any of the non-exclusive options', () => {
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#dont-know');
+        });
+
+        it('then the expected checkboxes are not checked', async () => {
+          expect(await page.$eval('#gas', node => node.checked)).toBe(false);
+          expect(await page.$eval('#electric', node => node.checked)).toBe(false);
+          expect(await page.$eval('#solid-fuel', node => node.checked)).toBe(false);
+          expect(await page.$eval('#other-fuel', node => node.checked)).toBe(false);
+        });
+
+        it('then the exclusive option should be checked', async () => {
+          expect(await page.$eval('#no-central-heating', node => node.checked)).toBe(false);
+          expect(await page.$eval('#dont-know', node => node.checked)).toBe(true);
+        });
+
+        it('then the aria-live message should say nothing', async () => {
+          await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
+
+          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          expect(alertText).toBe('');
+        });
+      });
+    });
+  });
+});