@onsvisual/svelte-components 1.1.0 → 1.1.2
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/dist/components/Em/Em.svelte +1 -1
- package/dist/components/Footer/Footer.svelte +23 -7
- package/dist/components/Header/Header.stories.svelte +5 -1
- package/dist/components/Header/Header.svelte +23 -19
- package/dist/components/Header/Header.svelte.d.ts +2 -0
- package/dist/components/Header/HeaderNav.svelte +458 -11
- package/dist/components/Header/HeaderNav.svelte.d.ts +12 -4
- package/dist/components/Header/HeaderNavCompact.svelte +185 -0
- package/dist/components/Header/HeaderNavCompact.svelte.d.ts +27 -0
- package/dist/components/Header/HeaderNavLegacy.svelte +3 -1
- package/dist/components/Header/HeaderNavLegacy.svelte.d.ts +4 -4
- package/dist/components/Header/nav.d.ts +1 -1
- package/dist/components/Header/nav.js +221 -247
- package/dist/components/Header/navLegacy.d.ts +1 -0
- package/dist/components/Header/navLegacy.js +271 -0
- package/dist/components/Indent/Indent.stories.svelte +1 -1
- package/dist/components/ShareButtons/ShareButtons.svelte +101 -88
- package/dist/components/ShareButtons/ShareButtons.svelte.d.ts +2 -0
- package/dist/css/main.css +1 -1
- package/package.json +4 -2
|
@@ -1,11 +1,248 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import { onMount } from "svelte";
|
|
3
|
+
import initNav from "./nav.js";
|
|
4
|
+
|
|
5
|
+
export let darkMode = false;
|
|
6
|
+
export let border = false;
|
|
7
|
+
export let bilingual = true;
|
|
8
|
+
export let lang = "en";
|
|
4
9
|
export let baseurl = "https://www.ons.gov.uk";
|
|
10
|
+
export let baseother = "https://cy.ons.gov.uk";
|
|
11
|
+
export let path = "";
|
|
5
12
|
export let i18n = (text) => text;
|
|
13
|
+
|
|
14
|
+
let el; // Header HTML element
|
|
15
|
+
|
|
16
|
+
const menu = {
|
|
17
|
+
main: [
|
|
18
|
+
{
|
|
19
|
+
label_en: "Taking part in a survey?",
|
|
20
|
+
label_cy: "Cymryd rhan mewn arolwg?",
|
|
21
|
+
description_en: "It's never been more important.",
|
|
22
|
+
description_cy: "Nid yw erioed wedi bod mor bwysig.",
|
|
23
|
+
url: "/surveys"
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
label_en: "Release calendar",
|
|
27
|
+
label_cy: "Calendar datganiadau",
|
|
28
|
+
description_en: "View our latest and upcoming releases.",
|
|
29
|
+
description_cy: "Gweld ein datganiadau",
|
|
30
|
+
url: "/releasecalendar"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
label_en: "Methodology",
|
|
34
|
+
label_cy: "Methodoleg",
|
|
35
|
+
description_en: "Information on our methods.",
|
|
36
|
+
description_cy: "Gwybodaeth am ein dulliau.",
|
|
37
|
+
url: "/methodology"
|
|
38
|
+
}
|
|
39
|
+
],
|
|
40
|
+
topics: [
|
|
41
|
+
{
|
|
42
|
+
label_en: "People, population and community",
|
|
43
|
+
label_cy: "Pobl, y boblogaeth a chymunedau",
|
|
44
|
+
url: "/peoplepopulationandcommunity",
|
|
45
|
+
children: [
|
|
46
|
+
{
|
|
47
|
+
label_en: "Armed forces community",
|
|
48
|
+
label_cy: "Cymuned y Lluoedd Arfog",
|
|
49
|
+
url: "/peoplepopulationandcommunity/armedforcescommunity"
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label_en: "Births, deaths and marriages",
|
|
53
|
+
label_cy: "Genedigaethau, marwolaethau a phriodasau",
|
|
54
|
+
url: "/peoplepopulationandcommunity/birthsdeathsandmarriages"
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
label_en: "Crime and justice",
|
|
58
|
+
label_cy: "Troseddu a chyfiawnder",
|
|
59
|
+
url: "/peoplepopulationandcommunity/crimeandjustice"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label_en: "Cultural identity",
|
|
63
|
+
label_cy: "Hunaniaeth ddiwylliannol",
|
|
64
|
+
url: "/peoplepopulationandcommunity/culturalidentity"
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
label_en: "Education and childcare",
|
|
68
|
+
label_cy: "Addysg a gofal plant",
|
|
69
|
+
url: "/peoplepopulationandcommunity/educationandchildcare"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
label_en: "Elections",
|
|
73
|
+
label_cy: "Etholiadau",
|
|
74
|
+
url: "/peoplepopulationandcommunity/elections"
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
label_en: "Health and social care",
|
|
78
|
+
label_cy: "Iechyd a gofal cymdeithasol",
|
|
79
|
+
url: "/peoplepopulationandcommunity/healthandsocialcare"
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
label_en: "Household characteristics",
|
|
83
|
+
label_cy: "Nodweddion aelwydydd",
|
|
84
|
+
url: "/peoplepopulationandcommunity/householdcharacteristics"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
label_en: "Housing",
|
|
88
|
+
label_cy: "Tai",
|
|
89
|
+
url: "/peoplepopulationandcommunity/housing"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
label_en: "Leisure and tourism",
|
|
93
|
+
label_cy: "Hamdden a thwristiaeth",
|
|
94
|
+
url: "/peoplepopulationandcommunity/leisureandtourism"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
label_en: "Personal and household finances",
|
|
98
|
+
label_cy: "Cyllid personol a chyllid aelwydydd",
|
|
99
|
+
url: "/peoplepopulationandcommunity/personalandhouseholdfinances"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
label_en: "Population and migration",
|
|
103
|
+
label_cy: "Poblogaeth ac ymfudo",
|
|
104
|
+
url: "/peoplepopulationandcommunity/populationandmigration"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
label_en: "Well-being",
|
|
108
|
+
label_cy: "Lles",
|
|
109
|
+
url: "/peoplepopulationandcommunity/wellbeing"
|
|
110
|
+
}
|
|
111
|
+
]
|
|
112
|
+
},
|
|
113
|
+
{
|
|
114
|
+
label_en: "Business, industry and trade",
|
|
115
|
+
label_cy: "Busnes, diwydiant a masnach",
|
|
116
|
+
url: "/businessindustryandtrade",
|
|
117
|
+
children: [
|
|
118
|
+
{
|
|
119
|
+
label_en: "Business",
|
|
120
|
+
label_cy: "Busnes",
|
|
121
|
+
url: "/businessindustryandtrade/business"
|
|
122
|
+
},
|
|
123
|
+
{
|
|
124
|
+
label_en: "Changes to business",
|
|
125
|
+
label_cy: "Newidiadau i fusnesau",
|
|
126
|
+
url: "/businessindustryandtrade/changestobusiness"
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
label_en: "Construction industry",
|
|
130
|
+
label_cy: "Diwydiant adeiladu",
|
|
131
|
+
url: "/businessindustryandtrade/itandinternetindustry"
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
label_en: "International trade",
|
|
135
|
+
label_cy: "Masnach ryngwladol",
|
|
136
|
+
url: "/businessindustryandtrade/constructionindustry"
|
|
137
|
+
},
|
|
138
|
+
{
|
|
139
|
+
label_en: "IT and internet industry",
|
|
140
|
+
label_cy: "Y diwydiant TGCh a'r rhyngrwyd",
|
|
141
|
+
url: "/businessindustryandtrade/internationaltrade"
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
label_en: "Manufacturing and production industry",
|
|
145
|
+
label_cy: "Y diwydiant gweithgynhyrchu a chynhyrchu",
|
|
146
|
+
url: "/businessindustryandtrade/manufacturingandproductionindustry"
|
|
147
|
+
},
|
|
148
|
+
{
|
|
149
|
+
label_en: "Retail industry",
|
|
150
|
+
label_cy: "Y diwydiant manwerthu",
|
|
151
|
+
url: "/businessindustryandtrade/retailindustry"
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
label_en: "Tourism industry",
|
|
155
|
+
label_cy: "Y diwydiant twristiaeth",
|
|
156
|
+
url: "/businessindustryandtrade/tourismindustry"
|
|
157
|
+
}
|
|
158
|
+
]
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
label_en: "Employment and labour market",
|
|
162
|
+
label_cy: "Cyflogaeth a'r farchnad lafur",
|
|
163
|
+
url: "/employmentandlabourmarket",
|
|
164
|
+
children: [
|
|
165
|
+
{
|
|
166
|
+
label_en: "People in work",
|
|
167
|
+
label_cy: "Pobl mewn gwaith",
|
|
168
|
+
url: "/employmentandlabourmarket/peopleinwork"
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
label_en: "People not in work",
|
|
172
|
+
label_cy: "Pobl nad ydynt mewn gwaith",
|
|
173
|
+
url: "/employmentandlabourmarket/peoplenotinwork"
|
|
174
|
+
}
|
|
175
|
+
]
|
|
176
|
+
},
|
|
177
|
+
{
|
|
178
|
+
label_en: "Economy",
|
|
179
|
+
label_cy: "Yr economi",
|
|
180
|
+
url: "/economy",
|
|
181
|
+
children: [
|
|
182
|
+
{
|
|
183
|
+
label_en: "Economic output and productivity",
|
|
184
|
+
label_cy: "Allbwn economaidd a chynhyrchiant",
|
|
185
|
+
url: "/economy/economicoutputandproductivity"
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
label_en: "Government, public sector and taxes",
|
|
189
|
+
label_cy: "Llywodraeth, y sector cyhoeddus a threthi",
|
|
190
|
+
url: "/economy/governmentpublicsectorandtaxes"
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
label_en: "Gross Value Added (GVA)",
|
|
194
|
+
label_cy: "Gwerth Ychwanegol Gros",
|
|
195
|
+
url: "/economy/grossvalueaddedgva"
|
|
196
|
+
},
|
|
197
|
+
{
|
|
198
|
+
label_en: "Investments, pensions and trusts",
|
|
199
|
+
label_cy: "Buddsoddiadau, pensiynau ac ymddiriedolaethau",
|
|
200
|
+
url: "/economy/investmentspensionsandtrusts"
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
label_en: "Regional accounts",
|
|
204
|
+
label_cy: "Cyfrifon rhanbarthol",
|
|
205
|
+
url: "/economy/regionalaccounts"
|
|
206
|
+
},
|
|
207
|
+
{
|
|
208
|
+
label_en: "Environmental accounts",
|
|
209
|
+
label_cy: "Cyfrifon amgylcheddol",
|
|
210
|
+
url: "/economy/environmentalaccounts"
|
|
211
|
+
},
|
|
212
|
+
{
|
|
213
|
+
label_en: "Gross Domestic Product (GDP)",
|
|
214
|
+
label_cy: "Cynnyrch Domestig Gros (CDG)",
|
|
215
|
+
url: "/economy/grossdomesticproductgdp"
|
|
216
|
+
},
|
|
217
|
+
{
|
|
218
|
+
label_en: "Inflation and price indices",
|
|
219
|
+
label_cy: "Chwyddiant a mynegrifau prisiau",
|
|
220
|
+
url: "/economy/inflationandpriceindices"
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
label_en: "National Accounts",
|
|
224
|
+
label_cy: "Cyfrifon gwladol",
|
|
225
|
+
url: "/economy/nationalaccounts"
|
|
226
|
+
}
|
|
227
|
+
]
|
|
228
|
+
}
|
|
229
|
+
],
|
|
230
|
+
searches: [
|
|
231
|
+
{ label_en: "Cost of living", label_cy: "cost byw" },
|
|
232
|
+
{ label_en: "Inflation", label_cy: "Chwyddiant" },
|
|
233
|
+
{ label_en: "NHS waiting times", label_cy: "Amseroedd aros y GIG" },
|
|
234
|
+
{ label_en: "Wellbeing", label_cy: "Llesiant" },
|
|
235
|
+
{ label_en: "Baby names", label_cy: "Enwau babanod" }
|
|
236
|
+
]
|
|
237
|
+
};
|
|
238
|
+
const columns = [[menu.topics[0]], [menu.topics[1], menu.topics[2]], [menu.topics[3]]];
|
|
239
|
+
|
|
240
|
+
onMount(() => {
|
|
241
|
+
initNav(el?.parentElement || document);
|
|
242
|
+
});
|
|
6
243
|
</script>
|
|
7
244
|
|
|
8
|
-
<div class="ons-browser-banner">
|
|
245
|
+
<div class="ons-browser-banner" bind:this={el}>
|
|
9
246
|
<div class="ons-container">
|
|
10
247
|
<p class="ons-browser-banner__content">
|
|
11
248
|
<span class="ons-browser-banner__lead">This website no longer supports your browser.</span
|
|
@@ -17,7 +254,7 @@
|
|
|
17
254
|
</p>
|
|
18
255
|
</div>
|
|
19
256
|
</div>
|
|
20
|
-
<div class="ons-header__top" class:ons-header__top--
|
|
257
|
+
<div class="ons-header__top" class:ons-header__top--border={border}>
|
|
21
258
|
<div class="ons-container">
|
|
22
259
|
<div
|
|
23
260
|
class="ons-header__grid-top ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
|
|
@@ -26,7 +263,7 @@
|
|
|
26
263
|
<a
|
|
27
264
|
class="ons-header__org-logo-link"
|
|
28
265
|
href={baseurl}
|
|
29
|
-
aria-label="{i18n('Office for National Statistics
|
|
266
|
+
aria-label="{i18n('Office for National Statistics')} - {i18n('Homepage')}"
|
|
30
267
|
>
|
|
31
268
|
<div class="ons-header__org-logo ons-header__org-logo--large">
|
|
32
269
|
<svg
|
|
@@ -38,9 +275,7 @@
|
|
|
38
275
|
aria-labelledby="ons-logo-en-alt"
|
|
39
276
|
role="img"
|
|
40
277
|
>
|
|
41
|
-
<title id="ons-logo-en-alt"
|
|
42
|
-
>{i18n("Office for National Statistics logo")} - {i18n("Homepage")}</title
|
|
43
|
-
>
|
|
278
|
+
<title id="ons-logo-en-alt">{i18n("Office for National Statistics logo")}</title>
|
|
44
279
|
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
|
|
45
280
|
<path
|
|
46
281
|
d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"
|
|
@@ -146,9 +381,9 @@
|
|
|
146
381
|
aria-labelledby="ons-logo-stacked-en-alt"
|
|
147
382
|
role="img"
|
|
148
383
|
>
|
|
149
|
-
<title id="ons-logo-stacked-en-alt"
|
|
150
|
-
{i18n("Office for National Statistics logo")}
|
|
151
|
-
|
|
384
|
+
<title id="ons-logo-stacked-en-alt"
|
|
385
|
+
>{i18n("Office for National Statistics logo")}</title
|
|
386
|
+
>
|
|
152
387
|
<g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
|
|
153
388
|
<path
|
|
154
389
|
d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"
|
|
@@ -168,6 +403,218 @@
|
|
|
168
403
|
</div>
|
|
169
404
|
</a>
|
|
170
405
|
</div>
|
|
406
|
+
<div class="ons-grid__col ons-col-auto ons-header__menu-links ons-u-ml-auto">
|
|
407
|
+
<div class="ons-header__links ons-grid__col">
|
|
408
|
+
<button
|
|
409
|
+
type="button"
|
|
410
|
+
class="ons-btn ons-u-fs-s--b ons-js-toggle-nav-menu button-nav active disabled ons-btn--menu"
|
|
411
|
+
aria-label="Toggle menu"
|
|
412
|
+
aria-controls="menu-links"
|
|
413
|
+
aria-expanded="true"
|
|
414
|
+
aria-disabled="true"
|
|
415
|
+
>
|
|
416
|
+
<span class="ons-btn__inner"
|
|
417
|
+
><svg
|
|
418
|
+
class="ons-icon ons-u-mr-2xs"
|
|
419
|
+
viewBox="0 0 8 13"
|
|
420
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
421
|
+
focusable="false"
|
|
422
|
+
fill="currentColor"
|
|
423
|
+
role="img"
|
|
424
|
+
aria-hidden="true"
|
|
425
|
+
>
|
|
426
|
+
<path
|
|
427
|
+
d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
|
|
428
|
+
transform="translate(-5.02 -1.59)"
|
|
429
|
+
/>
|
|
430
|
+
</svg><span class="ons-btn__text">{i18n("Menu")}</span></span
|
|
431
|
+
>
|
|
432
|
+
</button>
|
|
433
|
+
</div>
|
|
434
|
+
<div class="ons-header__links ons-grid__col ons-header__menu-link">
|
|
435
|
+
<button
|
|
436
|
+
type="button"
|
|
437
|
+
class="ons-btn ons-u-fs-s--b ons-js-toggle-header-search ons-btn--close ons-btn--search-icon active disabled ons-btn--search"
|
|
438
|
+
aria-label="Toggle search"
|
|
439
|
+
aria-controls="search"
|
|
440
|
+
aria-expanded="true"
|
|
441
|
+
aria-disabled="true"
|
|
442
|
+
>
|
|
443
|
+
<span class="ons-btn__inner"
|
|
444
|
+
><svg
|
|
445
|
+
class="ons-icon ons-u-mr-2xs"
|
|
446
|
+
viewBox="0 0 12 12"
|
|
447
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
448
|
+
aria-hidden="true"
|
|
449
|
+
fill="currentColor"
|
|
450
|
+
role="img"
|
|
451
|
+
>
|
|
452
|
+
<path
|
|
453
|
+
d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z"
|
|
454
|
+
/>
|
|
455
|
+
</svg><span class="ons-btn__text"></span></span
|
|
456
|
+
>
|
|
457
|
+
</button>
|
|
458
|
+
</div>
|
|
459
|
+
{#if bilingual}
|
|
460
|
+
<div class="ons-grid__col ons-col-auto">
|
|
461
|
+
<div class="ons-header__language">
|
|
462
|
+
<ul class="ons-language-links">
|
|
463
|
+
<li class="ons-language-links__item">
|
|
464
|
+
<a
|
|
465
|
+
href="{baseother}{path}"
|
|
466
|
+
class="language__link"
|
|
467
|
+
lang={lang == "en" ? "cy" : "en"}
|
|
468
|
+
>
|
|
469
|
+
<span class="ons-u-vh">{i18n("Newid iaith i")} </span>{i18n("Cymraeg")}
|
|
470
|
+
</a>
|
|
471
|
+
</li>
|
|
472
|
+
</ul>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
{/if}
|
|
476
|
+
</div>
|
|
171
477
|
</div>
|
|
172
478
|
</div>
|
|
173
479
|
</div>
|
|
480
|
+
<nav
|
|
481
|
+
class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl ons-u-d-no"
|
|
482
|
+
id="menu-links"
|
|
483
|
+
aria-label="Menu navigation"
|
|
484
|
+
aria-hidden="true"
|
|
485
|
+
>
|
|
486
|
+
<div class="ons-container">
|
|
487
|
+
<ul class="ons-grid ons-header-nav-menu__key-list">
|
|
488
|
+
{#each menu.main as item (item.url)}
|
|
489
|
+
<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
|
|
490
|
+
<h2 class="ons-u-fs-s--b ons-u-mb-no ons-header-nav-menu__heading">
|
|
491
|
+
<a href="{baseurl}{item.url}" class="ons-header-nav-menu__link"
|
|
492
|
+
>{item[`label_${lang}`]}</a
|
|
493
|
+
>
|
|
494
|
+
</h2>
|
|
495
|
+
<p class="ons-u-fs-s ons-u-mb-no ons-header-nav-menu__description">
|
|
496
|
+
{item[`description_${lang}`]}
|
|
497
|
+
</p>
|
|
498
|
+
</li>
|
|
499
|
+
{/each}
|
|
500
|
+
</ul>
|
|
501
|
+
</div>
|
|
502
|
+
<div class="ons-container">
|
|
503
|
+
<ul class="ons-grid ons-list ons-list--bare">
|
|
504
|
+
{#each columns as col, i (i)}
|
|
505
|
+
<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
|
|
506
|
+
{#each col as topic (topic.url)}
|
|
507
|
+
<h2 class="ons-u-fs-s--b ons-header-nav-menu__heading">
|
|
508
|
+
<a href="{baseurl}{topic.url}" class="ons-header-nav-menu__link"
|
|
509
|
+
>{topic[`label_${lang}`]}</a
|
|
510
|
+
>
|
|
511
|
+
</h2>
|
|
512
|
+
<ul class="ons-list ons-list--bare ons-header-nav-menu__groupItem-list">
|
|
513
|
+
{#each topic.children as item (item.url)}
|
|
514
|
+
<li class="ons-u-mb-no">
|
|
515
|
+
<p class="ons-u-fs-s ons-header-nav-menu_text">
|
|
516
|
+
<a href="{baseurl}{item.url}" class="ons-header-nav-menu__link"
|
|
517
|
+
>{item[`label_${lang}`]}</a
|
|
518
|
+
>
|
|
519
|
+
</p>
|
|
520
|
+
</li>
|
|
521
|
+
{/each}
|
|
522
|
+
</ul>
|
|
523
|
+
{/each}
|
|
524
|
+
</li>
|
|
525
|
+
{/each}
|
|
526
|
+
</ul>
|
|
527
|
+
</div>
|
|
528
|
+
</nav>
|
|
529
|
+
<nav
|
|
530
|
+
class="ons-js-header-search ons-header-nav-search"
|
|
531
|
+
id="search"
|
|
532
|
+
aria-label="Nav Search"
|
|
533
|
+
aria-hidden="false"
|
|
534
|
+
>
|
|
535
|
+
<div class="ons-container">
|
|
536
|
+
<form class="ons-header-nav-search__input" method="get" action="https://www.ons.gov.uk/search">
|
|
537
|
+
<div class="ons-field">
|
|
538
|
+
<label class="ons-label" for="search-field" id="header-search-input-label"
|
|
539
|
+
>{i18n("Search the ONS")}</label
|
|
540
|
+
>
|
|
541
|
+
<span
|
|
542
|
+
class="ons-grid-flex ons-grid-flex--vertical-top ons-input_search-button ons-input__button--header-search"
|
|
543
|
+
>
|
|
544
|
+
<input
|
|
545
|
+
type="search"
|
|
546
|
+
id="search-field"
|
|
547
|
+
class="ons-input ons-input--text ons-input-type__input ons-search__input ons-input--header-search ons-input--w-full"
|
|
548
|
+
name="q"
|
|
549
|
+
/>
|
|
550
|
+
<button type="submit" class="ons-btn ons-search__btn ons-btn--header-search">
|
|
551
|
+
<span class="ons-btn__inner"
|
|
552
|
+
><svg
|
|
553
|
+
class="ons-icon"
|
|
554
|
+
viewBox="0 0 12 12"
|
|
555
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
556
|
+
aria-hidden="true"
|
|
557
|
+
fill="currentColor"
|
|
558
|
+
role="img"
|
|
559
|
+
>
|
|
560
|
+
<path
|
|
561
|
+
d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z"
|
|
562
|
+
/>
|
|
563
|
+
</svg><span class="ons-btn__text ons-u-vh@2xs@s"
|
|
564
|
+
><span class="ons-u-vh">{i18n("Search")}</span></span
|
|
565
|
+
></span
|
|
566
|
+
>
|
|
567
|
+
</button>
|
|
568
|
+
</span>
|
|
569
|
+
</div>
|
|
570
|
+
</form>
|
|
571
|
+
</div>
|
|
572
|
+
<div class="ons-container">
|
|
573
|
+
<h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
|
|
574
|
+
{i18n("Popular searches")}
|
|
575
|
+
</h2>
|
|
576
|
+
<ul class="ons-list ons-list--bare ons-list--inline">
|
|
577
|
+
{#each menu.searches as item (item.label_en)}
|
|
578
|
+
<li class="ons-list__item">
|
|
579
|
+
<a
|
|
580
|
+
href="{baseurl}search?q={item[`label_${lang}`]}"
|
|
581
|
+
class="ons-u-fs-r ons-header-nav-search__text">{item[`label_${lang}`]}</a
|
|
582
|
+
>
|
|
583
|
+
</li>
|
|
584
|
+
{/each}
|
|
585
|
+
</ul>
|
|
586
|
+
</div>
|
|
587
|
+
</nav>
|
|
588
|
+
|
|
589
|
+
<style>
|
|
590
|
+
.ons-header__grid-top {
|
|
591
|
+
padding: 0;
|
|
592
|
+
}
|
|
593
|
+
.ons-header__top {
|
|
594
|
+
background: var(--ons-color-page-light);
|
|
595
|
+
}
|
|
596
|
+
.ons-icon--logo__group--primary,
|
|
597
|
+
.ons-icon--logo__group--text {
|
|
598
|
+
fill: var(--ons-color-text-link-hover);
|
|
599
|
+
}
|
|
600
|
+
.ons-header__top--border {
|
|
601
|
+
border-bottom: 1px solid var(--ons-color-borders);
|
|
602
|
+
}
|
|
603
|
+
.ons-header__language {
|
|
604
|
+
display: block;
|
|
605
|
+
margin-top: 0.85em;
|
|
606
|
+
}
|
|
607
|
+
:global(.dark-mode .ons-header-nav-menu, .dark-mode .ons-header-nav-search) {
|
|
608
|
+
background-color: var(--ons-color-branded-secondary);
|
|
609
|
+
}
|
|
610
|
+
:global(
|
|
611
|
+
.dark-mode .ons-btn--menu[aria-expanded="true"],
|
|
612
|
+
.dark-mode .ons-btn--search[aria-expanded="true"]
|
|
613
|
+
) {
|
|
614
|
+
background-color: var(--ons-color-branded-secondary);
|
|
615
|
+
border-color: var(--ons-color-branded-secondary);
|
|
616
|
+
}
|
|
617
|
+
:global(.dark-mode .ons-search__input) {
|
|
618
|
+
color: var(--ons-color-black);
|
|
619
|
+
}
|
|
620
|
+
</style>
|
|
@@ -2,9 +2,13 @@
|
|
|
2
2
|
/** @typedef {typeof __propDef.events} HeaderNavEvents */
|
|
3
3
|
/** @typedef {typeof __propDef.slots} HeaderNavSlots */
|
|
4
4
|
export default class HeaderNav extends SvelteComponentTyped<{
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
path?: string | undefined;
|
|
6
|
+
darkMode?: boolean | undefined;
|
|
7
|
+
border?: boolean | undefined;
|
|
8
|
+
bilingual?: boolean | undefined;
|
|
9
|
+
lang?: string | undefined;
|
|
7
10
|
baseurl?: string | undefined;
|
|
11
|
+
baseother?: string | undefined;
|
|
8
12
|
i18n?: ((text: any) => any) | undefined;
|
|
9
13
|
}, {
|
|
10
14
|
[evt: string]: CustomEvent<any>;
|
|
@@ -16,9 +20,13 @@ export type HeaderNavSlots = typeof __propDef.slots;
|
|
|
16
20
|
import { SvelteComponentTyped } from "svelte";
|
|
17
21
|
declare const __propDef: {
|
|
18
22
|
props: {
|
|
19
|
-
|
|
20
|
-
|
|
23
|
+
path?: string | undefined;
|
|
24
|
+
darkMode?: boolean | undefined;
|
|
25
|
+
border?: boolean | undefined;
|
|
26
|
+
bilingual?: boolean | undefined;
|
|
27
|
+
lang?: string | undefined;
|
|
21
28
|
baseurl?: string | undefined;
|
|
29
|
+
baseother?: string | undefined;
|
|
22
30
|
i18n?: ((text: any) => any) | undefined;
|
|
23
31
|
};
|
|
24
32
|
events: {
|