@onsvisual/svelte-components 1.0.44 → 1.0.45

package/dist/layout/Notice/Notice.stories.svelte

@@ -1,61 +1,61 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Notice from "./Notice.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Notice",
-		component: Notice,
-		tags: ["autodocs"],
-		argTypes: {
-			mode: {
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<div style:padding="12px">
-		<Notice {...args}>
-			{@html args.content}
-		</Notice>
-	</div>
-{/snippet}
-
-<Story
-	name="Default"
-	args={{
-		content: "This is some helpful information."
-	}}
-	{template}
-/>
-
-<Story
-	name="Warning style"
-	args={{
-		mode: "warning",
-		content: "This is some important information you need to know."
-	}}
-	{template}
-/>
-
-<Story
-	name="Success style"
-	args={{
-		mode: "success",
-		content: "You successfully submitted some information."
-	}}
-	{template}
-/>
-
-<Story
-	name="Error style"
-	args={{
-		mode: "error",
-		content: "An unexpected error has occurred."
-	}}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Notice from "./Notice.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Notice",
+		component: Notice,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Notice {...args}>
+			{@html args.content}
+		</Notice>
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		content: "This is some helpful information."
+	}}
+	{template}
+/>
+
+<Story
+	name="Warning style"
+	args={{
+		mode: "warning",
+		content: "This is some important information you need to know."
+	}}
+	{template}
+/>
+
+<Story
+	name="Success style"
+	args={{
+		mode: "success",
+		content: "You successfully submitted some information."
+	}}
+	{template}
+/>
+
+<Story
+	name="Error style"
+	args={{
+		mode: "error",
+		content: "An unexpected error has occurred."
+	}}
+	{template}
+/>

package/dist/layout/Notice/Notice.svelte

