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

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

@@ -2,21 +2,16 @@
 /** @typedef {typeof __propDef.events}  NavSectionsEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionsSlots */
 export default class NavSections extends SvelteComponentTyped<{
-    id?: string;
-    cls?: string;
-    theme?: "light" | "dark" | "lightblue";
-    background?: string;
-    allowClientOverrides?: boolean;
-    width?: "narrow" | "medium" | "wide" | "wider" | "full";
-    marginTop?: boolean;
-    marginBottom?: boolean;
-    themeOverrides?: any;
-    contentsLabel?: string;
-    noContents?: boolean;
+    id?: string | undefined;
+    cls?: string | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    marginTop?: boolean | undefined;
+    marginBottom?: boolean | undefined;
+    contentsLabel?: string | undefined;
+    noContents?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
-    header: {};
     'before-nav': {};
     'after-nav': {};
     before: {};
@@ -31,23 +26,18 @@ export type NavSectionsSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        cls?: string;
-        theme?: "light" | "dark" | "lightblue";
-        background?: string;
-        allowClientOverrides?: boolean;
-        width?: "narrow" | "medium" | "wide" | "wider" | "full";
-        marginTop?: boolean;
-        marginBottom?: boolean;
-        themeOverrides?: object;
-        contentsLabel?: string;
-        noContents?: boolean;
+        id?: string | undefined;
+        cls?: string | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        marginTop?: boolean | undefined;
+        marginBottom?: boolean | undefined;
+        contentsLabel?: string | undefined;
+        noContents?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        header: {};
         'before-nav': {};
         'after-nav': {};
         before: {};

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

@@ -0,0 +1,27 @@
+Use this layou component to allow users to quickly jump to sections of a long page of content.
+
+As the user scrolls down the page, the table of contents will remain accessible at the top of the viewport and will highlight the subheading of the section in view.
+
+Note: These examples will not preview correctly in the iframes on this page. You can select the examples from the menu instead.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { NavSections, NavSection } from "@onsvisual/svelte-components";
+</script>
+
+<NavSections>
+  <NavSection title="Section one">
+    <p>Contents of first section.</p>
+  </NavSection>
+  <NavSection title="Subsection A" subsection>
+    <p>Contents of subsection.</p>
+  </NavSection>
+  <NavSection title="Subsection B" subsection>
+    <p>Contents of subsection.</p>
+  </NavSection>
+  <NavSection title="Section two">
+    <p>Contents of third section.</p>
+  </NavSection>
+</NavSections>
+```

package/dist/layout/Notice/Notice.stories.svelte

@@ -0,0 +1,61 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Notice from "./Notice.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Notice",
+		component: Notice,
+		tags: ["autodocs"],
+		argTypes: {
+			mode: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<div style:padding="12px">
+		<Notice {...args}>
+			{@html args.content}
+		</Notice>
+	</div>
+{/snippet}
+
+<Story
+	name="Default"
+	args={{
+		content: "This is some helpful information."
+	}}
+	{template}
+/>
+
+<Story
+	name="Warning style"
+	args={{
+		mode: "warning",
+		content: "This is some important information you need to know."
+	}}
+	{template}
+/>
+
+<Story
+	name="Success style"
+	args={{
+		mode: "success",
+		content: "You successfully submitted some information."
+	}}
+	{template}
+/>
+
+<Story
+	name="Error style"
+	args={{
+		mode: "error",
+		content: "An unexpected error has occurred."
+	}}
+	{template}
+/>

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

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

package/dist/layout/Notice/Notice.svelte

@@ -1,60 +1,51 @@
 <script>
-  /**
-   * (Optional) Notice title
-   * @type {string}
-   */
-  export let title = null;
-  /**
-   * Sets the mode/colour of the notice
-   * @type {"info"|"success"|"pending"|"error"|"warning"}
-   */
-  export let mode = "info";
-  /**
-   * Adds an exclamation mark icon
-   * @type {boolean}
-   */
-  export let important = mode === "warning";
-
-  $: style =
-    mode === "success"
-      ? "background: var(--ons-color-success-tint); border-color: var(--ons-color-success);"
-      : mode === "pending"
-      ? "background: var(--ons-color-pending-tint); border-color: var(--ons-color-pending);"
-      : mode === "error"
-      ? "background: var(--ons-color-errors-tint); border-color: var(--ons-color-errors);"
-      : null;
+	/**
+	 * Sets the mode/colour of the notice
+	 * @type {"info"|"success"|"error"|"warning"}
+	 */
+	export let mode = "info";
 </script>
 
 <div
-  class="ons-panel {mode === 'warning' ? 'ons-panel--warn' : 'ons-panel--info'} ons-panel--no-title"
-  style="{style}"
+	class="ons-panel ons-panel--no-title"
+	class:ons-panel--info={mode === "info"}
+	class:ons-panel--warn={mode === "warning"}
+	class:ons-panel--error={mode === "error"}
+	class:ons-panel--success={mode === "success"}
 >
-  <div class="ons-u-bg--tr" class:ons-panel--warn="{important && mode !== 'warning'}">
-    {#if important}<div class="ons-panel__icon" aria-hidden="true">!</div>{/if}
-    <span class="ons-panel__assistive-text ons-u-vh"
-      >{mode === "warning" ? "Warning:" : "Important information:"}</span
-    >
-    <div class="ons-panel__body">
-      <div class="default-line-height" class:ons-u-fs-r="{mode !== 'warning'}">
-        {#if title}<p><strong>{title}</strong></p>{/if}
-        <slot />
-      </div>
-    </div>
-  </div>
+	<div class="ons-u-bg--tr">
+		{#if mode === "warning"}<div class="ons-panel__icon" aria-hidden="true">!</div>{/if}
+		<span class="ons-panel__assistive-text ons-u-vh"
+			>{mode === "warning"
+				? "Warning:"
+				: mode === "success"
+					? "Completed:"
+					: mode === "error"
+						? "Error:"
+						: "Important information:"}</span
+		>
+		{#if mode === "success"}
+			<span class="ons-panel__icon ons-u-fs-r"
+				><svg
+					class="ons-icon"
+					viewBox="0 0 13 10"
+					xmlns="http://www.w3.org/2000/svg"
+					focusable="false"
+					fill="currentColor"
+					role="img"
+					title="ons-icon-check"
+				>
+					<path
+						d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z"
+						transform="translate(-1.51 -3.04)"
+					/>
+				</svg></span
+			>
+		{/if}
+		<div class="ons-panel__body">
+			<div class="default-line-height" class:ons-u-fs-r={mode !== "warning"}>
+				<slot />
+			</div>
+		</div>
+	</div>
 </div>
-
-<style>
-  .ons-panel {
-    color: rgb(34, 34, 34);
-  }
-  :global(.ons-panel__body a) {
-    color: #206095 !important;
-  }
-  :global(.ons-panel__body a:hover) {
-    color: rgb(0, 60, 87) !important;
-    -webkit-text-decoration: underline solid rgb(0, 60, 87) 2px !important;
-            text-decoration: underline solid rgb(0, 60, 87) 2px !important;
-  }
-  :global(.ons-panel__body p:last-of-type) {
-    margin-bottom: 0;
-  }</style>

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

@@ -2,9 +2,7 @@
 /** @typedef {typeof __propDef.events}  NoticeEvents */
 /** @typedef {typeof __propDef.slots}  NoticeSlots */
 export default class Notice extends SvelteComponentTyped<{
-    title?: string;
-    mode?: "info" | "success" | "pending" | "error" | "warning";
-    important?: boolean;
+    mode?: "error" | "info" | "success" | "warning" | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -17,9 +15,7 @@ export type NoticeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title?: string;
-        mode?: "info" | "success" | "pending" | "error" | "warning";
-        important?: boolean;
+        mode?: "error" | "info" | "success" | "warning" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,14 @@
+Container for displaying notices on a page.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/panel).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Notice } from "@onsvisual/svelte-components";
+</script>
+
+<Notice>
+  <p>This is the text of the notice.</p>
+</Notice>
+```

package/dist/layout/PhaseBanner/PhaseBanner.stories.svelte

@@ -0,0 +1,24 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import PhaseBanner from "./PhaseBanner.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/PhaseBanner",
+		component: PhaseBanner,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story name="Default" args={{}} />
+
+<Story
+	name="Prototype with custom link"
+	args={{
+		phase: "Prototype",
+		href: "https://example.com"
+	}}
+/>

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

@@ -2,8 +2,7 @@
 /** @typedef {typeof __propDef.events}  PhaseBannerEvents */
 /** @typedef {typeof __propDef.slots}  PhaseBannerSlots */
 export default class PhaseBanner extends SvelteComponentTyped<{
-    href?: string;
-    phase?: string;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -14,8 +13,7 @@ export type PhaseBannerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        href?: string;
-        phase?: string;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/PhaseBanner/PhaseBanner.svelte

@@ -1,40 +1,61 @@
 <script>
-  /**
-   * Phase of project (alpha, beta, prototype etc.)
-   * @type {string}
-   */
-  export let phase = "Beta";
-  /**
-   * URL of feedback form (relative or absolute)
-   * @type {string}
-   */
-  export let href = "/feedback";
+	/**
+	 * Phase of project (alpha, beta, prototype etc.)
+	 * @type {string}
+	 */
+	export let phase = "Beta";
+	/**
+	 * URL of feedback form (relative or absolute)
+	 * @type {string}
+	 */
+	export let href = "https://www.ons.gov.uk/feedback";
 </script>
 
 <div class="ons-phase-banner">
-  <div class="ons-container">
-    <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--no-wrap">
-      <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
-        <strong class="ons-phase-banner__badge">{phase}</strong>
-      </div>
-      <div class="ons-col-auto ons-grid--flex ons-grid--no-wrap@l ons-grid--vertical-center">
-        <span class="ons-u-fs-s ons-u-m-no">
-          {#if phase.toLowerCase() === "prototype"}
-            This is a prototype – your <a href="{href}">feedback</a> will help us improve it.
-          {:else}
-            This is a new service – your <a href="{href}">feedback</a> will help us improve it.
-          {/if}
-        </span>
-      </div>
-    </div>
-  </div>
+	<div class="ons-container">
+		<div
+			class="ons-grid ons-grid-flex ons-grid--gutterless ons-grid-flex--vertical-center ons-grid-flex--no-wrap"
+		>
+			<div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
+				<strong class="ons-phase-banner__badge">{phase}</strong>
+			</div>
+			<div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
+				<p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">
+					This is a {phase === "Prototype" ? "new service" : "prototype"}.
+					{#if href}
+						To help us improve it, <a
+							{href}
+							class="ons-external-link"
+							target="_blank"
+							rel="noopener"
+						>
+							<span class="ons-external-link__text">give feedback</span><span
+								class="ons-external-link__icon"
+								>&nbsp;<svg
+									class="ons-icon"
+									viewBox="0 0 12 12"
+									xmlns="http://www.w3.org/2000/svg"
+									focusable="false"
+									aria-hidden="true"
+									role="img"
+									title="ons-icon-external-link"
+								>
+									<path
+										d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z"
+										transform="translate(-2 -1.99)"
+									/>
+									<path
+										d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z"
+										transform="translate(-2 -1.99)"
+									/>
+								</svg></span
+							><span class="ons-external-link__new-window-description ons-u-vh"
+								>(opens in a new tab)</span
+							></a
+						>
+					{/if}
+				</p>
+			</div>
+		</div>
+	</div>
 </div>
-
-<style>
-  .ons-phase-banner {
-    background: var(--pale, rgb(245, 245, 246)) !important;
-  }
-  .ons-phase-banner__badge {
-    background: var(--text, rgb(34, 34, 34)) !important;
-    color: var(--background, white) !important;
-  }</style>

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

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

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

@@ -0,0 +1,14 @@
+Dispay a phase banner on prototypes, alpha and beta products.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/phase-banner).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { PhaseBanner } from "@onsvisual/svelte-components";
+</script>
+
+<PhaseBanner />
+<!-- page header -->
+<!-- page contents -->
+```

package/dist/layout/RelatedContent/RelatedContent.stories.svelte

@@ -0,0 +1,36 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import RelatedContent from "./RelatedContent.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/RelatedContent",
+		component: RelatedContent,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+
+	const related = [
+		{
+			title: "Help with the census",
+			links: [
+				{ title: "I’m moving house", href: "#0" },
+				{ title: "What if I’m away or abroad on Census Day?", href: "#0" },
+				{ title: "Get an access code or paper census", href: "#0" }
+			]
+		},
+		{
+			title: "Related content",
+			links: [
+				{ title: "How we will contact or visit you", href: "#0" },
+				{ title: "Media enquiries", href: "#0" }
+			]
+		}
+	];
+</script>
+
+<Story name="Single section" args={{ links: related[1].links }} />
+
+<Story name="Multiple sections" args={{ related }} />

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

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  RelatedContentEvents */
 /** @typedef {typeof __propDef.slots}  RelatedContentSlots */
 export default class RelatedContent extends SvelteComponentTyped<{
-    title?: string;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type RelatedContentSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        title?: string;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/layout/RelatedContent/RelatedContent.svelte

@@ -1,59 +1,49 @@
 <script>
-  /**
-   * H2 title
-   * @type {string}
-   */
-  export let title = "Help with the census";
+	/**
+	 * Title for the section
+	 * @type {string}
+	 */
+	export let title = "Related content";
+	/**
+	 * Links in the form {title, href}
+	 * @type {object[]|object}
+	 */
+	export let links = [];
+	/**
+	 * Define multiple links sections in the form {title, links: [{title, href}]} (overrides above options)
+	 * @type {object[]}
+	 */
+	export let related = [{ title, links }];
 </script>
 
 <aside class="ons-related-content" aria-label="Related content">
-  <div class="ons-related-content__section">
-    <h2
-      class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs"
-      id="related-help-with-the-census"
-    >
-      {title}
-    </h2>
-    <div class="ons-related-content__content">
-      <nav class="ons-related-content__navigation" aria-labelledby="related-help-with-the-census">
-        <ul class="ons-list ons-list--bare">
-          <li class="ons-list__item">
-            <a href="#0" class="ons-list__link">I’m moving house</a>
-          </li>
-          <li class="ons-list__item">
-            <a href="#0" class="ons-list__link">What if I’m away or abroad on Census Day?</a>
-          </li>
-          <li class="ons-list__item">
-            <a href="#0" class="ons-list__link">Get an access code or paper census</a>
-          </li>
-          <li class="ons-list__item">
-            <a href="#0" class="ons-list__link">Find a census support centre</a>
-          </li>
-          <li class="ons-list__item">
-            <a href="#0" class="ons-list__link">Languages</a>
-          </li>
-          <li class="ons-list__item">
-            <a href="#0" class="ons-list__link">Accessibility</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-  <div class="ons-related-content__section">
-    <h2 class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs" id="related-content">
-      Related content
-    </h2>
-    <div class="ons-related-content__content">
-      <nav class="ons-related-content__navigation" aria-labelledby="related-content">
-        <ul class="ons-list ons-list--bare">
-          <li class="ons-list__item">
-            <a href="#0" class="ons-list__link">How we will contact or visit you</a>
-          </li>
-          <li class="ons-list__item">
-            <a href="#0" class="ons-list__link">Media enquiries</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
+	<slot />
+	{#each related as section}
+		<div class="ons-related-content__section">
+			{#if section.title}
+				<h2
+					class="ons-related-content__title ons-u-fs-r--b ons-u-mb-xs"
+					id="related-help-with-the-census"
+				>
+					{section.title}
+				</h2>
+			{/if}
+			{#if Array.isArray(section.links)}
+				<div class="ons-related-content__content">
+					<nav
+						class="ons-related-content__navigation"
+						aria-labelledby="related-help-with-the-census"
+					>
+						<ul class="ons-list ons-list--bare">
+							{#each section.links as link}
+								<li class="ons-list__item">
+									<a href={link.href} class="ons-list__link">{link.title}</a>
+								</li>
+							{/each}
+						</ul>
+					</nav>
+				</div>
+			{/if}
+		</div>
+	{/each}
 </aside>