@onsvisual/svelte-components 0.0.2 → 0.0.4

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/layout/Section/Section.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { slugify } from "$lib/js/utils.js";
+  import Container from "$lib/wrappers/Container/Container.svelte";
+
+  /**
+   * 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}
+   */
+  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;
+  /**
+   * Optional margin above section
+   * @type {boolean}
+   */
+  export let marginTop = false;
+  /**
+   * Optional margin below section
+   * @type {boolean}
+   */
+  export let marginBottom = true;
+</script>
+
+<Container
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  width="{width}"
+  marginTop="{marginTop}"
+  marginBottom="{marginBottom}"
+>
+  <section id="{id ? id : slugify(title)}" aria-label="{title}" class="ons-feature__section">
+    {#if title && !hideTitle}
+      <h2 class="section-title">{title}</h2>
+    {/if}
+    <slot />
+  </section>
+</Container>
+
+<style>
+  :global(.ons-feature__section > p:last-child) {
+    margin-bottom: 0;
+  }</style>

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/dist/{components/layout → wrappers}/Container/Container.svelte

@@ -38,7 +38,6 @@
   export let background = null;
 </script>
 
-{#if marginTop}<div class="ons-spacer"></div>{/if}
 {#if width === "narrow"}
   <Theme theme="{theme}" background="{background}" overrides="{themeOverrides}">
     <div
@@ -46,9 +45,11 @@
       class:ons-page__container--tall-height="{height === 'tall'}"
       class:ons-page__container--full-height="{height === 'full'}"
     >
+      {#if marginTop}<div class="ons-spacer"></div>{/if}
       <div class="ons-page__container--narrow">
         <slot />
       </div>
+      {#if marginBottom}<div class="ons-spacer"></div>{/if}
     </div>
   </Theme>
 {:else}
@@ -60,11 +61,12 @@
       class:ons-page__container--tall-height="{height === 'tall'}"
       class:ons-page__container--full-height="{height === 'full'}"
     >
+      {#if marginTop}<div class="ons-spacer"></div>{/if}
       <slot />
+      {#if marginBottom}<div class="ons-spacer"></div>{/if}
     </div>
   </Theme>
 {/if}
-{#if marginBottom}<div class="ons-spacer"></div>{/if}
 
 <style>
   .ons-page__container {

package/dist/wrappers/Embed/Embed.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { onMount } from "svelte";
+  import pym from "pym.js";
+
+  /**
+   * Binding for pymChild element (can be used to send messages to parent of iframe)
+   * @type {object}
+   */
+  export let pymChild = null;
+
+  onMount(() => {
+    pymChild = new pym.Child({ polling: 1000 });
+  });
+</script>
+
+<slot />
+
+<style>
+  :global(.ons-container) {
+    padding: 0 !important;
+  }</style>

package/dist/wrappers/Main/Main.svelte

@@ -0,0 +1,3 @@
+<main id="main" tabindex="-1" style="display:block">
+  <slot />
+</main>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",
@@ -11,7 +11,7 @@
   "scripts": {
     "start": "storybook dev -p 3000",
     "new": "node ./bin/newComponent/index.cjs",
-    "build:package": "node ./bin/buildPackage/index.js",
+    "build:package": "node ./bin/buildPackage/index.js && node ./bin/postprocess/css-merge.js",
     "build:chromatic": "storybook build -o docs",
     "build:docs": "storybook build -o docs && touch ./docs/.nojekyll",
     "build": "npm-run-all build:package build:docs",
@@ -59,6 +59,7 @@
     "babel-loader": "^9.1.2",
     "change-case": "^4.1.2",
     "chromatic": "^6.19.9",
+    "csso": "^5.0.5",
     "eslint": "^8.42.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-n": "^16.0.0",
@@ -114,26 +115,40 @@
     "./package.json": "./package.json",
     "./actions/cssVariables": "./dist/actions/cssVariables/index.js",
     "./actions/resizeObserver": "./dist/actions/resizeObserver/index.js",
-    "./components/layout/Accordion/Accordion.svelte": "./dist/components/layout/Accordion/Accordion.svelte",
-    "./components/layout/Accordion/AccordionItem.svelte": "./dist/components/layout/Accordion/AccordionItem.svelte",
-    "./components/layout/Container/Container.svelte": "./dist/components/layout/Container/Container.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/Theme/Theme.svelte": "./dist/components/layout/Theme/Theme.svelte",
-    "./components/layout/Theme/themes": "./dist/components/layout/Theme/themes.js",
-    "./components/layout/Twisty/Twisty.svelte": "./dist/components/layout/Twisty/Twisty.svelte",
-    "./components/ui/Button/Button.svelte": "./dist/components/ui/Button/Button.svelte",
-    "./components/ui/Button/Icon.svelte": "./dist/components/ui/Button/Icon.svelte",
-    "./components/ui/Dropdown/Dropdown.svelte": "./dist/components/ui/Dropdown/Dropdown.svelte",
-    "./components/ui/Em/Em.svelte": "./dist/components/ui/Em/Em.svelte",
-    "./components/ui/Input/Input.svelte": "./dist/components/ui/Input/Input.svelte",
-    "./components/ui/Select/Select.svelte": "./dist/components/ui/Select/Select.svelte",
-    "./components/ui/Textarea/Textarea.svelte": "./dist/components/ui/Textarea/Textarea.svelte",
     "./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",