@ons/design-system 50.0.0 → 52.0.0

package/components/address-output/_macro.njk

@@ -2,22 +2,22 @@
     <div class="ons-address-output{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}">
         <p class="ons-address-output__lines">
             {% if params.unit is defined and params.unit %}
-                {{ params.unit }}<br>
+                <span class="ons-address-output__unit">{{ params.unit }}</span><br>
             {% endif %}
             {% if params.organisation is defined and params.organisation %}
-                {{ params.organisation }}<br>
+                <span class="ons-address-output__organisation">{{ params.organisation }}</span><br>
             {% endif %}
             {% if params.line1 is defined and params.line1 %}
-                {{ params.line1 }}<br>
+                <span class="ons-address-output__line1">{{ params.line1 }}</span><br>
             {% endif %}
             {% if params.line2 is defined and params.line2 %}
-                {{ params.line2 }}<br>
+                <span class="ons-address-output__line2">{{ params.line2 }}</span><br>
             {% endif %}
             {% if params.town is defined and params.town %}
-                {{ params.town }}<br>
+                <span class="ons-address-output__town">{{ params.town }}</span><br>
             {% endif %}
             {% if params.postcode is defined and params.postcode %}
-                {{ params.postcode }}
+                <span class="ons-address-output__postcode">{{ params.postcode }}</span>
             {% endif %}
         </p>
     </div>

package/components/address-output/_macro.spec.js

@@ -0,0 +1,122 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_ADDRESS_OUTPUT_FULL = {
+  unit: 'Unit 5',
+  organisation: 'Trescos',
+  line1: 'Abingdon Road',
+  line2: 'Goathill',
+  town: 'Barry',
+  postcode: 'AB12 6UH',
+};
+
+const EXAMPLE_ADDRESS_OUTPUT_NONE = {};
+
+describe('macro: address-output', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_FULL));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has additionally provided container style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('address-output', {
+        ...EXAMPLE_ADDRESS_OUTPUT_FULL,
+        classes: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-address-output').hasClass('extra-class')).toBe(true);
+    expect($('.ons-address-output').hasClass('another-extra-class')).toBe(true);
+  });
+
+  it('renders no lines when no parameters are provided', () => {
+    const $ = cheerio.load(renderComponent('address-output', EXAMPLE_ADDRESS_OUTPUT_NONE));
+
+    expect($('.ons-address-output__lines *').length).toBe(0);
+  });
+
+  it.each([
+    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+    ['single line', { unit: 'Unit 5' }],
+  ])('renders `unit` with %s', (_, params) => {
+    const $ = cheerio.load(renderComponent('address-output', params));
+
+    expect(
+      $('.ons-address-output__unit')
+        .text()
+        .trim(),
+    ).toBe('Unit 5');
+  });
+
+  it.each([
+    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+    ['single line', { organisation: 'Trescos' }],
+  ])('renders `organisation` with %s', (_, params) => {
+    const $ = cheerio.load(renderComponent('address-output', params));
+
+    expect(
+      $('.ons-address-output__organisation')
+        .text()
+        .trim(),
+    ).toBe('Trescos');
+  });
+
+  it.each([
+    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+    ['single line', { line1: 'Abingdon Road' }],
+  ])('renders `line1` with %s', (_, params) => {
+    const $ = cheerio.load(renderComponent('address-output', params));
+
+    expect(
+      $('.ons-address-output__line1')
+        .text()
+        .trim(),
+    ).toBe('Abingdon Road');
+  });
+
+  it.each([
+    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+    ['single line', { line2: 'Goathill' }],
+  ])('renders `line2` with %s', (_, params) => {
+    const $ = cheerio.load(renderComponent('address-output', params));
+
+    expect(
+      $('.ons-address-output__line2')
+        .text()
+        .trim(),
+    ).toBe('Goathill');
+  });
+
+  it.each([
+    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+    ['single line', { town: 'Barry' }],
+  ])('renders `town` with %s', (_, params) => {
+    const $ = cheerio.load(renderComponent('address-output', params));
+
+    expect(
+      $('.ons-address-output__town')
+        .text()
+        .trim(),
+    ).toBe('Barry');
+  });
+
+  it.each([
+    ['all address lines', EXAMPLE_ADDRESS_OUTPUT_FULL],
+    ['single line', { postcode: 'AB12 6UH' }],
+  ])('renders `postcode` with %s', (_, params) => {
+    const $ = cheerio.load(renderComponent('address-output', params));
+
+    expect(
+      $('.ons-address-output__postcode')
+        .text()
+        .trim(),
+    ).toBe('AB12 6UH');
+  });
+});

package/components/autosuggest/_macro.njk

