Skip to content

Commit 238049d

Browse files
precious-onyenaucheya-onsprecious-onyenaucheya-ons
authored
Merge branch 'main' into feature/add-example-pattern-for-documentation
2 parents 32fc8a1 + 2cf9dd7 commit 238049d

11 files changed

+182
-99
lines changed

‎backstop_data/bitmaps_reference/ds-vr-test__components_timeout-panel_example-panel-with-timeout-warning_0_document_2_mobile.png

Lines changed: 2 additions & 2 deletions
Loading

‎src/components/address-input/_macro.njk

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,17 +110,19 @@
110110
onsAutosuggest({
111111
"id": params.id + "-autosuggest",
112112
"classes": "ons-address-input__autosuggest ons-u-mb-no",
113-
"width": "50",
114-
"label": {
115-
"text": params.label.text,
116-
"id": params.label.id,
117-
"classes": "ons-js-autosuggest-label"
113+
"input": {
114+
"width": "50",
115+
"label": {
116+
"text": params.label.text,
117+
"id": params.label.id,
118+
"classes": "ons-js-autosuggest-label"
119+
},
120+
"value": params.value,
121+
"attributes": params.attributes,
122+
"error": params.error,
123+
"name": params.name,
124+
"mutuallyExclusive": params.mutuallyExclusive
118125
},
119-
"value": params.value,
120-
"attributes": params.attributes,
121-
"error": params.error,
122-
"name": params.name,
123-
"mutuallyExclusive": params.mutuallyExclusive,
124126
"externalInitialiser": true,
125127
"APIDomain": params.APIDomain,
126128
"APIDomainBearerToken": params.APIDomainBearerToken,

‎src/components/address-input/_macro.spec.js

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -352,17 +352,19 @@ describe('macro: address-input', () => {
352352
expect(autosuggestSpy.occurrences[0]).toEqual({
353353
id: 'address-input-example-id-autosuggest',
354354
classes: 'ons-address-input__autosuggest ons-u-mb-no',
355-
width: '50',
356-
label: {
357-
text: '[params.label.text]',
358-
id: '[params.label.id]',
359-
classes: 'ons-js-autosuggest-label',
355+
input: {
356+
width: '50',
357+
label: {
358+
text: '[params.label.text]',
359+
id: '[params.label.id]',
360+
classes: 'ons-js-autosuggest-label',
361+
},
362+
value: '[params.value]',
363+
attributes: '[params.attributes]',
364+
error: '[params.error]',
365+
name: '[params.name]',
366+
mutuallyExclusive: '[params.mutuallyExclusive]',
360367
},
361-
value: '[params.value]',
362-
attributes: '[params.attributes]',
363-
error: '[params.error]',
364-
name: '[params.name]',
365-
mutuallyExclusive: '[params.mutuallyExclusive]',
366368
externalInitialiser: true,
367369
APIDomain: '[params.APIDomain]',
368370
APIDomainBearerToken: '[params.APIDomainBearerToken]',

‎src/components/autosuggest/_macro-options.md

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,5 @@
1414
| typeMore | string | true | message to encourage the user to enter more characters to get suggestions |
1515
| resultsTitle | string | true | Title of results to be displayed on screen at the top of the results |
1616
| resultsTitleId | string | true | ID for the results title. The ID is used in the results `aria-labelledby` to provide context for the results |
17-
| mutuallyExclusive | `MutuallyExclusive` [_(ref)_](/components/mutually-exclusive) | false | Configuration object if this is a mutually exclusive input |
18-
| label | `Label` [_(ref)_](/components/label) | false | Settings for the input label. `for` will automatically be set to match the input id |
19-
| classes | string | false | Classes to add to the input. |
20-
| legend | string | Only if mutuallyExclusive is set | Text content for the legend |
21-
| legendClasses | string | false | Classes for the legend |
22-
| error | `Error` [_(ref)_](/components/error) | false | Configuration for validation errors |
23-
| name | string | false | The name of the input |
24-
| value | string | number | false | The value to set the input to |
25-
| attributes | object | false | HTML attributes (for example, data attributes) to add to the input |
26-
| autocomplete | string | true | Autocomplete attribute used to override the browsers native autocomplete |
27-
| accessiblePlaceholder | boolean | false | Will add the provided label as an accessible placeholder |
17+
| input | `Input` [_(ref)_](/components/input) | true | Configuration object for the input |
2818
| 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 |

‎src/components/autosuggest/_macro.njk

Lines changed: 38 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -37,37 +37,50 @@
3737
>
3838

3939
{% set autosuggestResults %}
40-
<div class="ons-autosuggest__results ons-js-autosuggest-results{% if params.width %} ons-input--w-{{ params.width }}{% else %} ons-input--w-20{% endif %}">
40+
<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 %}">
4141
<div id="{{ params.resultsTitleId }}" class="ons-autosuggest__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
4242
<ul class="ons-autosuggest__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
4343
</div>
4444
<div class="ons-autosuggest__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
4545
<div class="ons-autosuggest__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
4646
{% endset %}
47-
{{ onsInput({
48-
"id": params.id,
49-
"classes": "ons-js-autosuggest-input " + (params.classes if params.classes else ''),
50-
"width": params.width,
51-
"label": {
52-
"text": params.label.text,
53-
"description": params.label.description,
54-
"id": params.label.id,
55-
"classes": params.label.classes
56-
},
57-
"autocomplete": params.autocomplete,
58-
"legend": params.legend,
59-
"legendClasses": params.legendClasses,
60-
"value": params.value,
61-
"attributes": params.attributes,
62-
"error": params.error,
63-
"mutuallyExclusive": params.mutuallyExclusive,
64-
"accessiblePlaceholder": params.accessiblePlaceholder,
65-
"name": params.name,
66-
"autosuggestResults": autosuggestResults
67-
}) }}
6847

69-
{% if not params.mutuallyExclusive %}
70-
{{ autosuggestResults | safe }}
71-
{% endif %}
48+
{{ onsInput({
49+
"id": params.id,
50+
"type": params.input.type,
51+
"classes": "ons-js-autosuggest-input " + (params.input.classes if params.input.classes else ''),
52+
"width": params.input.width,
53+
"label": params.input.label,
54+
"autocomplete": params.input.autocomplete,
55+
"legend": params.input.legend,
56+
"legendClasses": params.input.legendClasses,
57+
"legendIsQuestionTitle": params.input.legendIsQuestionTitle,
58+
"value": params.input.value,
59+
"attributes": params.input.attributes,
60+
"error": params.input.error,
61+
"mutuallyExclusive": params.input.mutuallyExclusive,
62+
"accessiblePlaceholder": params.input.accessiblePlaceholder,
63+
"name": params.input.name,
64+
"autosuggestResults": autosuggestResults,
65+
"min": params.input.min,
66+
"max": params.input.max,
67+
"minLength": params.input.minLength,
68+
"maxLength": params.input.maxLength,
69+
"prefix": params.input.prefix,
70+
"suffix": params.input.suffix,
71+
"fieldId": params.input.fieldId,
72+
"fieldClasses": params.input.fieldClasses,
73+
"dontWrap": params.input.dontWrap,
74+
"charCheckLimit": params.input.charCheckLimit,
75+
"searchButton": params.input.searchButton,
76+
"postTextboxLinkText": params.input.postTextboxLinkText,
77+
"postTextboxLinkUrl": params.input.postTextboxLinkUrl,
78+
"listeners": params.input.listeners
79+
}) }}
80+
81+
{% if not params.mutuallyExclusive %}
82+
{{ autosuggestResults | safe }}
83+
{% endif %}
84+
7285
</div>
7386
{% endmacro %}

‎src/components/autosuggest/_macro.spec.js

Lines changed: 90 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
77

88
const EXAMPLE_AUTOSUGGEST = {
99
id: 'country-of-birth',
10-
label: {
11-
text: 'Current name of country',
12-
description: 'Enter your own answer or select from suggestions',
13-
id: 'country-of-birth-label',
14-
classes: 'extra-label-class',
10+
input: {
11+
label: {
12+
text: 'Current name of country',
13+
description: 'Enter your own answer or select from suggestions',
14+
id: 'country-of-birth-label',
15+
classes: 'extra-label-class',
16+
},
17+
autocomplete: 'off',
1518
},
16-
autocomplete: 'off',
1719
instructions: 'Use up and down keys to navigate.',
1820
ariaYouHaveSelected: 'You have selected',
1921
ariaMinChars: 'Enter 3 or more characters for suggestions.',
@@ -132,35 +134,106 @@ describe('macro: autosuggest', () => {
132134

133135
faker.renderComponent('autosuggest', {
134136
...EXAMPLE_AUTOSUGGEST,
135-
classes: 'extra-class another-extra-class',
136-
width: '7',
137-
value: 'abc',
138-
attributes: {
139-
a: 42,
137+
input: {
138+
type: 'text',
139+
classes: 'extra-class another-extra-class',
140+
width: '7',
141+
label: {
142+
text: 'Current name of country',
143+
description: 'Enter your own answer or select from suggestions',
144+
id: 'country-of-birth-label',
145+
classes: 'extra-label-class',
146+
},
147+
autocomplete: 'off',
148+
legend: 'this is a legend',
149+
legendClasses: 'legend-extra-class',
150+
value: 'abc',
151+
attributes: {
152+
a: 42,
153+
},
154+
error: {
155+
id: 'error-id',
156+
text: 'An error occurred.',
157+
},
158+
mutuallyExclusive: null,
159+
accessiblePlaceholder: true,
160+
name: 'country-of-birth-test',
161+
min: 1,
162+
max: 10,
163+
minLength: 1,
164+
maxLength: 10,
165+
prefix: {
166+
title: 'Great British Pounds',
167+
text: '£',
168+
id: 'gbp-prefix',
169+
},
170+
suffix: {
171+
title: 'Percentage of total',
172+
text: '%',
173+
id: 'percentage-suffix',
174+
},
175+
fieldId: 'field-id-test',
176+
fieldClasses: 'field-class-test',
177+
dontWrap: true,
178+
charCheckLimit: {
179+
limit: 200,
180+
charCountSingular: 'You have {x} character remaining',
181+
charCountPlural: 'You have {x} characters remaining',
182+
charCountOverLimitSingular: '{x} character too many',
183+
charCountOverLimitPlural: '{x} characters too many',
184+
},
185+
searchButton: {
186+
text: 'Search',
187+
},
188+
postTextboxLinkText: 'Post textbox link text',
189+
postTextboxLinkUrl: 'https://www.ons.gov.uk',
190+
listeners: {
191+
click: "function() { console.log('click'); }",
192+
},
140193
},
141-
error: {
142-
id: 'error-id',
143-
text: 'An error occurred.',
144-
},
145-
mutuallyExclusive: null,
146-
accessiblePlaceholder: true,
147194
});
148195

149196
expect(inputSpy.occurrences[0]).toHaveProperty('id', 'country-of-birth');
197+
expect(inputSpy.occurrences[0]).toHaveProperty('type', 'text');
150198
expect(inputSpy.occurrences[0]).toHaveProperty('classes', 'ons-js-autosuggest-input extra-class another-extra-class');
151199
expect(inputSpy.occurrences[0]).toHaveProperty('width', '7');
152200
expect(inputSpy.occurrences[0]).toHaveProperty('label.text', 'Current name of country');
153201
expect(inputSpy.occurrences[0]).toHaveProperty('label.description', 'Enter your own answer or select from suggestions');
154202
expect(inputSpy.occurrences[0]).toHaveProperty('label.id', 'country-of-birth-label');
155203
expect(inputSpy.occurrences[0]).toHaveProperty('label.classes', 'extra-label-class');
156204
expect(inputSpy.occurrences[0]).toHaveProperty('autocomplete', 'off');
205+
expect(inputSpy.occurrences[0]).toHaveProperty('legend', 'this is a legend');
206+
expect(inputSpy.occurrences[0]).toHaveProperty('legendClasses', 'legend-extra-class');
157207
expect(inputSpy.occurrences[0]).toHaveProperty('value', 'abc');
158208
expect(inputSpy.occurrences[0]).toHaveProperty('attributes.a', 42);
159209
expect(inputSpy.occurrences[0]).toHaveProperty('error.id', 'error-id');
160210
expect(inputSpy.occurrences[0]).toHaveProperty('error.text', 'An error occurred.');
161211
expect(inputSpy.occurrences[0]).toHaveProperty('mutuallyExclusive', null);
162212
expect(inputSpy.occurrences[0]).toHaveProperty('accessiblePlaceholder', true);
213+
expect(inputSpy.occurrences[0]).toHaveProperty('name', 'country-of-birth-test');
163214
expect(typeof inputSpy.occurrences[0].autosuggestResults).toBe('string');
215+
expect(inputSpy.occurrences[0]).toHaveProperty('min', 1);
216+
expect(inputSpy.occurrences[0]).toHaveProperty('max', 10);
217+
expect(inputSpy.occurrences[0]).toHaveProperty('minLength', 1);
218+
expect(inputSpy.occurrences[0]).toHaveProperty('maxLength', 10);
219+
expect(inputSpy.occurrences[0]).toHaveProperty('prefix.title', 'Great British Pounds');
220+
expect(inputSpy.occurrences[0]).toHaveProperty('prefix.text', '£');
221+
expect(inputSpy.occurrences[0]).toHaveProperty('prefix.id', 'gbp-prefix');
222+
expect(inputSpy.occurrences[0]).toHaveProperty('suffix.title', 'Percentage of total');
223+
expect(inputSpy.occurrences[0]).toHaveProperty('suffix.text', '%');
224+
expect(inputSpy.occurrences[0]).toHaveProperty('suffix.id', 'percentage-suffix');
225+
expect(inputSpy.occurrences[0]).toHaveProperty('fieldId', 'field-id-test');
226+
expect(inputSpy.occurrences[0]).toHaveProperty('fieldClasses', 'field-class-test');
227+
expect(inputSpy.occurrences[0]).toHaveProperty('dontWrap', true);
228+
expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.limit', 200);
229+
expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountSingular', 'You have {x} character remaining');
230+
expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountPlural', 'You have {x} characters remaining');
231+
expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitSingular', '{x} character too many');
232+
expect(inputSpy.occurrences[0]).toHaveProperty('charCheckLimit.charCountOverLimitPlural', '{x} characters too many');
233+
expect(inputSpy.occurrences[0]).toHaveProperty('searchButton.text', 'Search');
234+
expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkText', 'Post textbox link text');
235+
expect(inputSpy.occurrences[0]).toHaveProperty('postTextboxLinkUrl', 'https://www.ons.gov.uk');
236+
expect(inputSpy.occurrences[0]).toHaveProperty('listeners.click', "function() { console.log('click'); }");
164237
});
165238
});
166239

‎src/components/autosuggest/autosuggest.spec.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
33

44
const EXAMPLE_AUTOSUGGEST = {
55
id: 'country-of-birth',
6-
label: {
7-
text: 'Current name of country',
8-
description: 'Enter your own answer or select from suggestions',
9-
id: 'country-of-birth-label',
10-
classes: 'extra-label-class',
6+
input: {
7+
label: {
8+
text: 'Current name of country',
9+
description: 'Enter your own answer or select from suggestions',
10+
id: 'country-of-birth-label',
11+
classes: 'extra-label-class',
12+
},
13+
autocomplete: 'off',
1114
},
12-
autocomplete: 'off',
1315
instructions: 'Use up and down keys to navigate.',
1416
ariaYouHaveSelected: 'You have selected',
1517
ariaMinChars: 'Enter 3 or more characters for suggestions.',

0 commit comments

Comments
 (0)