@ons/design-system 73.2.0 → 73.4.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.
- package/components/button/_button.scss +3 -6
- package/components/chart/annotations-options.js +15 -3
- package/components/chart/chart.js +27 -2
- package/components/chart/common-chart-options.js +10 -0
- package/components/chart/range-annotations-options.js +19 -3
- package/components/chart/reference-line-annotations-options.js +19 -0
- package/components/description-list/_description-list.scss +26 -0
- package/components/header/_header.scss +47 -4
- package/components/header/_macro.njk +168 -185
- package/components/header/_macro.spec.js +116 -14
- package/components/header/example-header-basic-with-search-no-heading.njk +22 -0
- package/components/header/header.spec.js +18 -1
- package/components/hero/example-hero-grey-with-last-updated.njk +27 -0
- package/components/navigation/navigation.js +20 -2
- package/components/navigation/navigation.spec.js +22 -0
- package/components/phase-banner/_macro.njk +10 -1
- package/components/phase-banner/_macro.spec.js +27 -0
- package/components/phase-banner/example-phase-banner-beta-with-feedback-link.njk +18 -0
- package/components/phase-banner/example-phase-banner-beta-without-feedback-link.njk +7 -0
- package/components/question/_question.scss +1 -0
- package/components/table/_macro.njk +6 -3
- package/components/table/_macro.spec.js +58 -0
- package/components/table/_table.scss +9 -1
- package/components/table/example-table-with-valign-property.njk +142 -0
- package/css/main.css +1 -1
- package/layout/_template.njk +1 -1
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +2 -2
- package/scss/utilities/_highlight.scss +6 -2
- package/scss/utilities/_typography.scss +4 -0
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
{{
|
|
111
111
|
onsButton({
|
|
112
112
|
"text": params.menuLinks.toggleMenuButton.text | default("Menu"),
|
|
113
|
-
"classes": "ons-u-fs-
|
|
113
|
+
"classes": "ons-u-fs-r--b ons-js-toggle-nav-menu ons-u-db-no-js_disabled button-nav disabled",
|
|
114
114
|
"type": "button",
|
|
115
115
|
"variants": "menu",
|
|
116
116
|
"iconType": "chevron",
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
"attributes": {
|
|
119
119
|
"aria-label": params.menuLinks.toggleMenuButton.ariaLabel | default("Toggle menu"),
|
|
120
120
|
"aria-controls": params.menuLinks.id,
|
|
121
|
-
"aria-expanded": "
|
|
121
|
+
"aria-expanded": "false",
|
|
122
122
|
"aria-disabled": "true"
|
|
123
123
|
}
|
|
124
124
|
})
|
|
@@ -126,206 +126,35 @@
|
|
|
126
126
|
</div>
|
|
127
127
|
{% endif %}
|
|
128
128
|
|
|
129
|
-
{% if params.language %}
|
|
130
|
-
<div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@2xs@xs' if params.serviceLinks }}">
|
|
131
|
-
<div class="ons-header__language">
|
|
132
|
-
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
|
|
133
|
-
{{ onsLanguageSelector(params.language) }}
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
{% endif %}
|
|
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
129
|
{% if params.search or params.searchLinks %}
|
|
220
|
-
<div class="ons-header__links ons-grid__col ons-header__menu-
|
|
130
|
+
<div class="ons-header__links ons-grid__col ons-header__menu-links">
|
|
221
131
|
{{
|
|
222
132
|
onsButton({
|
|
223
|
-
"classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-
|
|
133
|
+
"classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-u-db-no-js_disabled ons-btn--search-icon disabled",
|
|
224
134
|
"type": "button",
|
|
225
135
|
"variants": "search",
|
|
226
136
|
"iconType": "search",
|
|
227
137
|
"attributes": {
|
|
228
138
|
"aria-label": (params.search.toggleAriaLabel if params.search.toggleAriaLabel else params.searchLinks.searchButtonAriaLabel) | default("Toggle search"),
|
|
229
139
|
"aria-controls": params.search.id if params.search.id else params.searchLinks.id,
|
|
230
|
-
"aria-expanded": "
|
|
140
|
+
"aria-expanded": "false",
|
|
231
141
|
"aria-disabled": "true"
|
|
232
142
|
}
|
|
233
143
|
})
|
|
234
144
|
}}
|
|
235
145
|
</div>
|
|
236
146
|
{% endif %}
|
|
237
|
-
|
|
238
|
-
{% if params.variants == "basic" and (params.searchLinks or params.search) %}
|
|
239
|
-
<nav
|
|
240
|
-
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 '' }}"
|
|
241
|
-
id="{{ params.search.id if params.search else params.searchLinks.id }}"
|
|
242
|
-
aria-label="{{ (params.search.navAriaLabel if params.search else params.searchLinks.searchNavigationAriaLabel) | default('Search navigation') }}"
|
|
243
|
-
aria-hidden="false"
|
|
244
|
-
>
|
|
245
|
-
<div class="ons-container">
|
|
246
|
-
<form
|
|
247
|
-
class="ons-header-nav-search__input"
|
|
248
|
-
method="get"
|
|
249
|
-
action="{{ params.search.form.action | default('') }}"
|
|
250
|
-
>
|
|
251
|
-
{% from "components/input/_macro.njk" import onsInput %}
|
|
252
|
-
{{
|
|
253
|
-
onsInput({
|
|
254
|
-
"id": 'search-field',
|
|
255
|
-
"name": params.search.form.inputName | default('q'),
|
|
256
|
-
"width": 'full',
|
|
257
|
-
"label": {
|
|
258
|
-
"text": (params.search.form.inputLabel if params.search.form else params.searchLinks.searchNavigationInputLabel) | default('Search the ONS'),
|
|
259
|
-
"id": "header-search-input-label"
|
|
260
|
-
},
|
|
261
|
-
"searchButton": {
|
|
262
|
-
"visuallyHideButtonText": true,
|
|
263
|
-
"text": (params.search.form.buttonText if params.search.form else params.searchLinks.searchNavigationButtonText) | default('Search'),
|
|
264
|
-
"iconType": 'search',
|
|
265
|
-
'variant': 'header'
|
|
266
|
-
}
|
|
267
|
-
})
|
|
268
|
-
}}
|
|
269
|
-
</form>
|
|
270
|
-
</div>
|
|
271
|
-
{% if params.search or params.searchLinks %}
|
|
272
|
-
<div class="ons-container">
|
|
273
|
-
<h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
|
|
274
|
-
{{ params.search.links.heading if params.search.links else params.searchLinks.heading }}
|
|
275
|
-
</h2>
|
|
276
|
-
<ul class="ons-list ons-list--bare ons-list--inline">
|
|
277
|
-
{% if params.searchLinks %}
|
|
278
|
-
{% for item in params.searchLinks.itemsList %}
|
|
279
|
-
{# Limiting the popular searches to 5 #}
|
|
280
|
-
{% if loop.index <= 5 %}
|
|
281
|
-
<li class="ons-list__item">
|
|
282
|
-
{% if item.text %}
|
|
283
|
-
{% if item.url %}
|
|
284
|
-
<a
|
|
285
|
-
href="{{ item.url }}"
|
|
286
|
-
class="ons-u-fs-r ons-header-nav-search__text"
|
|
287
|
-
>{{ item.text }}
|
|
288
|
-
</a>
|
|
289
|
-
{% else %}
|
|
290
|
-
<p class="ons-u-fs-r ons-header-nav-search__text">
|
|
291
|
-
{{ item.text }}
|
|
292
|
-
</p>
|
|
293
|
-
{% endif %}
|
|
294
|
-
{% endif %}
|
|
295
|
-
</li>
|
|
296
|
-
{% endif %}
|
|
297
|
-
{% endfor %}
|
|
298
|
-
{% endif %}
|
|
299
|
-
{% if params.search.links %}
|
|
300
|
-
{% for item in params.search.links.itemsList %}
|
|
301
|
-
{# Limiting the popular searches to 5 #}
|
|
302
|
-
{% if loop.index <= 5 %}
|
|
303
|
-
<li class="ons-list__item">
|
|
304
|
-
{% if item.text %}
|
|
305
|
-
{% if item.url %}
|
|
306
|
-
<a
|
|
307
|
-
href="{{ item.url }}"
|
|
308
|
-
class="ons-u-fs-r ons-header-nav-search__text"
|
|
309
|
-
>{{ item.text }}
|
|
310
|
-
</a>
|
|
311
|
-
{% else %}
|
|
312
|
-
<p class="ons-u-fs-r ons-header-nav-search__text">
|
|
313
|
-
{{ item.text }}
|
|
314
|
-
</p>
|
|
315
|
-
{% endif %}
|
|
316
|
-
{% endif %}
|
|
317
|
-
</li>
|
|
318
|
-
{% endif %}
|
|
319
|
-
{% endfor %}
|
|
320
|
-
{% endif %}
|
|
321
|
-
</ul>
|
|
322
|
-
</div>
|
|
323
|
-
{% endif %}
|
|
324
|
-
</nav>
|
|
325
|
-
{% endif %}
|
|
326
147
|
</div>
|
|
148
|
+
{% if params.language %}
|
|
149
|
+
<div class="ons-header__links ons-grid__col ons-col-auto ons-header__links--language-section ons-u-d-no@2xs@m">
|
|
150
|
+
<div class="ons-header__language ons-u-fs-r--b">
|
|
151
|
+
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
|
|
152
|
+
{{ onsLanguageSelector(params.language) }}
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
{% endif %}
|
|
327
156
|
{% endif %}
|
|
328
|
-
{% if params.language or params.serviceLinks %}
|
|
157
|
+
{% if params.variants!== 'basic' and (params.language or params.serviceLinks) %}
|
|
329
158
|
<div
|
|
330
159
|
class="ons-header__links ons-grid__col{{ ' ons-u-ml-auto' if not (params.searchLinks or params.search) and not params.menuLinks }}"
|
|
331
160
|
>
|
|
@@ -446,6 +275,160 @@
|
|
|
446
275
|
</nav>
|
|
447
276
|
{% endif %}
|
|
448
277
|
</div>
|
|
278
|
+
{% if params.variants == "basic" and params.menuLinks %}
|
|
279
|
+
<nav
|
|
280
|
+
class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl"
|
|
281
|
+
id="{{ params.menuLinks.id }}"
|
|
282
|
+
aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
|
|
283
|
+
>
|
|
284
|
+
{% if params.language %}
|
|
285
|
+
<div class="ons-container ons-u-d-no@m ons-u-d-no@2xl">
|
|
286
|
+
<div class="ons-header-nav-menu__language ons-u-fs-s--b">
|
|
287
|
+
{% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
|
|
288
|
+
{{ onsLanguageSelector(params.language) }}
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
291
|
+
{% endif %}
|
|
292
|
+
{% if params.menuLinks.keyLinks %}
|
|
293
|
+
<div class="ons-container">
|
|
294
|
+
<ul class="ons-grid ons-header-nav-menu__key-list">
|
|
295
|
+
{% for keyLink in params.menuLinks.keyLinks %}
|
|
296
|
+
{% if keyLink.heading %}
|
|
297
|
+
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
|
|
298
|
+
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
|
|
299
|
+
{% if keyLink.url %}
|
|
300
|
+
<a href="{{ keyLink.url }}" class="ons-header-nav-menu__link">{{ keyLink.heading }}</a>
|
|
301
|
+
{% else %}
|
|
302
|
+
{{ keyLink.heading }}
|
|
303
|
+
{% endif %}
|
|
304
|
+
</h2>
|
|
305
|
+
{% if keyLink.description %}
|
|
306
|
+
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">{{ keyLink.description }}</p>
|
|
307
|
+
{% endif %}
|
|
308
|
+
</li>
|
|
309
|
+
{% endif %}
|
|
310
|
+
{% endfor %}
|
|
311
|
+
</ul>
|
|
312
|
+
</div>
|
|
313
|
+
{% endif %}
|
|
314
|
+
{% if params.menuLinks.columns %}
|
|
315
|
+
<div class="ons-container">
|
|
316
|
+
<ul class="ons-grid ons-list ons-list--bare">
|
|
317
|
+
{% for column in params.menuLinks.columns %}
|
|
318
|
+
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
|
|
319
|
+
{% for group in column.groups %}
|
|
320
|
+
{% if group.heading %}
|
|
321
|
+
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
|
|
322
|
+
{% if group.url %}
|
|
323
|
+
<a href="{{ group.url }}" class="ons-header-nav-menu__link">{{ group.heading }}</a>
|
|
324
|
+
{% else %}
|
|
325
|
+
{{ group.heading }}
|
|
326
|
+
{% endif %}
|
|
327
|
+
</h2>
|
|
328
|
+
{% endif %}
|
|
329
|
+
{% if group.groupItems %}
|
|
330
|
+
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
|
|
331
|
+
{% for groupItem in group.groupItems %}
|
|
332
|
+
{% if groupItem.text %}
|
|
333
|
+
<li class="ons-u-mb-no">
|
|
334
|
+
<p class="ons-u-fs-s ons-header-nav-menu_text">
|
|
335
|
+
{% if groupItem.url %}
|
|
336
|
+
<a href="{{ groupItem.url }}" class="ons-header-nav-menu__link">
|
|
337
|
+
{{ groupItem.text }}
|
|
338
|
+
</a>
|
|
339
|
+
{% else %}
|
|
340
|
+
{{ groupItem.text }}
|
|
341
|
+
{% endif %}
|
|
342
|
+
</p>
|
|
343
|
+
</li>
|
|
344
|
+
{% endif %}
|
|
345
|
+
{% endfor %}
|
|
346
|
+
</ul>
|
|
347
|
+
{% endif %}
|
|
348
|
+
{% endfor %}
|
|
349
|
+
</li>
|
|
350
|
+
{% endfor %}
|
|
351
|
+
</ul>
|
|
352
|
+
</div>
|
|
353
|
+
{% endif %}
|
|
354
|
+
</nav>
|
|
355
|
+
{% endif %}
|
|
356
|
+
{% if params.variants == "basic" and (params.searchLinks or params.search) %}
|
|
357
|
+
<nav
|
|
358
|
+
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 '' }}"
|
|
359
|
+
id="{{ params.search.id if params.search else params.searchLinks.id }}"
|
|
360
|
+
aria-label="{{ (params.search.navAriaLabel if params.search else params.searchLinks.searchNavigationAriaLabel) | default('Search navigation') }}"
|
|
361
|
+
>
|
|
362
|
+
<div class="ons-container">
|
|
363
|
+
<form class="ons-header-nav-search__input" method="get" action="{{ params.search.form.action | default('') }}">
|
|
364
|
+
{% from "components/input/_macro.njk" import onsInput %}
|
|
365
|
+
{{
|
|
366
|
+
onsInput({
|
|
367
|
+
"id": 'search-field',
|
|
368
|
+
"name": params.search.form.inputName | default('q'),
|
|
369
|
+
"width": 'full',
|
|
370
|
+
"label": {
|
|
371
|
+
"text": (params.search.form.inputLabel if params.search.form else params.searchLinks.searchNavigationInputLabel) | default('Search the ONS'),
|
|
372
|
+
"id": "header-search-input-label"
|
|
373
|
+
},
|
|
374
|
+
"searchButton": {
|
|
375
|
+
"visuallyHideButtonText": true,
|
|
376
|
+
"text": (params.search.form.buttonText if params.search.form else params.searchLinks.searchNavigationButtonText) | default('Search'),
|
|
377
|
+
"iconType": 'search',
|
|
378
|
+
'variant': 'header'
|
|
379
|
+
}
|
|
380
|
+
})
|
|
381
|
+
}}
|
|
382
|
+
</form>
|
|
383
|
+
</div>
|
|
384
|
+
{% if params.search or params.searchLinks %}
|
|
385
|
+
<div class="ons-container">
|
|
386
|
+
{% set searchHeading = params.search.links.heading if params.search.links else params.searchLinks.heading %}
|
|
387
|
+
{% if searchHeading %}
|
|
388
|
+
<h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">{{ searchHeading }}</h2>
|
|
389
|
+
{% endif %}
|
|
390
|
+
<ul class="ons-list ons-list--bare ons-list--inline">
|
|
391
|
+
{% if params.searchLinks %}
|
|
392
|
+
{% for item in params.searchLinks.itemsList %}
|
|
393
|
+
{# Limiting the popular searches to 5 #}
|
|
394
|
+
{% if loop.index <= 5 %}
|
|
395
|
+
<li class="ons-list__item">
|
|
396
|
+
{% if item.text %}
|
|
397
|
+
{% if item.url %}
|
|
398
|
+
<a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
|
|
399
|
+
>{{ item.text }}
|
|
400
|
+
</a>
|
|
401
|
+
{% else %}
|
|
402
|
+
<p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
|
|
403
|
+
{% endif %}
|
|
404
|
+
{% endif %}
|
|
405
|
+
</li>
|
|
406
|
+
{% endif %}
|
|
407
|
+
{% endfor %}
|
|
408
|
+
{% endif %}
|
|
409
|
+
{% if params.search.links %}
|
|
410
|
+
{% for item in params.search.links.itemsList %}
|
|
411
|
+
{# Limiting the popular searches to 5 #}
|
|
412
|
+
{% if loop.index <= 5 %}
|
|
413
|
+
<li class="ons-list__item">
|
|
414
|
+
{% if item.text %}
|
|
415
|
+
{% if item.url %}
|
|
416
|
+
<a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
|
|
417
|
+
>{{ item.text }}
|
|
418
|
+
</a>
|
|
419
|
+
{% else %}
|
|
420
|
+
<p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
|
|
421
|
+
{% endif %}
|
|
422
|
+
{% endif %}
|
|
423
|
+
</li>
|
|
424
|
+
{% endif %}
|
|
425
|
+
{% endfor %}
|
|
426
|
+
{% endif %}
|
|
427
|
+
</ul>
|
|
428
|
+
</div>
|
|
429
|
+
{% endif %}
|
|
430
|
+
</nav>
|
|
431
|
+
{% endif %}
|
|
449
432
|
{% if params.variants != "basic" %}
|
|
450
433
|
<div class="ons-header__main">
|
|
451
434
|
<div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
|
|
@@ -35,6 +35,100 @@ describe('FOR: Macro: Header', () => {
|
|
|
35
35
|
});
|
|
36
36
|
});
|
|
37
37
|
});
|
|
38
|
+
|
|
39
|
+
describe('Accessibility: search heading', () => {
|
|
40
|
+
test('THEN: axe passes when search heading is present (params.search.links.heading)', async () => {
|
|
41
|
+
const params = {
|
|
42
|
+
...EXAMPLE_HEADER_BASIC,
|
|
43
|
+
variants: 'basic',
|
|
44
|
+
search: {
|
|
45
|
+
links: {
|
|
46
|
+
heading: 'Popular searches',
|
|
47
|
+
itemsList: [{ text: 'Census', url: '/census' }],
|
|
48
|
+
},
|
|
49
|
+
form: { action: '/search' },
|
|
50
|
+
},
|
|
51
|
+
searchLinks: undefined,
|
|
52
|
+
};
|
|
53
|
+
const $ = cheerio.load(renderComponent('header', params));
|
|
54
|
+
const results = await axe($.html());
|
|
55
|
+
expect(results).toHaveNoViolations();
|
|
56
|
+
expect($('.ons-header-nav-search__heading').text()).toBe('Popular searches');
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
test('THEN: axe passes when search heading is present (params.searchLinks.heading)', async () => {
|
|
60
|
+
const params = {
|
|
61
|
+
...EXAMPLE_HEADER_BASIC,
|
|
62
|
+
variants: 'basic',
|
|
63
|
+
search: undefined,
|
|
64
|
+
searchLinks: {
|
|
65
|
+
heading: 'Other searches',
|
|
66
|
+
itemsList: [{ text: 'Population', url: '/population' }],
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
const $ = cheerio.load(renderComponent('header', params));
|
|
70
|
+
const results = await axe($.html());
|
|
71
|
+
expect(results).toHaveNoViolations();
|
|
72
|
+
expect($('.ons-header-nav-search__heading').text()).toBe('Other searches');
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
test('THEN: axe passes and no h2 is rendered when no heading present', async () => {
|
|
76
|
+
const params = {
|
|
77
|
+
...EXAMPLE_HEADER_BASIC,
|
|
78
|
+
variants: 'basic',
|
|
79
|
+
search: { links: { itemsList: [] }, form: { action: '/search' } },
|
|
80
|
+
searchLinks: undefined,
|
|
81
|
+
};
|
|
82
|
+
const $ = cheerio.load(renderComponent('header', params));
|
|
83
|
+
const results = await axe($.html());
|
|
84
|
+
expect(results).toHaveNoViolations();
|
|
85
|
+
expect($('.ons-header-nav-search__heading').length).toBe(0);
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
describe('Snapshot: search heading', () => {
|
|
90
|
+
test('matches snapshot when search heading is present (params.search.links.heading)', () => {
|
|
91
|
+
const params = {
|
|
92
|
+
...EXAMPLE_HEADER_BASIC,
|
|
93
|
+
variants: 'basic',
|
|
94
|
+
search: {
|
|
95
|
+
links: {
|
|
96
|
+
heading: 'Popular searches',
|
|
97
|
+
itemsList: [{ text: 'Census', url: '/census' }],
|
|
98
|
+
},
|
|
99
|
+
form: { action: '/search' },
|
|
100
|
+
},
|
|
101
|
+
searchLinks: undefined,
|
|
102
|
+
};
|
|
103
|
+
const $ = cheerio.load(renderComponent('header', params));
|
|
104
|
+
expect($.html()).toMatchSnapshot();
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
test('matches snapshot when search heading is present (params.searchLinks.heading)', () => {
|
|
108
|
+
const params = {
|
|
109
|
+
...EXAMPLE_HEADER_BASIC,
|
|
110
|
+
variants: 'basic',
|
|
111
|
+
search: undefined,
|
|
112
|
+
searchLinks: {
|
|
113
|
+
heading: 'Other searches',
|
|
114
|
+
itemsList: [{ text: 'Population', url: '/population' }],
|
|
115
|
+
},
|
|
116
|
+
};
|
|
117
|
+
const $ = cheerio.load(renderComponent('header', params));
|
|
118
|
+
expect($.html()).toMatchSnapshot();
|
|
119
|
+
});
|
|
120
|
+
|
|
121
|
+
test('matches snapshot when no search heading is present', () => {
|
|
122
|
+
const params = {
|
|
123
|
+
...EXAMPLE_HEADER_BASIC,
|
|
124
|
+
variants: 'basic',
|
|
125
|
+
search: { links: { itemsList: [] }, form: { action: '/search' } },
|
|
126
|
+
searchLinks: undefined,
|
|
127
|
+
};
|
|
128
|
+
const $ = cheerio.load(renderComponent('header', params));
|
|
129
|
+
expect($.html()).toMatchSnapshot();
|
|
130
|
+
});
|
|
131
|
+
});
|
|
38
132
|
describe('GIVEN: Params: variants', () => {
|
|
39
133
|
describe('WHEN: variants are provided', () => {
|
|
40
134
|
const $ = cheerio.load(
|
|
@@ -823,12 +917,12 @@ describe('FOR: Macro: Header', () => {
|
|
|
823
917
|
test('THEN: renders search icon button', () => {
|
|
824
918
|
expect(buttonSpy.occurrences[0]).toEqual({
|
|
825
919
|
iconType: 'search',
|
|
826
|
-
classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-
|
|
920
|
+
classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-u-db-no-js_disabled ons-btn--search-icon disabled',
|
|
827
921
|
type: 'button',
|
|
828
922
|
variants: 'search',
|
|
829
923
|
attributes: {
|
|
830
924
|
'aria-controls': 'search-id',
|
|
831
|
-
'aria-expanded': '
|
|
925
|
+
'aria-expanded': 'false',
|
|
832
926
|
'aria-label': 'Custom search button aria label',
|
|
833
927
|
'aria-disabled': 'true',
|
|
834
928
|
},
|
|
@@ -911,12 +1005,12 @@ describe('FOR: Macro: Header', () => {
|
|
|
911
1005
|
});
|
|
912
1006
|
});
|
|
913
1007
|
|
|
914
|
-
describe('WHEN: using basic header variant and search is
|
|
1008
|
+
describe('WHEN: using basic header variant and search is disabled by default before JS loads', () => {
|
|
915
1009
|
const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, variants: 'basic' }));
|
|
916
1010
|
const $searchBtn = $('.ons-js-toggle-header-search');
|
|
917
1011
|
|
|
918
|
-
test('THEN:
|
|
919
|
-
expect($searchBtn.hasClass('active')).toBe(
|
|
1012
|
+
test('THEN: does not add the "active" class to the search toggle button', () => {
|
|
1013
|
+
expect($searchBtn.hasClass('active')).toBe(false);
|
|
920
1014
|
});
|
|
921
1015
|
|
|
922
1016
|
test('THEN: adds the "disabled" class to the search toggle button', () => {
|
|
@@ -926,6 +1020,10 @@ describe('FOR: Macro: Header', () => {
|
|
|
926
1020
|
test('THEN: sets aria-disabled="true" on the search toggle button', () => {
|
|
927
1021
|
expect($searchBtn.attr('aria-disabled')).toBe('true');
|
|
928
1022
|
});
|
|
1023
|
+
|
|
1024
|
+
test('THEN: sets aria-expanded="false" on the search toggle button', () => {
|
|
1025
|
+
expect($searchBtn.attr('aria-expanded')).toBe('false');
|
|
1026
|
+
});
|
|
929
1027
|
});
|
|
930
1028
|
|
|
931
1029
|
describe('WHEN: search is provided with all custom properties', () => {
|
|
@@ -1044,12 +1142,12 @@ describe('FOR: Macro: Header', () => {
|
|
|
1044
1142
|
test('THEN: renders search icon button', () => {
|
|
1045
1143
|
expect(buttonSpy.occurrences[0]).toEqual({
|
|
1046
1144
|
iconType: 'search',
|
|
1047
|
-
classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-
|
|
1145
|
+
classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-u-db-no-js_disabled ons-btn--search-icon disabled',
|
|
1048
1146
|
type: 'button',
|
|
1049
1147
|
variants: 'search',
|
|
1050
1148
|
attributes: {
|
|
1051
1149
|
'aria-controls': 'search-links-id',
|
|
1052
|
-
'aria-expanded': '
|
|
1150
|
+
'aria-expanded': 'false',
|
|
1053
1151
|
'aria-label': 'Custom search button aria label',
|
|
1054
1152
|
'aria-disabled': 'true',
|
|
1055
1153
|
},
|
|
@@ -1132,12 +1230,12 @@ describe('FOR: Macro: Header', () => {
|
|
|
1132
1230
|
});
|
|
1133
1231
|
});
|
|
1134
1232
|
|
|
1135
|
-
describe('WHEN: using basic header variant and search is
|
|
1233
|
+
describe('WHEN: using basic header variant and search is disabled by default before JS loads', () => {
|
|
1136
1234
|
const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
|
|
1137
1235
|
const $searchBtn = $('.ons-js-toggle-header-search');
|
|
1138
1236
|
|
|
1139
|
-
test('THEN:
|
|
1140
|
-
expect($searchBtn.hasClass('active')).toBe(
|
|
1237
|
+
test('THEN: does not add the "active" class to the search toggle button', () => {
|
|
1238
|
+
expect($searchBtn.hasClass('active')).toBe(false);
|
|
1141
1239
|
});
|
|
1142
1240
|
|
|
1143
1241
|
test('THEN: adds the "disabled" class to the search toggle button', () => {
|
|
@@ -1147,6 +1245,10 @@ describe('FOR: Macro: Header', () => {
|
|
|
1147
1245
|
test('THEN: sets aria-disabled="true" on the search toggle button', () => {
|
|
1148
1246
|
expect($searchBtn.attr('aria-disabled')).toBe('true');
|
|
1149
1247
|
});
|
|
1248
|
+
|
|
1249
|
+
test('THEN: sets aria-expanded="false" on the search toggle button', () => {
|
|
1250
|
+
expect($searchBtn.attr('aria-expanded')).toBe('false');
|
|
1251
|
+
});
|
|
1150
1252
|
});
|
|
1151
1253
|
|
|
1152
1254
|
describe('WHEN: searchLinks are provided with all custom properties', () => {
|
|
@@ -1259,8 +1361,8 @@ describe('FOR: Macro: Header', () => {
|
|
|
1259
1361
|
const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_MENU_LINKS));
|
|
1260
1362
|
const $menuBtn = $('.ons-js-toggle-nav-menu');
|
|
1261
1363
|
|
|
1262
|
-
test('THEN:
|
|
1263
|
-
expect($menuBtn.hasClass('active')).toBe(
|
|
1364
|
+
test('THEN: does not add the "active" class to the menu toggle button', () => {
|
|
1365
|
+
expect($menuBtn.hasClass('active')).toBe(false);
|
|
1264
1366
|
});
|
|
1265
1367
|
|
|
1266
1368
|
test('THEN: adds the "disabled" class to the menu toggle button', () => {
|
|
@@ -1271,8 +1373,8 @@ describe('FOR: Macro: Header', () => {
|
|
|
1271
1373
|
expect($menuBtn.attr('aria-disabled')).toBe('true');
|
|
1272
1374
|
});
|
|
1273
1375
|
|
|
1274
|
-
test('THEN: sets aria-expanded="
|
|
1275
|
-
expect($menuBtn.attr('aria-expanded')).toBe('
|
|
1376
|
+
test('THEN: sets aria-expanded="false" on the menu toggle button', () => {
|
|
1377
|
+
expect($menuBtn.attr('aria-expanded')).toBe('false');
|
|
1276
1378
|
});
|
|
1277
1379
|
|
|
1278
1380
|
test('THEN: sets aria-controls to the correct menu ID', () => {
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
---
|
|
2
|
+
'fullWidth': true
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
{% from "components/header/_macro.njk" import onsHeader %}
|
|
6
|
+
|
|
7
|
+
{{
|
|
8
|
+
onsHeader({
|
|
9
|
+
"variants": 'basic',
|
|
10
|
+
"search": {
|
|
11
|
+
"id": "search",
|
|
12
|
+
"navAriaLabel": 'Nav Search',
|
|
13
|
+
"toggleAriaLabel": 'Toggle search',
|
|
14
|
+
"form": {
|
|
15
|
+
"action": "https://www.ons.gov.uk/search" ,
|
|
16
|
+
"inputName": "q",
|
|
17
|
+
"inputLabel": "Search the ONS",
|
|
18
|
+
"buttonText": "Search"
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
})
|
|
22
|
+
}}
|