@onsvisual/svelte-components 1.0.40 → 1.0.42

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -1,70 +1,70 @@
-<script>
-	import { onMount, onDestroy, getContext } from "svelte";
-	import Container from "../../wrappers/Container/Container.svelte";
-
-	/**
-	 * Sets the unique ID of the section (identifiable in associated scroll events)
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Optional: Sets the title of the section
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Allows the h2 title tag for the section to be visually hidden
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * Optional: Set an additional CSS class for the component
-	 * @type {string|null}
-	 */
-	export let cls = null;
-
-	let section;
-
-	const sections = getContext("sections");
-
-	onMount(() => {
-		if (sections) {
-			$sections = [...$sections, section];
-		}
-	});
-
-	onDestroy(() => {
-		if (sections) {
-			$sections = $sections.filter((s) => s !== section);
-		}
-	});
-</script>
-
-<section data-id={id} bind:this={section} class={cls}>
-	<Container width="narrow">
-		<div class="ons-scroller-section">
-			{#if title}
-				<h2 class="section-title" class:ons-u-vh={hideTitle}>{title}</h2>
-			{/if}
-			<slot />
-		</div>
-	</Container>
-</section>
-
-<style>
-	.ons-scroller-section {
-		position: relative;
-	}
-	.ons-scroller-section::after {
-		content: " ";
-		position: absolute;
-		z-index: -1;
-		top: 0;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		margin: -1rem;
-		background: var(--ons-color-page-light);
-		opacity: 90%;
-	}
-</style>
+<script>
+	import { onMount, onDestroy, getContext } from "svelte";
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * Sets the unique ID of the section (identifiable in associated scroll events)
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Optional: Sets the title of the section
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Allows the h2 title tag for the section to be visually hidden
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Optional: Set an additional CSS class for the component
+	 * @type {string|null}
+	 */
+	export let cls = null;
+
+	let section;
+
+	const sections = getContext("sections");
+
+	onMount(() => {
+		if (sections) {
+			$sections = [...$sections, section];
+		}
+	});
+
+	onDestroy(() => {
+		if (sections) {
+			$sections = $sections.filter((s) => s !== section);
+		}
+	});
+</script>
+
+<section data-id={id} bind:this={section} class={cls}>
+	<Container width="narrow">
+		<div class="ons-scroller-section">
+			{#if title}
+				<h2 class="section-title" class:ons-u-vh={hideTitle}>{title}</h2>
+			{/if}
+			<slot />
+		</div>
+	</Container>
+</section>
+
+<style>
+	.ons-scroller-section {
+		position: relative;
+	}
+	.ons-scroller-section::after {
+		content: " ";
+		position: absolute;
+		z-index: -1;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		margin: -1rem;
+		background: var(--ons-color-page-light);
+		opacity: 90%;
+	}
+</style>

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

@@ -1,39 +1,39 @@
-Components for adding interactive scrollytelling sections to a feature article.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Scroller, ScrollerSection, Container } from "@onsvisual/svelte-components";
-
-  function updateScroller(e) {
-    // Function to update scroller background components, using the following props:
-    // 1. e.detail.id - the ID of the Scroller
-    // 2. e.detail.index - the index of the current ScrollerSection
-    // 3. e.detail.sectionId - the (optional) ID of the current ScrollerSection
-  }
-</script>
-
-<Scroller on:change="{updateScroller}" id="{any_unique_id}">
-  <div slot="background">
-    <!--
-      The <Container> component is optional here.
-      It is a useful way to set the height and width of the background.
-    -->
-    <Container width="full" height="full">
-      {background_components}
-    </Container>
-  </div>
-  <div slot="foreground">
-    <ScrollerSection id="{any_unique_id}">
-      <p>First section caption.</p>
-    </ScrollerSection>
-    <ScrollerSection id="{any_unique_id}">
-      <p>Second section caption.</p>
-    </ScrollerSection>
-    <ScrollerSection id="{any_unique_id}">
-      <p>Third section caption.</p>
-      </p>
-    </ScrollerSection>
-  </div>
-</Scroller>
-```
+Components for adding interactive scrollytelling sections to a feature article.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Scroller, ScrollerSection, Container } from "@onsvisual/svelte-components";
+
+  function updateScroller(e) {
+    // Function to update scroller background components, using the following props:
+    // 1. e.detail.id - the ID of the Scroller
+    // 2. e.detail.index - the index of the current ScrollerSection
+    // 3. e.detail.sectionId - the (optional) ID of the current ScrollerSection
+  }
+</script>
+
+<Scroller on:change="{updateScroller}" id="{any_unique_id}">
+  <div slot="background">
+    <!--
+      The <Container> component is optional here.
+      It is a useful way to set the height and width of the background.
+    -->
+    <Container width="full" height="full">
+      {background_components}
+    </Container>
+  </div>
+  <div slot="foreground">
+    <ScrollerSection id="{any_unique_id}">
+      <p>First section caption.</p>
+    </ScrollerSection>
+    <ScrollerSection id="{any_unique_id}">
+      <p>Second section caption.</p>
+    </ScrollerSection>
+    <ScrollerSection id="{any_unique_id}">
+      <p>Third section caption.</p>
+      </p>
+    </ScrollerSection>
+  </div>
+</Scroller>
+```

package/dist/layout/Section/Section.stories.svelte

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

package/dist/layout/Section/Section.svelte

@@ -1,60 +1,60 @@
-<script>
-	import { slugify } from "../../js/utils.js";
-	import Container from "../../wrappers/Container/Container.svelte";
-
-	/**
-	 * Sets the unique ID of the section
-	 * @type {string|null}
-	 */
-	export let id = null;
-	/**
-	 * Optional: Set an additional CSS class for the section
-	 * @type {string|null}
-	 */
-	export let cls = null;
-	/**
-	 * 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 the title of the section
-	 * @type {string|null}
-	 */
-	export let title = null;
-	/**
-	 * Allows the h2 title tag for the section to be visually hidden
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * Adds margin above section
-	 * @type {boolean}
-	 */
-	export let marginTop = false;
-	/**
-	 * Adds margin below section
-	 * @type {boolean}
-	 */
-	export let marginBottom = true;
-</script>
-
-<Container id={id ? id : slugify(title)} {cls} {width} {height} {marginTop} {marginBottom}>
-	<section aria-label={title} class="ons-section__text">
-		{#if title}
-			<h2 class="section-title" class:ons-u-vh={hideTitle}>{title}</h2>
-		{/if}
-		<slot />
-	</section>
-</Container>
-
-<style>
-	.ons-section__text > :global(*:last-child) {
-		margin-bottom: 0;
-	}
-</style>
+<script>
+	import { slugify } from "../../js/utils.js";
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * Sets the unique ID of the section
+	 * @type {string|null}
+	 */
+	export let id = null;
+	/**
+	 * Optional: Set an additional CSS class for the section
+	 * @type {string|null}
+	 */
+	export let cls = null;
+	/**
+	 * 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 the title of the section
+	 * @type {string|null}
+	 */
+	export let title = null;
+	/**
+	 * Allows the h2 title tag for the section to be visually hidden
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Adds margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Adds margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = true;
+</script>
+
+<Container id={id ? id : slugify(title)} {cls} {width} {height} {marginTop} {marginBottom}>
+	<section aria-label={title} class="ons-section__text">
+		{#if title}
+			<h2 class="section-title" class:ons-u-vh={hideTitle}>{title}</h2>
+		{/if}
+		<slot />
+	</section>
+</Container>
+
+<style>
+	.ons-section__text > :global(*:last-child) {
+		margin-bottom: 0;
+	}
+</style>

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

@@ -1,12 +1,12 @@
-A layout block for text content, including an optional title.
-
-<!-- prettier-ignore -->
-```html
-<script>
-  import { Section } from "@onsvisual/svelte-components";
-</script>
-
-<Section width="{narrow|medium|wide|full}" title="Section title">
-  <p>Contents of section.</p>
-</Section>
-```
+A layout block for text content, including an optional title.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { Section } from "@onsvisual/svelte-components";
+</script>
+
+<Section width="{narrow|medium|wide|full}" title="Section title">
+  <p>Contents of section.</p>
+</Section>
+```

package/dist/layout/ShareButtons/ShareButtons.stories.svelte

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