@onsvisual/svelte-components 1.0.25 → 1.0.28

package/dist/css/main.css

@@ -1,4 +1,4 @@
-@import url("https://cdn.ons.gov.uk/sdc/design-system/72.10.4	/css/main.css");
+@import url("https://cdn.ons.gov.uk/sdc/design-system/72.10.4/css/main.css");
 @import url("https://cdn.ons.gov.uk/vendor/accessible-autocomplete/3.0.1/accessible-autocomplete.min.css");
 
 /* CSS rules missing from design system */

package/dist/index.d.ts

@@ -46,6 +46,16 @@ export { default as Input } from "./inputs/Input/Input.svelte";
 export { default as Radio } from "./inputs/Radios/Radio.svelte";
 export { default as Radios } from "./inputs/Radios/Radios.svelte";
 export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
+export { default as HelpModal } from "./inputs/Toolbar/HelpModal.svelte";
+export { default as ToolbarIcon } from "./inputs/Toolbar/ToolbarIcon.svelte";
+export { default as Toolbar } from "./inputs/Toolbar/Toolbar.svelte";
+export { default as ToolbarButton } from "./inputs/Toolbar/ToolbarButton.svelte";
+export { default as ToolbarDivider } from "./inputs/Toolbar/ToolbarDivider.svelte";
+export { default as ToolbarsContainer } from "./inputs/Toolbar/ToolbarsContainer.svelte";
+export { default as ToolControl } from "./inputs/Toolbar/ToolControl.svelte";
+export { default as ToolControls } from "./inputs/Toolbar/ToolControls.svelte";
+export { default as ButtonGroup } from "./inputs/ButtonGroup/ButtonGroup.svelte";
+export { default as ButtonGroupItem } from "./inputs/ButtonGroup/ButtonGroupItem.svelte";
 export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";
 export { default as Divider } from "./decorators/Divider/Divider.svelte";
 export { default as Em } from "./decorators/Em/Em.svelte";

package/dist/index.js

@@ -63,6 +63,16 @@ export { default as Radios } from "./inputs/Radios/Radios.svelte";
 export { default as Select } from "./inputs/Select/Select.svelte";
 export { default as AccessibleSelect } from "./inputs/Select/Select.svelte"; // Alias for Select
 export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
+export { default as HelpModal } from "./inputs/Toolbar/HelpModal.svelte";
+export { default as ToolbarIcon } from "./inputs/Toolbar/ToolbarIcon.svelte";
+export { default as Toolbar } from "./inputs/Toolbar/Toolbar.svelte";
+export { default as ToolbarButton } from "./inputs/Toolbar/ToolbarButton.svelte";
+export { default as ToolbarDivider } from "./inputs/Toolbar/ToolbarDivider.svelte";
+export { default as ToolbarsContainer } from "./inputs/Toolbar/ToolbarsContainer.svelte";
+export { default as ToolControl } from "./inputs/Toolbar/ToolControl.svelte";
+export { default as ToolControls } from "./inputs/Toolbar/ToolControls.svelte";
+export { default as ButtonGroup } from "./inputs/ButtonGroup/ButtonGroup.svelte";
+export { default as ButtonGroupItem } from "./inputs/ButtonGroup/ButtonGroupItem.svelte";
 
 // Decorators
 export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";

package/dist/inputs/ButtonGroup/ButtonGroup.stories.svelte

