@onsvisual/svelte-components 1.0.37 → 1.0.38

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>
+```

package/dist/inputs/Input/Input.stories.svelte

@@ -1,73 +1,73 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Input from "./Input.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Inputs/Input",
-		component: Input,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<div style:padding="12px">
-		<Input {...args} />
-	</div>
-{/snippet}
-
-<Story
-	name="Default"
-	args={{
-		id: "text",
-		label: "Enter some text"
-	}}
-	{template}
-/>
-
-<Story
-	name="With hidden label"
-	args={{
-		id: "text",
-		label: "Enter some text",
-		hideLabel: true
-	}}
-	{template}
-/>
-
-<Story
-	name="With description"
-	args={{
-		id: "text",
-		label: "Enter some text",
-		description: "This is a hint on what to enter"
-	}}
-	{template}
-/>
-
-<Story
-	name="Numeric with prefix"
-	args={{
-		id: "text",
-		label: "Enter some text",
-		prefix: "£",
-		unitLabel: "British pounds sterling",
-		numeric: true,
-		width: 5,
-		charLimit: 8
-	}}
-	{template}
-/>
-
-<Story
-	name="Input error"
-	args={{
-		id: "text",
-		label: "Enter some text",
-		error: true
-	}}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Input from "./Input.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Inputs/Input",
+		component: Input,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Input {...args} />
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		id: "text",
+		label: "Enter some text"
+	}}
+	{template}
+/>
+
+<Story
+	name="With hidden label"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		hideLabel: true
+	}}
+	{template}
+/>
+
+<Story
+	name="With description"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		description: "This is a hint on what to enter"
+	}}
+	{template}
+/>
+
+<Story
+	name="Numeric with prefix"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		prefix: "£",
+		unitLabel: "British pounds sterling",
+		numeric: true,
+		width: 5,
+		charLimit: 8
+	}}
+	{template}
+/>
+
+<Story
+	name="Input error"
+	args={{
+		id: "text",
+		label: "Enter some text",
+		error: true
+	}}
+	{template}
+/>