@onsvisual/svelte-components 1.1.11 → 1.1.13

package/dist/components/Footer/Footer.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { onMount, getContext } from "svelte";
 	import Theme from "../Theme/Theme.svelte";
+	import Container from "../Container/Container.svelte";
 
 	const page = getContext("page");
 
@@ -9,6 +10,11 @@
 	 * @type {boolean}
 	 */
 	export let compact = false;
+	/**
+	 * Sets the width of the header (does not apply to legacy mode)
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
 	/**
 	 * Sets a predefined theme
 	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
@@ -22,7 +28,6 @@
 
 	let lang = "en";
 	let baseurl = "https://www.ons.gov.uk";
-	let path = "";
 
 	const texts = {
 		"Footer links": "",
@@ -58,15 +63,14 @@
 		const url = page?.url || document.location;
 		lang = url.host.startsWith("cy") ? "cy" : "en";
 		baseurl = lang === "cy" ? "https://cy.ons.gov.uk" : "https://www.ons.gov.uk";
-		path = url.pathname;
 	}
 	onMount(setPaths);
 </script>
 
 <Theme {theme} overrides={themeOverrides}>
-	<footer class="ons-footer">
+	<footer class="ons-footer" class:ons-footer__full={width === "full"}>
 		<div class="ons-footer__body" data-analytics="footer">
-			<div class="ons-container">
+			<Container {width}>
 				{#if !compact}
 					<div class="ons-grid">
 						<div class="ons-grid__col ons-col-4@m">
@@ -366,12 +370,15 @@
 						</div>
 					</div>
 				</div>
-			</div>
+			</Container>
 		</div>
 	</footer>
 </Theme>
 
 <style>
+	.ons-footer__full :global(.ons-page__container) {
+		padding: 0 12px;
+	}
 	/* Reassignment of variables for theming */
 	.ons-footer .ons-icon,
 	.ons-footer .ons-icon--logo__group {

package/dist/components/Footer/Footer.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  FooterSlots */
 export default class Footer extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     themeOverrides?: object | undefined;
     compact?: boolean | undefined;
 }, {
@@ -16,6 +17,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         themeOverrides?: object | undefined;
         compact?: boolean | undefined;
     };

package/dist/components/Header/Header.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { onMount, getContext } from "svelte";
 	import Theme from "../Theme/Theme.svelte";
+	import Container from "../Container/Container.svelte";
 	import SkipLink from "../SkipLink/SkipLink.svelte";
 	import HeaderNav from "./HeaderNav.svelte";
 	import HeaderNavCompact from "./HeaderNavCompact.svelte";
@@ -18,6 +19,11 @@
 	 * @type {string|null}
 	 */
 	export let titleHref = null;
+	/**
+	 * Sets the width of the header (does not apply to legacy mode)
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
 	/**
 	 * Sets a predefined theme
 	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
@@ -99,7 +105,7 @@
 	});
 </script>
 
-<header class="ons-header" role="banner">
+<header class="ons-header" class:ons-header__full={width === "full"} role="banner">
 	{#if skipHref}
 		<SkipLink href={skipHref} />
 	{/if}
@@ -111,7 +117,7 @@
 	>
 		<!-- <div id="pagePath" class="hide">{path}</div> -->
 		<div class="ons-browser-banner">
-			<div class="ons-container">
+			<Container {width}>
 				<p class="ons-browser-banner__content">
 					<span class="ons-browser-banner__lead">This website no longer supports your browser.</span
 					><span class="ons-browser-banner__cta">
@@ -120,12 +126,13 @@
 						>.</span
 					>
 				</p>
-			</div>
+			</Container>
 		</div>
 		{#if compact}
-			<HeaderNavCompact {headerBorder} {baseurl} {i18n} />
+			<HeaderNavCompact {width} {headerBorder} {baseurl} {i18n} />
 		{:else if !legacy}
 			<HeaderNav
+				{width}
 				{headerBorder}
 				{menuBorder}
 				{search}
@@ -141,7 +148,7 @@
 		{/if}
 		{#if title}
 			<div class="ons-header__main">
-				<div class="ons-container">
+				<Container {width}>
 					<div
 						class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
 					>
@@ -155,8 +162,14 @@
 							{/if}
 						</div>
 					</div>
-				</div>
+				</Container>
 			</div>
 		{/if}
 	</Theme>
 </header>
+
+<style>
+	.ons-header__full :global(.ons-page__container) {
+		padding: 0 12px;
+	}
+</style>

package/dist/components/Header/Header.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  HeaderSlots */
 export default class Header extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     themeOverrides?: object | undefined;
     search?: boolean | undefined;
     title?: string | null | undefined;
@@ -26,6 +27,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         themeOverrides?: object | undefined;
         search?: boolean | undefined;
         title?: string | null | undefined;

package/dist/components/Header/HeaderNav.svelte

@@ -1,7 +1,9 @@
 <script>
 	import { onMount } from "svelte";
+	import Container from "../Container/Container.svelte";
 	import initNav from "./nav.js";
 
+	export let width = "wide";
 	export let headerBorder = false;
 	export let menuBorder = false;
 	export let search = true;
@@ -244,7 +246,7 @@
 </script>
 
 <div class="ons-header__top" class:ons-header--border={headerBorder} bind:this={el}>
