@ons/design-system 72.10.5 → 72.10.7

package/components/pagination/_macro.spec.js

@@ -105,7 +105,7 @@ describe('macro: pagination', () => {
             expect($('li').length).toBe(3);
             assertIsCurrentPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Current page (Page 1 of 2)', '1');
             assertIsNextPage($('.ons-pagination__item:nth-child(2)'), '/page/2', 'Go to page 2', '2');
-            assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Go to the next page (Page 2)', 'Next page');
+            assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Go to the next page (2)', 'Next page');
         });
     });
 
@@ -133,7 +133,7 @@ describe('macro: pagination', () => {
 
         it('has a 3 list items ("Previous page", "1", "2")', () => {
             expect($('li').length).toBe(3);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
             assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 2)', '2');
         });
@@ -163,11 +163,11 @@ describe('macro: pagination', () => {
 
         it('has a 5 list items ("Previous page", "1", "2", "3", "Next page")', () => {
             expect($('li').length).toBe(5);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
             assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 3)', '2');
             assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
-            assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+            assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Go to the next page (3)', 'Next page');
         });
     });
 
@@ -195,13 +195,13 @@ describe('macro: pagination', () => {
 
         it('has a 7 list items ("Previous page", "1", "2", "3", "4", "5", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
             assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 5)', '2');
             assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
             assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Go to the last page (Page 5)', '5');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Go to the last page (5)', '5');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (3)', 'Next page');
         });
     });
 
@@ -236,13 +236,13 @@ describe('macro: pagination', () => {
 
         it('has 7 list items ("Previous page", "1", "2", "3", "...", "6", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
             assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 6)', '2');
             assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
             assertIsGap($('.ons-pagination__item:nth-child(5)'));
-            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to the last page (Page 6)', '6');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to the last page (6)', '6');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (3)', 'Next page');
         });
     });
 
@@ -282,15 +282,15 @@ describe('macro: pagination', () => {
 
         it('has a 9 list items ("Previous page", "1", "...", "4", "5", "6", "...", "11", "Next page")', () => {
             expect($('li').length).toBe(9);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (Page 4)', 'Previous page');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (4)', 'Previous page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page', '1');
             assertIsGap($('.ons-pagination__item:nth-child(3)'));
             assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/4', 'Go to page 4', '4');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/5', 'Current page (Page 5 of 11)', '5');
             assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to page 6', '6');
             assertIsGap($('.ons-pagination__item:nth-child(7)'));
-            assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to the last page (Page 11)', '11');
-            assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Go to the next page (Page 6)', 'Next page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to the last page (11)', '11');
+            assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Go to the next page (6)', 'Next page');
         });
     });
 
@@ -330,13 +330,187 @@ describe('macro: pagination', () => {
 
         it('has a 7 list items ("Previous page", "1", "...", "9", "10", "11", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (Page 9)', 'Previous page');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (9)', 'Previous page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page', '1');
             assertIsGap($('.ons-pagination__item:nth-child(3)'));
             assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/9', 'Go to page 9', '9');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/10', 'Current page (Page 10 of 11)', '10');
             assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/11', 'Go to page 11', '11');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Go to the next page (Page 11)', 'Next page');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Go to the next page (11)', 'Next page');
