@onsvisual/svelte-components 1.0.37 → 1.0.38

package/dist/layout/DocumentList/DocumentList.stories.svelte

@@ -1,88 +1,88 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
-	import Document from "./Document.svelte";
-	import DocumentList from "./DocumentList.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import exampleDocs from "./docs/example.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/DocumentList",
-		component: DocumentList,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-
-	const items1 = [
-		{
-			title: "Including everyone in Census",
-			href: "#0",
-			image: true,
-			meta: "Poster, PDF, 499KB, 1 page",
-			description: "Empty belly poster, aimed at advertising census events."
-		},
-		{
-			title: "Community handbook for Census 2021",
-			href: "#0",
-			meta: "Booklet,PDF, 3.3MB, 16 pages",
-			image: true,
-			description:
-				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
-		}
-	];
-
-	const items2 = [
-		{
-			title: "Including everyone in Census",
-			href: "#0",
-			featured: true,
-			image: "https://service-manual.ons.gov.uk/img/large/census-monuments-lights-featured.jpg",
-			meta: "Poster, PDF, 499KB, 1 page",
-			description: "Empty belly poster, aimed at advertising census events."
-		},
-		{
-			title: "Community handbook for Census 2021",
-			href: "#0",
-			meta: "Booklet,PDF, 3.3MB, 16 pages",
-			description:
-				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
-		}
-	];
-
-	const items3 = [
-		{
-			title: "Including everyone in Census",
-			href: "#0",
-			meta: "Poster, PDF, 499KB, 1 page"
-		},
-		{
-			title: "Community handbook for Census 2021",
-			href: "#0",
-			meta: "Booklet,PDF, 3.3MB, 16 pages"
-		}
-	];
-</script>
-
-<Story name="Document list with images" args={{ items: items1 }} />
-
-<Story name="Article list with featured item" args={{ items: items2 }} />
-
-<Story name="Compact list, no description" args={{ items: items3, compact: true }} />
-
-<Story name="Individually defined documents" asChild parameters={withStoryDocs(exampleDocs)}>
-	<DocumentList>
-		<Document
-			href="#0"
-			title="Including everyone in Census"
-			meta="Poster, PDF, 499KB, 1 page"
-			description="Empty belly poster, aimed at advertising census events."
-		/>
-		<Document
-			href="#0"
-			title="Community handbook for Census 2021"
-			meta="Booklet,PDF, 3.3MB, 16 pages"
-			description="This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
-		/>
-	</DocumentList>
-</Story>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import Document from "./Document.svelte";
+	import DocumentList from "./DocumentList.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/DocumentList",
+		component: DocumentList,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const items1 = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			image: true,
+			meta: "Poster, PDF, 499KB, 1 page",
+			description: "Empty belly poster, aimed at advertising census events."
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages",
+			image: true,
+			description:
+				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+		}
+	];
+
+	const items2 = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			featured: true,
+			image: "https://service-manual.ons.gov.uk/img/large/census-monuments-lights-featured.jpg",
+			meta: "Poster, PDF, 499KB, 1 page",
+			description: "Empty belly poster, aimed at advertising census events."
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages",
+			description:
+				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+		}
+	];
+
+	const items3 = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			meta: "Poster, PDF, 499KB, 1 page"
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages"
+		}
+	];
+</script>
+
+<Story name="Document list with images" args={{ items: items1 }} />
+
+<Story name="Article list with featured item" args={{ items: items2 }} />
+
+<Story name="Compact list, no description" args={{ items: items3, compact: true }} />
+
+<Story name="Individually defined documents" asChild parameters={withStoryDocs(exampleDocs)}>
+	<DocumentList>
+		<Document
+			href="#0"
+			title="Including everyone in Census"
+			meta="Poster, PDF, 499KB, 1 page"
+			description="Empty belly poster, aimed at advertising census events."
+		/>
+		<Document
+			href="#0"
+			title="Community handbook for Census 2021"
+			meta="Booklet,PDF, 3.3MB, 16 pages"
+			description="This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+		/>
+	</DocumentList>
+</Story>

package/dist/layout/DocumentList/DocumentList.svelte