@@ -1,56 +1,56 @@
-<script>
-	/**
-	 * Sets the mode/colour of the notice
-	 * @type {"info"|"success"|"error"|"warning"}
-	 */
-	export let mode = "info";
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<div
-	class="ons-panel ons-panel--no-title {cls}"
-	class:ons-panel--info={mode === "info"}
-	class:ons-panel--warn={mode === "warning"}
-	class:ons-panel--error={mode === "error"}
-	class:ons-panel--success={mode === "success"}
->
-	<div class="ons-u-bg--tr">
-		{#if mode === "warning"}<div class="ons-panel__icon" aria-hidden="true">!</div>{/if}
-		<span class="ons-panel__assistive-text ons-u-vh"
-			>{mode === "warning"
-				? "Warning:"
-				: mode === "success"
-					? "Completed:"
-					: mode === "error"
-						? "Error:"
-						: "Important information:"}</span
-		>
-		{#if mode === "success"}
-			<span class="ons-panel__icon ons-u-fs-r"
-				><svg
-					class="ons-icon"
-					viewBox="0 0 13 10"
-					xmlns="http://www.w3.org/2000/svg"
-					focusable="false"
-					fill="currentColor"
-					role="img"
-					title="ons-icon-check"
-				>
-					<path
-						d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
-						transform="translate(-1.51 -3.04)"
-					/>
-				</svg></span
-			>
-		{/if}
-		<div class="ons-panel__body">
-			<div class="default-line-height" class:ons-u-fs-r={mode !== "warning"}>
-				<slot />
-			</div>
-		</div>
-	</div>
-</div>
+<script>
+	/**
+	 * Sets the mode/colour of the notice
+	 * @type {"info"|"success"|"error"|"warning"}
+	 */
+	export let mode = "info";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<div
+	class="ons-panel ons-panel--no-title {cls}"
+	class:ons-panel--info={mode === "info"}
+	class:ons-panel--warn={mode === "warning"}
+	class:ons-panel--error={mode === "error"}
+	class:ons-panel--success={mode === "success"}
+>
+	<div class="ons-u-bg--tr">
+		{#if mode === "warning"}<div class="ons-panel__icon" aria-hidden="true">!</div>{/if}
+		<span class="ons-panel__assistive-text ons-u-vh"
+			>{mode === "warning"
+				? "Warning:"
+				: mode === "success"
+					? "Completed:"
+					: mode === "error"
+						? "Error:"
+						: "Important information:"}</span
+		>
+		{#if mode === "success"}
+			<span class="ons-panel__icon ons-u-fs-r"
+				><svg
+					class="ons-icon"
+					viewBox="0 0 13 10"
+					xmlns="http://www.w3.org/2000/svg"
+					focusable="false"
+					fill="currentColor"
+					role="img"
+					title="ons-icon-check"
+				>
+					<path
+						d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
+						transform="translate(-1.51 -3.04)"
+					/>
+				</svg></span
+			>
+		{/if}
+		<div class="ons-panel__body">
+			<div class="default-line-height" class:ons-u-fs-r={mode !== "warning"}>
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>

package/dist/layout/Notice/docs/component.md

@@ -1,14 +1,14 @@
-Container for displaying notices on a page.
-
-Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/panel).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Notice } from "@onsvisual/svelte-components";
-</script>
-
-<Notice>
-  <p>This is the text of the notice.</p>
-</Notice>
-```
+Container for displaying notices on a page.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/panel).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Notice } from "@onsvisual/svelte-components";
+</script>
+
+<Notice>
+  <p>This is the text of the notice.</p>
+</Notice>
+```

package/dist/layout/PhaseBanner/PhaseBanner.stories.svelte

@@ -1,24 +1,24 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import PhaseBanner from "./PhaseBanner.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/PhaseBanner",
-		component: PhaseBanner,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story name="Default" args={{}} />
-
-<Story
-	name="Prototype with custom link"
-	args={{
-		phase: "Prototype",
-		href: "https://example.com"
-	}}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import PhaseBanner from "./PhaseBanner.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/PhaseBanner",
+		component: PhaseBanner,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story
+	name="Prototype with custom link"
+	args={{
+		phase: "Prototype",
+		href: "https://example.com"
+	}}
+/>

package/dist/layout/PhaseBanner/PhaseBanner.svelte

@@ -1,66 +1,66 @@
-<script>
-	/**
-	 * Phase of project (alpha, beta, prototype etc.)
-	 * @type {string}
-	 */
-	export let phase = "Beta";
-	/**
-	 * URL of feedback form (relative or absolute)
-	 * @type {string}
-	 */
-	export let href = "https://www.ons.gov.uk/feedback";
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<div class="ons-phase-banner {cls}">
-	<div class="ons-container">
-		<div
-			class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap"
-		>
-			<div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
-				<strong class="ons-phase-banner__badge">{phase}</strong>
-			</div>
-			<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
-				<p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">
-					This is a {phase === "Prototype" ? "new service" : "prototype"}.
-					{#if href}
-						To help us improve it, <a
-							{href}
-							class="ons-external-link"
-							target="_blank"
-							rel="noopener"
-						>
-							<span class="ons-external-link__text">give feedback</span><span
-								class="ons-external-link__icon"
-								>&nbsp;<svg
-									class="ons-icon"
-									viewBox="0 0 12 12"
-									xmlns="http://www.w3.org/2000/svg"
-									focusable="false"
-									aria-hidden="true"
-									role="img"
-									title="ons-icon-external-link"
-								>
-									<path
-										d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z"
-										transform="translate(-2 -1.99)"
-									/>
-									<path
-										d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z"
-										transform="translate(-2 -1.99)"
-									/>
-								</svg></span
-							><span class="ons-external-link__new-window-description ons-u-vh"
-								>(opens in a new tab)</span
-							></a
-						>
-					{/if}
-				</p>
-			</div>
-		</div>
-	</div>
-</div>
+<script>
+	/**
+	 * Phase of project (alpha, beta, prototype etc.)
+	 * @type {string}
+	 */
+	export let phase = "Beta";
+	/**
+	 * URL of feedback form (relative or absolute)
+	 * @type {string}
+	 */
+	export let href = "https://www.ons.gov.uk/feedback";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<div class="ons-phase-banner {cls}">
+	<div class="ons-container">
+		<div
+			class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap"
+		>
+			<div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
+				<strong class="ons-phase-banner__badge">{phase}</strong>
+			</div>
+			<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
+				<p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">
+					This is a {phase === "Prototype" ? "new service" : "prototype"}.
+					{#if href}
+						To help us improve it, <a
+							{href}
+							class="ons-external-link"
+							target="_blank"
+							rel="noopener"
+						>
+							<span class="ons-external-link__text">give feedback</span><span
+								class="ons-external-link__icon"
+								>&nbsp;<svg
+									class="ons-icon"
+									viewBox="0 0 12 12"
+									xmlns="http://www.w3.org/2000/svg"
+									focusable="false"
+									aria-hidden="true"
+									role="img"
+									title="ons-icon-external-link"
+								>
+									<path
+										d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z"
+										transform="translate(-2 -1.99)"
+									/>
+									<path
+										d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z"
+										transform="translate(-2 -1.99)"
+									/>
+								</svg></span
+							><span class="ons-external-link__new-window-description ons-u-vh"
+								>(opens in a new tab)</span
+							></a
+						>
+					{/if}
+				</p>
+			</div>
+		</div>
+	</div>
+</div>

package/dist/layout/PhaseBanner/docs/component.md

@@ -1,14 +1,14 @@
-Dispay a phase banner on prototypes, alpha and beta products.
-
-Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/phase-banner).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { PhaseBanner } from "@onsvisual/svelte-components";
-</script>
-
-<PhaseBanner />
-<!-- page header -->
-<!-- page contents -->
-```
+Dispay a phase banner on prototypes, alpha and beta products.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/phase-banner).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { PhaseBanner } from "@onsvisual/svelte-components";
+</script>
+
+<PhaseBanner />
+<!-- page header -->
+<!-- page contents -->
+```

package/dist/layout/RelatedContent/RelatedContent.stories.svelte

@@ -1,36 +1,36 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import RelatedContent from "./RelatedContent.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/RelatedContent",
-		component: RelatedContent,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-
-	const related = [
-		{
-			title: "Help with the census",
-			links: [
-				{ title: "I’m moving house", href: "#0" },
-				{ title: "What if I’m away or abroad on Census Day?", href: "#0" },
-				{ title: "Get an access code or paper census", href: "#0" }
-			]
-		},
-		{
-			title: "Related content",
-			links: [
-				{ title: "How we will contact or visit you", href: "#0" },
-				{ title: "Media enquiries", href: "#0" }
-			]
-		}
-	];
-</script>
-
-<Story name="Single section" args={{ links: related[1].links }} />
-
-<Story name="Multiple sections" args={{ related }} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import RelatedContent from "./RelatedContent.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/RelatedContent",
+		component: RelatedContent,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const related = [
+		{
+			title: "Help with the census",
+			links: [
+				{ title: "I’m moving house", href: "#0" },
+				{ title: "What if I’m away or abroad on Census Day?", href: "#0" },
+				{ title: "Get an access code or paper census", href: "#0" }
+			]
+		},
+		{
+			title: "Related content",
+			links: [
+				{ title: "How we will contact or visit you", href: "#0" },
+				{ title: "Media enquiries", href: "#0" }
+			]
+		}
+	];
+</script>
+
+<Story name="Single section" args={{ links: related[1].links }} />
+
+<Story name="Multiple sections" args={{ related }} />

package/dist/layout/RelatedContent/RelatedContent.svelte

@@ -1,54 +1,54 @@
-<script>
-	/**
-	 * Title for the section
-	 * @type {string}
-	 */
-	export let title = "Related content";
-	/**
-	 * Links in the form {title, href}
-	 * @type {object[]|object}
-	 */
-	export let links = [];
-	/**
-	 * Define multiple links sections in the form {title, links: [{title, href}]} (overrides above options)
-	 * @type {object[]}
-	 */
-	export let related = [{ title, links }];
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<aside class="ons-related-content {cls}" aria-label="Related content">
-	<slot />
-	{#each related as section}
-		<div class="ons-related-content__section">
-			{#if section.title}
-				<h2
-					class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs"
-					id="related-help-with-the-census"
-				>
-					{section.title}
-				</h2>
-			{/if}
-			{#if Array.isArray(section.links)}
-				<div class="ons-related-content__content">
-					<nav
-						class="ons-related-content__navigation"
-						aria-labelledby="related-help-with-the-census"
-					>
-						<ul class="ons-list ons-list--bare">
-							{#each section.links as link}
-								<li class="ons-list__item">
-									<a href={link.href} class="ons-list__link">{link.title}</a>
-								</li>
-							{/each}
-						</ul>
-					</nav>
-				</div>
-			{/if}
-		</div>
-	{/each}
-</aside>
+<script>
+	/**
+	 * Title for the section
+	 * @type {string}
+	 */
+	export let title = "Related content";
+	/**
+	 * Links in the form {title, href}
+	 * @type {object[]|object}
+	 */
+	export let links = [];
+	/**
+	 * Define multiple links sections in the form {title, links: [{title, href}]} (overrides above options)
+	 * @type {object[]}
+	 */
+	export let related = [{ title, links }];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<aside class="ons-related-content {cls}" aria-label="Related content">
+	<slot />
+	{#each related as section}
+		<div class="ons-related-content__section">
+			{#if section.title}
+				<h2
+					class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs"
+					id="related-help-with-the-census"
+				>
+					{section.title}
+				</h2>
+			{/if}
+			{#if Array.isArray(section.links)}
+				<div class="ons-related-content__content">
+					<nav
+						class="ons-related-content__navigation"
+						aria-labelledby="related-help-with-the-census"
+					>
+						<ul class="ons-list ons-list--bare">
+							{#each section.links as link}
+								<li class="ons-list__item">
+									<a href={link.href} class="ons-list__link">{link.title}</a>
+								</li>
+							{/each}
+						</ul>
+					</nav>
+				</div>
+			{/if}
+		</div>
+	{/each}
+</aside>