@onsvisual/svelte-components 1.0.36 → 1.0.38

package/dist/inputs/Toolbar/ToolbarsContainer.svelte

@@ -1,69 +1,69 @@
-<script lang="ts">
-	import { setContext, onMount } from "svelte";
-	import { writable } from "svelte/store";
-
-	// Initialize a store for button IDs
-	const buttonIds = writable([]);
-	setContext("buttonIds", {
-		register: (id: string) => {
-			buttonIds.update((ids) => [...ids, id]);
-		},
-		unregister: (id: string) => {
-			buttonIds.update((ids) => ids.filter((btnId) => btnId !== id));
-		},
-		buttonIds
-	});
-
-	let showHelpState = $state(true);
-
-	$effect(() => {
-		const sessionValue = sessionStorage.getItem("showHelpModals");
-		const localValue = localStorage.getItem("showHelpModals");
-		showHelpState = sessionValue === "false" ? false : localValue === "false" ? false : true;
-	});
-
-	const showHelpModals = writable(showHelpState);
-	// Set context for showHelpModals
-	setContext("showHelpModals", showHelpModals);
-
-	// Reactively update the initial state
-	$effect(() => {
-		showHelpModals.set(showHelpState);
-	});
-
-	const activeModalStore = writable(null); // Tracks the ID of the active modal
-	setContext("activeModalId", activeModalStore);
-
-	onMount(() => {
-		window.addEventListener("beforeunload", () => {
-			sessionStorage.removeItem("showHelpModals");
-		});
-		let unsubscribe = buttonIds.subscribe((ids) => {
-			if (ids.length > 0) {
-				activeModalStore.set(ids[0]); // Set first button as active
-			}
-		});
-
-		return unsubscribe;
-	});
-
-	export function resetHelp() {
-		sessionStorage.setItem("showHelpModals", "true");
-		showHelpModals.set(true);
-	}
-</script>
-
-<div class="multi-toolbar-container">
-	<slot />
-</div>
-
-<style>
-	.multi-toolbar-container {
-		display: flex;
-		flex-direction: row;
-		gap: 1rem;
-		justify-content: space-between;
-		pointer-events: none;
-		flex-wrap: wrap;
-	}
-</style>
+<script lang="ts">
+	import { setContext, onMount } from "svelte";
+	import { writable } from "svelte/store";
+
+	// Initialize a store for button IDs
+	const buttonIds = writable([]);
+	setContext("buttonIds", {
+		register: (id: string) => {
+			buttonIds.update((ids) => [...ids, id]);
+		},
+		unregister: (id: string) => {
+			buttonIds.update((ids) => ids.filter((btnId) => btnId !== id));
+		},
+		buttonIds
+	});
+
+	let showHelpState = $state(true);
+
+	$effect(() => {
+		const sessionValue = sessionStorage.getItem("showHelpModals");
+		const localValue = localStorage.getItem("showHelpModals");
+		showHelpState = sessionValue === "false" ? false : localValue === "false" ? false : true;
+	});
+
+	const showHelpModals = writable(showHelpState);
+	// Set context for showHelpModals
+	setContext("showHelpModals", showHelpModals);
+
+	// Reactively update the initial state
+	$effect(() => {
+		showHelpModals.set(showHelpState);
+	});
+
+	const activeModalStore = writable(null); // Tracks the ID of the active modal
+	setContext("activeModalId", activeModalStore);
+
+	onMount(() => {
+		window.addEventListener("beforeunload", () => {
+			sessionStorage.removeItem("showHelpModals");
+		});
+		let unsubscribe = buttonIds.subscribe((ids) => {
+			if (ids.length > 0) {
+				activeModalStore.set(ids[0]); // Set first button as active
+			}
+		});
+
+		return unsubscribe;
+	});
+
+	export function resetHelp() {
+		sessionStorage.setItem("showHelpModals", "true");
+		showHelpModals.set(true);
+	}
+</script>
+
+<div class="multi-toolbar-container">
+	<slot />
+</div>
+
+<style>
+	.multi-toolbar-container {
+		display: flex;
+		flex-direction: row;
+		gap: 1rem;
+		justify-content: space-between;
+		pointer-events: none;
+		flex-wrap: wrap;
+	}
+</style>

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

