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

package/dist/templates/FeatureArticle/docs/component.md

@@ -0,0 +1,125 @@
+A full page article template with compact header and footer, suitable for scrollytelling and other feature articles.
+
+Note: The scroller in this example will not preview correctly in the iframe on this page. You can select the example from the menu instead.
+
+<!-- prettier-ignore -->
+```html
+<!-- +page.svelte -->
+<script>
+  import "@onsvisual/svelte-components/css/main.css"; // This is more typically imported in the global +layout.svelte
+  import {
+    Header,
+    Hero,
+    Highlight,
+    Section,
+    Grid,
+    Divider,
+    Main,
+    Blockquote,
+    Em,
+    Scroller,
+    ScrollerSection,
+    Footer,
+  } from "@onsvisual/svelte-components";
+
+  const scrollerColors = ["#ddd", "#777", "#222"];
+  let scrollerColor = scrollerColors[0];
+</script>
+
+<Header compact />
+<Main>
+<Hero
+  title="This is an article title"
+  lede="This is a short, introductory sentence"
+  date="2023-07-04"
+>
+  <!-- <Checkbox label="Enable animation" variant="ghost" checked={animation} noBorder/> -->
+</Hero>
+
+<Highlight marginBottom="{false}">
+  <p>This is a test paragraph.</p>
+  <p>This is another test paragraph.</p>
+</Highlight>
+
+<Section title="Section title" marginTop="{true}">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+  <Blockquote attribution="A. Person">
+    This is a blockquote, white comprises of a large block of inset text.
+  </Blockquote>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+
+<Grid colwidth="medium" caption="This is a caption text">
+  <div class="grid-cell"></div>
+  <div class="grid-cell"></div>
+  <div class="grid-cell"></div>
+</Grid>
+
+<Divider />
+
+<Section title="Another section title">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+
+<Scroller
+  id="scroller"
+  splitscreen
+  on:change="{(e) => (scrollerColor = scrollerColors[e.detail.index])}"
+>
+  <div slot="background">
+    <Grid width="full" height="full">
+      <div class="placeholder-block" style:background-color="{scrollerColor}"></div>
+    </Grid>
+  </div>
+  <div slot="foreground">
+    <ScrollerSection>
+      <p>
+        When this first caption is visible, the background will appear
+        <Em color="{scrollerColors[0]}">light grey</Em>.
+      </p>
+    </ScrollerSection>
+    <ScrollerSection>
+      <p>
+        When this second caption is visible, the background will appear
+        <Em color="{scrollerColors[1]}">dark grey</Em>.
+      </p>
+    </ScrollerSection>
+    <ScrollerSection>
+      <p>
+        When this third caption is visible, the background will appear
+        <Em color="{scrollerColors[2]}">black</Em>.
+      </p>
+    </ScrollerSection>
+  </div>
+</Scroller>
+
+<Section title="Yet another section title">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+</Main>
+<Footer compact />
+```

package/dist/templates/StandardArticle/StandardArticle.stories.svelte

@@ -0,0 +1,86 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import componentDocs from "./docs/component.md?raw";
+	import Header from "../../layout/Header/Header.svelte";
+	import Breadcrumb from "../../layout/Breadcrumb/Breadcrumb.svelte";
+	import Hero from "../../layout/Hero/Hero.svelte";
+	import Section from "../../layout/Section/Section.svelte";
+	import Grid from "../../layout/Grid/Grid.svelte";
+	import Blockquote from "../../decorators/Blockquote/Blockquote.svelte";
+	import Footer from "../../layout/Footer/Footer.svelte";
+
+	const { Story } = defineMeta({
+		title: "Templates/Standard article",
+		component: Header,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: { ...withComponentDocs(componentDocs), layout: "fullscreen" }
+	});
+</script>
+
+<Story name="Default" args={{}} asChild>
+	<Header />
+	<Breadcrumb
+		links={[
+			{ label: "Home", href: "/" },
+			{ label: "Parent", href: "/parent/" }
+		]}
+	/>
+	<Hero title="Page title" theme="grey" meta={[{ key: "Release date", value: "1 January 2025" }]}
+	></Hero>
+
+	<Section title="Section title" marginTop={true}>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+		<Blockquote attribution="A. Person"
+			>This is a blockquote, white comprises of a large block of inset text.</Blockquote
+		>
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</Section>
+
+	<Grid width="medium" colWidth="full" caption="This is a caption text">
+		<div class="grid-cell"></div>
+	</Grid>
+
+	<Section title="Another section title">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</Section>
+
+	<Section title="Yet another section title">
+		<p>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+			labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+			laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+			voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+			non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+		</p>
+	</Section>
+
+	<Footer theme="dark" />
+</Story>
+
+<style>
+	.grid-cell {
+		background: var(--ons-color-grey-10);
+		min-height: 300px;
+		width: 100%;
+	}
+</style>

