@onsvisual/svelte-components 1.0.44 → 1.0.45

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} />

package/dist/inputs/ErrorPanel/ErrorPanel.svelte

@@ -1,24 +1,24 @@
-<script>
-	/**
-	 * Set an error message
-	 * @type {string|null}
-	 */
-	export let message = null;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<div class="ons-panel ons-panel--error ons-panel--no-title {cls}" id="number-of-employees-error">
-	<span class="ons-panel__assistive-text ons-u-vh">Error: </span>
-	<div class="ons-panel__body">
-		{#if message}
-			<p class="ons-panel__error">
-				<strong>{message}</strong>
-			</p>
-		{/if}
-		<slot />
-	</div>
-</div>
+<script>
+	/**
+	 * Set an error message
+	 * @type {string|null}
+	 */
+	export let message = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<div class="ons-panel ons-panel--error ons-panel--no-title {cls}" id="number-of-employees-error">
+	<span class="ons-panel__assistive-text ons-u-vh">Error: </span>
+	<div class="ons-panel__body">
+		{#if message}
+			<p class="ons-panel__error">
+				<strong>{message}</strong>
+			</p>
+		{/if}
+		<slot />
+	</div>
+</div>

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

@@ -1,14 +1,14 @@
-Use this component to show validation errors by wrapping form inputs and fieldsets.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/error).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { ErrorPanel, Input } from "@onsvisual/svelte-components";
-</script>
-
-<ErrorPanel message="You enterered the wrong text">
-  <Input/>
-</ErrorPanel>
-```
+Use this component to show validation errors by wrapping form inputs and fieldsets.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/error).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ErrorPanel, Input } from "@onsvisual/svelte-components";
+</script>
+
+<ErrorPanel message="You enterered the wrong text">
+  <Input/>
+</ErrorPanel>
+```

package/dist/inputs/ErrorSummary/ErrorSummary.stories.svelte

@@ -1,34 +1,34 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
-	import ErrorSummary from "./ErrorSummary.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import exampleDocs from "./docs/example.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/ErrorSummary",
-		component: ErrorSummary,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-
-	const items = [
-		{ label: "First issue description.", href: "#0" },
-		{ label: "Second issue description." }
-	];
-</script>
-
-{#snippet template(args)}
-	<div style:padding="12px">
-		<ErrorSummary {...args} />
-	</div>
-{/snippet}
-
-<Story name="Default" args={{ title: "There are 2 problems with your answer", items }} {template} />
-
-<Story name="Error defined as text" asChild parameters={withStoryDocs(exampleDocs)}>
-	<div style:padding="12px">
-		<ErrorSummary title="There was an error">This is a text to describe the error.</ErrorSummary>
-	</div>
-</Story>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import ErrorSummary from "./ErrorSummary.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/ErrorSummary",
+		component: ErrorSummary,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const items = [
+		{ label: "First issue description.", href: "#0" },
+		{ label: "Second issue description." }
+	];
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<ErrorSummary {...args} />
+	</div>
+{/snippet}
+
+<Story name="Default" args={{ title: "There are 2 problems with your answer", items }} {template} />
+
+<Story name="Error defined as text" asChild parameters={withStoryDocs(exampleDocs)}>
+	<div style:padding="12px">
+		<ErrorSummary title="There was an error">This is a text to describe the error.</ErrorSummary>
+	</div>
+</Story>

package/dist/inputs/ErrorSummary/ErrorSummary.svelte

@@ -1,47 +1,47 @@
-<script>
-	import List from "../../layout/List/List.svelte";
-
-	/**
-	 * Defines the title of the error
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Define an array of errors/issues in the format {label, href?}
-	 * @type {object[]}
-	 */
-	export let items = [];
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error {cls}">
-	<div class="ons-panel__header">
-		<h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
-	</div>
-	<div class="ons-panel__body">
-		{#if Array.isArray(items)}
-			<List mode="number">
-				{#each items as item}
-					<li>
-						{#if item.href}
-							<a href={item.href}>{item.label}</a>
-						{:else}
-							{item.label}
-						{/if}
-					</li>
-				{/each}
-			</List>
-		{/if}
-		<slot />
-	</div>
-</div>
-
-<style>
-	.ons-panel {
-		color: rgb(34, 34, 34);
-	}
-</style>
+<script>
+	import List from "../../layout/List/List.svelte";
+
+	/**
+	 * Defines the title of the error
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Define an array of errors/issues in the format {label, href?}
+	 * @type {object[]}
+	 */
+	export let items = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<div aria-labelledby="alert" role="alert" tabindex="-1" class="ons-panel ons-panel--error {cls}">
+	<div class="ons-panel__header">
+		<h2 id="alert" data-qa="error-header" class="ons-panel__title ons-u-fs-r--b">{title}</h2>
+	</div>
+	<div class="ons-panel__body">
+		{#if Array.isArray(items)}
+			<List mode="number">
+				{#each items as item}
+					<li>
+						{#if item.href}
+							<a href={item.href}>{item.label}</a>
+						{:else}
+							{item.label}
+						{/if}
+					</li>
+				{/each}
+			</List>
+		{/if}
+		<slot />
+	</div>
+</div>
+
+<style>
+	.ons-panel {
+		color: rgb(34, 34, 34);
+	}
+</style>

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

@@ -1,17 +1,17 @@
-A panel to summarise errors on a form/input. The errors can be defined in an `items` array, or as plain text/html within the component.
-
-Based on [this ONS Design System pattern](https://service-manual.ons.gov.uk/design-system/patterns/error-status-pages).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { ErrorSummary } from "@onsvisual/svelte-components";
-
-  const items = [
-    { label: "First issue description.", href: "#0" },
-    { label: "Second issue description." },
-  ];
-</script>
-
-<ErrorSummary title="There are 2 problems with your answer" {items} />
-```
+A panel to summarise errors on a form/input. The errors can be defined in an `items` array, or as plain text/html within the component.
+
+Based on [this ONS Design System pattern](https://service-manual.ons.gov.uk/design-system/patterns/error-status-pages).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ErrorSummary } from "@onsvisual/svelte-components";
+
+  const items = [
+    { label: "First issue description.", href: "#0" },
+    { label: "Second issue description." },
+  ];
+</script>
+
+<ErrorSummary title="There are 2 problems with your answer" {items} />
+```

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

@@ -1,12 +1,12 @@
-In this example, the `items` array is not used, and the error is described using text/html.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { ErrorSummary } from "@onsvisual/svelte-components";
-</script>
-
-<ErrorSummary title="There was an error">
-  This is a text to describe the error.
-</ErrorSummary>
-```
+In this example, the `items` array is not used, and the error is described using text/html.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { ErrorSummary } from "@onsvisual/svelte-components";
+</script>
+
+<ErrorSummary title="There was an error">
+  This is a text to describe the error.
+</ErrorSummary>
+```