@@ -1,33 +1,33 @@
-<script>
-	import Document from "./Document.svelte";
-
-	/** Optional: Define the documents as an array of {id, title, checked, description?}
-	 * @type {object[]|null}
-	 */
-	export let items = null;
-	/** Compact mode. Removes horizonatal lines between documents
-	 * @type {boolean}
-	 */
-	export let compact = false;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<ul class="ons-document-list {cls}" class:ons-document-list--compact={compact}>
-	<slot />
-	{#if Array.isArray(items)}
-		{#each items as item}
-			<Document {...item} />
-		{/each}
-	{/if}
-</ul>
-
-<style>
-	.ons-document-list--compact > :global(.ons-document-list__item) {
-		padding-bottom: 0;
-		border: none;
-	}
-</style>
+<script>
+	import Document from "./Document.svelte";
+
+	/** Optional: Define the documents as an array of {id, title, checked, description?}
+	 * @type {object[]|null}
+	 */
+	export let items = null;
+	/** Compact mode. Removes horizonatal lines between documents
+	 * @type {boolean}
+	 */
+	export let compact = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<ul class="ons-document-list {cls}" class:ons-document-list--compact={compact}>
+	<slot />
+	{#if Array.isArray(items)}
+		{#each items as item}
+			<Document {...item} />
+		{/each}
+	{/if}
+</ul>
+
+<style>
+	.ons-document-list--compact > :global(.ons-document-list__item) {
+		padding-bottom: 0;
+		border: none;
+	}
+</style>

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

@@ -1,28 +1,28 @@
-A component for defining a list of pages or links. Items can either be defined in an array of objects or as individual `<Document>` components.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/document-list).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { DocumentList } from "@onsvisual/svelte-components";
-
-  const items = [
-		{
-			title: "Including everyone in Census",
-			href: "#0",
-			meta: "Poster, PDF, 499KB, 1 page",
-			description: "Empty belly poster, aimed at advertising census events."
-		},
-		{
-			title: "Community handbook for Census 2021",
-			href: "#0",
-			meta: "Booklet,PDF, 3.3MB, 16 pages",
-			description:
-				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
-		}
-	];
-</script>
-
-<DocumentList {items}>
-```
+A component for defining a list of pages or links. Items can either be defined in an array of objects or as individual `<Document>` components.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/document-list).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DocumentList } from "@onsvisual/svelte-components";
+
+  const items = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			meta: "Poster, PDF, 499KB, 1 page",
+			description: "Empty belly poster, aimed at advertising census events."
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages",
+			description:
+				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+		}
+	];
+</script>
+
+<DocumentList {items}>
+```

package/dist/layout/DocumentList/docs/example.md

@@ -1,23 +1,23 @@
-In this example, the individual documents are defined explicitly.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { DocumentList, Document } from "@onsvisual/svelte-components";
-</script>
-
-<DocumentList>
-  <Document
-    href="#0"
-    title="Including everyone in Census"
-    meta="Poster, PDF, 499KB, 1 page"
-    description="Empty belly poster, aimed at advertising census events."
-  />
-  <Document
-    href="#0"
-    title="Community handbook for Census 2021"
-    meta="Booklet,PDF, 3.3MB, 16 pages"
-    description="This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
-  />
-</DocumentList>
-```
+In this example, the individual documents are defined explicitly.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DocumentList, Document } from "@onsvisual/svelte-components";
+</script>
+
+<DocumentList>
+  <Document
+    href="#0"
+    title="Including everyone in Census"
+    meta="Poster, PDF, 499KB, 1 page"
+    description="Empty belly poster, aimed at advertising census events."
+  />
+  <Document
+    href="#0"
+    title="Community handbook for Census 2021"
+    meta="Booklet,PDF, 3.3MB, 16 pages"
+    description="This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+  />
+</DocumentList>
+```

package/dist/layout/ErrorPage/ErrorPage.stories.svelte

@@ -1,18 +1,18 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import ErrorPage from "./ErrorPage.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/ErrorPage",
-		component: ErrorPage,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story name="Default" args={{}} />
-
-<Story name="Page not found" args={{ status: 404 }} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import ErrorPage from "./ErrorPage.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/ErrorPage",
+		component: ErrorPage,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="Page not found" args={{ status: 404 }} />

package/dist/layout/ErrorPage/ErrorPage.svelte

@@ -1,48 +1,48 @@
-<script>
-	import { getContext } from "svelte";
-
-	import Container from "../../wrappers/Container/Container.svelte";
-
-	/**
-	 * Sets the width of the container
-	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-	 */
-	export let width = "narrow";
-	/**
-	 * Optional: Pass the "page" store from "$app/state" in SvelteKit (gets read from context by default if it exists)
-	 * @type {any}
-	 */
-	export let page = getContext("page");
-	/**
-	 * Optional: Explicitly pass a page status number, eg. 404 or 500.
-	 * @type {number|null}
-	 */
-	export let status = page?.status || null;
-	/**
-	 * Optional: Explicitly pass a page status message.
-	 * @type {string|null}
-	 */
-	export let message = page?.error?.message || null;
-</script>
-
-<Container {width}>
-	<main id="main" class="ons-page__main">
-		{#if status === 404}
-			<h1>{message || "Page not found"}</h1>
-			<p>If you entered a web address, check it is correct.</p>
-			<p>If you pasted the web address, check you copied the whole address.</p>
-			<p>
-				If the web address is correct or you selected a link or button, <a
-					href="https://www.ons.gov.uk/feedback">contact us</a
-				> for more help.
-			</p>
-		{:else}
-			<h1>{message || "Sorry, there is a problem with the service"}</h1>
-			<p>
-				If you continue to experience problems with this service, please <a
-					href="https://www.ons.gov.uk/feedback">contact us</a
-				>.
-			</p>
-		{/if}
-	</main>
-</Container>
+<script>
+	import { getContext } from "svelte";
+
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "narrow";
+	/**
+	 * Optional: Pass the "page" store from "$app/state" in SvelteKit (gets read from context by default if it exists)
+	 * @type {any}
+	 */
+	export let page = getContext("page");
+	/**
+	 * Optional: Explicitly pass a page status number, eg. 404 or 500.
+	 * @type {number|null}
+	 */
+	export let status = page?.status || null;
+	/**
+	 * Optional: Explicitly pass a page status message.
+	 * @type {string|null}
+	 */
+	export let message = page?.error?.message || null;
+</script>
+
+<Container {width}>
+	<main id="main" class="ons-page__main">
+		{#if status === 404}
+			<h1>{message || "Page not found"}</h1>
+			<p>If you entered a web address, check it is correct.</p>
+			<p>If you pasted the web address, check you copied the whole address.</p>
+			<p>
+				If the web address is correct or you selected a link or button, <a
+					href="https://www.ons.gov.uk/feedback">contact us</a
+				> for more help.
+			</p>
+		{:else}
+			<h1>{message || "Sorry, there is a problem with the service"}</h1>
+			<p>
+				If you continue to experience problems with this service, please <a
+					href="https://www.ons.gov.uk/feedback">contact us</a
+				>.
+			</p>
+		{/if}
+	</main>
+</Container>

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

@@ -1,13 +1,13 @@
-An error page component that will display generic error messages for "page not found" (404) or other errors.
-
-Based on [this ONS Design System pattern](https://service-manual.ons.gov.uk/design-system/patterns/error-status-pages).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { page } from "$app/stores";
-  import { ErrorPage } from "@onsvisual/svelte-components";
-</script>
-
-<ErrorPage page="{page}" />
-```
+An error page component that will display generic error messages for "page not found" (404) or other errors.
+
+Based on [this ONS Design System pattern](https://service-manual.ons.gov.uk/design-system/patterns/error-status-pages).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { page } from "$app/stores";
+  import { ErrorPage } from "@onsvisual/svelte-components";
+</script>
+
+<ErrorPage page="{page}" />
+```

package/dist/layout/Footer/Footer.stories.svelte

@@ -1,24 +1,24 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Footer from "./Footer.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Footer",
-		component: Footer,
-		tags: ["autodocs"],
-		argTypes: {
-			theme: {
-				control: { type: "select" }
-			}
-		},
-		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
-	});
-</script>
-
-<Story name="Default" args={{}} />
-
-<Story name="Compact variant" args={{ compact: true }} />
-
-<Story name="Dark theme" args={{ theme: "dark" }} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Footer from "./Footer.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Footer",
+		component: Footer,
+		tags: ["autodocs"],
+		argTypes: {
+			theme: {
+				control: { type: "select" }
+			}
+		},
+		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="Compact variant" args={{ compact: true }} />
+
+<Story name="Dark theme" args={{ theme: "dark" }} />