@ons/design-system 68.0.0 → 68.0.1

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

@@ -31,7 +31,35 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_PARAMS = {
     deselectExclusiveOptionAdjective: 'deselected',
     exclusiveOptions: [
       {
-        id: 'date-exclusive-exclusive-option',
+        id: 'date-exclusive-option',
+        name: 'no-paid-job',
+        value: 'no-paid-job',
+        label: {
+          text: 'I have never had a paid job',
+        },
+      },
+    ],
+  },
+};
+
+const EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_SINGLE_PARAMS = {
+  id: 'date-mutually-exclusive',
+  legendOrLabel: 'What year was your last MOT?',
+  description: 'For example, 2018',
+  year: {
+    label: {
+      text: 'Year',
+    },
+    name: 'year-exclusive',
+  },
+  mutuallyExclusive: {
+    or: 'Or',
+    deselectMessage: 'Selecting this will clear the date if one has been inputted',
+    deselectGroupAdjective: 'cleared',
+    deselectExclusiveOptionAdjective: 'deselected',
+    exclusiveOptions: [
+      {
+        id: 'date-exclusive-option',
         name: 'no-paid-job',
         value: 'no-paid-job',
         label: {
@@ -57,27 +85,27 @@ describe('script: mutually-exclusive', () => {
 
       describe('when the user clicks the mutually exclusive option', () => {
         beforeEach(async () => {
-          await page.click('#date-exclusive-exclusive-option');
+          await page.click('#date-exclusive-option');
         });
 
         it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#date-exclusive-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(true);
         });
 
         it('then the date input should be cleared', async () => {
-          const dayValue = await page.$eval('#date-mutually-exclusive-day', node => node.value);
+          const dayValue = await page.$eval('#date-mutually-exclusive-day', (node) => node.value);
           expect(dayValue).toBe('');
-          const monthValue = await page.$eval('#date-mutually-exclusive-month', node => node.value);
+          const monthValue = await page.$eval('#date-mutually-exclusive-month', (node) => node.value);
           expect(monthValue).toBe('');
-          const yearValue = await page.$eval('#date-mutually-exclusive-year', node => node.value);
+          const yearValue = await page.$eval('#date-mutually-exclusive-year', (node) => node.value);
           expect(yearValue).toBe('');
         });
 
         it('then the aria alert should tell the user that the date input has been cleared', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('Day cleared. Month cleared. Year cleared.');
         });
       });
@@ -85,7 +113,7 @@ describe('script: mutually-exclusive', () => {
 
     describe('Given the user has checked the mutually exclusive exclusive option', () => {
       beforeEach(async () => {
-        await page.click('#date-exclusive-exclusive-option');
+        await page.click('#date-exclusive-option');
       });
 
       describe('when the user populates the dateInput', () => {
@@ -95,15 +123,15 @@ describe('script: mutually-exclusive', () => {
           await page.type('#date-mutually-exclusive-year', '2018');
         });
 
-        it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#date-exclusive-exclusive-option', node => node.checked);
+        it('then the mutually exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#date-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);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('I have never had a paid job deselected.');
         });
       });
@@ -120,20 +148,106 @@ describe('script: mutually-exclusive', () => {
         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);
+          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('#date-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('');
+        });
+      });
+    });
+  });
+  describe('date-year', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('date-input', EXAMPLE_MUTUALLY_EXCLUSIVE_DATE_SINGLE_PARAMS));
+    });
+
+    describe('Given the user populated the date input', () => {
+      beforeEach(async () => {
+        await page.type('#date-mutually-exclusive-year', '2018');
+      });
+
+      describe('when the user clicks the mutually exclusive option', () => {
+        beforeEach(async () => {
+          await page.click('#date-exclusive-option');
+        });
+
+        it('then the mutually exclusive option should be checked', async () => {
+          const isChecked = await page.$eval('#date-exclusive-option', (node) => node.checked);
+          expect(isChecked).toBe(true);
+        });
+
+        it('then the date input should be cleared', async () => {
+          const yearValue = await page.$eval('#date-mutually-exclusive-year', (node) => node.value);
+          expect(yearValue).toBe('');
+        });
+
+        it('then the aria alert should tell the user that the date 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('What year was your last MOT? cleared.');
+        });
+      });
+    });
+
+    describe('Given the user has checked the mutually exclusive exclusive option', () => {
+      beforeEach(async () => {
+        await page.click('#date-exclusive-option');
+      });
+
+      describe('when the user populates the dateInput', () => {
+        beforeEach(async () => {
+          await page.type('#date-mutually-exclusive-year', '2018');
+        });
+
+        it('then the mutually exclusive option should be unchecked', async () => {
+          const isChecked = await page.$eval('#date-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 never had a paid job deselected.');
+        });
+      });
+    });
+
+    describe('Given the user has not populated the date input or checked the exclusive option', () => {
+      describe('when the user populates the date input', () => {
+        beforeEach(async () => {
+          await page.type('#date-mutually-exclusive-year', '2018');
+        });
+
+        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('#date-exclusive-exclusive-option');
+          await page.click('#date-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);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });

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

@@ -8,7 +8,7 @@ async function mutuallyExclusiveInputs() {
   if (exclusiveWrapperElements.length) {
     const MutuallyExclusive = (await import('./mutually-exclusive')).default;
 
-    exclusiveWrapperElements.forEach(element => new MutuallyExclusive(element));
+    exclusiveWrapperElements.forEach((element) => new MutuallyExclusive(element));
   }
 }
 

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

@@ -48,6 +48,40 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
   },
 };
 
+const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_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',
+      id: 'address-duration-years-suffix',
+    },
+    attributes: {
+      min: 0,
+      max: 100,
+    },
+  },
+  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 () => {
@@ -66,21 +100,21 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#duration-exclusive-option', node => node.checked);
+          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);
+          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);
+          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);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('Years cleared. Months cleared.');
         });
       });
