@onsvisual/svelte-components 1.0.37 → 1.0.38

package/dist/layout/Timeline/Timeline.stories.svelte

@@ -1,44 +1,44 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
-	import Timeline from "./Timeline.svelte";
-	import TimelineItem from "./TimelineItem.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import exampleDocs from "./docs/example.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Timeline",
-		component: Timeline,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: withComponentDocs(componentDocs)
-	});
-
-	const items = [
-		{
-			title: "November 2020",
-			content: "ONS to provide you with content for magazines and publications"
-		},
-		{
-			title: "January to March 2021",
-			content: "ONS to provide a range of press releases for external use"
-		},
-		{ title: "February to April 2021", content: "Promote your local Census Support Centres" }
-	];
-</script>
-
-<Story name="Default" args={{ items }} />
-
-<Story name="Individually defined timeline items" asChild parameters={withStoryDocs(exampleDocs)}>
-	<Timeline>
-		<TimelineItem title="November 2020">
-			<p>ONS to provide you with content for magazines and publications</p>
-		</TimelineItem>
-		<TimelineItem title="January to March 2021">
-			<p>ONS to provide a range of press releases for external use</p>
-		</TimelineItem>
-		<TimelineItem title="February to April 2021">
-			<p>Promote your local Census Support Centres</p>
-		</TimelineItem>
-	</Timeline>
-</Story>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import Timeline from "./Timeline.svelte";
+	import TimelineItem from "./TimelineItem.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Timeline",
+		component: Timeline,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const items = [
+		{
+			title: "November 2020",
+			content: "ONS to provide you with content for magazines and publications"
+		},
+		{
+			title: "January to March 2021",
+			content: "ONS to provide a range of press releases for external use"
+		},
+		{ title: "February to April 2021", content: "Promote your local Census Support Centres" }
+	];
+</script>
+
+<Story name="Default" args={{ items }} />
+
+<Story name="Individually defined timeline items" asChild parameters={withStoryDocs(exampleDocs)}>
+	<Timeline>
+		<TimelineItem title="November 2020">
+			<p>ONS to provide you with content for magazines and publications</p>
+		</TimelineItem>
+		<TimelineItem title="January to March 2021">
+			<p>ONS to provide a range of press releases for external use</p>
+		</TimelineItem>
+		<TimelineItem title="February to April 2021">
+			<p>Promote your local Census Support Centres</p>
+		</TimelineItem>
+	</Timeline>
+</Story>

package/dist/layout/Timeline/Timeline.svelte

@@ -1,17 +1,17 @@
-<script>
-	import TimelineItem from "./TimelineItem.svelte";
-	/**
-	 * Timeline items in the format {title, content}, where content can be an HTML string
-	 * @type {object[]}
-	 */
-	export let items = [];
-</script>
-
-<div class="ons-timeline">
-	<slot />
-	{#each items as item}
-		<TimelineItem title={item.title}>
-			{@html item.content}
-		</TimelineItem>
-	{/each}
-</div>
+<script>
+	import TimelineItem from "./TimelineItem.svelte";
+	/**
+	 * Timeline items in the format {title, content}, where content can be an HTML string
+	 * @type {object[]}
+	 */
+	export let items = [];
+</script>
+
+<div class="ons-timeline">
+	<slot />
+	{#each items as item}
+		<TimelineItem title={item.title}>
+			{@html item.content}
+		</TimelineItem>
+	{/each}
+</div>

package/dist/layout/Timeline/TimelineItem.svelte

@@ -1,14 +1,14 @@
-<script>
-	/**
-	 * Title of timeline item
-	 * @type {string|null}
-	 */
-	export let title = null;
-</script>
-
-<div class="ons-timeline__item">
-	<h2 class="ons-timeline__heading">{title}</h2>
-	<div class="ons-timeline__content">
-		<slot />
-	</div>
-</div>
+<script>
+	/**
+	 * Title of timeline item
+	 * @type {string|null}
+	 */
+	export let title = null;
+</script>
+
+<div class="ons-timeline__item">
+	<h2 class="ons-timeline__heading">{title}</h2>
+	<div class="ons-timeline__content">
+		<slot />
+	</div>
+</div>

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

@@ -1,27 +1,27 @@
-A component to display a linear record of past and future events.
-
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/timeline).
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Timeline } from "@onsvisual/svelte-components";
-
-  const items = [
-    {
-      title: "November 2020",
-      content: "ONS to provide you with content for magazines and publications"
-    },
-    {
-      title: "January to March 2021",
-      content: "ONS to provide a range of press releases for external use"
-    },
-    {
-      title: "February to April 2021",
-      content: "Promote your local Census Support Centres"
-    }
-  ];
-</script>
-
-<Timeline {items}>
-```
+A component to display a linear record of past and future events.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/timeline).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Timeline } from "@onsvisual/svelte-components";
+
+  const items = [
+    {
+      title: "November 2020",
+      content: "ONS to provide you with content for magazines and publications"
+    },
+    {
+      title: "January to March 2021",
+      content: "ONS to provide a range of press releases for external use"
+    },
+    {
+      title: "February to April 2021",
+      content: "Promote your local Census Support Centres"
+    }
+  ];
+</script>
+
+<Timeline {items}>
+```

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

