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

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

@@ -0,0 +1,55 @@
+/** @typedef {typeof __propDef.props}  HeroProps */
+/** @typedef {typeof __propDef.events}  HeroEvents */
+/** @typedef {typeof __propDef.slots}  HeroSlots */
+export default class Hero extends SvelteComponentTyped<{
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    height?: string | number | null | undefined;
+    background?: string | null | undefined;
+    meta?: object[] | null | undefined;
+    title?: string | undefined;
+    theme?: "default" | "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    themeOverrides?: object | undefined;
+    pageType?: string | undefined;
+    lede?: string | undefined;
+    titleBadge?: object | null | undefined;
+    actionButton?: object | null | undefined;
+    natStatBadge?: boolean | undefined;
+    censusLogo?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    before: {};
+    default: {};
+    after: {};
+}> {
+}
+export type HeroProps = typeof __propDef.props;
+export type HeroEvents = typeof __propDef.events;
+export type HeroSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        height?: string | number | null | undefined;
+        background?: string | null | undefined;
+        meta?: object[] | null | undefined;
+        title?: string | undefined;
+        theme?: "default" | "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        themeOverrides?: object | undefined;
+        pageType?: string | undefined;
+        lede?: string | undefined;
+        titleBadge?: object | null | undefined;
+        actionButton?: object | null | undefined;
+        natStatBadge?: boolean | undefined;
+        censusLogo?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        before: {};
+        default: {};
+        after: {};
+    };
+};
+export {};

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

@@ -0,0 +1,14 @@
+A hero/title block suitable for a standard pages, with optional metadata block.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/hero).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Hero } from "@onsvisual/svelte-components";
+</script>
+
+<Hero title="Page title" lede="A description of the page">
+  {optional_additonal_content}
+</Hero>
+```

package/dist/layout/Highlight/Highlight.stories.svelte

@@ -0,0 +1,29 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Highlight from "./Highlight.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import { lipsum } from "../../js/utils.js";
+
+	const { Story } = defineMeta({
+		title: "Layout/Highlight",
+		component: Highlight,
+		tags: ["autodocs"],
+		argTypes: {
+			width: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Highlight {...args}>
+		<p>
+			{lipsum(1)}
+		</p>
+	</Highlight>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

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

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

package/dist/layout/Highlight/Highlight.svelte

@@ -1,72 +1,84 @@
 <script>
-  import Container from "../../wrappers/Container/Container.svelte";
+	import Theme from "../../wrappers/Theme/Theme.svelte";
+	import Container from "../../wrappers/Container/Container.svelte";
 
-  /**
-   * (Optional) Sets the unique ID of the section
-   * @type {string}
-   */
-  export let id = null;
-  /**
-   * Sets the width of the section
-   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-   */
-  export let width = "medium";
-  /**
-   * Sets the minimum height of the section
-   * @type {"auto"|"tall"|"full"}
-   */
-  export let height = "tall";
-  /**
-   * Sets a predefined theme
-   * @type {"light"|"dark"|"lightblue"}
-   */
-  export let theme = "lightblue";
-  /**
-   * 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;
-  /**
-   * Optional margin above section
-   * @type {boolean}
-   */
-  export let marginTop = false;
-  /**
-   * Optional margin below section
-   * @type {boolean}
-   */
-  export let marginBottom = true;
+	/**
+	 * Optional: Set the unique ID of the section
+	 * @type {string}
+	 */
+	export let id = "";
+	/**
+	 * Optional: Set a CSS class for the section
+	 * @type {string}
+	 */
+	export let cls = "";
+	/**
+	 * Applies a larger default text size (by default)
+	 * @type {boolean}
+	 */
+	export let bigText = true;
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "narrow";
+	/**
+	 * Sets the (minimum) height of the container
+	 * @type {number|string|null}
+	 */
+	export let height = null;
+	/**
+	 * Sets a predefined theme
+	 * @type {"light"|"dark"|"paleblue"|"blue"|"navyblue"|null}
+	 */
+	export let theme = "paleblue";
+	/**
+	 * Define additional props to override the base theme
+	 * @type {object}
+	 */
+	export let themeOverrides = {};
+	/**
+	 * Overrides the background CSS for the section
+	 * @type {string|null}
+	 */
+	export let background = null;
+	/**
+	 * Optional margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Optional margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = true;
 </script>
 
-<Container
-  theme="{theme}"
-  themeOverrides="{themeOverrides}"
-  allowClientOverrides="{allowClientOverrides}"
-  width="{width}"
-  background="{background}"
-  marginTop="{marginTop}"
-  marginBottom="{marginBottom}"
-  height="{height}"
->
-  <section
-    class="ons-hero__details ons-feature__filler ons-u-fs-l ons-font-weight__normal"
-    id="{id}"
-  >
-    <slot />
-  </section>
-</Container>
+<Theme {theme} overrides={themeOverrides} {background}>
+	<Container {id} {cls} {width} {marginTop} {marginBottom}>
+		<section
+			class="ons-section__highlight ons-u-mt-xl ons-u-mb-xl"
+			class:ons-u-fs-l={bigText}
+			style:height={typeof height === "number"
+				? `${height}px`
+				: height === "full"
+					? "100vh"
+					: height}
+		>
+			<div>
+				<slot />
+			</div>
+		</section>
+	</Container>
+</Theme>
 
 <style>
-  :global(.ons-feature__filler > p + p) {
-    margin-top: 30px;
-  }</style>
+	.ons-section__highlight {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+	.ons-section__highlight > div > :global(p:last-of-type) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -0,0 +1,45 @@
+/** @typedef {typeof __propDef.props}  HighlightProps */
+/** @typedef {typeof __propDef.events}  HighlightEvents */
+/** @typedef {typeof __propDef.slots}  HighlightSlots */
+export default class Highlight extends SvelteComponentTyped<{
+    id?: string | undefined;
+    cls?: string | undefined;
+    width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+    height?: string | number | null | undefined;
+    marginTop?: boolean | undefined;
+    marginBottom?: boolean | undefined;
+    background?: string | null | undefined;
+    theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
+    themeOverrides?: object | undefined;
+    bigText?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type HighlightProps = typeof __propDef.props;
+export type HighlightEvents = typeof __propDef.events;
+export type HighlightSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string | undefined;
+        cls?: string | undefined;
+        width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
+        height?: string | number | null | undefined;
+        marginTop?: boolean | undefined;
+        marginBottom?: boolean | undefined;
+        background?: string | null | undefined;
+        theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | null | undefined;
+        themeOverrides?: object | undefined;
+        bigText?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,12 @@
+A large text block that can be used as a standfirst or transition between sections of a feature article, with various options and style customisations.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Highlight } from "@onsvisual/svelte-components";
+</script>
+
+<Highlight>
+  <p>Contents of highlight section.</p>
+</Highlight>
+```