@@ -1,99 +1,101 @@
-A toolbar component. Use `ToolbarsContainer` even if using one toolbar as it contains a store for all the IDs and the activeID.
-
-There's a slot on ToolbarButton if you want to put in custom help text otherwise, there's the prop `helpText`.
-
-Each `ToolControl` will display content underneath the row of buttons. The `id` needs to match the `id` of the button.
-
-Use the prop `hasAriaControls` on a button to link the controls to the button.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { ToolbarsContainer,Toolbar,ToolbarButton, ToolbarDivider,ToolControls,ToolControl, HelpModal } from "@onsvisual/svelte-components";
-</script>
-
-  <ToolbarsContainer>
-
-    <Toolbar orientation="horizontal">
-      <ToolbarButton icon="polygon" label="Draw a polygon" helpText="Draw a polygon on the map" hasAriaControls>
-        <HelpModal>
-          <h3>Detailed Help</h3>
-          <p>More complex help text or even HTML content</p>
-          <ul>
-            <li>With lists</li>
-            <li>Or other elements</li>
-          </ul>
-        </HelpModal>
-      </ToolbarButton>
-      <ToolbarButton
-        icon="radius"
-        label="Draw a circle"
-        helpText="Draw a circle using this tool"
-      />
-      <ToolbarDivider />
-      <ToolbarButton
-        icon="zoomin"
-        label="Zoom in"
-      />
-      <ToolbarButton icon="zoomout" label="Zoom out" />
-    <ToolControls>
-      <ToolControl id="polygon">
-      <p>Text to display when polygon tool is selected, or even an input</p>
-      </ToolControl>
-    </Toolbar>
-
-
-    // Second toolbar
-    <Toolbar>
-      <ToolbarButton id="upload" icon="upload"/>
-      <ToolbarButton id="download" icon="download"/>
-    </Toolbar>
-  </ToolbarsContainer>
-```
-
-## Sticky buttons
-
-```html
-<ToolbarsContainer>
-	<Toolbar>
-		<ToolbarButton id="move" icon="move" label="Move and Pan" sticky />
-		<ToolbarButton id="polygon" icon="polygon" label="Draw a polygon" sticky />
-		<ToolbarButton id="circle" icon="radius" label="Draw a circle" sticky />
-	</Toolbar>
-</ToolbarsContainer>
-```
-
-## Transient buttons
-
-```html
-<ToolbarsContainer>
-	<Toolbar>
-		<ToolbarButton
-			id="zoomin"
-			icon="zoomin"
-			label="Zoom in"
-			transient="{true}"
-			selected="{false}"
-		/>
-		<ToolbarButton id="zoomout" icon="zoomout" label="zoom out" transient />
-	</Toolbar>
-</ToolbarsContainer>
-```
-
-## No help modal
-
-```html
-<ToolbarsContainer>
-	<Toolbar>
-		<ToolbarButton
-			id="zoomin"
-			icon="zoomin"
-			label="Zoom in"
-			transient="{true}"
-			selected="{false}"
-			disableHelp="{true}"
-		/>
-		<ToolbarButton id="zoomout" icon="zoomout" label="zoom out" disableHelp="{true}" transient />
-	</Toolbar>
-</ToolbarsContainer>
-```
+<span class="ons-warning">This component is experimental</span>
+
+A toolbar component. Use `ToolbarsContainer` even if using one toolbar as it contains a store for all the IDs and the activeID.
+
+There's a slot on ToolbarButton if you want to put in custom help text otherwise, there's the prop `helpText`.
+
+Each `ToolControl` will display content underneath the row of buttons. The `id` needs to match the `id` of the button.
+
+Use the prop `hasAriaControls` on a button to link the controls to the button.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ToolbarsContainer,Toolbar,ToolbarButton, ToolbarDivider,ToolControls,ToolControl, HelpModal } from "@onsvisual/svelte-components";
+</script>
+
+  <ToolbarsContainer>
+
+    <Toolbar orientation="horizontal">
+      <ToolbarButton icon="polygon" label="Draw a polygon" helpText="Draw a polygon on the map" hasAriaControls>
+        <HelpModal>
+          <h3>Detailed Help</h3>
+          <p>More complex help text or even HTML content</p>
+          <ul>
+            <li>With lists</li>
+            <li>Or other elements</li>
+          </ul>
+        </HelpModal>
+      </ToolbarButton>
+      <ToolbarButton
+        icon="radius"
+        label="Draw a circle"
+        helpText="Draw a circle using this tool"
+      />
+      <ToolbarDivider />
+      <ToolbarButton
+        icon="zoomin"
+        label="Zoom in"
+      />
+      <ToolbarButton icon="zoomout" label="Zoom out" />
+    <ToolControls>
+      <ToolControl id="polygon">
+      <p>Text to display when polygon tool is selected, or even an input</p>
+      </ToolControl>
+    </Toolbar>
+
+
+    // Second toolbar
+    <Toolbar>
+      <ToolbarButton id="upload" icon="upload"/>
+      <ToolbarButton id="download" icon="download"/>
+    </Toolbar>
+  </ToolbarsContainer>
+```
+
+## Sticky buttons
+
+```html
+<ToolbarsContainer>
+	<Toolbar>
+		<ToolbarButton id="move" icon="move" label="Move and Pan" sticky />
+		<ToolbarButton id="polygon" icon="polygon" label="Draw a polygon" sticky />
+		<ToolbarButton id="circle" icon="radius" label="Draw a circle" sticky />
+	</Toolbar>
+</ToolbarsContainer>
+```
+
+## Transient buttons
+
+```html
+<ToolbarsContainer>
+	<Toolbar>
+		<ToolbarButton
+			id="zoomin"
+			icon="zoomin"
+			label="Zoom in"
+			transient="{true}"
+			selected="{false}"
+		/>
+		<ToolbarButton id="zoomout" icon="zoomout" label="zoom out" transient />
+	</Toolbar>
+</ToolbarsContainer>
+```
+
+## No help modal
+
+```html
+<ToolbarsContainer>
+	<Toolbar>
+		<ToolbarButton
+			id="zoomin"
+			icon="zoomin"
+			label="Zoom in"
+			transient="{true}"
+			selected="{false}"
+			disableHelp="{true}"
+		/>
+		<ToolbarButton id="zoomout" icon="zoomout" label="zoom out" disableHelp="{true}" transient />
+	</Toolbar>
+</ToolbarsContainer>
+```

