@ons/design-system 70.0.7 → 70.0.9

package/README.md

@@ -106,9 +106,9 @@ _Note_: This command is of limited use since JavaScript and SCSS files will only
 
 It is sometimes useful to adjust the following settings when writing tests or diagnosing issues:
 
-- `headless` in 'jest-puppeteer.config.js' - when set to `false` will show web browser whilst running tests. Many browser windows open since jest runs tests in parallel so it is useful to also adjust the `test` script inside 'package.json' such that it targets a specific test file. `await page.waitForTimeout(100000)` can be temporarily added to a test to allow yourself time to inspect the browser that appears.
+-   `headless` in 'jest-puppeteer.config.js' - when set to `false` will show web browser whilst running tests. Many browser windows open since jest runs tests in parallel so it is useful to also adjust the `test` script inside 'package.json' such that it targets a specific test file. `await page.waitForTimeout(100000)` can be temporarily added to a test to allow yourself time to inspect the browser that appears.
 
-- `testTimeout` in 'jest.config.js' - set to a high value such as `1000000` to prevent tests from timing out when doing the above.
+-   `testTimeout` in 'jest.config.js' - set to a high value such as `1000000` to prevent tests from timing out when doing the above.
 
 ## Testing - Visual regression tests
 
@@ -146,18 +146,12 @@ yarn build
 
 ## Recommended Visual Studio Code Extensions for this project
 
