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

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

@@ -3,6 +3,7 @@
 	import { withComponentDocs } from "../../js/withParams.js";
 	import DataTile from "./DataTile.svelte";
 	import componentDocs from "./docs/component.md?raw";
+	import data from "../demo-data/data-scatter.js";
 
 	const { Story } = defineMeta({
 		title: "Data visualisation/DataTile",
@@ -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/DataTile/DataTile.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

@@ -10,6 +10,7 @@ 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>;
 }, {}> {
@@ -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/DataTile/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/DataTile/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/decorators/Icon/Icon.stories.svelte

@@ -0,0 +1,25 @@
+<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="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,6 +1,23 @@
 <script>
+	/**
+	 * Set the type of icon
+	 * @type {"arrow"|"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;
+	/**
+	 * 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 = {
@@ -8,13 +25,13 @@
 			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: {
+		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,7 +54,7 @@
 
 {#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}

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  IconProps */
+/** @typedef {typeof __propDef.events}  IconEvents */
+/** @typedef {typeof __propDef.slots}  IconSlots */
+export default class Icon extends SvelteComponentTyped<{
+    type?: "search" | "arrow" | "external" | "signout" | "print" | "download" | "tick" | undefined;
+    size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | 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" | "external" | "signout" | "print" | "download" | "tick" | undefined;
+        size?: "s" | "m" | "l" | "xl" | "2xl" | "3xl" | null | undefined;
+        marginLeft?: boolean | undefined;
+        marginRight?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,12 @@
+A component to visually highlight text. Can be used for inline text or to provide a "badge".
+
+Consists of a `<mark>` element with a custom background color, where the highlighted text will automatically appear black or white to maximise contrast.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Em } from "@onsvisual/svelte-components";
+</script>
+
+<Em color="steelblue">Highlighted text</Em>
+```

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.0-next.6",
+	"version": "1.0.0-next.7",
 	"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",