@@ -0,0 +1,40 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import componentDocs from "./docs/component.md?raw";
+	import ButtonGroup from "./ButtonGroup.svelte";
+	import ButtonGroupItem from "./ButtonGroupItem.svelte";
+	import { withComponentDocs } from "../../js/withParams.js";
+
+	const { Story } = defineMeta({
+		title: "Inputs/ButtonGroup",
+		component: ButtonGroup,
+		tags: ["autodocs"],
+		argTypes: {
+			legend: { control: "text" },
+			visuallyHideLegend: { control: "boolean" }
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<ButtonGroup {...args}>
+		<ButtonGroupItem value="1" label="Option 1" />
+		<ButtonGroupItem value="2" label="Option 2" />
+		<ButtonGroupItem value="3" label="Option 3" />
+	</ButtonGroup>
+{/snippet}
+
+<Story name="Default" args={{ name: "primary", legend: "Choose an option" }} {template} />
+
+<Story
+	name="With initial value"
+	args={{ name: "primary", legend: "Choose an option", value: "2" }}
+	{template}
+/>
+
+<Story
+	name="Visually hide legend"
+	args={{ name: "primary", legend: "Choose an option", visuallyHideLegend: true }}
+	{template}
+/>

package/dist/inputs/ButtonGroup/ButtonGroup.stories.svelte.d.ts

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

package/dist/inputs/ButtonGroup/ButtonGroup.svelte

@@ -0,0 +1,57 @@
+<script>
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+
+	let { name = "", legend = "", value, visuallyHideLegend = false } = $props();
+
+	// create the store
+	const selectedValue = writable(value);
+
+	//  When store changes and update prop
+	$effect(() => {
+		selectedValue.set(value);
+	});
+
+	const currentValue = $derived(selectedValue);
+
+	$effect(() => {
+		if ($currentValue !== value) {
+			value = $currentValue;
+		}
+	});
+
+	// Create a context to share with child Button components
+	setContext("buttonGroup", {
+		groupName: name,
+		selectedValue
+	});
+</script>
+
+<fieldset class="button-group">
+	{#if legend}
+		<legend class:ons-u-vh={visuallyHideLegend}>{legend}</legend>
+	{/if}
+	<div class="buttons">
+		<slot />
+	</div>
+</fieldset>
+
+<style>
+	.button-group {
+		display: inline-block;
+	}
+
+	legend {
+		font-weight: bold;
+		margin-bottom: 0.5rem;
+	}
+
+	.buttons {
+		display: flex;
+		gap: 8px;
+		background: #f5f5f6;
+		padding: 4px;
+		border-radius: 8px;
+		justify-content: space-between;
+	}
+</style>

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

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

package/dist/inputs/ButtonGroup/ButtonGroupItem.svelte

@@ -0,0 +1,101 @@
+<script>
+	import { getContext } from "svelte";
+
+	let { value = "", label = "" } = $props();
+
+	// Get the parent ButtonGroup context
+	const buttonGroup = getContext("buttonGroup");
+	const { groupName, selectedValue } = buttonGroup;
+
+	// Subscribe to selectedValue store
+	const currentSelected = $derived(selectedValue);
+	const selected = $derived($currentSelected === value);
+
+	function handleClick() {
+		selectedValue.set(value); // Update the store
+	}
+
+	let buttonRef;
+
+	function handleKeydown(event) {
+		const buttons = Array.from(document.querySelectorAll(`[name="${groupName}"]`));
+		const currentIndex = buttons.indexOf(buttonRef);
+
+		let newIndex = -1;
+
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+			newIndex = (currentIndex + 1) % buttons.length;
+		} else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+			newIndex = (currentIndex - 1 + buttons.length) % buttons.length;
+		} else if (event.key === "Enter" || event.key === " ") {
+			handleClick();
+			return;
+		}
+
+		if (newIndex !== -1) {
+			buttons[newIndex].focus();
+		}
+	}
+</script>
+
+<div class="button-container">
+	<input
+		type="radio"
+		id={value}
+		name={groupName}
+		{value}
+		checked={selected}
+		class="radio-input"
+		on:click={handleClick}
+		on:keydown={handleKeydown}
+		aria-checked={selected}
+		tabindex="0"
+		bind:this={buttonRef}
+	/>
+	<label for={value} class="button" class:selected on:click={handleClick}>
+		{label || value}
+	</label>
+</div>
+
+<style>
+	.button-container {
+		display: flex;
+	}
+
+	.radio-input {
+		position: absolute;
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.button {
+		flex-grow: 0;
+		padding: 4px 8px;
+		border: none;
+		background: transparent;
+		font-size: 14px;
+		cursor: pointer;
+		border-radius: 6px;
+		transition:
+			background 0.2s ease,
+			color 0.2s ease;
+		color: #707071;
+		text-align: center;
+	}
+
+	.button:hover {
+		background-color: #e8e8e8;
+	}
+
+	.button:focus {
+		box-shadow: orange 0 0 0 2px;
+	}
+
+	.button.selected {
+		background: white;
+		font-weight: bold;
+		color: #206095;
+		box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
+	}
+</style>

package/dist/inputs/ButtonGroup/ButtonGroupItem.svelte.d.ts

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

package/dist/inputs/ButtonGroup/docs/component.md

@@ -0,0 +1,21 @@
+Radio inputs dressed up as a button group.
+
+<!-- prettier-ignore -->
+```html
+<ButtonGroup name="primary" legend="Choose an option">
+      <ButtonGroupItem value="1" label="Option 1" />
+      <ButtonGroupItem value="2" label="Option 2" />
+      <ButtonGroupItem value="3" label="Option 3" />
+</ButtonGroup>
+```
+
+To see what is selected, bind `value` to a variable e.g.
+
+<!-- prettier-ignore -->
+```html
+let selectedValue;
+
+<ButtonGroup name="primary" legend="Choose an option" bind:value="{selectedValue}">
+...
+</ButtonGroup>
+```

package/dist/inputs/Radios/Radio.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { createEventDispatcher } from "svelte";
+	import { onMount, createEventDispatcher } from "svelte";
 
 	const dispatch = createEventDispatcher();
 
@@ -38,6 +38,12 @@
 	 * @type {boolean}
 	 */
 	export let compact = false;
+
+	let el;
+
+	onMount(() => {
+		if (value?.id === item.id) el.checked = true;
+	});
 </script>
 
 <span class="ons-radios__item" class:ons-radios__item--no-border={compact}>
@@ -54,6 +60,7 @@
 					dispatch("change", { value, e });
 				}
 			}}
