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

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

@@ -0,0 +1,14 @@
+A list component with modes for numbered, bulleted, dashed and bare lists. There is also an option to define list items as an array.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { List, Li } from "@onsvisual/svelte-components";
+</script>
+
+<List>
+  <Li>First list item</Li>
+  <Li>Second list item</Li>
+  <Li>Third list item</Li>
+</List>
+```

package/dist/layout/List/docs/example.md

@@ -0,0 +1,12 @@
+In this example, the list items are defined in an array. The items can include HTML tags.
+
+<!-- prettier-ignore -->
+```html
+<script>
+  import { List, Li } from "@onsvisual/svelte-components";
+
+  const items = ["<strong>First</strong> list item", "Second list item", "Third list item"];
+</script>
+
+<List items="{items}"/>
+```

package/dist/layout/NavSections/NavSection.svelte

@@ -1,77 +1,77 @@
 <script>
-  import { onMount, onDestroy, getContext } from "svelte";
-  import { slugify } from "../../js/utils.js";
-  import SectionBacklink from "./SectionBacklink.svelte";
+	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) Sets a css class for the section
-   * @type {string}
-   */
-  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;
+	/**
+	 * 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 a CSS class for the section
+	 * @type {string}
+	 */
+	export let cls = "";
+	/**
+	 * 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");
+	const sections = getContext("sections");
+	const observer = getContext("observer");
+	const tocId = getContext("tocId");
 
-  let section;
+	let section;
 
-  onMount(() => {
-    if (sections && observer) {
-      $sections = [...section.parentElement.getElementsByTagName("section")].filter(
-        (s) => s.dataset.type === "NavSection"
-      );
-      $observer.observe(section);
-    }
-  });
+	onMount(() => {
+		if (sections && observer) {
+			$sections = [...section.parentElement.getElementsByTagName("section")].filter(
+				(s) => s.dataset.type === "NavSection"
+			);
+			$observer.observe(section);
+		}
+	});
 
-  onDestroy(() => {
-    if (sections && observer) {
-      $sections = $sections.filter((s) => s.id !== id);
-      $observer.unobserve(section);
-    }
-  });
+	onDestroy(() => {
+		if (sections && observer) {
+			$sections = $sections.filter((s) => s.id !== id);
+			$observer.unobserve(section);
+		}
+	});
 </script>
 
 <section
-  id="{id}"
-  data-title="{title}"
-  data-type="NavSection"
-  data-subsection="{subsection}"
-  class="{cls}"
-  aria-label="{title}"
-  bind:this="{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 ons-u-fs-m" class:ons-u-vh="{hideTitle}">{title}</h3>
-    {:else}
-      <h2 class="section-title ons-u-mt-l ons-u-pb-no ons-u-pt-no" class:ons-u-vh="{hideTitle}">
-        {title}
-      </h2>
-    {/if}
-  {/if}
-  <slot />
-  {#if tocId}
-    <SectionBacklink tocId="{tocId}" />
-  {/if}
+	{#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/{@types/layout → layout}/NavSections/NavSection.svelte.d.ts

@@ -2,11 +2,11 @@
 /** @typedef {typeof __propDef.events}  NavSectionEvents */
 /** @typedef {typeof __propDef.slots}  NavSectionSlots */
 export default class NavSection extends SvelteComponentTyped<{
-    id?: string;
-    cls?: string;
-    title?: string;
-    hideTitle?: boolean;
-    subsection?: boolean;
+    id?: string | undefined;
+    cls?: string | undefined;
+    title?: string | undefined;
+    hideTitle?: boolean | undefined;
+    subsection?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -19,11 +19,11 @@ export type NavSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        cls?: string;
-        title?: string;
-        hideTitle?: boolean;
-        subsection?: boolean;
+        id?: string | undefined;
+        cls?: string | undefined;
+        title?: string | undefined;
+        hideTitle?: boolean | undefined;
+        subsection?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,48 @@
+<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 { Story } = defineMeta({
+		title: "Layout/NavSections",
+		component: NavSections,
+		tags: ["autodocs"],
+		argTypes: {},
+		parameters: withComponentDocs(componentDocs)
+	});
+</script>
+
+{#snippet template(args)}
+	<NavSections>
+		<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.stories.svelte.d.ts

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

package/dist/layout/NavSections/NavSections.svelte

@@ -1,194 +1,146 @@
 <script>
-  import { onMount, setContext } from "svelte";
-  import { writable } from "svelte/store";
-  import Container from "../../wrappers/Container/Container.svelte";
+	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) Sets a css class for the section
-   * @type {string}
-   */
-  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;
-  /**
-   * 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 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;
+	/**
+	 * ID for back-linking to table of contents
+	 * @type {string}
+	 */
+	export let id = "toc";
+	/**
+	 * Optional: Set a CSS class for the section
+	 * @type {string}
+	 */
+	export let cls = "";
+	/**
+	 * 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;
+	/**
+	 * Optional margin above section
+	 * @type {boolean}
+	 */
+	export let marginTop = false;
+	/**
+	 * Optional margin below section
+	 * @type {boolean}
+	 */
+	export let marginBottom = true;
 
-  let active;
+	let active;
 
-  setContext("tocId", id);
+	setContext("tocId", id);
 
-  const sections = writable([]);
-  setContext("sections", sections);
+	const sections = writable([]);
+	setContext("sections", sections);
 
-  const observer = writable();
-  setContext("observer", observer);
+	const observer = writable();
+	setContext("observer", observer);
 
-  function formatSections(sections) {
-    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];
-  }
-  $: formattedSections = formatSections($sections);
+	function formatSections(sections) {
+		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];
+	}
+	$: formattedSections = formatSections($sections);
 
-  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: `0% 0% -70% 0%`,
-          threshold: 0,
-        }
-      );
-    }
-  });
+	onMount(() => {
+		if (!noContents) {
+			$observer = new IntersectionObserver(
+				(entries, observer) => {
+					console.log(entries);
+					for (let i = 0; i < entries.length; i++) {
+						if (entries[i].isIntersecting) {
+							active = entries[i].target.id;
+							console.log({ active });
+							break;
+						}
+					}
+				},
+				{
+					root: null,
+					rootMargin: "-20% 0px -80%",
+					threshold: 0
+				}
+			);
+		}
+	});
 </script>
 
-<Container
-  cls="{cls}"
-  theme="{theme}"
-  themeOverrides="{themeOverrides}"
-  allowClientOverrides="{allowClientOverrides}"
-  width="{width}"
-  marginTop="{marginTop}"
-  marginBottom="{marginBottom}"
-  background="{background}"
->
-  <div class="ons-grid ons-js-toc-container ons-u-ml-no">
-    <slot name="header" />
-    <div class="ons-grid__col ons-col-4@m ons-u-pl-no ons-grid__col--sticky@m" id="{id}">
-      <aside class="ons-toc-container" role="complementary">
-        <nav class="ons-toc" aria-label="Pages in this guide">
-          <slot name="before-nav" />
-          {#if !noContents}
-            {#if contentsLabel}
-              <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">
-                {contentsLabel}
-              </h2>
-            {/if}
-            <ol class="ons-list ons-u-mb-m ons-list--dashed">
-              {#if formattedSections}
-                {#each formattedSections as section}
-                  <li class="ons-list__item">
-                    {#if section.id && section.title}
-                      <a
-                        href="#{section.id}"
-                        class="ons-list__link"
-                        class:ons-toc__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-toc__link-active="{subsection.id === active}"
-                            >
-                              {subsection.title}
-                            </a>
-                          </li>
-                        {/each}
-                      </ol>
-                    {/if}
-                  </li>
-                {/each}
-              {/if}
-            </ol>
-          {/if}
-          <slot name="after-nav" />
-        </nav>
-      </aside>
-    </div>
-    <div class="ons-nav-sections ons-grid__col ons-col-8@m ons-u-pl-no">
-      <slot name="before" />
-      {#if $observer}
-        <slot />
-      {/if}
-      <slot name="after" />
-    </div>
-    <slot name="footer" />
-  </div>
+<Container {cls} {width} {marginTop} {marginBottom}>
+	<div class="ons-grid ons-grid--spaced ons-grid--loose ons-js-toc-container">
+		<div class="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">
+							{#if formattedSections}
+								{#each formattedSections 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}
+							{/if}
+						</ol>
+					</nav>
+				{/if}
+				<slot name="after-nav" />
+			</aside>
+		</div>
+		<div class="ons-grid__col ons-col-8@m">
+			<slot name="before" />
+			{#if $observer}
+				<slot />
+			{/if}
+			<slot name="after" />
+		</div>
+	</div>
+	<slot name="footer" />
 </Container>
-
-<style>
-  @media (min-width: 740px) {
-    .ons-col-4\@m {
-      max-width: 280px;
-      width: 280px;
-    }
-    .ons-col-8\@m {
-      max-width: calc(100% - 280px);
-      width: calc(100% - 280px);
-    }
-  }
-  .ons-list__item-indented {
-    margin-left: 50px !important;
-  }
-  .ons-nav-sections :global(section:first-of-type h2) {
-    margin-top: 27px !important;
-  }</style>