@onsvisual/svelte-components 1.1.2 → 1.1.3

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 (7) hide show
  1. package/dist/components/Header/Header.svelte +22 -17
  2. package/dist/components/Header/Header.svelte.d.ts +4 -2
  3. package/dist/components/Header/HeaderNav.svelte +90 -82
  4. package/dist/components/Header/HeaderNav.svelte.d.ts +2 -2
  5. package/dist/components/Header/HeaderNavLegacy.svelte +39 -36
  6. package/dist/components/Header/HeaderNavLegacy.svelte.d.ts +2 -0
  7. 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}
@@ -103,9 +108,9 @@
103
108
  {#if compact}
104
109
  <HeaderNavCompact {border} {baseurl} {i18n} />
105
110
  {:else if !legacy}
106
- <HeaderNav {border} {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
111
+ <HeaderNav {search} {border} {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
116
  <div class="ons-header__main">
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
11
  border?: boolean | undefined;
11
12
  bilingual?: boolean | undefined;
12
- legacy?: boolean | undefined;
13
13
  titleHref?: string | null | 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
33
  border?: boolean | undefined;
32
34
  bilingual?: boolean | undefined;
33
- legacy?: boolean | undefined;
34
35
  titleHref?: string | null | undefined;
36
+ legacy?: boolean | undefined;
35
37
  };
36
38
  events: {
37
39
  [evt: string]: CustomEvent<any>;
package/dist/components/Header/HeaderNav.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import { onMount } from "svelte";
3
3
  import initNav from "./nav.js";
4
4
 
5
- export let darkMode = false;
5
+ export let search = true;
6
6
  export let border = false;
7
7
  export let bilingual = true;
8
8
  export let lang = "en";
@@ -431,31 +431,33 @@
431
431
  >
432
432
  </button>
433
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
434
+ {#if search}
435
+ <div class="ons-header__links ons-grid__col ons-header__menu-link">
436
+ <button
437
+ type="button"
438
+ 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"
439
+ aria-label="Toggle search"
440
+ aria-controls="search"
441
+ aria-expanded="true"
442
+ aria-disabled="true"
456
443
  >
457
- </button>
458
- </div>
444
+ <span class="ons-btn__inner"
445
+ ><svg
446
+ class="ons-icon ons-u-mr-2xs"
447
+ viewBox="0 0 12 12"
448
+ xmlns="http://www.w3.org/2000/svg"
449
+ aria-hidden="true"
450
+ fill="currentColor"
451
+ role="img"
452
+ >
453
+ <path
454
+ 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"
455
+ />
456
+ </svg><span class="ons-btn__text"></span></span
457
+ >
458
+ </button>
459
+ </div>
460
+ {/if}
459
461
  {#if bilingual}
460
462
  <div class="ons-grid__col ons-col-auto">
461
463
  <div class="ons-header__language">
@@ -526,65 +528,71 @@
526
528
  </ul>
527
529
  </div>
528
530
  </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"
531
+ {#if search}
532
+ <nav
533
+ class="ons-js-header-search ons-header-nav-search"
534
+ id="search"
535
+ aria-label="Nav Search"
536
+ aria-hidden="false"
537
+ >
538
+ <div class="ons-container">
539
+ <form
540
+ class="ons-header-nav-search__input"
541
+ method="get"
542
+ action="https://www.ons.gov.uk/search"
543
+ >
544
+ <div class="ons-field">
545
+ <label class="ons-label" for="search-field" id="header-search-input-label"
546
+ >{i18n("Search the ONS")}</label
547
+ >
548
+ <span
549
+ class="ons-grid-flex ons-grid-flex--vertical-top ons-input_search-button ons-input__button--header-search"
550
+ >
551
+ <input
552
+ type="search"
553
+ id="search-field"
554
+ class="ons-input ons-input--text ons-input-type__input ons-search__input ons-input--header-search ons-input--w-full"
555
+ name="q"
556
+ />
557
+ <button type="submit" class="ons-btn ons-search__btn ons-btn--header-search">
558
+ <span class="ons-btn__inner"
559
+ ><svg
560
+ class="ons-icon"
561
+ viewBox="0 0 12 12"
562
+ xmlns="http://www.w3.org/2000/svg"
563
+ aria-hidden="true"
564
+ fill="currentColor"
565
+ role="img"
566
+ >
567
+ <path
568
+ 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"
569
+ />
570
+ </svg><span class="ons-btn__text ons-u-vh@2xs@s"
571
+ ><span class="ons-u-vh">{i18n("Search")}</span></span
572
+ ></span
559
573
  >
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
574
+ </button>
575
+ </span>
576
+ </div>
577
+ </form>
578
+ </div>
579
+ <div class="ons-container">
580
+ <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
581
+ {i18n("Popular searches")}
582
+ </h2>
583
+ <ul class="ons-list ons-list--bare ons-list--inline">
584
+ {#each menu.searches as item (item.label_en)}
585
+ <li class="ons-list__item">
586
+ <a
587
+ href="{baseurl}search?q={item[`label_${lang}`]}"
588
+ class="ons-u-fs-r ons-header-nav-search__text">{item[`label_${lang}`]}</a
566
589
  >
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>
590
+ </li>
591
+ {/each}
592
+ </ul>
593
+ </div>
594
+ </nav>
595
+ {/if}
588
596
 
589
597
  <style>
590
598
  .ons-header__grid-top {
package/dist/components/Header/HeaderNav.svelte.d.ts CHANGED
@@ -2,8 +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
7
  border?: boolean | undefined;
8
8
  bilingual?: boolean | undefined;
9
9
  lang?: string | undefined;
@@ -20,8 +20,8 @@ export type HeaderNavSlots = typeof __propDef.slots;
20
20
  import { SvelteComponentTyped } from "svelte";
21
21
  declare const __propDef: {
22
22
  props: {
23
+ search?: boolean | undefined;
23
24
  path?: string | undefined;
24
- darkMode?: boolean | undefined;
25
25
  border?: boolean | undefined;
26
26
  bilingual?: boolean | undefined;
27
27
  lang?: string | undefined;
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onsvisual/svelte-components",
3
- "version": "1.1.2",
3
+ "version": "1.1.3",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "npm run build:package && npm run build:docs",