package/dist/layout/Image/Image.stories.svelte

@@ -0,0 +1,23 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Image from "./Image.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/Image",
+		component: Image,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+<Story
+	name="Default"
+	args={{
+		src: "https://service-manual.ons.gov.uk/img/small/woman-in-purple-dress-shirt.jpg",
+		alt: "Woman in a purple dress shirt using a laptop",
+		caption: "Image 1 - Woman in a purple dress shirt using a laptop"
+	}}
+/>

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

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

package/dist/layout/Image/Image.svelte

@@ -0,0 +1,24 @@
+<script>
+	/**
+	 * The URL of the image
+	 * @type {string}
+	 */
+	export let src = "";
+	/**
+	 * An alternative text for the image
+	 * @type {string}
+	 */
+	export let alt = "";
+	/**
+	 * A visible caption for the image
+	 * @type {string}
+	 */
+	export let caption = "";
+</script>
+
+<figure class="ons-image">
+	<img class="ons-image__img" {src} {alt} />
+	{#if caption}
+		<figcaption class="ons-image__caption">{caption}</figcaption>
+	{/if}
+</figure>

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ImageProps */
+/** @typedef {typeof __propDef.events}  ImageEvents */
+/** @typedef {typeof __propDef.slots}  ImageSlots */
+export default class Image extends SvelteComponentTyped<{
+    caption?: string | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ImageProps = typeof __propDef.props;
+export type ImageEvents = typeof __propDef.events;
+export type ImageSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        caption?: string | undefined;
+        src?: string | undefined;
+        alt?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,15 @@
+Insert an image with an optional caption.
+
+Based on this [ONS Design System component](https://service-manual.ons.gov.uk/design-system/components/image).
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Image } from "@onsvisual/svelte-components";
+</script>
+
+<Image
+  src="https://service-manual.ons.gov.uk/img/small/woman-in-purple-dress-shirt.jpg"
+  alt="Woman in a purple dress shirt using a laptop"
+  caption="Image 1 - Woman in a purple dress shirt using a laptop" />
+```

package/dist/layout/List/Li.svelte

@@ -0,0 +1,3 @@
+<li class="ons-list__item">
+	<slot />
+</li>

package/dist/layout/List/Li.svelte.d.ts

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

package/dist/layout/List/List.stories.svelte

@@ -0,0 +1,40 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs, withStoryDocs } from "../../js/withParams.js";
+	import List from "./List.svelte";
+	import Li from "./Li.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import exampleDocs from "./docs/example.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Layout/List",
+		component: List,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<List {...args}>
+		<Li>First list item</Li>
+		<Li>Second list item</Li>
+		<Li>Third list item</Li>
+	</List>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="Dashed list" args={{ mode: "dash" }} {template} />
+
+<Story name="Numeric list" args={{ mode: "number" }} {template} />
+
+<Story name="Bare list" args={{ mode: "bare" }} {template} />
+
+<Story name="Inline list" args={{ mode: "inline" }} {template} />
+
+<Story
+	name="List with items defined by an array"
+	args={{ items: ["<strong>First</strong> list item", "Second list item", "Third list item"] }}
+	parameters={withStoryDocs(exampleDocs)}
+/>

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

@@ -2,12 +2,10 @@
 /** @typedef {typeof __propDef.events}  ListEvents */
 /** @typedef {typeof __propDef.slots}  ListSlots */
 export default class List extends SvelteComponentTyped<{
-    mode?: "number" | "bullet" | "dash" | "bare";
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+}, {}> {
 }
 export type ListProps = typeof __propDef.props;
 export type ListEvents = typeof __propDef.events;
@@ -15,13 +13,11 @@ export type ListSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        mode?: "bullet" | "dash" | "number" | "bare";
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export {};

package/dist/layout/List/List.svelte

@@ -1,32 +1,41 @@
 <script>
-  import { onMount } from "svelte";
+	import Li from "./Li.svelte";
 
-  /**
-   * Type of list
-   * @type {"bullet"|"dash"|"number"|"bare"}
-   */
-  export let mode = "bullet"; // dash | bullet | number | bare
-
-  let el;
-
-  onMount(() => {
-    [...el.children].forEach((c) => {
-      if (c.nodeName === "LI") c.className = "ons-list__item";
-    });
-  });
+	/**
+	 * Type of list
+	 * @type {"bullet"|"dash"|"number"|"bare"|"inline"}
+	 */
+	export let mode = "bullet"; // dash | bullet | number | bare
+	/**
+	 * Optional: Array of HTML strings representing items in list
+	 * @type {string[]|null}
+	 */
+	export let items = null;
 </script>
 
 {#if mode === "number"}
-  <ol class="ons-list" bind:this="{el}">
-    <slot />
-  </ol>
+	<ol class="ons-list">
+		<slot>
+			{#if items}
+				{#each items as item}
+					<Li>{@html item}</Li>
+				{/each}
+			{/if}
+		</slot>
+	</ol>
 {:else}
-  <ul
-    class="ons-list"
-    class:ons-list--dashed="{mode === 'dash'}"
-    class:ons-list--bare="{mode === 'bare'}"
-    bind:this="{el}"
-  >
-    <slot />
-  </ul>
+	<ul
+		class="ons-list"
+		class:ons-list--dashed={mode === "dash"}
+		class:ons-list--bare={["bare", "inline"].includes(mode)}
+		class:ons-list--inline={mode === "inline"}
+	>
+		<slot>
+			{#if items}
+				{#each items as item}
+					<Li>{@html item}</Li>
+				{/each}
+			{/if}
+		</slot>
+	</ul>
 {/if}

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

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  ListProps */
+/** @typedef {typeof __propDef.events}  ListEvents */
+/** @typedef {typeof __propDef.slots}  ListSlots */
+export default class List extends SvelteComponentTyped<{
+    mode?: "number" | "inline" | "bullet" | "dash" | "bare" | undefined;
+    items?: string[] | null | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        mode?: "number" | "inline" | "bullet" | "dash" | "bare" | undefined;
+        items?: string[] | null | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};