@ons/design-system 70.0.7 → 70.0.9

package/components/card/example-card-set-with-lists.njk

@@ -1,68 +1,70 @@
 {% from "components/card/_macro.njk" import onsCard %}
 <div class="ons-container">
-    
-    <div class="ons-grid ons-grid--column@xxs@s">
-       
+    <div class="ons-grid">
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-list-1',
-                "textId": 'text1',
-                "title": 'About the census',
-                "url": '#0',
-                "text": 'The census is a survey that gives us information about all the households in England and Wales.',
-                "itemsList": [
-                    {
-                        "url": '#0',
-                        "text": 'List item 1 about the census'
-                    },
-                    {
-                        "url": '#0',
-                        "text": 'List item 2 about the census'
-                    }
-                ]
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-list-1',
+                    "textId": 'text1',
+                    "title": 'About the census',
+                    "url": '#0',
+                    "text": 'The census is a survey that gives us information about all the households in England and Wales.',
+                    "itemsList": [
+                        {
+                            "url": '#0',
+                            "text": 'List item 1 about the census'
+                        },
+                        {
+                            "url": '#0',
+                            "text": 'List item 2 about the census'
+                        }
+                    ]
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-list-2',
-                "textId": 'text2',
-                "title": 'Working on the census',
-                "url": '#0',
-                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
-                "itemsList": [
-                    {
-                        "url": '#0',
-                        "text": 'List item 1 about working on the census'
-                    },
-                    {
-                        "url": '#0',
-                        "text": 'List item 2 about working on the census'
-                    }
-                ]
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-list-2',
+                    "textId": 'text2',
+                    "title": 'Working on the census',
+                    "url": '#0',
+                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
+                    "itemsList": [
+                        {
+                            "url": '#0',
+                            "text": 'List item 1 about working on the census'
+                        },
+                        {
+                            "url": '#0',
+                            "text": 'List item 2 about working on the census'
+                        }
+                    ]
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-list-3',
-                "textId": 'text3',
-                "title": 'Your data and security',
-                "url": '#0',
-                "text": 'How we keep your data safe and what happens to your personal information.',
-                "itemsList": [
-                    {
-                        "url": '#0',
-                        "text": 'List item 1 about your data and security'
-                    },
-                    {
-                        "url": '#0',
-                        "text": 'List item 2 about your data and security'
-                    }
-                ]
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-list-3',
+                    "textId": 'text3',
+                    "title": 'Your data and security',
+                    "url": '#0',
+                    "text": 'How we keep your data safe and what happens to your personal information.',
+                    "itemsList": [
+                        {
+                            "url": '#0',
+                            "text": 'List item 1 about your data and security'
+                        },
+                        {
+                            "url": '#0',
+                            "text": 'List item 2 about your data and security'
+                        }
+                    ]
+                })
+            }}
         </div>
-
     </div>
-    
 </div>

package/components/card/example-card-set.njk

@@ -1,38 +1,40 @@
 {% from "components/card/_macro.njk" import onsCard %}
 <div class="ons-container">
-    
-    <div class="ons-grid ons-grid--column@xxs@s">
-       
+    <div class="ons-grid">
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-set-1',
-                "textId": 'text1',
-                "title": 'About the census',
-                "url": '#0',
-                "text": 'The census is a survey that gives us information about all the households in England and Wales.'
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-set-1',
+                    "textId": 'text1',
+                    "title": 'About the census',
+                    "url": '#0',
+                    "text": 'The census is a survey that gives us information about all the households in England and Wales.'
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-set-2',
-                "textId": 'text2',
-                "title": 'Working on the census',
-                "url": '#0',
-                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-set-2',
+                    "textId": 'text2',
+                    "title": 'Working on the census',
+                    "url": '#0',
+                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-set-3',
-                "textId": 'text3',
-                "title": 'Your data and security',
-                "url": '#0',
-                "text": 'How we keep your data safe and what happens to your personal information.'
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-set-3',
+                    "textId": 'text3',
+                    "title": 'Your data and security',
+                    "url": '#0',
+                    "text": 'How we keep your data safe and what happens to your personal information.'
+                })
+            }}
         </div>
