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

package/dist/layout/BackLink/BackLink.stories.svelte

@@ -0,0 +1,16 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import BackLink from "./BackLink.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/BackLink",
+		component: BackLink,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{}} />

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

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

package/dist/layout/BackLink/BackLink.svelte

@@ -0,0 +1,30 @@
+<script>
+	/**
+	 * Href for top of page or contents section
+	 * @type {string}
+	 */
+	export let href = "#top";
+	/**
+	 * Optional: Add a CSS class to the link
+	 * @type {string}
+	 */
+	export let cls = "";
+</script>
+
+<div class="ons-back-to-top ons-js-back-to-top ons-back-to-top__enabled ons-u-mb-l {cls || ''}">
+	<a {href} class="ons-back-to-top__link">
+		<span
+			><svg
+				class="ons-icon ons-icon--xs"
+				viewBox="0 0 13 20"
+				xmlns="http://www.w3.org/2000/svg"
+				focusable="false"
+				fill="currentColor"
+				role="img"
+				title="ons-icon-arrow-up"
+			>
+				<path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+			</svg><span class="ons-back-to-top__description">Back to top</span>
+		</span>
+	</a>
+</div>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  BackLinkProps */
+/** @typedef {typeof __propDef.events}  BackLinkEvents */
+/** @typedef {typeof __propDef.slots}  BackLinkSlots */
+export default class BackLink extends SvelteComponentTyped<{
+    cls?: string | undefined;
+    href?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type BackLinkProps = typeof __propDef.props;
+export type BackLinkEvents = typeof __propDef.events;
+export type BackLinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        cls?: string | undefined;
+        href?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,12 @@
+Link that can be used to return to the top of a page, or to a table of contents.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/back-to-top).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { BackLink } from "@onsvisual/svelte-components";
+</script>
+
+<BackLink href="#top" />
+```

package/dist/layout/Breadcrumb/Breadcrumb.stories.svelte

@@ -0,0 +1,31 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Breadcrumb from "./Breadcrumb.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Breadcrumb",
+		component: Breadcrumb,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		links: [
+			{ label: "Home", href: "/" },
+			{ label: "Parent page", href: "/parent" }
+		]
+	}}
+/>
+
+<Story
+	name="Single back link"
+	args={{
+		href: "/"
+	}}
+/>

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

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

package/dist/layout/Breadcrumb/Breadcrumb.svelte

@@ -1,72 +1,49 @@
 <script>
-  import Container from "../../wrappers/Container/Container.svelte";
+	import Container from "../../wrappers/Container/Container.svelte";
 
-  /**
-   * An array of links in the format {label, href}
-   * @type {array}
-   */
-  export let links = [];
-  /**
-   * Sets the width of the container
-   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-   */
-  export let width = "wide";
-  /**
-   * 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;
-  /**
-   * Overrides the background CSS for the section
-   * @type {string}
-   */
-  export let background = null;
-  /**
-   * Allows client imported CSS for embeddable content
-   * @type {boolean}
-   */
-  export let allowClientOverrides = false;
+	/**
+	 * An array of links in the format {label, href}
+	 * @type {object[]}
+	 */
+	export let links = [];
+	/**
+	 * Optional: Link href if component is used for a single back-link
+	 * @type {string}
+	 */
+	export let backHref = "";
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
 </script>
 
-<Container
-  theme="{theme}"
-  themeOverrides="{themeOverrides}"
-  allowClientOverrides="{allowClientOverrides}"
-  width="{width}"
-  background="{background}"
->
-  <nav class="ons-breadcrumb print--hide" aria-label="Breadcrumbs">
-    <ol class="ons-breadcrumb__items ons-u-fs-s">
-      {#each links as link}
-        <li class="ons-breadcrumb__item ons-u-p-no">
-          {#if link.href}
-            <a class="ons-breadcrumb__link" href="{link.href}">{link.label}</a>
-          {:else}
-            {link.label}
-          {/if}
-          <svg
-            class="ons-svg-icon"
-            viewBox="0 0 8 13"
-            xmlns="http://www.w3.org/2000/svg"
-            focusable="false"
-          >
-            <path
-              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"
-              transform="translate(-5.02 -1.59)"></path>
-          </svg>
-        </li>
-      {/each}
-    </ol>
-  </nav>
+<Container {width}>
+	<nav class="ons-breadcrumbs" aria-label="Breadcrumbs">
+		<ol class="ons-breadcrumbs__items ons-u-fs-s">
+			{#each backHref ? [{ label: "Back", href: backHref }] : links as link}
+				<li class="ons-breadcrumbs__item">
+					{#if link.href}
+						<a class="ons-breadcrumbs__link" href={link.href}>{link.label}</a>
+					{:else}
+						{link.label}
+					{/if}
+					<svg
+						class="ons-icon"
+						viewBox="0 0 8 13"
+						xmlns="http://www.w3.org/2000/svg"
+						focusable="false"
+						fill="currentColor"
+						role="img"
+						title="ons-icon-chevron"
+					>
+						<path
+							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"
+							transform="translate(-5.02 -1.59)"
+						/>
+					</svg>
+				</li>
+			{/each}
+		</ol>
+	</nav>
 </Container>
-
-<style>
-  .ons-svg-icon {
-    color: currentColor;
-    fill: currentColor;
-  }</style>

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

@@ -2,12 +2,9 @@
 /** @typedef {typeof __propDef.events}  BreadcrumbEvents */
 /** @typedef {typeof __propDef.slots}  BreadcrumbSlots */
 export default class Breadcrumb extends SvelteComponentTyped<{
-    theme?: "light" | "dark" | "lightblue";
-    background?: string;
-    allowClientOverrides?: boolean;
-    width?: "narrow" | "medium" | "wide" | "wider" | "full";
-    themeOverrides?: any;
-    links?: any[];
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    links?: object[] | undefined;
+    backHref?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -18,12 +15,9 @@ export type BreadcrumbSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark" | "lightblue";
-        background?: string;
-        allowClientOverrides?: boolean;
-        width?: "narrow" | "medium" | "wide" | "wider" | "full";
-        themeOverrides?: object;
-        links?: any[];
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        links?: object[] | undefined;
+        backHref?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,15 @@
+Displays a breadcrumb with the current page's parents.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/breadcrumbs).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Breadcrumb } from "@onsvisual/svelte-components";
+</script>
+
+<Breadcrumb links="{[
+  {label: 'Home', href: '/'},
+  {label: 'Parent page', href: '/parent'}
+]}" />
+```

