@onsvisual/svelte-components 1.1.13 → 1.1.15

package/dist/components/AnalyticsBanner/AnalyticsBanner.svelte

@@ -6,6 +6,7 @@
 
 <script>
 	import { onMount, getContext } from "svelte";
+	import Container from "../Container/Container.svelte";
 
 	/**
 	 * Google analytics/tags manager ID
@@ -34,7 +35,7 @@
 	export let usageCookies = false;
 	/**
 	 * Set the width of the banner
-	 * @type {"wide"|"wider"}
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
 	 */
 	export let width = "wide";
 	/**
@@ -202,6 +203,7 @@
 {#if showBanner && !hideBanner}
 	<div
 		class="ons-cookies-banner"
+		class:ons-cookies-banner__full={width === "full"}
 		role="region"
 		aria-label="Cookies banner"
 		style:display={showBanner ? "block" : null}
@@ -213,10 +215,7 @@
 				id="global-cookie-message"
 				aria-label="cookie banner"
 			>
-				<div
-					class="ons-container ons-cookies-banner__primary"
-					class:ons-page__container--wider={width === "wider"}
-				>
+				<Container {width} cls="ons-cookies-banner__primary">
 					<div class="ons-grid">
 						<div class="ons-grid__col ons-col-8@m">
 							<h2 class="ons-cookies-banner__title ons-u-mb-xs">{i18n("Cookies on ons.gov.uk")}</h2>
@@ -236,7 +235,7 @@
 							</div>
 						</div>
 					</div>
-					<div class="ons-grid ons-grid--flex ons-u-mt-s">
+					<div class="ons-grid ons-grid-flex ons-u-mt-s">
 						<div class="ons-grid__col">
 							<button
 								type="submit"
@@ -267,13 +266,10 @@
 							>
 						</div>
 					</div>
-				</div>
+				</Container>
 			</form>
 		{:else}
-			<div
-				class="ons-container ons-cookies-banner__confirmation"
-				class:ons-page__container--wider={width === "wider"}
-			>
+			<Container {width} cls="ons-cookies-banner__confirmation">
 				<div
 					class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center"
 				>
@@ -298,7 +294,7 @@
 						</button>
 					</div>
 				</div>
-			</div>
+			</Container>
 		{/if}
 	</div>
 {/if}
@@ -308,7 +304,7 @@
 		/* padding: 0; */
 		background: var(--pale, #f0f0f0) !important;
 	}
-	.ons-page__container--wider {
-		max-width: 1240px;
+	.ons-cookies-banner__full :global(.ons-page__container) {
+		padding: 0 12px;
 	}
 </style>

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

@@ -3,7 +3,7 @@ export function analyticsEvent(props: any): void;
 /** @typedef {typeof __propDef.events}  AnalyticsBannerEvents */
 /** @typedef {typeof __propDef.slots}  AnalyticsBannerSlots */
 export default class AnalyticsBanner extends SvelteComponentTyped<{
-    width?: "wide" | "wider" | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     page?: any;
     analyticsId?: string | undefined;
     analyticsProps?: object | undefined;
@@ -20,7 +20,7 @@ export type AnalyticsBannerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        width?: "wide" | "wider" | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         page?: any;
         analyticsId?: string | undefined;
         analyticsProps?: object | undefined;

package/dist/components/Header/Header.svelte

@@ -105,7 +105,12 @@
 	});
 </script>
 
-<header class="ons-header" class:ons-header__full={width === "full"} role="banner">
+<header
+	class="ons-header"
+	class:ons-header--basic={!compact && !legacy}
+	class:ons-header__full={width === "full"}
+	role="banner"
+>
 	{#if skipHref}
 		<SkipLink href={skipHref} />
 	{/if}

package/dist/components/Header/HeaderNav.svelte

@@ -241,6 +241,10 @@
 	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>
@@ -398,10 +402,10 @@
 				<div class="ons-header__links ons-grid__col">
 					<button
 						type="button"
-						class="ons-btn ons-u-fs-s--b ons-js-toggle-nav-menu button-nav active disabled ons-btn--menu"
+						class="ons-btn ons-u-fs-r--b ons-js-toggle-nav-menu ons-u-db-no-js_disabled button-nav ons-btn--menu"
 						aria-label="Toggle menu"
 						aria-controls="menu-links"
-						aria-expanded="true"
+						aria-expanded="false"
 						aria-disabled="true"
 					>
 						<span class="ons-btn__inner"
@@ -423,10 +427,10 @@
 					</button>
 				</div>
 				{#if search}
-					<div class="ons-header__links ons-grid__col ons-header__menu-link">
+					<div class="ons-header__links ons-grid__col ons-header__menu-links">
 						<button
 							type="button"
-							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"
+							class="ons-btn ons-u-fs-s--b ons-js-toggle-header-search ons-u-db-no-js_disabled ons-btn--search-icon ons-btn--search"
 							aria-label="Toggle search"
 							aria-controls="search"
 							aria-expanded="true"
@@ -449,24 +453,26 @@
 						</button>
 					</div>
 				{/if}
-				{#if bilingual}
-					<div class="ons-grid__col ons-col-auto">
-						<div class="ons-header__language">
-							<ul class="ons-language-links">
-								<li class="ons-language-links__item">
-									<a
-										href="{baseother}{path}"
-										class="language__link"
-										lang={lang == "en" ? "cy" : "en"}
-									>
-										<span class="ons-u-vh">{i18n("Newid iaith i")} </span>{i18n("Cymraeg")}
-									</a>
-								</li>
-							</ul>
-						</div>
-					</div>
-				{/if}
 			</div>
+			{#if bilingual}
+				<div
+					class="ons-header__links ons-grid__col ons-col-auto ons-header__links--language-section ons-u-d-no@2xs@m"
+				>
+					<div class="ons-header__language ons-u-fs-r--b">
+						<ul class="ons-language-links">
+							<li class="ons-language-links__item">
+								<a
+									href="{baseother}{path}"
+									class="language__link"
+									lang={lang == "en" ? "cy" : "en"}
+								>
+									<span class="ons-u-vh">{i18n("Newid iaith i")} </span>{i18n("Cymraeg")}
+								</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			{/if}
 		</div>
 	</Container>
 </div>
@@ -478,6 +484,15 @@
 	aria-hidden="true"
 >
 	<Container {width}>
+		<div class="ons-header-nav-menu__language ons-u-fs-s--b ons-u-d-no@m ons-u-d-no@2xl">
+			<ul class="ons-language-links">
+				<li class="ons-language-links__item">
+					<a href="{baseother}{path}" lang={lang == "en" ? "cy" : "en"}>
+						<span class="ons-u-vh">{i18n("Newid iaith i")} </span>{i18n("Cymraeg")}
+					</a>
+				</li>
+			</ul>
+		</div>
 		<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">
@@ -588,9 +603,6 @@
 {/if}
 
 <style>
-	.ons-header__grid-top {
-		padding: 0;
-	}
 	.ons-header__top {
 		background: var(--ons-color-page-light);
 	}
@@ -598,10 +610,6 @@
 	.ons-icon--logo__group--text {
 		fill: var(--ons-color-text-link-hover);
 	}
-	.ons-header__language {
-		display: block;
-		margin-top: 0.85em;
-	}
 	.ons-header--border:has(+ .ons-u-d-no) {
 		border-bottom: 1px solid var(--ons-color-borders);
 	}