@@ -98,14 +132,14 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#duration-exclusive-option', node => node.checked);
+          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);
+          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.');
         });
       });
@@ -121,7 +155,94 @@ describe('script: mutually-exclusive', () => {
         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);
+          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('');
+        });
+      });
+    });
+  });
+
+  describe('duration-single', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('duration', EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_SINGLE_PARAMS));
+    });
+
+    describe('Given the user populated the duration', () => {
+      beforeEach(async () => {
+        await page.type('#address-duration-years', '2');
+      });
+
+      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('');
+        });
+
+        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('How long have you lived at this address? 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');
+        });
+
+        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');
+        });
+
+        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('');
         });
       });
@@ -134,7 +255,7 @@ describe('script: mutually-exclusive', () => {
         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);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });

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

@@ -44,19 +44,19 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#email-exclusive-option', node => node.checked);
+          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);
+          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);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('Enter an email cleared.');
         });
       });
@@ -73,14 +73,14 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#email-exclusive-option', node => node.checked);
+          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);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('I dont want to receive a confirmation email deselected.');
         });
       });
@@ -95,7 +95,7 @@ describe('script: mutually-exclusive', () => {
         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);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });
@@ -108,7 +108,7 @@ describe('script: mutually-exclusive', () => {
         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);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });

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

@@ -12,7 +12,7 @@ export default class MutuallyExclusive {
 
     const groupInputs = [...context.getElementsByClassName(exclusiveGroupItemClass)];
     this.numberOfGroupInputs = groupInputs.length;
-    this.groupInputs = groupInputs.map(element => ({
+    this.groupInputs = groupInputs.map((element) => ({
       element,
       labelText: this.getElementLabelText(element),
       hasValue: this.inputHasValue(element),
@@ -21,7 +21,7 @@ export default class MutuallyExclusive {
 
     const exclusiveElements = [...context.getElementsByClassName(optionClass)];
     this.numberOfExclusiveElements = exclusiveElements.length;
-    this.exclusiveElements = exclusiveElements.map(element => ({
+    this.exclusiveElements = exclusiveElements.map((element) => ({
       element,
       label: context.querySelector(`label[for=${element.id}]`),
       labelText: this.getElementLabelText(element),
@@ -39,14 +39,14 @@ export default class MutuallyExclusive {
   }
 
   bindEventListeners() {
-    this.allInputs.forEach(input => {
+    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);
+    const previousSelectedValues = this.allInputs.filter((input) => input.hasValue).map((input) => input.labelText);
     let adjective;
 
     input.hasValue = this.inputHasValue(input.element);
@@ -57,8 +57,8 @@ export default class MutuallyExclusive {
         adjective = this.groupAdjective;
 
         this.allInputs
-          .filter(input => !input.exclusive)
-          .forEach(input => {
+          .filter((input) => !input.exclusive)
+          .forEach((input) => {
             input.hasValue = false;
 
             if (['checkbox', 'radio'].includes(input.element.type)) {
@@ -70,10 +70,10 @@ export default class MutuallyExclusive {
             }
           });
       } else if (!input.exclusive) {
-        const inputs = this.allInputs.filter(input => input.exclusive);
+        const inputs = this.allInputs.filter((input) => input.exclusive);
         adjective = this.optionAttrAdjective;
 
-        inputs.forEach(input => {
+        inputs.forEach((input) => {
           input.hasValue = false;
           input.element.checked = false;
         });
@@ -81,8 +81,8 @@ export default class MutuallyExclusive {
         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();
 
@@ -113,7 +113,7 @@ export default class MutuallyExclusive {
       } 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();
+        labelText = [...label.childNodes].filter((node) => node.nodeType === 3 && node.textContent.trim())[0].textContent.trim();
       }
     }
 
@@ -129,7 +129,7 @@ export default class MutuallyExclusive {
   }
 
   setAriaLive(deselectedValues, adjective) {
-    const deselectionMessage = deselectedValues.map(label => `${label} ${adjective}.`).join(' ');
+    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) {
@@ -138,7 +138,7 @@ export default class MutuallyExclusive {
   }
 
   setDeselectMessage() {
-    const groupElementSelected = this.groupInputs.find(input => input.hasValue);
+    const groupElementSelected = this.groupInputs.find((input) => input.hasValue);
 
     if (!this.deselectMessageElement && groupElementSelected) {
       const deselectMessageElement = document.createElement('span');