@ons/design-system 70.0.7 → 70.0.9

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`,
+            });
+        }
     }
-  }
 }

package/components/checkboxes/_checkbox-macro.njk

@@ -1,28 +1,32 @@
 {% macro onsCheckbox(params) %}
     {% from "components/label/_macro.njk" import onsLabel %}
 
-    <span class="ons-checkbox{% if params.hideLabel == true %} ons-checkbox--no-label{% endif %}{{ ' ' + params.classes if params.classes else '' }}">
+    <span
+        class="ons-checkbox{{ ' ons-checkbox--no-label' if params.hideLabel == true }}{{ ' ' + params.classes if params.classes else '' }}"
+    >
         <input
             type="checkbox"
             id="{{ params.id }}"
             class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses else '' }}"
             value="{{ params.value }}"
             {% if params.disabled == true %}disabled aria-disabled="true"{% endif %}
-            {% if params.name %} name="{{ params.name }}"{% endif %}
-            {% if params.checked %} checked{% endif %}
-            {% if params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% endif %}
-            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
-            {% if params.deselectMessage %} data-deselect-message="{{ params.deselectMessage }}"{% endif %}
-        >
+            {% if params.name %}{{ ' ' }}name="{{ params.name }}"{% endif %}
+            {% if params.checked %}{{ ' ' }}checked{% endif %}
+            {% if params.other and not params.other.open %}{{ ' ' }}aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% endif %}
+            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+            {% if params.deselectMessage %}{{ ' ' }}data-deselect-message="{{ params.deselectMessage }}"{% endif %}
+        />
 
-        {{ onsLabel({
-            "id": params.id + "-label",
-            "for": params.id,
-            "inputType": "checkbox",
-            "text": params.label.text,
-            "classes": "ons-checkbox__label " + params.label.classes | default(''),
-            "description": params.label.description
-        }) }}
+        {{
+            onsLabel({
+                "id": params.id + "-label",
+                "for": params.id,
+                "inputType": "checkbox",
+                "text": params.label.text,
+                "classes": "ons-checkbox__label" + (' ' + params.label.classes if params.label.classes else ''),
+                "description": params.label.description
+            })
+        }}
 
         {% if params.other %}
             {% set otherType = params.other.otherType | default('input') %}