-
     </div>
-    
 </div>

package/components/card/example-card.njk

@@ -1,9 +1,11 @@
 {% from "components/card/_macro.njk" import onsCard %}
 
-{{ onsCard({
-    "id": 'card-example',
-    "textId": 'text',
-    "title": 'Your data and security',
-    "url": '#0',
-    "text": 'How we keep your data safe and what happens to your personal information.'
-}) }}
+{{
+    onsCard({
+        "id": 'card-example',
+        "textId": 'text',
+        "title": 'Your data and security',
+        "url": '#0',
+        "text": 'How we keep your data safe and what happens to your personal information.'
+    })
+}}

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

@@ -1,9 +1,7 @@
 {% macro onsCharLimit(params) %}
     {% if params.variant == "check" %}
         {% set content = caller() %}
-        <span class="ons-js-char-check-input">
-            {{ content | safe }}
-        </span>
+        <span class="ons-js-char-check-input">{{ content | safe }}</span>
     {% endif %}
     <span
         id="{{ params.id }}"

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

@@ -6,64 +6,64 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 const EXAMPLE_CHAR_CHECK_LIMIT = {
-  id: 'example-char-check-limit',
-  charCountSingular: 'You have {x} character remaining',
-  charCountPlural: 'You have {x} characters remaining',
-  charCountOverLimitSingular: '{x} character too many',
-  charCountOverLimitPlural: '{x} characters too many',
+    id: 'example-char-check-limit',
+    charCountSingular: 'You have {x} character remaining',
+    charCountPlural: 'You have {x} characters remaining',
+    charCountOverLimitSingular: '{x} character too many',
+    charCountOverLimitPlural: '{x} characters too many',
 };
 
 describe('macro: char-check-limit', () => {
-  it('passes jest-axe checks without check', async () => {
-    const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+    it('passes jest-axe checks without check', async () => {
+        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('passes jest-axe checks with check', async () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'char-check-limit',
-        {
-          ...EXAMPLE_CHAR_CHECK_LIMIT,
-          variant: 'check',
-        },
-        ['<p>Test content.</p>'],
-      ),
-    );
+    it('passes jest-axe checks with check', async () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'char-check-limit',
+                {
+                    ...EXAMPLE_CHAR_CHECK_LIMIT,
+                    variant: 'check',
+                },
+                ['<p>Test content.</p>'],
+            ),
+        );
 
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
 
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
 
-    expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
-  });
+        expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
+    });
 
-  it('has the provided data attributes', () => {
-    const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
+    it('has the provided data attributes', () => {
+        const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
 
-    expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
-    expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
-    expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
-    expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
-  });
+        expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
+        expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+        expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many');
+        expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many');
+    });
 
-  it('has expected nested content', () => {
-    const $ = cheerio.load(
-      renderComponent(
-        'char-check-limit',
-        {
-          ...EXAMPLE_CHAR_CHECK_LIMIT,
-          variant: 'check',
-        },
-        ['<p>Test content.</p>'],
-      ),
-    );
+    it('has expected nested content', () => {
+        const $ = cheerio.load(
+            renderComponent(
+                'char-check-limit',
+                {
+                    ...EXAMPLE_CHAR_CHECK_LIMIT,
+                    variant: 'check',
+                },
+                ['<p>Test content.</p>'],
+            ),
+        );
 
-    expect($('.ons-js-char-check-input').html().trim()).toBe('<p>Test content.</p>');
-  });
+        expect($('.ons-js-char-check-input').html().trim()).toBe('<p>Test content.</p>');
+    });
 });

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

