@onsvisual/svelte-components 1.0.44 → 1.0.46

package/dist/layout/DescriptionList/DescriptionList.svelte

@@ -1,59 +1,59 @@
-<script>
-	/**
-	 * Sets the title of the list (for screen readers)
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Array of items in format {key, value} where "value" may be an array of multiple values
-	 * @type {object[]}
-	 */
-	export let items = [];
-	/**
-	 * Option to change layout to "inline", eg. for title blocks
-	 * @type {"default"|"inline"}
-	 */
-	export let mode = "default";
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<dl
-	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {cls} {mode ===
-	'inline'
-		? 'ons-description-list--inline ons-u-mt-s ons-u-mt-l@l'
-		: 'ons-u-cf'}"
-	{title}
-	aria-label={title}
->
-	{#each items as item}
-		<div class="ons-description-list__item">
-			<dt
-				class="ons-description-list__term ons-grid__col {mode === 'inline'
-					? 'ons-col-4@s@l'
-					: 'ons-col-2@m'}"
-			>
-				{item.key}:
-			</dt>
-			{#each [item.value].flat() as value}
-				<dd
-					class="ons-description-list__value ons-grid__col {mode === 'inline'
-						? 'ons-col-8@s@l'
-						: 'ons-col-10@m'}"
-				>
-					{@html value}
-				</dd>
-			{/each}
-		</div>
-	{/each}
-</dl>
-
-<style>
-	/* Fix for inline wrapping on narrower container widths */
-	.ons-description-list--inline {
-		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-	}
-</style>
+<script>
+	/**
+	 * Sets the title of the list (for screen readers)
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Array of items in format {key, value} where "value" may be an array of multiple values
+	 * @type {object[]}
+	 */
+	export let items = [];
+	/**
+	 * Option to change layout to "inline", eg. for title blocks
+	 * @type {"default"|"inline"}
+	 */
+	export let mode = "default";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<dl
+	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {cls} {mode ===
+	'inline'
+		? 'ons-description-list--inline ons-u-mt-s ons-u-mt-l@l'
+		: 'ons-u-cf'}"
+	{title}
+	aria-label={title}
+>
+	{#each items as item}
+		<div class="ons-description-list__item">
+			<dt
+				class="ons-description-list__term ons-grid__col {mode === 'inline'
+					? 'ons-col-4@s@l'
+					: 'ons-col-2@m'}"
+			>
+				{item.key}:
+			</dt>
+			{#each [item.value].flat() as value}
+				<dd
+					class="ons-description-list__value ons-grid__col {mode === 'inline'
+						? 'ons-col-8@s@l'
+						: 'ons-col-10@m'}"
+				>
+					{@html value}
+				</dd>
+			{/each}
+		</div>
+	{/each}
+</dl>
+
+<style>
+	/* Fix for inline wrapping on narrower container widths */
+	.ons-description-list--inline {
+		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+	}
+</style>

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

@@ -1,18 +1,18 @@
-A component to display metadata in a tabular format.
-
-Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/description-list).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { DescriptionList } from "@onsvisual/svelte-components";
-  
-  const items = [
-    { key: "Survey", value: "Bricks & Blocks" },
-    { key: "RU Refs", value: [49900000118, 49300005832]},
-    { key: "To", value: "<a href='mailto:'>A Person</a>"}
-  ];
-</script>
-
-<DescriptionList {items}/>
-```
+A component to display metadata in a tabular format.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/description-list).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DescriptionList } from "@onsvisual/svelte-components";
+  
+  const items = [
+    { key: "Survey", value: "Bricks & Blocks" },
+    { key: "RU Refs", value: [49900000118, 49300005832]},
+    { key: "To", value: "<a href='mailto:'>A Person</a>"}
+  ];
+</script>
+
+<DescriptionList {items}/>
+```

package/dist/layout/Details/Details.stories.svelte

@@ -1,32 +1,32 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Details from "./Details.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Details",
-		component: Details,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Details {...args}>
-		<p>{@html args.content || ""}</p>
-	</Details>
-{/snippet}
-
-<Story
-	name="Default"
-	args={{ title: "Title of twisty", content: "Contents of twisty." }}
-	{template}
-/>
-
-<Story
-	name="Open by default"
-	args={{ title: "Title of twisty", content: "Contents of twisty.", open: true }}
-	{template}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Details from "./Details.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Details",
+		component: Details,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Details {...args}>
+		<p>{@html args.content || ""}</p>
+	</Details>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{ title: "Title of twisty", content: "Contents of twisty." }}
+	{template}
+/>
+
+<Story
+	name="Open by default"
+	args={{ title: "Title of twisty", content: "Contents of twisty.", open: true }}
+	{template}
+/>

