@onsvisual/svelte-components 1.0.40 → 1.0.42

package/dist/layout/NavSections/NavSection.svelte

@@ -1,90 +1,90 @@
-<script>
-	import { onMount, onDestroy, getContext } from "svelte";
-	import { slugify } from "../../js/utils.js";
-	import BackLink from "../BackLink/BackLink.svelte";
-
-	/**
-	 * Sets the title of the section
-	 * @type {string}
-	 */
-	export let title = "Section title";
-	/**
-	 * Sets the unique ID of the section (if not set, this will be slugified from the title)
-	 * @type {string}
-	 */
-	export let id = slugify(title);
-	/**
-	 * Optional: Set an additional CSS class for the section
-	 * @type {string|null}
-	 */
-	export let cls = null;
-	/**
-	 * Allows the h2 title tag for the section to be visually hidden
-	 * @type {boolean}
-	 */
-	export let hideTitle = false;
-	/**
-	 * Treat a section as sub-section. It will have an h3 title, and will be indented in the contents table
-	 * @type {boolean}
-	 */
-	export let subsection = false;
-
-	const sections = getContext("sections");
-	const observer = getContext("observer");
-	const tocId = getContext("tocId");
-
-	let section;
-	let mounted = false;
-	let observed = false;
-
-	// This should allow the table of contents (toc) to render before hydration
-	$sections = [
-		...$sections.filter((s) => s.id !== id),
-		{ id, dataset: { title, subsection: String(subsection) } }
-	];
-
-	// This allows sections to be highlighted on the toc after hydration,
-	// and for sections to be added/removed gracefully from the DOM
-	function addToObserver(observer, mounted) {
-		if (mounted && observer && !observed) {
-			$sections = [...section.parentElement.getElementsByTagName("section")].filter(
-				(s) => s.dataset.type === "NavSection"
-			);
-			observer.observe(section);
-			observed = true;
-		}
-	}
-	$: addToObserver($observer, mounted);
-
-	onMount(() => (mounted = true));
-
-	onDestroy(() => {
-		if ($observer) $observer.unobserve(section);
-		if ($sections) $sections = $sections.filter((s) => s.id !== id);
-		mounted = observed = false;
-	});
-</script>
-
-<section
-	{id}
-	data-title={title}
-	data-type="NavSection"
-	data-subsection={subsection}
-	class={cls}
-	aria-label={title}
-	bind:this={section}
->
-	{#if title}
-		{#if subsection}
-			<h3 class="subsection-title" class:ons-u-vh={hideTitle}>{title}</h3>
-		{:else}
-			<h2 class="section-title" class:ons-u-vh={hideTitle}>
-				{title}
-			</h2>
-		{/if}
-	{/if}
-	<slot />
-	{#if tocId}
-		<BackLink href="#{tocId}" cls="ons-u-d-no@m" />
-	{/if}
-</section>
+<script>
+	import { onMount, onDestroy, getContext } from "svelte";
+	import { slugify } from "../../js/utils.js";
+	import BackLink from "../BackLink/BackLink.svelte";
+
+	/**
+	 * Sets the title of the section
+	 * @type {string}
+	 */
+	export let title = "Section title";
+	/**
+	 * Sets the unique ID of the section (if not set, this will be slugified from the title)
+	 * @type {string}
+	 */
+	export let id = slugify(title);
+	/**
+	 * Optional: Set an additional CSS class for the section
+	 * @type {string|null}
+	 */
+	export let cls = null;
+	/**
+	 * Allows the h2 title tag for the section to be visually hidden
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
+	/**
+	 * Treat a section as sub-section. It will have an h3 title, and will be indented in the contents table
+	 * @type {boolean}
+	 */
+	export let subsection = false;
+
+	const sections = getContext("sections");
+	const observer = getContext("observer");
+	const tocId = getContext("tocId");
+
+	let section;
+	let mounted = false;
+	let observed = false;
+
+	// This should allow the table of contents (toc) to render before hydration
+	$sections = [
+		...$sections.filter((s) => s.id !== id),
+		{ id, dataset: { title, subsection: String(subsection) } }
+	];
+
+	// This allows sections to be highlighted on the toc after hydration,
+	// and for sections to be added/removed gracefully from the DOM
+	function addToObserver(observer, mounted) {
+		if (mounted && observer && !observed) {
+			$sections = [...section.parentElement.getElementsByTagName("section")].filter(
+				(s) => s.dataset.type === "NavSection"
+			);
+			observer.observe(section);
+			observed = true;
+		}
+	}
+	$: addToObserver($observer, mounted);
+
+	onMount(() => (mounted = true));
+
+	onDestroy(() => {
+		if ($observer) $observer.unobserve(section);
+		if ($sections) $sections = $sections.filter((s) => s.id !== id);
+		mounted = observed = false;
+	});
+</script>
+
+<section
+	{id}
+	data-title={title}
+	data-type="NavSection"
+	data-subsection={subsection}
+	class={cls}
+	aria-label={title}
+	bind:this={section}
+>
+	{#if title}
+		{#if subsection}
+			<h3 class="subsection-title" class:ons-u-vh={hideTitle}>{title}</h3>
+		{:else}
+			<h2 class="section-title" class:ons-u-vh={hideTitle}>
+				{title}
+			</h2>
+		{/if}
+	{/if}
+	<slot />
+	{#if tocId}
+		<BackLink href="#{tocId}" cls="ons-u-d-no@m" />
+	{/if}
+</section>

package/dist/layout/NavSections/NavSections.stories.svelte

@@ -1,51 +1,51 @@
-<script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import { withComponentDocs } from "../../js/withParams.js";
-	import NavSections from "./NavSections.svelte";
-	import NavSection from "./NavSection.svelte";
-	import componentDocs from "./docs/component.md?raw";
-	import { lipsum } from "../../js/utils.js";
-
-	const parameters = { ...withComponentDocs(componentDocs), layout: "fullscreen" };
-	parameters.docs.story = { inline: false, iframeHeight: 600 };
-
-	const { Story } = defineMeta({
-		title: "Layout/NavSections",
-		component: NavSections,
-		tags: ["autodocs"],
-		argTypes: {},
-		parameters
-	});
-</script>
-
-{#snippet template(args)}
-	<NavSections {...args}>
-		<NavSection title="Section one">
-			<p>
-				{lipsum()}
-			</p>
-		</NavSection>
-		<NavSection title="Subsection A" subsection>
-			<p>
-				{lipsum(4, 1)}
-			</p>
-		</NavSection>
-		<NavSection title="Subsection B" subsection>
-			<p>
-				{lipsum(4, 2)}
-			</p>
-		</NavSection>
-		<NavSection title="Section two">
-			<p>
-				{lipsum(4, 3)}
-			</p>
-		</NavSection>
-		<NavSection title="Section three">
-			<p>
-				{lipsum()}
-			</p>
-		</NavSection>
-	</NavSections>
-{/snippet}
-
-<Story name="Default" args={{}} {template} />
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { withComponentDocs } from "../../js/withParams.js";
+	import NavSections from "./NavSections.svelte";
+	import NavSection from "./NavSection.svelte";
+	import componentDocs from "./docs/component.md?raw";
+	import { lipsum } from "../../js/utils.js";
+
+	const parameters = { ...withComponentDocs(componentDocs), layout: "fullscreen" };
+	parameters.docs.story = { inline: false, iframeHeight: 600 };
+
+	const { Story } = defineMeta({
+		title: "Layout/NavSections",
+		component: NavSections,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters
+	});
+</script>
+
+{#snippet template(args)}
+	<NavSections {...args}>
+		<NavSection title="Section one">
+			<p>
+				{lipsum()}
+			</p>
+		</NavSection>
+		<NavSection title="Subsection A" subsection>
+			<p>
+				{lipsum(4, 1)}
+			</p>
+		</NavSection>
+		<NavSection title="Subsection B" subsection>
+			<p>
+				{lipsum(4, 2)}
+			</p>
+		</NavSection>
+		<NavSection title="Section two">
+			<p>
+				{lipsum(4, 3)}
+			</p>
+		</NavSection>
+		<NavSection title="Section three">
+			<p>
+				{lipsum()}
+			</p>
+		</NavSection>
+	</NavSections>
+{/snippet}
+
+<Story name="Default" args={{}} {template} />

package/dist/layout/NavSections/NavSections.svelte

@@ -1,160 +1,160 @@
-<script>
-	import { onMount, setContext } from "svelte";
-	import { writable } from "svelte/store";
-	import Container from "../../wrappers/Container/Container.svelte";
-
-	/**
-	 * ID for back-linking to table of contents
-	 * @type {string}
-	 */
-	export let id = "toc";
-	/**
-	 * 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 = "wide";
-	/**
-	 * A label for the page contents nav
-	 * @type {string}
-	 */
-	export let contentsLabel = "Page contents";
-	/**
-	 * Don't include table of contents (allows for custom uses of nav panel)
-	 * @type {boolean}
-	 */
-	export let noContents = false;
-	/**
-	 * Adds margin above section
-	 * @type {boolean}
-	 */
-	export let marginTop = false;
-	/**
-	 * Adds margin below section
-	 * @type {boolean}
-	 */
-	export let marginBottom = true;
-
-	let el;
-	let active;
-	let mounted = false;
-
-	setContext("tocId", id);
-
-	const sections = writable([]);
-	setContext("sections", sections);
-
-	const observer = writable();
-	setContext("observer", observer);
-
-	function formatSections(sections) {
-		if (sections.length === 0) return [];
-		const secs = [];
-		let sec = { subsections: [] };
-		for (const section of sections) {
-			if (section.dataset.subsection !== "true") {
-				if (sec.title || sec.subsections.length > 0) secs.push(sec);
-				sec = { id: section.id, title: section.dataset.title, subsections: [] };
-			} else {
-				sec.subsections.push({ id: section.id, title: section.dataset.title });
-			}
-		}
-		return [...secs, sec];
-	}
-
-	onMount(() => {
-		if (!noContents) {
-			$observer = new IntersectionObserver(
-				(entries, observer) => {
-					for (let i = 0; i < entries.length; i++) {
-						if (entries[i].isIntersecting) {
-							active = entries[i].target.id;
-							break;
-						}
-					}
-				},
-				{
-					root: null,
-					rootMargin: "-25% 0px -75%",
-					threshold: 0
-				}
-			);
-		}
-		// The table of contents doesn't populate unless it's after the main content
-		// This is a trick to flip the order when the page hydrates
-		el.prepend(el.lastElementChild);
-		mounted = true;
-	});
-</script>
-
-<Container {cls} {width} {marginTop} {marginBottom}>
-	<div
-		class="ons-grid ons-grid--spaced ons-grid--loose ons-js-toc-container"
-		class:flip-display-order={!mounted}
-		bind:this={el}
-	>
-		<div class="ons-nav-sections-content ons-grid__col ons-col-8@m">
-			<slot name="before" />
-			<slot />
-			<slot name="after" />
-		</div>
-		<div class="ons-nav-sections-toc ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
-			<aside class="ons-table-of-contents-container" role="complementary">
-				<slot name="before-nav" />
-				{#if !noContents}
-					<nav class="ons-table-of-contents" aria-label="Sections in this page">
-						{#if contentsLabel}
-							<h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">Contents</h2>
-						{/if}
-						<ol class="ons-list ons-u-mb-l ons-list--dashed">
-							{#each formatSections($sections) as section}
-								<li class="ons-list__item">
-									{#if section.id && section.title}
-										<a
-											href="#{section.id}"
-											class="ons-list__link"
-											class:ons-table-of-contents__link-active={section.id === active}
-										>
-											{section.title}
-										</a>
-									{/if}
-									{#if section.subsections.length > 0}
-										<ol class="ons-list ons-u-mb-no ons-list--dashed">
-											{#each section.subsections as subsection}
-												<li class="ons-list__item">
-													<a
-														href="#{subsection.id}"
-														class="ons-list__link"
-														class:ons-table-of-contents__link-active={subsection.id === active}
-													>
-														{subsection.title}
-													</a>
-												</li>
-											{/each}
-										</ol>
-									{/if}
-								</li>
-							{/each}
-						</ol>
-					</nav>
-				{/if}
-				<slot name="after-nav" />
-			</aside>
-		</div>
-	</div>
-	<slot name="footer" />
-</Container>
-
-<style>
-	/* These classes force the table of contents to render on the left of the page before hydration */
-	.flip-display-order {
-		direction: rtl;
-	}
-	.flip-display-order > * {
-		direction: initial;
-	}
-</style>
+<script>
+	import { onMount, setContext } from "svelte";
+	import { writable } from "svelte/store";
+	import Container from "../../wrappers/Container/Container.svelte";
+
+	/**
+	 * ID for back-linking to table of contents
+	 * @type {string}
+	 */
+	export let id = "toc";
+	/**
+	 * 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 = "wide";
+	/**
+	 * A label for the page contents nav
+	 * @type {string}
+	 */
+	export let contentsLabel = "Page contents";
+	/**
+	 * Don't include table of contents (allows for custom uses of nav panel)
+	 * @type {boolean}
+	 */
+	export let noContents = false;
+	/**
+	 * Adds margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Adds margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = true;
+
+	let el;
+	let active;
+	let mounted = false;
+
+	setContext("tocId", id);
+
+	const sections = writable([]);
+	setContext("sections", sections);
+
+	const observer = writable();
+	setContext("observer", observer);
+
+	function formatSections(sections) {
+		if (sections.length === 0) return [];
+		const secs = [];
+		let sec = { subsections: [] };
+		for (const section of sections) {
+			if (section.dataset.subsection !== "true") {
+				if (sec.title || sec.subsections.length > 0) secs.push(sec);
+				sec = { id: section.id, title: section.dataset.title, subsections: [] };
+			} else {
+				sec.subsections.push({ id: section.id, title: section.dataset.title });
+			}
+		}
+		return [...secs, sec];
+	}
+
+	onMount(() => {
+		if (!noContents) {
+			$observer = new IntersectionObserver(
+				(entries, observer) => {
+					for (let i = 0; i < entries.length; i++) {
+						if (entries[i].isIntersecting) {
+							active = entries[i].target.id;
+							break;
+						}
+					}
+				},
+				{
+					root: null,
+					rootMargin: "-25% 0px -75%",
+					threshold: 0
+				}
+			);
+		}
+		// The table of contents doesn't populate unless it's after the main content
+		// This is a trick to flip the order when the page hydrates
+		el.prepend(el.lastElementChild);
+		mounted = true;
+	});
+</script>
+
+<Container {cls} {width} {marginTop} {marginBottom}>
+	<div
+		class="ons-grid ons-grid--spaced ons-grid--loose ons-js-toc-container"
+		class:flip-display-order={!mounted}
+		bind:this={el}
+	>
+		<div class="ons-nav-sections-content ons-grid__col ons-col-8@m">
+			<slot name="before" />
+			<slot />
+			<slot name="after" />
+		</div>
+		<div class="ons-nav-sections-toc ons-grid__col ons-grid__col--sticky@m ons-col-4@m">
+			<aside class="ons-table-of-contents-container" role="complementary">
+				<slot name="before-nav" />
+				{#if !noContents}
+					<nav class="ons-table-of-contents" aria-label="Sections in this page">
+						{#if contentsLabel}
+							<h2 class="ons-table-of-contents__title ons-u-fs-r--b ons-u-mb-s">Contents</h2>
+						{/if}
+						<ol class="ons-list ons-u-mb-l ons-list--dashed">
+							{#each formatSections($sections) as section}
+								<li class="ons-list__item">
+									{#if section.id && section.title}
+										<a
+											href="#{section.id}"
+											class="ons-list__link"
+											class:ons-table-of-contents__link-active={section.id === active}
+										>
+											{section.title}
+										</a>
+									{/if}
+									{#if section.subsections.length > 0}
+										<ol class="ons-list ons-u-mb-no ons-list--dashed">
+											{#each section.subsections as subsection}
+												<li class="ons-list__item">
+													<a
+														href="#{subsection.id}"
+														class="ons-list__link"
+														class:ons-table-of-contents__link-active={subsection.id === active}
+													>
+														{subsection.title}
+													</a>
+												</li>
+											{/each}
+										</ol>
+									{/if}
+								</li>
+							{/each}
+						</ol>
+					</nav>
+				{/if}
+				<slot name="after-nav" />
+			</aside>
+		</div>
+	</div>
+	<slot name="footer" />
+</Container>
+
+<style>
+	/* These classes force the table of contents to render on the left of the page before hydration */
+	.flip-display-order {
+		direction: rtl;
+	}
+	.flip-display-order > * {
+		direction: initial;
+	}
+</style>

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

@@ -1,25 +1,25 @@
-Use this component to allow users to quickly jump to named sections within a long page of content.
-
-As the user scrolls down the page, a table of contents will remain visible on the left of the viewport and will highlight the subheading of the section currently in view.
-
-<!-- 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>
-```
+Use this component to allow users to quickly jump to named sections within a long page of content.
+
+As the user scrolls down the page, a table of contents will remain visible on the left of the viewport and will highlight the subheading of the section currently in view.
+
+<!-- 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>
+```