@ons/design-system 72.10.6 → 72.10.7

package/components/char-check-limit/_macro.njk

@@ -6,10 +6,11 @@
     <span
         id="{{ params.id }}"
         class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-2xs"
-        data-charcount-singular="{{ params.charCountSingular }}"
-        data-charcount-plural="{{ params.charCountPlural }}"
-        data-charcount-limit-singular="{{ params.charCountOverLimitSingular | default("You have exceeded the character limit by {x} character") }}"
-        data-charcount-limit-plural="{{ params.charCountOverLimitPlural | default("You have exceeded the character limit by {x} characters") }}"
+        data-count-type="{{ params.variant if params.variant == 'word' else 'char' }}"
+        data-message-singular="{% if params.variant == 'word' %}{{ params.wordCountSingular }}{% else %}{{ params.charCountSingular }}{% endif %}"
+        data-message-plural="{% if params.variant == 'word' %}{{ params.wordCountPlural }}{% else %}{{ params.charCountPlural }}{% endif %}"
+        data-message-over-limit-singular="{% if params.variant == 'word' %}{{ params.wordCountOverLimitSingular | default("You have exceeded the word limit by {x} word") }}{% else %}{{ params.charCountOverLimitSingular | default("You have exceeded the character limit by {x} character") }}{% endif %}"
+        data-message-over-limit-plural="{% if params.variant == 'word' %}{{ params.wordCountOverLimitPlural | default("You have exceeded the word limit by {x} words") }}{% else %}{{ params.charCountOverLimitPlural | default("You have exceeded the character limit by {x} characters") }}{% endif %}"
     >
     </span>
 {% endmacro %}

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

