@onsvisual/svelte-components 1.0.60 → 1.0.62

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { default as Observe } from "./wrappers/Observe/Observe.svelte";
 export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
 export { default as AccordionItem } from "./layout/Accordion/AccordionItem.svelte";
+export { default as AnnouncementBanner } from "./layout/AnnouncementBanner/AnnouncementBanner.svelte";
 export { default as BackLink } from "./layout/BackLink/BackLink.svelte";
 export { default as Breadcrumb } from "./layout/Breadcrumb/Breadcrumb.svelte";
 export { default as Card } from "./layout/Card/Card.svelte";

package/dist/index.js

@@ -13,6 +13,7 @@ export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
 export { default as AccordionItem } from "./layout/Accordion/AccordionItem.svelte";
 export { default as AnalyticsBanner } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
 export { analyticsEvent } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
+export { default as AnnouncementBanner } from "./layout/AnnouncementBanner/AnnouncementBanner.svelte";
 export { default as BackLink } from "./layout/BackLink/BackLink.svelte";
 export { default as Breadcrumb } from "./layout/Breadcrumb/Breadcrumb.svelte";
 export { default as Card } from "./layout/Card/Card.svelte";

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

@@ -4,11 +4,11 @@
 export default class Button extends SvelteComponentTyped<{
     cls?: string | null | undefined;
     small?: boolean | undefined;
+    variant?: "secondary" | "primary" | "ghost" | undefined;
     href?: string | null | undefined;
     color?: string | null | undefined;
     download?: string | null | undefined;
     type?: "button" | "reset" | "submit" | undefined;
-    variant?: "secondary" | "primary" | "ghost" | undefined;
     noScroll?: boolean | undefined;
     icon?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
     iconPosition?: "before" | "after" | undefined;
@@ -33,11 +33,11 @@ declare const __propDef: {
     props: {
         cls?: string | null | undefined;
         small?: boolean | undefined;
+        variant?: "secondary" | "primary" | "ghost" | undefined;
         href?: string | null | undefined;
         color?: string | null | undefined;
         download?: string | null | undefined;
         type?: "button" | "reset" | "submit" | undefined;
-        variant?: "secondary" | "primary" | "ghost" | undefined;
         noScroll?: boolean | undefined;
         icon?: "code" | "search" | "expand" | "arrow" | "carret" | "chevron" | "cog" | "cross" | "download" | "external" | "pin" | "print" | "shrink" | "signout" | "tick" | null | undefined;
         iconPosition?: "before" | "after" | undefined;

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

@@ -7,8 +7,8 @@ export default class Checkbox extends SvelteComponentTyped<{
     cls?: string | null | undefined;
     group?: object[] | null | undefined;
     compact?: boolean | undefined;
-    description?: string | null | undefined;
     variant?: "default" | "ghost" | undefined;
+    description?: string | null | undefined;
     disabled?: boolean | undefined;
     checked?: boolean | undefined;
     item?: object | undefined;
@@ -30,8 +30,8 @@ declare const __propDef: {
         cls?: string | null | undefined;
         group?: object[] | null | undefined;
         compact?: boolean | undefined;
-        description?: string | null | undefined;
         variant?: "default" | "ghost" | undefined;
+        description?: string | null | undefined;
         disabled?: boolean | undefined;
         checked?: boolean | undefined;
         item?: object | undefined;

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

@@ -10,8 +10,8 @@ export default class Input extends SvelteComponentTyped<{
     name?: string | null | undefined;
     error?: boolean | undefined;
     numeric?: boolean | undefined;
-    value?: string | null | undefined;
     description?: string | null | undefined;
+    value?: string | null | undefined;
     disabled?: boolean | undefined;
     hideLabel?: boolean | undefined;
     charLimit?: number | null | undefined;
@@ -38,8 +38,8 @@ declare const __propDef: {
         name?: string | null | undefined;
         error?: boolean | undefined;
         numeric?: boolean | undefined;
-        value?: string | null | undefined;
         description?: string | null | undefined;
+        value?: string | null | undefined;
         disabled?: boolean | undefined;
         hideLabel?: boolean | undefined;
         charLimit?: number | null | undefined;

package/dist/inputs/Radios/Radio.svelte.d.ts

@@ -6,8 +6,8 @@ export default class Radio extends SvelteComponentTyped<{
     id?: string | null | undefined;
     label?: string | null | undefined;
     compact?: boolean | undefined;
-    value?: object | null | undefined;
     description?: string | null | undefined;
+    value?: object | null | undefined;
     item?: object | undefined;
 }, {
     change: CustomEvent<any>;
@@ -25,8 +25,8 @@ declare const __propDef: {
         id?: string | null | undefined;
         label?: string | null | undefined;
         compact?: boolean | undefined;
-        value?: object | null | undefined;
         description?: string | null | undefined;
+        value?: object | null | undefined;
         item?: object | undefined;
     };
     events: {

package/dist/inputs/Select/Select.svelte

@@ -90,7 +90,7 @@
 	 */
 	export let loadOptions = (query, populateResults) => {
 		const filteredResults =
-			mode !== "search" && options.map((opt) => opt[labelKey]).includes(query)
+			mode !== "search" && (!query || options.map((opt) => opt[labelKey]).includes(query))
 				? options
 				: options.filter((opt) =>
 						opt[labelKey].match(new RegExp(`\\b${query.replace(/[^\w\s]/gi, "")}`, "i"))
@@ -135,14 +135,11 @@
 
 	function suggestionTemplate(result) {
 		const query = inputElement?.value || "";
-		return (
-			result &&
-			(groupKey
-				? `${highlight(result?.[labelKey] || "", query)} <span class="muted-text">${
-						result[groupKey]
-					}</span>`
-				: highlight(result?.[labelKey] || "", query))
-		);
+		return groupKey && result[groupKey]
+			? `${highlight(result?.[labelKey] || "", query)} <span class="muted-text">${
+					result[groupKey]
+				}</span>`
+			: highlight(result?.[labelKey] || "", query);
 	}
 
 	async function select(option) {
@@ -161,7 +158,8 @@
 	}
 
 	async function initAutocomplete(element) {
-		if (!accessibleAutocomplete) accessibleAutocomplete = (await import("accessible-autocomplete")).default;
+		if (!accessibleAutocomplete)
+			accessibleAutocomplete = (await import("accessible-autocomplete")).default;
 
 		accessibleAutocomplete({
 			element,
@@ -204,7 +202,7 @@
 
 {#if renderFallback && !mounted}
 	{#if mode === "search"}
-		<Input {id} {name} {label} {hideLabel} value={value?.[labelKey]} width={null}/>
+		<Input {id} {name} {label} {hideLabel} value={value?.[labelKey]} width={null} />
 	{:else}
 		<Dropdown {id} {name} {options} {label} {hideLabel} {placeholder} {value} width={null} />
 	{/if}

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

@@ -7,8 +7,8 @@ export default class Textarea extends SvelteComponentTyped<{
     width?: number | undefined;
     label?: string | null | undefined;
     name?: string | null | undefined;
-    value?: string | null | undefined;
     description?: string | null | undefined;
+    value?: string | null | undefined;
     hideLabel?: boolean | undefined;
     charLimit?: number | null | undefined;
     rows?: number | undefined;
@@ -27,8 +27,8 @@ declare const __propDef: {
         width?: number | undefined;
         label?: string | null | undefined;
         name?: string | null | undefined;
-        value?: string | null | undefined;
         description?: string | null | undefined;
+        value?: string | null | undefined;
         hideLabel?: boolean | undefined;
         charLimit?: number | null | undefined;
         rows?: number | undefined;

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

@@ -3,12 +3,12 @@ This component will display a cookie banner and export a function that allows yo
 <!-- prettier-ignore -->
 ```html
 <script>
-  import { AnalyticsBanner, AnalyticsEvent } from "@onsvisual/svelte-components";
+  import { AnalyticsBanner, analyticsEvent } from "@onsvisual/svelte-components";
 
   // Example of an analytics event triggered by another event "e"
   function doAnalyticsEvent(e) {
     // Assumes that e.detail is in the form {key1: "value1", key2: "value2", etc}
-    AnalyticsEvent({event: "eventName", ...e.detail});
+    analyticsEvent({event: "eventName", ...e.detail});
   }
 </script>
 

package/dist/layout/AnnouncementBanner/AnnouncementBanner.stories.svelte

@@ -0,0 +1,63 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import AnnouncementBanner from "./AnnouncementBanner.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import { lipsum } from "../../js/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Layout/AnnouncementBanner",
+		component: AnnouncementBanner,
+		tags: ["autodocs"],
+		argTypes: {
+			width: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<AnnouncementBanner {...args}>
+		<p>
+			{lipsum()}
+		</p>
+	</AnnouncementBanner>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		title: "Important service announcement",
+		description: "This is a website-wide service announcement",
+		variant: "teal",
+		linkHref: "#0",
+		linkText: "More information"
+	}}
+	{template}
+/>
+
+<Story
+	name="National emergency"
+	args={{
+		title: "National emergency",
+		description: "This is a level 1 incident",
+		variant: "red",
+		linkHref: "#0",
+		linkText: "More information"
+	}}
+	{template}
+/>
+
+<Story
+	name="Notable death"
+	args={{
+		title: "His Royal Highness Henry VIII",
+		description: "1491 to 1547",
+		variant: "black",
+		linkHref: "#0",
+		linkText: "Find out more"
+	}}
+	{template}
+/>

package/dist/layout/AnnouncementBanner/AnnouncementBanner.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  AnnouncementBannerProps */
+/** @typedef {typeof __propDef.events}  AnnouncementBannerEvents */
+/** @typedef {typeof __propDef.slots}  AnnouncementBannerSlots */
+export default class AnnouncementBanner extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AnnouncementBannerProps = typeof __propDef.props;
+export type AnnouncementBannerEvents = typeof __propDef.events;
+export type AnnouncementBannerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/layout/AnnouncementBanner/AnnouncementBanner.svelte

@@ -0,0 +1,66 @@
+<script>
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * Optional: Set an additional CSS class for the section
+	 * @type {string|null}
+	 */
+	export let cls = null;
+	/**
+	 * Sets the title of the banner (required)
+	 * @type {string}
+	 */
+	export let title;
+	/**
+	 * Sets the text content of the banner (required)
+	 * @type {string}
+	 */
+	export let description;
+	/**
+	 * Sets the variant/colour of the banner
+	 * @type {"black"|"red"|"teal"}
+	 */
+	export let variant = "teal";
+	/**
+	 * Sets the text content of the banner
+	 * @type {string|null}
+	 */
+	export let linkHref = null;
+	/**
+	 * Sets the text content of the banner
+	 * @type {string|null}
+	 */
+	export let linkText = null;
+	/**
+	 * Adds margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Adds margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = false;
+</script>
+
+<Container {cls} width="full" {marginTop} {marginBottom}>
+	<div class="ons-announcement-banner__container ons-announcement-banner--{variant}">
+		<div class="ons-container">
+			<div class="ons-announcement-banner ons-announcement-banner--{variant}">
+				<h2 class="ons-announcement-banner__title">{title}</h2>
+				<p class="ons-announcement-banner__description">{description}</p>
+				{#if linkHref}
+					<a class="ons-announcement-banner__link" href={linkHref}>
+						{linkText || linkHref.replace("https://", "")}
+					</a>
+				{/if}
+			</div>
+		</div>
+	</div>
+</Container>
+
+<style>
+	.ons-section__text > :global(*:last-child) {
+		margin-bottom: 0;
+	}
+</style>

package/dist/layout/AnnouncementBanner/AnnouncementBanner.svelte.d.ts

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  AnnouncementBannerProps */
+/** @typedef {typeof __propDef.events}  AnnouncementBannerEvents */
+/** @typedef {typeof __propDef.slots}  AnnouncementBannerSlots */
+export default class AnnouncementBanner extends SvelteComponentTyped<{
+    title: string;
+    description: string;
+    cls?: string | null | undefined;
+    marginTop?: boolean | undefined;
+    marginBottom?: boolean | undefined;
+    variant?: "black" | "red" | "teal" | undefined;
+    linkHref?: string | null | undefined;
+    linkText?: string | null | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type AnnouncementBannerProps = typeof __propDef.props;
+export type AnnouncementBannerEvents = typeof __propDef.events;
+export type AnnouncementBannerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        description: string;
+        cls?: string | null | undefined;
+        marginTop?: boolean | undefined;
+        marginBottom?: boolean | undefined;
+        variant?: "black" | "red" | "teal" | undefined;
+        linkHref?: string | null | undefined;
+        linkText?: string | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,16 @@
+This banner is used to highlight important messages for all users of a service or website. The banner is only meant for critical short-term messages, and should be placed immediately below the website navigation header (and above the breadcrumb).
+
+Based on [this design system component](https://service-manual.ons.gov.uk/design-system/components/announcement-banner).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { AnnouncementBanner } from "@onsvisual/svelte-components";
+</script>
+
+<AnnouncementBanner
+  title="Important service announcement"
+  description="This is a website-wide service announcement"
+  linkHref="https://example.com"
+  linkText="More information"/>
+```

package/dist/layout/DocumentList/Document.svelte.d.ts

@@ -6,9 +6,9 @@ export default class Document extends SvelteComponentTyped<{
     title?: string | null | undefined;
     image?: string | boolean | undefined;
     headingTag?: "h2" | "h3" | undefined;
+    description?: string | null | undefined;
     href?: string | null | undefined;
     featured?: boolean | undefined;
-    description?: string | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -25,9 +25,9 @@ declare const __propDef: {
         title?: string | null | undefined;
         image?: string | boolean | undefined;
         headingTag?: "h2" | "h3" | undefined;
+        description?: string | null | undefined;
         href?: string | null | undefined;
         featured?: boolean | undefined;
-        description?: string | null | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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