@ons/design-system 72.10.3 → 72.10.4
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/card/_card.scss +1 -0
- package/components/card/example-card-set-with-headline-figures.njk +4 -4
- package/components/chart/_macro.njk +34 -34
- package/components/chart/_macro.spec.js +0 -49
- package/components/chart/chart.js +18 -8
- package/components/chart/columnrange-chart.js +3 -0
- package/components/chart/common-chart-options.js +1 -13
- package/components/chart/example-bar-with-confidence-levels.njk +0 -5
- package/components/chart/example-column-with-confidence-levels.njk +1 -4
- package/components/chart/example-scatter-chart.njk +4 -8
- package/components/chart/specific-chart-options.js +32 -9
- package/components/description-list/_description-list.scss +7 -6
- package/components/description-list/_macro.njk +1 -1
- package/components/details-panel/_details-panel.scss +40 -20
- package/components/details-panel/_macro.njk +18 -12
- package/components/details-panel/example-details-panel.njk +1 -0
- package/components/featured-article/_macro.njk +76 -0
- package/components/featured-article/example-featured-article-with-chart.njk +223 -0
- package/components/featured-article/example-featured-article-with-image.njk +24 -0
- package/components/featured-article/featured-article.scss +33 -0
- package/components/featured-article/macro.spec.js +173 -0
- package/components/header/_header.scss +34 -1
- package/components/header/_macro.njk +140 -132
- package/components/hero/_hero.scss +5 -0
- package/components/hero/_macro.njk +8 -4
- package/components/hero/example-hero-grey.njk +2 -17
- package/css/main.css +1 -1
- package/css/print.css +1 -1
- package/js/details.js +39 -0
- package/js/main.js +1 -0
- package/package.json +1 -1
- package/scripts/main.es5.js +1 -1
- package/scripts/main.js +1 -1
- package/scss/main.scss +1 -0
- package/scss/print.scss +6 -1
- package/scss/utilities/_grid.scss +46 -0
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
|
|
16
16
|
<header
|
|
17
17
|
class="ons-header{{ ' '+ params.classes if params.classes }}{% if params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-header--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-header--{{ params.variants }}{% endif %}"
|
|
18
|
-
role="banner"
|
|
19
18
|
>
|
|
20
19
|
{{
|
|
21
20
|
onsBrowserBanner({
|
|
@@ -182,7 +181,7 @@
|
|
|
182
181
|
{% endif %}
|
|
183
182
|
|
|
184
183
|
{% if params.variants == "basic" %}
|
|
185
|
-
<div class="ons-grid__col ons-col-auto">
|
|
184
|
+
<div class="ons-grid__col ons-col-auto ons-header__menu-links">
|
|
186
185
|
{% if params.menuLinks %}
|
|
187
186
|
<div class="ons-header__links ons-grid__col">
|
|
188
187
|
{{
|
|
@@ -204,8 +203,89 @@
|
|
|
204
203
|
</div>
|
|
205
204
|
{% endif %}
|
|
206
205
|
|
|
206
|
+
{% if params.variants == "basic" and params.menuLinks %}
|
|
207
|
+
<nav
|
|
208
|
+
class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl"
|
|
209
|
+
id="{{ params.menuLinks.id }}"
|
|
210
|
+
aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
|
|
211
|
+
aria-hidden="false"
|
|
212
|
+
>
|
|
213
|
+
{% if params.menuLinks.keyLinks %}
|
|
214
|
+
<div class="ons-container">
|
|
215
|
+
<ul class="ons-grid ons-header-nav-menu__key-list">
|
|
216
|
+
{% for keyLink in params.menuLinks.keyLinks %}
|
|
217
|
+
{% if keyLink.heading %}
|
|
218
|
+
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
|
|
219
|
+
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
|
|
220
|
+
{% if keyLink.url %}
|
|
221
|
+
<a href="{{ keyLink.url }}" class="ons-header-nav-menu__link"
|
|
222
|
+
>{{ keyLink.heading }}</a
|
|
223
|
+
>
|
|
224
|
+
{% else %}
|
|
225
|
+
{{ keyLink.heading }}
|
|
226
|
+
{% endif %}
|
|
227
|
+
</h2>
|
|
228
|
+
{% if keyLink.description %}
|
|
229
|
+
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">
|
|
230
|
+
{{ keyLink.description }}
|
|
231
|
+
</p>
|
|
232
|
+
{% endif %}
|
|
233
|
+
</li>
|
|
234
|
+
{% endif %}
|
|
235
|
+
{% endfor %}
|
|
236
|
+
</ul>
|
|
237
|
+
</div>
|
|
238
|
+
{% endif %}
|
|
239
|
+
{% if params.menuLinks.columns %}
|
|
240
|
+
<div class="ons-container">
|
|
241
|
+
<ul class="ons-grid ons-list ons-list--bare">
|
|
242
|
+
{% for column in params.menuLinks.columns %}
|
|
243
|
+
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
|
|
244
|
+
{% for group in column.groups %}
|
|
245
|
+
{% if group.heading %}
|
|
246
|
+
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
|
|
247
|
+
{% if group.url %}
|
|
248
|
+
<a href="{{ group.url }}" class="ons-header-nav-menu__link"
|
|
249
|
+
>{{ group.heading }}</a
|
|
250
|
+
>
|
|
251
|
+
{% else %}
|
|
252
|
+
{{ group.heading }}
|
|
253
|
+
{% endif %}
|
|
254
|
+
</h2>
|
|
255
|
+
{% endif %}
|
|
256
|
+
{% if group.groupItems %}
|
|
257
|
+
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
|
|
258
|
+
{% for groupItem in group.groupItems %}
|
|
259
|
+
{% if groupItem.text %}
|
|
260
|
+
<li class="ons-u-mb-no">
|
|
261
|
+
<p class="ons-u-fs-s ons-header-nav-menu_text">
|
|
262
|
+
{% if groupItem.url %}
|
|
263
|
+
<a
|
|
264
|
+
href="{{ groupItem.url }}"
|
|
265
|
+
class="ons-header-nav-menu__link"
|
|
266
|
+
>
|
|
267
|
+
{{ groupItem.text }}
|
|
268
|
+
</a>
|
|
269
|
+
{% else %}
|
|
270
|
+
{{ groupItem.text }}
|
|
271
|
+
{% endif %}
|
|
272
|
+
</p>
|
|
273
|
+
</li>
|
|
274
|
+
{% endif %}
|
|
275
|
+
{% endfor %}
|
|
276
|
+
</ul>
|
|
277
|
+
{% endif %}
|
|
278
|
+
{% endfor %}
|
|
279
|
+
</li>
|
|
280
|
+
{% endfor %}
|
|
281
|
+
</ul>
|
|
282
|
+
</div>
|
|
283
|
+
{% endif %}
|
|
284
|
+
</nav>
|
|
285
|
+
{% endif %}
|
|
286
|
+
|
|
207
287
|
{% if params.searchLinks %}
|
|
208
|
-
<div class="ons-header__links ons-grid__col">
|
|
288
|
+
<div class="ons-header__links ons-grid__col ons-header__menu-link">
|
|
209
289
|
{{
|
|
210
290
|
onsButton({
|
|
211
291
|
"classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-btn--close ons-btn--search-icon active disabled",
|
|
@@ -222,6 +302,63 @@
|
|
|
222
302
|
}}
|
|
223
303
|
</div>
|
|
224
304
|
{% endif %}
|
|
305
|
+
|
|
306
|
+
{% if params.variants == "basic" and params.searchLinks %}
|
|
307
|
+
<nav
|
|
308
|
+
class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
|
|
309
|
+
id="{{ params.searchLinks.id }}"
|
|
310
|
+
aria-label="{{ params.searchLinks.searchNavigationAriaLabel | default('Search navigation') }}"
|
|
311
|
+
aria-hidden="false"
|
|
312
|
+
>
|
|
313
|
+
<div class="ons-container">
|
|
314
|
+
<div class="ons-header-nav-search__input">
|
|
315
|
+
{% from "components/input/_macro.njk" import onsInput %}
|
|
316
|
+
{{
|
|
317
|
+
onsInput({
|
|
318
|
+
"id": 'search-field',
|
|
319
|
+
"width": 'full',
|
|
320
|
+
"label": {
|
|
321
|
+
"text": 'Search the ONS',
|
|
322
|
+
"id": "header-search-input-label"
|
|
323
|
+
},
|
|
324
|
+
"searchButton": {
|
|
325
|
+
"visuallyHideButtonText": true,
|
|
326
|
+
"text": 'Search',
|
|
327
|
+
"iconType": 'search',
|
|
328
|
+
'variant': 'header'
|
|
329
|
+
|
|
330
|
+
}
|
|
331
|
+
})
|
|
332
|
+
}}
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
{% if params.searchLinks %}
|
|
336
|
+
<div class="ons-container">
|
|
337
|
+
<h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
|
|
338
|
+
{{ params.searchLinks.heading }}
|
|
339
|
+
</h2>
|
|
340
|
+
<ul class="ons-list ons-list--bare ons-list--inline">
|
|
341
|
+
{% for item in params.searchLinks.itemsList %}
|
|
342
|
+
{# Limiting the popular searches to 5 #}
|
|
343
|
+
{% if loop.index <= 5 %}
|
|
344
|
+
<li class="ons-list__item">
|
|
345
|
+
{% if item.text %}
|
|
346
|
+
{% if item.url %}
|
|
347
|
+
<a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
|
|
348
|
+
>{{ item.text }}
|
|
349
|
+
</a>
|
|
350
|
+
{% else %}
|
|
351
|
+
<p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
|
|
352
|
+
{% endif %}
|
|
353
|
+
{% endif %}
|
|
354
|
+
</li>
|
|
355
|
+
{% endif %}
|
|
356
|
+
{% endfor %}
|
|
357
|
+
</ul>
|
|
358
|
+
</div>
|
|
359
|
+
{% endif %}
|
|
360
|
+
</nav>
|
|
361
|
+
{% endif %}
|
|
225
362
|
</div>
|
|
226
363
|
{% endif %}
|
|
227
364
|
</div>
|
|
@@ -261,135 +398,6 @@
|
|
|
261
398
|
{% endif %}
|
|
262
399
|
</nav>
|
|
263
400
|
{% endif %}
|
|
264
|
-
|
|
265
|
-
{% if params.variants == "basic" and params.menuLinks %}
|
|
266
|
-
<nav
|
|
267
|
-
class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl"
|
|
268
|
-
id="{{ params.menuLinks.id }}"
|
|
269
|
-
aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
|
|
270
|
-
aria-hidden="false"
|
|
271
|
-
>
|
|
272
|
-
{% if params.menuLinks.keyLinks %}
|
|
273
|
-
<div class="ons-container">
|
|
274
|
-
<ul class="ons-grid ons-header-nav-menu__key-list">
|
|
275
|
-
{% for keyLink in params.menuLinks.keyLinks %}
|
|
276
|
-
{% if keyLink.heading %}
|
|
277
|
-
<li class="ons-grid__col ons-col-4@m">
|
|
278
|
-
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
|
|
279
|
-
{% if keyLink.url %}
|
|
280
|
-
<a href="{{ keyLink.url }}" class="ons-header-nav-menu__link">{{ keyLink.heading }}</a>
|
|
281
|
-
{% else %}
|
|
282
|
-
{{ keyLink.heading }}
|
|
283
|
-
{% endif %}
|
|
284
|
-
</h2>
|
|
285
|
-
{% if keyLink.description %}
|
|
286
|
-
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">
|
|
287
|
-
{{ keyLink.description }}
|
|
288
|
-
</p>
|
|
289
|
-
{% endif %}
|
|
290
|
-
</li>
|
|
291
|
-
{% endif %}
|
|
292
|
-
{% endfor %}
|
|
293
|
-
</ul>
|
|
294
|
-
</div>
|
|
295
|
-
{% endif %}
|
|
296
|
-
{% if params.menuLinks.columns %}
|
|
297
|
-
<div class="ons-container">
|
|
298
|
-
<ul class="ons-grid ons-list ons-list--bare">
|
|
299
|
-
{% for column in params.menuLinks.columns %}
|
|
300
|
-
<li class="ons-grid__col ons-col-4@m ons-u-mb-no">
|
|
301
|
-
{% for group in column.groups %}
|
|
302
|
-
{% if group.heading %}
|
|
303
|
-
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
|
|
304
|
-
{% if group.url %}
|
|
305
|
-
<a href="{{ group.url }}" class="ons-header-nav-menu__link">{{ group.heading }}</a>
|
|
306
|
-
{% else %}
|
|
307
|
-
{{ group.heading }}
|
|
308
|
-
{% endif %}
|
|
309
|
-
</h2>
|
|
310
|
-
{% endif %}
|
|
311
|
-
{% if group.groupItems %}
|
|
312
|
-
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
|
|
313
|
-
{% for groupItem in group.groupItems %}
|
|
314
|
-
{% if groupItem.text %}
|
|
315
|
-
<li class="ons-u-mb-no">
|
|
316
|
-
<p class="ons-u-fs-s ons-header-nav-menu_text">
|
|
317
|
-
{% if groupItem.url %}
|
|
318
|
-
<a href="{{ groupItem.url }}" class="ons-header-nav-menu__link">
|
|
319
|
-
{{ groupItem.text }}
|
|
320
|
-
</a>
|
|
321
|
-
{% else %}
|
|
322
|
-
{{ groupItem.text }}
|
|
323
|
-
{% endif %}
|
|
324
|
-
</p>
|
|
325
|
-
</li>
|
|
326
|
-
{% endif %}
|
|
327
|
-
{% endfor %}
|
|
328
|
-
</ul>
|
|
329
|
-
{% endif %}
|
|
330
|
-
{% endfor %}
|
|
331
|
-
</li>
|
|
332
|
-
{% endfor %}
|
|
333
|
-
</ul>
|
|
334
|
-
</div>
|
|
335
|
-
{% endif %}
|
|
336
|
-
</nav>
|
|
337
|
-
{% endif %}
|
|
338
|
-
|
|
339
|
-
{% if params.variants == "basic" and params.searchLinks %}
|
|
340
|
-
<nav
|
|
341
|
-
class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
|
|
342
|
-
id="{{ params.searchLinks.id }}"
|
|
343
|
-
aria-label="{{ params.searchLinks.searchNavigationAriaLabel | default('Search navigation') }}"
|
|
344
|
-
aria-hidden="false"
|
|
345
|
-
>
|
|
346
|
-
<div class="ons-container">
|
|
347
|
-
<div class="ons-header-nav-search__input">
|
|
348
|
-
{% from "components/input/_macro.njk" import onsInput %}
|
|
349
|
-
{{
|
|
350
|
-
onsInput({
|
|
351
|
-
"id": 'search-field',
|
|
352
|
-
"width": 'full',
|
|
353
|
-
"label": {
|
|
354
|
-
"text": 'Search the ONS',
|
|
355
|
-
"id": "header-search-input-label"
|
|
356
|
-
},
|
|
357
|
-
"searchButton": {
|
|
358
|
-
"visuallyHideButtonText": true,
|
|
359
|
-
"text": 'Search',
|
|
360
|
-
"iconType": 'search',
|
|
361
|
-
'variant': 'header'
|
|
362
|
-
|
|
363
|
-
}
|
|
364
|
-
})
|
|
365
|
-
}}
|
|
366
|
-
</div>
|
|
367
|
-
</div>
|
|
368
|
-
{% if params.searchLinks %}
|
|
369
|
-
<div class="ons-container">
|
|
370
|
-
<h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">{{ params.searchLinks.heading }}</h2>
|
|
371
|
-
<ul class="ons-list ons-list--bare ons-list--inline">
|
|
372
|
-
{% for item in params.searchLinks.itemsList %}
|
|
373
|
-
{# Limiting the popular searches to 5 #}
|
|
374
|
-
{% if loop.index <= 5 %}
|
|
375
|
-
<li class="ons-list__item">
|
|
376
|
-
{% if item.text %}
|
|
377
|
-
{% if item.url %}
|
|
378
|
-
<a href="{{ item.url }}" class="ons-u-fs-r ons-header-nav-search__text"
|
|
379
|
-
>{{ item.text }}
|
|
380
|
-
</a>
|
|
381
|
-
{% else %}
|
|
382
|
-
<p class="ons-u-fs-r ons-header-nav-search__text">{{ item.text }}</p>
|
|
383
|
-
{% endif %}
|
|
384
|
-
{% endif %}
|
|
385
|
-
</li>
|
|
386
|
-
{% endif %}
|
|
387
|
-
{% endfor %}
|
|
388
|
-
</ul>
|
|
389
|
-
</div>
|
|
390
|
-
{% endif %}
|
|
391
|
-
</nav>
|
|
392
|
-
{% endif %}
|
|
393
401
|
</div>
|
|
394
402
|
{% if params.variants != "basic" %}
|
|
395
403
|
<div class="ons-header__main">
|
|
@@ -34,14 +34,18 @@
|
|
|
34
34
|
})
|
|
35
35
|
}}
|
|
36
36
|
{% endif %}
|
|
37
|
-
{% if params.topic %}
|
|
38
|
-
<h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
|
|
39
|
-
{% endif %}
|
|
40
37
|
|
|
41
38
|
<div class="ons-hero__content">
|
|
42
39
|
<div class="ons-hero__title-container">
|
|
43
40
|
<header>
|
|
44
|
-
<
|
|
41
|
+
<div class="ons-hero__title-wrapper">
|
|
42
|
+
<h1 class="ons-hero__title ons-u-fs-3xl">{{ params.title }}</h1>
|
|
43
|
+
|
|
44
|
+
{% if params.topic %}
|
|
45
|
+
<h2 class="ons-hero--topic">{{ params.topic | safe }}</h2>
|
|
46
|
+
{% endif %}
|
|
47
|
+
</div>
|
|
48
|
+
|
|
45
49
|
{% if params.subtitle %}
|
|
46
50
|
<h2 class="ons-hero__subtitle ons-u-fs-r--b">{{ params.subtitle }}</h2>
|
|
47
51
|
{% endif %}
|
|
@@ -58,27 +58,12 @@
|
|
|
58
58
|
}
|
|
59
59
|
]
|
|
60
60
|
},
|
|
61
|
-
{
|
|
62
|
-
"term": "Edition:",
|
|
63
|
-
"descriptions": [
|
|
64
|
-
{
|
|
65
|
-
"description": "Latest"
|
|
66
|
-
}
|
|
67
|
-
]
|
|
68
|
-
},
|
|
69
|
-
{
|
|
70
|
-
"term": "Releases:",
|
|
71
|
-
"descriptions": [
|
|
72
|
-
{
|
|
73
|
-
"description": "View previous releases"
|
|
74
|
-
}
|
|
75
|
-
]
|
|
76
|
-
},
|
|
77
61
|
{
|
|
78
62
|
"term": "Contact:",
|
|
79
63
|
"descriptions": [
|
|
80
64
|
{
|
|
81
|
-
"description": "Retail
|
|
65
|
+
"description": "Retail sales team",
|
|
66
|
+
"url": "#0"
|
|
82
67
|
}
|
|
83
68
|
]
|
|
84
69
|
}
|