-- [axe Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)
-- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
-- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
-- [Nunjucks](https://marketplace.visualstudio.com/items?itemName=ronnidc.nunjucks)
-- [Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [remark](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-remark)
-- [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)
-- [Sass](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)
-- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
-
-## Recommended Visual Studio Code settings for this project
-
-- "render whitespace" set to "all"
-- "insert spaces when pressing tab" checked
-- "trim trailing whitespace" checked
+-   [axe Accessibility Linter](https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter)
+-   [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
+-   [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+-   [Nunjucks](https://marketplace.visualstudio.com/items?itemName=ronnidc.nunjucks)
+-   [Prettier - Code Formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+-   [remark](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-remark)
+-   [SonarLint](https://marketplace.visualstudio.com/items?itemName=SonarSource.sonarlint-vscode)
+-   [Sass](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)
+-   [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)

package/components/access-code/_macro.njk

@@ -7,29 +7,33 @@
     {% set maxlength = params.maxlength | default(16) + extraSpaces %}
 
     {% set content %}
-        {{ onsInput({
-            "id": params.id,
-            "type": params.type,
-            "name": params.name,
-            "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
-            "label": params.label,
-            "attributes": {
-                "maxlength": maxlength,
-                "data-group-size": groupSize,
-                "autocomplete": "off",
-                "autocapitalize": "characters"
-            },
-            "fieldClasses": "ons-question__answer",
-            "error": params.error,
-            "postTextboxLinkText": params.postTextboxLinkText,
-            "postTextboxLinkUrl": params.postTextboxLinkUrl
-        }) }}
+        {{
+            onsInput({
+                "id": params.id,
+                "type": params.type,
+                "name": params.name,
+                "classes": "ons-access-code__input ons-js-access-code" + (" ons-u-mb-xs" if params.postTextboxLinkText else ""),
+                "label": params.label,
+                "attributes": {
+                    "maxlength": maxlength,
+                    "data-group-size": groupSize,
+                    "autocomplete": "off",
+                    "autocapitalize": "characters"
+                },
+                "fieldClasses": "ons-question__answer",
+                "error": params.error,
+                "postTextboxLinkText": params.postTextboxLinkText,
+                "postTextboxLinkUrl": params.postTextboxLinkUrl
+            })
+        }}
     {% endset %}
 
     {% if not params.error %}
-        {% call onsPanel({
-            "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes else '')
-        }) %}
+        {%
+            call onsPanel({
+                "classes": "ons-u-mb-s" + (" " + params.classes if params.classes else "")
+            })
+        %}
             {{ content | safe }}
         {% endcall %}
     {% else %}
@@ -37,11 +41,13 @@
     {% endif %}
 
     {% if params.securityMessage %}
-        {% call onsPanel({
-            "variant": "bare",
-            "iconType": "lock",
-            "classes": "ons-u-mb-s"
-        }) %}
+        {%
+            call onsPanel({
+                "variant": "bare",
+                "iconType": "lock",
+                "classes": "ons-u-mb-s"
+            })
+        %}
             {{ params.securityMessage }}
         {% endcall %}
     {% endif %}

package/components/access-code/_macro.spec.js

@@ -6,149 +6,149 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: access-code', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        id: 'example-access-code',
-        label: {
-          text: 'Enter your 16-character access code',
-          description: 'Keep this code safe. You will need to enter it every time you access your study',
-        },
-      }),
-    );
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has the provided `id` attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        id: 'example-id',
-      }),
-    );
-
-    expect($('#example-id').length).toBe(1);
-  });
-
-  it('has the provided `name` attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        name: 'special-name',
-      }),
-    );
-
-    expect($('input').attr('name')).toBe('special-name');
-  });
-
-  it('has a default `type` of "text"', () => {
-    const $ = cheerio.load(renderComponent('access-code'));
-
-    expect($('input').attr('type')).toBe('text');
-  });
-
-  it('has the provided `type` attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        type: 'number',
-      }),
-    );
-
-    expect($('input').attr('inputmode')).toBe('numeric');
-  });
-
-  it('has additionally provided style classes', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        classes: 'extra-class another-extra-class',
-      }),
-    );
-
-    expect($('.ons-panel--info').hasClass('extra-class')).toBe(true);
-    expect($('.ons-panel--info').hasClass('another-extra-class')).toBe(true);
-  });
-
-  it('has provided label text and description', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        label: {
-          text: 'Enter your 16-character access code',
-          description: 'Keep this code safe. You will need to enter it every time you access your study',
-        },
-      }),
-    );
-
-    expect($('.ons-label--with-description').text()).toBe('Enter your 16-character access code');
-    expect($('.ons-input--with-description').text()).toBe(
-      'Keep this code safe. You will need to enter it every time you access your study',
-    );
-  });
-
-  it('has provided maximum length attribute including spaces required for groupSize', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        maxlength: 6,
-        groupSize: 3,
-      }),
-    );
-
-    expect($('input').attr('maxlength')).toBe('7');
-  });
-
-  it('has provided group size attribute', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        groupSize: 2,
-      }),
-    );
-
-    expect($('input').attr('data-group-size')).toBe('2');
-  });
-
-  it('has autocomplete disabled on its text input', () => {
-    const $ = cheerio.load(renderComponent('access-code'));
-
-    expect($('input').attr('autocomplete')).toBe('off');
-  });
-
-  it('has automatic capitalization on its text input', () => {
-    const $ = cheerio.load(renderComponent('access-code'));
-
-    expect($('input').attr('autocapitalize')).toBe('characters');
-  });
-
-  it('has provided security message text', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        securityMessage: 'Example security message.',
-      }),
-    );
-
-    expect($('.ons-panel__body').text().trim()).toBe('Example security message.');
-  });
-
-  it('has provided `postTextBoxLinkText` and `postTextBoxLinkUrl`', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        postTextboxLinkText: 'Example link text',
-        postTextboxLinkUrl: '#3',
-      }),
-    );
-
-    expect($('a[href="#3"]').text().trim()).toBe('Example link text');
-  });
-
-  it('has provided `error` output', () => {
-    const $ = cheerio.load(
-      renderComponent('access-code', {
-        error: {
-          id: 'access-code-error',
-          text: 'Enter an access code',
-        },
-      }),
-    );
-
-    expect($('#access-code-error').length).toBe(1);
-    expect($('.ons-panel__error > strong').text()).toBe('Enter an access code');
-  });
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                id: 'example-access-code',
+                label: {
+                    text: 'Enter your 16-character access code',
+                    description: 'Keep this code safe. You will need to enter it every time you access your study',
+                },
+            }),
+        );
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+    });
+
+    it('has the provided `id` attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                id: 'example-id',
+            }),
+        );
+
+        expect($('#example-id').length).toBe(1);
+    });
+
+    it('has the provided `name` attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                name: 'special-name',
+            }),
+        );
+
+        expect($('input').attr('name')).toBe('special-name');
+    });
+
+    it('has a default `type` of "text"', () => {
+        const $ = cheerio.load(renderComponent('access-code'));
+
+        expect($('input').attr('type')).toBe('text');
+    });
+
+    it('has the provided `type` attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                type: 'number',
+            }),
+        );
+
+        expect($('input').attr('inputmode')).toBe('numeric');
+    });
+
+    it('has additionally provided style classes', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                classes: 'extra-class another-extra-class',
+            }),
+        );
+
+        expect($('.ons-panel--info').hasClass('extra-class')).toBe(true);
+        expect($('.ons-panel--info').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has provided label text and description', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                label: {
+                    text: 'Enter your 16-character access code',
+                    description: 'Keep this code safe. You will need to enter it every time you access your study',
+                },
+            }),
+        );
+
+        expect($('.ons-label--with-description').text()).toBe('Enter your 16-character access code');
+        expect($('.ons-input--with-description').text()).toBe(
+            'Keep this code safe. You will need to enter it every time you access your study',
+        );
+    });
+
+    it('has provided maximum length attribute including spaces required for groupSize', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                maxlength: 6,
+                groupSize: 3,
+            }),
+        );
+
+        expect($('input').attr('maxlength')).toBe('7');
+    });
+
+    it('has provided group size attribute', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                groupSize: 2,
+            }),
+        );
+
+        expect($('input').attr('data-group-size')).toBe('2');
+    });
+
+    it('has autocomplete disabled on its text input', () => {
+        const $ = cheerio.load(renderComponent('access-code'));
+
+        expect($('input').attr('autocomplete')).toBe('off');
+    });
+
+    it('has automatic capitalization on its text input', () => {
+        const $ = cheerio.load(renderComponent('access-code'));
+
+        expect($('input').attr('autocapitalize')).toBe('characters');
+    });
+
+    it('has provided security message text', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                securityMessage: 'Example security message.',
+            }),
+        );
+
+        expect($('.ons-panel__body').text().trim()).toBe('Example security message.');
+    });
+
+    it('has provided `postTextBoxLinkText` and `postTextBoxLinkUrl`', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                postTextboxLinkText: 'Example link text',
+                postTextboxLinkUrl: '#3',
+            }),
+        );
+
+        expect($('a[href="#3"]').text().trim()).toBe('Example link text');
+    });
+
+    it('has provided `error` output', () => {
+        const $ = cheerio.load(
+            renderComponent('access-code', {
+                error: {
+                    id: 'access-code-error',
+                    text: 'Enter an access code',
+                },
+            }),
+        );
+
+        expect($('#access-code-error').length).toBe(1);
+        expect($('.ons-panel__error > strong').text()).toBe('Enter an access code');
+    });
 });

