@onsvisual/svelte-components 1.0.40 → 1.0.42

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

@@ -1,44 +1,44 @@
-This component will display a cookie banner and export a function that allows you to push events to the Google Analytics dataLayer array.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { AnalyticsBanner, AnalyticsEvent } from "@onsvisual/svelte-components";
-
-  // Example of an analytics event triggered by another event "e"
-  function doAnalyticsEvent(e) {
-    // Assumes that e.detail is in the form {key1: "value1", key2: "value2", etc}
-    AnalyticsEvent({event: "eventName", ...e.detail});
-  }
-</script>
-
-<AnalyticsBanner analyticsId="{id_string}" />
-<!-- Rest of page content -->
-```
-
-`AnalyticsBanner` can also take props.
-
-```
-const analyticsProps = {
-    contentTitle: "Weekly deaths dashboard",
-    releaseDate: data.dates.current.replaceAll("-", ""),
-    nextReleaseDate: data.dates.next.replaceAll("-", ""),
-    outputSeries: "weeklyprovisionalfiguresondeathsregisteredinenglandandwales",
-    contentType: "dashboard",
-  };
-
-<AnalyticsBanner {analyticsProps}/>
-```
-
-An example analytics events. See this [doc](https://officenationalstatistics.sharepoint.com/:w:/r/sites/digpub/_layouts/15/Doc.aspx?sourcedoc=%7BBA405554-4040-4B61-9559-851F5C55DA39%7D&file=Google%20Analytics%20-%20GTM%20requirements.docx&action=default&mobileredirect=true) for more details (need to be on network).
-
-```javascript
-analyticsEvent({
-	event: "interaction",
-	interactionType: "accordion",
-	interactionValue: e?.detail?.open ? "open" : "close",
-	label,
-	sectionTitle,
-	sectionNumber
-});
-```
+This component will display a cookie banner and export a function that allows you to push events to the Google Analytics dataLayer array.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { AnalyticsBanner, AnalyticsEvent } from "@onsvisual/svelte-components";
+
+  // Example of an analytics event triggered by another event "e"
+  function doAnalyticsEvent(e) {
+    // Assumes that e.detail is in the form {key1: "value1", key2: "value2", etc}
+    AnalyticsEvent({event: "eventName", ...e.detail});
+  }
+</script>
+
+<AnalyticsBanner analyticsId="{id_string}" />
+<!-- Rest of page content -->
+```
+
+`AnalyticsBanner` can also take props.
+
+```
+const analyticsProps = {
+    contentTitle: "Weekly deaths dashboard",
+    releaseDate: data.dates.current.replaceAll("-", ""),
+    nextReleaseDate: data.dates.next.replaceAll("-", ""),
+    outputSeries: "weeklyprovisionalfiguresondeathsregisteredinenglandandwales",
+    contentType: "dashboard",
+  };
+
+<AnalyticsBanner {analyticsProps}/>
+```
+
+An example analytics events. See this [doc](https://officenationalstatistics.sharepoint.com/:w:/r/sites/digpub/_layouts/15/Doc.aspx?sourcedoc=%7BBA405554-4040-4B61-9559-851F5C55DA39%7D&file=Google%20Analytics%20-%20GTM%20requirements.docx&action=default&mobileredirect=true) for more details (need to be on network).
+
+```javascript
+analyticsEvent({
+	event: "interaction",
+	interactionType: "accordion",
+	interactionValue: e?.detail?.open ? "open" : "close",
+	label,
+	sectionTitle,
+	sectionNumber
+});
+```

package/dist/layout/BackLink/BackLink.stories.svelte

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

package/dist/layout/BackLink/BackLink.svelte

@@ -1,30 +1,30 @@
-<script>
-	/**
-	 * Href for top of page or contents section
-	 * @type {string}
-	 */
-	export let href = "#top";
-	/**
-	 * Optional: Add a CSS class to the link
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<div class="ons-back-to-top ons-js-back-to-top ons-back-to-top__enabled ons-u-mb-l {cls || ''}">
-	<a {href} class="ons-back-to-top__link">
-		<span
-			><svg
-				class="ons-icon ons-icon--xs"
-				viewBox="0 0 13 20"
-				xmlns="http://www.w3.org/2000/svg"
-				focusable="false"
-				fill="currentColor"
-				role="img"
-				title="ons-icon-arrow-up"
-			>
-				<path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
-			</svg><span class="ons-back-to-top__description">Back to top</span>
-		</span>
-	</a>
-</div>
+<script>
+	/**
+	 * Href for top of page or contents section
+	 * @type {string}
+	 */
+	export let href = "#top";
+	/**
+	 * Optional: Add a CSS class to the link
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<div class="ons-back-to-top ons-js-back-to-top ons-back-to-top__enabled ons-u-mb-l {cls || ''}">
+	<a {href} class="ons-back-to-top__link">
+		<span
+			><svg
+				class="ons-icon ons-icon--xs"
+				viewBox="0 0 13 20"
+				xmlns="http://www.w3.org/2000/svg"
+				focusable="false"
+				fill="currentColor"
+				role="img"
+				title="ons-icon-arrow-up"
+			>
+				<path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+			</svg><span class="ons-back-to-top__description">Back to top</span>
+		</span>
+	</a>
+</div>

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

@@ -1,12 +1,12 @@
-Link that can be used to return to the top of a page, or to a table of contents.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/back-to-top).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { BackLink } from "@onsvisual/svelte-components";
-</script>
-
-<BackLink href="#top" />
-```
+Link that can be used to return to the top of a page, or to a table of contents.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/back-to-top).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { BackLink } from "@onsvisual/svelte-components";
+</script>
+
+<BackLink href="#top" />
+```

package/dist/layout/Breadcrumb/Breadcrumb.stories.svelte

@@ -1,31 +1,31 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Breadcrumb from "./Breadcrumb.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Breadcrumb",
-		component: Breadcrumb,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story
-	name="Default"
-	args={{
-		links: [
-			{ label: "Home", href: "/" },
-			{ label: "Parent page", href: "/parent" }
-		]
-	}}
-/>
-
-<Story
-	name="Single back link"
-	args={{
-		href: "/"
-	}}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Breadcrumb from "./Breadcrumb.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Breadcrumb",
+		component: Breadcrumb,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		links: [
+			{ label: "Home", href: "/" },
+			{ label: "Parent page", href: "/parent" }
+		]
+	}}
+/>
+
+<Story
+	name="Single back link"
+	args={{
+		href: "/"
+	}}
+/>

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -1,69 +1,69 @@
-<script>
-	import Container from "../../wrappers/Container/Container.svelte";
-
-	/**
-	 * An array of links in the format {label, href}
-	 * @type {object[]}
-	 */
-	export let links = [];
-	/**
-	 * Optional: Link href if component is used for a single back-link
-	 * @type {string|null}
-	 */
-	export let backHref = null;
-	/**
-	 * Sets the width of the container
-	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-	 */
-	export let width = "wide";
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-	/**
-	 * Optional: Sets a base theme ("light", "dark", null etc)
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
-	 */
-	export let theme = null;
-	/**
-	 * Optional: Define additional props to override the base theme
-	 * @type {object}
-	 */
-	export let themeOverrides = {};
-	/**
-	 * Optional: Overrides the base theme background (accepts any valid CSS background value)
-	 * @type {string|null}
-	 */
-	export let background = null;
-</script>
-
-<Container {width} {theme} {themeOverrides} {background} {cls}>
-	<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
-		<ol class="ons-breadcrumbs__items ons-u-fs-s">
-			{#each backHref ? [{ label: "Back", href: backHref }] : links as link}
-				<li class="ons-breadcrumbs__item">
-					{#if link.href}
-						<a class="ons-breadcrumbs__link" href={link.href}>{link.label}</a>
-					{:else}
-						{link.label}
-					{/if}
-					<svg
-						class="ons-icon"
-						viewBox="0 0 8 13"
-						xmlns="http://www.w3.org/2000/svg"
-						focusable="false"
-						fill="currentColor"
-						role="img"
-						title="ons-icon-chevron"
-					>
-						<path
-							d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
-							transform="translate(-5.02 -1.59)"
-						/>
-					</svg>
-				</li>
-			{/each}
-		</ol>
-	</nav>
-</Container>
+<script>
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * An array of links in the format {label, href}
+	 * @type {object[]}
+	 */
+	export let links = [];
+	/**
+	 * Optional: Link href if component is used for a single back-link
+	 * @type {string|null}
+	 */
+	export let backHref = null;
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+	/**
+	 * Optional: Sets a base theme ("light", "dark", null etc)
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
+	 */
+	export let theme = null;
+	/**
+	 * Optional: Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let themeOverrides = {};
+	/**
+	 * Optional: Overrides the base theme background (accepts any valid CSS background value)
+	 * @type {string|null}
+	 */
+	export let background = null;
+</script>
+
+<Container {width} {theme} {themeOverrides} {background} {cls}>
+	<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
+		<ol class="ons-breadcrumbs__items ons-u-fs-s">
+			{#each backHref ? [{ label: "Back", href: backHref }] : links as link}
+				<li class="ons-breadcrumbs__item">
+					{#if link.href}
+						<a class="ons-breadcrumbs__link" href={link.href}>{link.label}</a>
+					{:else}
+						{link.label}
+					{/if}
+					<svg
+						class="ons-icon"
+						viewBox="0 0 8 13"
+						xmlns="http://www.w3.org/2000/svg"
+						focusable="false"
+						fill="currentColor"
+						role="img"
+						title="ons-icon-chevron"
+					>
+						<path
+							d="M5.74,14.28l-.57-.56a.5.5,0,0,1,0-.71h0l5-5-5-5a.5.5,0,0,1,0-.71h0l.57-.56a.5.5,0,0,1,.71,0h0l5.93,5.93a.5.5,0,0,1,0,.7L6.45,14.28a.5.5,0,0,1-.71,0Z"
+							transform="translate(-5.02 -1.59)"
+						/>
+					</svg>
+				</li>
+			{/each}
+		</ol>
+	</nav>
+</Container>

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

@@ -1,15 +1,15 @@
-Displays a breadcrumb with the current page's parents.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/breadcrumbs).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Breadcrumb } from "@onsvisual/svelte-components";
-</script>
-
-<Breadcrumb links="{[
-  {label: 'Home', href: '/'},
-  {label: 'Parent page', href: '/parent'}
-]}" />
-```
+Displays a breadcrumb with the current page's parents.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/breadcrumbs).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Breadcrumb } from "@onsvisual/svelte-components";
+</script>
+
+<Breadcrumb links="{[
+  {label: 'Home', href: '/'},
+  {label: 'Parent page', href: '/parent'}
+]}" />
+```

package/dist/layout/Card/Card.stories.svelte

@@ -1,39 +1,39 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import { lipsum } from "../../js/utils.js";
-	import Card from "./Card.svelte";
-	import Grid from "../Grid/Grid.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Card",
-		component: Card,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Grid>
-		<Card title="Card one" {...args}>{lipsum(1)}</Card>
-		<Card title="Card two" {...args}>{lipsum(1, 1)}</Card>
-		<Card title="Card three" {...args}>{lipsum(1, 2)}</Card>
-	</Grid>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
-
-<Story name="Cards with links" args={{ href: "#0" }} {template} />
-
-<Story name="Featured cards with baseline" args={{ mode: "featured", baseline: true }} {template} />
-
-<Story
-	name="Featured cards with image"
-	args={{
-		mode: "featured",
-		image: "https://service-manual.ons.gov.uk/img/small/placeholder-card.png"
-	}}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import { lipsum } from "../../js/utils.js";
+	import Card from "./Card.svelte";
+	import Grid from "../Grid/Grid.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Card",
+		component: Card,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Grid>
+		<Card title="Card one" {...args}>{lipsum(1)}</Card>
+		<Card title="Card two" {...args}>{lipsum(1, 1)}</Card>
+		<Card title="Card three" {...args}>{lipsum(1, 2)}</Card>
+	</Grid>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="Cards with links" args={{ href: "#0" }} {template} />
+
+<Story name="Featured cards with baseline" args={{ mode: "featured", baseline: true }} {template} />
+
+<Story
+	name="Featured cards with image"
+	args={{
+		mode: "featured",
+		image: "https://service-manual.ons.gov.uk/img/small/placeholder-card.png"
+	}}
+	{template}
+/>