package/dist/intro.mdx

@@ -1,67 +1,67 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-<Meta title="Introduction" />
-
-# @onsvisual/svelte-components
-
-<p>
-  <a href="https://www.npmjs.com/package/@onsvisual/svelte-components">
-    <img
-      src="https://badge.fury.io/js/@onsvisual%2Fsvelte-components.svg"
-      alt="npm version"
-      style={{ display: "inline-block", margin: "0 5px 0 0" }}
-    />
-  </a>
-  <a href="https://github.com/onsvisual/svelte-components">
-    <img
-      src="https://badgen.net/badge/icon/GitHub?icon=github&label"
-      alt="GitHub"
-      style={{ display: "inline-block", margin: "0 5px 0 0" }}
-    />
-  </a>
-</p>
-
-A library of ONS-branded components for any Svelte or SvelteKit project.
-
-The components and styles in this library are built on the HTML and CSS of the [ONS Design System](https://service-manual.ons.gov.uk/design-system/), but with a number of tweaks and additions to make them suitable for a range of interactive data visualisation and data journalism projects.
-
-## Installing the components
-
-There are two ways to start a new project using these components.
-
-### 1. Use a ready-made template
-
-When you start a project with one of the following templates, @onsvisual/svelte-components will already be installed:
-
-- [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter)
-- [robo-article](https://github.com/ONSvisual/robo-article)
-- [robo-embed](https://github.com/ONSvisual/robo-embed)
-
-### 2. Start a new Svelte Kit project from scratch
-
-If you want to start from scratch, you can set up a [new Svelte Kit project](https://kit.svelte.dev/docs/creating-a-project), then run the following command.
-
-```bash
-npm install @onsvisual/svelte-components --save-dev
-```
-
-## Using the components
-
-When using the components, you need to import both the desired component and the global CSS styles. In a SvelteKit project it is best to import the CSS in the top-level **+layout.svelte** file in your **src/routes** folder, which will apply it to all pages/components in the project.
-
-{/* prettier-ignore */}
-```html
-<!-- +layout.svelte -->
-<script>
-  import "@onsvisual/svelte-components/css/main.css";
-</script>
-
-<slot/>
-
-<!-- +page.svelte / Component.svelte -->
-<script>
-  import { Section } from "@onsvisual/svelte-components";
-</script>
-
-<Section title="Hello world!">I am using an ONS Svelte component.</Section>
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Introduction" />
+
+# @onsvisual/svelte-components
+
+<p>
+  <a href="https://www.npmjs.com/package/@onsvisual/svelte-components">
+    <img
+      src="https://badge.fury.io/js/@onsvisual%2Fsvelte-components.svg"
+      alt="npm version"
+      style={{ display: "inline-block", margin: "0 5px 0 0" }}
+    />
+  </a>
+  <a href="https://github.com/onsvisual/svelte-components">
+    <img
+      src="https://badgen.net/badge/icon/GitHub?icon=github&label"
+      alt="GitHub"
+      style={{ display: "inline-block", margin: "0 5px 0 0" }}
+    />
+  </a>
+</p>
+
+A library of ONS-branded components for any Svelte or SvelteKit project.
+
+The components and styles in this library are built on the HTML and CSS of the [ONS Design System](https://service-manual.ons.gov.uk/design-system/), but with a number of tweaks and additions to make them suitable for a range of interactive data visualisation and data journalism projects.
+
+## Installing the components
+
+There are two ways to start a new project using these components.
+
+### 1. Use a ready-made template
+
+When you start a project with one of the following templates, @onsvisual/svelte-components will already be installed:
+
+- [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter)
+- [robo-article](https://github.com/ONSvisual/robo-article)
+- [robo-embed](https://github.com/ONSvisual/robo-embed)
+
+### 2. Start a new Svelte Kit project from scratch
+
+If you want to start from scratch, you can set up a [new Svelte Kit project](https://kit.svelte.dev/docs/creating-a-project), then run the following command.
+
+```bash
+npm install @onsvisual/svelte-components --save-dev
+```
+
+## Using the components
+
+When using the components, you need to import both the desired component and the global CSS styles. In a SvelteKit project it is best to import the CSS in the top-level **+layout.svelte** file in your **src/routes** folder, which will apply it to all pages/components in the project.
+
+{/* prettier-ignore */}
+```html
+<!-- +layout.svelte -->
+<script>
+  import "@onsvisual/svelte-components/css/main.css";
+</script>
+
+<slot/>
+
+<!-- +page.svelte / Component.svelte -->
+<script>
+  import { Section } from "@onsvisual/svelte-components";
+</script>
+
+<Section title="Hello world!">I am using an ONS Svelte component.</Section>
 ```

package/dist/js/menuOptions.js

@@ -1,14 +1,14 @@
-export default [
-	{ id: "E12000001", label: "North East", group: "England" },
-	{ id: "E12000002", label: "North West", group: "England" },
-	{ id: "E12000003", label: "Yorkshire and The Humber", group: "England" },
-	{ id: "E12000004", label: "East Midlands", group: "England" },
-	{ id: "E12000005", label: "West Midlands", group: "England" },
-	{ id: "E12000006", label: "East of England", group: "England" },
-	{ id: "E12000007", label: "London", group: "England" },
-	{ id: "E12000008", label: "South East", group: "England" },
-	{ id: "E12000009", label: "South West", group: "England" },
-	{ id: "N92000002", label: "Northern Ireland", group: "Northern Ireland" },
-	{ id: "S92000003", label: "Scotland", group: "Scotland" },
-	{ id: "W92000004", label: "Wales", group: "Wales" }
-];
+export default [
+	{ id: "E12000001", label: "North East", group: "England" },
+	{ id: "E12000002", label: "North West", group: "England" },
+	{ id: "E12000003", label: "Yorkshire and The Humber", group: "England" },
+	{ id: "E12000004", label: "East Midlands", group: "England" },
+	{ id: "E12000005", label: "West Midlands", group: "England" },
+	{ id: "E12000006", label: "East of England", group: "England" },
+	{ id: "E12000007", label: "London", group: "England" },
+	{ id: "E12000008", label: "South East", group: "England" },
+	{ id: "E12000009", label: "South West", group: "England" },
+	{ id: "N92000002", label: "Northern Ireland", group: "Northern Ireland" },
+	{ id: "S92000003", label: "Scotland", group: "Scotland" },
+	{ id: "W92000004", label: "Wales", group: "Wales" }
+];