From 2cf9dd794f4cac26a42ba25d65ff54ce3b7c0736 Mon Sep 17 00:00:00 2001 From: Will Cowen <131372109+willcAND@users.noreply.github.com> Date: Mon, 16 Oct 2023 11:21:18 +0100 Subject: [PATCH] Enhancement/2172/autosuggest allow input params (#2699) --- ...th-timeout-warning_0_document_1_tablet.png | 4 +- ...th-timeout-warning_0_document_2_mobile.png | 4 +- src/components/address-input/_macro.njk | 22 ++-- src/components/address-input/_macro.spec.js | 22 ++-- src/components/autosuggest/_macro-options.md | 12 +- src/components/autosuggest/_macro.njk | 63 +++++++---- src/components/autosuggest/_macro.spec.js | 107 +++++++++++++++--- .../autosuggest/autosuggest.spec.js | 14 ++- .../example-autosuggest-country-multiple.njk | 12 +- .../example-autosuggest-country.njk | 12 +- src/components/button/button.dom.js | 2 +- src/js/analytics.js | 11 +- 12 files changed, 184 insertions(+), 101 deletions(-) diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png index 38d3cec173..e57dee7bd7 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:255ba5261f88e83a8fb612ac518ba06379e3d196a20b65f9d17e2b856fe84124 -size 13594 +oid sha256:8cb52531d1d281043cf0541c3c8d2a5b93bbc00c3d2a60d1244b4949a954c265 +size 13505 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png index f0f681a56c..2695f0770a 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f67e4ca5163a3770c17f4768fd548fc4e4ac0099d5cef4330b6176ee7c5174f2 -size 13805 +oid sha256:ca21587d7e4bf313e46414c7c484509716ee93ad9d66e7b02efc844b2757bb25 +size 13752 diff --git a/src/components/address-input/_macro.njk b/src/components/address-input/_macro.njk index b2f271666c..cd4ce44d05 100644 --- a/src/components/address-input/_macro.njk +++ b/src/components/address-input/_macro.njk @@ -110,17 +110,19 @@ onsAutosuggest({ "id": params.id + "-autosuggest", "classes": "ons-address-input__autosuggest ons-u-mb-no", - "width": "50", - "label": { - "text": params.label.text, - "id": params.label.id, - "classes": "ons-js-autosuggest-label" + "input": { + "width": "50", + "label": { + "text": params.label.text, + "id": params.label.id, + "classes": "ons-js-autosuggest-label" + }, + "value": params.value, + "attributes": params.attributes, + "error": params.error, + "name": params.name, + "mutuallyExclusive": params.mutuallyExclusive }, - "value": params.value, - "attributes": params.attributes, - "error": params.error, - "name": params.name, - "mutuallyExclusive": params.mutuallyExclusive, "externalInitialiser": true, "APIDomain": params.APIDomain, "APIDomainBearerToken": params.APIDomainBearerToken, diff --git a/src/components/address-input/_macro.spec.js b/src/components/address-input/_macro.spec.js index 70083d9fbf..f32ffc137e 100644 --- a/src/components/address-input/_macro.spec.js +++ b/src/components/address-input/_macro.spec.js @@ -352,17 +352,19 @@ describe('macro: address-input', () => { expect(autosuggestSpy.occurrences[0]).toEqual({ id: 'address-input-example-id-autosuggest', classes: 'ons-address-input__autosuggest ons-u-mb-no', - width: '50', - label: { - text: '[params.label.text]', - id: '[params.label.id]', - classes: 'ons-js-autosuggest-label', + input: { + width: '50', + label: { + text: '[params.label.text]', + id: '[params.label.id]', + classes: 'ons-js-autosuggest-label', + }, + value: '[params.value]', + attributes: '[params.attributes]', + error: '[params.error]', + name: '[params.name]', + mutuallyExclusive: '[params.mutuallyExclusive]', }, - value: '[params.value]', - attributes: '[params.attributes]', - error: '[params.error]', - name: '[params.name]', - mutuallyExclusive: '[params.mutuallyExclusive]', externalInitialiser: true, APIDomain: '[params.APIDomain]', APIDomainBearerToken: '[params.APIDomainBearerToken]', diff --git a/src/components/autosuggest/_macro-options.md b/src/components/autosuggest/_macro-options.md index e74c96febb..2133fdd9d9 100644 --- a/src/components/autosuggest/_macro-options.md +++ b/src/components/autosuggest/_macro-options.md @@ -14,15 +14,5 @@ | typeMore | string | true | message to encourage the user to enter more characters to get suggestions | | resultsTitle | string | true | Title of results to be displayed on screen at the top of the results | | resultsTitleId | string | true | ID for the results title. The ID is used in the results `aria-labelledby` to provide context for the results | -| mutuallyExclusive | `MutuallyExclusive` [_(ref)_](/components/mutually-exclusive) | false | Configuration object if this is a mutually exclusive input | -| label | `Label` [_(ref)_](/components/label) | false | Settings for the input label. `for` will automatically be set to match the input id | -| classes | string | false | Classes to add to the input. | -| legend | string | Only if mutuallyExclusive is set | Text content for the legend | -| legendClasses | string | false | Classes for the legend | -| error | `Error` [_(ref)_](/components/error) | false | Configuration for validation errors | -| name | string | false | The name of the input | -| value | string | number | false | The value to set the input to | -| attributes | object | false | HTML attributes (for example, data attributes) to add to the input | -| autocomplete | string | true | Autocomplete attribute used to override the browsers native autocomplete | -| accessiblePlaceholder | boolean | false | Will add the provided label as an accessible placeholder | +| input | `Input` [_(ref)_](/components/input) | true | Configuration object for the input | | language | string | false | The ISO 639-1 Code will override the default language in page. Please note that only 'en', 'cy' and 'ni' is currently supported | diff --git a/src/components/autosuggest/_macro.njk b/src/components/autosuggest/_macro.njk index 239f29e7c8..b61edcba32 100644 --- a/src/components/autosuggest/_macro.njk +++ b/src/components/autosuggest/_macro.njk @@ -37,37 +37,50 @@ > {% set autosuggestResults %} -
+
{{ params.resultsTitle }}
{{ params.instructions }}
{% endset %} - {{ onsInput({ - "id": params.id, - "classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''), - "width": params.width, - "label": { - "text": params.label.text, - "description": params.label.description, - "id": params.label.id, - "classes": params.label.classes - }, - "autocomplete": params.autocomplete, - "legend": params.legend, - "legendClasses": params.legendClasses, - "value": params.value, - "attributes": params.attributes, - "error": params.error, - "mutuallyExclusive": params.mutuallyExclusive, - "accessiblePlaceholder": params.accessiblePlaceholder, - "name": params.name, - "autosuggestResults": autosuggestResults - }) }} - {% if not params.mutuallyExclusive %} - {{ autosuggestResults | safe }} - {% endif %} + {{ onsInput({ + "id": params.id, + "type": params.input.type, + "classes": "ons-js-autosuggest-input " + (params.input.classes if params.input.classes else ''), + "width": params.input.width, + "label": params.input.label, + "autocomplete": params.input.autocomplete, + "legend": params.input.legend, + "legendClasses": params.input.legendClasses, + "legendIsQuestionTitle": params.input.legendIsQuestionTitle, + "value": params.input.value, + "attributes": params.input.attributes, + "error": params.input.error, + "mutuallyExclusive": params.input.mutuallyExclusive, + "accessiblePlaceholder": params.input.accessiblePlaceholder, + "name": params.input.name, + "autosuggestResults": autosuggestResults, + "min": params.input.min, + "max": params.input.max, + "minLength": params.input.minLength, + "maxLength": params.input.maxLength, + "prefix": params.input.prefix, + "suffix": params.input.suffix, + "fieldId": params.input.fieldId, + "fieldClasses": params.input.fieldClasses, + "dontWrap": params.input.dontWrap, + "charCheckLimit": params.input.charCheckLimit, + "searchButton": params.input.searchButton, + "postTextboxLinkText": params.input.postTextboxLinkText, + "postTextboxLinkUrl": params.input.postTextboxLinkUrl, + "listeners": params.input.listeners + }) }} + + {% if not params.mutuallyExclusive %} + {{ autosuggestResults | safe }} + {% endif %} +
{% endmacro %} diff --git a/src/components/autosuggest/_macro.spec.js b/src/components/autosuggest/_macro.spec.js index f69601775c..37b2d0ee13 100644 --- a/src/components/autosuggest/_macro.spec.js +++ b/src/components/autosuggest/_macro.spec.js @@ -7,13 +7,15 @@ 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', + input: { + 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', }, - autocomplete: 'off', instructions: 'Use up and down keys to navigate.', ariaYouHaveSelected: 'You have selected', ariaMinChars: 'Enter 3 or more characters for suggestions.', @@ -132,21 +134,67 @@ describe('macro: autosuggest', () => { faker.renderComponent('autosuggest', { ...EXAMPLE_AUTOSUGGEST, - classes: 'extra-class another-extra-class', - width: '7', - value: 'abc', - attributes: { - a: 42, + input: { + type: 'text', + classes: 'extra-class another-extra-class', + width: '7', + 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', + legend: 'this is a legend', + legendClasses: 'legend-extra-class', + value: 'abc', + attributes: { + a: 42, + }, + error: { + id: 'error-id', + text: 'An error occurred.', + }, + mutuallyExclusive: null, + accessiblePlaceholder: true, + name: 'country-of-birth-test', + min: 1, + max: 10, + minLength: 1, + maxLength: 10, + prefix: { + title: 'Great British Pounds', + text: '£', + id: 'gbp-prefix', + }, + suffix: { + title: 'Percentage of total', + text: '%', + id: 'percentage-suffix', + }, + fieldId: 'field-id-test', + fieldClasses: 'field-class-test', + dontWrap: true, + charCheckLimit: { + limit: 200, + charCountSingular: 'You have {x} character remaining', + charCountPlural: 'You have {x} characters remaining', + charCountOverLimitSingular: '{x} character too many', + charCountOverLimitPlural: '{x} characters too many', + }, + searchButton: { + text: 'Search', + }, + postTextboxLinkText: 'Post textbox link text', + postTextboxLinkUrl: 'https://www.ons.gov.uk', + listeners: { + click: "function() { console.log('click'); }", + }, }, - 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('type', 'text'); 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'); @@ -154,13 +202,38 @@ describe('macro: autosuggest', () => { 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('legend', 'this is a legend'); + expect(inputSpy.occurrences[0]).toHaveProperty('legendClasses', 'legend-extra-class'); 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(inputSpy.occurrences[0]).toHaveProperty('name', 'country-of-birth-test'); expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string'); + expect(inputSpy.occurrences[0]).toHaveProperty('min', 1); + expect(inputSpy.occurrences[0]).toHaveProperty('max', 10); + expect(inputSpy.occurrences[0]).toHaveProperty('minLength', 1); + expect(inputSpy.occurrences[0]).toHaveProperty('maxLength', 10); + expect(inputSpy.occurrences[0]).toHaveProperty('prefix.title', 'Great British Pounds'); + expect(inputSpy.occurrences[0]).toHaveProperty('prefix.text', '£'); + expect(inputSpy.occurrences[0]).toHaveProperty('prefix.id', 'gbp-prefix'); + expect(inputSpy.occurrences[0]).toHaveProperty('suffix.title', 'Percentage of total'); + expect(inputSpy.occurrences[0]).toHaveProperty('suffix.text', '%'); + expect(inputSpy.occurrences[0]).toHaveProperty('suffix.id', 'percentage-suffix'); + expect(inputSpy.occurrences[0]).toHaveProperty('fieldId', 'field-id-test'); + expect(inputSpy.occurrences[0]).toHaveProperty('fieldClasses', 'field-class-test'); + expect(inputSpy.occurrences[0]).toHaveProperty('dontWrap', true); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.limit', 200); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountSingular', 'You have {x} character remaining'); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountPlural', 'You have {x} characters remaining'); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitSingular', '{x} character too many'); + expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitPlural', '{x} characters too many'); + expect(inputSpy.occurrences[0]).toHaveProperty('searchButton.text', 'Search'); + expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkText', 'Post textbox link text'); + expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkUrl', 'https://www.ons.gov.uk'); + expect(inputSpy.occurrences[0]).toHaveProperty('listeners.click', "function() { console.log('click'); }"); }); }); diff --git a/src/components/autosuggest/autosuggest.spec.js b/src/components/autosuggest/autosuggest.spec.js index 67c8d906a9..1655e1af00 100644 --- a/src/components/autosuggest/autosuggest.spec.js +++ b/src/components/autosuggest/autosuggest.spec.js @@ -3,13 +3,15 @@ import { renderComponent, setTestPage } 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', + input: { + 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', }, - autocomplete: 'off', instructions: 'Use up and down keys to navigate.', ariaYouHaveSelected: 'You have selected', ariaMinChars: 'Enter 3 or more characters for suggestions.', diff --git a/src/components/autosuggest/example-autosuggest-country-multiple.njk b/src/components/autosuggest/example-autosuggest-country-multiple.njk index 60009da400..0c7a66770f 100644 --- a/src/components/autosuggest/example-autosuggest-country-multiple.njk +++ b/src/components/autosuggest/example-autosuggest-country-multiple.njk @@ -5,12 +5,14 @@ {{ onsAutosuggest({ "id": "country-of-birth-autosuggest-multiple", - "label": { - "text": "Passport", - "id": "country-of-birth-label-multiple", - "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one." + "input": { + "label": { + "text": "Passport", + "id": "country-of-birth-label-multiple", + "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one." + }, + "autocomplete": "off" }, - "autocomplete": "off", "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.", "ariaYouHaveSelected": "You have selected", "ariaMinChars": "Enter 3 or more characters for suggestions.", diff --git a/src/components/autosuggest/example-autosuggest-country.njk b/src/components/autosuggest/example-autosuggest-country.njk index 2c06d1b10b..c97a4fba41 100644 --- a/src/components/autosuggest/example-autosuggest-country.njk +++ b/src/components/autosuggest/example-autosuggest-country.njk @@ -5,12 +5,14 @@ {{ onsAutosuggest({ "id": "country-of-birth-autosuggest", - "label": { - "text": "Current name of country", - "description": "Enter your own answer or select from suggestions", - "id": "country-of-birth-label" + "input": { + "label": { + "text": "Current name of country", + "description": "Enter your own answer or select from suggestions", + "id": "country-of-birth-label" + }, + "autocomplete": "off" }, - "autocomplete": "off", "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.", "ariaYouHaveSelected": "You have selected", "ariaMinChars": "Enter 3 or more characters for suggestions.", diff --git a/src/components/button/button.dom.js b/src/components/button/button.dom.js index 376a934d6d..870dc18d86 100644 --- a/src/components/button/button.dom.js +++ b/src/components/button/button.dom.js @@ -6,7 +6,7 @@ async function submitButton() { if (buttons.length) { const SubmitButton = (await import('./button')).default; - buttons.forEach(button => { + buttons.forEach((button) => { if (button.classList.contains('ons-js-timer')) { submitType = 'timer'; } else if (button.classList.contains('ons-js-loader')) { diff --git a/src/js/analytics.js b/src/js/analytics.js index ecff11be11..7ac9924065 100644 --- a/src/js/analytics.js +++ b/src/js/analytics.js @@ -11,7 +11,7 @@ if (typeof window.ga !== 'undefined') { }; } -export const trackElement = el => { +export const trackElement = (el) => { return trackEvent('send', { hitType: 'event', eventCategory: el.getAttribute('data-ga-category') || '', @@ -24,7 +24,7 @@ export default function initAnalytics() { let trackVisibleElements = [...document.querySelectorAll('[data-ga=visible]')]; const interval = window.setInterval(() => { - trackVisibleElements = trackVisibleElements.filter(element => { + trackVisibleElements = trackVisibleElements.filter((element) => { return element ? trackElement(element) && false : true; }); if (trackVisibleElements.length === 0) { @@ -45,16 +45,13 @@ export default function initAnalytics() { hitType: 'event', eventCategory: 'Print Intent', eventAction: 'Print Intent', - eventLabel: window.location.pathname - .split('/') - .slice(-3) - .join('/'), + eventLabel: window.location.pathname.split('/').slice(-3).join('/'), }); }; if (window.matchMedia) { const mediaQueryList = window.matchMedia('print'); - mediaQueryList.addListener(function(mql) { + mediaQueryList.addListener(function (mql) { if (!mql.matches) { afterPrint(); }