@ons/design-system 73.0.4 → 73.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/components/chart/_chart.scss +2 -2
  2. package/components/chart/_macro.spec.js +32 -0
  3. package/components/chart/annotations-options.js +1 -0
  4. package/components/chart/area-chart.js +3 -0
  5. package/components/chart/bar-chart.js +1 -0
  6. package/components/chart/chart.js +6 -4
  7. package/components/chart/column-chart.js +3 -0
  8. package/components/chart/example-area-chart.njk +2 -2
  9. package/components/chart/example-line-chart-with-label-format.njk +89 -0
  10. package/components/chart/reference-line-annotations-options.js +1 -0
  11. package/components/chart/specific-chart-options.js +8 -1
  12. package/components/details-panel/_macro.njk +6 -6
  13. package/components/header/_header.scss +3 -3
  14. package/components/header/_macro.njk +153 -143
  15. package/components/header/_macro.spec.js +223 -0
  16. package/components/header/example-header-basic-with-search-and-language-DEPRECATED.njk +207 -0
  17. package/components/header/example-header-basic-with-search-and-language.njk +36 -27
  18. package/components/header/example-header-basic-with-search-button.njk +35 -27
  19. package/components/hero/_macro.njk +4 -1
  20. package/components/hero/_macro.spec.js +26 -0
  21. package/components/list/_list.scss +0 -3
  22. package/components/panel/_panel.scss +5 -0
  23. package/components/phase-banner/_macro.njk +10 -1
  24. package/components/phase-banner/_macro.spec.js +27 -0
  25. package/components/phase-banner/example-phase-banner-beta-with-feedback-link.njk +18 -0
  26. package/components/phase-banner/example-phase-banner-beta-without-feedback-link.njk +7 -0
  27. package/components/question/_question.scss +1 -0
  28. package/components/radios/_macro.njk +1 -1
  29. package/components/skip-to-content/_macro.njk +1 -1
  30. package/components/skip-to-content/_skip.scss +0 -2
  31. package/components/table/_macro.njk +6 -3
  32. package/components/table/_macro.spec.js +58 -0
  33. package/components/table/_table.scss +9 -1
  34. package/components/table/example-table-with-valign-property.njk +142 -0
  35. package/components/table-of-contents/example-table-of-contents-grouped-with-single-list-item.njk +34 -0
  36. package/css/main.css +1 -1
  37. package/js/cookies-settings.js +5 -5
  38. package/package.json +18 -12
  39. package/scripts/main.es5.js +5 -3
  40. package/scripts/main.js +2 -2
  41. package/scss/utilities/_highlight.scss +1 -1
package/components/header/_macro.njk CHANGED
@@ -135,88 +135,7 @@
135
135
  </div>
136
136
  {% endif %}
137
137
 
138
- {% if params.variants == "basic" and params.menuLinks %}
139
- <nav
140
- class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl"
141
- id="{{ params.menuLinks.id }}"
142
- aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
143
- aria-hidden="false"
144
- >
145
- {% if params.menuLinks.keyLinks %}
146
- <div class="ons-container">
147
- <ul class="ons-grid ons-header-nav-menu__key-list">
148
- {% for keyLink in params.menuLinks.keyLinks %}
149
- {% if keyLink.heading %}
150
- <li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
151
- <h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
152
- {% if keyLink.url %}
153
- <a href="{{ keyLink.url }}" class="ons-header-nav-menu__link"
154
- >{{ keyLink.heading }}</a
155
- >
156
- {% else %}
157
- {{ keyLink.heading }}
158
- {% endif %}
159
- </h2>
160
- {% if keyLink.description %}
161
- <p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">
162
- {{ keyLink.description }}
163
- </p>
164
- {% endif %}
165
- </li>
166
- {% endif %}
167
- {% endfor %}
168
- </ul>
169
- </div>
170
- {% endif %}
171
- {% if params.menuLinks.columns %}
172
- <div class="ons-container">
173
- <ul class="ons-grid ons-list ons-list--bare">
174
- {% for column in params.menuLinks.columns %}
175
- <li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
176
- {% for group in column.groups %}
177
- {% if group.heading %}
178
- <h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
179
- {% if group.url %}
180
- <a href="{{ group.url }}" class="ons-header-nav-menu__link"
181
- >{{ group.heading }}</a
182
- >
183
- {% else %}
184
- {{ group.heading }}
185
- {% endif %}
186
- </h2>
187
- {% endif %}
188
- {% if group.groupItems %}
189
- <ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
190
- {% for groupItem in group.groupItems %}
191
- {% if groupItem.text %}
192
- <li class="ons-u-mb-no">
193
- <p class="ons-u-fs-s ons-header-nav-menu_text">
194
- {% if groupItem.url %}
195
- <a
196
- href="{{ groupItem.url }}"
197
- class="ons-header-nav-menu__link"
198
- >
199
- {{ groupItem.text }}
200
- </a>
201
- {% else %}
202
- {{ groupItem.text }}
203
- {% endif %}
204
- </p>
205
- </li>
206
- {% endif %}
207
- {% endfor %}
208
- </ul>
209
- {% endif %}
210
- {% endfor %}
211
- </li>
212
- {% endfor %}
213
- </ul>
214
- </div>
215
- {% endif %}
216
- </nav>
217
- {% endif %}
218
-
219
- {% if params.searchLinks %}
138
+ {% if params.search or params.searchLinks %}
220
139
  <div class="ons-header__links ons-grid__col ons-header__menu-link">
