@onsvisual/svelte-components 0.1.104 → 1.0.0-next.1

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  FooterProps */
+/** @typedef {typeof __propDef.events}  FooterEvents */
+/** @typedef {typeof __propDef.slots}  FooterSlots */
+export default class Footer extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
+    compact?: boolean | undefined;
+    themeOverrides?: object | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FooterProps = typeof __propDef.props;
+export type FooterEvents = typeof __propDef.events;
+export type FooterSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
+        compact?: boolean | undefined;
+        themeOverrides?: object | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

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

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

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

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

package/dist/layout/Grid/Grid.svelte

@@ -1,167 +1,117 @@
 <script>
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-  import Container from "../../wrappers/Container/Container.svelte";
+	import { setContext } from "svelte";
+	import Container from "../../wrappers/Container/Container.svelte";
 
-  /**
-   * (Optional) Sets the unique ID of the section
-   * @type {string}
-   */
-  export let id = null;
-  /**
-   * (Optional) Sets a css class for the component
-   * @type {string}
-   */
-  export let cls = null;
-  /**
-   * Sets the width of the section
-   * @type {"narrow"|"medium"|"wide"|"full"}
-   */
-  export let width = "medium";
-  /**
-   * Sets the title of the section
-   * @type {string}
-   */
-  export let title = "";
-  /**
-   * Allows the h2 title tag for the section to be visually hidden
-   * @type {boolean}
-   */
-  export let hideTitle = false;
-  /**
-   * Sets a predefined theme
-   * @type {"light"|"dark"|"lightblue"}
-   */
-  export let theme = null;
-  /**
-   * Define additional props to override the base theme
-   * @type {object}
-   */
-  export let themeOverrides = null;
-  /**
-   * Allows client imported CSS for embeddable content
-   * @type {boolean}
-   */
-  export let allowClientOverrides = false;
-  /**
-   * Optional margin above section
-   * @type {boolean}
-   */
-  export let marginTop = false;
-  /**
-   * Optional margin below section
-   * @type {boolean}
-   */
-  export let marginBottom = true;
-  /**
-   * Sets the width of the section
-   * @type {"narrow"|"medium"|"wide"|"full"}
-   */
-  export let colwidth = "medium"; // narrow | medium | wide | full
-  /**
-   * (Optional) caption below the grid
-   * @type {string}
-   */
-  export let caption = "";
-  /**
-   * Set the minimum height of a grid row (can be a number in pixels, or a valid CSS height, like "100vh")
-   * @type {number|string}
-   */
-  export let height = 200; // pixel height or "full" for 100vh
-  /**
-   * Set the grid gap, in pixels
-   * @type {number}
-   */
-  export let gap = 12;
+	/**
+	 * Optional: Sets the unique ID of the section
+	 * @type {string}
+	 */
+	export let id = "";
+	/**
+	 * Optional: Set a CSS class for the component
+	 * @type {string}
+	 */
+	export let cls = "";
+	/**
+	 * Sets the width of the section
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
+	/**
+	 * Sets the title of the section
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * 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}
+	 */
+	export let caption = "";
+	/**
+	 * Optional margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Optional 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";
 
-  let gridClass = !colwidth || colwidth === "full" ? "" : `grid-${colwidth}`;
-  let rowHeight = height === "full" ? "100vh" : typeof height === "number" ? height + "px" : height;
-  let gridGap = typeof gap === "number" ? gap + "px" : gap;
-
-  const defs = {
-    narrow: { w: 180, c: 4 },
-    medium: { w: 280, c: 3 },
-    wide: { w: 400, c: 2 },
-    full: { w: "100%", c: 1 },
-  };
-
-  let w;
-
-  const cols = writable(defs[colwidth].c);
-
-  $: columns =
-    colwidth == "full"
-      ? 1
-      : w
-      ? Math.floor((w + gap) / (defs[colwidth].w + gap))
-      : defs[colwidth].c;
-  $: cols.set(columns);
-
-  setContext("cols", cols);
+	setContext("width", width);
+	setContext("colWidth", colWidth);
+	setContext("rowHeight", rowHeight);
+	setContext("gridGap", gridGap);
 </script>
 
-<figure aria-label="{caption}">
-  <Container
-    id="{id}"
-    cls="{cls}"
-    theme="{theme}"
-    themeOverrides="{themeOverrides}"
-    allowClientOverrides="{allowClientOverrides}"
-    width="{width}"
-    height="{['tall', 'full'].includes(height) ? height : 'auto'}"
-    marginTop="{marginTop}"
-    marginBottom="{!caption ? marginBottom : false}"
-  >
-    {#if title}
-      <h2 class="section-title" class:ons-u-vh="{hideTitle}">{title}</h2>
-    {/if}
-    <div
-      class="grid {gridClass}"
-      style:grid-gap="{gridGap}"
-      style:min-height="{rowHeight}"
-      bind:clientWidth="{w}"
-    >
-      <slot />
-    </div>
-  </Container>
-  {#if caption}
-    <figcaption>
-      <Container
-        cls="{cls}"
-        theme="{theme}"
-        themeOverrides="{themeOverrides}"
-        allowClientOverrides="{allowClientOverrides}"
-        width="narrow"
-        marginBottom="{marginBottom}"
-      >
-        <span class="ons-figure__caption">{@html caption}</span>
-      </Container>
-    </figcaption>
-  {/if}
-</figure>
+<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>
-  figure,
-  figcaption {
-    display: block;
-    margin: 0;
-    padding: 0;
-  }
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, 100%);
-    width: 100%;
-    margin: 0;
-  }
-  .grid-narrow {
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
-  }
-  .grid-medium {
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
-  }
-  .grid-wide {
-    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)) !important;
-  }
-  :global(.grid > div) {
-    min-height: inherit;
-  }</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/Grid.svelte.d.ts

@@ -0,0 +1,49 @@
+/** @typedef {typeof __propDef.props}  GridProps */
+/** @typedef {typeof __propDef.events}  GridEvents */
+/** @typedef {typeof __propDef.slots}  GridSlots */
+export default class Grid extends SvelteComponentTyped<{
+    id?: string | undefined;
+    cls?: string | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    marginTop?: boolean | undefined;
+    marginBottom?: boolean | undefined;
+    caption?: string | undefined;
+    title?: string | undefined;
+    colWidth?: "narrow" | "medium" | "wide" | "full" | undefined;
+    rowHeight?: string | number | null | undefined;
+    hideTitle?: boolean | undefined;
+    gridGap?: "narrow" | "medium" | "wide" | "none" | undefined;
+    rowStretch?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridProps = typeof __propDef.props;
+export type GridEvents = typeof __propDef.events;
+export type GridSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        cls?: string | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        marginTop?: boolean | undefined;
+        marginBottom?: boolean | undefined;
+        caption?: string | undefined;
+        title?: string | undefined;
+        colWidth?: "narrow" | "medium" | "wide" | "full" | undefined;
+        rowHeight?: string | number | null | undefined;
+        hideTitle?: boolean | undefined;
+        gridGap?: "narrow" | "medium" | "wide" | "none" | undefined;
+        rowStretch?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/layout/Grid/GridCell.svelte

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

package/dist/layout/Grid/GridCell.svelte.d.ts

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

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

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

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

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

package/dist/{@types/layout/Header/Header.svelte.d.ts → layout/Header/Header.stories.svelte.d.ts}

@@ -2,18 +2,10 @@
 /** @typedef {typeof __propDef.events}  HeaderEvents */
 /** @typedef {typeof __propDef.slots}  HeaderSlots */
 export default class Header extends SvelteComponentTyped<{
-    theme?: "light" | "dark";
-    themeOverrides?: any;
-    title?: string;
-    compact?: boolean;
-    titleHref?: string;
-    bilingual?: boolean;
-    skipLinkEnabled?: boolean;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {
-    before: {};
-}> {
+}, {}> {
 }
 export type HeaderProps = typeof __propDef.props;
 export type HeaderEvents = typeof __propDef.events;
@@ -21,19 +13,11 @@ export type HeaderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark";
-        themeOverrides?: object;
-        title?: string;
-        compact?: boolean;
-        titleHref?: string;
-        bilingual?: boolean;
-        skipLinkEnabled?: boolean;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        before: {};
-    };
+    slots: {};
 };
 export {};