@onsvisual/svelte-components 1.0.40 → 1.0.42

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

@@ -1,14 +1,14 @@
-A hero/title block suitable for a standard pages, with optional metadata block.
-
-Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/hero).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Hero } from "@onsvisual/svelte-components";
-</script>
-
-<Hero title="Page title" lede="A description of the page">
-  {optional_additonal_content}
-</Hero>
-```
+A hero/title block suitable for a standard pages, with optional metadata block.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/hero).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Hero } from "@onsvisual/svelte-components";
+</script>
+
+<Hero title="Page title" lede="A description of the page">
+  {optional_additonal_content}
+</Hero>
+```

package/dist/layout/Highlight/Highlight.stories.svelte

@@ -1,29 +1,29 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Highlight from "./Highlight.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import { lipsum } from "../../js/utils.js";
-
-	const { Story } = defineMeta({
-		title: "Layout/Highlight",
-		component: Highlight,
-		tags: ["autodocs"],
-		argTypes: {
-			width: {
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Highlight {...args}>
-		<p>
-			{lipsum(1)}
-		</p>
-	</Highlight>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Highlight from "./Highlight.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import { lipsum } from "../../js/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Layout/Highlight",
+		component: Highlight,
+		tags: ["autodocs"],
+		argTypes: {
+			width: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Highlight {...args}>
+		<p>
+			{lipsum(1)}
+		</p>
+	</Highlight>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/layout/Highlight/Highlight.svelte

@@ -1,77 +1,77 @@
-<script>
-	import Container from "../../wrappers/Container/Container.svelte";
-
-	/**
-	 * Optional: Set 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;
-	/**
-	 * Applies a larger default text size (by default)
-	 * @type {boolean}
-	 */
-	export let bigText = true;
-	/**
-	 * Sets the width of the container
-	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-	 */
-	export let width = "narrow";
-	/**
-	 * Sets the (minimum) height of the container
-	 * @type {number|string|null}
-	 */
-	export let height = null;
-	/**
-	 * Sets a predefined theme
-	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
-	 */
-	export let theme = "paleblue";
-	/**
-	 * Define additional props to override the base theme
-	 * @type {object}
-	 */
-	export let themeOverrides = {};
-	/**
-	 * Overrides the background CSS for the section
-	 * @type {string|null}
-	 */
-	export let background = null;
-	/**
-	 * Adds margin above section
-	 * @type {boolean}
-	 */
-	export let marginTop = false;
-	/**
-	 * Adds margin below section
-	 * @type {boolean}
-	 */
-	export let marginBottom = true;
-</script>
-
-<Container {id} {cls} {width} {marginTop} {marginBottom} {theme} {themeOverrides} {background}>
-	<section
-		class="ons-section__highlight ons-u-mt-xl ons-u-mb-xl"
-		class:ons-u-fs-l={bigText}
-		style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
-	>
-		<div>
-			<slot />
-		</div>
-	</section>
-</Container>
-
-<style>
-	.ons-section__highlight {
-		display: flex;
-		align-items: center;
-		height: 100%;
-	}
-	.ons-section__highlight > div > :global(p:last-of-type) {
-		margin-bottom: 0;
-	}
-</style>
+<script>
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * Optional: Set 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;
+	/**
+	 * Applies a larger default text size (by default)
+	 * @type {boolean}
+	 */
+	export let bigText = true;
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "narrow";
+	/**
+	 * Sets the (minimum) height of the container
+	 * @type {number|string|null}
+	 */
+	export let height = null;
+	/**
+	 * Sets a predefined theme
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|"grey"|null}
+	 */
+	export let theme = "paleblue";
+	/**
+	 * Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let themeOverrides = {};
+	/**
+	 * Overrides the background CSS for the section
+	 * @type {string|null}
+	 */
+	export let background = null;
+	/**
+	 * Adds margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Adds margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = true;
+</script>
+
+<Container {id} {cls} {width} {marginTop} {marginBottom} {theme} {themeOverrides} {background}>
+	<section
+		class="ons-section__highlight ons-u-mt-xl ons-u-mb-xl"
+		class:ons-u-fs-l={bigText}
+		style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
+	>
+		<div>
+			<slot />
+		</div>
+	</section>
+</Container>
+
+<style>
+	.ons-section__highlight {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+	.ons-section__highlight > div > :global(p:last-of-type) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -1,12 +1,12 @@
-A large text block that can be used as a standfirst or transition between sections of a feature article, with various options and style customisations.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Highlight } from "@onsvisual/svelte-components";
-</script>
-
-<Highlight>
-  <p>Contents of highlight section.</p>
-</Highlight>
-```
+A large text block that can be used as a standfirst or transition between sections of a feature article, with various options and style customisations.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Highlight } from "@onsvisual/svelte-components";
+</script>
+
+<Highlight>
+  <p>Contents of highlight section.</p>
+</Highlight>
+```

package/dist/layout/Image/Image.stories.svelte

@@ -1,23 +1,23 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Image from "./Image.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Image",
-		component: Image,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-<Story
-	name="Default"
-	args={{
-		src: "https://service-manual.ons.gov.uk/img/small/woman-in-purple-dress-shirt.jpg",
-		alt: "Woman in a purple dress shirt using a laptop",
-		caption: "Image 1 - Woman in a purple dress shirt using a laptop"
-	}}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Image from "./Image.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Image",
+		component: Image,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		src: "https://service-manual.ons.gov.uk/img/small/woman-in-purple-dress-shirt.jpg",
+		alt: "Woman in a purple dress shirt using a laptop",
+		caption: "Image 1 - Woman in a purple dress shirt using a laptop"
+	}}
+/>

package/dist/layout/Image/Image.svelte

@@ -1,29 +1,29 @@
-<script>
-	/**
-	 * The URL of the image
-	 * @type {string|null}
-	 */
-	export let src = null;
-	/**
-	 * An alternative text for the image
-	 * @type {string|null}
-	 */
-	export let alt = null;
-	/**
-	 * A visible caption for the image
-	 * @type {string|null}
-	 */
-	export let caption = null;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-<figure class="ons-image {cls}">
-	<img class="ons-image__img" {src} {alt} />
-	{#if caption}
-		<figcaption class="ons-image__caption">{caption}</figcaption>
-	{/if}
-</figure>
+<script>
+	/**
+	 * The URL of the image
+	 * @type {string|null}
+	 */
+	export let src = null;
+	/**
+	 * An alternative text for the image
+	 * @type {string|null}
+	 */
+	export let alt = null;
+	/**
+	 * A visible caption for the image
+	 * @type {string|null}
+	 */
+	export let caption = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+<figure class="ons-image {cls}">
+	<img class="ons-image__img" {src} {alt} />
+	{#if caption}
+		<figcaption class="ons-image__caption">{caption}</figcaption>
+	{/if}
+</figure>

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

@@ -1,15 +1,15 @@
-Insert an image with an optional caption.
-
-Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/image).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Image } from "@onsvisual/svelte-components";
-</script>
-
-<Image
-  src="https://service-manual.ons.gov.uk/img/small/woman-in-purple-dress-shirt.jpg"
-  alt="Woman in a purple dress shirt using a laptop"
-  caption="Image 1 - Woman in a purple dress shirt using a laptop" />
-```
+Insert an image with an optional caption.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/image).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Image } from "@onsvisual/svelte-components";
+</script>
+
+<Image
+  src="https://service-manual.ons.gov.uk/img/small/woman-in-purple-dress-shirt.jpg"
+  alt="Woman in a purple dress shirt using a laptop"
+  caption="Image 1 - Woman in a purple dress shirt using a laptop" />
+```

package/dist/layout/List/Li.svelte

@@ -1,3 +1,3 @@
-<li class="ons-list__item">
-	<slot />
-</li>
+<li class="ons-list__item">
+	<slot />
+</li>

package/dist/layout/List/List.stories.svelte

@@ -1,40 +1,40 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
-	import List from "./List.svelte";
-	import Li from "./Li.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import exampleDocs from "./docs/example.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/List",
-		component: List,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<List {...args}>
-		<Li>First list item</Li>
-		<Li>Second list item</Li>
-		<Li>Third list item</Li>
-	</List>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
-
-<Story name="Dashed list" args={{ mode: "dash" }} {template} />
-
-<Story name="Numeric list" args={{ mode: "number" }} {template} />
-
-<Story name="Bare list" args={{ mode: "bare" }} {template} />
-
-<Story name="Inline list" args={{ mode: "inline" }} {template} />
-
-<Story
-	name="List with items defined by an array"
-	args={{ items: ["<strong>First</strong> list item", "Second list item", "Third list item"] }}
-	parameters={withStoryDocs(exampleDocs)}
-/>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import List from "./List.svelte";
+	import Li from "./Li.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/List",
+		component: List,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<List {...args}>
+		<Li>First list item</Li>
+		<Li>Second list item</Li>
+		<Li>Third list item</Li>
+	</List>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="Dashed list" args={{ mode: "dash" }} {template} />
+
+<Story name="Numeric list" args={{ mode: "number" }} {template} />
+
+<Story name="Bare list" args={{ mode: "bare" }} {template} />
+
+<Story name="Inline list" args={{ mode: "inline" }} {template} />
+
+<Story
+	name="List with items defined by an array"
+	args={{ items: ["<strong>First</strong> list item", "Second list item", "Third list item"] }}
+	parameters={withStoryDocs(exampleDocs)}
+/>

package/dist/layout/List/List.svelte

@@ -1,46 +1,46 @@
-<script>
-	import Li from "./Li.svelte";
-
-	/**
-	 * Type of list
-	 * @type {"bullet"|"dash"|"number"|"bare"|"inline"}
-	 */
-	export let mode = "bullet"; // dash | bullet | number | bare
-	/**
-	 * Optional: Array of HTML strings representing items in list
-	 * @type {string[]|null}
-	 */
-	export let items = null;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-</script>
-
-{#if mode === "number"}
-	<ol class="ons-list {cls}">
-		<slot>
-			{#if items}
-				{#each items as item}
-					<Li>{@html item}</Li>
-				{/each}
-			{/if}
-		</slot>
-	</ol>
-{:else}
-	<ul
-		class="ons-list"
-		class:ons-list--dashed={mode === "dash"}
-		class:ons-list--bare={["bare", "inline"].includes(mode)}
-		class:ons-list--inline={mode === "inline"}
-	>
-		<slot>
-			{#if items}
-				{#each items as item}
-					<Li>{@html item}</Li>
-				{/each}
-			{/if}
-		</slot>
-	</ul>
-{/if}
+<script>
+	import Li from "./Li.svelte";
+
+	/**
+	 * Type of list
+	 * @type {"bullet"|"dash"|"number"|"bare"|"inline"}
+	 */
+	export let mode = "bullet"; // dash | bullet | number | bare
+	/**
+	 * Optional: Array of HTML strings representing items in list
+	 * @type {string[]|null}
+	 */
+	export let items = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+</script>
+
+{#if mode === "number"}
+	<ol class="ons-list {cls}">
+		<slot>
+			{#if items}
+				{#each items as item}
+					<Li>{@html item}</Li>
+				{/each}
+			{/if}
+		</slot>
+	</ol>
+{:else}
+	<ul
+		class="ons-list"
+		class:ons-list--dashed={mode === "dash"}
+		class:ons-list--bare={["bare", "inline"].includes(mode)}
+		class:ons-list--inline={mode === "inline"}
+	>
+		<slot>
+			{#if items}
+				{#each items as item}
+					<Li>{@html item}</Li>
+				{/each}
+			{/if}
+		</slot>
+	</ul>
+{/if}

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

@@ -1,14 +1,14 @@
-A list component with modes for numbered, bulleted, dashed and bare lists. There is also an option to define list items as an array.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { List, Li } from "@onsvisual/svelte-components";
-</script>
-
-<List>
-  <Li>First list item</Li>
-  <Li>Second list item</Li>
-  <Li>Third list item</Li>
-</List>
-```
+A list component with modes for numbered, bulleted, dashed and bare lists. There is also an option to define list items as an array.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { List, Li } from "@onsvisual/svelte-components";
+</script>
+
+<List>
+  <Li>First list item</Li>
+  <Li>Second list item</Li>
+  <Li>Third list item</Li>
+</List>
+```

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

@@ -1,12 +1,12 @@
-In this example, the list items are defined in an array. The items can include HTML tags.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { List, Li } from "@onsvisual/svelte-components";
-
-  const items = ["<strong>First</strong> list item", "Second list item", "Third list item"];
-</script>
-
-<List items="{items}"/>
-```
+In this example, the list items are defined in an array. The items can include HTML tags.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { List, Li } from "@onsvisual/svelte-components";
+
+  const items = ["<strong>First</strong> list item", "Second list item", "Third list item"];
+</script>
+
+<List items="{items}"/>
+```