@onsvisual/svelte-components 0.0.3 → 0.0.5

package/dist/index.js

@@ -1,17 +1,36 @@
 // Wrappers
-export { default as Theme } from "./components/wrappers/Theme/Theme.svelte";
-export { default as Container } from "./components/wrappers/Container/Container.svelte";
+export { default as Container } from "./wrappers/Container/Container.svelte";
+export { default as Embed } from "./wrappers/Embed/Embed.svelte";
+export { default as Main } from "./wrappers/Main/Main.svelte";
+export { default as Theme } from "./wrappers/Theme/Theme.svelte";
 
 // Layout
-export { default as Accordion } from "./components/layout/Accordion/Accordion.svelte";
-export { default as Footer } from "./components/layout/Footer/Footer.svelte";
-export { default as Header } from "./components/layout/Header/Header.svelte";
-export { default as Twisty } from "./components/layout/Twisty/Twisty.svelte";
+export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
+export { default as Filler } from "./layout/Filler/Filler.svelte";
+export { default as Footer } from "./layout/Footer/Footer.svelte";
+export { default as Grid } from "./layout/Grid/Grid.svelte";
+export { default as Header } from "./layout/Header/Header.svelte";
+export { default as Hero } from "./layout/Hero/Hero.svelte";
+export { default as List } from "./layout/List/List.svelte";
+export { default as NavSection } from "./layout/NavSections/NavSection.svelte";
+export { default as NavSections } from "./layout/NavSections/NavSections.svelte";
+export { default as Scoller } from "./layout/Scoller/Scoller.svelte";
+export { default as ScollerSection } from "./layout/Scoller/ScollerSection.svelte";
+export { default as Section } from "./layout/Section/Section.svelte";
+export { default as TitleBlock } from "./layout/TitleBlock/TitleBlock.svelte";
+export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
 
 // Inputs
-export { default as Button } from "./components/ui/Button/Button.svelte";
-export { default as Dropdown } from "./components/ui/Dropdown/Dropdown.svelte";
-export { default as Em } from "./components/ui/Em/Em.svelte";
-export { default as Input } from "./components/ui/Input/Input.svelte";
-export { default as Select } from "./components/ui/Select/Select.svelte";
-export { default as Textarea } from "./components/ui/Textarea/Textarea.svelte";
+export { default as Button } from "./inputs/Button/Button.svelte";
+export { default as Dropdown } from "./inputs/Dropdown/Dropdown.svelte";
+export { default as Input } from "./inputs/Input/Input.svelte";
+export { default as Select } from "./inputs/Select/Select.svelte";
+export { default as Textarea } from "./inputs/Textarea/Textarea.svelte";
+
+// Decorators
+export { default as Blockquote } from "./decorators/Blockquote/Blockquote.svelte";
+export { default as Divider } from "./decorators/Divider/Divider.svelte";
+export { default as Em } from "./decorators/Em/Em.svelte";
+
+// Data visualisation
+export { default as Table } from "./datavis/Table/Table.svelte";

package/dist/js/docsPage.js

@@ -0,0 +1,13 @@
+export const parameters = {
+  viewMode: "docs",
+  previewTabs: {
+    canvas: { hidden: true },
+  },
+  toolbar: {
+    zoom: { hidden: true },
+    eject: { hidden: true },
+    fullscreen: { hidden: true },
+    "storybook/background": { hidden: true },
+    "storybook/outline": { hidden: true },
+  },
+};

package/dist/js/utils.js

@@ -15,7 +15,9 @@ export const slugify = (str, suffix = true) =>
 // .concat(suffix ? `-${randomString()}` : "");
 
 export const validDate = (str) => {
+  if (!str) return false;
   const date = new Date(str);
+  // @ts-ignore
   return !isNaN(date);
 };
 
@@ -25,6 +27,7 @@ export const formatDate = (
   opts = { year: "numeric", month: "long", day: "2-digit" }
 ) => {
   const date = new Date(str);
+  // @ts-ignore
   return date.toLocaleDateString(locale, opts);
 };
 

package/dist/js/withParams.js

