@onsvisual/svelte-components 1.0.36 → 1.0.38

package/dist/layout/Card/Card.svelte

@@ -1,127 +1,127 @@
-<script>
-	import GridCell from "../Grid/GridCell.svelte";
-
-	/**
-	 * Sets the unique ID of the section
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Optional: Set an additional CSS class for the section
-	 * @type {string|null}
-	 */
-	export let cls = null;
-	/**
-	 * Sets the title of the card
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Allows the h2 title tag for the card to be visually hidden
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * Set the heading level for the card titles
-	 * @type {"h2"|"h3"}
-	 */
-	export let headingTag = "h2";
-	/**
-	 * Setting mode to "featured" creates an inset card on a grey background
-	 * @type {"default"|"featured"}
-	 */
-	export let mode = "default";
-	/**
-	 * Include a border at the bottom of the card
-	 * @type {boolean}
-	 */
-	export let baseline = false;
-	/**
-	 * Optional: URL for title/image link
-	 * @type {string|null}
-	 */
-	export let href = null;
-	/**
-	 * Optional: URL for image
-	 * @type {string|null}
-	 */
-	export let image = null;
-	/**
-	 * Optional: Alt text for image
-	 * @type {string|null}
-	 */
-	export let imageAlt = null;
-	/**
-	 * (If used in grid) How many columns the card should span across
-	 * @type {number}
-	 */
-	export let colspan = 1;
-</script>
-
-<GridCell {colspan}>
-	<div
-		class="ons-card ons-u-mb-no {cls}"
-		class:ons-card--feature={mode === "featured"}
-		class:ons-u-p-l={mode === "featured"}
-		class:ons-card--baseline={baseline}
-	>
-		{#if href}
-			<a {href} class="ons-card__link">
-				<slot name="image">
-					{#if image}
-						<img
-							class="ons-card__image ons-u-mb-s"
-							class:ons-card__image-expand={mode === "featured"}
-							src={image}
-							alt={imageAlt}
-							loading="lazy"
-						/>
-					{/if}
-				</slot>
-				<slot name="title">
-					{#if title && headingTag === "h3"}
-						<h3 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h3>
-					{:else if title}
-						<h2 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h2>
-					{/if}
-				</slot>
-			</a>
-		{:else}
-			{#if image}
-				<img
-					class="ons-card__image ons-u-mb-s"
-					class:ons-card__image-expand={mode === "featured"}
-					src={image}
-					alt={imageAlt}
-					loading="lazy"
-				/>
-			{/if}
-			{#if title && headingTag === "h3"}
-				<h3 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h3>
-			{:else if title}
-				<h2 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h2>
-			{/if}
-		{/if}
-		<slot />
-	</div>
-</GridCell>
-
-<style>
-	.ons-card {
-		height: 100%;
-	}
-	.ons-card__image {
-		width: 100%;
-	}
-	.ons-card__image-expand {
-		margin: -1.5rem -1.5rem 0;
-		width: calc(100% + 3rem);
-		max-width: calc(100% + 3rem);
-	}
-	.ons-card > :global(p:last-of-type) {
-		margin-bottom: 0;
-	}
-	.ons-card--baseline {
-		border-bottom: 2px solid var(--ons-color-borders-light);
-	}
-</style>
+<script>
+	import GridCell from "../Grid/GridCell.svelte";
+
+	/**
+	 * Sets the unique ID of the section
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Optional: Set an additional CSS class for the section
+	 * @type {string|null}
+	 */
+	export let cls = null;
+	/**
+	 * Sets the title of the card
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Allows the h2 title tag for the card to be visually hidden
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Set the heading level for the card titles
+	 * @type {"h2"|"h3"}
+	 */
+	export let headingTag = "h2";
+	/**
+	 * Setting mode to "featured" creates an inset card on a grey background
+	 * @type {"default"|"featured"}
+	 */
+	export let mode = "default";
+	/**
+	 * Include a border at the bottom of the card
+	 * @type {boolean}
+	 */
+	export let baseline = false;
+	/**
+	 * Optional: URL for title/image link
+	 * @type {string|null}
+	 */
+	export let href = null;
+	/**
+	 * Optional: URL for image
+	 * @type {string|null}
+	 */
+	export let image = null;
+	/**
+	 * Optional: Alt text for image
+	 * @type {string|null}
+	 */
+	export let imageAlt = null;
+	/**
+	 * (If used in grid) How many columns the card should span across
+	 * @type {number}
+	 */
+	export let colspan = 1;
+</script>
+
+<GridCell {colspan}>
+	<div
+		class="ons-card ons-u-mb-no {cls}"
+		class:ons-card--feature={mode === "featured"}
+		class:ons-u-p-l={mode === "featured"}
+		class:ons-card--baseline={baseline}
+	>
+		{#if href}
+			<a {href} class="ons-card__link">
+				<slot name="image">
+					{#if image}
+						<img
+							class="ons-card__image ons-u-mb-s"
+							class:ons-card__image-expand={mode === "featured"}
+							src={image}
+							alt={imageAlt}
+							loading="lazy"
+						/>
+					{/if}
+				</slot>
+				<slot name="title">
+					{#if title && headingTag === "h3"}
+						<h3 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h3>
+					{:else if title}
+						<h2 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h2>
+					{/if}
+				</slot>
+			</a>
+		{:else}
+			{#if image}
+				<img
+					class="ons-card__image ons-u-mb-s"
+					class:ons-card__image-expand={mode === "featured"}
+					src={image}
+					alt={imageAlt}
+					loading="lazy"
+				/>
+			{/if}
+			{#if title && headingTag === "h3"}
+				<h3 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h3>
+			{:else if title}
+				<h2 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h2>
+			{/if}
+		{/if}
+		<slot />
+	</div>
+</GridCell>
+
+<style>
+	.ons-card {
+		height: 100%;
+	}
+	.ons-card__image {
+		width: 100%;
+	}
+	.ons-card__image-expand {
+		margin: -1.5rem -1.5rem 0;
+		width: calc(100% + 3rem);
+		max-width: calc(100% + 3rem);
+	}
+	.ons-card > :global(p:last-of-type) {
+		margin-bottom: 0;
+	}
+	.ons-card--baseline {
+		border-bottom: 2px solid var(--ons-color-borders-light);
+	}
+</style>

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

@@ -1,14 +1,14 @@
-Display content and links as cards. Can be used in combination with the `<Grid>` component to combine multiple cards.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Grid, Card } from "@onsvisual/svelte-components";
-</script>
-
-<Grid>
-  <Card title="Card one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-  <Card title="Card two">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-  <Card title="Card three">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-</Grid>
-```
+Display content and links as cards. Can be used in combination with the `<Grid>` component to combine multiple cards.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Grid, Card } from "@onsvisual/svelte-components";
+</script>
+
+<Grid>
+  <Card title="Card one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card two">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card three">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+</Grid>
+```

package/dist/layout/Card/docs/eg-images.md

@@ -1,27 +1,27 @@
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Cards, Card } from "@onsvisual/svelte-components";
-</script>
-
-<Cards>
-  <Card
-    title="Card one"
-    href="#"
-    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </Card>
-  <Card
-    title="Card two"
-    href="#"
-    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </Card>
-  <Card
-    title="Card three"
-    href="#"
-    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  </Card>
-</Cards>
-```
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Cards, Card } from "@onsvisual/svelte-components";
+</script>
+
+<Cards>
+  <Card
+    title="Card one"
+    href="#"
+    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Card>
+  <Card
+    title="Card two"
+    href="#"
+    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Card>
+  <Card
+    title="Card three"
+    href="#"
+    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Card>
+</Cards>
+```

package/dist/layout/Card/docs/eg-links.md

@@ -1,12 +1,12 @@
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Cards, Card } from "@onsvisual/svelte-components";
-</script>
-
-<Cards>
-  <Card title="Card one" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-  <Card title="Card two" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-  <Card title="Card three" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-</Cards>
-```
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Cards, Card } from "@onsvisual/svelte-components";
+</script>
+
+<Cards>
+  <Card title="Card one" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card two" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card three" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+</Cards>
+```

package/dist/layout/Card/docs/eg-spans.md

@@ -1,12 +1,12 @@
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Cards, Card } from "@onsvisual/svelte-components";
-</script>
-
-<Cards>
-  <Card title="Card one" rowspan={2}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-  <Card title="Card two" colspan={2}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-  <Card title="Card three">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
-</Cards>
-```
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Cards, Card } from "@onsvisual/svelte-components";
+</script>
+
+<Cards>
+  <Card title="Card one" rowspan={2}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card two" colspan={2}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card three">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+</Cards>
+```

package/dist/layout/Contents/Contents.stories.svelte

@@ -1,27 +1,27 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Contents from "./Contents.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Contents",
-		component: Contents,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story
-	name="Default"
-	args={{
-		links: [
-			{ label: "Overview" },
-			{ label: "Who should take part and why", href: "#0" },
-			{ label: "How your information is used", href: "#0" },
-			{ label: "The 2019 Census Rehearsal", href: "#0" },
-			{ label: "Online census", href: "#0" }
-		]
-	}}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Contents from "./Contents.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Contents",
+		component: Contents,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		links: [
+			{ label: "Overview" },
+			{ label: "Who should take part and why", href: "#0" },
+			{ label: "How your information is used", href: "#0" },
+			{ label: "The 2019 Census Rehearsal", href: "#0" },
+			{ label: "Online census", href: "#0" }
+		]
+	}}
+/>

package/dist/layout/Contents/Contents.svelte

@@ -1,51 +1,51 @@
-<script>
-	/**
-	 * Sets the title of the contents block
-	 * @type {string}
-	 */
-	export let title = "Contents";
-	/**
-	 * Visually hides the title of the block
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * An array of links for the contentents block in the form {label, href?}. Excluding href renders an item as plain text and marks it as the current section for screenreaders.
-	 * @type {object[]}
-	 */
-	export let links = [];
-	/**
-	 * An anchor link URL to the main content of the page (to skip contents)
-	 * @type {string|null}
-	 */
-	export let skipHref = null;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<aside class="ons-table-of-contents-container {cls}" role="complementary">
-	{#if skipHref}
-		<a class="ons-skip-to-content" href="#0">Skip to guide content</a>
-	{/if}
-	<nav class="ons-table-of-contents" aria-label="Pages in this guide">
-		{#if title}
-			<h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s" class:ons-u-vh={hideTitle}>
-				{title}
-			</h2>
-		{/if}
-		<ol class="ons-list ons-u-mb-l ons-list--dashed">
-			{#each links as link}
-				{#if link.href}
-					<li class="ons-list__item">
-						<a href={link.href} class="ons-list__link">{link.label}</a>
-					</li>
-				{:else}
-					<li class="ons-list__item" aria-current="true">{link.label}</li>
-				{/if}
-			{/each}
-		</ol>
-	</nav>
-</aside>
+<script>
+	/**
+	 * Sets the title of the contents block
+	 * @type {string}
+	 */
+	export let title = "Contents";
+	/**
+	 * Visually hides the title of the block
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * An array of links for the contentents block in the form {label, href?}. Excluding href renders an item as plain text and marks it as the current section for screenreaders.
+	 * @type {object[]}
+	 */
+	export let links = [];
+	/**
+	 * An anchor link URL to the main content of the page (to skip contents)
+	 * @type {string|null}
+	 */
+	export let skipHref = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<aside class="ons-table-of-contents-container {cls}" role="complementary">
+	{#if skipHref}
+		<a class="ons-skip-to-content" href="#0">Skip to guide content</a>
+	{/if}
+	<nav class="ons-table-of-contents" aria-label="Pages in this guide">
+		{#if title}
+			<h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s" class:ons-u-vh={hideTitle}>
+				{title}
+			</h2>
+		{/if}
+		<ol class="ons-list ons-u-mb-l ons-list--dashed">
+			{#each links as link}
+				{#if link.href}
+					<li class="ons-list__item">
+						<a href={link.href} class="ons-list__link">{link.label}</a>
+					</li>
+				{:else}
+					<li class="ons-list__item" aria-current="true">{link.label}</li>
+				{/if}
+			{/each}
+		</ol>
+	</nav>
+</aside>

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

@@ -1,18 +1,18 @@
-Displays a table of contents based on an array of links. Can be used for in-page navigation, or for navigation between sibling pages.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/table-of-contents).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Contents } from "@onsvisual/svelte-components";
-</script>
-
-<Contents links="{[
-  { label: 'Overview' },
-  { label: 'Who should take part and why', href: '#0' },
-  { label: 'How your information is used', href: '#0' },
-  { label: 'The 2019 Census Rehearsal', href: '#0' },
-  { label: 'Online census', href: '#0' },
-]}" />
-```
+Displays a table of contents based on an array of links. Can be used for in-page navigation, or for navigation between sibling pages.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/table-of-contents).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Contents } from "@onsvisual/svelte-components";
+</script>
+
+<Contents links="{[
+  { label: 'Overview' },
+  { label: 'Who should take part and why', href: '#0' },
+  { label: 'How your information is used', href: '#0' },
+  { label: 'The 2019 Census Rehearsal', href: '#0' },
+  { label: 'Online census', href: '#0' },
+]}" />
+```

package/dist/layout/DescriptionList/DescriptionList.stories.svelte

@@ -1,22 +1,22 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import DescriptionList from "./DescriptionList.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const items = [
-		{ key: "Survey", value: "Bricks & Blocks" },
-		{ key: "RU Refs", value: [49900000118, 49300005832] },
-		{ key: "To", value: "<a href='mailto:'>A Person</a>" }
-	];
-
-	const { Story } = defineMeta({
-		title: "Layout/DescriptionList",
-		component: DescriptionList,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story name="Default" args={{ items }} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import DescriptionList from "./DescriptionList.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const items = [
+		{ key: "Survey", value: "Bricks & Blocks" },
+		{ key: "RU Refs", value: [49900000118, 49300005832] },
+		{ key: "To", value: "<a href='mailto:'>A Person</a>" }
+	];
+
+	const { Story } = defineMeta({
+		title: "Layout/DescriptionList",
+		component: DescriptionList,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{ items }} />