@onsvisual/svelte-components 1.1.11 → 1.1.13

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 (11) hide show
  1. package/dist/components/Footer/Footer.svelte +12 -5
  2. package/dist/components/Footer/Footer.svelte.d.ts +2 -0
  3. package/dist/components/Header/Header.svelte +19 -6
  4. package/dist/components/Header/Header.svelte.d.ts +2 -0
  5. package/dist/components/Header/HeaderNav.svelte +12 -10
  6. package/dist/components/Header/HeaderNav.svelte.d.ts +2 -0
  7. package/dist/components/Header/HeaderNavCompact.svelte +5 -2
  8. package/dist/components/Header/HeaderNavCompact.svelte.d.ts +2 -0
  9. package/dist/components/PhaseBanner/PhaseBanner.svelte +16 -3
  10. package/dist/components/PhaseBanner/PhaseBanner.svelte.d.ts +2 -0
  11. package/package.json +1 -1
package/dist/components/Footer/Footer.svelte CHANGED
@@ -1,6 +1,7 @@
1
1
  <script>
2
2
  import { onMount, getContext } from "svelte";
3
3
  import Theme from "../Theme/Theme.svelte";
4
+ import Container from "../Container/Container.svelte";
4
5
 
5
6
  const page = getContext("page");
6
7
 
@@ -9,6 +10,11 @@
9
10
  * @type {boolean}
10
11
  */
11
12
  export let compact = false;
13
+ /**
14
+ * Sets the width of the header (does not apply to legacy mode)
15
+ * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
16
+ */
17
+ export let width = "wide";
12
18
  /**
13
19
  * Sets a predefined theme
14
20
  * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
@@ -22,7 +28,6 @@
22
28
 
23
29
  let lang = "en";
24
30
  let baseurl = "https://www.ons.gov.uk";
25
- let path = "";
26
31
 
27
32
  const texts = {
28
33
  "Footer links": "",
@@ -58,15 +63,14 @@
58
63
  const url = page?.url || document.location;
59
64
  lang = url.host.startsWith("cy") ? "cy" : "en";
60
65
  baseurl = lang === "cy" ? "https://cy.ons.gov.uk" : "https://www.ons.gov.uk";
61
- path = url.pathname;
62
66
  }
63
67
  onMount(setPaths);
64
68
  </script>
65
69
 
66
70
  <Theme {theme} overrides={themeOverrides}>
67
- <footer class="ons-footer">
71
+ <footer class="ons-footer" class:ons-footer__full={width === "full"}>
68
72
  <div class="ons-footer__body" data-analytics="footer">
69
- <div class="ons-container">
73
+ <Container {width}>
70
74
  {#if !compact}
71
75
  <div class="ons-grid">
72
76
  <div class="ons-grid__col ons-col-4@m">
@@ -366,12 +370,15 @@
366
370
  </div>
367
371
  </div>
368
372
  </div>
369
- </div>
373
+ </Container>
370
374
  </div>
371
375
  </footer>
372
376
  </Theme>
373
377
 
374
378
  <style>
379
+ .ons-footer__full :global(.ons-page__container) {
380
+ padding: 0 12px;
381
+ }
375
382
  /* Reassignment of variables for theming */
376
383
  .ons-footer .ons-icon,
