@onsvisual/svelte-components 1.0.66 → 1.1.1

package/dist/components/Em/Em.svelte

@@ -34,7 +34,7 @@
 	class:ons-svelte-mark={mode === "default"}
 	class:ons-svelte-badge={mode === "badge"}
 	class:ons-u-nowrap={nowrap}
-	style:background-color={color}
+	style:background={color}
 	style:color={text}
 	style:font-size={fontSize}
 	role="presentation"

package/dist/components/Footer/Footer.svelte

@@ -28,13 +28,19 @@
 		"Footer links": "",
 		Help: "Cymorth",
 		Accessibility: "Hygyrchedd",
+		"Accessibility statement": "Datganiad hygyrchedd",
+		Browsers: "Porwyr",
 		Cookies: "Cwcis",
+		"Fair use policy": "Polisi defnydd teg",
 		Privacy: "Preifatrwydd",
+		"Privacy notice": "Hysbysiad preifatrwydd",
 		"Terms and conditions": "Telerau ac amodau",
 		"About ONS": "Ynglŷn ag SYG",
+		"About us": "Amdanom ni",
 		"What we do": "Beth rydym yn ei wneud",
 		Careers: "Gyrfaoedd",
 		"Contact us": "Cysylltu â ni",
+		Media: "Cyfryngau",
 		News: "Newyddion",
 		"Freedom of Information": "Rhyddid Gwybodaeth",
 		"Connect with us": "Cysylltu â ni",
@@ -68,14 +74,23 @@
 							<ul class="ons-list ons-u-mb-no ons-list--bare">
 								<li class="ons-list__item">
 									<a href="{baseurl}/help/accessibility" class="ons-list__link"
-										>{i18n("Accessibility")}</a
+										>{i18n("Accessibility statement")}</a
 									>
 								</li>
+								<li class="ons-list__item">
+									<a href="{baseurl}/browsers" class="ons-list__link">{i18n("Browsers")}</a>
+								</li>
 								<li class="ons-list__item">
 									<a href="{baseurl}/cookies" class="ons-list__link">{i18n("Cookies")}</a>
 								</li>
 								<li class="ons-list__item">
-									<a href="{baseurl}/help/privacynotice" class="ons-list__link">{i18n("Privacy")}</a
+									<a href="{baseurl}/help/fairusepolicy" class="ons-list__link"
+										>{i18n("Fair use policy")}</a
+									>
+								</li>
+								<li class="ons-list__item">
+									<a href="{baseurl}/help/privacynotice" class="ons-list__link"
+										>{i18n("Privacy notice")}</a
 									>
 								</li>
 								<li class="ons-list__item">
@@ -87,12 +102,10 @@
 						</div>
 						<!-- Full footer columns -->
 						<div class="ons-grid__col ons-col-4@m ons-u-mt-l@2xs@m">
-							<h2 class="ons-footer__heading ons-u-fs-r--b">{i18n("About ONS")}</h2>
+							<h2 class="ons-footer__heading ons-u-fs-r--b">{i18n("About us")}</h2>
 							<ul class="ons-list ons-u-mb-no ons-list--bare">
 								<li class="ons-list__item">
-									<a href="{baseurl}/aboutus/whatwedo" class="ons-list__link"
-										>{i18n("What we do")}</a
-									>
+									<a href="{baseurl}/aboutus" class="ons-list__link">{i18n("About us")}</a>
 								</li>
 								<li class="ons-list__item">
 									<a href="https://careers.ons.gov.uk" class="ons-list__link">{i18n("Careers")}</a>
@@ -103,7 +116,10 @@
 									>
 								</li>
 								<li class="ons-list__item">
-									<a href="{baseurl}/news" class="ons-list__link">{i18n("News")}</a>
+									<a href="{baseurl}/news" class="ons-list__link">{i18n("Media")}</a>
+								</li>
+								<li class="ons-list__item">
+									<a href="https://blog.ons.gov.uk" class="ons-list__link">{i18n("Blog")}</a>
 								</li>
 								<li class="ons-list__item">
 									<a

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