+        });
+    });
+
+    describe('custom previousAriaLabel and nextAriaLabel', () => {
+        const customPreviousAriaLabel = 'Go back to page';
+        const customNextAriaLabel = 'Continue to page';
+        const $custom = cheerio.load(
+            renderComponent('pagination', {
+                currentPageNumber: 2,
+                pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                previous: 'Previous',
+                next: 'Next',
+                previousAriaLabel: customPreviousAriaLabel,
+                nextAriaLabel: customNextAriaLabel,
+            }),
+        );
+        const $default = cheerio.load(
+            renderComponent('pagination', {
+                currentPageNumber: 2,
+                pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                previous: 'Previous',
+                next: 'Next',
+            }),
+        );
+
+        it('renders the custom previousAriaLabel and page number on the Previous link', () => {
+            const prevItem = $custom('.ons-pagination__item--previous');
+            expect(prevItem.length).toBe(1);
+            expect(prevItem.find('a').attr('aria-label')).toBe('Go back to page (1)');
+        });
+        it('renders the default previousAriaLabel and page number on the Previous link if not provided', () => {
+            const prevItem = $default('.ons-pagination__item--previous');
+            expect(prevItem.length).toBe(1);
+            expect(prevItem.find('a').attr('aria-label')).toBe('Go to the previous page (1)');
+        });
+        it('renders the custom nextAriaLabel and page number on the Next link', () => {
+            const nextItem = $custom('.ons-pagination__item--next');
+            expect(nextItem.length).toBe(1);
+            expect(nextItem.find('a').attr('aria-label')).toBe('Continue to page (3)');
+        });
+        it('renders the default nextAriaLabel and page number on the Next link if not provided', () => {
+            const nextItem = $default('.ons-pagination__item--next');
+            expect(nextItem.length).toBe(1);
+            expect(nextItem.find('a').attr('aria-label')).toBe('Go to the next page (3)');
+        });
+    });
+
+    describe('custom ariaLabel', () => {
+        it('renders a custom aria-label on the nav element', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                    ariaLabel: 'Custom pagination navigation',
+                }),
+            );
+            expect($('.ons-pagination').attr('aria-label')).toBe('Custom pagination navigation (Page 2 of 3)');
+        });
+        it('renders the default aria-label on the nav element if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                }),
+            );
+            expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 3)');
+        });
+    });
+
+    describe('custom firstAriaLabel', () => {
+        it('renders a custom aria-label on the first page link', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 3,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }],
+                    firstAriaLabel: 'Jump to first page',
+                }),
+            );
+            const firstPageLink = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '1';
+            });
+            expect(firstPageLink.attr('aria-label')).toBe('Jump to first page');
+        });
+        it('renders the default aria-label on the first page link if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 3,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }],
+                }),
+            );
+            const firstPageLink = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '1';
+            });
+            expect(firstPageLink.attr('aria-label')).toBe('Go to the first page');
+        });
+    });
+
+    describe('custom currentAriaLabel', () => {
+        it('renders a custom aria-label on the current page link', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                    currentAriaLabel: 'You are on page',
+                }),
+            );
+            const currentPageLink = $('.ons-pagination__item--current a');
+            expect(currentPageLink.attr('aria-label')).toBe('You are on page (Page 2 of 3)');
+        });
+        it('renders the default aria-label on the current page link if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                }),
+            );
+            const currentPageLink = $('.ons-pagination__item--current a');
+            expect(currentPageLink.attr('aria-label')).toBe('Current page (Page 2 of 3)');
+        });
+    });
+
+    describe('custom lastAriaLabel', () => {
+        it('renders a custom aria-label on the last page link', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }],
+                    lastAriaLabel: 'Jump to last page',
+                }),
+            );
+            const lastPageLink = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '4';
+            });
+            expect(lastPageLink.attr('aria-label')).toBe('Jump to last page (4)');
+        });
+        it('renders the default aria-label on the last page link if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }],
+                }),
+            );
+            const lastPageLink = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '4';
+            });
+            expect(lastPageLink.attr('aria-label')).toBe('Go to the last page (4)');
+        });
+    });
+
+    describe('custom goToAriaLabel', () => {
+        it('renders a custom aria-label on non-current, non-first/last page links', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 3,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
+                    goToAriaLabel: 'Jump to page',
+                }),
+            );
+            const page2Link = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '2';
+            });
+            expect(page2Link.attr('aria-label')).toBe('Jump to page 2');
+        });
+        it('renders the default aria-label on non-current, non-first/last page links if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 3,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
+                }),
+            );
+            const page2Link = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '2';
+            });
+            expect(page2Link.attr('aria-label')).toBe('Go to page 2');
         });
     });
 });

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"
+        }
+    })
+}}