@ons/design-system 70.0.6 → 70.0.8

package/components/char-check-limit/character-check.js

@@ -5,75 +5,75 @@ const attrCharCheckCountdown = 'data-char-check-countdown';
 const attrCharCheckVal = 'data-char-check-num';
 
 export default class CharCheck {
-  constructor(context) {
-    this.context = context;
-    this.input = this.context.querySelector('input');
-    this.button = this.context.parentNode.querySelector('button');
-    this.checkElement = document.getElementById(this.input.getAttribute(attrCharCheckRef));
-    this.checkVal = this.input.getAttribute(attrCharCheckVal);
-    this.countdown = this.input.getAttribute(attrCharCheckCountdown) || false;
-    this.singularMessage = this.checkElement.getAttribute('data-charcount-singular') || null;
-    this.pluralMessage = this.checkElement.getAttribute('data-charcount-plural') || null;
-    this.charLimitSingularMessage = this.checkElement.getAttribute('data-charcount-limit-singular') || null;
-    this.charLimitPluralMessage = this.checkElement.getAttribute('data-charcount-limit-plural') || null;
+    constructor(context) {
+        this.context = context;
+        this.input = this.context.querySelector('input');
+        this.button = this.context.parentNode.querySelector('button');
+        this.checkElement = document.getElementById(this.input.getAttribute(attrCharCheckRef));
+        this.checkVal = this.input.getAttribute(attrCharCheckVal);
+        this.countdown = this.input.getAttribute(attrCharCheckCountdown) || false;
+        this.singularMessage = this.checkElement.getAttribute('data-charcount-singular') || null;
+        this.pluralMessage = this.checkElement.getAttribute('data-charcount-plural') || null;
+        this.charLimitSingularMessage = this.checkElement.getAttribute('data-charcount-limit-singular') || null;
+        this.charLimitPluralMessage = this.checkElement.getAttribute('data-charcount-limit-plural') || null;
 
-    this.updateCheckReadout(this.input);
+        this.updateCheckReadout(this.input);
 
-    if (this.button) {
-      this.setButtonState(this.checkVal);
+        if (this.button) {
+            this.setButtonState(this.checkVal);
+        }
+        this.input.addEventListener('input', this.updateCheckReadout.bind(this));
     }
-    this.input.addEventListener('input', this.updateCheckReadout.bind(this));
-  }
 
-  updateCheckReadout(event, firstRun) {
-    const value = this.input.value;
-    const remaining = this.checkVal - value.length;
-    // Prevent aria live announcement when component initialises
-    if (!firstRun && event.inputType) {
-      this.checkElement.setAttribute('aria-live', 'polite');
-    } else {
-      this.checkElement.removeAttribute('aria-live');
+    updateCheckReadout(event, firstRun) {
+        const value = this.input.value;
+        const remaining = this.checkVal - value.length;
+        // Prevent aria live announcement when component initialises
+        if (!firstRun && event.inputType) {
+            this.checkElement.setAttribute('aria-live', 'polite');
+        } else {
+            this.checkElement.removeAttribute('aria-live');
+        }
+
+        this.checkRemaining(remaining);
+        this.setCheckClass(remaining, this.input, inputClassLimitReached);
+        this.setCheckClass(remaining, this.checkElement, remainingClassLimitReached);
     }
 
-    this.checkRemaining(remaining);
-    this.setCheckClass(remaining, this.input, inputClassLimitReached);
-    this.setCheckClass(remaining, this.checkElement, remainingClassLimitReached);
-  }
+    checkRemaining(remaining) {
+        let message;
+        if (this.countdown && remaining === 1) {
+            message = this.singularMessage;
+        } else if (remaining === -1) {
+            message = this.charLimitSingularMessage;
+        } else if (remaining < -1) {
+            message = this.charLimitPluralMessage;
+        } else {
+            message = this.pluralMessage;
+        }
 
-  checkRemaining(remaining) {
-    let message;
-    if (this.countdown && remaining === 1) {
-      message = this.singularMessage;
-    } else if (remaining === -1) {
-      message = this.charLimitSingularMessage;
-    } else if (remaining < -1) {
-      message = this.charLimitPluralMessage;
-    } else {
-      message = this.pluralMessage;
-    }
+        this.checkElement.innerText = message.replace('{x}', Math.abs(remaining));
 
-    this.checkElement.innerText = message.replace('{x}', Math.abs(remaining));
+        if (this.button) {
+            this.setButtonState(remaining);
+        }
 
-    if (this.button) {
-      this.setButtonState(remaining);
+        this.setShowMessage(remaining);
     }
 
-    this.setShowMessage(remaining);
-  }
-
-  setButtonState(remaining) {
-    this.button.classList[remaining === 0 ? 'remove' : 'add']('ons-btn--disabled');
-    this.button.disabled = remaining === 0 ? null : 'true';
-  }
+    setButtonState(remaining) {
+        this.button.classList[remaining === 0 ? 'remove' : 'add']('ons-btn--disabled');
+        this.button.disabled = remaining === 0 ? null : 'true';
+    }
 
-  setShowMessage(remaining) {
-    this.checkElement.classList[(remaining < this.checkVal && remaining > 0 && this.countdown) || remaining < 0 ? 'remove' : 'add'](
-      'ons-u-d-no',
-    );
-  }
+    setShowMessage(remaining) {
+        this.checkElement.classList[(remaining < this.checkVal && remaining > 0 && this.countdown) || remaining < 0 ? 'remove' : 'add'](
+            'ons-u-d-no',
+        );
+    }
 
-  setCheckClass(remaining, element, setClass) {
-    element.classList[remaining < 0 ? 'add' : 'remove'](setClass);
-    this.checkElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
-  }
+    setCheckClass(remaining, element, setClass) {
+        element.classList[remaining < 0 ? 'add' : 'remove'](setClass);
+        this.checkElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
+    }
 }

package/components/char-check-limit/character-check.spec.js

@@ -1,200 +1,200 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_INPUT_WITH_CHARACTER_CHECK = {
-  id: 'search-field',
-  variant: 'number',
-  width: '6',
-  label: {
-    text: 'Filter results',
-  },
-  searchButton: {
-    text: 'Filter',
-  },
-  charCheckLimit: {
-    charcheckCountdown: true,
-    limit: 11,
-    charCountOverLimitSingular: '{x} number too many',
-    charCountOverLimitPlural: '{x} numbers too many',
-    charCountSingular: 'You have {x} character remaining',
-    charCountPlural: 'You have {x} characters remaining',
-  },
+    id: 'search-field',
+    variant: 'number',
+    width: '6',
+    label: {
+        text: 'Filter results',
+    },
+    searchButton: {
+        text: 'Filter',
+    },
+    charCheckLimit: {
+        charcheckCountdown: true,
+        limit: 11,
+        charCountOverLimitSingular: '{x} number too many',
+        charCountOverLimitPlural: '{x} numbers too many',
+        charCountSingular: 'You have {x} character remaining',
+        charCountPlural: 'You have {x} characters remaining',
+    },
 };
 
 const EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE = {
-  id: 'feedback',
-  name: 'feedback',
-  width: '30',
-  legend: 'Feedback legend',
-  label: {
-    text: 'Enter your feedback',
-  },
-  charCheckLimit: {
-    limit: 200,
-    charCountSingular: 'You have {x} character remaining',
-    charCountPlural: 'You have {x} characters remaining',
-  },
-  mutuallyExclusive: {
-    or: 'Or',
-    deselectMessage: 'Selecting this will clear your feedback',
-    deselectGroupAdjective: 'cleared',
-    deselectExclusiveOptionAdjective: 'deselected',
-    exclusiveOptions: [
-      {
-        id: 'feedback-checkbox',
-        name: 'no-feedback',
-        value: 'no-feedback',
-        label: {
-          text: 'I dont want to provide feedback',
-        },
-      },
-    ],
-  },
+    id: 'feedback',
+    name: 'feedback',
+    width: '30',
+    legend: 'Feedback legend',
+    label: {
+        text: 'Enter your feedback',
+    },
+    charCheckLimit: {
+        limit: 200,
+        charCountSingular: 'You have {x} character remaining',
+        charCountPlural: 'You have {x} characters remaining',
+    },
+    mutuallyExclusive: {
+        or: 'Or',
+        deselectMessage: 'Selecting this will clear your feedback',
+        deselectGroupAdjective: 'cleared',
+        deselectExclusiveOptionAdjective: 'deselected',
+        exclusiveOptions: [
+            {
+                id: 'feedback-checkbox',
+                name: 'no-feedback',
+                value: 'no-feedback',
+                label: {
+                    text: 'I dont want to provide feedback',
+                },
+            },
+        ],
+    },
 };
 
 describe('script: character-check', () => {
-  describe('mode: basic', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_CHECK));
-    });
-
-    describe('Given that the char check helper has initialised correctly', () => {
-      it('the char check readout should be invisible', async () => {
-        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
-        expect(hasClass).toBe(true);
-      });
-
-      it('then the character limit readout should reflect the number of characters remaining', async () => {
-        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
-        expect(innerHtml.trim()).toBe('You have 11 characters remaining');
-      });
-    });
-
-    describe('Given that the user has not typed into the search input', () => {
-      describe('when the user types into the search input', () => {
+    describe('mode: basic', () => {
         beforeEach(async () => {
-          await page.type('#search-field', '1', { delay: 20 });
+            await setTestPage('/test', renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_CHECK));
         });
 
-        it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
-          expect(innerHtml.trim()).toBe('You have 10 characters remaining');
-        });
+        describe('Given that the char check helper has initialised correctly', () => {
+            it('the char check readout should be invisible', async () => {
+                const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
+                expect(hasClass).toBe(true);
+            });
 
-        it('the char check readout should be visible', async () => {
-          const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
-          expect(hasClass).toBe(false);
+            it('then the character limit readout should reflect the number of characters remaining', async () => {
+                const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
+                expect(innerHtml.trim()).toBe('You have 11 characters remaining');
+            });
         });
 
-        it('then aria-live should be set to polite', async () => {
-          const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
-          expect(ariaLiveAttribute).toBe('polite');
+        describe('Given that the user has not typed into the search input', () => {
+            describe('when the user types into the search input', () => {
+                beforeEach(async () => {
+                    await page.type('#search-field', '1', { delay: 20 });
+                });
+
+                it('then the characters remaining readout reflect the number of characters remaining', async () => {
+                    const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
+                    expect(innerHtml.trim()).toBe('You have 10 characters remaining');
+                });
+
+                it('the char check readout should be visible', async () => {
+                    const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
+                    expect(hasClass).toBe(false);
+                });
+
+                it('then aria-live should be set to polite', async () => {
+                    const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
+                    expect(ariaLiveAttribute).toBe('polite');
+                });
+            });
+
+            describe('when the user reaches the charcheck limit of the input', () => {
+                beforeEach(async () => {
+                    await page.type('#search-field', '11111111111', { delay: 20 });
+                });
+
+                it('the char check readout should be invisible', async () => {
+                    const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
+                    expect(hasClass).toBe(true);
+                });
+            });
+
+            describe('when the user has 1 character remaining before the limit is reached', () => {
+                beforeEach(async () => {
+                    await page.type('#search-field', '1111111111', { delay: 20 });
+                });
+
+                it('then the characters remaining readout reflect the number of characters remaining', async () => {
+                    const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
+                    expect(innerHtml.trim()).toBe('You have 1 character remaining');
+                });
+            });
         });
-      });
 
-      describe('when the user reaches the charcheck limit of the input', () => {
-        beforeEach(async () => {
-          await page.type('#search-field', '11111111111', { delay: 20 });
+        describe('Given that the user has exceeded the charcheck limit of the input by 1', () => {
+            beforeEach(async () => {
+                await page.type('#search-field', '111111111111', { delay: 20 });
+            });
+
+            it('the char check readout should be visible', async () => {
+                const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
+                expect(hasClass).toBe(false);
+            });
+
+            it('then the characters remaining readout reflect the number of characters exceeded', async () => {
+                const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
+                expect(innerHtml.trim()).toBe('1 number too many');
+            });
+
+            it('then aria-live should be set to assertive', async () => {
+                const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
+                expect(ariaLiveAttribute).toBe('assertive');
+            });
+
+            it('then the input and readout should be given limit reached classes', async () => {
+                const hasClassOnSearchInput = await page.$eval('#search-field', (element) =>
+                    element.classList.contains('ons-input--limit-reached'),
+                );
+                expect(hasClassOnSearchInput).toBe(true);
+                const hasClassOnLimitReadout = await page.$eval('#search-field-check', (element) =>
+                    element.classList.contains('ons-input__limit--reached'),
+                );
+                expect(hasClassOnLimitReadout).toBe(true);
+            });
         });
 
-        it('the char check readout should be invisible', async () => {
-          const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
-          expect(hasClass).toBe(true);
+        describe('Given that the user has exceeded the charcheck limit of the input by more than 1', () => {
+            beforeEach(async () => {
+                await page.type('#search-field', '1111111111111', { delay: 20 });
+            });
+
+            it('the char check readout should be visible', async () => {
+                const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
+                expect(hasClass).toBe(false);
+            });
+
+            it('then the characters remaining readout reflect the number of characters exceeded', async () => {
+                const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
+                expect(innerHtml.trim()).toBe('2 numbers too many');
+            });
+
+            it('then aria-live should be set to assertive', async () => {
+                const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
+                expect(ariaLiveAttribute).toBe('assertive');
+            });
+
+            it('then the input and readout should be given limit reached classes', async () => {
+                const hasClassOnSearchInput = await page.$eval('#search-field', (element) =>
+                    element.classList.contains('ons-input--limit-reached'),
+                );
+                expect(hasClassOnSearchInput).toBe(true);
+                const hasClassOnLimitReadout = await page.$eval('#search-field-check', (element) =>
+                    element.classList.contains('ons-input__limit--reached'),
+                );
+                expect(hasClassOnLimitReadout).toBe(true);
+            });
         });
-      });
+    });
 
-      describe('when the user has 1 character remaining before the limit is reached', () => {
+    describe('mode: mutually exclusive', () => {
         beforeEach(async () => {
-          await page.type('#search-field', '1111111111', { delay: 20 });
+            await setTestPage('/test', renderComponent('textarea', EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE));
         });
 
-        it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
-          expect(innerHtml.trim()).toBe('You have 1 character remaining');
+        describe('Given that the input value is cleared programatically via mutually exclusive option', () => {
+            beforeEach(async () => {
+                await page.type('#feedback', '1', { delay: 20 });
+                await page.focus('#feedback-checkbox');
+                await page.keyboard.press('Space');
+            });
+
+            it('then aria-live attribute should removed', async () => {
+                const hasAriaLiveAttribute = await page.$eval('#feedback-lim', (element) => element.hasAttribute('aria-live'));
+                expect(hasAriaLiveAttribute).toBe(false);
+            });
         });
-      });
-    });
-
-    describe('Given that the user has exceeded the charcheck limit of the input by 1', () => {
-      beforeEach(async () => {
-        await page.type('#search-field', '111111111111', { delay: 20 });
-      });
-
-      it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
-        expect(hasClass).toBe(false);
-      });
-
-      it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
-        expect(innerHtml.trim()).toBe('1 number too many');
-      });
-
-      it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
-        expect(ariaLiveAttribute).toBe('assertive');
-      });
-
-      it('then the input and readout should be given limit reached classes', async () => {
-        const hasClassOnSearchInput = await page.$eval('#search-field', (element) =>
-          element.classList.contains('ons-input--limit-reached'),
-        );
-        expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check', (element) =>
-          element.classList.contains('ons-input__limit--reached'),
-        );
-        expect(hasClassOnLimitReadout).toBe(true);
-      });
-    });
-
-    describe('Given that the user has exceeded the charcheck limit of the input by more than 1', () => {
-      beforeEach(async () => {
-        await page.type('#search-field', '1111111111111', { delay: 20 });
-      });
-
-      it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check', (element) => element.classList.contains('ons-u-d-no'));
-        expect(hasClass).toBe(false);
-      });
-
-      it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check', (element) => element.innerHTML);
-        expect(innerHtml.trim()).toBe('2 numbers too many');
-      });
-
-      it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check', (element) => element.getAttribute('aria-live'));
-        expect(ariaLiveAttribute).toBe('assertive');
-      });
-
-      it('then the input and readout should be given limit reached classes', async () => {
-        const hasClassOnSearchInput = await page.$eval('#search-field', (element) =>
-          element.classList.contains('ons-input--limit-reached'),
-        );
-        expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check', (element) =>
-          element.classList.contains('ons-input__limit--reached'),
-        );
-        expect(hasClassOnLimitReadout).toBe(true);
-      });
-    });
-  });
-
-  describe('mode: mutually exclusive', () => {
-    beforeEach(async () => {
-      await setTestPage('/test', renderComponent('textarea', EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE));
-    });
-
-    describe('Given that the input value is cleared programatically via mutually exclusive option', () => {
-      beforeEach(async () => {
-        await page.type('#feedback', '1', { delay: 20 });
-        await page.focus('#feedback-checkbox');
-        await page.keyboard.press('Space');
-      });
-
-      it('then aria-live attribute should removed', async () => {
-        const hasAriaLiveAttribute = await page.$eval('#feedback-lim', (element) => element.hasAttribute('aria-live'));
-        expect(hasAriaLiveAttribute).toBe(false);
-      });
     });
-  });
 });

