@onsvisual/svelte-components 1.0.0-next.6 → 1.0.0-next.8

package/dist/datavis/{DataTile/DataTile.stories.svelte → DataCard/DataCard.stories.svelte}

@@ -1,12 +1,13 @@
 <script module>
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import { withComponentDocs } from "../../js/withParams.js";
-	import DataTile from "./DataTile.svelte";
+	import DataCard from "./DataCard.svelte";
 	import componentDocs from "./docs/component.md?raw";
+	import data from "../demo-data/data-scatter.js";
 
 	const { Story } = defineMeta({
-		title: "Data visualisation/DataTile",
-		component: DataTile,
+		title: "Data visualisation/DataCard",
+		component: DataCard,
 		tags: ["autodocs"],
 		argTypes: {
 			mode: {
@@ -26,3 +27,16 @@
 		source: "Source: ONS"
 	}}
 />
+
+<Story
+	name="Sparkline"
+	args={{
+		title: "Example sparkline",
+		subtitle: "Value in £ million",
+		mode: "sparkline",
+		data: data.map((d) => ({ x: d.year, y: d.value })),
+		value: "down 2.47",
+		caption: `Change from 1979 to 2016`,
+		source: "Source: ONS"
+	}}
+/>

package/dist/datavis/DataCard/DataCard.stories.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  DataCardProps */
+/** @typedef {typeof __propDef.events}  DataCardEvents */
+/** @typedef {typeof __propDef.slots}  DataCardSlots */
+export default class DataCard extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DataCardProps = typeof __propDef.props;
+export type DataCardEvents = typeof __propDef.events;
+export type DataCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/datavis/{DataTile/DataTile.svelte → DataCard/DataCard.svelte}

@@ -1,11 +1,17 @@
 <script>
 	import Card from "../../layout/Card/Card.svelte";
+	import Sparkline from "./Sparkline.svelte";
 
 	/**
 	 * Title of card
 	 * @type {string}
 	 */
 	export let title = "";
+	/**
+	 * Optional: Subtitle of card
+	 * @type {string}
+	 */
+	export let subtitle = "";
 	/**
 	 * Optional: URL link for card title
 	 * @type {string}
@@ -44,13 +50,21 @@
 </script>
 
 <Card {title} {href} mode="featured" {cls}>
+	{#if subtitle}
+		<p class="ons-u-fs-s">{subtitle}</p>
+	{/if}
+	{#if mode === "sparkline" && data}
+		<Sparkline {data} />
+	{/if}
 	{#if value}
-		<p class="headline-figures__figure ons-u-fs-3xl ons-u-fs-2xl@m">{value}</p>
+		<p class="headline-figures__figure ons-u-fs-3xl ons-u-fs-2xl@m ons-u-mb-no">{value}</p>
 	{/if}
 	{#if caption}
-		<p class="headline-figures__supporting-text ons-u-fs-r">{@html caption}</p>
+		<p class="headline-figures__supporting-text ons-u-fs-r ons-u-mt-2xs ons-u-mb-no">
+			{@html caption}
+		</p>
 	{/if}
 	{#if source}
-		<p class="ons-u-fs-s">{source}</p>
+		<p class="ons-u-fs-s ons-u-mt-s ons-u-mb-no">{source}</p>
 	{/if}
 </Card>

package/dist/datavis/{DataTile/DataTile.svelte.d.ts → DataCard/DataCard.svelte.d.ts}

@@ -1,7 +1,7 @@
-/** @typedef {typeof __propDef.props}  DataTileProps */
-/** @typedef {typeof __propDef.events}  DataTileEvents */
-/** @typedef {typeof __propDef.slots}  DataTileSlots */
-export default class DataTile extends SvelteComponentTyped<{
+/** @typedef {typeof __propDef.props}  DataCardProps */
+/** @typedef {typeof __propDef.events}  DataCardEvents */
+/** @typedef {typeof __propDef.slots}  DataCardSlots */
+export default class DataCard extends SvelteComponentTyped<{
     cls?: string | undefined;
     caption?: string | undefined;
     data?: object[] | null | undefined;
@@ -10,13 +10,14 @@ export default class DataTile extends SvelteComponentTyped<{
     href?: string | undefined;
     mode?: "number" | "sparkline" | "bar" | undefined;
     value?: string | number | undefined;
+    subtitle?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
 }
-export type DataTileProps = typeof __propDef.props;
-export type DataTileEvents = typeof __propDef.events;
-export type DataTileSlots = typeof __propDef.slots;
+export type DataCardProps = typeof __propDef.props;
+export type DataCardEvents = typeof __propDef.events;
+export type DataCardSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
@@ -28,6 +29,7 @@ declare const __propDef: {
         href?: string | undefined;
         mode?: "number" | "sparkline" | "bar" | undefined;
         value?: string | number | undefined;
+        subtitle?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/datavis/DataCard/Sparkline.svelte

@@ -0,0 +1,117 @@
+<script>
+	import { scaleLinear } from "d3-scale";
+	import { line } from "d3-shape";
+
+	/**
+	 * Array of data in the format [{x: value, y: value}, etc]
+	 * @type {object[]}
+	 */
+	export let data;
+	/**
+	 * Key for the X values
+	 * @type {string}
+	 */
+	export let xKey = "x";
+	/**
+	 * Key for the Y values
+	 * @type {string}
+	 */
+	export let yKey = "y";
+
+	function minMax(data, key) {
+		const values = data.map((d) => d[key]);
+		return [Math.min(...values), Math.max(...values)];
+	}
+
+	const xDomain = [data[0][xKey], data[data.length - 1][xKey]];
+	const yDomain = minMax(data, yKey);
+
+	const xScale = scaleLinear().domain(xDomain).range([0, 100]);
+	const yScale = scaleLinear().domain(yDomain).range([100, 0]);
+	const lineFn = line()
+		.x((d) => xScale(d[xKey]))
+		.y((d) => yScale(d[yKey]));
+</script>
+
+<div class="sparkline-container">
+	<div
+		class="sparkline-point"
+		style={[data[data.length - 1]].map((d) => `right: 0; top: ${yScale(d[yKey])}%;`)[0]}
+	></div>
+	<svg class="sparkline-chart" viewBox="0 0 100 100" preserveAspectRatio="none">
+		<path class="sparkline" d={lineFn(data)} />
+	</svg>
+</div>
+<div class="x-ticks">
+	{#each [data[0], data[data.length - 1]] as tick, i}
+		<div class="x-tick x-tick--{i === 0 ? 'start' : 'end'}">
+			<span class="ons-u-fs-s">{tick[xKey]}</span><br /><span class="x-tick--value"
+				>{tick[yKey]}</span
+			>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.sparkline-container {
+		display: block;
+		height: 100px;
+		width: 100%;
+		position: relative;
+	}
+	.sparkline-chart {
+		display: block;
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		overflow: visible;
+	}
+	.sparkline-point {
+		position: absolute;
+		display: inline-block;
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		background: var(--ons-color-branded);
+		transform: translate(50%, -50%);
+	}
+	.sparkline {
+		fill: none;
+		stroke: var(--ons-color-branded);
+		stroke-width: 2.5px;
+		vector-effect: non-scaling-stroke;
+	}
+	.x-ticks {
+		display: flex;
+		width: 100%;
+		flex-direction: row;
+		justify-content: space-between;
+		margin-bottom: 6px;
+	}
+	.x-tick {
+		position: relative;
+		padding-top: 10px;
+		line-height: 1.1;
+	}
+	.x-tick--value {
+		color: var(--ons-color-branded);
+		font-size: 1.25rem;
+		font-weight: bold;
+	}
+	.x-tick::before {
+		position: absolute;
+		content: " ";
+		height: 10px;
+		top: 0;
+	}
+	.x-tick--end {
+		text-align: right;
+	}
+	.x-tick--start::before {
+		border-left: 1px solid var(--ons-color-borders);
+	}
+	.x-tick--end::before {
+		right: 0;
+		border-right: 1px solid var(--ons-color-borders);
+	}
+</style>

package/dist/datavis/DataCard/Sparkline.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  SparklineProps */
+/** @typedef {typeof __propDef.events}  SparklineEvents */
+/** @typedef {typeof __propDef.slots}  SparklineSlots */
+export default class Sparkline extends SvelteComponentTyped<{
+    data: object[];
+    xKey?: string | undefined;
+    yKey?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SparklineProps = typeof __propDef.props;
+export type SparklineEvents = typeof __propDef.events;
+export type SparklineSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        data: object[];
+        xKey?: string | undefined;
+        yKey?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/datavis/DataCard/docs/component.md

@@ -0,0 +1,17 @@
+A component for presenting key facts and figures as a grid of "cards".
+
+Note: This component is experimental. Its attributes and options are likely to change. The intention is to include a range of simple chart types.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DataCard } from "@onsvisual/svelte-components";
+</script>
+
+<DataCard
+  title="Consumer Price Index (CPI)",
+  value="up 2.5%",
+  caption="in 12 months to December 2024",
+  source="Source: ONS"
+/>
+```

package/dist/decorators/Icon/Icon.stories.svelte

@@ -0,0 +1,27 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Icon from "./Icon.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Decorators/Icon",
+		component: Icon,
+		tags: ["autodocs"],
+		argTypes: {
+			type: {
+				control: { type: "select" }
+			},
+			size: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Arrow icon" args={{ type: "arrow" }} />
+
+<Story name="Arrow pointing down" args={{ type: "arrow", rotation: 90 }} />
+
+<Story name="Search icon, large" args={{ type: "search", size: "3xl" }} />

package/dist/{inputs/Button/Icon.svelte.d.ts → decorators/Icon/Icon.stories.svelte.d.ts}

@@ -2,9 +2,7 @@
 /** @typedef {typeof __propDef.events}  IconEvents */
 /** @typedef {typeof __propDef.slots}  IconSlots */
 export default class Icon extends SvelteComponentTyped<{
-    type?: string | undefined;
-    marginLeft?: boolean | undefined;
-    marginRight?: boolean | undefined;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,9 +13,7 @@ export type IconSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        type?: string | undefined;
-        marginLeft?: boolean | undefined;
-        marginRight?: boolean | undefined;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/{inputs/Button → decorators/Icon}/Icon.svelte

@@ -1,20 +1,54 @@
 <script>
+	/**
+	 * Set the type of icon
+	 * @type {"arrow"|"carret"|"cross"|"external"|"signout"|"print"|"download"|"tick"|"search"}
+	 */
 	export let type = "arrow";
+	/**
+	 * Set the size of the icon
+	 * @type {"s"|"m"|"l"|"xl"|"2xl"|"3xl"|null}
+	 */
+	export let size = null;
+	/**
+	 * Rotation
+	 * @type {number}
+	 */
+	export let rotation = 0;
+	/**
+	 * Add a small margin on the left of the icon
+	 * @type {boolean}
+	 */
 	export let marginLeft = false;
+	/**
+	 * Add a small margin on the right of the icon
+	 * @type {boolean}
+	 */
 	export let marginRight = false;
 
 	const paths = {
 		arrow: {
-			d: "m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1z",
+			d: "m10 .2-.9.9c-.1.1-.1.4 0 .5l4 4H.6c-.2 0-.4.2-.4.4v1.2c0 .2.2.4.4.4h12.5l-3.9 3.7c-.2.2-.2.4 0 .6l.8.9c.2.2.4.2.6 0L16.8 7c.2-.2.2-.4 0-.6L10.7.3c-.3-.2-.5-.2-.7-.1Z",
 			viewBox: "0 0 17 13"
 		},
-		externalLink: {
+		chevron: {
+			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",
+			viewBox: "0 0 8 13"
+		},
+		carret: {
+			d: "M1.37.15 4.5 5.1 4.5-5.1a.37.37 0 0 1 .6 0l.7.7a.45.45 0 0 1 0 .5l-5.5 6.2a.37.37 0 0 1-.6 0l-5.5-6.1a.64.64 0 0 1 0-.6l.7-.7a.64.64 0 0 1 .6 0Z",
+			viewBox: "0 0 11.75 7.7"
+		},
+		cross: {
+			d: "M12 1.2086L10.7914 0L6 4.79155L1.20857 0L0 1.2086L4.79143 6.00015L0 10.7917L1.20857 12.0003L6 7.20875L10.7914 12.0003L12 10.7917L7.20857 6.00015L12 1.2086Z",
+			viewBox: "0 0 12 12"
+		},
+		external: {
 			d: "M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z",
 			viewBox: "2 2 12 12"
 		},
 		signout: {
 			d: "M13.85,7.65l-2.5-2.5a.5.5,0,0,0-.71,0,.48.48,0,0,0-.15.36V7h-3a.5.5,0,0,0-.5.5v1a.5.5,0,0,0,.5.5h3v1.5A.49.49,0,0,0,11,11a.48.48,0,0,0,.34-.14l2.51-2.5a.49.49,0,0,0,0-.68Z M8.5,14h-6a.5.5,0,0,1-.5-.5V2.5A.5.5,0,0,1,2.5,2h6a.5.5,0,0,1,.5.5V3a.5.5,0,0,1-.5.5h-5v9h5A.5.5,0,0,1,9,13v.5A.5.5,0,0,1,8.5,14Z",
-			viewBox: "0 0 12 12"
+			viewBox: "2 2 12 12"
 		},
 		print: {
 			d: "M17 4H3C1.3 4 0 5.2 0 6.8v5.5h4V16h12v-3.7h4V6.8C20 5.2 18.7 4 17 4zm-3 10H6V9h8v5zm3-6a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm-1-8H4v3h12V0z",
@@ -37,13 +71,14 @@
 
 {#if paths[type]}
 	<svg
-		class="ons-icon"
+		class="ons-icon {size ? `ons-icon--${size}` : ''}"
 		class:ons-u-ml-2xs={marginLeft}
 		class:ons-u-mr-2xs={marginRight}
 		viewBox={paths[type].viewBox}
 		xmlns="http://www.w3.org/2000/svg"
 		focusable="false"
 		fill="currentColor"
+		style:transform={rotation ? `rotate(${rotation}deg)` : null}
 	>
 		<path d={paths[type].d}></path>
 	</svg>

package/dist/decorators/Icon/Icon.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  IconProps */
+/** @typedef {typeof __propDef.events}  IconEvents */
+/** @typedef {typeof __propDef.slots}  IconSlots */
+export default class Icon extends SvelteComponentTyped<{
+    type?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
+    rotation?: number | undefined;
+    marginLeft?: boolean | undefined;
+    marginRight?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IconProps = typeof __propDef.props;
+export type IconEvents = typeof __propDef.events;
+export type IconSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        type?: "search" | "arrow" | "carret" | "cross" | "external" | "signout" | "print" | "download" | "tick" | undefined;
+        size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
+        rotation?: number | undefined;
+        marginLeft?: boolean | undefined;
+        marginRight?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/decorators/Icon/docs/component.md

@@ -0,0 +1,10 @@
+Make use of pre-defined icons in your projects. The icon fill is set to `currentColor`, so will render in the same colour as the surrounding text.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Icon } from "@onsvisual/svelte-components";
+</script>
+
+<Icon type="arrow" size="3xl"/>
+```

package/dist/index.d.ts

@@ -11,12 +11,15 @@ export { default as Breadcrumb } from "./layout/Breadcrumb/Breadcrumb.svelte";
 export { default as Card } from "./layout/Card/Card.svelte";
 export { default as Contents } from "./layout/Contents/Contents.svelte";
 export { default as DescriptionList } from "./layout/DescriptionList/DescriptionList.svelte";
+export { default as DocumentList } from "./layout/DocumentList/DocumentList.svelte";
+export { default as Document } from "./layout/DocumentList/Document.svelte";
 export { default as ErrorPage } from "./layout/ErrorPage/ErrorPage.svelte";
 export { default as Footer } from "./layout/Footer/Footer.svelte";
 export { default as Grid } from "./layout/Grid/Grid.svelte";
 export { default as GridCell } from "./layout/Grid/GridCell.svelte";
 export { default as Header } from "./layout/Header/Header.svelte";
 export { default as Highlight } from "./layout/Highlight/Highlight.svelte";
+export { default as Image } from "./layout/Image/Image.svelte";
 export { default as List } from "./layout/List/List.svelte";
 export { default as Li } from "./layout/List/Li.svelte";
 export { default as NavSection } from "./layout/NavSections/NavSection.svelte";
@@ -32,6 +35,8 @@ export { default as SkipLink } from "./layout/SkipLink/SkipLink.svelte";
 export { default as Summary } from "./layout/Summary/Summary.svelte";
 export { default as Tabs } from "./layout/Tabs/Tabs.svelte";
 export { default as Tab } from "./layout/Tabs/Tab.svelte";
+export { default as Timeline } from "./layout/Timeline/Timeline.svelte";
+export { default as TimelineItem } from "./layout/Timeline/TimelineItem.svelte";
 export { default as Button } from "./inputs/Button/Button.svelte";
 export { default as Checkbox } from "./inputs/Checkbox/Checkbox.svelte";
 export { default as Checkboxes } from "./inputs/Checkboxes/Checkboxes.svelte";
@@ -45,8 +50,9 @@ export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
 export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";
 export { default as Divider } from "./decorators/Divider/Divider.svelte";
 export { default as Em } from "./decorators/Em/Em.svelte";
+export { default as Icon } from "./decorators/Icon/Icon.svelte";
 export { default as Indent } from "./decorators/Indent/Indent.svelte";
-export { default as DataTile } from "./datavis/DataTile/DataTile.svelte";
+export { default as DataCard } from "./datavis/DataCard/DataCard.svelte";
 export { default as Table } from "./datavis/Table/Table.svelte";
 export { default as AnalyticsBanner, analyticsEvent } from "./layout/AnalyticsBanner/AnalyticsBanner.svelte";
 export { default as Details, default as Twisty } from "./layout/Details/Details.svelte";

package/dist/index.js

@@ -20,6 +20,8 @@ export { default as Contents } from "./layout/Contents/Contents.svelte";
 export { default as DescriptionList } from "./layout/DescriptionList/DescriptionList.svelte";
 export { default as Details } from "./layout/Details/Details.svelte";
 export { default as Twisty } from "./layout/Details/Details.svelte"; // Alias for Details
+export { default as DocumentList } from "./layout/DocumentList/DocumentList.svelte";
+export { default as Document } from "./layout/DocumentList/Document.svelte";
 export { default as ErrorPage } from "./layout/ErrorPage/ErrorPage.svelte";
 export { default as Footer } from "./layout/Footer/Footer.svelte";
 export { default as Grid } from "./layout/Grid/Grid.svelte";
@@ -28,6 +30,7 @@ export { default as Header } from "./layout/Header/Header.svelte";
 export { default as Hero } from "./layout/Hero/Hero.svelte";
 export { default as Titleblock } from "./layout/Hero/Hero.svelte"; // Alias for Hero
 export { default as Highlight } from "./layout/Highlight/Highlight.svelte";
+export { default as Image } from "./layout/Image/Image.svelte";
 export { default as List } from "./layout/List/List.svelte";
 export { default as Li } from "./layout/List/Li.svelte";
 export { default as NavSection } from "./layout/NavSections/NavSection.svelte";
@@ -43,6 +46,8 @@ export { default as SkipLink } from "./layout/SkipLink/SkipLink.svelte";
 export { default as Summary } from "./layout/Summary/Summary.svelte";
 export { default as Tabs } from "./layout/Tabs/Tabs.svelte";
 export { default as Tab } from "./layout/Tabs/Tab.svelte";
+export { default as Timeline } from "./layout/Timeline/Timeline.svelte";
+export { default as TimelineItem } from "./layout/Timeline/TimelineItem.svelte";
 
 // Inputs
 export { default as Button } from "./inputs/Button/Button.svelte";
@@ -62,8 +67,9 @@ export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
 export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";
 export { default as Divider } from "./decorators/Divider/Divider.svelte";
 export { default as Em } from "./decorators/Em/Em.svelte";
+export { default as Icon } from "./decorators/Icon/Icon.svelte";
 export { default as Indent } from "./decorators/Indent/Indent.svelte";
 
 // Data visualisation
-export { default as DataTile } from "./datavis/DataTile/DataTile.svelte";
+export { default as DataCard } from "./datavis/DataCard/DataCard.svelte";
 export { default as Table } from "./datavis/Table/Table.svelte";

package/dist/inputs/Button/Button.svelte

@@ -1,6 +1,6 @@
 <script>
 	import { createEventDispatcher } from "svelte";
-	import Icon from "./Icon.svelte";
+	import Icon from "../../decorators/Icon/Icon.svelte";
 
 	const dispatch = createEventDispatcher();
 
@@ -26,7 +26,7 @@
 	export let small = false;
 	/**
 	 * Icon on button, eg. "arrow", "search"
-	 * @type {string}
+	 * @type {"arrow"|"external"|"signout"|"print"|"download"|"tick"|"search"}
 	 */
 	export let icon = "";
 	/**

package/dist/inputs/Button/Button.svelte.d.ts

@@ -5,14 +5,14 @@ export default class Button extends SvelteComponentTyped<{
     cls?: string | undefined;
     small?: boolean | undefined;
     href?: string | undefined;
+    download?: string | undefined;
     type?: "button" | "reset" | "sumbit" | undefined;
     variant?: "secondary" | "primary" | "ghost" | undefined;
-    icon?: string | undefined;
+    icon?: "search" | "arrow" | "external" | "signout" | "print" | "download" | "tick" | undefined;
     iconPosition?: "before" | "after" | undefined;
     disabled?: boolean | undefined;
     hideLabel?: boolean | undefined;
     arialabel?: string | undefined;
-    download?: string | undefined;
 }, {
     click: CustomEvent<any>;
 } & {
@@ -31,14 +31,14 @@ declare const __propDef: {
         cls?: string | undefined;
         small?: boolean | undefined;
         href?: string | undefined;
+        download?: string | undefined;
         type?: "button" | "reset" | "sumbit" | undefined;
         variant?: "secondary" | "primary" | "ghost" | undefined;
-        icon?: string | undefined;
+        icon?: "search" | "arrow" | "external" | "signout" | "print" | "download" | "tick" | undefined;
         iconPosition?: "before" | "after" | undefined;
         disabled?: boolean | undefined;
         hideLabel?: boolean | undefined;
         arialabel?: string | undefined;
-        download?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;

package/dist/inputs/Checkbox/Checkbox.svelte.d.ts

@@ -7,9 +7,9 @@ export default class Checkbox extends SvelteComponentTyped<{
     cls?: string | undefined;
     group?: object[] | null | undefined;
     compact?: boolean | undefined;
+    description?: string | undefined;
     variant?: "default" | "ghost" | undefined;
     disabled?: boolean | undefined;
-    description?: string | undefined;
     checked?: boolean | undefined;
     item?: object | undefined;
     groupName?: string | undefined;
@@ -30,9 +30,9 @@ declare const __propDef: {
         cls?: string | undefined;
         group?: object[] | null | undefined;
         compact?: boolean | undefined;
+        description?: string | undefined;
         variant?: "default" | "ghost" | undefined;
         disabled?: boolean | undefined;
-        description?: string | undefined;
         checked?: boolean | undefined;
         item?: object | undefined;
         groupName?: string | undefined;

package/dist/inputs/Input/Input.svelte.d.ts

@@ -10,8 +10,8 @@ export default class Input extends SvelteComponentTyped<{
     error?: boolean | undefined;
     numeric?: boolean | undefined;
     value?: string | undefined;
-    hideLabel?: boolean | undefined;
     description?: string | undefined;
+    hideLabel?: boolean | undefined;
     charLimit?: number | undefined;
     prefix?: string | undefined;
     suffix?: string | undefined;
@@ -36,8 +36,8 @@ declare const __propDef: {
         error?: boolean | undefined;
         numeric?: boolean | undefined;
         value?: string | undefined;
-        hideLabel?: boolean | undefined;
         description?: string | undefined;
+        hideLabel?: boolean | undefined;
         charLimit?: number | undefined;
         prefix?: string | undefined;
         suffix?: string | undefined;

package/dist/inputs/Textarea/Textarea.svelte.d.ts

@@ -7,8 +7,8 @@ export default class Textarea extends SvelteComponentTyped<{
     width?: number | undefined;
     label?: string | undefined;
     value?: string | undefined;
-    hideLabel?: boolean | undefined;
     description?: string | undefined;
+    hideLabel?: boolean | undefined;
     charLimit?: number | null | undefined;
     rows?: number | undefined;
 }, {
@@ -26,8 +26,8 @@ declare const __propDef: {
         width?: number | undefined;
         label?: string | undefined;
         value?: string | undefined;
-        hideLabel?: boolean | undefined;
         description?: string | undefined;
+        hideLabel?: boolean | undefined;
         charLimit?: number | null | undefined;
         rows?: number | undefined;
     };

package/dist/intro.mdx

@@ -21,9 +21,9 @@ import { Meta } from "@storybook/addon-docs/blocks";
   </a>
 </p>
 
-A library of ONS-branded Svelte components for projects large and small.
+A library of ONS-branded components for any Svelte or SvelteKit project.
 
-The components and styles in this library based on the [ONS Design System](https://service-manual.ons.gov.uk/design-system/), but with a number of tweaks and additions to make them suitable for a range of interactive data visualisation and data journalism projects.
+The components and styles in this library are built on the HTML and CSS of the [ONS Design System](https://service-manual.ons.gov.uk/design-system/), but with a number of tweaks and additions to make them suitable for a range of interactive data visualisation and data journalism projects.
 
 ## Installing the components
 
@@ -31,7 +31,7 @@ There are two ways to start a new project using these components.
 
 ### 1. Use a ready-made template
 
-When you start a project from one of the following templates, @onsvisual/svelte-components will already be installed:
+When you start a project with one of the following templates, @onsvisual/svelte-components will already be installed:
 
 - [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter)
 - [robo-article](https://github.com/ONSvisual/robo-article)
@@ -47,7 +47,7 @@ npm install @onsvisual/svelte-components --save-dev
 
 ## Using the components
 
-When using the components, you need to import both the desired component and the global CSS styles. In a SvelteKit project it is best to import the CSS in a top-level **+layout.svelte** file in your **src/routes** folder, which will apply it to all pages/components in the project.
+When using the components, you need to import both the desired component and the global CSS styles. In a SvelteKit project it is best to import the CSS in the top-level **+layout.svelte** file in your **src/routes** folder, which will apply it to all pages/components in the project.
 
 {/* prettier-ignore */}
 ```html

package/dist/layout/Header/Header.svelte

@@ -847,9 +847,13 @@
 							class="ons-grid ons-grid-flex ons-grid-flex--between ons-grid-flex--vertical-center ons-grid-flex--no-wrap ons-grid--gutterless"
 						>
 							<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
-								<a class="ons-header__title-link" href={titleHref}>
+								{#if titleHref}
+									<a class="ons-header__title-link" href={titleHref}>
+										<div class="ons-header__title">{title}</div>
+									</a>
+								{:else}
 									<div class="ons-header__title">{title}</div>
-								</a>
+								{/if}
 							</div>
 						</div>
 					</div>

package/dist/layout/Tabs/Tabs.svelte

@@ -8,6 +8,7 @@
 
 	/**
 	 * Make tabs smaller/more compact
+	 * @type {boolean}
 	 */
 	export let compact = false;
 	/**

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

@@ -0,0 +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>

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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TimelineProps */
+/** @typedef {typeof __propDef.events}  TimelineEvents */
+/** @typedef {typeof __propDef.slots}  TimelineSlots */
+export default class Timeline extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TimelineProps = typeof __propDef.props;
+export type TimelineEvents = typeof __propDef.events;
+export type TimelineSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/layout/Timeline/Timeline.svelte

@@ -0,0 +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>

package/dist/layout/Timeline/Timeline.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TimelineProps */
+/** @typedef {typeof __propDef.events}  TimelineEvents */
+/** @typedef {typeof __propDef.slots}  TimelineSlots */
+export default class Timeline extends SvelteComponentTyped<{
+    items?: object[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TimelineProps = typeof __propDef.props;
+export type TimelineEvents = typeof __propDef.events;
+export type TimelineSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        items?: object[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/layout/Timeline/TimelineItem.svelte

@@ -0,0 +1,14 @@
+<script>
+	/**
+	 * Title of timeline item
+	 * @type {string}
+	 */
+	export let title = "";
+</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/TimelineItem.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  TimelineItemProps */
+/** @typedef {typeof __propDef.events}  TimelineItemEvents */
+/** @typedef {typeof __propDef.slots}  TimelineItemSlots */
+export default class TimelineItem extends SvelteComponentTyped<{
+    title?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type TimelineItemProps = typeof __propDef.props;
+export type TimelineItemEvents = typeof __propDef.events;
+export type TimelineItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +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}>
+```

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

@@ -0,0 +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>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.0-next.6",
+	"version": "1.0.0-next.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",
@@ -61,6 +61,8 @@
 		"@vitest/browser": "3.2.3",
 		"@vitest/coverage-v8": "3.2.3",
 		"csso": "^5.0.5",
+		"d3-scale": "^4.0.2",
+		"d3-shape": "^3.2.0",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-storybook": "^9.0.11",

package/dist/datavis/DataTile/DataTile.stories.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  DataTileProps */
-/** @typedef {typeof __propDef.events}  DataTileEvents */
-/** @typedef {typeof __propDef.slots}  DataTileSlots */
-export default class DataTile extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DataTileProps = typeof __propDef.props;
-export type DataTileEvents = typeof __propDef.events;
-export type DataTileSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/datavis/DataTile/docs/component.md

@@ -1,17 +0,0 @@
-A component for presenting key facts and figures in a tile grid.
-
-Note: This component will be extended to include bar charts and sparklines.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { DataTile } from "@onsvisual/svelte-components";
-</script>
-
-<DataTile
-  title="Consumer Price Index (CPI)",
-  value="up 2.5%",
-  caption="in 12 months to December 2024",
-  source="Source: ONS"
-/>
-```