@onsvisual/svelte-components 1.0.30 → 1.0.32

package/dist/decorators/Icon/Icon.svelte

@@ -1,7 +1,7 @@
 <script>
 	/**
 	 * Set the type of icon
-	 * @type {"arrow"|"carret"|"cross"|"external"|"signout"|"print"|"download"|"tick"|"search"}
+	 * @type {"arrow"|"carret"|"cross"|"external"|"signout"|"print"|"download"|"tick"|"search"|"pin"|"cog"}
 	 */
 	export let type = "arrow";
 	/**
@@ -65,6 +65,14 @@
 		search: {
 			d: "M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z",
 			viewBox: "0 0 12 12"
+		},
+		pin: {
+			d: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7m0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5Z",
+			viewBox: "0 0 24 24"
+		},
+		cog: {
+			d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6Z",
+			viewBox: "0 0 24 24"
 		}
 	};
 </script>

package/dist/decorators/Icon/Icon.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  IconEvents */
 /** @typedef {typeof __propDef.slots}  IconSlots */
 export default class Icon extends SvelteComponentTyped<{
-    type?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | undefined;
+    type?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | undefined;
     size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
     rotation?: number | undefined;
     marginLeft?: boolean | undefined;
@@ -17,7 +17,7 @@ export type IconSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        type?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | undefined;
+        type?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | undefined;
         size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
         rotation?: number | undefined;
         marginLeft?: boolean | undefined;

package/dist/inputs/Button/Button.stories.svelte

@@ -19,7 +19,6 @@
 				control: { type: "select" }
 			},
 			icon: {
-				options: ["", "arrow", "search", "download", "tick", "print", "externalLink"],
 				control: { type: "select" }
 			},
 			iconPosition: {

package/dist/inputs/Button/Button.svelte

@@ -37,7 +37,7 @@
 	export let small = false;
 	/**
 	 * Icon on button, eg. "arrow", "search"
-	 * @type {"arrow"|"external"|"signout"|"print"|"download"|"tick"|"search"|null}
+	 * @type {"arrow"|"carret"|"cross"|"external"|"signout"|"print"|"download"|"tick"|"search"|"pin"|"cog"|null}
 	 */
 	export let icon = null;
 	/**

package/dist/inputs/Button/Button.svelte.d.ts

@@ -10,7 +10,7 @@ export default class Button extends SvelteComponentTyped<{
     type?: "button" | "reset" | "sumbit" | undefined;
     variant?: "secondary" | "primary" | "ghost" | undefined;
     noScroll?: boolean | undefined;
-    icon?: "search" | "arrow" | "external" | "signout" | "print" | "download" | "tick" | null | undefined;
+    icon?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | null | undefined;
     iconPosition?: "before" | "after" | undefined;
     disabled?: boolean | undefined;
     hideLabel?: boolean | undefined;
@@ -38,7 +38,7 @@ declare const __propDef: {
         type?: "button" | "reset" | "sumbit" | undefined;
         variant?: "secondary" | "primary" | "ghost" | undefined;
         noScroll?: boolean | undefined;
-        icon?: "search" | "arrow" | "external" | "signout" | "print" | "download" | "tick" | null | undefined;
+        icon?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | "pin" | "cog" | null | undefined;
         iconPosition?: "before" | "after" | undefined;
         disabled?: boolean | undefined;
         hideLabel?: boolean | undefined;

package/dist/inputs/Select/Select.svelte

@@ -2,6 +2,8 @@
 	// @ts-nocheck
 
 	import { onMount, createEventDispatcher } from "svelte";
+	import Dropdown from "../Dropdown/Dropdown.svelte";
+	import Input from "../Input/Input.svelte";
 
 	const dispatch = createEventDispatcher();
 	const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
@@ -68,6 +70,11 @@
 	 * @type {string|null}
 	 */
 	export let groupKey = null;
+	/**
+	 * When using SSR or pre-rendering, this option will render a text input or dropdown before the page is hydrated (allows for progressive enhancement).
+	 * @type {boolean}
+	 */
+	export let renderFallback = false;
 	/**
 	 * Optional: Minimum query length to return results
 	 * @type {number}
@@ -92,23 +99,22 @@
 	 */
 	export let scriptUrl =
 		"https://cdn.ons.gov.uk/vendor/accessible-autocomplete/3.0.1/accessible-autocomplete.min.js";
-
-	// This clearing method is a bit of a hack, but no better options available at present
-	// https://github.com/alphagov/accessible-autocomplete/issues/390
 	/**
 	 * Call this function externally to clear the input
 	 * @type {function}
 	 */
-	export async function clearInput() {
+	export let clearInput = async () => {
 		await setInputValue(null);
 		dispatch("clear", null);
-	}
+	};
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string|null}
 	 */
 	export let cls = null;
 