+			bind:this={el}
 		/>
 		<label
 			class="ons-radio__label"

package/dist/inputs/Toolbar/HelpModal.svelte

@@ -0,0 +1,234 @@
+<script lang="ts">
+	import { getContext } from "svelte";
+	// import { get, set } from "svelte/store";
+	import { fly } from "svelte/transition";
+	import Checkbox from "../Checkbox/Checkbox.svelte";
+	import Button from "../Button/Button.svelte";
+
+	let {
+		triggerElement = null,
+		onClose = () => {}
+	}: {
+		triggerElement?: HTMLElement | null;
+		onClose?: () => void;
+	} = $props();
+
+	// --- Context ---
+	const activeModalId = getContext("activeModalId");
+	const showHelpModals = getContext("showHelpModals");
+	const { buttonIds } = getContext("buttonIds");
+
+	// --- Derived state from stores ---
+	const ids = $derived(buttonIds);
+	const currentActiveId = $derived(activeModalId);
+	const showHelp = $derived(showHelpModals);
+
+	// --- Local state ---
+	let modalPosition = $state({ top: 50, left: -5 });
+	let notchPosition = $state({ left: 17, right: "auto" });
+	let dontShowMeAgain = $state(false);
+
+	$effect(() => {
+		if (!triggerElement) return;
+
+		const rect = triggerElement.getBoundingClientRect();
+
+		// Calculate the modal's position
+		// const spaceBelow = window.innerHeight - rect.bottom;
+		// const spaceAbove = rect.top;
+		const spaceRight = window.innerWidth - rect.right;
+
+		let newLeft = window.scrollX - 10;
+		let newNotchLeft: number | "auto" = 17;
+		let newNotchRight: number | "auto" = "auto";
+
+		// if (spaceBelow < 200 && spaceAbove > 200) {
+		// 	newTop = rect.top + window.scrollY - 10;
+		// }
+
+		if (spaceRight < 300) {
+			newLeft = window.scrollX - 325;
+			newNotchLeft = "auto";
+			newNotchRight = -350;
+		}
+
+		// modalPosition.top = newTop;
+		modalPosition.left = newLeft;
+		notchPosition.left = newNotchLeft;
+		notchPosition.right = newNotchRight;
+	});
+
+	// Update localStorage if "Don't show me again" is checked
+	function disableHelpModalsPermanently() {
+		localStorage.setItem("showHelpModals", "false");
+		sessionStorage.setItem("showHelpModals", "false");
+		showHelpModals.set(false);
+	}
+
+	// Hide modals until refresh
+	function hideHelpModalsUntilRefresh() {
+		sessionStorage.setItem("showHelpModals", "false");
+		showHelpModals.set(false);
+	}
+
+	// Navigate to the next modal
+	function nextModal() {
+		const currentIndex = $ids.indexOf($currentActiveId);
+		if (currentIndex !== -1 && currentIndex < $ids.length - 1) {
+			activeModalId.set($ids[currentIndex + 1]);
+			// console.log("Navigating to next modal:", ids[currentIndex + 1]);
+		}
+		if (dontShowMeAgain) {
+			disableHelpModalsPermanently(); // Disable help modals permanently
+		}
+	}
+
+	function handleSkip() {
+		if (dontShowMeAgain) {
+			disableHelpModalsPermanently(); // Disable help modals permanently
+		} else {
+			hideHelpModalsUntilRefresh();
+		}
+	}
+
+	// Navigate to the previous modal
+	function previousModal() {
+		const currentIndex = $ids.indexOf($currentActiveId);
+		if (currentIndex > 0) {
+			activeModalId.set($ids[currentIndex - 1]);
+			// console.log("Navigating to previous modal:", ids[currentIndex - 1]);
+		}
+		if (dontShowMeAgain) {
+			disableHelpModalsPermanently(); // Disable help modals permanently
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === "Escape") onClose();
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+{#if $showHelp}
+	<div class="help-modal-wrapper" style="top: {modalPosition.top}px; left: {modalPosition.left}px;">
+		<!-- Notch -->
+		<div
+			class="help-modal-notch"
+			style="left: {notchPosition.left}px;right: {notchPosition.right}px;"
+		></div>
+
+		<!-- Modal Content -->
+		<div class="help-modal" role="dialog" aria-modal="true">
+			<slot />
+			<!-- <button class="close-button" on:click="{onClose}" aria-label="Close help">×</button> -->
+
+			<div class="ons-padding-4">
+				<Checkbox
+					id="dontShowMeAgain"
+					label="Don't show me again"
+					bind:checked={dontShowMeAgain}
+					compact
+				/>
+			</div>
+			<div class="ons-grid-flex ons-grid-flex--between ons-grid-flex-vertical-center">
+				<button class="btn-link" on:click={handleSkip} aria-label="Skip instructions">Skip</button>
+				{#if $ids.indexOf($currentActiveId) > 0}
+					<span style="margin-left:auto; margin-right:10px">
+						<Button variant="secondary" on:click={previousModal}>Back</Button>
+					</span>
+				{/if}
+
+				{#if $ids.indexOf($currentActiveId) != $ids.length - 1}
+					<Button on:click={nextModal}>Next</Button>
+				{/if}
+				{#if $ids.indexOf($currentActiveId) == $ids.length - 1}
+					<Button on:click={hideHelpModalsUntilRefresh}>Get started</Button>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
+
+<style>
+	.help-modal-wrapper {
+		position: absolute;
+		z-index: 10;
+	}
+
+	.help-modal-notch {
+		position: absolute;
+		top: -10px;
+		width: 0;
+		height: 0;
+		border-left: 10px solid transparent;
+		border-right: 10px solid transparent;
+		border-bottom: 10px solid white;
+		z-index: 1;
+	}
+
+	.help-modal {
+		position: absolute;
+		flex-direction: column;
+		justify-content: center;
+		align-items: flex-start;
+		padding: 16px;
+		isolation: isolate;
+
+		width: 360px;
+
+		background: #ffffff;
+		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+		border-radius: 16px;
+
+		/* Inside auto layout */
+		flex: none;
+		order: 2;
+		flex-grow: 0;
+	}
+
+	.close-button {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		background: none;
+		border: none;
+		font-size: 1.25rem;
+		color: #666;
+		cursor: pointer;
+	}
+
+	.close-button:hover {
+		color: #333;
+	}
+
+	.ons-padding-4 {
+		padding-top: var(--4-units, 16px);
+		padding-bottom: var(--4-units, 16px);
+	}
+
+	button.btn-link {
+		line-height: 1.3;
+		color: var(--link, #206095);
+		background: none;
+		margin: 0;
+		padding: 0;
+		border: none;
+		text-decoration: underline;
+		text-decoration-thickness: 1px;
+		text-underline-position: under;
+	}
+	button.btn-link:hover {
+		color: var(--link-hover, #003c57) !important;
+		text-decoration-thickness: 2px;
+	}
+	button.btn-link:focus {
+		background-color: #fbc900 !important;
+		box-shadow:
+			0 -2px #fbc900,
+			0 4px #222;
+		color: #222 !important;
+		outline: 3px solid transparent;
+		outline-offset: 1px;
+		text-decoration: none;
+	}
+</style>

package/dist/inputs/Toolbar/HelpModal.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HelpModalProps = typeof __propDef.props;
+export type HelpModalEvents = typeof __propDef.events;
+export type HelpModalSlots = typeof __propDef.slots;
+export default class HelpModal extends SvelteComponentTyped<HelpModalProps, HelpModalEvents, HelpModalSlots> {
+}
+export {};

package/dist/inputs/Toolbar/ToolControl.svelte

@@ -0,0 +1,23 @@
+<script>
+	import { getContext } from "svelte";
+	const activeModalId = getContext("activeModalId");
+	const showHelpModals = getContext("showHelpModals");
+
+	const currentModalId = $derived(activeModalId);
+	const showHelp = $derived(showHelpModals);
+
+	let { id = "" } = $props();
+</script>
+
+{#if currentModalId === id && !showHelp}
+	<div class="tool-control" role="tabpanel" aria-labelledby={`button-${id}`} id={`panel-${id}`}>
+		<slot />
+	</div>
+{/if}
+
+<style>
+	.tool-control {
+		max-width: 371px;
+		padding: 8px;
+	}
+</style>

package/dist/inputs/Toolbar/ToolControl.svelte.d.ts

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

package/dist/inputs/Toolbar/ToolControls.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { getContext } from "svelte";
+	const activeModalId = getContext("activeModalId");
+	const id = $derived(activeModalId);
+</script>
+
+{#if id}
+	<slot />
+{/if}