@onsvisual/svelte-components 1.1.2 → 1.1.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.
Files changed (10) hide show
  1. package/dist/components/Header/Header.svelte +31 -20
  2. package/dist/components/Header/Header.svelte.d.ts +6 -4
  3. package/dist/components/Header/HeaderNav.svelte +91 -87
  4. package/dist/components/Header/HeaderNav.svelte.d.ts +2 -4
  5. package/dist/components/Header/HeaderNavCompact.svelte +1 -5
  6. package/dist/components/Header/HeaderNavCompact.svelte.d.ts +0 -2
  7. package/dist/components/Header/HeaderNavLegacy.svelte +39 -36
  8. package/dist/components/Header/HeaderNavLegacy.svelte.d.ts +2 -0
  9. package/dist/css/main.css +1 -1
  10. package/package.json +1 -1
package/dist/components/Header/Header.svelte CHANGED
@@ -8,21 +8,6 @@
8
8
 
9
9
  const page = getContext("page");
10
10
 
11
- /**
12
- * Display compact header without menus
13
- * @type {boolean}
14
- */
15
- export let compact = false;
16
- /**
17
- * Use the legacy nav header
18
- * @type {boolean}
19
- */
20
- export let legacy = false;
21
- /**
22
- * Include a border/line under the header
23
- * @type {boolean}
24
- */
25
- export let border = false;
26
11
  /**
27
12
  * Optional product title
28
13
  * @type {string|null}
@@ -43,11 +28,31 @@
43
28
  * @type {object}
44
29
  */
45
30
  export let themeOverrides = {};
31
+ /**
32
+ * Display compact header without menus
33
+ * @type {boolean}
34
+ */
35
+ export let compact = false;
36
+ /**
37
+ * Include site search
38
+ * @type {boolean}
39
+ */
40
+ export let search = true;
46
41
  /**
47
42
  * Set to true to include an English/Welsh language link
48
43
  * @type {boolean}
49
44
  */
50
45
  export let bilingual = true;
