@ons/design-system 72.10.3 → 72.10.5
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/_chart.scss +2 -14
- package/components/chart/_macro.njk +34 -34
- package/components/chart/_macro.spec.js +0 -49
- package/components/chart/boxplot.js +3 -0
- package/components/chart/chart.js +18 -8
- package/components/chart/columnrange-chart.js +6 -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 +42 -15
- 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/header/_macro.spec.js +1 -1
- package/components/hero/_hero.scss +5 -0
- package/components/hero/_macro.njk +8 -4
- package/components/hero/example-hero-grey.njk +2 -17
- package/components/language-selector/_macro.spec.js +4 -3
- package/components/table/_macro.njk +83 -44
- package/components/table/_macro.spec.js +90 -0
- package/components/table/_table.scss +15 -3
- package/components/table/example-table-merge-cells.njk +139 -0
- 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
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
/** @jest-environment jsdom */
|
|
2
|
+
|
|
3
|
+
import * as cheerio from 'cheerio';
|
|
4
|
+
import axe from '../../tests/helpers/axe';
|
|
5
|
+
import { renderComponent } from '../../tests/helpers/rendering';
|
|
6
|
+
import { EXAMPLE_FEATURED_ARTICLE_WITH_CHART, EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE } from './_test-examples';
|
|
7
|
+
|
|
8
|
+
describe('Macro: Featured Article', () => {
|
|
9
|
+
describe('GIVEN: Params: required', () => {
|
|
10
|
+
describe('WHEN: chart is provided and image is not', () => {
|
|
11
|
+
const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_CHART));
|
|
12
|
+
|
|
13
|
+
test('THEN: it passes accessibility checks', async () => {
|
|
14
|
+
const results = await axe($.html());
|
|
15
|
+
expect(results).toHaveNoViolations();
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
test('THEN: it displays the correct title text', () => {
|
|
19
|
+
expect($('.ons-featured__title').text().trim()).toBe('Economic Trends 2024');
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
test('THEN: the title has the correct url link', () => {
|
|
23
|
+
expect($('.ons-featured__title a').attr('href')).toBe('/economy/economic-trends-2024');
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
test('THEN: it renders the onsChart component', () => {
|
|
27
|
+
expect($('[data-highcharts-base-chart]').length).toBe(1);
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
test('THEN: the chart has the correct id', () => {
|
|
31
|
+
expect($('[data-highcharts-base-chart]').attr('data-highcharts-id')).toBe('growth-chart');
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
test('THEN: the chart has the correct type', () => {
|
|
35
|
+
expect($('[data-highcharts-base-chart]').attr('data-highcharts-type')).toBe('line');
|
|
36
|
+
});
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
describe('WHEN: image is provided and chart is not', () => {
|
|
40
|
+
const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE));
|
|
41
|
+
|
|
42
|
+
test('THEN: it passes accessibility checks', async () => {
|
|
43
|
+
const results = await axe($.html());
|
|
44
|
+
expect(results).toHaveNoViolations();
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
test('THEN: it displays the correct title text', () => {
|
|
48
|
+
expect($('.ons-featured__title').text().trim()).toBe('Population Insights');
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
test('THEN: the title has the correct url link', () => {
|
|
52
|
+
expect($('.ons-featured__title a').attr('href')).toBe('/people/population/insights');
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
test('THEN: it renders image with correct src attribute', () => {
|
|
56
|
+
expect($('.ons-image__img').attr('src')).toBe('example.png');
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
test('THEN: it renders image with correct alt text', () => {
|
|
60
|
+
expect($('.ons-image__img').attr('alt')).toBe('Example alt text');
|
|
61
|
+
});
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
describe('WHEN: both chart and image is provided', () => {
|
|
65
|
+
const $ = cheerio.load(renderComponent('featured-article', EXAMPLE_FEATURED_ARTICLE_WITH_CHART));
|
|
66
|
+
|
|
67
|
+
test('THEN: it renders the onsChart component', () => {
|
|
68
|
+
expect($('[data-highcharts-base-chart]').length).toBe(1);
|
|
69
|
+
});
|
|
70
|
+
test('THEN: it does not render the onsImage component', () => {
|
|
71
|
+
expect($('.ons-image__img').length).toBe(0);
|
|
72
|
+
});
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
describe('GIVEN: Param: metadata', () => {
|
|
77
|
+
describe('WHEN: chart is provided', () => {
|
|
78
|
+
const $ = cheerio.load(
|
|
79
|
+
renderComponent('featured-article', {
|
|
80
|
+
...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
|
|
81
|
+
metadata: {
|
|
82
|
+
date: {
|
|
83
|
+
prefix: 'Released',
|
|
84
|
+
showPrefix: true,
|
|
85
|
+
iso: '2024-05-01',
|
|
86
|
+
short: '1 May 2024',
|
|
87
|
+
},
|
|
88
|
+
text: 'Bulletin',
|
|
89
|
+
},
|
|
90
|
+
}),
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
test('THEN: it renders ISO date value correctly', () => {
|
|
94
|
+
expect($('time').attr('datetime')).toBe('2024-05-01');
|
|
95
|
+
});
|
|
96
|
+
|
|
97
|
+
test('THEN: it renders short date label correctly', () => {
|
|
98
|
+
expect($('time').text()).toBe('1 May 2024');
|
|
99
|
+
});
|
|
100
|
+
|
|
101
|
+
test('THEN: it displays metadata text', () => {
|
|
102
|
+
expect($('.ons-featured__item-attribute span').text()).toContain('Bulletin');
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
|
|
106
|
+
describe('WHEN: image is provided', () => {
|
|
107
|
+
const $ = cheerio.load(
|
|
108
|
+
renderComponent('featured-article', {
|
|
109
|
+
...EXAMPLE_FEATURED_ARTICLE_WITH_IMAGE,
|
|
110
|
+
metadata: {
|
|
111
|
+
date: {
|
|
112
|
+
prefix: 'Released',
|
|
113
|
+
showPrefix: true,
|
|
114
|
+
iso: '2024-05-01',
|
|
115
|
+
short: '1 May 2024',
|
|
116
|
+
},
|
|
117
|
+
text: 'Bulletin',
|
|
118
|
+
},
|
|
119
|
+
}),
|
|
120
|
+
);
|
|
121
|
+
|
|
122
|
+
test('THEN: it renders ISO date value correctly', () => {
|
|
123
|
+
expect($('time').attr('datetime')).toBe('2024-05-01');
|
|
124
|
+
});
|
|
125
|
+
|
|
126
|
+
test('THEN: it renders short date label correctly', () => {
|
|
127
|
+
expect($('time').text()).toBe('1 May 2024');
|
|
128
|
+
});
|
|
129
|
+
|
|
130
|
+
test('THEN: it displays metadata text', () => {
|
|
131
|
+
expect($('.ons-featured__item-attribute span').text()).toContain('Bulletin');
|
|
132
|
+
});
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
describe('WHEN: metadata is not provided', () => {
|
|
136
|
+
const articleWithoutMetadata = {
|
|
137
|
+
...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
|
|
138
|
+
};
|
|
139
|
+
const $ = cheerio.load(renderComponent('featured-article', articleWithoutMetadata));
|
|
140
|
+
|
|
141
|
+
test('THEN: metadata section is not rendered', () => {
|
|
142
|
+
expect($('.ons-featured__item-metadata').length).toBe(0);
|
|
143
|
+
});
|
|
144
|
+
});
|
|
145
|
+
});
|
|
146
|
+
|
|
147
|
+
describe('GIVEN: Params: description', () => {
|
|
148
|
+
describe('WHEN: description is provided', () => {
|
|
149
|
+
test('THEN: has expected description', () => {
|
|
150
|
+
const $ = cheerio.load(
|
|
151
|
+
renderComponent('featured-article', { ...EXAMPLE_FEATURED_ARTICLE_WITH_CHART, description: 'Some description' }),
|
|
152
|
+
);
|
|
153
|
+
const title = $('.ons-featured__description').html().trim();
|
|
154
|
+
expect(title).toBe('Some description');
|
|
155
|
+
});
|
|
156
|
+
});
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
describe('GIVEN: Param: headingLevel', () => {
|
|
160
|
+
describe('WHEN: heading level is provided', () => {
|
|
161
|
+
const $ = cheerio.load(
|
|
162
|
+
renderComponent('featured-article', {
|
|
163
|
+
...EXAMPLE_FEATURED_ARTICLE_WITH_CHART,
|
|
164
|
+
headingLevel: 3,
|
|
165
|
+
}),
|
|
166
|
+
);
|
|
167
|
+
|
|
168
|
+
test('THEN: title is rendered using correct heading tag', () => {
|
|
169
|
+
expect($('.ons-featured__title')[0].tagName).toBe('h3');
|
|
170
|
+
});
|
|
171
|
+
});
|
|
172
|
+
});
|
|
173
|
+
});
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// Block
|
|
2
2
|
.ons-header {
|
|
3
|
+
$root: &;
|
|
3
4
|
@include font-smoothing;
|
|
4
5
|
|
|
5
6
|
display: block;
|
|
@@ -239,6 +240,22 @@
|
|
|
239
240
|
&--basic & {
|
|
240
241
|
&__grid-top {
|
|
241
242
|
padding: 0;
|
|
243
|
+
flex-direction: column;
|
|
244
|
+
align-items: flex-start;
|
|
245
|
+
|
|
246
|
+
#{$root}__menu-links {
|
|
247
|
+
width: 100%;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
// When JS is enabled, revert the no-js styles
|
|
251
|
+
.ons-js-enabled & {
|
|
252
|
+
flex-direction: inherit;
|
|
253
|
+
align-items: center;
|
|
254
|
+
|
|
255
|
+
#{$root}__menu-links {
|
|
256
|
+
width: auto;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
242
259
|
}
|
|
243
260
|
}
|
|
244
261
|
|
|
@@ -246,15 +263,21 @@
|
|
|
246
263
|
// applies styles for non-js variant
|
|
247
264
|
background-color: var(--ons-color-branded-tint);
|
|
248
265
|
border-bottom: 1px solid var(--ons-color-ocean-blue);
|
|
249
|
-
width: 100%;
|
|
250
266
|
margin-bottom: 0;
|
|
251
267
|
padding-bottom: 1rem;
|
|
268
|
+
position: relative;
|
|
269
|
+
width: 100%;
|
|
252
270
|
|
|
253
271
|
// updates styles when js is enabled
|
|
254
272
|
.ons-js-enabled & {
|
|
255
273
|
border-bottom: 0;
|
|
256
274
|
margin-bottom: 1rem;
|
|
257
275
|
padding-bottom: 0;
|
|
276
|
+
position: absolute;
|
|
277
|
+
top: 100%;
|
|
278
|
+
left: 50%;
|
|
279
|
+
width: 100vw;
|
|
280
|
+
transform: translateX(-50%);
|
|
258
281
|
}
|
|
259
282
|
|
|
260
283
|
&__key-list {
|
|
@@ -295,7 +318,17 @@
|
|
|
295
318
|
@extend .ons-u-pt-2xl;
|
|
296
319
|
@extend .ons-u-pb-2xl;
|
|
297
320
|
|
|
321
|
+
position: relative;
|
|
298
322
|
width: 100%;
|
|
323
|
+
|
|
324
|
+
// updates styles when js is enabled
|
|
325
|
+
.ons-js-enabled & {
|
|
326
|
+
position: absolute;
|
|
327
|
+
top: 100%;
|
|
328
|
+
left: 50%;
|
|
329
|
+
width: 100vw;
|
|
330
|
+
transform: translateX(-50%);
|
|
331
|
+
}
|
|
299
332
|
&__input {
|
|
300
333
|
border-bottom: 1px solid var(--ons-color-ocean-blue);
|
|
301
334
|
@extend .ons-u-mb-2xl;
|
|
@@ -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">
|
|
@@ -857,7 +857,7 @@ describe('FOR: Macro: Header', () => {
|
|
|
857
857
|
const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
|
|
858
858
|
|
|
859
859
|
test('THEN: it renders heading with provided text', () => {
|
|
860
|
-
expect($('.ons-header-nav-search__heading').text()).toBe('Header Search');
|
|
860
|
+
expect($('.ons-header-nav-search__heading').text().trim()).toBe('Header Search');
|
|
861
861
|
});
|
|
862
862
|
});
|
|
863
863
|
|
|
@@ -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
|
}
|
|
@@ -102,7 +102,7 @@ describe('macro: language-selector', () => {
|
|
|
102
102
|
it('has the `abbrText` rendered', () => {
|
|
103
103
|
const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
|
|
104
104
|
|
|
105
|
-
expect($('.ons-language-links__item a span:
|
|
105
|
+
expect($('.ons-language-links__item a span:nth-child(2)').text()).toBe('CY');
|
|
106
106
|
});
|
|
107
107
|
});
|
|
108
108
|
|
|
@@ -124,8 +124,9 @@ describe('macro: language-selector', () => {
|
|
|
124
124
|
it('does not show the current language', () => {
|
|
125
125
|
const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
|
|
126
126
|
|
|
127
|
-
|
|
128
|
-
expect($('.ons-language-links__item:
|
|
127
|
+
// .replace(/\s+/g, ' ') will replace any sequence of whitespace characters (spaces, tabs, newlines) with a single space
|
|
128
|
+
expect($('.ons-language-links__item:first-child a').text().replace(/\s+/g, ' ').trim()).toBe('Change language to English');
|
|
129
|
+
expect($('.ons-language-links__item:last-child a').text().replace(/\s+/g, ' ').trim()).toBe('Change language to Polski');
|
|
129
130
|
});
|
|
130
131
|
|
|
131
132
|
it('has the visibility class applied', () => {
|