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

package/dist/layout/DocumentList/DocumentList.stories.svelte

@@ -0,0 +1,73 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import Document from "./Document.svelte";
+	import DocumentList from "./DocumentList.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/DocumentList",
+		component: DocumentList,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const items1 = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			image: true,
+			meta: "Poster, PDF, 499KB, 1 page",
+			description: "Empty belly poster, aimed at advertising census events."
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages",
+			image: true,
+			description:
+				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+		}
+	];
+
+	const items2 = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			featured: true,
+			image: "https://service-manual.ons.gov.uk/img/large/census-monuments-lights-featured.jpg",
+			meta: "Poster, PDF, 499KB, 1 page",
+			description: "Empty belly poster, aimed at advertising census events."
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages",
+			description:
+				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+		}
+	];
+</script>
+
+<Story name="Document list with images" args={{ items: items1 }} />
+
+<Story name="Article list with featured item" args={{ items: items2 }} />
+
+<Story name="Individually defined documents" asChild parameters={withStoryDocs(exampleDocs)}>
+	<DocumentList>
+		<Document
+			href="#0"
+			title="Including everyone in Census"
+			meta="Poster, PDF, 499KB, 1 page"
+			description="Empty belly poster, aimed at advertising census events."
+		/>
+		<Document
+			href="#0"
+			title="Community handbook for Census 2021"
+			meta="Booklet,PDF, 3.3MB, 16 pages"
+			description="This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+		/>
+	</DocumentList>
+</Story>

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

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

package/dist/layout/DocumentList/DocumentList.svelte

@@ -0,0 +1,17 @@
+<script>
+	import Document from "./Document.svelte";
+
+	/** Optional: Define the documents as an array of {id, title, checked, description?}
+	 * @type {object[]|null}
+	 */
+	export let items = null;
+</script>
+
+<ul class="ons-document-list">
+	<slot />
+	{#if Array.isArray(items)}
+		{#each items as item}
+			<Document {...item} />
+		{/each}
+	{/if}
+</ul>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  DocumentListProps */
+/** @typedef {typeof __propDef.events}  DocumentListEvents */
+/** @typedef {typeof __propDef.slots}  DocumentListSlots */
+export default class DocumentList extends SvelteComponentTyped<{
+    items?: object[] | null | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type DocumentListProps = typeof __propDef.props;
+export type DocumentListEvents = typeof __propDef.events;
+export type DocumentListSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        items?: object[] | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,28 @@
+A component for defining a list of pages or links. Items can either be defined in an array of objects or as individual `<Document>` components.
+
+Based on [this ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/document-list).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DocumentList } from "@onsvisual/svelte-components";
+
+  const items = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			meta: "Poster, PDF, 499KB, 1 page",
+			description: "Empty belly poster, aimed at advertising census events."
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages",
+			description:
+				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+		}
+	];
+</script>
+
+<DocumentList {items}>
+```

package/dist/layout/DocumentList/docs/example.md

@@ -0,0 +1,23 @@
+In this example, the individual documents are defined explicitly.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { DocumentList, Document } from "@onsvisual/svelte-components";
+</script>
+
+<DocumentList>
+  <Document
+    href="#0"
+    title="Including everyone in Census"
+    meta="Poster, PDF, 499KB, 1 page"
+    description="Empty belly poster, aimed at advertising census events."
+  />
+  <Document
+    href="#0"
+    title="Community handbook for Census 2021"
+    meta="Booklet,PDF, 3.3MB, 16 pages"
+    description="This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
+  />
+</DocumentList>
+```

package/dist/layout/ErrorPage/ErrorPage.stories.svelte

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

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

