@onsvisual/svelte-components 1.1.43 → 1.1.45

package/dist/components/Header/Header.stories.svelte

@@ -25,6 +25,19 @@
 
 <Story name="Compact with page title" args={{ compact: true, title: "Page title" }} />
 
+<Story
+	name="Compact with page title and nav links"
+	args={{
+		compact: true,
+		title: "Page title",
+		navLinks: [
+			{ label: "Home", href: "" },
+			{ label: "Some page", href: "#0" },
+			{ label: "Another page", href: "#1" }
+		]
+	}}
+/>
+
 <Story name="Compact dark theme" args={{ compact: true, title: "Page title", theme: "dark" }} />
 
 <Story name="Legacy header" args={{ legacy: true }} />

package/dist/components/Header/Header.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { onMount, getContext } from "svelte";
+	import initNav from "./nav.js";
 	import Theme from "../Theme/Theme.svelte";
 	import Container from "../Container/Container.svelte";
 	import SkipLink from "../SkipLink/SkipLink.svelte";
@@ -7,8 +8,6 @@
 	import HeaderNavCompact from "./HeaderNavCompact.svelte";
 	import HeaderNavLegacy from "./HeaderNavLegacy.svelte";
 
-	const page = getContext("page");
-
 	/**
 	 * Optional product title
 	 * @type {string|null}
@@ -64,25 +63,43 @@
 	 * @type {boolean}
 	 */
 	export let legacy = false;
+	/**
+	 * Optional: Pass the "page" store from "$app/state" in SvelteKit (gets read from context by default if it exists)
+	 * @type {any}
+	 */
+	export let page = getContext("page");
 	/**
 	 * Anchor link to skip to main body content (default "#main")
 	 * @type {string|null}
 	 */
 	export let skipHref = "#main";
+	/**
+	 * Optional: Nav links below title (only works in combination with title block). An array of links in the format {label, href}
+	 * @type {{label: string, href: string}[]|null}
+	 */
+	export let navLinks = null;
 
+	let el; // Header HTML element
+
+	let url = null;
 	let lang = "en";
 	let baseurl = "https://www.ons.gov.uk";
 	let baseother = "https://cy.ons.gov.uk";
 	let path = "";
 
 	function setPaths() {
-		const url = page?.url || document.location;
+		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";
 		baseother = lang === "cy" ? "https://www.ons.gov.uk" : "https://cy.ons.gov.uk";
 		path = url.pathname;
 	}
 
+	function getActiveLink(navLinks, path) {
+		const candidates = navLinks.filter((link) => path.endsWith(link.href));
+		return candidates.length ? candidates[candidates.length - 1] : null;
+	}
+
 	const texts = {
 		Home: "Hafan",
 		Search: "Chwilio",
@@ -99,9 +116,19 @@
 	};
 
 	$: i18n = (text) => (lang === "cy" && texts[text] ? texts[text] : text);
+	$: activeLink =
+		Array.isArray(navLinks) && url?.pathname ? getActiveLink(navLinks, url.pathname) : null;
 
 	onMount(() => {
 		setPaths();
+
+		if ((!compact && !legacy) || (title && Array.isArray(navLinks))) {
+			const hasBodyClass = "className" in document.body || {};
+			const bodyClassString = document.body?.className || "";
+			if (hasBodyClass && !bodyClassString.includes("ons-js-enabled"))
+				document.body.className = bodyClassString + " ons-js-enabled";
+			initNav(el?.parentElement || document);
+		}
 	});
 </script>
 
@@ -110,6 +137,7 @@
 	class:ons-header--basic={!compact && !legacy}
 	class:ons-header__full={width === "full"}
 	role="banner"
+	bind:this={el}
 >
 	{#if skipHref}
 		<SkipLink href={skipHref} />
@@ -166,9 +194,60 @@
 								<div class="ons-header__title">{title}</div>
 							{/if}
 						</div>
+						{#if Array.isArray(navLinks)}
+							<div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@l">
+								<button
+									type="submit"
+									class="ons-btn ons-u-ml-2xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l ons-btn--mobile ons-btn--ghost"
+									aria-label="Toggle main menu"
+									aria-controls="main-nav"
+									aria-expanded="false"
+								>
+									<span class="ons-btn__inner"
+										><span class="ons-btn__text">Menu</span><svg
+											class="ons-icon ons-u-ml-2xs"
+											viewBox="0 0 8 13"
+											xmlns="http://www.w3.org/2000/svg"
+											focusable="false"
+											fill="currentColor"
+											role="img"
+											aria-hidden="true"
+										>
+											<path
+												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"
+												transform="translate(-5.02 -1.59)"
+											/>
+										</svg></span
+									>
+								</button>
+							</div>
+						{/if}
 					</div>
 				</Container>
 			</div>
+			{#if Array.isArray(navLinks)}
+				<div class="ons-navigation-wrapper">
+					<Container {width}>
+						<nav
+							class="ons-navigation ons-navigation--main ons-js-navigation"
+							id="main-nav"
+							aria-label="Main menu"
+							data-analytics="header-navigation"
+						>
+							<ul class="ons-navigation__list">
+								{#each navLinks as link (link.href)}
+									<li
+										class="ons-navigation__item"
+										class:ons-navigation__item--active={activeLink?.href === link.href}
+									>
+										<a class="ons-navigation__link" href={link.href}> {link.label} </a>
+									</li>
+								{/each}
+							</ul>
+						</nav>
+					</Container>
+				</div>
+			{/if}
 		{/if}
 	</Theme>
 </header>

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

@@ -9,11 +9,16 @@ export default class Header extends SvelteComponentTyped<{
     title?: string | null | undefined;
     skipHref?: string | null | undefined;
     compact?: boolean | undefined;
+    page?: any;
     headerBorder?: boolean | undefined;
     menuBorder?: boolean | undefined;
     bilingual?: boolean | undefined;
     titleHref?: string | null | undefined;
     legacy?: boolean | undefined;
+    navLinks?: {
+        label: string;
+        href: string;
+    }[] | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -33,11 +38,16 @@ declare const __propDef: {
         title?: string | null | undefined;
         skipHref?: string | null | undefined;
         compact?: boolean | undefined;
+        page?: any;
         headerBorder?: boolean | undefined;
         menuBorder?: boolean | undefined;
         bilingual?: boolean | undefined;
         titleHref?: string | null | undefined;
         legacy?: boolean | undefined;
+        navLinks?: {
+            label: string;
+            href: string;
+        }[] | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Header/HeaderNav.svelte

@@ -1,7 +1,5 @@
 <script>
-	import { onMount } from "svelte";
 	import Container from "../Container/Container.svelte";
-	import initNav from "./nav.js";
 
 	export let width = "wide";
 	export let headerBorder = false;
@@ -14,8 +12,6 @@
 	export let path = "";
 	export let i18n = (text) => text;
 
-	let el; // Header HTML element
-
 	const menu = {
 		main: [
 			{
@@ -239,17 +235,9 @@
 		]
 	};
 	const columns = [[menu.topics[0]], [menu.topics[1], menu.topics[2]], [menu.topics[3]]];
-
-	onMount(() => {
-		const hasBodyClass = "className" in document.body || {};
-		const bodyClassString = document.body?.className || "";
-		if (hasBodyClass && !bodyClassString.includes("ons-js-enabled"))
-			document.body.className = bodyClassString + " ons-js-enabled";
-		initNav(el?.parentElement || document);
-	});
 </script>
 
-<div class="ons-header__top" class:ons-header--border={headerBorder} bind:this={el}>
+<div class="ons-header__top" class:ons-header--border={headerBorder}>
 	<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"

package/package.json

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