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

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

@@ -0,0 +1,28 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import DataTile from "./DataTile.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Data visualisation/DataTile",
+		component: DataTile,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Big number"
+	args={{
+		title: "Consumer Price Index (CPI)",
+		value: "up 2.5%",
+		caption: "in 12 months to December 2024",
+		source: "Source: ONS"
+	}}
+/>

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

@@ -0,0 +1,23 @@
+/** @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/DataTile.svelte

@@ -0,0 +1,56 @@
+<script>
+	import Card from "../../layout/Card/Card.svelte";
+
+	/**
+	 * Title of card
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Optional: URL link for card title
+	 * @type {string}
+	 */
+	export let href = "";
+	/**
+	 * Big number (expects a pre-formatted text string)
+	 * @type {string|number}
+	 */
+	export let value = "";
+	/**
+	 * Mode for the data tile
+	 * @type {"number"|"sparkline"|"bar"}
+	 */
+	export let mode = "number";
+	/**
+	 * Text caption describing the number
+	 * @type {string}
+	 */
+	export let caption = "";
+	/**
+	 * An array of data (required for charts)
+	 * @type {object[]|null}
+	 */
+	export let data = null;
+	/**
+	 * Text describing the source of the data
+	 * @type {string}
+	 */
+	export let source = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
+</script>
+
+<Card {title} {href} mode="featured" {cls}>
+	{#if value}
+		<p class="headline-figures__figure ons-u-fs-3xl ons-u-fs-2xl@m">{value}</p>
+	{/if}
+	{#if caption}
+		<p class="headline-figures__supporting-text ons-u-fs-r">{@html caption}</p>
+	{/if}
+	{#if source}
+		<p class="ons-u-fs-s">{source}</p>
+	{/if}
+</Card>

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

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  DataTileProps */
+/** @typedef {typeof __propDef.events}  DataTileEvents */
+/** @typedef {typeof __propDef.slots}  DataTileSlots */
+export default class DataTile extends SvelteComponentTyped<{
+    cls?: string | undefined;
+    caption?: string | undefined;
+    data?: object[] | null | undefined;
+    source?: string | undefined;
+    title?: string | undefined;
+    href?: string | undefined;
+    mode?: "number" | "sparkline" | "bar" | undefined;
+    value?: string | number | undefined;
+}, {
+    [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: {
+        cls?: string | undefined;
+        caption?: string | undefined;
+        data?: object[] | null | undefined;
+        source?: string | undefined;
+        title?: string | undefined;
+        href?: string | undefined;
+        mode?: "number" | "sparkline" | "bar" | undefined;
+        value?: string | number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,17 @@
+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"
+/>
+```

package/dist/datavis/Table/Table.svelte

@@ -39,12 +39,18 @@
 		Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
 	let _data = [...data];
 	let sort = columns.map((c) => "none");
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	$: sortable = columns.map((d) => d.sortable).includes(true);
 	$: formatters = columns.map((d) => formatter(d.dp));
 </script>
 
 <div
+	class={cls}
 	style:overflow={typeof height === "number" ? "auto" : null}
 	style:height={typeof height === "number" ? `${height}px` : null}
 	style:display={typeof height !== "number" ? "contents" : null}

package/dist/datavis/Table/Table.svelte.d.ts

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  TableEvents */
 /** @typedef {typeof __propDef.slots}  TableSlots */
 export default class Table extends SvelteComponentTyped<{
+    cls?: string | undefined;
     height?: number | "auto" | undefined;
     data?: object[] | undefined;
     title?: string | undefined;
@@ -19,6 +20,7 @@ export type TableSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         height?: number | "auto" | undefined;
         data?: object[] | undefined;
         title?: string | undefined;

package/dist/decorators/Divider/Divider.svelte

@@ -17,18 +17,23 @@
 	 */
 	export let mode = "dark";
 	/**
-	 * Optional margin above section
+	 * Adds margin above section
 	 * @type {boolean}
 	 */
 	export let marginTop = !!hr;
 	/**
-	 * Optional margin below section
+	 * Adds margin below section
 	 * @type {boolean}
 	 */
 	export let marginBottom = true;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<Container {width} {marginTop} {marginBottom}>
+<Container {width} {marginTop} {marginBottom} {cls}>
 	<hr
 		class="ons-u-mt-no"
 		class:ons-u-vh={!hr}

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DividerEvents */
 /** @typedef {typeof __propDef.slots}  DividerSlots */
 export default class Divider extends SvelteComponentTyped<{
+    cls?: string | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     marginTop?: boolean | undefined;
     marginBottom?: boolean | undefined;
@@ -17,6 +18,7 @@ export type DividerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         marginTop?: boolean | undefined;
         marginBottom?: boolean | undefined;

package/dist/index.d.ts

@@ -46,6 +46,7 @@ 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 Indent } from "./decorators/Indent/Indent.svelte";
+export { default as DataTile } from "./datavis/DataTile/DataTile.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

@@ -65,4 +65,5 @@ export { default as Em } from "./decorators/Em/Em.svelte";
 export { default as Indent } from "./decorators/Indent/Indent.svelte";
 
 // Data visualisation
+export { default as DataTile } from "./datavis/DataTile/DataTile.svelte";
 export { default as Table } from "./datavis/Table/Table.svelte";

package/dist/inputs/Button/Button.svelte

@@ -54,6 +54,11 @@
 	 * @type {string}
 	 */
 	export let download = "";
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
 {#if href}
@@ -61,7 +66,7 @@
 		href={!disabled ? href : null}
 		role="button"
 		{download}
-		class="ons-btn ons-btn--link ons-js-submit-btn"
+		class="ons-btn ons-btn--link ons-js-submit-btn {cls}"
 		class:ons-btn--small={small}
 		class:ons-btn--secondary={variant === "secondary"}
 		class:ons-btn--ghost={variant === "ghost"}
@@ -91,7 +96,7 @@
 {:else}
 	<button
 		{type}
-		class="ons-btn"
+		class="ons-btn {cls}"
 		class:ons-btn--small={small}
 		class:ons-btn--secondary={variant === "secondary"}
 		class:ons-btn--ghost={variant === "ghost"}

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  ButtonEvents */
 /** @typedef {typeof __propDef.slots}  ButtonSlots */
 export default class Button extends SvelteComponentTyped<{
+    cls?: string | undefined;
     small?: boolean | undefined;
     href?: string | undefined;
     type?: "button" | "reset" | "sumbit" | undefined;
@@ -27,6 +28,7 @@ export type ButtonSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         small?: boolean | undefined;
         href?: string | undefined;
         type?: "button" | "reset" | "sumbit" | undefined;

package/dist/inputs/Checkbox/Checkbox.svelte

@@ -9,50 +9,55 @@
 	 */
 	export let id;
 	/**
-	 * Optional: Name of checkbox group
+	 * Label for input
 	 * @type {string}
 	 */
-	export let name = "";
-	/**
-	 * Value for input element (defaults to ID)
-	 * @type {string|object}
-	 */
-	export let value = id;
+	export let label;
 	/**
-	 * Label for input
+	 * Optional: Extended description for element
 	 * @type {string}
 	 */
-	export let label;
+	export let description = "";
 	/**
 	 * Binding for checked state of input
 	 * @type {boolean}
 	 */
 	export let checked = false;
 	/**
-	 * Binding for checked state of input
-	 * @type {object[]|null}
+	 * Option to disable input
+	 * @type {boolean}
 	 */
-	export let group = null;
+	export let disabled = false;
 	/**
-	 * Optional: Extended description for element
+	 * Optional: Define the item as an object in the form {id, label, description?}
+	 * @type {object}
+	 */
+	export let item = { id, label, description, checked, disabled };
+	/**
+	 * Optional: Name of checkbox group
 	 * @type {string}
 	 */
-	export let description = "";
+	export let groupName = "";
+	/**
+	 * Binding for checked state of input
+	 * @type {object[]|null}
+	 */
+	export let group = null;
 	/**
 	 * Set display mode of checkbox
 	 * @type {"default"|"ghost"}
 	 */
 	export let variant = "default";
-	/**
-	 * Option to disable input
-	 * @type {boolean}
-	 */
-	export let disabled = false;
 	/**
 	 * Compact mode (no border)
 	 * @type {boolean}
 	 */
 	export let compact = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	const checkboxes = getContext("checkboxes");
 
@@ -64,15 +69,19 @@
 	}
 
 	function updateGroup() {
-		const newGroup = $checkboxes.filter((c) => c.checked).map((c) => c.id);
-		if (newGroup.join() !== group.join()) group = newGroup;
+		const groupIndex = {};
+		for (const g of group) groupIndex[g.id] = g;
+		const newGroupIds = $checkboxes.filter((c) => c.checked).map((c) => c?.id);
+		if (newGroupIds.length !== group.length)
+			group = newGroupIds.map((id) => groupIndex[id] || item);
 	}
 
 	function doChange(e) {
+		checked = item.checked;
 		if (Array.isArray(group) && Array.isArray($checkboxes)) {
 			updateGroup();
 		}
-		dispatch("change", { id, checked, group, e });
+		dispatch("change", { item, e });
 	}
 
 	onMount(() => {
@@ -92,45 +101,45 @@
 </script>
 
 <span
-	class="ons-checkboxes__item"
+	class="ons-checkboxes__item {cls}"
 	class:ons-checkboxes__item--ghost={variant === "ghost"}
 	class:ons-checkboxes__item--no-border={compact}
 >
 	<span class="ons-checkbox" class:ons-checkbox--no-border={compact}>
 		<input
 			type="checkbox"
-			{id}
-			{name}
-			{value}
-			bind:checked
+			id={item.id}
+			name={groupName}
+			value={item}
+			bind:checked={item.checked}
 			class="ons-checkbox__input ons-js-checkbox"
-			{disabled}
-			aria-disabled={disabled}
+			disabled={item.disabled}
+			aria-disabled={item.disabled}
 			on:change={doChange}
 			bind:this={el}
 		/>
 		<label
 			class="ons-checkbox__label"
-			class:ons-label--with-description={description}
-			for={id}
-			id="{id}-label"
-			aria-describedby={description ? `${id}-label-description-hint` : null}
+			class:ons-label--with-description={item.description}
+			for={item.id}
+			id="{item.id}-label"
+			aria-describedby={item.description ? `${item.id}-label-description-hint` : null}
 		>
-			{label}
-			{#if description}
+			{item.label}
+			{#if item.description}
 				<span class="ons-label__aria-hidden-description" aria-hidden="true"
 					><span class="ons-label__description ons-radio__label--with-description">
-						{description}
+						{item.description}
 					</span></span
 				>
 			{/if}
 		</label>
-		{#if description}
+		{#if item.description}
 			<span
 				class="ons-label__visually-hidden-description ons-u-vh"
-				id="{id}-label-description-hint"
+				id="{item.id}-label-description-hint"
 			>
-				{description}
+				{item.description}
 			</span>
 		{/if}
 	</span>

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

@@ -4,14 +4,15 @@
 export default class Checkbox extends SvelteComponentTyped<{
     id: string;
     label: string;
-    name?: string | undefined;
+    cls?: string | undefined;
     group?: object[] | null | undefined;
     compact?: boolean | undefined;
-    value?: string | object | undefined;
     variant?: "default" | "ghost" | undefined;
     disabled?: boolean | undefined;
-    checked?: boolean | undefined;
     description?: string | undefined;
+    checked?: boolean | undefined;
+    item?: object | undefined;
+    groupName?: string | undefined;
 }, {
     change: CustomEvent<any>;
 } & {
@@ -26,14 +27,15 @@ declare const __propDef: {
     props: {
         id: string;
         label: string;
-        name?: string | undefined;
+        cls?: string | undefined;
         group?: object[] | null | undefined;
         compact?: boolean | undefined;
-        value?: string | object | undefined;
         variant?: "default" | "ghost" | undefined;
         disabled?: boolean | undefined;
-        checked?: boolean | undefined;
         description?: string | undefined;
+        checked?: boolean | undefined;
+        item?: object | undefined;
+        groupName?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/inputs/Checkboxes/Checkboxes.stories.svelte

@@ -21,22 +21,14 @@
 	];
 </script>
 
-{#snippet template(args)}
-	<div style:padding="12px">
-		<Checkboxes {...args} />
-	</div>
-{/snippet}
+<Story name="Default" args={{ label: "Select items", items }} />
 
-<Story name="Default" args={{ label: "Select items", items }} {template} />
-
-<Story name="Compact without label" args={{ items, compact: true }} {template} />
+<Story name="Compact without label" args={{ items, compact: true }} />
 
 <Story name="Individually defined checkboxes" asChild parameters={withStoryDocs(exampleDocs)}>
-	<div style:padding="12px">
-		<Checkboxes label="Select items">
-			<Checkbox id="ice-cream" label="Ice cream" />
-			<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
-			<Checkbox id="disabled" label="Disabled option" disabled />
-		</Checkboxes>
-	</div>
+	<Checkboxes label="Select items">
+		<Checkbox id="ice-cream" label="Ice cream" />
+		<Checkbox id="sprinkles" label="Sprinkles" description="Highly recommended!" />
+		<Checkbox id="disabled" label="Disabled option" disabled />
+	</Checkboxes>
 </Story>

package/dist/inputs/Checkboxes/Checkboxes.svelte

@@ -4,7 +4,17 @@
 	import Checkbox from "../Checkbox/Checkbox.svelte";
 
 	/**
-	 * Label for grouped inputs
+	 * Title/legend for parent <fieldset>
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Visually hide the title/legend
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Descriptive "how to" label for inputs
 	 * @type {string}
 	 */
 	export let label = "";
@@ -20,19 +30,33 @@
 	 * @type {object[]}
 	 */
 	export let value = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 
 	const checkboxes = writable([]);
 	setContext("checkboxes", checkboxes);
 </script>
 
-{#if label}
-	<p class="ons-checkboxes__label">{label}</p>
-{/if}
-<div class="ons-checkboxes__items">
-	<slot />
-	{#if Array.isArray(items)}
-		{#each items as item}
-			<Checkbox {...item} bind:group={value} {compact} on:change />
-		{/each}
+<fieldset class="ons-fieldset {cls}">
+	{#if title}
+		<legend class="ons-fieldset__legend ons-u-mb-no">
+			<span class="ons-fieldset__legend-title ons-u-pb-no" class:ons-u-vh={hideTitle}>{title}</span>
+		</legend>
 	{/if}
-</div>
+	<div class="ons-input-items">
+		{#if label}
+			<p class="ons-checkboxes__label">{label}</p>
+		{/if}
+		<div class="ons-checkboxes__items">
+			<slot />
+			{#if Array.isArray(items)}
+				{#each items as item}
+					<Checkbox {item} bind:group={value} {compact} on:change />
+				{/each}
+			{/if}
+		</div>
+	</div>
+</fieldset>

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

@@ -2,8 +2,11 @@
 /** @typedef {typeof __propDef.events}  CheckboxesEvents */
 /** @typedef {typeof __propDef.slots}  CheckboxesSlots */
 export default class Checkboxes extends SvelteComponentTyped<{
+    cls?: string | undefined;
     label?: string | undefined;
+    title?: string | undefined;
     compact?: boolean | undefined;
+    hideTitle?: boolean | undefined;
     items?: object[] | null | undefined;
     value?: object[] | undefined;
 }, {
@@ -20,8 +23,11 @@ export type CheckboxesSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         label?: string | undefined;
+        title?: string | undefined;
         compact?: boolean | undefined;
+        hideTitle?: boolean | undefined;
         items?: object[] | null | undefined;
         value?: object[] | undefined;
     };

package/dist/inputs/Checkboxes/docs/component.md

@@ -1,6 +1,6 @@
 A component for defining a group of [checkbox](/docs/inputs-checkbox--docs) elements, whose checked values can be bound to Svelte variables, or grouped in an array.
 
-Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes).
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/checkboxes). (Note: In some use cases, it may be preferable to use raw HTML `<input type="checkbox">` components and style these using CSS.)
 
 <!-- prettier-ignore -->
 ```html

package/dist/inputs/Dropdown/Dropdown.svelte

@@ -33,9 +33,14 @@
 	 * @type {object[]}
 	 */
 	export let options = [];
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
 </script>
 
-<div class="ons-field">
+<div class="ons-field {cls}">
 	{#if label}
 		<label class="ons-label" for={id} class:ons-u-vh={hideLabel}>{label}</label>
 	{/if}

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

@@ -2,6 +2,7 @@
 /** @typedef {typeof __propDef.events}  DropdownEvents */
 /** @typedef {typeof __propDef.slots}  DropdownSlots */
 export default class Dropdown extends SvelteComponentTyped<{
+    cls?: string | undefined;
     id?: string | undefined;
     label?: string | undefined;
     value?: object | null | undefined;
@@ -20,6 +21,7 @@ export type DropdownSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        cls?: string | undefined;
         id?: string | undefined;
         label?: string | undefined;
         value?: object | null | undefined;