46
+ /**
47
+ * Include a border/line under the header
48
+ * @type {boolean}
49
+ */
50
+ export let border = false;
51
+ /**
52
+ * Use the legacy nav header
53
+ * @type {boolean}
54
+ */
55
+ export let legacy = false;
51
56
  /**
52
57
  * Anchor link to skip to main body content (default "#main")
53
58
  * @type {string|null}
@@ -89,7 +94,7 @@
89
94
  });
90
95
  </script>
91
96
 
92
- <header class="ons-header" role="banner">
97
+ <header class="ons-header" class:ons-header--border={border && !title} role="banner">
93
98
  {#if skipHref}
94
99
  <SkipLink href={skipHref} />
95
100
  {/if}
@@ -101,14 +106,14 @@
101
106
  >
102
107
  <!-- <div id="pagePath" class="hide">{path}</div> -->
103
108
  {#if compact}
104
- <HeaderNavCompact {border} {baseurl} {i18n} />
109
+ <HeaderNavCompact {baseurl} {i18n} />
105
110
  {:else if !legacy}
106
- <HeaderNav {border} {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
111
+ <HeaderNav {search} {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
107
112
  {:else}
108
- <HeaderNavLegacy {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
113
+ <HeaderNavLegacy {search} {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
109
114
  {/if}
110
115
  {#if title}
111
- <div class="ons-header__main">
116
+ <div class="ons-header__main" class:ons-header--border={border}>
112
117
  <div class="ons-container">
113
118
  <div
114
119
  class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
@@ -128,3 +133,9 @@
128
133
  {/if}
129
134
  </Theme>
130
135
  </header>
136
+
137
+ <style>
138
+ .ons-header--border {
139
+ border-bottom: 1px solid var(--ons-color-borders);
140
+ }
141
+ </style>
package/dist/components/Header/Header.svelte.d.ts CHANGED
@@ -4,13 +4,14 @@
4
4
  export default class Header extends SvelteComponentTyped<{
5
5
  theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
6
6
  themeOverrides?: object | undefined;
7
+ search?: boolean | undefined;
7
8
  title?: string | null | undefined;
8
9
  skipHref?: string | null | undefined;
9
10
  compact?: boolean | undefined;
10
- border?: boolean | undefined;
11
11
  bilingual?: boolean | undefined;
12
- legacy?: boolean | undefined;
13
12
  titleHref?: string | null | undefined;
13
+ border?: boolean | undefined;
14
+ legacy?: boolean | undefined;
14
15
  }, {
15
16
  [evt: string]: CustomEvent<any>;
16
17
  }, {
@@ -25,13 +26,14 @@ declare const __propDef: {
25
26
  props: {
26
27
  theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
27
28
  themeOverrides?: object | undefined;
29
+ search?: boolean | undefined;
28
30
  title?: string | null | undefined;
29
31
  skipHref?: string | null | undefined;
30
32
  compact?: boolean | undefined;
31
- border?: boolean | undefined;
32
33
  bilingual?: boolean | undefined;
33
- legacy?: boolean | undefined;
34
34
  titleHref?: string | null | undefined;
35
+ border?: boolean | undefined;
36
+ legacy?: boolean | undefined;
35
37
  };
36
38
  events: {
37
39
  [evt: string]: CustomEvent<any>;
package/dist/components/Header/HeaderNav.svelte CHANGED
@@ -2,8 +2,7 @@
2
2
  import { onMount } from "svelte";
3
3
  import initNav from "./nav.js";
4
4
 
5
- export let darkMode = false;
6
- export let border = false;
5
+ export let search = true;
7
6
  export let bilingual = true;
8
7
  export let lang = "en";
9
8
  export let baseurl = "https://www.ons.gov.uk";
@@ -254,7 +253,7 @@
254
253
  </p>
255
254
  </div>
256
255
  </div>
257
- <div class="ons-header__top" class:ons-header__top--border={border}>
256
+ <div class="ons-header__top">
258
257
  <div class="ons-container">
259
258
  <div
260
259
  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"
@@ -431,31 +430,33 @@
431
430
  >
432
431
  </button>
433
432
  </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
433
+ {#if search}
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"
456
442
  >
457
- </button>
458
- </div>
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}
459
460
  {#if bilingual}
460
461
  <div class="ons-grid__col ons-col-auto">
461
462
  <div class="ons-header__language">
@@ -526,65 +527,71 @@
526
527
  </ul>
527
528
  </div>
528
529
  </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"
530
+ {#if search}
531
+ <nav
532
+ class="ons-js-header-search ons-header-nav-search ons-u-d-no"
533
+ id="search"
534
+ aria-label="Nav Search"
535
+ aria-hidden="true"
536
+ >
537
+ <div class="ons-container">
538
+ <form
539
+ class="ons-header-nav-search__input"
540
+ method="get"
541
+ action="https://www.ons.gov.uk/search"
542
+ >
543
+ <div class="ons-field">
544
+ <label class="ons-label" for="search-field" id="header-search-input-label"
545
+ >{i18n("Search the ONS")}</label
546
+ >
547
+ <span
548
+ class="ons-grid-flex ons-grid-flex--vertical-top ons-input_search-button ons-input__button--header-search"
549
+ >
550
+ <input
551
+ type="search"
552
+ id="search-field"
553
+ class="ons-input ons-input--text ons-input-type__input ons-search__input ons-input--header-search ons-input--w-full"
554
+ name="q"
555
+ />
556
+ <button type="submit" class="ons-btn ons-search__btn ons-btn--header-search">
557
+ <span class="ons-btn__inner"
558
+ ><svg
559
+ class="ons-icon"
560
+ viewBox="0 0 12 12"
561
+ xmlns="http://www.w3.org/2000/svg"
562
+ aria-hidden="true"
563
+ fill="currentColor"
564
+ role="img"
565
+ >
566
+ <path
567
+ 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"
568
+ />
569
+ </svg><span class="ons-btn__text ons-u-vh@2xs@s"
570
+ ><span class="ons-u-vh">{i18n("Search")}</span></span
571
+ ></span
559
572
  >
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
573
+ </button>
574
+ </span>
575
+ </div>
576
+ </form>
577
+ </div>
578
+ <div class="ons-container">
579
+ <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
580
+ {i18n("Popular searches")}
581
+ </h2>
582
+ <ul class="ons-list ons-list--bare ons-list--inline">
583
+ {#each menu.searches as item (item.label_en)}
584
+ <li class="ons-list__item">
585
+ <a
586
+ href="{baseurl}search?q={item[`label_${lang}`]}"
587
+ class="ons-u-fs-r ons-header-nav-search__text">{item[`label_${lang}`]}</a
566
588
  >
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>
589
+ </li>
590
+ {/each}
591
+ </ul>
592
+ </div>
593
+ </nav>
594
+ {/if}
588
595
 
589
596
  <style>
590
597
  .ons-header__grid-top {
@@ -597,9 +604,6 @@
597
604
  .ons-icon--logo__group--text {
598
605
  fill: var(--ons-color-text-link-hover);
599
606
  }
600
- .ons-header__top--border {
601
- border-bottom: 1px solid var(--ons-color-borders);
602
- }
603
607
  .ons-header__language {
604
608
  display: block;
605
609
  margin-top: 0.85em;
package/dist/components/Header/HeaderNav.svelte.d.ts CHANGED
@@ -2,9 +2,8 @@
2
2
  /** @typedef {typeof __propDef.events} HeaderNavEvents */
