@onsvisual/svelte-components 1.0.36 → 1.0.38

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

@@ -1,14 +1,14 @@
-A checkbox element with various styling and labelling options. Its "checked" attribute can be bound to a Svelte boolean (true/false) variable.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Checkbox } from "@onsvisual/svelte-components";
-
-  let checked = false;
-</script>
-
-<Checkbox id="checkbox" label="Select this" bind:checked />
-```
+A checkbox element with various styling and labelling options. Its "checked" attribute can be bound to a Svelte boolean (true/false) variable.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkbox } from "@onsvisual/svelte-components";
+
+  let checked = false;
+</script>
+
+<Checkbox id="checkbox" label="Select this" bind:checked />
+```

package/dist/inputs/Checkboxes/Checkboxes.stories.svelte

@@ -1,34 +1,34 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
-	import Checkbox from "../Checkbox/Checkbox.svelte";
-	import Checkboxes from "./Checkboxes.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import exampleDocs from "./docs/example.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Checkboxes",
-		component: Checkboxes,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-
-	const items = [
-		{ id: "ice-cream", label: "Ice cream", checked: true },
-		{ id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
-		{ id: "disabled", label: "Disabled option", checked: false, disabled: true }
-	];
-</script>
-
-<Story name="Default" args={{ label: "Select items", items }} />
-
-<Story name="Compact without label" args={{ items, compact: true }} />
-
-<Story name="Individually defined checkboxes" asChild parameters={withStoryDocs(exampleDocs)}>
-	<Checkboxes label="Select items">
-		<Checkbox id="ice-cream" label="Ice cream" />
-		<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
-		<Checkbox id="disabled" label="Disabled option" disabled />
-	</Checkboxes>
-</Story>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import Checkbox from "../Checkbox/Checkbox.svelte";
+	import Checkboxes from "./Checkboxes.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Checkboxes",
+		component: Checkboxes,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const items = [
+		{ id: "ice-cream", label: "Ice cream", checked: true },
+		{ id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
+		{ id: "disabled", label: "Disabled option", checked: false, disabled: true }
+	];
+</script>
+
+<Story name="Default" args={{ label: "Select items", items }} />
+
+<Story name="Compact without label" args={{ items, compact: true }} />
+
+<Story name="Individually defined checkboxes" asChild parameters={withStoryDocs(exampleDocs)}>
+	<Checkboxes label="Select items">
+		<Checkbox id="ice-cream" label="Ice cream" />
+		<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
+		<Checkbox id="disabled" label="Disabled option" disabled />
+	</Checkboxes>
+</Story>

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -1,62 +1,62 @@
-<script>
-	import { setContext } from "svelte";
-	import { writable } from "svelte/store";
-	import Checkbox from "../Checkbox/Checkbox.svelte";
-
-	/**
-	 * Title/legend for parent <fieldset>
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Visually hide the title/legend
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * Descriptive "how to" label for inputs
-	 * @type {string|null}
-	 */
-	export let label = null;
-	/** Optional: Define the checkboxes as an array of {id, label, checked, description?}
-	 * @type {object[]|null}
-	 */
-	export let items = null;
-	/** Compact mode (no borders)
-	 * @type {boolean}
-	 */
-	export let compact = false;
-	/** Binding for selected checkboxes (if checkboxes are defined as "items")
-	 * @type {object[]}
-	 */
-	export let value = [];
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-
-	const checkboxes = writable([]);
-	setContext("checkboxes", checkboxes);
-</script>
-
-<fieldset class="ons-fieldset {cls}">
-	{#if title}
-		<legend class="ons-fieldset__legend ons-u-mb-no">
-			<span class="ons-fieldset__legend-title ons-u-pb-no" class:ons-u-vh={hideTitle}>{title}</span>
-		</legend>
-	{/if}
-	<div class="ons-input-items">
-		{#if label}
-			<p class="ons-checkboxes__label">{label}</p>
-		{/if}
-		<div class="ons-checkboxes__items">
-			<slot />
-			{#if Array.isArray(items)}
-				{#each items as item}
-					<Checkbox {item} bind:group={value} {compact} on:change />
-				{/each}
-			{/if}
-		</div>
-	</div>
-</fieldset>
+<script>
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+	import Checkbox from "../Checkbox/Checkbox.svelte";
+
+	/**
+	 * Title/legend for parent <fieldset>
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Visually hide the title/legend
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Descriptive "how to" label for inputs
+	 * @type {string|null}
+	 */
+	export let label = null;
+	/** Optional: Define the checkboxes as an array of {id, label, checked, description?}
+	 * @type {object[]|null}
+	 */
+	export let items = null;
+	/** Compact mode (no borders)
+	 * @type {boolean}
+	 */
+	export let compact = false;
+	/** Binding for selected checkboxes (if checkboxes are defined as "items")
+	 * @type {object[]}
+	 */
+	export let value = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	const checkboxes = writable([]);
+	setContext("checkboxes", checkboxes);
+</script>
+
+<fieldset class="ons-fieldset {cls}">
+	{#if title}
+		<legend class="ons-fieldset__legend ons-u-mb-no">
+			<span class="ons-fieldset__legend-title ons-u-pb-no" class:ons-u-vh={hideTitle}>{title}</span>
+		</legend>
+	{/if}
+	<div class="ons-input-items">
+		{#if label}
+			<p class="ons-checkboxes__label">{label}</p>
+		{/if}
+		<div class="ons-checkboxes__items">
+			<slot />
+			{#if Array.isArray(items)}
+				{#each items as item}
+					<Checkbox {item} bind:group={value} {compact} on:change />
+				{/each}
+			{/if}
+		</div>
+	</div>
+</fieldset>

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

@@ -1,20 +1,20 @@
-A component for defining a group of [checkbox](/docs/inputs-checkbox--docs) elements, whose checked values can be bound to Svelte variables, or grouped in an array.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes). (Note: In some use cases, it may be preferable to use raw HTML `<input type="checkbox">` components and style these using CSS.)
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Checkboxes } from "@onsvisual/svelte-components";
-
-  let items = [
-    { id: "ice-cream", label: "Ice cream", checked: true },
-    { id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
-    { id: "disabled", label: "Disabled option", checked: false, disabled: true },
-  ];
-
-  let selected = []; // An array of the selected items
-</script>
-
-<Checkboxes {items} bind:value={selected} label="Select items">
-```
+A component for defining a group of [checkbox](/docs/inputs-checkbox--docs) elements, whose checked values can be bound to Svelte variables, or grouped in an array.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes). (Note: In some use cases, it may be preferable to use raw HTML `<input type="checkbox">` components and style these using CSS.)
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkboxes } from "@onsvisual/svelte-components";
+
+  let items = [
+    { id: "ice-cream", label: "Ice cream", checked: true },
+    { id: "sprinkles", label: "Sprinkles", description: "Highly recommended!", checked: false },
+    { id: "disabled", label: "Disabled option", checked: false, disabled: true },
+  ];
+
+  let selected = []; // An array of the selected items
+</script>
+
+<Checkboxes {items} bind:value={selected} label="Select items">
+```

package/dist/inputs/Checkboxes/docs/example.md

@@ -1,16 +1,16 @@
-In this example, the child textboxes are defined explicitly.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Checkbox, Checkboxes } from "@onsvisual/svelte-components";
-
-  let selected = []; // An array of the selected items
-</script>
-
-<Checkboxes label="Select items">
-  <Checkbox id="ice-cream" label="Ice cream" bind:group={selected} />
-  <Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" bind:group={selected} />
-  <Checkbox id="disabled" label="Disabled option" bind:group={selected} />
-</Checkboxes>
-```
+In this example, the child textboxes are defined explicitly.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Checkbox, Checkboxes } from "@onsvisual/svelte-components";
+
+  let selected = []; // An array of the selected items
+</script>
+
+<Checkboxes label="Select items">
+  <Checkbox id="ice-cream" label="Ice cream" bind:group={selected} />
+  <Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" bind:group={selected} />
+  <Checkbox id="disabled" label="Disabled option" bind:group={selected} />
+</Checkboxes>
+```

package/dist/inputs/Dropdown/Dropdown.stories.svelte

@@ -1,54 +1,54 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Dropdown from "./Dropdown.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import options from "../../js/menuOptions.js";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Dropdown",
-		component: Dropdown,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<div style:padding="12px">
-		<Dropdown {...args} />
-	</div>
-{/snippet}
-
-<Story
-	name="Default"
-	args={{
-		id: "topic",
-		label: "Question topic",
-		options
-	}}
-	{template}
-/>
-
-<Story
-	name="Hidden label"
-	args={{
-		id: "topic",
-		label: "Question topic",
-		hideLabel: true,
-		options
-	}}
-	{template}
-/>
-
-<Story
-	name="Custom placeholder text"
-	args={{
-		id: "topic",
-		label: "Question topic",
-		hideLabel: true,
-		placeholder: "Some custom text",
-		options
-	}}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Dropdown from "./Dropdown.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import options from "../../js/menuOptions.js";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Dropdown",
+		component: Dropdown,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Dropdown {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		id: "topic",
+		label: "Question topic",
+		options
+	}}
+	{template}
+/>
+
+<Story
+	name="Hidden label"
+	args={{
+		id: "topic",
+		label: "Question topic",
+		hideLabel: true,
+		options
+	}}
+	{template}
+/>
+
+<Story
+	name="Custom placeholder text"
+	args={{
+		id: "topic",
+		label: "Question topic",
+		hideLabel: true,
+		placeholder: "Some custom text",
+		options
+	}}
+	{template}
+/>

package/dist/inputs/Dropdown/Dropdown.svelte

@@ -1,66 +1,66 @@
-<script>
-	import { createEventDispatcher } from "svelte";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * Unique id for the &lt;select&gt; element
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Name for the &lt;select&gt; element
-	 * @type {string|null}
-	 */
-	export let name = id;
-	/**
-	 * A label to describe the &lt;select&gt; element (expected for accessibility)
-	 * @type {string|null}
-	 */
-	export let label = null;
-	/**
-	 * Visually hide the label
-	 * @type {boolean}
-	 */
-	export let hideLabel = false;
-	/**
-	 * An optional placeholder text
-	 * @type {string}
-	 */
-	export let placeholder = "Select an option";
-	/**
-	 * A prop to bind to for the selected value
-	 * @type {object|null}
-	 */
-	export let value = null;
-	/**
-	 * An array of options, formatted {id, label}
-	 * @type {object[]}
-	 */
-	export let options = [];
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<div class="ons-field {cls}">
-	{#if label}
-		<label class="ons-label" for={id} class:ons-u-vh={hideLabel}>{label}</label>
-	{/if}
-	<select
-		{id}
-		{name}
-		class="ons-input ons-input--select"
-		bind:value
-		on:change={(e) => dispatch("change", e)}
-	>
-		{#if placeholder}
-			<option value={null} selected disabled>{placeholder}</option>
-		{/if}
-		{#each options as option}
-			<option value={option}>{option?.label || option}</option>
-		{/each}
-	</select>
-</div>
+<script>
+	import { createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Unique id for the &lt;select&gt; element
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Name for the &lt;select&gt; element
+	 * @type {string|null}
+	 */
+	export let name = id;
+	/**
+	 * A label to describe the &lt;select&gt; element (expected for accessibility)
+	 * @type {string|null}
+	 */
+	export let label = null;
+	/**
+	 * Visually hide the label
+	 * @type {boolean}
+	 */
+	export let hideLabel = false;
+	/**
+	 * An optional placeholder text
+	 * @type {string}
+	 */
+	export let placeholder = "Select an option";
+	/**
+	 * A prop to bind to for the selected value
+	 * @type {object|null}
+	 */
+	export let value = null;
+	/**
+	 * An array of options, formatted {id, label}
+	 * @type {object[]}
+	 */
+	export let options = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<div class="ons-field {cls}">
+	{#if label}
+		<label class="ons-label" for={id} class:ons-u-vh={hideLabel}>{label}</label>
+	{/if}
+	<select
+		{id}
+		{name}
+		class="ons-input ons-input--select"
+		bind:value
+		on:change={(e) => dispatch("change", e)}
+	>
+		{#if placeholder}
+			<option value={null} selected disabled>{placeholder}</option>
+		{/if}
+		{#each options as option}
+			<option value={option}>{option?.label || option}</option>
+		{/each}
+	</select>
+</div>

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

@@ -1,22 +1,22 @@
-A standard `<select>` component with Svelte bindings and events.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Dropdown } from "@onsvisual/svelte-components";
-
-  const values = [
-    { id: "1", label: "one" },
-    { id: "2", label: "two" },
-    { id: "3", label: "three" },
-  ];
-
-  // Bind the <select> value to a variable (reactive)
-  let value;
-
-  // Define your own function on change
-  const handleChange = (e) => console.log(e);
-</script>
-
-<Dropdown {options} bind:value on:change="{handleChange}" />
-```
+A standard `<select>` component with Svelte bindings and events.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Dropdown } from "@onsvisual/svelte-components";
+
+  const values = [
+    { id: "1", label: "one" },
+    { id: "2", label: "two" },
+    { id: "3", label: "three" },
+  ];
+
+  // Bind the <select> value to a variable (reactive)
+  let value;
+
+  // Define your own function on change
+  const handleChange = (e) => console.log(e);
+</script>
+
+<Dropdown {options} bind:value on:change="{handleChange}" />
+```

package/dist/inputs/ErrorPanel/ErrorPanel.stories.svelte

@@ -1,25 +1,25 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import ErrorPanel from "./ErrorPanel.svelte";
-	import Input from "../Input/Input.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/ErrorPanel",
-		component: ErrorPanel,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<div style:padding="12px">
-		<ErrorPanel {...args}>
-			<Input />
-		</ErrorPanel>
-	</div>
-{/snippet}
-
-<Story name="Default" args={{ message: "You entered the wrong text" }} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import ErrorPanel from "./ErrorPanel.svelte";
+	import Input from "../Input/Input.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/ErrorPanel",
+		component: ErrorPanel,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<ErrorPanel {...args}>
+			<Input />
+		</ErrorPanel>
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ message: "You entered the wrong text" }} {template} />