@@ -38,7 +38,7 @@
         {% set autosuggestResults %}
             <div class="ons-autosuggest-input__results ons-js-autosuggest-results">
                 <header id="{{ params.resultsTitleId }}" class="ons-autosuggest-input__results-title ons-u-fs-s">{{ params.resultsTitle }}</header>
-                <ul class="ons-autosuggest-input__listbox ons-js-autosuggest-listbox" role="listbox" id="{{ params.id }}-listbox" aria-labelledby="{{ params.resultsTitleId }}" tabindex="-1"></ul>
+                <ul class="ons-autosuggest-input__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
             </div>
             <div class="ons-autosuggest-input__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
             <div class="ons-autosuggest-input__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" role="status" tabindex="-1"></div>

package/components/autosuggest/_macro.spec.js

@@ -0,0 +1,229 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_AUTOSUGGEST = {
+  id: 'country-of-birth',
+  label: {
+    text: 'Current name of country',
+    description: 'Enter your own answer or select from suggestions',
+    id: 'country-of-birth-label',
+    classes: 'extra-label-class',
+  },
+  autocomplete: 'off',
+  instructions: 'Use up and down keys to navigate.',
+  ariaYouHaveSelected: 'You have selected',
+  ariaMinChars: 'Enter 3 or more characters for suggestions.',
+  minChars: 2,
+  ariaResultsLabel: 'Country suggestions',
+  ariaOneResult: 'There is one suggestion available.',
+  ariaNResults: 'There are {n} suggestions available.',
+  ariaLimitedResults: 'Type more characters to improve your search',
+  moreResults: 'Continue entering to improve suggestions',
+  resultsTitle: 'Suggestions',
+  resultsTitleId: 'country-of-birth-suggestions',
+  autosuggestData: '/examples/data/country-of-birth.json',
+  noResults: 'No suggestions found. You can enter your own answer',
+  typeMore: 'Continue entering to get suggestions',
+};
+
+describe('macro: autosuggest', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has expected id on container element', () => {
+    const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+    expect($('.ons-autosuggest-input').attr('id')).toBe('country-of-birth-container');
+  });
+
+  it('has the provided data attributes', () => {
+    const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+    const $element = $('.ons-autosuggest-input');
+    expect($element.attr('data-allow-multiple')).toBeUndefined();
+    expect($element.attr('data-min-chars')).toBe('2');
+    expect($element.attr('data-aria-limited-results')).toBe('Type more characters to improve your search');
+    expect($element.attr('data-aria-min-chars')).toBe('Enter 3 or more characters for suggestions.');
+    expect($element.attr('data-aria-n-results')).toBe('There are {n} suggestions available.');
+    expect($element.attr('data-aria-one-result')).toBe('There is one suggestion available.');
+    expect($element.attr('data-aria-you-have-selected')).toBe('You have selected');
+    expect($element.attr('data-autosuggest-data')).toBe('/examples/data/country-of-birth.json');
+    expect($element.attr('data-instructions')).toBe('Use up and down keys to navigate.');
+    expect($element.attr('data-more-results')).toBe('Continue entering to improve suggestions');
+    expect($element.attr('data-no-results')).toBe('No suggestions found. You can enter your own answer');
+    expect($element.attr('data-results-title')).toBe('Suggestions');
+    expect($element.attr('data-type-more')).toBe('Continue entering to get suggestions');
+  });
+
+  it('has the `data-allow-multiple` attribute when `allowMultiple` is `true`', () => {
+    const $ = cheerio.load(
+      renderComponent('autosuggest', {
+        ...EXAMPLE_AUTOSUGGEST,
+        allowMultiple: true,
+      }),
+    );
+
+    expect($('.ons-autosuggest-input').attr('data-allow-multiple')).toBe('true');
+  });
+
+  it('has a special class that indicates the component should initialise itself', () => {
+    const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+    expect($('.ons-autosuggest-input').hasClass('ons-js-autosuggest')).toBe(true);
+  });
+
+  it('does not have a special class when the component has an external initialiser', () => {
+    const $ = cheerio.load(
+      renderComponent('autosuggest', {
+        ...EXAMPLE_AUTOSUGGEST,
+        externalInitialiser: true,
+      }),
+    );
+
+    expect($('.ons-autosuggest-input').hasClass('ons-js-autosuggest')).toBe(false);
+  });
+
+  it('has special class to indicate that component is not editable', () => {
+    const $ = cheerio.load(
+      renderComponent('autosuggest', {
+        ...EXAMPLE_AUTOSUGGEST,
+        isEditable: false,
+      }),
+    );
+
+    expect($('.ons-autosuggest-input').hasClass('ons-js-address-not-editable')).toBe(true);
+  });
+
+  it('has special class to indicate that component input is mandatory', () => {
+    const $ = cheerio.load(
+      renderComponent('autosuggest', {
+        ...EXAMPLE_AUTOSUGGEST,
+        mandatory: true,
+      }),
+    );
+
+    expect($('.ons-autosuggest-input').hasClass('ons-js-address-mandatory')).toBe(true);
+  });
+
+  it('has additionally provided container style classes', () => {
+    const $ = cheerio.load(
+      renderComponent('autosuggest', {
+        ...EXAMPLE_AUTOSUGGEST,
+        containerClasses: 'extra-class another-extra-class',
+      }),
+    );
+
+    expect($('.ons-autosuggest-input').hasClass('extra-class')).toBe(true);
+    expect($('.ons-autosuggest-input').hasClass('another-extra-class')).toBe(true);
+  });
+
+  describe('input', () => {
+    it('uses the `input` component with the expected parameters', () => {
+      const faker = templateFaker();
+      const inputSpy = faker.spy('input');
+
+      faker.renderComponent('autosuggest', {
+        ...EXAMPLE_AUTOSUGGEST,
+        classes: 'extra-class another-extra-class',
+        width: '7',
+        value: 'abc',
+        attributes: {
+          a: 42,
+        },
+        error: {
+          id: 'error-id',
+          text: 'An error occurred.',
+        },
+        mutuallyExclusive: null,
+        accessiblePlaceholder: true,
+      });
+
+      expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth');
+      expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class');
+      expect(inputSpy.occurrences[0]).toHaveProperty('width', '7');
+      expect(inputSpy.occurrences[0]).toHaveProperty('label.text', 'Current name of country');
+      expect(inputSpy.occurrences[0]).toHaveProperty('label.description', 'Enter your own answer or select from suggestions');
+      expect(inputSpy.occurrences[0]).toHaveProperty('label.id', 'country-of-birth-label');
+      expect(inputSpy.occurrences[0]).toHaveProperty('label.classes', 'extra-label-class');
+      expect(inputSpy.occurrences[0]).toHaveProperty('autocomplete', 'off');
+      expect(inputSpy.occurrences[0]).toHaveProperty('value', 'abc');
+      expect(inputSpy.occurrences[0]).toHaveProperty('attributes.a', 42);
+      expect(inputSpy.occurrences[0]).toHaveProperty('error.id', 'error-id');
+      expect(inputSpy.occurrences[0]).toHaveProperty('error.text', 'An error occurred.');
+      expect(inputSpy.occurrences[0]).toHaveProperty('mutuallyExclusive', null);
+      expect(inputSpy.occurrences[0]).toHaveProperty('accessiblePlaceholder', true);
+      expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string');
+    });
+  });
+
+  describe('autosuggest results', () => {
+    it('is rendered `mutallyExclusive` parameter is not defined', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect($('.ons-autosuggest-input__results').length).toBe(1);
+    });
+
+    it('is not rendered when `mutallyExclusive` parameter is defined', () => {
+      const $ = cheerio.load(
+        renderComponent('autosuggest', {
+          ...EXAMPLE_AUTOSUGGEST,
+          mutuallyExclusive: { fakeParam: true },
+        }),
+      );
+
+      expect($('.ons-autosuggest-input__results').length).toBe(0);
+    });
+
+    it('renders header with the provided title identifier', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect($('.ons-autosuggest-input__results-title').attr('id')).toBe('country-of-birth-suggestions');
+    });
+
+    it('renders header with the provided title text', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect(
+        $('.ons-autosuggest-input__results-title')
+          .text()
+          .trim(),
+      ).toBe('Suggestions');
+    });
+
+    it('renders list with a generated identifier', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect($('.ons-autosuggest-input__listbox').attr('id')).toBe('country-of-birth-listbox');
+    });
+
+    it('renders an accessible list', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect($('.ons-autosuggest-input__listbox').attr('title')).toBe('Suggestions');
+    });
+
+    it('renders instructions with a generated identifier', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect($('.ons-autosuggest-input__instructions').attr('id')).toBe('country-of-birth-instructions');
+    });
+
+    it('renders instructions text', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect(
+        $('.ons-autosuggest-input__instructions')
+          .text()
+          .trim(),
+      ).toBe('Use up and down keys to navigate.');
+    });
+  });
+});