377
384
  .ons-footer .ons-icon--logo__group {
package/dist/components/Footer/Footer.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  /** @typedef {typeof __propDef.slots} FooterSlots */
4
4
  export default class Footer extends SvelteComponentTyped<{
5
5
  theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
6
+ width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
6
7
  themeOverrides?: object | undefined;
7
8
  compact?: boolean | undefined;
8
9
  }, {
@@ -16,6 +17,7 @@ import { SvelteComponentTyped } from "svelte";
16
17
  declare const __propDef: {
17
18
  props: {
18
19
  theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
20
+ width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
19
21
  themeOverrides?: object | undefined;
20
22
  compact?: boolean | undefined;
21
23
  };
package/dist/components/Header/Header.svelte CHANGED
@@ -1,6 +1,7 @@
1
1
  <script>
2
2
  import { onMount, getContext } from "svelte";
3
3
  import Theme from "../Theme/Theme.svelte";
4
+ import Container from "../Container/Container.svelte";
4
5
  import SkipLink from "../SkipLink/SkipLink.svelte";
5
6
  import HeaderNav from "./HeaderNav.svelte";
6
7
  import HeaderNavCompact from "./HeaderNavCompact.svelte";
@@ -18,6 +19,11 @@
18
19
  * @type {string|null}
19
20
  */
20
21
  export let titleHref = null;
22
+ /**
23
+ * Sets the width of the header (does not apply to legacy mode)
24
+ * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
25
+ */
26
+ export let width = "wide";
21
27
  /**
22
28
  * Sets a predefined theme
23
29
  * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
@@ -99,7 +105,7 @@
99
105
  });
100
106
  </script>
101
107
 
102
- <header class="ons-header" role="banner">
108
+ <header class="ons-header" class:ons-header__full={width === "full"} role="banner">
103
109
  {#if skipHref}
104
110
  <SkipLink href={skipHref} />
105
111
  {/if}
@@ -111,7 +117,7 @@
111
117
  >
112
118
  <!-- <div id="pagePath" class="hide">{path}</div> -->
113
119
  <div class="ons-browser-banner">
114
- <div class="ons-container">
120
+ <Container {width}>
115
121
  <p class="ons-browser-banner__content">
116
122
  <span class="ons-browser-banner__lead">This website no longer supports your browser.</span
117
123
  ><span class="ons-browser-banner__cta">
@@ -120,12 +126,13 @@
120
126
  >.</span
121
127
  >
122
128
  </p>
123
- </div>
129
+ </Container>
124
130
  </div>
125
131
  {#if compact}
126
- <HeaderNavCompact {headerBorder} {baseurl} {i18n} />
132
+ <HeaderNavCompact {width} {headerBorder} {baseurl} {i18n} />
127
133
  {:else if !legacy}
128
134
  <HeaderNav
135
+ {width}
129
136
  {headerBorder}
130
137
  {menuBorder}
131
138
  {search}
@@ -141,7 +148,7 @@
141
148
  {/if}
142
149
  {#if title}
143
150
  <div class="ons-header__main">
144
- <div class="ons-container">
151
+ <Container {width}>
145
152
  <div
146
153
  class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
147
154
  >
@@ -155,8 +162,14 @@
155
162
  {/if}
156
163
  </div>
157
164
  </div>
158
- </div>
165
+ </Container>
159
166
  </div>
160
167
  {/if}
161
168
  </Theme>
162
169
  </header>
170
+
171
+ <style>
172
+ .ons-header__full :global(.ons-page__container) {
173
+ padding: 0 12px;
174
+ }
175
+ </style>
package/dist/components/Header/Header.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  /** @typedef {typeof __propDef.slots} HeaderSlots */
4
4
  export default class Header extends SvelteComponentTyped<{
5
5
  theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
6
+ width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
6
7
  themeOverrides?: object | undefined;
7
8
  search?: boolean | undefined;
8
9
  title?: string | null | undefined;
@@ -26,6 +27,7 @@ import { SvelteComponentTyped } from "svelte";
26
27
  declare const __propDef: {
27
28
  props: {
28
29
  theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
30
+ width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
29
31
  themeOverrides?: object | undefined;
30
32
  search?: boolean | undefined;
31
33
  title?: string | null | undefined;
package/dist/components/Header/HeaderNav.svelte CHANGED
@@ -1,7 +1,9 @@
1
1
  <script>
2
2
  import { onMount } from "svelte";
3
+ import Container from "../Container/Container.svelte";
3
4
  import initNav from "./nav.js";
4
5
 
6
+ export let width = "wide";
5
7
  export let headerBorder = false;
6
8
  export let menuBorder = false;
7
9
  export let search = true;
@@ -244,7 +246,7 @@
244
246
  </script>
245
247
 
246
248
  <div class="ons-header__top" class:ons-header--border={headerBorder} bind:this={el}>
247
- <div class="ons-container">
249
+ <Container {width}>
248
250
  <div
249
251
  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"
250
252
  >
@@ -466,7 +468,7 @@
466
468
  {/if}
467
469
  </div>
468
470
  </div>
469
- </div>
471
+ </Container>
470
472
  </div>
471
473
  <nav
472
474
  class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl ons-u-d-no"
@@ -475,7 +477,7 @@
475
477
  aria-label="Menu navigation"
476
478
  aria-hidden="true"
477
479
  >
478
- <div class="ons-container">
480
+ <Container {width}>
479
481
  <ul class="ons-grid ons-header-nav-menu__key-list">
480
482
  {#each menu.main as item (item.url)}
481
483
  <li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
@@ -490,8 +492,8 @@
490
492
  </li>
491
493
  {/each}
492
494
  </ul>
493
- </div>
494
- <div class="ons-container">
495
+ </Container>
496
+ <Container {width}>
495
497
  <ul class="ons-grid ons-list ons-list--bare">
496
498
  {#each columns as col, i (i)}
497
499
  <li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
@@ -516,7 +518,7 @@
516
518
  </li>
517
519
  {/each}
518
520
  </ul>
519
- </div>
521
+ </Container>
520
522
  </nav>
521
523
  {#if search}
522
524
  <nav
@@ -526,7 +528,7 @@
526
528
  aria-label="Nav Search"
527
529
  aria-hidden="true"
528
530
  >
529
- <div class="ons-container">
531
+ <Container {width}>
530
532
  <form
531
533
  class="ons-header-nav-search__input"
532
534
  method="get"
@@ -566,8 +568,8 @@
566
568
  </span>
567
569
  </div>
568
570
  </form>
569
- </div>
570
- <div class="ons-container">
571
+ </Container>
572
+ <Container {width}>
571
573
  <h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
572
574
  {i18n("Popular searches")}
573
575
  </h2>
@@ -581,7 +583,7 @@
581
583
  </li>
582
584
  {/each}
583
585
  </ul>
584
- </div>
586
+ </Container>
585
587
  </nav>
586
588
  {/if}
587
589
 
package/dist/components/Header/HeaderNav.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} HeaderNavEvents */
3
3
  /** @typedef {typeof __propDef.slots} HeaderNavSlots */
4
4
  export default class HeaderNav extends SvelteComponentTyped<{
5
+ width?: string | undefined;
5
6
  search?: boolean | undefined;
6
7
  path?: string | undefined;
7
8
  headerBorder?: boolean | undefined;
@@ -21,6 +22,7 @@ export type HeaderNavSlots = typeof __propDef.slots;
21
22
  import { SvelteComponentTyped } from "svelte";
22
23
  declare const __propDef: {
23
24
  props: {
25
+ width?: string | undefined;
24
26
  search?: boolean | undefined;
25
27
  path?: string | undefined;
26
28
  headerBorder?: boolean | undefined;
package/dist/components/Header/HeaderNavCompact.svelte CHANGED
@@ -1,11 +1,14 @@
1
1
  <script>
2
+ import Container from "../Container/Container.svelte";
3
+
4
+ export let width = "wide";
2
5
  export let headerBorder = false;
3
6
  export let baseurl = "https://www.ons.gov.uk";
4
7
  export let i18n = (text) => text;
5
8
  </script>
6
9
 
7
10
  <div class="ons-header__top" class:ons-header--border={headerBorder}>
8
- <div class="ons-container">
11
+ <Container {width}>
9
12
  <div
10
13
  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"
11
14
  >
@@ -156,7 +159,7 @@
156
159
  </a>
157
160
  </div>
158
161
  </div>
159
- </div>
162
+ </Container>
160
163
  </div>
161
164
 
162
165
  <style>
package/dist/components/Header/HeaderNavCompact.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} HeaderNavCompactEvents */
3
3
  /** @typedef {typeof __propDef.slots} HeaderNavCompactSlots */
4
4
  export default class HeaderNavCompact extends SvelteComponentTyped<{
5
+ width?: string | undefined;
5
6
  headerBorder?: boolean | undefined;
6
7
  baseurl?: string | undefined;
7
8
  i18n?: ((text: any) => any) | undefined;
@@ -15,6 +16,7 @@ export type HeaderNavCompactSlots = typeof __propDef.slots;
15
16
  import { SvelteComponentTyped } from "svelte";
16
17
  declare const __propDef: {
17
18
  props: {
19
+ width?: string | undefined;
18
20
  headerBorder?: boolean | undefined;
19
21
  baseurl?: string | undefined;
20
22
  i18n?: ((text: any) => any) | undefined;
package/dist/components/PhaseBanner/PhaseBanner.svelte CHANGED
@@ -1,4 +1,6 @@
1
1
  <script>
2
+ import Container from "../Container/Container.svelte";
3
+
2
4
  /**
3
5
  * Phase of project (alpha, beta, prototype etc.)
4
6
  * @type {string}
@@ -15,6 +17,11 @@
15
17
  * @type {string}
16
18
  */
17
19
  export let href = "https://www.ons.gov.uk/feedback";
20
+ /**
21
+ * Sets the width of the banner
22
+ * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
23
+ */
24
+ export let width = "wide";
18
25
  /**
19
26
  * Optional: Set an additional CSS class for the component
20
27
  * @type {string|null}
@@ -22,8 +29,8 @@
22
29
  export let cls = null;
23
30
  </script>
24
31
 
25
- <div class="ons-phase-banner {cls}">
26
- <div class="ons-container">
32
+ <div class="ons-phase-banner {cls}" class:ons-phase-banner__full={width === "full"}>
33
+ <Container {width}>
27
34
  <div
28
35
  class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap"
29
36
  >
@@ -68,5 +75,11 @@
68
75
  </p>
69
76
  </div>
70
77
  </div>
71
- </div>
78
+ </Container>
72
79
  </div>
80
+
81
+ <style>
82
+ .ons-phase-banner__full :global(.ons-page__container) {
83
+ padding: 0 12px;
84
+ }
85
+ </style>
package/dist/components/PhaseBanner/PhaseBanner.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@
3
3
  /** @typedef {typeof __propDef.slots} PhaseBannerSlots */
4
4
  export default class PhaseBanner extends SvelteComponentTyped<{
5
5
  cls?: string | null | undefined;
6
+ width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
6
7
  href?: string | undefined;
7
8
  description?: string | undefined;
8
9
  phase?: string | undefined;
@@ -17,6 +18,7 @@ import { SvelteComponentTyped } from "svelte";
17
18
  declare const __propDef: {
18
19
  props: {
19
20
  cls?: string | null | undefined;
21
+ width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
20
22
  href?: string | undefined;
21
23
  description?: string | undefined;
22
24
  phase?: string | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onsvisual/svelte-components",
3
- "version": "1.1.11",
3
+ "version": "1.1.13",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "npm run build:package && npm run build:docs",