@@ -19,8 +19,12 @@
 
 <Story name="Default" args={{}} />
 
-<Story name="Compact" args={{ compact: true }} />
+<Story name="Dark mode" args={{ theme: "dark" }} />
+
+<Story name="Compact" args={{ compact: true, border: true }} />
 
 <Story name="Compact with page title" args={{ compact: true, title: "Page title" }} />
 
 <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

@@ -3,6 +3,7 @@
 	import Theme from "../Theme/Theme.svelte";
 	import SkipLink from "../SkipLink/SkipLink.svelte";
 	import HeaderNav from "./HeaderNav.svelte";
+	import HeaderNavCompact from "./HeaderNavCompact.svelte";
 	import HeaderNavLegacy from "./HeaderNavLegacy.svelte";
 
 	const page = getContext("page");
@@ -16,7 +17,12 @@
 	 * Use the legacy nav header
 	 * @type {boolean}
 	 */
-	export let legacy = true;
+	export let legacy = false;
+	/**
+	 * Include a border/line under the header
+	 * @type {boolean}
+	 */
+	export let border = false;
 	/**
 	 * Optional product title
 	 * @type {string|null}
@@ -64,11 +70,15 @@
 	const texts = {
 		Home: "Hafan",
 		Search: "Chwilio",
+		"Search the ONS": "Chwiliwch y SYG",
 		Menu: "Dewislen",
 		"Hide search": "Cuddio",
 		"Office for National Statistics logo": "Logo Swyddfa Ystadegau Gwladol",
 		Homepage: "Hafan",
-		"Search for a keyword(s) or time series ID": "Chwilio am allweddair neu ID cyfres amser"
+		"Search for a keyword(s) or time series ID": "Chwilio am allweddair neu ID cyfres amser",
+		"Popular searches": "Chwiliadau poblogaidd",
+		Cymraeg: "English",
+		"Newid iaith i": "Change language to"
 	};
 
 	$: i18n = (text) => (lang === "cy" && texts[text] ? texts[text] : text);
@@ -83,12 +93,18 @@
 		<SkipLink href={skipHref} />
 	{/if}
 	<slot name="before" />
-	<Theme {theme} overrides={themeOverrides}>
+	<Theme
+		{theme}
+		overrides={themeOverrides}
+		cls={["dark", "blue", "navyblue"].includes(theme) ? "dark-mode" : null}
+	>
 		<!-- <div id="pagePath" class="hide">{path}</div> -->
-		{#if legacy && !compact}
-			<HeaderNavLegacy {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
+		{#if compact}
+			<HeaderNavCompact {border} {baseurl} {i18n} />
+		{:else if !legacy}
+			<HeaderNav {border} {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
 		{:else}
-			<HeaderNav {compact} {title} {baseurl} {i18n} />
+			<HeaderNavLegacy {bilingual} {lang} {baseurl} {baseother} {path} {i18n} />
 		{/if}
 		{#if title}
 			<div class="ons-header__main">
@@ -111,16 +127,3 @@
 		{/if}
 	</Theme>
 </header>
-
-<style>
-	.ons-header__top {
-		background: var(--ons-color-page-light);
-	}
-	.ons-icon--logo__group--primary,
-	.ons-icon--logo__group--text {
-		fill: var(--ons-color-text-link-hover);
-	}
-	.ons-header__top--compact {
-		border-bottom: 1px solid var(--ons-color-borders);
-	}
-</style>

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

@@ -7,6 +7,7 @@ export default class Header extends SvelteComponentTyped<{
     title?: string | null | undefined;
     skipHref?: string | null | undefined;
     compact?: boolean | undefined;
+    border?: boolean | undefined;
     bilingual?: boolean | undefined;
     legacy?: boolean | undefined;
     titleHref?: string | null | undefined;
@@ -27,6 +28,7 @@ declare const __propDef: {
         title?: string | null | undefined;
         skipHref?: string | null | undefined;
         compact?: boolean | undefined;
+        border?: boolean | undefined;
         bilingual?: boolean | undefined;
         legacy?: boolean | undefined;
         titleHref?: string | null | undefined;