Skip to content

Commit

Permalink
Merge branch 'main' into feature/add-example-pattern-for-documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
@precious-onyenaucheya-ons
precious-onyenaucheya-ons authored Oct 16, 2023
2 parents 32fc8a1 + 2cf9dd7 commit 238049d
Show file tree
Hide file tree
Showing 11 changed files with 182 additions and 99 deletions.
4 changes: 2 additions & 2 deletions ...onents_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 12 additions & 10 deletions src/components/address-input/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
22 changes: 12 additions & 10 deletions src/components/address-input/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]',
Expand Down
12 changes: 1 addition & 11 deletions src/components/autosuggest/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
63 changes: 38 additions & 25 deletions src/components/autosuggest/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,37 +37,50 @@
>

{% set autosuggestResults %}
<div class="ons-autosuggest__results ons-js-autosuggest-results{% if params.width %} ons-input--w-{{ params.width }}{% else %} ons-input--w-20{% endif %}">
<div class="ons-autosuggest__results ons-js-autosuggest-results{% if params.input.width %} ons-input--w-{{ params.input.width }}{% else %} ons-input--w-20{% endif %}">
<div id="{{ params.resultsTitleId }}" class="ons-autosuggest__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
<ul class="ons-autosuggest__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
</div>
<div class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
<div class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
{% 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 %}

</div>
{% endmacro %}
107 changes: 90 additions & 17 deletions src/components/autosuggest/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down Expand Up @@ -132,35 +134,106 @@ 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');
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('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'); }");
});
});

Expand Down
14 changes: 8 additions & 6 deletions src/components/autosuggest/autosuggest.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down
Loading

0 comments on commit 238049d

Please sign in to comment.