@ons/design-system 72.10.6 → 72.10.8

package/components/input/example-input-search-with-character-check.njk

@@ -11,7 +11,6 @@
         },
         "width": "10",
         "charCheckLimit": {
-            "charcheckCountdown": true,
             "limit": 10,
             "charCountSingular": "{x} more character needed",
             "charCountPlural": "{x} more characters needed",

package/components/tabs/tabs.js

@@ -134,7 +134,7 @@ export default class Tabs {
         window.removeEventListener('hashchange', this.component.boundOnHashChange, true);
     }
 
-    // Handle haschange so that the browser can cycle through the tab history
+    // Handle hashchange so that the browser can cycle through the tab history
     onHashChange() {
         const hash = window.location.hash;
         const tabWithHash = this.getTab(hash);
@@ -259,7 +259,7 @@ export default class Tabs {
     }
 
     getPanel(tab) {
-        const panelSelector = this.getHref(tab).replace(/\./g, '\\.');
+        const panelSelector = this.getHref(tab).replace(/([ .:[\]{}()<>?+*~=|^$!\\])/g, '\\$1');
         const panel = this.component.querySelector(panelSelector);
         return panel;
     }

package/components/textarea/_macro.njk

@@ -19,14 +19,17 @@
 
         <textarea
             id="{{ params.id }}"
-            class="ons-input ons-input--textarea{{ ' ons-input--error' if params.error }}{{ ' ons-js-char-check-input' if params.charCheckLimit and params.charCheckLimit.limit }}{{ textareaExclusiveClass }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input--w-{{ params.width }}{% endif %}"
+            class="ons-input ons-input--textarea{{ ' ons-input--error' if params.error }}{{ ' ons-js-char-check-input' if (params.charCheckLimit and params.charCheckLimit.limit) or (params.wordCheckLimit and params.wordCheckLimit.limit) }}{{ textareaExclusiveClass }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input--w-{{ params.width }}{% endif %}"
             {% if params.name %}
                 name="{{ params.name }}"
             {% endif %}
             rows="{{ params.rows | default(8) }}"
             {% if params.charCheckLimit %}
-                data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}"
-                aria-describedby="{{ params.id }}-check" data-char-check-countdown=true
+                data-message-check-ref="{{ params.id }}-check" data-message-check-num="{{ params.charCheckLimit.limit }}"
+                aria-describedby="{{ params.id }}-check"
+            {% elif params.wordCheckLimit %}
+                data-message-check-ref="{{ params.id }}-check" data-message-check-num="{{ params.wordCheckLimit.limit }}"
+                aria-describedby="{{ params.id }}-check"
             {% 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 %}
         >
@@ -45,6 +48,19 @@
                 })
             %}
             {% endcall %}
+        {% elif params.wordCheckLimit and params.wordCheckLimit.limit %}
+            {%
+                call onsCharLimit({
+                    "id": params.id ~ "-check",
+                    "variant": "word",
+                    "limit": params.wordCheckLimit.limit,
+                    "wordCountSingular": params.wordCheckLimit.wordCountSingular,
+                    "wordCountPlural": params.wordCheckLimit.wordCountPlural,
+                    "wordCountOverLimitSingular": params.wordCheckLimit.wordCountOverLimitSingular,
+                    "wordCountOverLimitPlural": params.wordCheckLimit.wordCountOverLimitPlural
+                })
+            %}
+            {% endcall %}
         {% endif %}
     {% endset %}
 

package/components/textarea/_macro.spec.js

@@ -27,6 +27,17 @@ const EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT = {
     },
 };
 