package/components/access-code/access-code.dom.js

@@ -1,11 +1,11 @@
 import domready from '../../js/domready';
 
 domready(async () => {
-  const accessCodeInputs = [...document.querySelectorAll('.ons-js-access-code')];
+    const accessCodeInputs = [...document.querySelectorAll('.ons-js-access-code')];
 
-  if (accessCodeInputs.length) {
-    const accessCode = (await import('./access-code')).default;
+    if (accessCodeInputs.length) {
+        const accessCode = (await import('./access-code')).default;
 
-    accessCodeInputs.forEach((element) => new accessCode(element));
-  }
+        accessCodeInputs.forEach((element) => new accessCode(element));
+    }
 });

package/components/access-code/access-code.js

@@ -1,24 +1,24 @@
 export default class AccessCode {
-  constructor(context) {
-    this.input = context;
-    const groupSize = parseInt(context.getAttribute('data-group-size'), 10);
-    this.groupingRegex = new RegExp(`.{1,${groupSize}}`, 'g');
+    constructor(context) {
+        this.input = context;
+        const groupSize = parseInt(context.getAttribute('data-group-size'), 10);
+        this.groupingRegex = new RegExp(`.{1,${groupSize}}`, 'g');
 
-    this.bindEventListeners();
-  }
+        this.bindEventListeners();
+    }
 
-  bindEventListeners() {
-    this.input.addEventListener('input', this.handleInput.bind(this));
-  }
+    bindEventListeners() {
+        this.input.addEventListener('input', this.handleInput.bind(this));
+    }
 
-  handleInput() {
-    const cursorPosition = this.input.selectionStart;
-    const shouldRepositionCursor = cursorPosition !== this.input.value.length;
+    handleInput() {
+        const cursorPosition = this.input.selectionStart;
+        const shouldRepositionCursor = cursorPosition !== this.input.value.length;
 
-    this.input.value = (this.input.value.replace(/\s/g, '').match(this.groupingRegex) || []).join(' ');
+        this.input.value = (this.input.value.replace(/\s/g, '').match(this.groupingRegex) || []).join(' ');
 
-    if (shouldRepositionCursor) {
-      this.input.setSelectionRange(cursorPosition, cursorPosition);
+        if (shouldRepositionCursor) {
+            this.input.setSelectionRange(cursorPosition, cursorPosition);
+        }
     }
-  }
 }

package/components/access-code/access-code.scss

@@ -1,29 +1,29 @@
 .ons-access-code {
-  &__input {
-    font-family: $font-mono !important;
-    font-weight: $font-weight-bold;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    width: 15.1em;
+    &__input {
+        font-family: $font-mono !important;
+        font-weight: $font-weight-bold;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        width: 15.1em;
 
-    @media all and (width >= 375px) {
-      font-size: 20px !important;
-      width: 15.1em !important;
-    }
+        @media all and (width >= 375px) {
+            font-size: 20px !important;
+            width: 15.1em !important;
+        }
 
-    @media all and (width <= 374px) {
-      letter-spacing: 0;
-      max-width: 12.6em !important;
-    }
+        @media all and (width <= 374px) {
+            letter-spacing: 0;
+            max-width: 12.6em !important;
+        }
 
-    @media all and (width <= 299px) {
-      max-width: 100%;
-    }
+        @media all and (width <= 299px) {
+            max-width: 100%;
+        }
 
-    @include mq('s') {
-      font-size: 24px !important;
-      max-width: 14.9em;
-      width: 14.9em !important;
+        @include mq('s') {
+            font-size: 24px !important;
+            max-width: 14.9em;
+            width: 14.9em !important;
+        }
     }
-  }
 }

package/components/access-code/access-code.spec.js

@@ -1,26 +1,26 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 describe('script: access-code', () => {
-  describe('Data grouping', () => {
-    it('correctly formats user input with spaces', async () => {
-      await setTestPage(
-        '/test',
-        renderComponent('access-code', {
-          id: 'test-access-code',
-          groupSize: 5,
-        }),
-      );
+    describe('Data grouping', () => {
+        it('correctly formats user input with spaces', async () => {
+            await setTestPage(
+                '/test',
+                renderComponent('access-code', {
+                    id: 'test-access-code',
+                    groupSize: 5,
+                }),
+            );
 
-      await page.focus('#test-access-code');
-      await page.keyboard.type('1234');
+            await page.focus('#test-access-code');
+            await page.keyboard.type('1234');
 
-      const valueSample1 = await page.$eval('#test-access-code', (element) => element.value);
-      expect(valueSample1).toBe('1234');
+            const valueSample1 = await page.$eval('#test-access-code', (element) => element.value);
+            expect(valueSample1).toBe('1234');
 
-      await page.keyboard.type('5678');
+            await page.keyboard.type('5678');
 
-      const valueSample2 = await page.$eval('#test-access-code', (element) => element.value);
-      expect(valueSample2).toBe('12345 678');
+            const valueSample2 = await page.$eval('#test-access-code', (element) => element.value);
+            expect(valueSample2).toBe('12345 678');
+        });
     });
-  });
 });