@@ -5,75 +5,75 @@ const attrCharCheckCountdown = 'data-char-check-countdown';
 const attrCharCheckVal = 'data-char-check-num';
 
 export default class CharCheck {
-  constructor(context) {
-    this.context = context;
-    this.input = this.context.querySelector('input');
-    this.button = this.context.parentNode.querySelector('button');
-    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;
+    constructor(context) {
+        this.context = context;
+        this.input = this.context.querySelector('input');
+        this.button = this.context.parentNode.querySelector('button');
+        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.updateCheckReadout(this.input);
+        this.updateCheckReadout(this.input);
 
-    if (this.button) {
-      this.setButtonState(this.checkVal);
+        if (this.button) {
+            this.setButtonState(this.checkVal);
+        }
+        this.input.addEventListener('input', this.updateCheckReadout.bind(this));
     }
-    this.input.addEventListener('input', this.updateCheckReadout.bind(this));
-  }
 
-  updateCheckReadout(event, firstRun) {
-    const value = this.input.value;
-    const remaining = this.checkVal - value.length;
-    // Prevent aria live announcement when component initialises
-    if (!firstRun && event.inputType) {
-      this.checkElement.setAttribute('aria-live', 'polite');
-    } else {
-      this.checkElement.removeAttribute('aria-live');
+    updateCheckReadout(event, firstRun) {
+        const value = this.input.value;
+        const remaining = this.checkVal - value.length;
+        // Prevent aria live announcement when component initialises
+        if (!firstRun && event.inputType) {
+            this.checkElement.setAttribute('aria-live', 'polite');
+        } else {
+            this.checkElement.removeAttribute('aria-live');
+        }
+
+        this.checkRemaining(remaining);
+        this.setCheckClass(remaining, this.input, inputClassLimitReached);
+        this.setCheckClass(remaining, this.checkElement, remainingClassLimitReached);
     }
 
-    this.checkRemaining(remaining);
-    this.setCheckClass(remaining, this.input, inputClassLimitReached);
-    this.setCheckClass(remaining, this.checkElement, remainingClassLimitReached);
-  }
+    checkRemaining(remaining) {
+        let message;
+        if (this.countdown && remaining === 1) {
+            message = this.singularMessage;
+        } else if (remaining === -1) {
+            message = this.charLimitSingularMessage;
+        } else if (remaining < -1) {
+            message = this.charLimitPluralMessage;
+        } else {
+            message = this.pluralMessage;
+        }
 
-  checkRemaining(remaining) {
-    let message;
-    if (this.countdown && remaining === 1) {
-      message = this.singularMessage;
-    } else if (remaining === -1) {
-      message = this.charLimitSingularMessage;
-    } else if (remaining < -1) {
-      message = this.charLimitPluralMessage;
-    } else {
-      message = this.pluralMessage;
-    }
+        this.checkElement.innerText = message.replace('{x}', Math.abs(remaining));
 
-    this.checkElement.innerText = message.replace('{x}', Math.abs(remaining));
+        if (this.button) {
+            this.setButtonState(remaining);
+        }
 
-    if (this.button) {
-      this.setButtonState(remaining);
+        this.setShowMessage(remaining);
     }
 
-    this.setShowMessage(remaining);
-  }
-
-  setButtonState(remaining) {
-    this.button.classList[remaining === 0 ? 'remove' : 'add']('ons-btn--disabled');
-    this.button.disabled = remaining === 0 ? null : 'true';
-  }
+    setButtonState(remaining) {
+        this.button.classList[remaining === 0 ? 'remove' : 'add']('ons-btn--disabled');
+        this.button.disabled = remaining === 0 ? null : 'true';
+    }
 
-  setShowMessage(remaining) {
-    this.checkElement.classList[(remaining < this.checkVal && remaining > 0 && this.countdown) || remaining < 0 ? 'remove' : 'add'](
-      'ons-u-d-no',
-    );
-  }
+    setShowMessage(remaining) {
+        this.checkElement.classList[(remaining < this.checkVal && remaining > 0 && this.countdown) || remaining < 0 ? 'remove' : 'add'](
+            'ons-u-d-no',
+        );
+    }
 
-  setCheckClass(remaining, element, setClass) {
-    element.classList[remaining < 0 ? 'add' : 'remove'](setClass);
-    this.checkElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
-  }
+    setCheckClass(remaining, element, setClass) {
+        element.classList[remaining < 0 ? 'add' : 'remove'](setClass);
+        this.checkElement.setAttribute('aria-live', [remaining > 0 ? 'polite' : 'assertive']);
+    }
 }