package/dist/layout/Details/Details.svelte

@@ -1,75 +1,75 @@
-<script>
-	import { createEventDispatcher } from "svelte";
-
-	const dispatch = createEventDispatcher();
-
-	/**
-	 * A title for the element
-	 * @type {string}
-	 */
-	export let title = "Title";
-	/**
-	 * Set the heading level for the title
-	 * @type {"h2"|"h3"}
-	 */
-	export let headingTag = "h2";
-	/**
-	 * Option for element to be open/expanded by default
-	 * @type {boolean}
-	 */
-	export let open = false;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-
-	function doToggle(e) {
-		dispatch("toggle", { open: e.newState === "open", e });
-	}
-</script>
-
-<details
-	class="ons-details ons-js-details ons-details--initialised {cls}"
-	class:ons-details--open={open}
-	bind:open
-	on:toggle={doToggle}
->
-	<summary
-		class="ons-details__heading ons-js-details-heading"
-		aria-expanded={open}
-		data-ga-action={open ? "Close panel" : "Open panel"}
-	>
-		{#if headingTag === "h3"}
-			<h3 class="ons-details__title ons-u-fs-r--b">{title}</h3>
-		{:else}
-			<h2 class="ons-details__title ons-u-fs-r--b">{title}</h2>
-		{/if}
-		<span class="ons-details__icon">
-			<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></span
-		>
-	</summary>
-	<div class="ons-details__content ons-js-details-content">
-		<slot />
-	</div>
-</details>
-
-<style>
-	.ons-details__content {
-		/* hack to ensure that contents can be found when closed by using ctrl-F */
-		display: block;
-	}
-</style>
+<script>
+	import { createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * A title for the element
+	 * @type {string}
+	 */
+	export let title = "Title";
+	/**
+	 * Set the heading level for the title
+	 * @type {"h2"|"h3"}
+	 */
+	export let headingTag = "h2";
+	/**
+	 * Option for element to be open/expanded by default
+	 * @type {boolean}
+	 */
+	export let open = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	function doToggle(e) {
+		dispatch("toggle", { open: e.newState === "open", e });
+	}
+</script>
+
+<details
+	class="ons-details ons-js-details ons-details--initialised {cls}"
+	class:ons-details--open={open}
+	bind:open
+	on:toggle={doToggle}
+>
+	<summary
+		class="ons-details__heading ons-js-details-heading"
+		aria-expanded={open}
+		data-ga-action={open ? "Close panel" : "Open panel"}
+	>
+		{#if headingTag === "h3"}
+			<h3 class="ons-details__title ons-u-fs-r--b">{title}</h3>
+		{:else}
+			<h2 class="ons-details__title ons-u-fs-r--b">{title}</h2>
+		{/if}
+		<span class="ons-details__icon">
+			<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></span
+		>
+	</summary>
+	<div class="ons-details__content ons-js-details-content">
+		<slot />
+	</div>
+</details>
+
+<style>
+	.ons-details__content {
+		/* hack to ensure that contents can be found when closed by using ctrl-F */
+		display: block;
+	}
+</style>

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

@@ -1,14 +1,14 @@
-An expandable `<details>` ("twisty") component, which can be open or closed by default.
-
-This component is based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/details), but intentionally uses the vanilla HTML `<details>` component to ensure that its content can be found when searching the page.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Details } from "@onsvisual/svelte-components";
-</script>
-
-<Details title="Title of twisty">
-  <p>Contents of twisty</p>
-</Details>
-```
+An expandable `<details>` ("twisty") component, which can be open or closed by default.
+
+This component is based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/details), but intentionally uses the vanilla HTML `<details>` component to ensure that its content can be found when searching the page.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Details } from "@onsvisual/svelte-components";
+</script>
+
+<Details title="Title of twisty">
+  <p>Contents of twisty</p>
+</Details>
+```

package/dist/layout/DocumentList/Document.svelte

@@ -1,103 +1,103 @@
-<script>
-	/**
-	 * The title of the document
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Set the heading level for the title
-	 * @type {"h2"|"h3"}
-	 */
-	export let headingTag = "h2";
-	/**
-	 * The URL of the document
-	 * @type {string|null}
-	 */
-	export let href = null;
-	/**
-	 * A description of the document
-	 * @type {string|null}
-	 */
-	export let description = null;
-	/**
-	 * Optional: URL of image to represent the document (use "true" for a placeholder)
-	 * @type {string|boolean}
-	 */
-	export let image = false;
-	/**
-	 * Highlight document as a featured item (inset on grey background)
-	 * @type {boolean}
-	 */
-	export let featured = false;
-	/**
-	 * Metadata about the type of document linked to (can include HTML)
-	 * @type {string|null}
-	 */
-	export let meta = null;
-</script>
-
-<li class="ons-document-list__item" class:ons-document-list__item--featured={featured}>
-	{#if image}
-		<div
-			class="ons-document-list__item-image ons-document-list__item-image--file"
-			aria-hidden="true"
-		>
-			<a
-				class="ons-document-list__image-link"
-				class:ons-document-list__image-link--placeholder={image === true}
-				{href}
-				tabindex="-1"
-			>
-				{#if typeof image === "string"}
-					<img src={image} alt="" loading="lazy" />
-				{/if}
-			</a>
-		</div>
-	{/if}
-	<div class="ons-document-list__item-content">
-		<div class="ons-document-list__item-header">
-			{#if headingTag === "h3"}
-				<h3 class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
-					<a {href}
-						>{title}
-						{#if meta}<span class="ons-u-vh">{meta}</span>{/if}
-					</a>
-				</h3>
-			{:else}
-				<h2 class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
-					<a {href}
-						>{title}
-						{#if meta}<span class="ons-u-vh">{meta}</span>{/if}
-					</a>
-				</h2>
-			{/if}
-			{#if meta}
-				<ul class="ons-document-list__item-metadata ons-u-mb-2xs">
-					<li class="ons-document-list__item-attribute" aria-hidden="true">{@html meta}</li>
-				</ul>
-			{/if}
-		</div>
-		{#if description}
-			<div class="ons-document-list__item-description">
-				<slot />
-				{@html description}
-			</div>
-		{/if}
-	</div>
-</li>
-
-<style>
-	.ons-document-list__item-image--file .ons-document-list__image-link--placeholder {
-		display: block;
-		height: 136px;
-	}
-	.ons-document-list__image-link--placeholder {
-		background-clip: padding-box;
-		background-color: var(--ons-color-placeholder);
-		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
-		background-position: center;
-		background-repeat: no-repeat;
-		background-size: 32px 32px;
-		height: 100%;
-	}
-</style>
+<script>
+	/**
+	 * The title of the document
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Set the heading level for the title
+	 * @type {"h2"|"h3"}
+	 */
+	export let headingTag = "h2";
+	/**
+	 * The URL of the document
+	 * @type {string|null}
+	 */
+	export let href = null;
+	/**
+	 * A description of the document
+	 * @type {string|null}
+	 */
+	export let description = null;
+	/**
+	 * Optional: URL of image to represent the document (use "true" for a placeholder)
+	 * @type {string|boolean}
+	 */
+	export let image = false;
+	/**
+	 * Highlight document as a featured item (inset on grey background)
+	 * @type {boolean}
+	 */
+	export let featured = false;
+	/**
+	 * Metadata about the type of document linked to (can include HTML)
+	 * @type {string|null}
+	 */
+	export let meta = null;
+</script>
+
+<li class="ons-document-list__item" class:ons-document-list__item--featured={featured}>
+	{#if image}
+		<div
+			class="ons-document-list__item-image ons-document-list__item-image--file"
+			aria-hidden="true"
+		>
+			<a
+				class="ons-document-list__image-link"
+				class:ons-document-list__image-link--placeholder={image === true}
+				{href}
+				tabindex="-1"
+			>
+				{#if typeof image === "string"}
+					<img src={image} alt="" loading="lazy" />
+				{/if}
+			</a>
+		</div>
+	{/if}
+	<div class="ons-document-list__item-content">
+		<div class="ons-document-list__item-header">
+			{#if headingTag === "h3"}
+				<h3 class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
+					<a {href}
+						>{title}
+						{#if meta}<span class="ons-u-vh">{meta}</span>{/if}
+					</a>
+				</h3>
+			{:else}
+				<h2 class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
+					<a {href}
+						>{title}
+						{#if meta}<span class="ons-u-vh">{meta}</span>{/if}
+					</a>
+				</h2>
+			{/if}
+			{#if meta}
+				<ul class="ons-document-list__item-metadata ons-u-mb-2xs">
+					<li class="ons-document-list__item-attribute" aria-hidden="true">{@html meta}</li>
+				</ul>
+			{/if}
+		</div>
+		{#if description}
+			<div class="ons-document-list__item-description">
+				<slot />
+				{@html description}
+			</div>
+		{/if}
+	</div>
+</li>
+
+<style>
+	.ons-document-list__item-image--file .ons-document-list__image-link--placeholder {
+		display: block;
+		height: 136px;
+	}
+	.ons-document-list__image-link--placeholder {
+		background-clip: padding-box;
+		background-color: var(--ons-color-placeholder);
+		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 32px 32px;
+		height: 100%;
+	}
+</style>