@onsvisual/svelte-components 1.0.47 → 1.0.48

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

@@ -1,10 +1,10 @@
-A footer component with compact mode and theming options.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Footer } from "@onsvisual/svelte-components";
-</script>
-
-<Footer />
-```
+A footer component with compact mode and theming options.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Footer } from "@onsvisual/svelte-components";
+</script>
+
+<Footer />
+```

package/dist/layout/Grid/Grid.stories.svelte

@@ -1,50 +1,50 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Grid from "./Grid.svelte";
-	import GridCell from "./GridCell.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Grid",
-		component: Grid,
-		tags: ["autodocs"],
-		argTypes: {
-			width: {
-				control: { type: "select" }
-			},
-			colWidth: {
-				control: { type: "select" }
-			},
-			gridGap: {
-				control: { type: "select" }
-			}
-		},
-		parameters: withComponentDocs(componentDocs)
-	});
-</script>
-
-{#snippet template(args)}
-	<Grid {...args}>
-		<GridCell><div class="grid-cell">Grid cell one</div></GridCell>
-		<GridCell><div class="grid-cell">Grid cell two</div></GridCell>
-		<GridCell><div class="grid-cell">Grid cell three</div></GridCell>
-		<GridCell><div class="grid-cell">Grid cell four</div></GridCell>
-	</Grid>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
-
-<Story name="Wide columns" args={{ colWidth: "wide" }} {template} />
-
-<Story name="Narrow columns" args={{ colWidth: "narrow" }} {template} />
-
-<Story name="Full width columns" args={{ colWidth: "full" }} {template} />
-
-<style>
-	.grid-cell {
-		background: var(--ons-color-grey-10);
-		padding: 12px;
-		height: 100px;
-	}
-</style>
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Grid from "./Grid.svelte";
+	import GridCell from "./GridCell.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Grid",
+		component: Grid,
+		tags: ["autodocs"],
+		argTypes: {
+			width: {
+				control: { type: "select" }
+			},
+			colWidth: {
+				control: { type: "select" }
+			},
+			gridGap: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Grid {...args}>
+		<GridCell><div class="grid-cell">Grid cell one</div></GridCell>
+		<GridCell><div class="grid-cell">Grid cell two</div></GridCell>
+		<GridCell><div class="grid-cell">Grid cell three</div></GridCell>
+		<GridCell><div class="grid-cell">Grid cell four</div></GridCell>
+	</Grid>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="Wide columns" args={{ colWidth: "wide" }} {template} />
+
+<Story name="Narrow columns" args={{ colWidth: "narrow" }} {template} />
+
+<Story name="Full width columns" args={{ colWidth: "full" }} {template} />
+
+<style>
+	.grid-cell {
+		background: var(--ons-color-grey-10);
+		padding: 12px;
+		height: 100px;
+	}
+</style>

package/dist/layout/Grid/Grid.svelte

@@ -1,117 +1,117 @@
-<script>
-	import { setContext } from "svelte";
-	import Container from "../../wrappers/Container/Container.svelte";
-
-	/**
-	 * Optional: Sets the unique ID of the section
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-	/**
-	 * Sets the width of the section
-	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-	 */
-	export let width = "wide";
-	/**
-	 * Sets the title of the section
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Allows the h2 title tag for the section to be visually hidden
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * Optional: Caption for the grid (if used as a media container, eg. for an image)
-	 * @type {string|null}
-	 */
-	export let caption = null;
-	/**
-	 * Adds margin above section
-	 * @type {boolean}
-	 */
-	export let marginTop = false;
-	/**
-	 * Adds margin below section
-	 * @type {boolean}
-	 */
-	export let marginBottom = true;
-	/**
-	 * Sets the width of the columns
-	 * @type {"narrow"|"medium"|"wide"|"full"}
-	 */
-	export let colWidth = "medium";
-	/**
-	 * Set the minimum height of a grid row (can be a number in pixels, or a valid CSS height)
-	 * @type {number|string|null}
-	 */
-	export let rowHeight = null;
-	/**
-	 * Stretch the height of grid cells to match their  siblings
-	 * @type {boolean}
-	 */
-	export let rowStretch = true;
-	/**
-	 * Set the grid gap, in pixels
-	 * @type {"narrow"|"medium"|"wide"|"none"}
-	 */
-	export let gridGap = "medium";
-
-	setContext("width", width);
-	setContext("colWidth", colWidth);
-	setContext("rowHeight", rowHeight);
-	setContext("gridGap", gridGap);
-</script>
-
-<Container {id} {cls} {width} {marginTop} {marginBottom}>
-	{#if title}
-		<h2 class="section-title" class:ons-u-vh={hideTitle}>{title}</h2>
-	{/if}
-	{#if caption}
-		<figure class="ons-svelte-grid-container">
-			<div
-				class="ons-grid ons-grid--spaced"
-				class:ons-grid--gutterless={gridGap === "none"}
-				class:ons-grid--tight={gridGap === "narrow"}
-				class:ons-grid--loose={gridGap === "wide"}
-				class:ons-grid--stretch={rowStretch}
-			>
-				<slot />
-			</div>
-			<figcaption class="ons-image__caption">{caption}</figcaption>
-		</figure>
-	{:else}
-		<div
-			class="ons-grid ons-grid--spaced"
-			class:ons-grid--gutterless={gridGap === "none"}
-			class:ons-grid--tight={gridGap === "narrow"}
-			class:ons-grid--loose={gridGap === "wide"}
-			class:ons-grid--stretch={rowStretch}
-		>
-			<slot />
-		</div>
-	{/if}
-</Container>
-
-<style>
-	/* This removes the default margins of the <figure> element */
-	.ons-svelte-grid-container {
-		margin: 0;
-	}
-	/* This is to allow this flex property without ons-grid--flex which breaks other things */
-	.ons-grid--stretch {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: stretch;
-	}
-	/* This allows the grid to be used as a media container without any columns */
-	.ons-grid > :global(*:not(.ons-grid__col)) {
-		margin-left: 1rem;
-	}
-</style>
+<script>
+	import { setContext } from "svelte";
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * Optional: Sets the unique ID of the section
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+	/**
+	 * Sets the width of the section
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
+	/**
+	 * Sets the title of the section
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Allows the h2 title tag for the section to be visually hidden
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Optional: Caption for the grid (if used as a media container, eg. for an image)
+	 * @type {string|null}
+	 */
+	export let caption = null;
+	/**
+	 * Adds margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Adds margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = true;
+	/**
+	 * Sets the width of the columns
+	 * @type {"narrow"|"medium"|"wide"|"full"}
+	 */
+	export let colWidth = "medium";
+	/**
+	 * Set the minimum height of a grid row (can be a number in pixels, or a valid CSS height)
+	 * @type {number|string|null}
+	 */
+	export let rowHeight = null;
+	/**
+	 * Stretch the height of grid cells to match their  siblings
+	 * @type {boolean}
+	 */
+	export let rowStretch = true;
+	/**
+	 * Set the grid gap, in pixels
+	 * @type {"narrow"|"medium"|"wide"|"none"}
+	 */
+	export let gridGap = "medium";
+
+	setContext("width", width);
+	setContext("colWidth", colWidth);
+	setContext("rowHeight", rowHeight);
+	setContext("gridGap", gridGap);
+</script>
+
+<Container {id} {cls} {width} {marginTop} {marginBottom}>
+	{#if title}
+		<h2 class="section-title" class:ons-u-vh={hideTitle}>{title}</h2>
+	{/if}
+	{#if caption}
+		<figure class="ons-svelte-grid-container">
+			<div
+				class="ons-grid ons-grid--spaced"
+				class:ons-grid--gutterless={gridGap === "none"}
+				class:ons-grid--tight={gridGap === "narrow"}
+				class:ons-grid--loose={gridGap === "wide"}
+				class:ons-grid--stretch={rowStretch}
+			>
+				<slot />
+			</div>
+			<figcaption class="ons-image__caption">{caption}</figcaption>
+		</figure>
+	{:else}
+		<div
+			class="ons-grid ons-grid--spaced"
+			class:ons-grid--gutterless={gridGap === "none"}
+			class:ons-grid--tight={gridGap === "narrow"}
+			class:ons-grid--loose={gridGap === "wide"}
+			class:ons-grid--stretch={rowStretch}
+		>
+			<slot />
+		</div>
+	{/if}
+</Container>
+
+<style>
+	/* This removes the default margins of the <figure> element */
+	.ons-svelte-grid-container {
+		margin: 0;
+	}
+	/* This is to allow this flex property without ons-grid--flex which breaks other things */
+	.ons-grid--stretch {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: stretch;
+	}
+	/* This allows the grid to be used as a media container without any columns */
+	.ons-grid > :global(*:not(.ons-grid__col)) {
+		margin-left: 1rem;
+	}
+</style>

package/dist/layout/Grid/GridCell.svelte

@@ -1,65 +1,65 @@
-<script>
-	import { getContext } from "svelte";
-
-	/**
-	 * (If used in grid) How many columns the card should span across
-	 * @type {number}
-	 */
-	export let colspan = 1;
-
-	const classes = {
-		narrow: {
-			narrow: ["6@xs", "4@l"],
-			medium: ["6@l"],
-			wide: []
-		},
-		medium: {
-			narrow: ["6@xs", "4@m", "3@l"],
-			medium: ["6@m"],
-			wide: ["6@xl"]
-		},
-		wide: {
-			narrow: ["6@xs", "3@m"],
-			medium: ["6@m", "4@l"],
-			wide: ["6@l"]
-		},
-		wider: {
-			narrow: ["6@xs", "3@m", "2@xl"],
-			medium: ["6@m", "4@l", "3@xl"],
-			wide: ["6@l", "4@xl"]
-		},
-		full: {
-			narrow: ["6@xs", "3@m", "2@xl"],
-			medium: ["6@m", "4@l", "3@xl"],
-			wide: ["6@l", "4@xl", "3@xxl"]
-		}
-	};
-
-	function calcSpans(cls, colspan) {
-		if (colspan === 1 || !Number.isInteger(colspan)) return cls;
-		return cls
-			.map((c) => [+c.slice(0, 1) * colspan, c.slice(1)])
-			.filter((c) => c[0] < 12)
-			.map((c) => `${c[0]}${c[1]}`);
-	}
-
-	const width = getContext("width") || "wide";
-	const colWidth = getContext("colWidth") || null;
-	const rowHeight = getContext("rowHeight") || null;
-	const colClass = colWidth
-		? calcSpans(classes?.[width]?.[colWidth] || [], colspan)
-				.map((c) => `ons-col-${c}`)
-				.join(" ")
-		: "";
-</script>
-
-{#if colWidth}
-	<div
-		class="ons-grid__col {colClass}"
-		style:height={typeof rowHeight === "number" ? `${rowHeight}px` : rowHeight}
-	>
-		<slot />
-	</div>
-{:else}
-	<slot />
-{/if}
+<script>
+	import { getContext } from "svelte";
+
+	/**
+	 * (If used in grid) How many columns the card should span across
+	 * @type {number}
+	 */
+	export let colspan = 1;
+
+	const classes = {
+		narrow: {
+			narrow: ["6@xs", "4@l"],
+			medium: ["6@l"],
+			wide: []
+		},
+		medium: {
+			narrow: ["6@xs", "4@m", "3@l"],
+			medium: ["6@m"],
+			wide: ["6@xl"]
+		},
+		wide: {
+			narrow: ["6@xs", "3@m"],
+			medium: ["6@m", "4@l"],
+			wide: ["6@l"]
+		},
+		wider: {
+			narrow: ["6@xs", "3@m", "2@xl"],
+			medium: ["6@m", "4@l", "3@xl"],
+			wide: ["6@l", "4@xl"]
+		},
+		full: {
+			narrow: ["6@xs", "3@m", "2@xl"],
+			medium: ["6@m", "4@l", "3@xl"],
+			wide: ["6@l", "4@xl", "3@xxl"]
+		}
+	};
+
+	function calcSpans(cls, colspan) {
+		if (colspan === 1 || !Number.isInteger(colspan)) return cls;
+		return cls
+			.map((c) => [+c.slice(0, 1) * colspan, c.slice(1)])
+			.filter((c) => c[0] < 12)
+			.map((c) => `${c[0]}${c[1]}`);
+	}
+
+	const width = getContext("width") || "wide";
+	const colWidth = getContext("colWidth") || null;
+	const rowHeight = getContext("rowHeight") || null;
+	const colClass = colWidth
+		? calcSpans(classes?.[width]?.[colWidth] || [], colspan)
+				.map((c) => `ons-col-${c}`)
+				.join(" ")
+		: "";
+</script>
+
+{#if colWidth}
+	<div
+		class="ons-grid__col {colClass}"
+		style:height={typeof rowHeight === "number" ? `${rowHeight}px` : rowHeight}
+	>
+		<slot />
+	</div>
+{:else}
+	<slot />
+{/if}

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

@@ -1,14 +1,14 @@
-A media grid component, useful for images and small multiple charts. Setting `colwidth` to **full** allows for a single cell/image/chart with an optional caption.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Grid, GridCell } from "@onsvisual/svelte-components";
-</script>
-
-<Grid>
-  <GridCell>{grid_cell_content}</GridCell>
-  <GridCell>{grid_cell_content}</GridCell>
-  <GridCell>{grid_cell_content}</GridCell>
-</Grid>
-```
+A media grid component, useful for images and small multiple charts. Setting `colwidth` to **full** allows for a single cell/image/chart with an optional caption.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Grid, GridCell } from "@onsvisual/svelte-components";
+</script>
+
+<Grid>
+  <GridCell>{grid_cell_content}</GridCell>
+  <GridCell>{grid_cell_content}</GridCell>
+  <GridCell>{grid_cell_content}</GridCell>
+</Grid>
+```

package/dist/layout/Header/Header.stories.svelte

@@ -1,26 +1,26 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import Header from "./Header.svelte";
-	import componentDocs from "./docs/component.md?raw";
-
-	const { Story } = defineMeta({
-		title: "Layout/Header",
-		component: Header,
-		tags: ["autodocs"],
-		argTypes: {
-			theme: {
-				control: { type: "select" }
-			}
-		},
-		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
-	});
-</script>
-
-<Story name="Default" args={{}} />
-
-<Story name="Compact" args={{ compact: true }} />
-
-<Story name="Compact with page title" args={{ compact: true, title: "Page title" }} />
-
-<Story name="Compact dark theme" args={{ compact: true, title: "Page title", theme: "dark" }} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Header from "./Header.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Header",
+		component: Header,
+		tags: ["autodocs"],
+		argTypes: {
+			theme: {
+				control: { type: "select" }
+			}
+		},
+		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story name="Compact" args={{ compact: true }} />
+
+<Story name="Compact with page title" args={{ compact: true, title: "Page title" }} />
+
+<Story name="Compact dark theme" args={{ compact: true, title: "Page title", theme: "dark" }} />