package/dist/layout/Card/Card.stories.svelte

@@ -0,0 +1,39 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import { lipsum } from "../../js/utils.js";
+	import Card from "./Card.svelte";
+	import Grid from "../Grid/Grid.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Card",
+		component: Card,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Grid>
+		<Card title="Card one" {...args}>{lipsum(1)}</Card>
+		<Card title="Card two" {...args}>{lipsum(1, 1)}</Card>
+		<Card title="Card three" {...args}>{lipsum(1, 2)}</Card>
+	</Grid>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="Cards with links" args={{ href: "#0" }} {template} />
+
+<Story name="Featured cards" args={{ mode: "featured" }} {template} />
+
+<Story
+	name="Featured cards with image"
+	args={{
+		mode: "featured",
+		image: "https://service-manual.ons.gov.uk/img/small/placeholder-card.png"
+	}}
+	{template}
+/>

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

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

package/dist/layout/Card/Card.svelte

@@ -0,0 +1,120 @@
+<script>
+	import GridCell from "../Grid/GridCell.svelte";
+
+	/**
+	 * Sets the unique ID of the section
+	 * @type {string}
+	 */
+	export let id = "";
+	/**
+	 * Optional: Set a CSS class for the section
+	 * @type {string}
+	 */
+	export let cls = "";
+	/**
+	 * Sets the title of the card
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Allows the h2 title tag for the card to be visually hidden
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Set the heading level for the card titles
+	 * @type {"h2"|"h3"}
+	 */
+	export let headingTag = "h2";
+	/**
+	 * Setting mode to "featured" creates an inset card on a grey background
+	 * @type {"default"|"featured"}
+	 */
+	export let mode = "default";
+	/**
+	 * Optional: URL for title/image link
+	 * @type {string}
+	 */
+	export let href = "";
+	/**
+	 * Optional: URL for image
+	 * @type {string}
+	 */
+	export let image = "";
+	/**
+	 * Optional: Alt text for image
+	 * @type {string}
+	 */
+	export let imageAlt = "";
+	/**
+	 * (If used in grid) How many columns the card should span across
+	 * @type {number}
+	 */
+	export let colspan = 1;
+</script>
+
+<GridCell {colspan}>
+	<div
+		class="ons-card ons-u-mb-no {cls}"
+		class:ons-card--feature={mode === "featured"}
+		class:ons-u-p-l={mode === "featured"}
+	>
+		{#if href}
+			<a href="#0" class="ons-card__link">
+				<slot name="image">
+					{#if image}
+						<img
+							class="ons-card__image ons-u-mb-s"
+							class:ons-card__image-expand={mode === "featured"}
+							src={image}
+							alt={imageAlt}
+							loading="lazy"
+						/>
+					{/if}
+				</slot>
+				<slot name="title">
+					{#if title && headingTag === "h3"}
+						<h3 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h3>
+					{:else if title}
+						<h2 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h2>
+					{/if}
+				</slot>
+			</a>
+		{:else}
+			{#if image}
+				<img
+					class="ons-card__image ons-u-mb-s"
+					class:ons-card__image-expand={mode === "featured"}
+					src={image}
+					alt={imageAlt}
+					loading="lazy"
+				/>
+			{/if}
+			{#if title && headingTag === "h3"}
+				<h3 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h3>
+			{:else if title}
+				<h2 {id} class="ons-card__title ons-u-fs-m" class:ons-u-vh={hideTitle}>{title}</h2>
+			{/if}
+		{/if}
+		<p id="text1">
+			<slot />
+		</p>
+	</div>
+</GridCell>
+
+<style>
+	.ons-card {
+		height: 100%;
+	}
+	.ons-card__image {
+		width: 100%;
+	}
+	.ons-card__image-expand {
+		margin: -1.5rem -1.5rem 0;
+		width: calc(100% + 3rem);
+		max-width: calc(100% + 3rem);
+	}
+	.ons-card > :global(p:last-of-type) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -0,0 +1,49 @@
+/** @typedef {typeof __propDef.props}  CardProps */
+/** @typedef {typeof __propDef.events}  CardEvents */
+/** @typedef {typeof __propDef.slots}  CardSlots */
+export default class Card extends SvelteComponentTyped<{
+    id?: string | undefined;
+    cls?: string | undefined;
+    title?: string | undefined;
+    image?: string | undefined;
+    headingTag?: "h2" | "h3" | undefined;
+    href?: string | undefined;
+    colspan?: number | undefined;
+    hideTitle?: boolean | undefined;
+    mode?: "default" | "featured" | undefined;
+    imageAlt?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    image: {};
+    title: {};
+    default: {};
+}> {
+}
+export type CardProps = typeof __propDef.props;
+export type CardEvents = typeof __propDef.events;
+export type CardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        cls?: string | undefined;
+        title?: string | undefined;
+        image?: string | undefined;
+        headingTag?: "h2" | "h3" | undefined;
+        href?: string | undefined;
+        colspan?: number | undefined;
+        hideTitle?: boolean | undefined;
+        mode?: "default" | "featured" | undefined;
+        imageAlt?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        image: {};
+        title: {};
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,14 @@
+Display content and links as cards. Can be used in combination with the `<Grid>` component to combine multiple cards.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Grid, Card } from "@onsvisual/svelte-components";
+</script>
+
+<Grid>
+  <Card title="Card one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card two">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card three">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+</Grid>
+```

package/dist/layout/Card/docs/eg-images.md

@@ -0,0 +1,27 @@
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Cards, Card } from "@onsvisual/svelte-components";
+</script>
+
+<Cards>
+  <Card
+    title="Card one"
+    href="#"
+    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Card>
+  <Card
+    title="Card two"
+    href="#"
+    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Card>
+  <Card
+    title="Card three"
+    href="#"
+    image="https://service-manual.ons.gov.uk/img/small/placeholder-card.png">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  </Card>
+</Cards>
+```

package/dist/layout/Card/docs/eg-links.md

@@ -0,0 +1,12 @@
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Cards, Card } from "@onsvisual/svelte-components";
+</script>
+
+<Cards>
+  <Card title="Card one" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card two" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card three" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+</Cards>
+```

package/dist/layout/Card/docs/eg-spans.md

@@ -0,0 +1,12 @@
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Cards, Card } from "@onsvisual/svelte-components";
+</script>
+
+<Cards>
+  <Card title="Card one" rowspan={2}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card two" colspan={2}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+  <Card title="Card three">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Card>
+</Cards>
+```

package/dist/layout/Contents/Contents.stories.svelte

@@ -0,0 +1,27 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Contents from "./Contents.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Contents",
+		component: Contents,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		links: [
+			{ label: "Overview" },
+			{ label: "Who should take part and why", href: "#0" },
+			{ label: "How your information is used", href: "#0" },
+			{ label: "The 2019 Census Rehearsal", href: "#0" },
+			{ label: "Online census", href: "#0" }
+		]
+	}}
+/>