+	// This method is a bit of a hack, but no better options available at present
+	// https://github.com/alphagov/accessible-autocomplete/issues/390
 	async function setInputValue(textValue) {
 		hideMenu = true;
 		inputElement.value = textValue || "";
@@ -204,35 +210,48 @@
 	<script src={scriptUrl} on:load={handleScriptLoad}></script>
 </svelte:head>
 
-<div class="ons-field {cls}">
-	{#if label}<label for={id} class="ons-label" class:ons-u-vh={hideLabel}>{label}</label>{/if}
-	<div class="ons-autocomplete-wrapper">
-		{#if scriptLoaded}
-			<div
-				id="{id}-container"
-				class="ons-autocomplete"
-				class:hide-menu={hideMenu}
-				use:initAutocomplete
-			></div>
-			{#if clearable && !autoClear && value}
-				<button
-					type="reset"
-					title="Clear selection"
-					aria-label="Clear selection"
-					on:click={clearInput}
-					class="ons-autocomplete-clear"
-				>
-					<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 14 14" width="18">
-						<path
-							fill="currentColor"
-							d="M13.6 1 l -0.71 -0.71 a 0.5 0.5 0 0 0 -0.71 0 l -5.25 5.25 l -5.25 -5.25 a 0.51 0.51 0 0 0 -0.71 0 l -0.71 0.71 a 0.5 0.5 0 0 0 0 0.71 l 5.25 5.25 l -5.25 5.25 a 0.5 0.5 0 0 0 0 0.71 l 0.71 0.71 a 0.5 0.5 0 0 0 0.71 0 l 5.25 -5.25 l 5.25 5.25 a 0.5 0.5 0 0 0 0.71 0 l 0.71 -0.71 a 0.5 0.5 0 0 0 0 -0.71 l -5.25 -5.25 l 5.25 -5.25 a 0.5 0.5 0 0 0 0 -0.71Z"
-						></path>
-					</svg>
-				</button>
+{#if renderFallback && !scriptLoaded}
+	{#if mode === "search"}
+		<Input {id} {label} {hideLabel} value={value?.[labelKey]} />
+	{:else}
+		<Dropdown {id} {options} {label} {hideLabel} {placeholder} {value} />
+	{/if}
+{:else}
+	<div class="ons-field {cls}">
+		{#if label}<label for={id} class="ons-label" class:ons-u-vh={hideLabel}>{label}</label>{/if}
+		<div class="ons-autocomplete-wrapper">
+			{#if scriptLoaded}
+				<div
+					id="{id}-container"
+					class="ons-autocomplete"
+					class:hide-menu={hideMenu}
+					use:initAutocomplete
+				></div>
+				{#if clearable && !autoClear && value}
+					<button
+						type="reset"
+						title="Clear selection"
+						aria-label="Clear selection"
+						on:click={clearInput}
+						class="ons-autocomplete-clear"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							aria-hidden="true"
+							viewBox="0 0 14 14"
+							width="18"
+						>
+							<path
+								fill="currentColor"
+								d="M13.6 1 l -0.71 -0.71 a 0.5 0.5 0 0 0 -0.71 0 l -5.25 5.25 l -5.25 -5.25 a 0.51 0.51 0 0 0 -0.71 0 l -0.71 0.71 a 0.5 0.5 0 0 0 0 0.71 l 5.25 5.25 l -5.25 5.25 a 0.5 0.5 0 0 0 0 0.71 l 0.71 0.71 a 0.5 0.5 0 0 0 0.71 0 l 5.25 -5.25 l 5.25 5.25 a 0.5 0.5 0 0 0 0.71 0 l 0.71 -0.71 a 0.5 0.5 0 0 0 0 -0.71 l -5.25 -5.25 l 5.25 -5.25 a 0.5 0.5 0 0 0 0 -0.71Z"
+							></path>
+						</svg>
+					</button>
+				{/if}
 			{/if}
-		{/if}
+		</div>
 	</div>
-</div>
+{/if}
 
 <style>
 	.ons-autocomplete-wrapper {

package/dist/inputs/Select/Select.svelte.d.ts

@@ -14,17 +14,17 @@ export default class Select extends SvelteComponentTyped<{
     autoClear?: boolean | undefined;
     labelKey?: string | undefined;
     groupKey?: string | null | undefined;
+    renderFallback?: boolean | undefined;
     minLength?: number | undefined;
     loadOptions?: Function | undefined;
     scriptUrl?: string | undefined;
-    clearInput?: (() => Promise<void>) | undefined;
+    clearInput?: Function | undefined;
 }, {
     clear: CustomEvent<any>;
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}> {
-    get clearInput(): () => Promise<void>;
 }
 export type SelectProps = typeof __propDef.props;
 export type SelectEvents = typeof __propDef.events;
@@ -44,10 +44,11 @@ declare const __propDef: {
         autoClear?: boolean | undefined;
         labelKey?: string | undefined;
         groupKey?: string | null | undefined;
+        renderFallback?: boolean | undefined;
         minLength?: number | undefined;
         loadOptions?: Function | undefined;
         scriptUrl?: string | undefined;
-        clearInput?: (() => Promise<void>) | undefined;
+        clearInput?: Function | undefined;
     };
     events: {
         clear: CustomEvent<any>;

package/dist/layout/AnalyticsBanner/docs/component.md

@@ -15,3 +15,30 @@ This component will display a cookie banner and export a function that allows yo
 <AnalyticsBanner analyticsId="{id_string}" />
 <!-- Rest of page content -->
 ```
+
+`AnalyticsBanner` can also take props.
+
+```
+const analyticsProps = {
+    contentTitle: "Weekly deaths dashboard",
+    releaseDate: data.dates.current.replaceAll("-", ""),
+    nextReleaseDate: data.dates.next.replaceAll("-", ""),
+    outputSeries: "weeklyprovisionalfiguresondeathsregisteredinenglandandwales",
+    contentType: "dashboard",
+  };
+
+<AnalyticsBanner {analyticsProps}/>
+```
+
+An example analytics events. See this [doc](https://officenationalstatistics.sharepoint.com/:w:/r/sites/digpub/_layouts/15/Doc.aspx?sourcedoc=%7BBA405554-4040-4B61-9559-851F5C55DA39%7D&file=Google%20Analytics%20-%20GTM%20requirements.docx&action=default&mobileredirect=true) for more details (need to be on network).
+
+```javascript
+analyticsEvent({
+	event: "interaction",
+	interactionType: "accordion",
+	interactionValue: e?.detail?.open ? "open" : "close",
+	label,
+	sectionTitle,
+	sectionNumber
+});
+```

package/dist/layout/NavSections/NavSections.stories.svelte

@@ -6,17 +6,20 @@
 	import componentDocs from "./docs/component.md?raw";
 	import { lipsum } from "../../js/utils.js";
 
+	const parameters = { ...withComponentDocs(componentDocs), layout: "fullscreen" };
+	parameters.docs.story = { inline: false, iframeHeight: 600 };
+
 	const { Story } = defineMeta({
 		title: "Layout/NavSections",
 		component: NavSections,
 		tags: ["autodocs"],
 		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
+		parameters
 	});
 </script>
 
 {#snippet template(args)}
-	<NavSections>
+	<NavSections {...args}>
 		<NavSection title="Section one">
 			<p>
 				{lipsum()}

package/dist/layout/NavSections/docs/component.md

@@ -1,8 +1,6 @@
-Use this layou component to allow users to quickly jump to sections of a long page of content.
+Use this component to allow users to quickly jump to named sections within a long page of content.
 
-As the user scrolls down the page, the table of contents will remain accessible at the top of the viewport and will highlight the subheading of the section in view.
-
-Note: These examples will not preview correctly in the iframes on this page. You can select the examples from the menu instead.
+As the user scrolls down the page, a table of contents will remain visible on the left of the viewport and will highlight the subheading of the section currently in view.
 
 <!-- prettier-ignore -->
 ```html

package/dist/layout/Scroller/Scroller.stories.svelte

@@ -7,16 +7,15 @@
 	import Em from "../../decorators/Em/Em.svelte";
 	import componentDocs from "./docs/component.md?raw";
 
+	const parameters = { ...withComponentDocs(componentDocs), layout: "fullscreen" };
+	parameters.docs.story = { inline: false, iframeHeight: 600 };
+
 	const { Story } = defineMeta({
 		title: "Layout/Scroller",
 		component: Scroller,
 		tags: ["autodocs"],
 		argTypes: {},
-		parameters: {
-			...withComponentDocs(componentDocs),
-			layout: "fullscreen",
-			docs: { story: { inline: false, iframeHeight: 600 } }
-		}
+		parameters
 	});
 </script>
 

package/dist/layout/Scroller/docs/component.md

@@ -1,6 +1,4 @@
-Components for adding scrollytelling sections to a feature article.
-
-Note: These examples will not preview correctly in the iframes on this page. You can select the examples from the menu instead.
+Components for adding interactive scrollytelling sections to a feature article.
 
 <!-- prettier-ignore -->
 ```html

package/dist/templates/FeatureArticle/FeatureArticle.stories.svelte

@@ -18,16 +18,15 @@
 	import ScrollerSection from "../../layout/Scroller/ScrollerSection.svelte";
 	import Footer from "../../layout/Footer/Footer.svelte";
 
+	const parameters = { ...withComponentDocs(componentDocs), layout: "fullscreen" };
+	parameters.docs.story = { inline: false, iframeHeight: 600 };
+
 	const { Story } = defineMeta({
 		title: "Templates/Feature article",
 		component: Header,
 		tags: ["autodocs"],
 		argTypes: {},
-		parameters: {
-			...withComponentDocs(componentDocs),
-			layout: "fullscreen",
-			docs: { story: { inline: false, iframeHeight: 600 } }
-		}
+		parameters
 	});
 </script>
 

package/dist/wrappers/Observe/Observe.svelte

@@ -27,7 +27,7 @@
 		observer.observe(el);
 	});
 
-	onDestroy(() => observer.unobserve(el));
+	onDestroy(() => observer?.unobserve?.(el));
 </script>
 
 <div bind:this={el}>

package/package.json

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