221
140
  {{
222
141
  onsButton({
@@ -225,8 +144,8 @@
225
144
  "variants": "search",
226
145
  "iconType": "search",
227
146
  "attributes": {
228
- "aria-label": params.searchLinks.searchButtonAriaLabel | default("Toggle search"),
229
- "aria-controls": params.searchLinks.id,
147
+ "aria-label": (params.search.toggleAriaLabel if params.search.toggleAriaLabel else params.searchLinks.searchButtonAriaLabel) | default("Toggle search"),
148
+ "aria-controls": params.search.id if params.search.id else params.searchLinks.id,
230
149
  "aria-expanded": "true",
231
150
  "aria-disabled": "true"
232
151
  }
@@ -234,67 +153,11 @@
234
153
  }}
235
154
  </div>
236
155
  {% endif %}
237
-
238
- {% if params.variants == "basic" and params.searchLinks %}
239
- <nav
240
- class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
241
- id="{{ params.searchLinks.id }}"
242
- aria-label="{{ params.searchLinks.searchNavigationAriaLabel | default('Search navigation') }}"
243
- aria-hidden="false"
244
- >
245
- <div class="ons-container">
246
- <div class="ons-header-nav-search__input">
247
- {% from "components/input/_macro.njk" import onsInput %}
248
- {{
249
- onsInput({
250
- "id": 'search-field',
251
- "width": 'full',
252
- "label": {
253
- "text": params.searchLinks.searchNavigationInputLabel | default('Search the ONS'),
254
- "id": "header-search-input-label"
255
- },
256
- "searchButton": {
257
- "visuallyHideButtonText": true,
258
- "text": params.searchLinks.searchNavigationButtonText | default('Search'),
259
- "iconType": 'search',
260
- 'variant': 'header'
261
- }
262
- })
263
- }}
264
- </div>
265
- </div>
266
- {% if params.searchLinks %}
267
- <div class="ons-container">
268
- <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
269
- {{ params.searchLinks.heading }}
270
- </h2>
271
- <ul class="ons-list ons-list--bare ons-list--inline">
272
- {% for item in params.searchLinks.itemsList %}
273
- {# Limiting the popular searches to 5 #}
274
- {% if loop.index <= 5 %}
275
- <li class="ons-list__item">
276
- {% if item.text %}
277
- {% if item.url %}
278
- <a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
279
- >{{ item.text }}
280
- </a>
281
- {% else %}
282
- <p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
283
- {% endif %}
284
- {% endif %}
285
- </li>
286
- {% endif %}
287
- {% endfor %}
288
- </ul>
289
- </div>
290
- {% endif %}
291
- </nav>
292
- {% endif %}
293
156
  </div>
294
157
  {% endif %}
295
158
  {% if params.language or params.serviceLinks %}
296
159
  <div
297
- class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not params.searchLinks and not params.menuLinks }}"
160
+ class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not (params.searchLinks or params.search) and not params.menuLinks }}"
298
161
  >
299
162
  {% if params.language %}