@@ -0,0 +1,46 @@
+/**
+ * Use custom source code in the "Show code" pull down.
+ * @param {object} source Source code object, where key is the language of the source code and value is the code string.
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withStoryDocs
+ * @returns props object including parameters
+ */
+export const withSource = (source, otherOptions = {}) => {
+  const language = Object.keys(source)[0];
+  const code = source[language];
+  const docs = {
+    ...otherOptions?.parameters?.docs,
+    source: { code, language },
+  };
+  const parameters = { docs };
+  return { parameters };
+};
+
+/**
+ * Add custom documentation to a story.
+ * @param {string} storyDocs Markdown string of docs
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
+ * @returns props object including parameters
+ */
+export const withStoryDocs = (storyDocs, otherOptions = {}) => {
+  const docs = {
+    ...otherOptions?.parameters?.docs,
+    description: { story: storyDocs },
+  };
+  const parameters = { docs };
+  return { parameters };
+};
+
+/**
+ * Add custom documentation to the top of the component docs page.
+ * @param {string} componentDocs Markdown string of docs
+ * @param {object} otherOptions Other props object options, allowing chaining with other methods like withSource
+ * @returns props object including parameters
+ */
+export const withComponentDocs = (componentDocs, otherOptions = {}) => {
+  const docs = {
+    ...otherOptions?.parameters?.docs,
+    description: { component: componentDocs },
+  };
+  const parameters = { docs };
+  return { parameters };
+};

package/dist/{components/layout → layout}/Accordion/AccordionItem.svelte

@@ -1,6 +1,6 @@
 <script>
   import { onMount, getContext } from "svelte";
-  import { slugify } from "../../../js/utils";
+  import { slugify } from "$lib/js/utils.js";
 
   /**
    * A title for the element

package/dist/layout/Filler/Filler.svelte

@@ -0,0 +1,66 @@
+<script>
+  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 = "narrow";
+  /**
+   * Sets the minimum height of the section
+   * @type {"auto"|"tall"|"full"}
+   */
+  export let height = "tall";
+  /**
+   * Sets a predefined theme
+   * @type {"light"|"dark"|"lightblue"}
+   */
+  export let theme = "lightblue";
+  /**
+   * 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;
+  /**
+   * 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}"
+  background="{background}"
+  marginTop="{marginTop}"
+  marginBottom="{marginBottom}"
+  height="{height}"
+>
+  <section
+    class="ons-hero__details ons-feature__filler ons-u-fs-l ons-font-weight__normal"
+    id="{id}"
+  >
+    <slot />
+  </section>
+</Container>
+
+<style>
+  :global(.ons-feature__filler > p + p) {
+    margin-top: 30px;
+  }</style>

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

@@ -1,6 +1,6 @@
 <script>
   import { onMount, getContext } from "svelte";
-  import Theme from "$lib/components/wrappers/Theme/Theme.svelte";
+  import Theme from "$lib/wrappers/Theme/Theme.svelte";
 
   const page = getContext("page");
 

package/dist/layout/Grid/Grid.svelte

@@ -0,0 +1,111 @@
+<script>
+  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 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;
+  /**
+   * Sets the width of the section
+   * @type {"narrow"|"medium"|"wide"|"full"}
+   */
+  export let colwidth = "medium"; // narrow | medium | wide | full
+  /**
+   * (Optional) caption below the grid
+   * @type {string}
+   */
+  export let caption = "";
+  /**
+   * Set the minimum height of a grid row (can be a number in pixels, or a valid CSS height, like "100vh")
+   * @type {number|string}
+   */
+  export let height = 200; // pixel height or "full" for 100vh
+  /**
+   * Set the grid gap, in pixels
+   * @type {number}
+   */
+  export let gap = 12;
+
+  let gridClass = !colwidth || colwidth === "full" ? "" : `grid-${colwidth}`;
+  let rowHeight = height === "full" ? "100vh" : !Number.isNaN(height) ? height + "px" : height;
+  let gridGap = !Number.isNaN(gap) ? gap + "px" : gap;
+</script>
+
+<figure id="{id}" aria-label="{caption}">
+  <Container
+    theme="{theme}"
+    themeOverrides="{themeOverrides}"
+    width="{width}"
+    height="{['tall', 'full'].includes(height) ? height : 'auto'}"
+    marginTop="{marginTop}"
+    marginBottom="{!caption ? marginBottom : false}"
+  >
+    <div class="grid {gridClass}" style:grid-gap="{gridGap}" style:min-height="{rowHeight}">
+      <slot />
+    </div>
+  </Container>
+  {#if caption}
+    <figcaption>
+      <Container
+        theme="{theme}"
+        themeOverrides="{themeOverrides}"
+        width="narrow"
+        marginBottom="{marginBottom}"
+      >
+        <span class="ons-figure__caption">{@html caption}</span>
+      </Container>
+    </figcaption>
+  {/if}
+</figure>
+
+<style>
+  figure,
+  figcaption {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 100%);
+    width: 100%;
+    margin: 0;
+  }
+  .grid-narrow {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
+  }
+  .grid-medium {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
+  }
+  .grid-wide {
+    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)) !important;
+  }
+  :global(.grid > div) {
+    min-height: inherit;
+  }</style>

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

@@ -1,6 +1,6 @@
 <script>
   import { onMount, getContext } from "svelte";
