@onsvisual/svelte-components 1.0.33 → 1.0.35

package/dist/layout/DocumentList/DocumentList.stories.svelte

@@ -49,12 +49,27 @@
 				"This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community."
 		}
 	];
+
+	const items3 = [
+		{
+			title: "Including everyone in Census",
+			href: "#0",
+			meta: "Poster, PDF, 499KB, 1 page"
+		},
+		{
+			title: "Community handbook for Census 2021",
+			href: "#0",
+			meta: "Booklet,PDF, 3.3MB, 16 pages"
+		}
+	];
 </script>
 
 <Story name="Document list with images" args={{ items: items1 }} />
 
 <Story name="Article list with featured item" args={{ items: items2 }} />
 
+<Story name="Compact list, no description" args={{ items: items3, compact: true }} />
+
 <Story name="Individually defined documents" asChild parameters={withStoryDocs(exampleDocs)}>
 	<DocumentList>
 		<Document

package/dist/layout/DocumentList/DocumentList.svelte

@@ -5,6 +5,10 @@
 	 * @type {object[]|null}
 	 */
 	export let items = null;
+	/** Compact mode. Removes horizonatal lines between documents
+	 * @type {boolean}
+	 */
+	export let compact = false;
 	/**
 	 * Optional: Set an additional CSS class for the component
 	 * @type {string|null}
@@ -12,7 +16,7 @@
 	export let cls = null;
 </script>
 
-<ul class="ons-document-list {cls}">
+<ul class="ons-document-list {cls}" class:ons-document-list--compact={compact}>
 	<slot />
 	{#if Array.isArray(items)}
 		{#each items as item}
@@ -20,3 +24,10 @@
 		{/each}
 	{/if}
 </ul>
+
+<style>
+	.ons-document-list--compact > :global(.ons-document-list__item) {
+		padding-bottom: 0;
+		border: none;
+	}
+</style>

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

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  DocumentListSlots */
 export default class DocumentList extends SvelteComponentTyped<{
     cls?: string | null | undefined;
+    compact?: boolean | undefined;
     items?: object[] | null | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,6 +18,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         cls?: string | null | undefined;
+        compact?: boolean | undefined;
         items?: object[] | null | undefined;
     };
     events: {

package/dist/layout/Hero/Hero.svelte

@@ -340,7 +340,9 @@
 						</svg>
 					</div>
 				{/if}
-				<DescriptionList items={meta || []} mode="inline" />
+				{#if Array.isArray(meta)}
+					<DescriptionList items={meta} mode="inline" />
+				{/if}
 				<slot name="after" />
 			</div>
 		</Container>

package/dist/layout/NavSections/NavSection.svelte

@@ -33,22 +33,32 @@
 	const observer = getContext("observer");
 	const tocId = getContext("tocId");
 
-	let section;
+	let mounted = false;
+	let observed = false;
 
-	onMount(() => {
-		if (sections && observer) {
+	// This allows the table of contents (toc) to render before hydration
+	let section = { id, dataset: { title, subsection: String(subsection) } };
+	$sections = [...$sections.filter((s) => s.id !== section.id), section];
+
+	// 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);
+			observer.observe(section);
+			observed = true;
 		}
-	});
+	}
+	$: addToObserver($observer, mounted);
+
+	onMount(() => (mounted = true));
 
 	onDestroy(() => {
-		if (sections && observer) {
-			$sections = $sections.filter((s) => s.id !== id);
-			$observer.unobserve(section);
-		}
+		if ($observer) $observer.unobserve(section);
+		if ($sections) $sections = $sections.filter((s) => s.id !== id);
+		mounted = observed = false;
 	});
 </script>
 

package/dist/layout/NavSections/NavSections.svelte

@@ -77,7 +77,7 @@
 				},
 				{
 					root: null,
-					rootMargin: "-20% 0px -80%",
+					rootMargin: "-25% 0px -75%",
 					threshold: 0
 				}
 			);
@@ -134,9 +134,7 @@
 		</div>
 		<div class="ons-grid__col ons-col-8@m">
 			<slot name="before" />
-			{#if $observer}
-				<slot />
-			{/if}
+			<slot />
 			<slot name="after" />
 		</div>
 	</div>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.0.33",
+	"version": "1.0.35",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",