300
163
  <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
@@ -413,6 +276,153 @@
413
276
  </nav>
414
277
  {% endif %}
415
278
  </div>
279
+ {% if params.variants == "basic" and params.menuLinks %}
280
+ <nav
281
+ class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl ons-u-d-no"
282
+ id="{{ params.menuLinks.id }}"
283
+ aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
284
+ aria-hidden="true"
285
+ >
286
+ {% if params.menuLinks.keyLinks %}
287
+ <div class="ons-container">
288
+ <ul class="ons-grid ons-header-nav-menu__key-list">
289
+ {% for keyLink in params.menuLinks.keyLinks %}
290
+ {% if keyLink.heading %}
291
+ <li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
292
+ <h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
293
+ {% if keyLink.url %}
294
+ <a href="{{ keyLink.url }}" class="ons-header-nav-menu__link">{{ keyLink.heading }}</a>
295
+ {% else %}
296
+ {{ keyLink.heading }}
297
+ {% endif %}
298
+ </h2>
299
+ {% if keyLink.description %}
300
+ <p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">{{ keyLink.description }}</p>
301
+ {% endif %}
302
+ </li>
303
+ {% endif %}
304
+ {% endfor %}
305
+ </ul>
306
+ </div>
307
+ {% endif %}
308
+ {% if params.menuLinks.columns %}
309
+ <div class="ons-container">
310
+ <ul class="ons-grid ons-list ons-list--bare">
311
+ {% for column in params.menuLinks.columns %}
312
+ <li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
313
+ {% for group in column.groups %}
314
+ {% if group.heading %}
315
+ <h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
316
+ {% if group.url %}
317
+ <a href="{{ group.url }}" class="ons-header-nav-menu__link">{{ group.heading }}</a>
318
+ {% else %}
319
+ {{ group.heading }}
320
+ {% endif %}
321
+ </h2>
322
+ {% endif %}
323
+ {% if group.groupItems %}
324
+ <ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
325
+ {% for groupItem in group.groupItems %}
326
+ {% if groupItem.text %}
327
+ <li class="ons-u-mb-no">
328
+ <p class="ons-u-fs-s ons-header-nav-menu_text">
329
+ {% if groupItem.url %}
330
+ <a href="{{ groupItem.url }}" class="ons-header-nav-menu__link">
331
+ {{ groupItem.text }}
332
+ </a>
333
+ {% else %}
334
+ {{ groupItem.text }}
335
+ {% endif %}
336
+ </p>
337
+ </li>
338
+ {% endif %}
339
+ {% endfor %}
340
+ </ul>
341
+ {% endif %}
342
+ {% endfor %}
343
+ </li>
344
+ {% endfor %}
345
+ </ul>
346
+ </div>
347
+ {% endif %}
348
+ </nav>
349
+ {% endif %}
350
+ {% if params.variants == "basic" and (params.searchLinks or params.search) %}
351
+ <nav
352
+ class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes if params.searchLinks and params.searchLinks.classes else '' }}{{ params.search.classes if params.search and params.search.classes else '' }}"
353
+ id="{{ params.search.id if params.search else params.searchLinks.id }}"
354
+ aria-label="{{ (params.search.navAriaLabel if params.search else params.searchLinks.searchNavigationAriaLabel) | default('Search navigation') }}"
355
+ aria-hidden="false"
356
+ >
357
+ <div class="ons-container">
358
+ <form class="ons-header-nav-search__input" method="get" action="{{ params.search.form.action | default('') }}">
359
+ {% from "components/input/_macro.njk" import onsInput %}
360
+ {{
361
+ onsInput({
362
+ "id": 'search-field',
363
+ "name": params.search.form.inputName | default('q'),
364
+ "width": 'full',
365
+ "label": {
366
+ "text": (params.search.form.inputLabel if params.search.form else params.searchLinks.searchNavigationInputLabel) | default('Search the ONS'),
367
+ "id": "header-search-input-label"
368
+ },
369
+ "searchButton": {
370
+ "visuallyHideButtonText": true,
371
+ "text": (params.search.form.buttonText if params.search.form else params.searchLinks.searchNavigationButtonText) | default('Search'),
372
+ "iconType": 'search',
373
+ 'variant': 'header'
374
+ }
375
+ })
376
+ }}
377
+ </form>
378
+ </div>
379
+ {% if params.search or params.searchLinks %}
380
+ <div class="ons-container">
381
+ <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
382
+ {{ params.search.links.heading if params.search.links else params.searchLinks.heading }}
383
+ </h2>
384
+ <ul class="ons-list ons-list--bare ons-list--inline">
385
+ {% if params.searchLinks %}
386
+ {% for item in params.searchLinks.itemsList %}
387
+ {# Limiting the popular searches to 5 #}
388
+ {% if loop.index <= 5 %}
389
+ <li class="ons-list__item">
390
+ {% if item.text %}
391
+ {% if item.url %}
392
+ <a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
393
+ >{{ item.text }}
394
+ </a>
395
+ {% else %}
396
+ <p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
397
+ {% endif %}
398
+ {% endif %}
399
+ </li>
400
+ {% endif %}
401
+ {% endfor %}
402
+ {% endif %}
403
+ {% if params.search.links %}
404
+ {% for item in params.search.links.itemsList %}
405
+ {# Limiting the popular searches to 5 #}
406
+ {% if loop.index <= 5 %}
407
+ <li class="ons-list__item">
408
+ {% if item.text %}
409
+ {% if item.url %}
410
+ <a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
411
+ >{{ item.text }}
412
+ </a>
413
+ {% else %}
414
+ <p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
415
+ {% endif %}
416
+ {% endif %}
417
+ </li>
418
+ {% endif %}
419
+ {% endfor %}
420
+ {% endif %}
421
+ </ul>
422
+ </div>
423
+ {% endif %}
424
+ </nav>
425
+ {% endif %}
416
426
  {% if params.variants != "basic" %}
417
427
  <div class="ons-header__main">
418
428
  <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
@@ -482,13 +492,13 @@
482
492
  <span class="ons-grid ons-u-ml-no ons-u-d-no@2xs@xs">
483
493
  {{
484
494
  onsButton({
485
- "text": params.searchLinks.searchNavigationButtonText | default('Search'),
495
+ "text": (params.search.form.buttonText if params.search.form.buttonText else searchLinks.searchNavigationButtonText) | default('Search'),
486
496
  "classes": "ons-btn--search ons-u-ml-2xs ons-u-d-no ons-js-toggle-search",
487
497
  "variants": ["small", "ghost"],
488
498
  "iconType": "search",
489
499
  "iconPosition": "only",
490
500
  "attributes": {
491
- "aria-label": params.searchLinks.searchNavigationButtonAriaLabel | default('Toggle search'),
501
+ "aria-label":(params.search.navButtonAriaLabel if params.search.navButtonAriaLabel else params.searchLinks.searchNavigationButtonAriaLabel) | default('Toggle search'),
492
502
  "aria-controls": "ons-site-search",
493
503
  "aria-expanded": "false"
494
504
  }
package/components/header/_macro.spec.js CHANGED
@@ -18,6 +18,7 @@ import {
18
18
  EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
19
19
  EXAMPLE_HEADER_MENU_LINKS,
20
20
  EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS,
21
+ EXAMPLE_HEADER_SEARCH,
21
22
  } from './_test-examples';
22
23
 
23
24
  describe('FOR: Macro: Header', () => {
@@ -812,6 +813,228 @@ describe('FOR: Macro: Header', () => {
812
813
  });
813
814
  });
814
815
  });
816
+
817
+ describe('GIVEN: Params: search', () => {
818
+ describe('WHEN: search is provided', () => {
819
+ const faker = templateFaker();
820
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
821
+ faker.renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' });
822
+
823
+ test('THEN: renders search icon button', () => {
824
+ expect(buttonSpy.occurrences[0]).toEqual({
825
+ iconType: 'search',
826
+ classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-btn--close ons-btn--search-icon active disabled',
827
+ type: 'button',
828
+ variants: 'search',
829
+ attributes: {
830
+ 'aria-controls': 'search-id',
831
+ 'aria-expanded': 'true',
832
+ 'aria-label': 'Custom search button aria label',
833
+ 'aria-disabled': 'true',
834
+ },
835
+ });
836
+ });
837
+ });
838
+
839
+ describe('WHEN: links are provided in search', () => {
840
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
841
+
842
+ test('THEN: renders items list', () => {
843
+ const itemsList = $('.ons-list--bare .ons-list__item').length;
844
+ expect(itemsList).toBeGreaterThan(0);
845
+ });
846
+
847
+ test('THEN: renders correct links for items list', () => {
848
+ const searchItemsLinks = mapAll($('.ons-list--bare .ons-list__item a'), (node) => node.attr('href'));
849
+ expect(searchItemsLinks).toEqual(['#1', '#2', '#3']);
850
+ });
851
+
852
+ test('THEN: renders correct text for items list', () => {
853
+ const searchItemsText = mapAll($('.ons-list--bare .ons-list__item a'), (node) => node.text().trim());
854
+ expect(searchItemsText).toEqual(['Popular Search 1', 'Popular Search 2', 'Popular Search 3']);
855
+ });
856
+ });
857
+
858
+ describe('WHEN: search parameter is missing', () => {
859
+ const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_BASIC));
860
+
861
+ test('THEN: does not render search icon button', () => {
862
+ expect($('.ons-js-toggle-services').length).toBe(0);
863
+ });
864
+
865
+ test('THEN: does not render search input form', () => {
866
+ expect($('.ons-header-nav-search').length).toBe(0);
867
+ });
868
+
869
+ test('THEN: does not render items list', () => {
870
+ expect($('.ons-list--bare').length).toBe(0);
871
+ });
872
+ });
873
+
874
+ describe('WHEN: search is provided and the header variant is not basic', () => {
875
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'neutral' }));
876
+
877
+ test('THEN: does not render the search icon button', () => {
878
+ expect($('.ons-js-toggle-services').length).toBe(0);
879
+ });
880
+ });
881
+
882
+ describe('WHEN: heading parameter is provided', () => {
883
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
884
+
885
+ test('THEN: it renders heading with provided text', () => {
886
+ expect($('.ons-header-nav-search__heading').text().trim()).toBe('Header Search');
887
+ });
888
+ });
889
+
890
+ describe('WHEN: id parameter is provided', () => {
891
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
892
+
893
+ test('THEN: applies id to search links ', () => {
894
+ expect($('#search-id').length).toBe(1);
895
+ });
896
+ });
897
+
898
+ describe('WHEN: ariaLabel parameter is provided', () => {
899
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
900
+
901
+ test('THEN: applies aria label to the search links', () => {
902
+ expect($('.ons-header-nav-search').attr('aria-label')).toBe('Header Search');
903
+ });
904
+ });
905
+
906
+ describe('WHEN: classes parameter is provided', () => {
907
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
908
+
909
+ test('THEN: it renders classes with provided value', () => {
910
+ expect($('.ons-header-nav-search').hasClass('custom-class')).toBe(true);
911
+ });
912
+ });
913
+
914
+ describe('WHEN: using basic header variant and search is active & disabled by default before JS loads', () => {
915
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
916
+ const $searchBtn = $('.ons-js-toggle-header-search');
917
+
918
+ test('THEN: adds the "active" class to the search toggle button', () => {
919
+ expect($searchBtn.hasClass('active')).toBe(true);
920
+ });
921
+
922
+ test('THEN: adds the "disabled" class to the search toggle button', () => {
923
+ expect($searchBtn.hasClass('disabled')).toBe(true);
924
+ });
925
+
926
+ test('THEN: sets aria-disabled="true" on the search toggle button', () => {
927
+ expect($searchBtn.attr('aria-disabled')).toBe('true');
928
+ });
929
+ });
930
+
931
+ describe('WHEN: search is provided with all custom properties', () => {
932
+ const faker = templateFaker();
933
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
934
+ faker.renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' });
935
+ test('THEN: renders search icon button with custom aria-label', () => {
936
+ expect(buttonSpy.occurrences[0]).toBeDefined();
937
+ expect(buttonSpy.occurrences[0].attributes['aria-label']).toBe('Custom search button aria label');
938
+ });
939
+ });
940
+
941
+ describe('WHEN: toggleAriaLabel is not provided', () => {
942
+ const faker = templateFaker();
943
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
944
+ faker.renderComponent('header', {
945
+ ...EXAMPLE_HEADER_SEARCH,
946
+ search: {
947
+ ...EXAMPLE_HEADER_SEARCH.links,
948
+ toggleAriaLabel: undefined,
949
+ },
950
+ variants: 'basic',
951
+ });
952
+ test('THEN: renders search icon button with default aria-label', () => {
953
+ expect(buttonSpy.occurrences[0]).toBeDefined();
954
+ expect(buttonSpy.occurrences[0].attributes['aria-label']).toBe('Toggle search');
955
+ });
956
+ });
957
+ describe('WHEN: navButtonAriaLabel is provided', () => {
958
+ const faker = templateFaker();
959
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
960
+ faker.renderComponent('header', {
961
+ ...EXAMPLE_HEADER_SEARCH,
962
+ siteSearchAutosuggest: {},
963
+ });
964
+ test('THEN: renders search navigation button with custom aria-label', () => {
965
+ const found = buttonSpy.occurrences.find(
966
+ (btn) => btn.attributes && btn.attributes['aria-label'] === 'Custom search nav button aria label',
967
+ );
968
+ expect(found).toBeDefined();
969
+ });
970
+ });
971
+ describe('WHEN: navButtonAriaLabel is not provided', () => {
972
+ const faker = templateFaker();
973
+ const buttonSpy = faker.spy('button', { suppressOutput: true });
974
+ faker.renderComponent('header', {
975
+ ...EXAMPLE_HEADER_SEARCH,
976
+ search: {
977
+ ...EXAMPLE_HEADER_SEARCH.search,
978
+ navButtonAriaLabel: undefined,
979
+ },
980
+ siteSearchAutosuggest: {},
981
+ });
982
+ test('THEN: renders search navigation button with default aria-label', () => {
983
+ const found = buttonSpy.occurrences.find((btn) => btn.attributes && btn.attributes['aria-label'] === 'Toggle search');
984
+ expect(found).toBeDefined();
985
+ });
986
+ });
987
+
988
+ describe('WHEN: inputLabel is provided', () => {
989
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
990
+ test('THEN: renders search input with custom label', () => {
991
+ expect($('#header-search-input-label').text().trim()).toBe('Custom search input label');
992
+ });
993
+ });
994
+ describe('WHEN: inputLabel is not provided', () => {
995
+ const $ = cheerio.load(
996
+ renderComponent('header', {
997
+ ...EXAMPLE_HEADER_SEARCH,
998
+ search: {
999
+ ...EXAMPLE_HEADER_SEARCH.search,
1000
+ form: { inputLabel: undefined },
1001
+ },
1002
+ variants: 'basic',
1003
+ }),
1004
+ );
1005
+ test('THEN: renders search input with default label', () => {
1006
+ expect($('#header-search-input-label').text().trim()).toBe('Search the ONS');
1007
+ });
1008
+ });
1009
+ describe('WHEN: buttonText is provided', () => {
1010
+ const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
1011
+
1012
+ test('THEN: renders the visually hidden search navigation button text', () => {
1013
+ const $button = $('.ons-search__btn.ons-btn--header-search');
1014
+ const hiddenText = $button.find('.ons-u-vh').text().trim();
1015
+ expect(hiddenText).toBe(EXAMPLE_HEADER_SEARCH.search.form.buttonText);
1016
+ });
1017
+ });
1018
+ describe('WHEN: buttonText is not provided', () => {
1019
+ const $ = cheerio.load(
1020
+ renderComponent('header', {
1021
+ ...EXAMPLE_HEADER_SEARCH,
1022
+ search: {
1023
+ ...EXAMPLE_HEADER_SEARCH.search,
1024
+ form: { buttonText: undefined },
1025
+ },
1026
+ variants: 'basic',
1027
+ }),
1028
+ );
1029
+
1030
+ test('THEN: renders the default fallback search navigation button text', () => {
1031
+ const $button = $('.ons-search__btn.ons-btn--header-search');
1032
+ const hiddenText = $button.find('.ons-u-vh').text().trim();
1033
+ expect(hiddenText).toBe('Search');
1034
+ });
1035
+ });
1036
+ });
1037
+
815
1038
  describe('GIVEN: Params: searchLinks', () => {
816
1039
  describe('WHEN: searchLinks are provided', () => {
817
1040
  const faker = templateFaker();