@ons/design-system 72.9.2 → 72.10.1

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

@@ -1,55 +0,0 @@
-import { trackEvent } from '../../js/analytics';
-
-const inputClassLimitReached = 'ons-input--limit-reached';
-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');
-        }
-
-        this.limitElement.innerText = message.replace('{x}', remaining);
-
-        this.setLimitClass(remaining, this.input, inputClassLimitReached);
-        this.setLimitClass(remaining, this.limitElement, remainingClassLimitReached);
-
-        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`,
-            });
-        }
-    }
-}

package/components/textarea/textarea.dom.js

@@ -1,12 +0,0 @@
-import domready from '../../js/domready';
-
-async function initialise() {
-    const limitedInputs = [...document.querySelectorAll('.ons-js-char-limit-input')];
-    if (limitedInputs.length) {
-        const CharLimit = (await import('../char-check-limit/character-limit')).default;
-
-        limitedInputs.forEach((input) => new CharLimit(input));
-    }
-}
-
-domready(initialise);

package/components/textarea/textarea.spec.js

@@ -1,98 +0,0 @@
-import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
-
-describe('script: textarea', () => {
-    describe('character limit', () => {
-        beforeEach(async () => {
-            await setTestPage(
-                '/test',
-                renderComponent('textarea', {
-                    id: 'example-textarea',
-                    name: 'feedback-limited',
-                    width: '30',
-                    label: {
-                        text: 'Please provide some feedback',
-                        description: 'For example describe any difficulties you experienced in the use of this service',
-                    },
-                    charCheckLimit: {
-                        limit: 50,
-                        charCountSingular: 'You have {x} character remaining',
-                        charCountPlural: 'You have {x} characters remaining',
-                    },
-                }),
-            );
-        });
-
-        describe('Given that the char limit helper has initialised correctly', () => {
-            it('the char limit readout should be visible', async () => {
-                const hasClass = await page.$eval('#example-textarea-lim', (node) => node.classList.contains('ons-u-d-no'));
-                expect(hasClass).toBe(false);
-            });
-        });
-
-        describe('Given that the user has not typed into the textarea', () => {
-            describe('when the user types into the textarea', () => {
-                beforeEach(async () => {
-                    await page.type('#example-textarea', 'Lorem ipsum dolor.\nMorbi rhoncus amet.');
-                });
-
-                it('then the characters remaining readout reflect the number of characters remaining', async () => {
-                    const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
-                    expect(readout).toBe('You have 12 characters remaining');
-                });
-            });
-
-            describe('when the user reaches/exceeds the maxlength of the textarea', () => {
-                beforeEach(async () => {
-                    await page.type('#example-textarea', 'Lorem ipsum dolor sit amet, consectetur porttitor.');
-                });
-
-                it('then the characters remaining readout reflect the number of characters remaining', async () => {
-                    const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
-                    expect(readout).toBe('You have 0 characters remaining');
-                });
-
-                it('then the textarea should be given limit reached classes', async () => {
-                    const hasClass = await page.$eval('#example-textarea', (node) => node.classList.contains('ons-input--limit-reached'));
-                    expect(hasClass).toBe(true);
-                });
-
-                it('then the readout should be given limit reached classes', async () => {
-                    const hasClass = await page.$eval('#example-textarea-lim', (node) =>
-                        node.classList.contains('ons-input__limit--reached'),
-                    );
-                    expect(hasClass).toBe(true);
-                });
-            });
-        });
-
-        describe('Given that the user has reached/exceeded the maxlength of the textarea', () => {
-            beforeEach(async () => {
-                await page.type('#example-textarea', 'Lorem ipsum dolor sit amet, consectetur porttitor.');
-            });
-
-            describe('when the user removes a character', () => {
-                beforeEach(async () => {
-                    await page.focus('#example-textarea');
-                    await page.keyboard.press('Backspace');
-                });
-
-                it('then the characters remaining readout reflect the number of characters remaining', async () => {
-                    const readout = await page.$eval('#example-textarea-lim', (node) => node.textContent);
-                    expect(readout).toBe('You have 1 character remaining');
-                });
-
-                it('then the textarea should not be given limit reached classes', async () => {
-                    const hasClass = await page.$eval('#example-textarea', (node) => node.classList.contains('ons-input--limit-reached'));
-                    expect(hasClass).toBe(false);
-                });
-
-                it('then the readout should not be given limit reached classes', async () => {
-                    const hasClass = await page.$eval('#example-textarea-lim', (node) =>
-                        node.classList.contains('ons-input__limit--reached'),
-                    );
-                    expect(hasClass).toBe(false);
-                });
-            });
-        });
-    });
-});