package/components/autosuggest/autosuggest.helpers.js

@@ -5,14 +5,13 @@ export function sanitiseAutosuggestText(string, sanitisedQueryRemoveChars = [],
     sanitisedString = sanitisedString.replace(new RegExp(char.toLowerCase(), 'g'), '');
   });
 
+  sanitisedString = trimEnd ? sanitisedString.trim() : sanitisedString.trimStart();
   sanitisedString = sanitisedString.replace(/\s\s+/g, ' ');
-  sanitisedString = sanitisedString.replace('&', '%26');
+  sanitisedString = sanitisedString.replace(/[&]/g, '%26');
 
   if (sanitisedQuerySplitNumsChars) {
     sanitisedString = sanitisedString.replace(/\d(?=[a-z]{3,})/gi, '$& ');
   }
 
-  sanitisedString = trimEnd ? sanitisedString.trim() : sanitisedString.trimStart();
-
   return sanitisedString;
 }

package/components/autosuggest/autosuggest.helpers.spec.js

@@ -0,0 +1,85 @@
+import { sanitiseAutosuggestText } from './autosuggest.helpers';
+
+describe('module: autosuggest.helpers', () => {
+  describe('function: sanitiseAutosuggestText', () => {
+    it.each([
+      ['ABC', 'abc'],
+      ['ABCdEF', 'abcdef'],
+      ['1ABC23', '1abc23'],
+    ])('transforms input characters into lower case (%s)', (input, expectedResult) => {
+      const result = sanitiseAutosuggestText(input);
+      expect(result).toBe(expectedResult);
+    });
+
+    it.each([
+      ['abccdefge', [], 'abccdefge'],
+      ['abccdefge', ['c'], 'abdefge'],
+      ['abccdefge', ['c', 'E'], 'abdfg'],
+    ])('removes unwanted characters (%s)', (input, removeChars, expectedResult) => {
+      const result = sanitiseAutosuggestText(input, removeChars);
+      expect(result).toBe(expectedResult);
+    });
+
+    it.each([
+      ['a    b', 'a b'],
+      ['a    b    c', 'a b c'],
+      ['a  \n\n\t  b', 'a b'],
+    ])('replaces blocks of whitespace with a single space character', (input, expectedResult) => {
+      const result = sanitiseAutosuggestText(input);
+      expect(result).toBe(expectedResult);
+    });
+
+    it.each([
+      ['a&b', 'a%26b'],
+      ['a&&b', 'a%26%26b'],
+      ['a&b&c', 'a%26b%26c'],
+    ])('escapes the "&" character for use in a URL', (input, expectedResult) => {
+      const result = sanitiseAutosuggestText(input);
+      expect(result).toBe(expectedResult);
+    });
+
+    it.each([
+      ['1a', '1a'],
+      ['1aa', '1aa'],
+      ['1aaa', '1aaa'],
+      ['1aaaa', '1aaaa'],
+      ['11aaaa', '11aaaa'],
+      ['11aaaa22bbb', '11aaaa22bbb'],
+      ['11aaaa2b33ccc', '11aaaa2b33ccc'],
+    ])(
+      'does not a space after a digit that is followed by at least 3 letters when `sanitisedQuerySplitNumsChars` is false',
+      (input, expectedResult) => {
+        const result = sanitiseAutosuggestText(input, [], false);
+        expect(result).toBe(expectedResult);
+      },
+    );
+
+    it.each([
+      ['1a', '1a'],
+      ['1aa', '1aa'],
+      ['1aaa', '1 aaa'],
+      ['1aaaa', '1 aaaa'],
+      ['11aaaa', '11 aaaa'],
+      ['11aaaa22bbb', '11 aaaa22 bbb'],
+      ['11aaaa2b33ccc', '11 aaaa2b33 ccc'],
+    ])(
+      'adds a space after a digit that is followed by at least 3 letters when `sanitisedQuerySplitNumsChars` is true',
+      (input, expectedResult) => {
+        const result = sanitiseAutosuggestText(input, [], true);
+        expect(result).toBe(expectedResult);
+      },
+    );
+
+    it('trims whitespace from start and end of input when `trimEnd` is true', () => {
+      const result = sanitiseAutosuggestText('    1a    ', [], false, true);
+      expect(result).toBe('1a');
+    });
+
+    it('trims whitespace from only the start of input when `trimEnd` is false', () => {
+      const result = sanitiseAutosuggestText('    1a    ', [], false, false);
+      // The trailing space is consolidated into 1 whitespace due to a transformation that
+      // this implementation applies.
+      expect(result).toBe('1a ');
+    });
+  });
+});

package/components/autosuggest/autosuggest.js

@@ -3,17 +3,19 @@ import AutosuggestUI from './autosuggest.ui';
 export default class Autosuggest {
   constructor(context) {
     this.context = context;
-    this.lang = document.documentElement.getAttribute('lang').toLowerCase();
 
     this.autosuggest = new AutosuggestUI({
       context,
-      lang: this.lang,
       onSelect: this.onSelect.bind(this),
       onUnsetResult: this.onUnsetResult.bind(this),
       onError: this.onError.bind(this),
     });
   }
 
+  get lang() {
+    return document.documentElement.getAttribute('lang').toLowerCase();
+  }
+
   async onSelect(result) {
     this.autosuggest.input.value = result.displayText;
   }