-	<div class="ons-container">
+	<Container {width}>
 		<div
 			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"
 		>
@@ -466,7 +468,7 @@
 				{/if}
 			</div>
 		</div>
-	</div>
+	</Container>
 </div>
 <nav
 	class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl ons-u-d-no"
@@ -475,7 +477,7 @@
 	aria-label="Menu navigation"
 	aria-hidden="true"
 >
-	<div class="ons-container">
+	<Container {width}>
 		<ul class="ons-grid ons-header-nav-menu__key-list">
 			{#each menu.main as item (item.url)}
 				<li class="ons-grid__col ons-col-4@m ons-header-nav-menu__col">
@@ -490,8 +492,8 @@
 				</li>
 			{/each}
 		</ul>
-	</div>
-	<div class="ons-container">
+	</Container>
+	<Container {width}>
 		<ul class="ons-grid ons-list ons-list--bare">
 			{#each columns as col, i (i)}
 				<li class="ons-grid__col ons-col-4@m ons-u-mb-no ons-header-nav-menu__col">
@@ -516,7 +518,7 @@
 				</li>
 			{/each}
 		</ul>
-	</div>
+	</Container>
 </nav>
 {#if search}
 	<nav
@@ -526,7 +528,7 @@
 		aria-label="Nav Search"
 		aria-hidden="true"
 	>
-		<div class="ons-container">
+		<Container {width}>
 			<form
 				class="ons-header-nav-search__input"
 				method="get"
@@ -566,8 +568,8 @@
 					</span>
 				</div>
 			</form>
-		</div>
-		<div class="ons-container">
+		</Container>
+		<Container {width}>
 			<h2 class="ons-u-fs-r--b ons-u-mb-s ons-header-nav-search__heading">
 				{i18n("Popular searches")}
 			</h2>
@@ -581,7 +583,7 @@
 					</li>
 				{/each}
 			</ul>
-		</div>
+		</Container>
 	</nav>
 {/if}
 

package/dist/components/Header/HeaderNav.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  HeaderNavEvents */
 /** @typedef {typeof __propDef.slots}  HeaderNavSlots */
 export default class HeaderNav extends SvelteComponentTyped<{
+    width?: string | undefined;
     search?: boolean | undefined;
     path?: string | undefined;
     headerBorder?: boolean | undefined;
@@ -21,6 +22,7 @@ export type HeaderNavSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        width?: string | undefined;
         search?: boolean | undefined;
         path?: string | undefined;
         headerBorder?: boolean | undefined;

package/dist/components/Header/HeaderNavCompact.svelte

@@ -1,11 +1,14 @@
 <script>
+	import Container from "../Container/Container.svelte";
+
+	export let width = "wide";
 	export let headerBorder = false;
 	export let baseurl = "https://www.ons.gov.uk";
 	export let i18n = (text) => text;
 </script>
 
 <div class="ons-header__top" class:ons-header--border={headerBorder}>
-	<div class="ons-container">
+	<Container {width}>
 		<div
 			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"
 		>
@@ -156,7 +159,7 @@
 				</a>
 			</div>
 		</div>
-	</div>
+	</Container>
 </div>
 
 <style>

package/dist/components/Header/HeaderNavCompact.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  HeaderNavCompactEvents */
 /** @typedef {typeof __propDef.slots}  HeaderNavCompactSlots */
 export default class HeaderNavCompact extends SvelteComponentTyped<{
+    width?: string | undefined;
     headerBorder?: boolean | undefined;
     baseurl?: string | undefined;
     i18n?: ((text: any) => any) | undefined;
@@ -15,6 +16,7 @@ export type HeaderNavCompactSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        width?: string | undefined;
         headerBorder?: boolean | undefined;
         baseurl?: string | undefined;
         i18n?: ((text: any) => any) | undefined;

package/dist/components/PhaseBanner/PhaseBanner.svelte

@@ -1,4 +1,6 @@
 <script>
+	import Container from "../Container/Container.svelte";
+
 	/**
 	 * Phase of project (alpha, beta, prototype etc.)
 	 * @type {string}
@@ -15,6 +17,11 @@
 	 * @type {string}
 	 */
 	export let href = "https://www.ons.gov.uk/feedback";
+	/**
+	 * Sets the width of the banner
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string|null}
@@ -22,8 +29,8 @@
 	export let cls = null;
 </script>
 
-<div class="ons-phase-banner {cls}">
-	<div class="ons-container">
+<div class="ons-phase-banner {cls}" class:ons-phase-banner__full={width === "full"}>
+	<Container {width}>
 		<div
 			class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap"
 		>
@@ -68,5 +75,11 @@
 				</p>
 			</div>
 		</div>
-	</div>
+	</Container>
 </div>
+
+<style>
+	.ons-phase-banner__full :global(.ons-page__container) {
+		padding: 0 12px;
+	}
+</style>

package/dist/components/PhaseBanner/PhaseBanner.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  PhaseBannerSlots */
 export default class PhaseBanner extends SvelteComponentTyped<{
     cls?: string | null | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     href?: string | undefined;
     description?: string | undefined;
     phase?: string | undefined;
@@ -17,6 +18,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         cls?: string | null | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         href?: string | undefined;
         description?: string | undefined;
         phase?: string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.1.11",
+	"version": "1.1.13",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",