-  import Theme from "$lib/components/wrappers/Theme/Theme.svelte";
+  import Theme from "$lib/wrappers/Theme/Theme.svelte";
   import ONSLogo from "./ONSLogo.svelte";
 
   const page = getContext("page");

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/List/List.svelte

@@ -0,0 +1,32 @@
+<script>
+  import { onMount } from "svelte";
+
+  /**
+   * Type of list
+   * @type {"bullet"|"dash"|"number"|"bare"}
+   */
+  export let mode = "bullet"; // dash | bullet | number | bare
+
+  let el;
+
+  onMount(() => {
+    [...el.children].forEach((c) => {
+      if (c.nodeName === "LI") c.className = "ons-list__item";
+    });
+  });
+</script>
+
+{#if mode === "number"}
+  <ol class="ons-list" bind:this="{el}">
+    <slot />
+  </ol>
+{:else}
+  <ul
+    class="ons-list"
+    class:ons-list--dashed="{mode === 'dash'}"
+    class:ons-list--bare="{mode === 'bare'}"
+    bind:this="{el}"
+  >
+    <slot />
+  </ul>
+{/if}

package/dist/layout/NavSections/NavSection.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { onMount, onDestroy, getContext } from "svelte";
+  import { slugify } from "$lib/js/utils.js";
+  import SectionBacklink from "./SectionBacklink.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);
+  /**
+   * Allows the h2 title tag for the section to be visually hidden
+   * @type {boolean}
+   */
+  export let hideTitle = false;
+
+  const sections = getContext("sections");
+  const observer = getContext("observer");
+  const tocId = getContext("tocId");
+
+  let section;
+
+  onMount(() => {
+    if (sections && observer) {
+      $sections = [...$sections, { title, id }];
+      $observer.observe(section);
+    }
+  });
+
+  onDestroy(() => {
+    if (sections && observer) {
+      $sections = $sections.filter((s) => s.id !== id);
+      $observer.unobserve(section);
+    }
+  });
+</script>
+
+<section id="{id}" aria-label="{title}" bind:this="{section}">
+  {#if title && !hideTitle}
+    <h2 class="ons-u-mt-xl ons-u-pb-no ons-u-pt-no">{title}</h2>
+  {/if}
+  <slot />
+  {#if tocId}
+    <SectionBacklink tocId="{tocId}" />
+  {/if}
+</section>

package/dist/layout/NavSections/NavSections.svelte

@@ -0,0 +1,92 @@
+<script>
+  import { onMount, setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  /**
+   * A label for the page contents nav
+   * @type {string}
+   */
+  export let contentsLabel = "Page contents";
+  /**
+   * ID for contents nav section (for back links)
+   * @type {string}
+   */
+  export let tocId = "toc";
+  /**
+   * Don't include table of contents (allows for custom uses of nav panel)
+   * @type {boolean}
+   */
+  export let noContents = false;
+
+  let active;
+
+  setContext("tocId", tocId);
+
+  const sections = writable([]);
+  setContext("sections", sections);
+
+  const observer = writable();
+  setContext("observer", observer);
+
+  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,
+        }
+      );
+    }
+  });
+</script>
+
+<div class="ons-page__container ons-container">
+  <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="{tocId}">
+      <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">
+              {#each $sections as section}
+                <li class="ons-list__item">
+                  <a
+                    href="#{section.id}"
+                    class="ons-list__link"
+                    class:ons-toc__link-active="{section.id === active}"
+                  >
+                    {section.title}
+                  </a>
+                </li>
+              {/each}
+            </ol>
+          {/if}
+          <slot name="after-nav" />
+        </nav>
+      </aside>
+    </div>
+    <div class="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>
+</div>

package/dist/layout/NavSections/SectionBacklink.svelte

@@ -0,0 +1,31 @@
+<script>
+  /**
+   * ID for contents nav section (for back links)
+   * @type {string}
+   */
+  export let tocId = "toc";
+</script>
+
+<div class="ons-u-mt-l ons-u-d-no@m">
+  <div class="ons-back-to">
+    <a href="#{tocId}" class="ons-back-to__link">
+      <span class="ons-back-to__icon"
+        ><svg
+          class="ons-svg-icon ons-u-mr-xs"
+          width="16"
+          height="17"
+          viewBox="0 0 16 17"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          aria-hidden="true"
+          role="presentation"
+        >
+          <path
+            d="M0 8.07275L1.41 9.48275L7 3.90275V16.0728H9V3.90275L14.58 9.49275L16 8.07275L8 0.0727539L0 8.07275Z"
+            fill="currentColor"></path>
+        </svg>
+      </span>Back to contents</a
+    >
+  </div>
+</div>