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

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

@@ -2,10 +2,7 @@
 /** @typedef {typeof __propDef.events}  ContentsEvents */
 /** @typedef {typeof __propDef.slots}  ContentsSlots */
 export default class Contents extends SvelteComponentTyped<{
-    title?: string;
-    links?: any[];
-    hideTitle?: boolean;
-    skipHref?: string;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -16,10 +13,7 @@ export type ContentsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title?: string;
-        links?: any[];
-        hideTitle?: boolean;
-        skipHref?: string;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/Contents/Contents.svelte

@@ -1,44 +1,46 @@
 <script>
-  /**
-   * Sets the title of the contents block
-   * @type {string}
-   */
-  export let title = "Contents";
-  /**
-   * Visually hides the title of the block
-   * @type {boolean}
-   */
-  export let hideTitle = false;
-  /**
-   * An array of links for the contentents block in the form {label, href?}. Excluding href renders an item as plain text.
-   * @type {array}
-   */
-  export let links = [];
-  /**
-   * An anchor link URL to the main content of the page (to skip contents)
-   * @type {string}
-   */
-  export let skipHref = "";
+	/**
+	 * Sets the title of the contents block
+	 * @type {string}
+	 */
+	export let title = "Contents";
+	/**
+	 * Visually hides the title of the block
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * An array of links for the contentents block in the form {label, href?}. Excluding href renders an item as plain text and marks it as the current section for screenreaders.
+	 * @type {object[]}
+	 */
+	export let links = [];
+	/**
+	 * An anchor link URL to the main content of the page (to skip contents)
+	 * @type {string}
+	 */
+	export let skipHref = "";
 </script>
 
-<aside class="ons-toc-container" role="complementary">
-  {#if skipHref}
-    <a class="ons-skip-link" href="{skipHref}">Skip to content</a>
-  {/if}
-  <nav class="ons-toc" aria-label="{title}">
-    {#if title}
-      <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s" class:ons-u-vh="{hideTitle}">{title}</h2>
-    {/if}
-    <ol class="ons-list ons-u-mb-m ons-list--dashed">
-      {#each links as link}
-        {#if link.href}
-          <li class="ons-list__item">
-            <a href="{link.href}" class="ons-list__link">{link.label}</a>
-          </li>
-        {:else}
-          <li class="ons-list__item" aria-current="true">{link.label}</li>
-        {/if}
-      {/each}
-    </ol>
-  </nav>
+<aside class="ons-table-of-contents-container" role="complementary">
+	{#if skipHref}
+		<a class="ons-skip-to-content" href="#0">Skip to guide content</a>
+	{/if}
+	<nav class="ons-table-of-contents" aria-label="Pages in this guide">
+		{#if title}
+			<h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s" class:ons-u-vh={hideTitle}>
+				{title}
+			</h2>
+		{/if}
+		<ol class="ons-list ons-u-mb-l ons-list--dashed">
+			{#each links as link}
+				{#if link.href}
+					<li class="ons-list__item">
+						<a href={link.href} class="ons-list__link">{link.label}</a>
+					</li>
+				{:else}
+					<li class="ons-list__item" aria-current="true">{link.label}</li>
+				{/if}
+			{/each}
+		</ol>
+	</nav>
 </aside>

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  ContentsProps */
+/** @typedef {typeof __propDef.events}  ContentsEvents */
+/** @typedef {typeof __propDef.slots}  ContentsSlots */
+export default class Contents extends SvelteComponentTyped<{
+    title?: string | undefined;
+    links?: object[] | undefined;
+    hideTitle?: boolean | undefined;
+    skipHref?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ContentsProps = typeof __propDef.props;
+export type ContentsEvents = typeof __propDef.events;
+export type ContentsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        links?: object[] | undefined;
+        hideTitle?: boolean | undefined;
+        skipHref?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,18 @@
+Displays a table of contents based on an array of links. Can be used for in-page navigation, or for navigation between sibling pages.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/table-of-contents).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Contents } from "@onsvisual/svelte-components";
+</script>
+
+<Contents 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' },
+]}" />
+```

package/dist/layout/DescriptionList/DescriptionList.stories.svelte

@@ -0,0 +1,22 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import DescriptionList from "./DescriptionList.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const items = [
+		{ key: "Survey", value: "Bricks & Blocks" },
+		{ key: "RU Refs", value: [49900000118, 49300005832] },
+		{ key: "To", value: "<a href='mailto:'>A Person</a>" }
+	];
+
+	const { Story } = defineMeta({
+		title: "Layout/DescriptionList",
+		component: DescriptionList,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{ items }} />

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

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

package/dist/layout/DescriptionList/DescriptionList.svelte

@@ -0,0 +1,48 @@
+<script>
+	/**
+	 * Sets the title of the list (for screen readers)
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Array of items in format {key, value} where "value" may be an array of multiple values
+	 * @type {object[]}
+	 */
+	export let items = [];
+	/**
+	 * Option to change layout to "inline", eg. for title blocks
+	 * @type {"default"|"inline"}
+	 */
+	export let mode = "default";
+</script>
+
+<dl
+	class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-mb-no {mode ===
+	'inline'
+		? 'ons-u-mt-s ons-u-mt-l@l'
+		: 'ons-u-cf'}"
+	class:ons-description-list--inline={mode === "inline"}
+	{title}
+	aria-label={title}
+>
+	{#each items as item}
+		<div class="ons-description-list__item">
+			<dt
+				class="ons-description-list__term ons-grid__col {mode === 'inline'
+					? 'ons-col-5@xs@l'
+					: 'ons-col-2@m'}"
+			>
+				{item.key}:
+			</dt>
+			{#each [item.value].flat() as value}
+				<dd
+					class="ons-description-list__value ons-grid__col {mode === 'inline'
+						? 'ons-col-7@xs@l'
+						: 'ons-col-10@m'}"
+				>
+					{@html value}
+				</dd>
+			{/each}
+		</div>
+	{/each}
+</dl>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  DescriptionListProps */
+/** @typedef {typeof __propDef.events}  DescriptionListEvents */
+/** @typedef {typeof __propDef.slots}  DescriptionListSlots */
+export default class DescriptionList extends SvelteComponentTyped<{
+    title?: string | undefined;
+    mode?: "default" | "inline" | undefined;
+    items?: object[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DescriptionListProps = typeof __propDef.props;
+export type DescriptionListEvents = typeof __propDef.events;
+export type DescriptionListSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        mode?: "default" | "inline" | undefined;
+        items?: object[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,18 @@
+A component to display metadata in a tabular format.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/description-list).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DescriptionList } from "@onsvisual/svelte-components";
+  
+  const items = [
+    { key: "Survey", value: "Bricks & Blocks" },
+    { key: "RU Refs", value: [49900000118, 49300005832]},
+    { key: "To", value: "<a href='mailto:'>A Person</a>"}
+  ];
+</script>
+
+<DescriptionList {items}/>
+```

package/dist/layout/Details/Details.stories.svelte

@@ -0,0 +1,32 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Details from "./Details.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Details",
+		component: Details,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Details {...args}>
+		<p>{@html args.content || ""}</p>
+	</Details>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{ title: "Title of twisty", content: "Contents of twisty." }}
+	{template}
+/>
+
+<Story
+	name="Open by default"
+	args={{ title: "Title of twisty", content: "Contents of twisty.", open: true }}
+	{template}
+/>

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

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

package/dist/layout/Details/Details.svelte

@@ -0,0 +1,70 @@
+<script>
+	import { createEventDispatcher } from "svelte";
+
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * A title for the element
+	 * @type {string}
+	 */
+	export let title = "Title";
+	/**
+	 * Set the heading level for the title
+	 * @type {"h2"|"h3"}
+	 */
+	export let headingTag = "h2";
+	/**
+	 * Option for element to be open/expanded by default
+	 * @type {boolean}
+	 */
+	export let open = false;
+
+	function doToggle(e) {
+		dispatch("toggle", { open: e.newState === "open", e });
+	}
+</script>
+
+<details
+	class="ons-details ons-js-details ons-details--initialised"
+	class:ons-details--open={open}
+	bind:open
+	on:toggle={doToggle}
+>
+	<summary
+		class="ons-details__heading ons-js-details-heading"
+		aria-expanded={open}
+		data-ga-action={open ? "Close panel" : "Open panel"}
+	>
+		{#if headingTag === "h3"}
+			<h3 class="ons-details__title ons-u-fs-r--b">{title}</h3>
+		{:else}
+			<h2 class="ons-details__title ons-u-fs-r--b">{title}</h2>
+		{/if}
+		<span class="ons-details__icon">
+			<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></span
+		>
+	</summary>
+	<div class="ons-details__content ons-js-details-content">
+		<slot />
+	</div>
+</details>
+
+<style>
+	.ons-details__content {
+		/* hack to ensure that contents can be found when closed by using ctrl-F */
+		display: block;
+	}
+</style>

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

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  DetailsProps */
+/** @typedef {typeof __propDef.events}  DetailsEvents */
+/** @typedef {typeof __propDef.slots}  DetailsSlots */
+export default class Details extends SvelteComponentTyped<{
+    title?: string | undefined;
+    open?: boolean | undefined;
+    headingTag?: "h2" | "h3" | undefined;
+}, {
+    toggle: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DetailsProps = typeof __propDef.props;
+export type DetailsEvents = typeof __propDef.events;
+export type DetailsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        open?: boolean | undefined;
+        headingTag?: "h2" | "h3" | undefined;
+    };
+    events: {
+        toggle: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,14 @@
+An expandable `<details>` ("twisty") component, which can be open or closed by default.
+
+This component is based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/details), but intentionally uses the vanilla HTML `<details>` component to ensure that its content can be found when searching the page.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Details } from "@onsvisual/svelte-components";
+</script>
+
+<Details title="Title of twisty">
+  <p>Contents of twisty</p>
+</Details>
+```

package/dist/layout/DocumentList/Document.svelte

@@ -0,0 +1,103 @@
+<script>
+	/**
+	 * The title of the document
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Set the heading level for the title
+	 * @type {"h2"|"h3"}
+	 */
+	export let headingTag = "h2";
+	/**
+	 * The URL of the document
+	 * @type {string}
+	 */
+	export let href = "";
+	/**
+	 * A description of the document
+	 * @type {string}
+	 */
+	export let description = "";
+	/**
+	 * Optional: URL of image to represent the document (use "true" for a placeholder)
+	 * @type {string|boolean}
+	 */
+	export let image = false;
+	/**
+	 * Highlight document as a featured item (inset on grey background)
+	 * @type {boolean}
+	 */
+	export let featured = false;
+	/**
+	 * Metadata about the type of document linked to (can include HTML)
+	 * @type {string}
+	 */
+	export let meta = "";
+</script>
+
+<li class="ons-document-list__item" class:ons-document-list__item--featured={featured}>
+	{#if image}
+		<div
+			class="ons-document-list__item-image ons-document-list__item-image--file"
+			aria-hidden="true"
+		>
+			<a
+				class="ons-document-list__image-link"
+				class:ons-document-list__image-link--placeholder={image === true}
+				{href}
+				tabindex="-1"
+			>
+				{#if typeof image === "string"}
+					<img src={image} alt="" loading="lazy" />
+				{/if}
+			</a>
+		</div>
+	{/if}
+	<div class="ons-document-list__item-content">
+		<div class="ons-document-list__item-header">
+			{#if headingTag === "h3"}
+				<h3 class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
+					<a {href}
+						>{title}
+						{#if meta}<span class="ons-u-vh">{meta}</span>{/if}
+					</a>
+				</h3>
+			{:else}
+				<h2 class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-2xs">
+					<a {href}
+						>{title}
+						{#if meta}<span class="ons-u-vh">{meta}</span>{/if}
+					</a>
+				</h2>
+			{/if}
+			{#if meta}
+				<ul class="ons-document-list__item-metadata ons-u-mb-2xs">
+					<li class="ons-document-list__item-attribute" aria-hidden="true">{@html meta}</li>
+				</ul>
+			{/if}
+		</div>
+		{#if description}
+			<div class="ons-document-list__item-description">
+				<slot />
+				{@html description}
+			</div>
+		{/if}
+	</div>
+</li>
+
+<style>
+	.ons-document-list__item-image--file .ons-document-list__image-link--placeholder {
+		display: block;
+		height: 136px;
+	}
+	.ons-document-list__image-link--placeholder {
+		background-clip: padding-box;
+		background-color: var(--ons-color-placeholder);
+		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: 32px 32px;
+		height: 100%;
+	}
+</style>

package/dist/layout/DocumentList/Document.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @typedef {typeof __propDef.props}  DocumentProps */
+/** @typedef {typeof __propDef.events}  DocumentEvents */
+/** @typedef {typeof __propDef.slots}  DocumentSlots */
+export default class Document extends SvelteComponentTyped<{
+    meta?: string | undefined;
+    title?: string | undefined;
+    image?: string | boolean | undefined;
+    headingTag?: "h2" | "h3" | undefined;
+    href?: string | undefined;
+    featured?: boolean | undefined;
+    description?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DocumentProps = typeof __propDef.props;
+export type DocumentEvents = typeof __propDef.events;
+export type DocumentSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        meta?: string | undefined;
+        title?: string | undefined;
+        image?: string | boolean | undefined;
+        headingTag?: "h2" | "h3" | undefined;
+        href?: string | undefined;
+        featured?: boolean | undefined;
+        description?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};