@@ -2,9 +2,7 @@
 /** @typedef {typeof __propDef.events}  ErrorPageEvents */
 /** @typedef {typeof __propDef.slots}  ErrorPageSlots */
 export default class ErrorPage extends SvelteComponentTyped<{
-    page?: any;
-    status?: number;
-    message?: string;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,9 +13,7 @@ export type ErrorPageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        page?: any;
-        status?: number;
-        message?: string;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/ErrorPage/ErrorPage.svelte

@@ -1,43 +1,48 @@
 <script>
-  /**
-   * Pass the "page" store from "$app/stores" in any Svelte Kit project
-   * @type {any}
-   */
-  export let page = null;
-  /**
-   * (Optional) Explicitly pass a page status number, eg. 404 or 500.
-   * @type {number}
-   */
-  export let status = $page ? $page?.status : null;
-  /**
-   * (Optional) Explicitly pass a page status message.
-   * @type {string}
-   */
-  export let message = $page ? $page?.error?.message : "";
+	import { getContext } from "svelte";
+
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "narrow";
+	/**
+	 * Optional: Pass the "page" store from "$app/state" in SvelteKit (gets read from context by default if it exists)
+	 * @type {any}
+	 */
+	export let page = getContext("page");
+	/**
+	 * Optional: Explicitly pass a page status number, eg. 404 or 500.
+	 * @type {number}
+	 */
+	export let status = $page ? $page?.status : null;
+	/**
+	 * Optional: Explicitly pass a page status message.
+	 * @type {string}
+	 */
+	export let message = $page ? $page?.error?.message : "";
 </script>
 
-<div class="ons-page__container ons-container">
-  <div class="ons-grid">
-    <div class="ons-grid__col ons-col-12@m">
-      <main id="main-content" class="ons-page__main">
-        {#if status === 404}
-          <h1>{message || "Page not found"}</h1>
-          <p>If you entered a web address, check it is correct.</p>
-          <p>If you pasted the web address, check you copied the whole address.</p>
-          <p>
-            If the web address is correct or you selected a link or button, <a
-              href="https://www.ons.gov.uk/feedback">contact us</a
-            > for more help.
-          </p>
-        {:else}
-          <h1>{message || "Sorry, there is a problem with the service"}</h1>
-          <p>
-            If you continue to experience problems with this service, please <a
-              href="https://www.ons.gov.uk/feedback">contact us</a
-            >.
-          </p>
-        {/if}
-      </main>
-    </div>
-  </div>
-</div>
+<Container {width}>
+	<main id="main" class="ons-page__main">
+		{#if status === 404}
+			<h1>{message || "Page not found"}</h1>
+			<p>If you entered a web address, check it is correct.</p>
+			<p>If you pasted the web address, check you copied the whole address.</p>
+			<p>
+				If the web address is correct or you selected a link or button, <a
+					href="https://www.ons.gov.uk/feedback">contact us</a
+				> for more help.
+			</p>
+		{:else}
+			<h1>{message || "Sorry, there is a problem with the service"}</h1>
+			<p>
+				If you continue to experience problems with this service, please <a
+					href="https://www.ons.gov.uk/feedback">contact us</a
+				>.
+			</p>
+		{/if}
+	</main>
+</Container>

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  ErrorPageProps */
+/** @typedef {typeof __propDef.events}  ErrorPageEvents */
+/** @typedef {typeof __propDef.slots}  ErrorPageSlots */
+export default class ErrorPage extends SvelteComponentTyped<{
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    message?: string | undefined;
+    page?: any;
+    status?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ErrorPageProps = typeof __propDef.props;
+export type ErrorPageEvents = typeof __propDef.events;
+export type ErrorPageSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        message?: string | undefined;
+        page?: any;
+        status?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,13 @@
+An error page component that will display generic error messages for "page not found" (404) or other errors.
+
+Based on [this ONS Design System pattern](https://service-manual.ons.gov.uk/design-system/patterns/error-status-pages).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { page } from "$app/stores";
+  import { ErrorPage } from "@onsvisual/svelte-components";
+</script>
+
+<ErrorPage page="{page}" />
+```

package/dist/layout/Footer/Footer.stories.svelte

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

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

@@ -2,14 +2,10 @@
 /** @typedef {typeof __propDef.events}  FooterEvents */
 /** @typedef {typeof __propDef.slots}  FooterSlots */
 export default class Footer extends SvelteComponentTyped<{
-    theme?: "light" | "dark";
-    themeOverrides?: any;
-    compact?: boolean;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {
-    before: {};
-}> {
+}, {}> {
 }
 export type FooterProps = typeof __propDef.props;
 export type FooterEvents = typeof __propDef.events;
@@ -17,15 +13,11 @@ export type FooterSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        theme?: "light" | "dark";
-        themeOverrides?: object;
-        compact?: boolean;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        before: {};
-    };
+    slots: {};
 };
 export {};