@@ -5,7 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-import { EXAMPLE_CHAR_CHECK_LIMIT } from './_test-examples';
+import { EXAMPLE_CHAR_CHECK_LIMIT, EXAMPLE_WORD_CHECK_LIMIT, EXAMPLE_CHAR_WORD_CHECK_LIMIT_MESSAGES } from './_test-examples';
 
 describe('FOR: Macro: CharCheckLimit', () => {
     describe('GIVEN: Params: Required', () => {
@@ -17,26 +17,34 @@ describe('FOR: Macro: CharCheckLimit', () => {
 
                 expect(results).toHaveNoViolations();
             });
+
+            test('THEN: sets char as the count type to count number of characters', () => {
+                expect($('.ons-input__limit').attr('data-count-type')).toBe('char');
+            });
+
             test('THEN: has the provided id attribute', () => {
                 expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
             });
+
             test('THEN: has the data attribute which defines charCountPlural', () => {
-                expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+                expect($('.ons-input__limit').attr('data-message-plural')).toBe('You have {x} characters remaining');
             });
+
             test('THEN: has the data attribute which defines charCountSingular', () => {
-                expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
+                expect($('.ons-input__limit').attr('data-message-singular')).toBe('You have {x} character remaining');
             });
             test('THEN: has the data attribute which defines charCountOverLimitSingular', () => {
-                expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
+                expect($('.ons-input__limit').attr('data-message-over-limit-singular')).toBe('{x} character too many');
             });
+
             test('THEN: has the data attribute which defines charCountOverLimitPlural', () => {
-                expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
+                expect($('.ons-input__limit').attr('data-message-over-limit-plural')).toBe('{x} characters too many');
             });
         });
     });
 
     describe('GIVEN: Params: variant', () => {
-        describe('WHEN: variant is provided', () => {
+        describe('WHEN: variant is set to check', () => {
             const $ = cheerio.load(
                 renderComponent(
                     'char-check-limit',
@@ -48,7 +56,7 @@ describe('FOR: Macro: CharCheckLimit', () => {
                 ),
             );
 
-            test('THEN: passes jest-axe checks with variant set to check', async () => {
+            test('THEN: passes jest-axe checks', async () => {
                 const results = await axe($.html());
                 expect(results).toHaveNoViolations();
             });
@@ -56,6 +64,158 @@ describe('FOR: Macro: CharCheckLimit', () => {
             test('THEN: renders the passed content', () => {
                 expect($('.ons-js-char-check-input').text()).toBe('Test content.');
             });
+
+            test('THEN: sets char as the count type to count number of characters', () => {
+                expect($('.ons-input__limit').attr('data-count-type')).toBe('char');
+            });
+        });
+
+        describe('WHEN: variant is set to word', () => {
+            const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_WORD_CHECK_LIMIT));
+
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: sets word as the count type to count number of words', () => {
+                expect($('.ons-input__limit').attr('data-count-type')).toBe('word');
+            });
+
+            test('THEN: has the data attribute which defines wordCountPlural', () => {
+                const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_WORD_CHECK_LIMIT));
+                expect($('.ons-input__limit').attr('data-message-plural')).toBe('You have {x} words remaining');
+            });
+
+            test('THEN: has the data attribute which defines wordCountSingular', () => {
+                const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_WORD_CHECK_LIMIT));
+                expect($('.ons-input__limit').attr('data-message-singular')).toBe('You have {x} word remaining');
+            });
+
+            test('THEN: has the data attribute which defines wordCountOverLimitPlural', () => {
+                const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_WORD_CHECK_LIMIT));
+                expect($('.ons-input__limit').attr('data-message-over-limit-plural')).toBe('You have {x} words too many');
+            });
+
+            test('THEN: has the data attribute which defines wordCountOverLimitSingular', () => {
+                const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_WORD_CHECK_LIMIT));
+                expect($('.ons-input__limit').attr('data-message-over-limit-singular')).toBe('You have {x} word too many');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: Character and Word count messages', () => {
+        describe('WHEN: character and word count messages are provided', () => {
+            const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_WORD_CHECK_LIMIT_MESSAGES));
+
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: sets char as the count type to count number of characters', () => {
+                expect($('.ons-input__limit').attr('data-count-type')).toBe('char');
+            });
+
+            test('THEN: has the provided id attribute', () => {
+                expect($('.ons-input__limit').attr('id')).toBe('example-char-word-check-limit');
+            });
+
+            test('THEN: has the data attribute which defines charCountPlural', () => {
+                expect($('.ons-input__limit').attr('data-message-plural')).toBe('You have {x} characters remaining');
+            });
+
+            test('THEN: has the data attribute which defines charCountSingular', () => {
+                expect($('.ons-input__limit').attr('data-message-singular')).toBe('You have {x} character remaining');
+            });
+            test('THEN: has the data attribute which defines charCountOverLimitSingular', () => {
+                expect($('.ons-input__limit').attr('data-message-over-limit-singular')).toBe('You have {x} character too many');
+            });
+
+            test('THEN: has the data attribute which defines charCountOverLimitPlural', () => {
+                expect($('.ons-input__limit').attr('data-message-over-limit-plural')).toBe('You have {x} characters too many');
+            });
+        });
+
+        describe('WHEN: character and word count messages are provided and variant is set to check', () => {
+            const $ = cheerio.load(
+                renderComponent(
+                    'char-check-limit',
+                    {
+                        ...EXAMPLE_CHAR_WORD_CHECK_LIMIT_MESSAGES,
+                        variant: 'check',
+                    },
+                    ['<p>Test content.</p>'],
+                ),
+            );
+
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: sets char as the count type to count number of characters', () => {
+                expect($('.ons-input__limit').attr('data-count-type')).toBe('char');
+            });
+
+            test('THEN: has the provided id attribute', () => {
+                expect($('.ons-input__limit').attr('id')).toBe('example-char-word-check-limit');
+            });
+
+            test('THEN: has the data attribute which defines charCountPlural', () => {
+                expect($('.ons-input__limit').attr('data-message-plural')).toBe('You have {x} characters remaining');
+            });
+
+            test('THEN: has the data attribute which defines charCountSingular', () => {
+                expect($('.ons-input__limit').attr('data-message-singular')).toBe('You have {x} character remaining');
+            });
+            test('THEN: has the data attribute which defines charCountOverLimitSingular', () => {
+                expect($('.ons-input__limit').attr('data-message-over-limit-singular')).toBe('You have {x} character too many');
+            });
+
+            test('THEN: has the data attribute which defines charCountOverLimitPlural', () => {
+                expect($('.ons-input__limit').attr('data-message-over-limit-plural')).toBe('You have {x} characters too many');
+            });
+        });
+
+        describe('WHEN: character and word count messages are provided and variant is set to word', () => {
+            const $ = cheerio.load(
+                renderComponent('char-check-limit', {
+                    ...EXAMPLE_CHAR_WORD_CHECK_LIMIT_MESSAGES,
+                    variant: 'word',
+                }),
+            );
+
+            test('THEN: passes jest-axe checks', async () => {
+                const results = await axe($.html());
+
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: sets char as the count type to count number of words', () => {
+                expect($('.ons-input__limit').attr('data-count-type')).toBe('word');
+            });
+
+            test('THEN: has the provided id attribute', () => {
+                expect($('.ons-input__limit').attr('id')).toBe('example-char-word-check-limit');
+            });
+
+            test('THEN: has the data attribute which defines wordCountPlural', () => {
+                expect($('.ons-input__limit').attr('data-message-plural')).toBe('You have {x} words remaining');
+            });
+
+            test('THEN: has the data attribute which defines wordCountSingular', () => {
+                expect($('.ons-input__limit').attr('data-message-singular')).toBe('You have {x} word remaining');
+            });
+            test('THEN: has the data attribute which defines wordCountOverLimitSingular', () => {
+                expect($('.ons-input__limit').attr('data-message-over-limit-singular')).toBe('You have {x} word too many');
+            });
+
+            test('THEN: has the data attribute which defines wordCountOverLimitPlural', () => {
+                expect($('.ons-input__limit').attr('data-message-over-limit-plural')).toBe('You have {x} words too many');
+            });
         });
     });
 });

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