+const EXAMPLE_TEXTAREA_WITH_WORD_LIMIT = {
+    ...EXAMPLE_TEXTAREA,
+    width: 30,
+    wordCheckLimit: {
+        limit: 5,
+        wordCountSingular: 'You have {x} word remaining',
+        wordCountPlural: 'You have {x} words remaining',
+        wordCountOverLimitSingular: '{x} word too many',
+        wordCountOverLimitPlural: '{x} words too many',
+    },
+};
 const EXAMPLE_TEXTAREA_WITH_ERROR = {
     ...EXAMPLE_TEXTAREA,
     error: {
@@ -212,13 +223,13 @@ describe('macro: textarea', () => {
         it('has the provided maximum length', () => {
             const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input--textarea').attr('data-char-check-num')).toBe('200');
+            expect($('.ons-input--textarea').attr('data-message-check-num')).toBe('200');
         });
 
         it('has data attribute which references the character check component', () => {
             const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input--textarea').attr('data-char-check-ref')).toBe('example-id-check');
+            expect($('.ons-input--textarea').attr('data-message-check-ref')).toBe('example-id-check');
         });
 
         it('has `aria-describedby` attribute which references the character limit component', () => {
@@ -227,7 +238,7 @@ describe('macro: textarea', () => {
             expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-check');
         });
 
-        it('renders character limit component', () => {
+        it('renders character check limit component', () => {
             const faker = templateFaker();
             const charCheckLimitSpy = faker.spy('char-check-limit');
 
@@ -244,6 +255,68 @@ describe('macro: textarea', () => {
         });
     });
 
+    describe('with word check', () => {
+        it('has the `ons-js-char-check-input` class', () => {
+            const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_WORD_LIMIT));
+
+            expect($('.ons-input--textarea').hasClass('ons-js-char-check-input')).toBe(true);
+        });
+
+        it('has the provided maximum length', () => {
+            const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_WORD_LIMIT));
+
+            expect($('.ons-input--textarea').attr('data-message-check-num')).toBe('5');
+        });
+
+        it('has data attribute which references the word check component', () => {
+            const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_WORD_LIMIT));
+
+            expect($('.ons-input--textarea').attr('data-message-check-ref')).toBe('example-id-check');
+        });
+
+        it('has `aria-describedby` attribute which references the word limit component', () => {
+            const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_WORD_LIMIT));
+
+            expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-check');
+        });
+
+        it('renders char check limit component which counts words instead of characters', () => {
+            const faker = templateFaker();
+            const charCheckLimitSpy = faker.spy('char-check-limit');
+
+            faker.renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_WORD_LIMIT);
+
+            expect(charCheckLimitSpy.occurrences).toContainEqual({
+                id: 'example-id-check',
+                limit: 5,
+                variant: 'word',
+                wordCountSingular: 'You have {x} word remaining',
+                wordCountPlural: 'You have {x} words remaining',
+                wordCountOverLimitSingular: '{x} word too many',
+                wordCountOverLimitPlural: '{x} words too many',
+            });
+        });
+    });
+
+    describe('with character check and word check', () => {
+        it('only renders char check limit component which counts characters', () => {
+            const faker = templateFaker();
+            const charCheckLimitSpy = faker.spy('char-check-limit');
+
+            faker.renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_WORD_LIMIT);
+
+            expect(charCheckLimitSpy.occurrences).toContainEqual({
+                id: 'example-id-check',
+                limit: 5,
+                variant: 'word',
+                wordCountSingular: 'You have {x} word remaining',
+                wordCountPlural: 'You have {x} words remaining',
+                wordCountOverLimitSingular: '{x} word too many',
+                wordCountOverLimitPlural: '{x} words too many',
+            });
+        });
+    });
+
     describe('with error', () => {
         it('has the `error` modifier class', () => {
             const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_ERROR));

package/components/textarea/example-textarea-with-word-limit.njk

@@ -0,0 +1,20 @@
+{% from "components/textarea/_macro.njk" import onsTextarea %}
+
+{{
+    onsTextarea({
+        "id": "textarea-word-limit",
+        "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"
+        },
+        "wordCheckLimit": {
+            "limit": 150,
+            "wordCountSingular": "You have {x} word remaining",
+            "wordCountPlural": "You have {x} words remaining",
+            "wordCountOverLimitSingular": "You are {x} word over the limit",
+            "wordCountOverLimitPlural": "You are {x} words over the limit"
+        }
+    })
+}}