package/components/char-check-limit/character-limit.js

@@ -5,51 +5,51 @@ const remainingClassLimitReached = 'ons-input__limit--reached';
 const attrCharLimitRef = 'data-char-limit-ref';
 
 export default class CharLimit {
-  constructor(input) {
-    this.input = input;
-    this.maxLength = input.maxLength;
-    this.limitElement = document.getElementById(input.getAttribute(attrCharLimitRef));
-    this.singularMessage = this.limitElement.getAttribute('data-charcount-singular');
-    this.pluralMessage = this.limitElement.getAttribute('data-charcount-plural');
-
-    this.updateLimitReadout(null, true);
-    this.limitElement.classList.remove('ons-u-d-no');
-
-    input.addEventListener('input', this.updateLimitReadout.bind(this));
-  }
-
-  updateLimitReadout(event, firstRun) {
-    const value = this.input.value;
-    const remaining = this.maxLength - value.length;
-    const message = remaining === 1 ? this.singularMessage : this.pluralMessage;
-    // Prevent aria live announcement when component initialises
-    if (!firstRun && event.inputType) {
-      this.limitElement.setAttribute('aria-live', 'polite');
-      this.limitElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
-    } else {
-      this.limitElement.removeAttribute('aria-live');
+    constructor(input) {
+        this.input = input;
+        this.maxLength = input.maxLength;
+        this.limitElement = document.getElementById(input.getAttribute(attrCharLimitRef));
+        this.singularMessage = this.limitElement.getAttribute('data-charcount-singular');
+        this.pluralMessage = this.limitElement.getAttribute('data-charcount-plural');
+
+        this.updateLimitReadout(null, true);
+        this.limitElement.classList.remove('ons-u-d-no');
+
+        input.addEventListener('input', this.updateLimitReadout.bind(this));
     }
 
-    this.limitElement.innerText = message.replace('{x}', remaining);
+    updateLimitReadout(event, firstRun) {
+        const value = this.input.value;
+        const remaining = this.maxLength - value.length;
+        const message = remaining === 1 ? this.singularMessage : this.pluralMessage;
+        // Prevent aria live announcement when component initialises
+        if (!firstRun && event.inputType) {
+            this.limitElement.setAttribute('aria-live', 'polite');
+            this.limitElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
+        } else {
+            this.limitElement.removeAttribute('aria-live');
+        }
 
-    this.setLimitClass(remaining, this.input, inputClassLimitReached);
-    this.setLimitClass(remaining, this.limitElement, remainingClassLimitReached);
+        this.limitElement.innerText = message.replace('{x}', remaining);
 
-    this.track(remaining);
-  }
+        this.setLimitClass(remaining, this.input, inputClassLimitReached);
+        this.setLimitClass(remaining, this.limitElement, remainingClassLimitReached);
 
-  setLimitClass(remaining, element, limitClass) {
-    element.classList[remaining > 0 ? 'remove' : 'add'](limitClass);
-  }
+        this.track(remaining);
+    }
+
+    setLimitClass(remaining, element, limitClass) {
+        element.classList[remaining > 0 ? 'remove' : 'add'](limitClass);
+    }
 
-  track(remaining) {
-    if (remaining < 1) {
-      trackEvent({
-        event_type: 'event',
-        event_category: 'Error',
-        event_action: 'Textarea limit reached',
-        event_label: `Limit of ${this.maxLength} reached/exceeded`,
-      });
+    track(remaining) {
+        if (remaining < 1) {
+            trackEvent({
+                event_type: 'event',
+                event_category: 'Error',
+                event_action: 'Textarea limit reached',
+                event_label: `Limit of ${this.maxLength} reached/exceeded`,
+            });
+        }
     }
-  }
 }