@@ -1,20 +1,20 @@
-In this example, the timeline items are defined explicitly.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Timeline, TimelineItem } from "@onsvisual/svelte-components";
-</script>
-
-<Timeline>
-  <TimelineItem title="November 2020">
-    <p>ONS to provide you with content for magazines and publications</p>
-  </TimelineItem>
-  <TimelineItem title="January to March 2021">
-    <p>ONS to provide a range of press releases for external use</p>
-  </TimelineItem>
-  <TimelineItem title="February to April 2021">
-    <p>Promote your local Census Support Centres</p>
-  </TimelineItem>
-</Timeline>
-```
+In this example, the timeline items are defined explicitly.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Timeline, TimelineItem } from "@onsvisual/svelte-components";
+</script>
+
+<Timeline>
+  <TimelineItem title="November 2020">
+    <p>ONS to provide you with content for magazines and publications</p>
+  </TimelineItem>
+  <TimelineItem title="January to March 2021">
+    <p>ONS to provide a range of press releases for external use</p>
+  </TimelineItem>
+  <TimelineItem title="February to April 2021">
+    <p>Promote your local Census Support Centres</p>
+  </TimelineItem>
+</Timeline>
+```

package/dist/templates/EmbedArticle/EmbedArticle.stories.svelte

@@ -1,72 +1,72 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import componentDocs from "./docs/component.md?raw";
-	import Embed from "../../wrappers/Embed/Embed.svelte";
-	import Highlight from "../../layout/Highlight/Highlight.svelte";
-	import Section from "../../layout/Section/Section.svelte";
-	import Grid from "../../layout/Grid/Grid.svelte";
-	import Select from "../../inputs/Select/Select.svelte";
-
-	const { Story } = defineMeta({
-		title: "Templates/Embedded article",
-		component: Embed,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
-	});
-</script>
-
-<Story name="Default" args={{}} asChild>
-	<Embed>
-		<Highlight bigText={false} marginBottom={false}>
-			<div style:padding="0 12px">
-				<h2>This is a sub-headline</h2>
-				<p>This is a description of the embedded interactive.</p>
-				<Select label="Select your area" />
-			</div>
-		</Highlight>
-
-		<Section title="Section title" marginTop={true}>
-			<p>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-				laboris nisi ut aliquip ex ea commodo consequat..
-			</p>
-			<p>
-				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-				mollit anim id est laborum.
-			</p>
-		</Section>
-
-		<Grid width="medium" caption="This is a caption text">
-			<div class="grid-cell"></div>
-		</Grid>
-
-		<Section title="Another section title">
-			<p>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-				voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-			</p>
-		</Section>
-
-		<Section title="Yet another section title">
-			<p>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-				laboris nisi ut aliquip ex ea commodo consequat.
-			</p>
-		</Section>
-	</Embed>
-</Story>
-
-<style>
-	.grid-cell {
-		background: var(--ons-color-grey-10);
-		min-height: 200px;
-		width: 100%;
-	}
-</style>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import componentDocs from "./docs/component.md?raw";
+	import Embed from "../../wrappers/Embed/Embed.svelte";
+	import Highlight from "../../layout/Highlight/Highlight.svelte";
+	import Section from "../../layout/Section/Section.svelte";
+	import Grid from "../../layout/Grid/Grid.svelte";
+	import Select from "../../inputs/Select/Select.svelte";
+
+	const { Story } = defineMeta({
+		title: "Templates/Embedded article",
+		component: Embed,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" args={{}} asChild>
+	<Embed>
+		<Highlight bigText={false} marginBottom={false}>
+			<div style:padding="0 12px">
+				<h2>This is a sub-headline</h2>
+				<p>This is a description of the embedded interactive.</p>
+				<Select label="Select your area" />
+			</div>
+		</Highlight>
+
+		<Section title="Section title" marginTop={true}>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat..
+			</p>
+			<p>
+				Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+				mollit anim id est laborum.
+			</p>
+		</Section>
+
+		<Grid width="medium" caption="This is a caption text">
+			<div class="grid-cell"></div>
+		</Grid>
+
+		<Section title="Another section title">
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+				voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+			</p>
+		</Section>
+
+		<Section title="Yet another section title">
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+				labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+				laboris nisi ut aliquip ex ea commodo consequat.
+			</p>
+		</Section>
+	</Embed>
+</Story>
+
+<style>
+	.grid-cell {
+		background: var(--ons-color-grey-10);
+		min-height: 200px;
+		width: 100%;
+	}
+</style>

package/dist/templates/EmbedArticle/docs/component.md

@@ -1,56 +1,56 @@
-A full page article template with compact header and footer, suitable for scrollytelling and other feature articles.
-
-(Note: The scroller in this example will not preview correctly in the iframe on this page. You can select the example from the menu instead.)
-
-<!-- prettier-ignore -->
-```html
-<!-- +page.svelte -->
-<script>
-  import "@onsvisual/svelte-components/css/main.css"; // This is more typically imported in the global +layout.svelte
-  import { Embed, Highlight, Select, Section, Grid } from "@onsvisual/svelte-components";
-</script>
-
-<Embed>
-  <Highlight bigText={false} marginBottom={false}>
-    <div style:padding="0 12px">
-      <h2>This is a sub-headline</h2>
-      <p>This is a description of the embedded interactive.</p>
-      <Select label="Select your area" />
-    </div>
-  </Highlight>
-
-  <Section title="Section title" marginTop={true}>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat..
-    </p>
-    <p>
-      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-      mollit anim id est laborum.
-    </p>
-  </Section>
-
-  <Grid width="medium" caption="This is a caption text">
-    <div class="grid-cell"></div>
-  </Grid>
-
-  <Section title="Another section title">
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-      voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-    </p>
-  </Section>
-
-  <Section title="Yet another section title">
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat.
-    </p>
-  </Section>
-</Embed>
-```
+A full page article template with compact header and footer, suitable for scrollytelling and other feature articles.
+
+(Note: The scroller in this example will not preview correctly in the iframe on this page. You can select the example from the menu instead.)
+
+<!-- prettier-ignore -->
+```html
+<!-- +page.svelte -->
+<script>
+  import "@onsvisual/svelte-components/css/main.css"; // This is more typically imported in the global +layout.svelte
+  import { Embed, Highlight, Select, Section, Grid } from "@onsvisual/svelte-components";
+</script>
+
+<Embed>
+  <Highlight bigText={false} marginBottom={false}>
+    <div style:padding="0 12px">
+      <h2>This is a sub-headline</h2>
+      <p>This is a description of the embedded interactive.</p>
+      <Select label="Select your area" />
+    </div>
+  </Highlight>
+
+  <Section title="Section title" marginTop={true}>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat..
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+      mollit anim id est laborum.
+    </p>
+  </Section>
+
+  <Grid width="medium" caption="This is a caption text">
+    <div class="grid-cell"></div>
+  </Grid>
+
+  <Section title="Another section title">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    </p>
+  </Section>
+
+  <Section title="Yet another section title">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat.
+    </p>
+  </Section>
+</Embed>
+```