@onsvisual/svelte-components 0.0.3 → 0.0.4

package/dist/layout/Hero/Hero.svelte

@@ -0,0 +1,74 @@
+<script>
+  import { validDate, formatDate } from "$lib/js/utils.js";
+  import Container from "$lib/wrappers/Container/Container.svelte";
+
+  /**
+   * (Optional) Sets the unique ID of the section
+   * @type {string}
+   */
+  export let id = null;
+  /**
+   * Sets the width of the section
+   * @type {"narrow"|"medium"|"wide"|"full"}
+   */
+  export let width = "medium";
+  /**
+   * Sets the minimum height of the section
+   * @type {"auto"|"tall"|"full"}
+   */
+  export let height = "tall";
+  /**
+   * Sets the title/headline
+   * @type {string}
+   */
+  export let title = "Page headline";
+  /**
+   * Sets the lede (short intro text)
+   * @type {string}
+   */
+  export let lede = "";
+  /**
+   * (Optional) Sets the date, using the format "yyyy-mm-dd"
+   * @type {string}
+   */
+  export let date = null;
+  /**
+   * Sets a predefined theme
+   * @type {"light"|"dark"|"lightblue"}
+   */
+  export let theme = "dark";
+  /**
+   * 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 = "rgb(32, 96, 149)";
+</script>
+
+<Container
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  width="{width}"
+  background="{background}"
+  height="{height}"
+>
+  <div id="{id}" class="ons-hero__details ons-grid__col ons-col-8@m ons-col-10@s@m">
+    {#if title}
+      <header>
+        <h1 class="ons-hero__title ons-u-fs-xxxl">{title}</h1>
+      </header>
+    {/if}
+    {#if lede}<p class="ons-hero__text ons-u-fs-l ons-font-weight__normal">{lede}</p>{/if}
+    {#if validDate(date)}<p class="ons-hero__text">{formatDate(date)}</p>{/if}
+    <slot />
+  </div>
+</Container>
+
+<style>
+  .ons-hero__details {
+    padding-left: 0;
+  }</style>

package/dist/layout/Scroller/Scroller.svelte

@@ -0,0 +1,336 @@
+<script context="module">
+  // Based on svelte-scroller by Rich Harris
+  // https://github.com/sveltejs/svelte-scroller
+  // Extended to allow for split-screen mode, section IDs and on:change event
+  const handlers = [];
+  let manager;
+
+  if (typeof window !== "undefined") {
+    const run_all = () => handlers.forEach((fn) => fn());
+
+    window.addEventListener("scroll", run_all);
+    window.addEventListener("resize", run_all);
+  }
+
+  if (typeof IntersectionObserver !== "undefined") {
+    const map = new Map();
+
+    const observer = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => {
+          const update = map.get(entry.target);
+          const index = handlers.indexOf(update);
+
+          if (entry.isIntersecting) {
+            if (index === -1) handlers.push(update);
+          } else {
+            update();
+            if (index !== -1) handlers.splice(index, 1);
+          }
+        });
+      },
+      {
+        rootMargin: "400px 0px", // TODO why 400?
+      }
+    );
+
+    manager = {
+      add: ({ outer, update }) => {
+        const { top, bottom } = outer.getBoundingClientRect();
+
+        if (top < window.innerHeight && bottom > 0) handlers.push(update);
+
+        map.set(outer, update);
+        observer.observe(outer);
+      },
+
+      remove: ({ outer, update }) => {
+        const index = handlers.indexOf(update);
+        if (index !== -1) handlers.splice(index, 1);
+
+        map.delete(outer);
+        observer.unobserve(outer);
+      },
+    };
+  } else {
+    manager = {
+      add: ({ update }) => {
+        handlers.push(update);
+      },
+
+      remove: ({ update }) => {
+        const index = handlers.indexOf(update);
+        if (index !== -1) handlers.splice(index, 1);
+      },
+    };
+  }
+</script>
+
+<script>
+  import { onMount, createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  // config
+  /**
+   * Sets the unique ID of the scroller
+   * @type {string}
+   */
+  export let id = null;
+  /**
+   * Enables splitscreen view (captions appear on left on larger screens)
+   * @type {boolean}
+   */
+  export let splitscreen = false;
+  /**
+   * Adds a margin under the scroller section
+   * @type {boolean}
+   */
+  export let marginBottom = true;
+  /**
+   * Set the threshold for the transition between scroller sections (0-1)
+   * @type {number}
+   */
+  export let threshold = 0.7;
+
+  let top = 0;
+  let bottom = 1;
+  let query = "section";
+  let parallax = false;
+
+  // bindings
+  /**
+   * Binding: Total number of sections within scroller
+   * @type {number}
+   */
+  export let count = 0;
+  /**
+   * Binding: Current section index (number)
+   * @type {number}
+   */
+  export let index = 0;
+  /**
+   * Binding: Current section id, if it has one set
+   * @type {string}
+   */
+  export let sectionId = null; // ID for current section within scroller
+  /**
+   * Binding: The progress between the start of current scroller section and next (0-1)
+   * @type {number}
+   */
+  export let offset = 0;
+  /**
+   * Binding: The progress through the whole scroller (0-1)
+   * @type {number}
+   */
+  export let progress = 0;
+  /**
+   * Binding: Whether the scroller is visible on screen or not
+   * @type {boolean}
+   */
+  export let visible = false;
+
+  let outer;
+  let foreground;
+  let background;
+  let left;
+  let sections;
+  let wh = 0;
+  let fixed;
+  let offset_top = 0;
+  let width = 1;
+  let height;
+  let inverted;
+
+  $: top_px = Math.round(top * wh);
+  $: bottom_px = Math.round(bottom * wh);
+  $: threshold_px = Math.round(threshold * wh);
+
+  $: top, bottom, threshold, parallax, update();
+
+  $: style = `
+		position: ${fixed ? "fixed" : "absolute"};
+		top: 0;
+		transform: translate(0, ${offset_top}px);
+		z-index: ${inverted ? 3 : 1};
+	`;
+
+  $: widthStyle = fixed ? `width:${width}px;` : "";
+
+  onMount(() => {
+    sections = foreground.querySelectorAll(query);
+    count = sections.length;
+
+    update();
+
+    const scroller = { outer, update };
+
+    manager.add(scroller);
+    return () => manager.remove(scroller);
+  });
+
+  function update() {
+    if (!foreground) return;
+
+    // re-measure outer container
+    const bcr = outer.getBoundingClientRect();
+    left = bcr.left;
+    width = bcr.right - left;
+
+    // determine fix state
+    const fg = foreground.getBoundingClientRect();
+    const bg = background.getBoundingClientRect();
+
+    visible = fg.top < wh && fg.bottom > 0;
+
+    const foreground_height = fg.bottom - fg.top;
+    const background_height = bg.bottom - bg.top;
+
+    const available_space = bottom_px - top_px;
+    progress = (top_px - fg.top) / (foreground_height - available_space);
+
+    if (progress <= 0) {
+      offset_top = 0;
+      fixed = false;
+    } else if (progress >= 1) {
+      offset_top = parallax
+        ? foreground_height - background_height
+        : foreground_height - available_space;
+      fixed = false;
+    } else {
+      offset_top = parallax
+        ? Math.round(top_px - progress * (background_height - available_space))
+        : top_px;
+      fixed = true;
+    }
+
+    for (let i = 0; i < sections.length; i++) {
+      const section = sections[i];
+      const { top } = section.getBoundingClientRect();
+
+      const next = sections[i + 1];
+      const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
+
+      offset = (threshold_px - top) / (bottom - top);
+      if (bottom >= threshold_px) {
+        if (index !== i) {
+          index = i;
+          sectionId = section.dataset.id ? section.dataset.id : null;
+          dispatch("change", { id, index, sectionId });
+        }
+        break;
+      }
+    }
+  }
+</script>
+
+<svelte:window bind:innerHeight="{wh}" />
+
+<svelte-scroller-outer id="{id}" bind:this="{outer}" class:splitscreen="{splitscreen}">
+  <svelte-scroller-background-container class="background-container" style="{style}{widthStyle}">
+    <svelte-scroller-background bind:this="{background}">
+      <slot name="background" />
+    </svelte-scroller-background>
+  </svelte-scroller-background-container>
+
+  <svelte-scroller-foreground bind:this="{foreground}">
+    <slot name="foreground" />
+  </svelte-scroller-foreground>
+</svelte-scroller-outer>
+
+{#if marginBottom}
+  <div class="ons-spacer"></div>
+{/if}
+
+<style>
+  svelte-scroller-outer {
+    display: block;
+    position: relative;
+  }
+
+  svelte-scroller-background {
+    display: block;
+    position: relative;
+    width: 100%;
+  }
+
+  svelte-scroller-foreground {
+    display: block;
+    position: relative;
+    z-index: 2;
+  }
+
+  svelte-scroller-foreground::after {
+    content: " ";
+    display: block;
+    clear: both;
+  }
+
+  svelte-scroller-background-container {
+    display: block;
+    position: absolute;
+    width: 100%;
+    max-width: 100%;
+    pointer-events: none;
+    /* height: 100%; */
+
+    /* in theory this helps prevent jumping */
+    will-change: transform;
+    /* -webkit-transform: translate3d(0, 0, 0);
+		-moz-transform: translate3d(0, 0, 0);
+		transform: translate3d(0, 0, 0); */
+  }
+
+  svelte-scroller-background-container {
+    pointer-events: all !important;
+  }
+
+  :global([slot="foreground"] section) {
+    padding: 70vh 0 100vh 0;
+  }
+
+  :global([slot="foreground"] section + section) {
+    padding: 0 0 100vh 0;
+  }
+
+  :global([slot="foreground"] section:last-of-type) {
+    padding: 0 0 70vh 0;
+  }
+
+  :global([slot="foreground"] section > div) {
+    position: relative;
+  }
+
+  :global([slot="foreground"] section > div:before) {
+    background-color: var(--background, white);
+    opacity: 80%;
+  }
+
+  :global([slot="foreground"] section div p) {
+    margin: 0;
+  }
+
+  :global([slot="foreground"] section div p + p) {
+    margin-top: 30px;
+  }
+
+  :global([slot="foreground"] section div h2),
+  :global([slot="foreground"] section div h3) {
+    margin: 10px 0 20px 0;
+  }
+
+  @media (min-width: 992px) {
+    .splitscreen svelte-scroller-background {
+      width: calc(100% - 480px) !important;
+      min-width: 65%;
+      margin: 0 0 0 auto;
+    }
+    :global(.splitscreen [slot="foreground"] section div::before) {
+      opacity: 0;
+    }
+    :global(.splitscreen [slot="foreground"] section) {
+      width: 480px;
+      max-width: 35%;
+      margin: 0 auto 0 0;
+      background-color: var(--background, white);
+    }
+  }</style>

package/dist/layout/Scroller/ScrollerSection.svelte

@@ -0,0 +1,61 @@
+<script>
+  import { onMount } from "svelte";
+  import Container from "$lib/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;
+  /**
+   * 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 background;
+
+  onMount(() => {
+    background = getComputedStyle(section).getPropertyValue("--background").replaceAll('"', "");
+    console.log(section, getComputedStyle(section), background);
+  });
+</script>
+
+<section data-id="{id}" bind:this="{section}">
+  <Container theme="{theme}" width="narrow" background="none">
+    <div class="ons-scroller-section" style:--background="{background}">
+      {#if title && !hideTitle}
+        <h2 class="section-title">{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>

package/dist/{components/layout → layout}/Section/Section.svelte

@@ -1,17 +1,17 @@
 <script>
   import { slugify } from "$lib/js/utils.js";
-  import Container from "$lib/components/wrappers/Container/Container.svelte";
+  import Container from "$lib/wrappers/Container/Container.svelte";
 
-  /**
-   * Sets the width of the container
-   * @type {"narrow"|"medium"|"wide"|"full"}
-   */
-  export let width = "narrow";
   /**
    * Sets the unique ID of the section
    * @type {string}
    */
   export let id = null;
+  /**
+   * Sets the width of the container
+   * @type {"narrow"|"medium"|"wide"|"full"}
+   */
+  export let width = "narrow";
   /**
    * Sets the title of the section
    * @type {string}

package/dist/layout/TitleBlock/Meta.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { validDate, formatDate } from "$lib/js/utils.js";
+  export let meta = null;
+</script>
+
+{#if Array.isArray(meta)}
+  <dl
+    class="ons-metadata metadata__list ons-grid ons-grid--gutterless ons-u-cf ons-u-mb-m"
+    title="Dataset ID and release date information"
+    aria-label="Dataset ID and release date information"
+  >
+    {#each meta as m, i}
+      <div class="ons-grid__col ons-col-{m.col ? m.col : 12}@m" class:ons-u-mt-xs="{i !== 0}">
+        <dt class="ons-metadata__term ons-u-mr-xs">{m.key}:</dt>
+        <dd class="ons-metadata__value ons-u-f-no">
+          {#if validDate(m.value)}
+            <time datetime="{new Date(m.value).toISOString()}">{formatDate(m.value)}</time>
+            {#if m.extra}{@html m.extra}{/if}
+          {:else}
+            {@html m.value}
+          {/if}
+        </dd>
+      </div>
+    {/each}
+  </dl>
+{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -115,33 +115,40 @@
     "./package.json": "./package.json",
     "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
     "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
-    "./components/decorators/Blockquote/Blockquote.svelte": "./dist/components/decorators/Blockquote/Blockquote.svelte",
-    "./components/decorators/Em/Em.svelte": "./dist/components/decorators/Em/Em.svelte",
-    "./components/inputs/Button/Button.svelte": "./dist/components/inputs/Button/Button.svelte",
-    "./components/inputs/Button/Icon.svelte": "./dist/components/inputs/Button/Icon.svelte",
-    "./components/inputs/Dropdown/Dropdown.svelte": "./dist/components/inputs/Dropdown/Dropdown.svelte",
-    "./components/inputs/Input/Input.svelte": "./dist/components/inputs/Input/Input.svelte",
-    "./components/inputs/Select/Select.svelte": "./dist/components/inputs/Select/Select.svelte",
-    "./components/inputs/Textarea/Textarea.svelte": "./dist/components/inputs/Textarea/Textarea.svelte",
-    "./components/layout/Accordion/Accordion.svelte": "./dist/components/layout/Accordion/Accordion.svelte",
-    "./components/layout/Accordion/AccordionItem.svelte": "./dist/components/layout/Accordion/AccordionItem.svelte",
-    "./components/layout/Divider/Divider.svelte": "./dist/components/layout/Divider/Divider.svelte",
-    "./components/layout/Footer/Footer.svelte": "./dist/components/layout/Footer/Footer.svelte",
-    "./components/layout/Footer/ONSLogo.svelte": "./dist/components/layout/Footer/ONSLogo.svelte",
-    "./components/layout/Header/Header.svelte": "./dist/components/layout/Header/Header.svelte",
-    "./components/layout/Header/ONSLogo.svelte": "./dist/components/layout/Header/ONSLogo.svelte",
-    "./components/layout/Section/Section.svelte": "./dist/components/layout/Section/Section.svelte",
-    "./components/layout/TitleBlock/Meta.svelte": "./dist/components/layout/TitleBlock/Meta.svelte",
-    "./components/layout/TitleBlock/TitleBlock.svelte": "./dist/components/layout/TitleBlock/TitleBlock.svelte",
-    "./components/layout/Twisty/Twisty.svelte": "./dist/components/layout/Twisty/Twisty.svelte",
-    "./components/wrappers/Container/Container.svelte": "./dist/components/wrappers/Container/Container.svelte",
-    "./components/wrappers/Embed/Embed.svelte": "./dist/components/wrappers/Embed/Embed.svelte",
-    "./components/wrappers/Main/Main.svelte": "./dist/components/wrappers/Main/Main.svelte",
-    "./components/wrappers/Theme/Theme.svelte": "./dist/components/wrappers/Theme/Theme.svelte",
-    "./components/wrappers/Theme/themes": "./dist/components/wrappers/Theme/themes.js",
     "./css/main.css": "./dist/css/main.css",
+    "./decorators/Blockquote/Blockquote.svelte": "./dist/decorators/Blockquote/Blockquote.svelte",
+    "./decorators/Em/Em.svelte": "./dist/decorators/Em/Em.svelte",
     "./globals.d.ts": "./dist/globals.d.ts",
+    "./inputs/Button/Button.svelte": "./dist/inputs/Button/Button.svelte",
+    "./inputs/Button/Icon.svelte": "./dist/inputs/Button/Icon.svelte",
+    "./inputs/Dropdown/Dropdown.svelte": "./dist/inputs/Dropdown/Dropdown.svelte",
+    "./inputs/Input/Input.svelte": "./dist/inputs/Input/Input.svelte",
+    "./inputs/Select/Select.svelte": "./dist/inputs/Select/Select.svelte",
+    "./inputs/Textarea/Textarea.svelte": "./dist/inputs/Textarea/Textarea.svelte",
+    "./js/docsPage": "./dist/js/docsPage.js",
     "./js/utils": "./dist/js/utils.js",
+    "./js/withParams": "./dist/js/withParams.js",
+    "./layout/Accordion/Accordion.svelte": "./dist/layout/Accordion/Accordion.svelte",
+    "./layout/Accordion/AccordionItem.svelte": "./dist/layout/Accordion/AccordionItem.svelte",
+    "./layout/Divider/Divider.svelte": "./dist/layout/Divider/Divider.svelte",
+    "./layout/Filler/Filler.svelte": "./dist/layout/Filler/Filler.svelte",
+    "./layout/Footer/Footer.svelte": "./dist/layout/Footer/Footer.svelte",
+    "./layout/Footer/ONSLogo.svelte": "./dist/layout/Footer/ONSLogo.svelte",
+    "./layout/Grid/Grid.svelte": "./dist/layout/Grid/Grid.svelte",
+    "./layout/Header/Header.svelte": "./dist/layout/Header/Header.svelte",
+    "./layout/Header/ONSLogo.svelte": "./dist/layout/Header/ONSLogo.svelte",
+    "./layout/Hero/Hero.svelte": "./dist/layout/Hero/Hero.svelte",
+    "./layout/Scroller/Scroller.svelte": "./dist/layout/Scroller/Scroller.svelte",
+    "./layout/Scroller/ScrollerSection.svelte": "./dist/layout/Scroller/ScrollerSection.svelte",
+    "./layout/Section/Section.svelte": "./dist/layout/Section/Section.svelte",
+    "./layout/TitleBlock/Meta.svelte": "./dist/layout/TitleBlock/Meta.svelte",
+    "./layout/TitleBlock/TitleBlock.svelte": "./dist/layout/TitleBlock/TitleBlock.svelte",
+    "./layout/Twisty/Twisty.svelte": "./dist/layout/Twisty/Twisty.svelte",
+    "./wrappers/Container/Container.svelte": "./dist/wrappers/Container/Container.svelte",
+    "./wrappers/Embed/Embed.svelte": "./dist/wrappers/Embed/Embed.svelte",
+    "./wrappers/Main/Main.svelte": "./dist/wrappers/Main/Main.svelte",
+    "./wrappers/Theme/Theme.svelte": "./dist/wrappers/Theme/Theme.svelte",
+    "./wrappers/Theme/themes": "./dist/wrappers/Theme/themes.js",
     ".": "./dist/index.js"
   },
   "svelte": "./dist/index.js",

package/dist/@types/{components/inputs → inputs}/Dropdown/Dropdown.svelte.d.ts

@@ -3,11 +3,11 @@
 /** @typedef {typeof __propDef.slots}  DropdownSlots */
 export default class Dropdown extends SvelteComponentTyped<{
     label?: string;
-    value?: any;
-    options?: any[];
     id?: string;
     hideLabel?: boolean;
     placeholder?: string;
+    value?: any;
+    options?: any[];
 }, {
     change: CustomEvent<any>;
 } & {
@@ -21,11 +21,11 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         label?: string;
-        value?: object;
-        options?: any[];
         id?: string;
         hideLabel?: boolean;
         placeholder?: string;
+        value?: object;
+        options?: any[];
     };
     events: {
         change: CustomEvent<any>;

package/dist/@types/{components/inputs → inputs}/Input/Input.svelte.d.ts

@@ -4,9 +4,9 @@
 export default class Input extends SvelteComponentTyped<{
     width?: number;
     label?: string;
-    value?: string;
     id?: string;
     hideLabel?: boolean;
+    value?: string;
     description?: string;
     charLimit?: number;
     prefix?: string;
@@ -29,9 +29,9 @@ declare const __propDef: {
     props: {
         width?: number;
         label?: string;
-        value?: string;
         id?: string;
         hideLabel?: boolean;
+        value?: string;
         description?: string;
         charLimit?: number;
         prefix?: string;

package/dist/@types/{components/inputs → inputs}/Select/Select.svelte.d.ts

@@ -4,11 +4,11 @@
 export default class Select extends SvelteComponentTyped<{
     width?: number;
     label?: string;
-    value?: any;
-    options?: any[];
     id?: string;
     hideLabel?: boolean;
     placeholder?: string;
+    value?: any;
+    options?: any[];
     mode?: "default" | "search";
     multiple?: boolean;
     maxSelected?: number;
@@ -37,11 +37,11 @@ declare const __propDef: {
     props: {
         width?: number;
         label?: string;
-        value?: object;
-        options?: any[];
         id?: string;
         hideLabel?: boolean;
         placeholder?: string;
+        value?: object;
+        options?: any[];
         mode?: "default" | "search";
         multiple?: boolean;
         maxSelected?: number;