3
3
  /** @typedef {typeof __propDef.slots} HeaderNavSlots */
4
4
  export default class HeaderNav extends SvelteComponentTyped<{
5
+ search?: boolean | undefined;
5
6
  path?: string | undefined;
6
- darkMode?: boolean | undefined;
7
- border?: boolean | undefined;
8
7
  bilingual?: boolean | undefined;
9
8
  lang?: string | undefined;
10
9
  baseurl?: string | undefined;
@@ -20,9 +19,8 @@ export type HeaderNavSlots = typeof __propDef.slots;
20
19
  import { SvelteComponentTyped } from "svelte";
21
20
  declare const __propDef: {
22
21
  props: {
22
+ search?: boolean | undefined;
23
23
  path?: string | undefined;
24
- darkMode?: boolean | undefined;
25
- border?: boolean | undefined;
26
24
  bilingual?: boolean | undefined;
27
25
  lang?: string | undefined;
28
26
  baseurl?: string | undefined;
package/dist/components/Header/HeaderNavCompact.svelte CHANGED
@@ -1,5 +1,4 @@
1
1
  <script>
2
- export let border = false;
3
2
  export let baseurl = "https://www.ons.gov.uk";
4
3
  export let i18n = (text) => text;
5
4
  </script>
@@ -16,7 +15,7 @@
16
15
  </p>
17
16
  </div>
18
17
  </div>
19
- <div class="ons-header__top" class:ons-header__top--border={border}>
18
+ <div class="ons-header__top">
20
19
  <div class="ons-container">
21
20
  <div
22
21
  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"
@@ -179,7 +178,4 @@
179
178
  .ons-icon--logo__group--text {
180
179
  fill: var(--ons-color-text-link-hover);
181
180
  }
182
- .ons-header__top--border {
183
- border-bottom: 1px solid var(--ons-color-borders);
184
- }
185
181
  </style>
package/dist/components/Header/HeaderNavCompact.svelte.d.ts CHANGED
@@ -2,7 +2,6 @@
2
2
  /** @typedef {typeof __propDef.events} HeaderNavCompactEvents */
3
3
  /** @typedef {typeof __propDef.slots} HeaderNavCompactSlots */
4
4
  export default class HeaderNavCompact extends SvelteComponentTyped<{
5
- border?: boolean | undefined;
6
5
  baseurl?: string | undefined;
7
6
  i18n?: ((text: any) => any) | undefined;
8
7
  }, {
@@ -15,7 +14,6 @@ export type HeaderNavCompactSlots = typeof __propDef.slots;
15
14
  import { SvelteComponentTyped } from "svelte";
16
15
  declare const __propDef: {
17
16
  props: {
18
- border?: boolean | undefined;
19
17
  baseurl?: string | undefined;
20
18
  i18n?: ((text: any) => any) | undefined;
21
19
  };
package/dist/components/Header/HeaderNavLegacy.svelte CHANGED
@@ -2,6 +2,7 @@
2
2
  import { onMount } from "svelte";
3
3
  import initNav from "./navLegacy.js";
4
4
 
5
+ export let search = true;
5
6
  export let bilingual = true;
6
7
  export let lang = "en";
7
8
  export let baseurl = "https://www.ons.gov.uk";
@@ -404,41 +405,43 @@
404
405
  </ul>
405
406
  </nav>
406
407
  </div>
407
- <div class="search nav-search--hidden print--hide" id="searchBar">
408
- <div class="ons-container" role="search">
409
- <form class="col-wrap search__form" action="{baseurl}/search">
410
- <label class="search__label col col--md-23 col--lg-24" for="nav-search"
411
- >{i18n("Search for a keyword(s) or time series ID")}</label
412
- >
413
- <input
414
- type="search"
415
- autocomplete="off"
416
- class="search__input col col--md-21 col--lg-32"
417
- id="nav-search"
418
- name="q"
419
- value=""
420
- />
421
- <button
422
- type="submit"
423
- class="search__button col--md-3 col--lg-3"
424
- id="nav-search-submit"
425
- aria-label={i18n("Search")}
426
- >
427
- <span class="icon-search--light">
428
- <svg
429
- class="ons-svg-icon ons-svg-icon--m"
430
- viewBox="0 0 12 12"
431
- xmlns="http://www.w3.org/2000/svg"
432
- aria-hidden="true"
433
- fill="currentColor"
434
- >
435
- <path
436
- 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
408
+ {#if search}
409
+ <div class="search nav-search--hidden print--hide" id="searchBar">
410
+ <div class="ons-container" role="search">
411
+ <form class="col-wrap search__form" action="{baseurl}/search">
412
+ <label class="search__label col col--md-23 col--lg-24" for="nav-search"
413
+ >{i18n("Search for a keyword(s) or time series ID")}</label
414
+ >
415
+ <input
416
+ type="search"
417
+ autocomplete="off"
418
+ class="search__input col col--md-21 col--lg-32"
419
+ id="nav-search"
420
+ name="q"
421
+ value=""
422
+ />
423
+ <button
424
+ type="submit"
425
+ class="search__button col--md-3 col--lg-3"
426
+ id="nav-search-submit"
427
+ aria-label={i18n("Search")}
428
+ >
429
+ <span class="icon-search--light">
430
+ <svg
431
+ class="ons-svg-icon ons-svg-icon--m"
432
+ viewBox="0 0 12 12"
433
+ xmlns="http://www.w3.org/2000/svg"
434
+ aria-hidden="true"
435
+ fill="currentColor"
436
+ >
437
+ <path
438
+ 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
437
439
  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"
438
- ></path>
439
- </svg>
440
- </span>
441
- </button>
442
- </form>
440
+ ></path>
441
+ </svg>
442
+ </span>
443
+ </button>
444
+ </form>
445
+ </div>
443
446
  </div>
444
- </div>
447
+ {/if}
package/dist/components/Header/HeaderNavLegacy.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} HeaderNavLegacyEvents */
3
3
  /** @typedef {typeof __propDef.slots} HeaderNavLegacySlots */
4
4
  export default class HeaderNavLegacy extends SvelteComponentTyped<{
5
+ search?: boolean | undefined;
5
6
  path?: string | undefined;
6
7
  bilingual?: boolean | undefined;
7
8
  lang?: string | undefined;
@@ -18,6 +19,7 @@ export type HeaderNavLegacySlots = typeof __propDef.slots;
18
19
  import { SvelteComponentTyped } from "svelte";
19
20
  declare const __propDef: {
20
21
  props: {
22
+ search?: boolean | undefined;
21
23
  path?: string | undefined;
22
24
  bilingual?: boolean | undefined;
23
25
  lang?: string | undefined;