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

package/dist/{@types/layout → layout}/Scroller/Scroller.svelte.d.ts

@@ -2,16 +2,17 @@
 /** @typedef {typeof __propDef.events}  ScrollerEvents */
 /** @typedef {typeof __propDef.slots}  ScrollerSlots */
 export default class Scroller extends SvelteComponentTyped<{
-    id?: string;
-    marginBottom?: boolean;
-    visible?: boolean;
-    progress?: number;
-    splitscreen?: boolean;
-    threshold?: number;
-    count?: number;
-    index?: number;
-    sectionId?: string;
-    offset?: number;
+    id?: string | undefined;
+    marginTop?: boolean | undefined;
+    marginBottom?: boolean | undefined;
+    progress?: number | undefined;
+    visible?: boolean | undefined;
+    threshold?: number | undefined;
+    splitscreen?: boolean | undefined;
+    count?: number | undefined;
+    index?: number | null | undefined;
+    sectionId?: string | null | undefined;
+    offset?: number | undefined;
 }, {
     change: CustomEvent<any>;
     enter: CustomEvent<any>;
@@ -29,16 +30,17 @@ export type ScrollerSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        marginBottom?: boolean;
-        visible?: boolean;
-        progress?: number;
-        splitscreen?: boolean;
-        threshold?: number;
-        count?: number;
-        index?: number;
-        sectionId?: string;
-        offset?: number;
+        id?: string | undefined;
+        marginTop?: boolean | undefined;
+        marginBottom?: boolean | undefined;
+        progress?: number | undefined;
+        visible?: boolean | undefined;
+        threshold?: number | undefined;
+        splitscreen?: boolean | undefined;
+        count?: number | undefined;
+        index?: number | null | undefined;
+        sectionId?: string | null | undefined;
+        offset?: number | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -1,84 +1,65 @@
 <script>
-  import { onMount, onDestroy, getContext } from "svelte";
-  import Container from "../../wrappers/Container/Container.svelte";
+	import { onMount, onDestroy, getContext } from "svelte";
+	import Container from "../../wrappers/Container/Container.svelte";
 
-  /**
-   * Sets the unique ID of the section
-   * @type {string}
-   */
-  export let id = null;
-  /**
-   * 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;
-  /**
-   * Allows client imported CSS for embeddable content
-   * @type {boolean}
-   */
-  export let allowClientOverrides = false;
-  /**
-   * Sets the title of the section
-   * @type {string}
-   */
-  export let title = "";
-  /**
-   * Allows the h2 title tag for the section to be visually hidden
-   * @type {boolean}
-   */
-  export let hideTitle = false;
+	/**
+	 * Sets the unique ID of the section (identifiable in associated scroll events)
+	 * @type {string}
+	 */
+	export let id = "";
+	/**
+	 * Optional: Sets the title of the section
+	 * @type {string}
+	 */
+	export let title = "";
+	/**
+	 * Allows the h2 title tag for the section to be visually hidden
+	 * @type {boolean}
+	 */
+	export let hideTitle = false;
 
-  let section;
+	let section;
 
-  const sections = getContext("sections");
+	const sections = getContext("sections");
 
-  onMount(() => {
-    if (sections) {
-      $sections = [...$sections, section];
-    }
-  });
+	onMount(() => {
+		if (sections) {
+			$sections = [...$sections, section];
+		}
+	});
 
-  onDestroy(() => {
-    if (sections) {
-      $sections = $sections.filter((s) => s !== section);
-    }
-  });
+	onDestroy(() => {
+		if (sections) {
+			$sections = $sections.filter((s) => s !== section);
+		}
+	});
 </script>
 
-<section data-id="{id}" bind:this="{section}">
-  <Container
-    theme="{theme}"
-    themeOverrides="{themeOverrides}"
-    allowClientOverrides="{allowClientOverrides}"
-    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 data-id={id} bind:this={section}>
+	<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(--background, white);
-    opacity: 90%;
-  }</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/{@types/layout → layout}/Scroller/ScrollerSection.svelte.d.ts

@@ -2,12 +2,9 @@
 /** @typedef {typeof __propDef.events}  ScrollerSectionEvents */
 /** @typedef {typeof __propDef.slots}  ScrollerSectionSlots */
 export default class ScrollerSection extends SvelteComponentTyped<{
-    id?: string;
-    theme?: "light" | "dark" | "lightblue";
-    allowClientOverrides?: boolean;
-    themeOverrides?: any;
-    title?: string;
-    hideTitle?: boolean;
+    id?: string | undefined;
+    title?: string | undefined;
+    hideTitle?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,12 +17,9 @@ export type ScrollerSectionSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string;
-        theme?: "light" | "dark" | "lightblue";
-        allowClientOverrides?: boolean;
-        themeOverrides?: object;
-        title?: string;
-        hideTitle?: boolean;
+        id?: string | undefined;
+        title?: string | undefined;
+        hideTitle?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -0,0 +1,41 @@
+Components for adding scrollytelling sections to a feature article.
+
+Note: These examples will not preview correctly in the iframes on this page. You can select the examples from the menu instead.
+
+<!-- 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

@@ -0,0 +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} />

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

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

package/dist/layout/Section/Section.svelte

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

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

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  SectionProps */
+/** @typedef {typeof __propDef.events}  SectionEvents */
+/** @typedef {typeof __propDef.slots}  SectionSlots */
+export default class Section 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;
+    title?: string | undefined;
+    hideTitle?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type SectionProps = typeof __propDef.props;
+export type SectionEvents = typeof __propDef.events;
+export type SectionSlots = 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;
+        title?: string | undefined;
+        hideTitle?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +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>
+```

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

@@ -0,0 +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={{}} />

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

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