@@ -1,8 +1,8 @@
 const inputClassLimitReached = 'ons-input--limit-reached';
 const remainingClassLimitReached = 'ons-input__limit--reached';
-const attrCharCheckRef = 'data-char-check-ref';
-const attrCharCheckCountdown = 'data-char-check-countdown';
-const attrCharCheckVal = 'data-char-check-num';
+const attrMessageCheckRef = 'data-message-check-ref';
+const attrMessageCheckVal = 'data-message-check-num';
+const countType = 'data-count-type';
 
 export default class CharCheck {
     constructor(context) {
@@ -18,13 +18,12 @@ export default class CharCheck {
         // Find the button: if input is passed directly, look at its parent
         let parent = this.input.parentNode;
         this.button = parent ? parent.querySelector('button') : null;
-        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.checkElement = document.getElementById(this.input.getAttribute(attrMessageCheckRef));
+        this.checkVal = this.input.getAttribute(attrMessageCheckVal);
+        this.singularMessage = this.checkElement.getAttribute('data-message-singular') || null;
+        this.pluralMessage = this.checkElement.getAttribute('data-message-plural') || null;
+        this.overLimitSingularMessage = this.checkElement.getAttribute('data-message-over-limit-singular') || null;
+        this.overLimitPluralMessage = this.checkElement.getAttribute('data-message-over-limit-plural') || null;
 
         this.updateCheckReadout(this.input);
 
@@ -37,7 +36,8 @@ export default class CharCheck {
 
     updateCheckReadout(event, firstRun) {
         const value = this.input.value;
-        const remaining = this.checkVal - this.getCharLength(value);
+        const currentLength = this.checkElement.getAttribute(countType) == 'char' ? this.getCharLength(value) : this.getWordLength(value);
+        const remaining = this.checkVal - currentLength;
 
         // Prevent aria live announcement when component initialises
         if (!firstRun && event.inputType) {
@@ -53,12 +53,12 @@ export default class CharCheck {
 
     checkRemaining(remaining) {
         let message;
-        if (this.countdown && remaining === 1) {
+        if (remaining === 1) {
             message = this.singularMessage;
         } else if (remaining === -1) {
-            message = this.charLimitSingularMessage;
+            message = this.overLimitSingularMessage;
         } else if (remaining < -1) {
-            message = this.charLimitPluralMessage;
+            message = this.overLimitPluralMessage;
         } else {
             message = this.pluralMessage;
         }
@@ -82,9 +82,7 @@ export default class CharCheck {
             // Always display the remaining character message for textarea
             this.checkElement.classList['remove']('ons-u-d-no');
         } else {
-            this.checkElement.classList[(remaining < this.checkVal && remaining > 0 && this.countdown) || remaining < 0 ? 'remove' : 'add'](
-                'ons-u-d-no',
-            );
+            this.checkElement.classList[(remaining < this.checkVal && remaining > 0) || remaining < 0 ? 'remove' : 'add']('ons-u-d-no');
         }
     }
 
@@ -97,4 +95,12 @@ export default class CharCheck {
         const lineBreaks = (text.match(/\n/g) || []).length;
         return text.length + lineBreaks;
     }
+
+    getWordLength(text) {
+        return text
+            .trim()
+            .split(/\s+/) // split by any whitespace
+            .map((word) => word.replace(/[.,!?;:]+$/, '')) // remove trailing punctuation
+            .filter(Boolean).length;
+    }
 }

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

@@ -11,7 +11,6 @@ const EXAMPLE_INPUT_WITH_CHARACTER_CHECK = {
         text: 'Filter',
     },
     charCheckLimit: {
-        charcheckCountdown: true,
         limit: 11,
         charCountOverLimitSingular: '{x} number too many',
         charCountOverLimitPlural: '{x} numbers too many',
@@ -51,6 +50,23 @@ const EXAMPLE_CHARACTER_CHECK_WITH_MUTUALLY_EXCLUSIVE = {
     },
 };
 
+const EXAMPLE_INPUT_WITH_WORD_CHECK = {
+    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',
+    },
+    wordCheckLimit: {
+        limit: 5,
+        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',
+    },
+};
+
 describe('script: character-check', () => {
     describe('mode: basic', () => {
         beforeEach(async () => {
@@ -197,4 +213,93 @@ describe('script: character-check', () => {
             });
         });
     });
+
+    describe('Word limit', () => {
+        beforeEach(async () => {
+            await setTestPage('/test', renderComponent('textarea', EXAMPLE_INPUT_WITH_WORD_CHECK));
+        });
+
+        describe('Given that the word limit helper has initialised correctly', () => {
+            it('the word limit readout should be visible', async () => {
+                const hasClass = await page.$eval('#example-textarea-check', (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');
+                });
+
+                it('then the word limit helper text reflects the number of words remaining', async () => {
+                    const readout = await page.$eval('#example-textarea-check', (node) => node.textContent);
+                    expect(readout).toBe('You have 2 words remaining');
+                });
+            });
+
+            describe('when the user reaches the maxlength of the textarea', () => {
+                beforeEach(async () => {
+                    await page.type('#example-textarea', 'Lorem ipsum dolor sit amet');
+                });
+
+                it('then the word limit helper text reflects the number of words remaining', async () => {
+                    const readout = await page.$eval('#example-textarea-check', (node) => node.textContent);
+                    expect(readout).toBe('You have 0 words remaining');
+                });
+            });
+        });
+        describe('when the user exceeds the maxlength of the textarea', () => {
+            beforeEach(async () => {
+                await page.type('#example-textarea', 'Lorem ipsum dolor sit amet, consectetur porttitor.');
+            });
+
+            it('then the word limit helper text reflects the number of words exceeded', async () => {
+                const readout = await page.$eval('#example-textarea-check', (node) => node.textContent);
+                expect(readout).toBe('You are 2 words over the limit');
+            });
+
+            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 word limit helper text should be given limit reached classes', async () => {
+                const hasClass = await page.$eval('#example-textarea-check', (node) =>
+                    node.classList.contains('ons-input__limit--reached'),
+                );
+                expect(hasClass).toBe(true);
+            });
+        });
+
+        describe('Given that the user has reached the maxlength of the textarea', () => {
+            beforeEach(async () => {
+                await page.type('#example-textarea', 'Lorem ipsum dolor sit a');
+            });
+
+            describe('when the user removes a character', () => {
+                beforeEach(async () => {
+                    await page.focus('#example-textarea');
+                    await page.keyboard.press('Backspace');
+                });
+
+                it('then the word limit helper text reflects the number of words remaining', async () => {
+                    const readout = await page.$eval('#example-textarea-check', (node) => node.textContent);
+                    expect(readout).toBe('You have 1 word 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-check', (node) =>
+                        node.classList.contains('ons-input__limit--reached'),
+                    );
+                    expect(hasClass).toBe(false);
+                });
+            });
+        });
+    });
 });

package/components/chart/_chart.scss

@@ -3,6 +3,10 @@
     container-type: inline-size;
     max-width: $grid-max-width;
 
+    &__chart {
+        overflow: visible !important;
+    }
+
     &__download-title {
         @extend .ons-u-pt-l;
         @extend .ons-u-fs-r--b;
@@ -12,7 +16,7 @@
         color: var(--ons-color-grey-75);
     }
 
-    &__footnote-number {
+    &__annotations-footnotes-number {
         // !important is necessary for some range annotation labels at mobile, otherwise
         // the inline-styled block display takes precedence. This inline style is only
         // applied in some cases - it seems to happen when the shaded area is narrower than the label width.
@@ -34,7 +38,7 @@
     }
 
     /* Override Highcharts styling */
-    &__footnote-number span {
+    &__annotations-footnotes-number span {
         position: static !important;
         transform-origin: 0 0 !important;
         font-size: inherit !important;
@@ -43,7 +47,7 @@
         left: 0 !important;
     }
 
-    &__footnotes {
+    &__annotations-footnotes {
         list-style: none;
         padding: 0;
         margin: 0 0 1rem;
@@ -56,12 +60,14 @@
         }
     }
 
-    &__footnote_item {
+    &__annotations-footnotes_item {
         display: flex;
-        align-items: center;
+        align-items: flex-start;
         gap: 0.5rem;
         font-size: 0.875rem; // 14px
         color: var(--ons-color-grey-100);
+        line-height: 1.2rem;
+        margin-bottom: 0.5rem;
     }
 
     &__boxplot-legend {
@@ -95,6 +101,15 @@
             font-size: inherit;
         }
     }
+
+    &__iframe {
+        width: 100%;
+
+        @media (scripting: none) {
+            // Approximately matches the aspect ratio of the fallback image inside the iframe
+            aspect-ratio: 16 / 9;
+        }
+    }
 }
 
 // This is a workaround to position the axis title to the left
@@ -148,3 +163,16 @@
     border-top: 1px solid var(--ons-color-grey-100);
     border-left: 1px solid var(--ons-color-grey-100);
 }
+
+// Allow last label to overflow
+.highcharts-container {
+    overflow: visible !important;
+}
+
+.highcharts-xaxis-labels span:last-child {
+    overflow: visible !important;
+}
+
+.bar-chart-container .highcharts-yaxis-labels span:last-child {
+    overflow: visible !important;
+}