package/dist/templates/StandardArticle/StandardArticle.stories.svelte.d.ts

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

package/dist/templates/StandardArticle/docs/component.md

@@ -0,0 +1,76 @@
+A full page article template with compact header and footer, suitable for standard articles.
+
+An implementation of this template can be found in our [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project.
+
+<!-- prettier-ignore -->
+```html
+<!-- +page.svelte -->
+<script>
+  import "@onsvisual/svelte-components/css/main.css"; // This is more typically imported in the global +layout.svelte
+  import {
+    Header,
+    Breadcrumb,
+    Hero,
+    Section,
+    Grid,
+    Blockquote,
+    Footer,
+  } from "@onsvisual/svelte-components";
+</script>
+
+<Header />
+<Breadcrumb
+  links={[
+    { label: "Home", href: "/" },
+    { label: "Parent", href: "/parent/" }
+  ]}
+/>
+<Hero title="Page title" theme="grey" meta={[{ key: "Release date", value: "1 January 2025" }]}
+></Hero>
+
+<Section title="Section title" marginTop={true}>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+  <Blockquote attribution="A. Person"
+    >This is a blockquote, white comprises of a large block of inset text.</Blockquote
+  >
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+
+<Grid width="medium" colWidth="full" caption="This is a caption text">
+  <div class="grid-cell"></div>
+</Grid>
+
+<Section title="Another section title">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+
+<Section title="Yet another section title">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+    laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </p>
+</Section>
+
+<Footer theme="dark" />
+```

package/dist/templates/intro.mdx

@@ -0,0 +1,19 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="Templates/Using templates" />
+
+# Using templates
+
+This section includes a series of starter templates constructed from multiple components within this library. All of these templates are included in the [sveltekit-starter](https://github.com/ONSvisual/sveltekit-starter) project, which is typically to be the easiest way to use them.
+
+When using these templates in an existing SvelteKit project (or one built from scratch), you will need to include the **main.css** file from this library, which is best imported to your top-level `+layout.svelte` file in Svelte Kit. By doing this, you will not need to include it on individual pages.
+
+{/* prettier-ignore */}
+```html
+<!-- /src/routes/+layout.svelte -->
+<script>
+  import "@onsvisual/svelte-components/css/main.css";
+</script>
+
+<slot />
+```

package/dist/wrappers/Container/Container.stories.svelte

@@ -0,0 +1,38 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import Container from "./Container.svelte";
+	import componentDocs from "./docs/component.md?raw";
+
+	const { Story } = defineMeta({
+		title: "Wrappers/Container",
+		component: Container,
+		tags: ["autodocs"],
+		argTypes: {
+			width: {
+				control: { type: "select" }
+			}
+		},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<Container {...args}>
+		<div style:padding="24px 12px" style:background="var(--ons-color-grey-10)">
+			<p style:margin="0">Contents of container.</p>
+		</div>
+	</Container>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />
+
+<Story name="Narrow" args={{ width: "narrow" }} {template} />
+
+<Story name="Medium" args={{ width: "medium" }} {template} />
+
+<Story name="Wide" args={{ width: "wide" }} {template} />
+
+<Story name="Wider" args={{ width: "wider" }} {template} />
+
+<Story name="Full" args={{ width: "full" }} {template} />

package/dist/wrappers/Container/Container.stories.svelte.d.ts

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

package/dist/wrappers/Container/Container.svelte

@@ -1,143 +1,64 @@
 <script>
-  import Theme from "../Theme/Theme.svelte";
-
-  /**
-   * (Optional) Sets the unique ID of the container
-   * @type {string}
-   */
-  export let id = null;
-  /**
-   * (Optional) Sets a css class for the container
-   * @type {string}
-   */
-  export let cls = null;
-  /**
-   * Sets the width of the container
-   * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
-   */
-  export let width = "wide";
-  /**
-   * Sets the minimum height of the container relative to the height of the viewport
-   * @type {"auto"|"tall"|"full"}
-   */
-  export let height = "auto";
-  /**
-   * Optional margin above container
-   * @type {boolean}
-   */
-  export let marginTop = false;
-  /**
-   * Optional margin below container
-   * @type {boolean}
-   */
-  export let marginBottom = false;
-  /**
-   * 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 base theme background (accepts any valid CSS background value)
-   * @type {string}
-   */
-  export let background = null;
-  /**
-   * Allows client imported CSS for embeddable content
-   * @type {boolean}
-   */
-  export let allowClientOverrides = false;
-
-  $: _id = id && !(theme || background) ? id : null;
-  $: _cls = cls && !(theme || background) ? cls : "";
+	/**
+	 * Optional: Set the unique ID of the container
+	 * @type {string}
+	 */
+	export let id = "";
+	/**
+	 * Optional: Set a CSS class for the container
+	 * @type {string}
+	 */
+	export let cls = "";
+	/**
+	 * Sets the width of the container
+	 * @type {"narrow"|"medium"|"wide"|"wider"|"full"}
+	 */
+	export let width = "wide";
+	/**
+	 * Sets the height of the container
+	 * @type {number|string|null}
+	 */
+	export let height = null;
+	/**
+	 * Optional margin above container
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Optional margin below container
+	 * @type {boolean}
+	 */
+	export let marginBottom = false;
+	/**
+	 * Overrides the base theme background (accepts any valid CSS background value)
+	 * @type {string|null}
+	 */
+	export let background = null;
 </script>
 
-{#if ["narrow", "medium"].includes(width)}
-  <Theme
-    id="{id}"
-    cls="{cls}"
-    theme="{theme}"
-    background="{background}"
-    overrides="{themeOverrides}"
-    allowClientOverrides="{allowClientOverrides}"
-  >
-    <div
-      id="{_id}"
-      class="ons-page__container ons-container {_cls}"
-      class:ons-page__container--tall-height="{height === 'tall'}"
-      class:ons-page__container--full-height="{height === 'full'}"
-    >
-      {#if marginTop}<div class="ons-spacer"></div>{/if}
-      <div
-        class:ons-page__container--narrow="{width === 'narrow'}"
-        class:ons-page__container--medium="{width === 'medium'}"
-      >
-        <slot />
-      </div>
-      {#if marginBottom}<div class="ons-spacer"></div>{/if}
-    </div>
-  </Theme>
-{:else}
-  <Theme
-    id="{id}"
-    cls="{cls}"
-    theme="{theme}"
-    background="{background}"
-    overrides="{themeOverrides}"
-    allowClientOverrides="{allowClientOverrides}"
-  >
-    <div
-      id="{_id}"
-      class="ons-page__container ons-container {_cls}"
-      class:ons-page__container--wider="{width === 'wider'}"
-      class:ons-page__container--full="{width === 'full'}"
-      class:ons-page__container--tall-height="{height === 'tall'}"
-      class:ons-page__container--full-height="{height === 'full'}"
-    >
-      {#if marginTop}<div class="ons-spacer"></div>{/if}
-      <slot />
-      {#if marginBottom}<div class="ons-spacer"></div>{/if}
-    </div>
-  </Theme>
-{/if}
-
-<style>
-  .ons-page__container {
-    padding-top: 0.05px;
-    padding-bottom: 0.05px;
-  }
-  .ons-page__container--narrow {
-    max-width: 608px;
-    margin: 0 auto 0 0;
-  }
-  .ons-page__container--medium {
-    max-width: 800px;
-    margin: 0 auto 0 0;
-  }
-  .ons-page__container--wider {
-    max-width: 1240px;
-  }
-  .ons-page__container--full {
-    width: 100%;
-    max-width: 100%;
-    margin: 0;
-    padding: 0;
-  }
-  .ons-page__container--tall-height {
-    min-height: 80vh;
-    display: flex;
-    align-items: center;
-  }
-  .ons-page__container--full-height {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-  .ons-page__container--vpadding {
-    padding-top: 20px;
-    padding-bottom: 20px;
-  }</style>
+<div
+	{id}
+	class="ons-page__container {cls || ''}"
+	class:ons-container={width !== "full"}
+	class:ons-container--wide={width === "wider"}
+	class:ons-u-mt-xl={marginTop}
+	class:ons-u-mb-xl={marginBottom}
+	style:background
+	style:height={typeof height === "number" ? `${height}px` : height === "full" ? "100vh" : height}
+>
+	{#if width === "narrow"}
+		<div class="ons-grid">
+			<div class="ons-grid__col ons-col-10@m ons-col-8@l">
+				<slot />
+			</div>
+		</div>
+	{:else if width === "medium"}
+		<div class="ons-grid">
+			<div class="ons-grid__col ons-col-10@l">
+				<slot />
+			</div>
+		</div>
+	{:else}
+		<slot />
+	{/if}
+</div>

package/dist/wrappers/Container/Container.svelte.d.ts

@@ -0,0 +1,39 @@
+/** @typedef {typeof __propDef.props}  ContainerProps */
+/** @typedef {typeof __propDef.events}  ContainerEvents */
+/** @typedef {typeof __propDef.slots}  ContainerSlots */
+export default class Container 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;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ContainerProps = typeof __propDef.props;
+export type ContainerEvents = typeof __propDef.events;
+export type ContainerSlots = 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;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/wrappers/Container/docs/component.md

@@ -0,0 +1,10 @@
+A container to set the width, minimum height and theme of a block of content.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Container } from "@onsvisual/svelte-components";
+</script>
+
+<Container width="{narrow|medium|wide|full}"> {child_components} </Container>
+```