@onsvisual/svelte-components 0.0.3 → 0.0.4

package/README.md

@@ -1,5 +1,7 @@
-# ⚙️ graphics-components
+# @onsvisual/svelte-components
+
+[![npm version](https://badge.fury.io/js/@onsvisual%2Fsvelte-components.svg)](https://www.npmjs.com/package/@onsvisual/svelte-components)
+
+A library of ONS Svelte components for projects large and small. Its codebase and docs borrow **heavily** from Reuters' fantastic [graphics-components](https://github.com/reuters-graphics/graphics-components) library.
 
-[![npm version](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components.svg)](https://badge.fury.io/js/@reuters-graphics%2Fgraphics-components)
 
-This is a fork of the Reuters [graphics-components](https://github.com/reuters-graphics/graphics-components) repo, for experimentation.

package/dist/@types/index.d.ts

@@ -1,12 +1,12 @@
-export { default as Theme } from "./components/wrappers/Theme/Theme.svelte";
-export { default as Container } from "./components/wrappers/Container/Container.svelte";
-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 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 Theme } from "./wrappers/Theme/Theme.svelte";
+export { default as Container } from "./wrappers/Container/Container.svelte";
+export { default as Accordion } from "./layout/Accordion/Accordion.svelte";
+export { default as Footer } from "./layout/Footer/Footer.svelte";
+export { default as Header } from "./layout/Header/Header.svelte";
+export { default as Twisty } from "./layout/Twisty/Twisty.svelte";
+export { default as Button } from "./inputs/Button/Button.svelte";
+export { default as Dropdown } from "./inputs/Dropdown/Dropdown.svelte";
+export { default as Em } from "./decorators/Em/Em.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";

package/dist/@types/js/docsPage.d.ts

@@ -0,0 +1,25 @@
+export namespace parameters {
+    let viewMode: string;
+    namespace previewTabs {
+        namespace canvas {
+            let hidden: boolean;
+        }
+    }
+    let toolbar: {
+        zoom: {
+            hidden: boolean;
+        };
+        eject: {
+            hidden: boolean;
+        };
+        fullscreen: {
+            hidden: boolean;
+        };
+        "storybook/background": {
+            hidden: boolean;
+        };
+        "storybook/outline": {
+            hidden: boolean;
+        };
+    };
+}

package/dist/@types/js/withParams.d.ts

@@ -0,0 +1,15 @@
+export function withSource(source: object, otherOptions?: object): {
+    parameters: {
+        docs: any;
+    };
+};
+export function withStoryDocs(storyDocs: string, otherOptions?: object): {
+    parameters: {
+        docs: any;
+    };
+};
+export function withComponentDocs(componentDocs: string, otherOptions?: object): {
+    parameters: {
+        docs: any;
+    };
+};

package/dist/@types/layout/Filler/Filler.svelte.d.ts

@@ -0,0 +1,41 @@
+/** @typedef {typeof __propDef.props}  FillerProps */
+/** @typedef {typeof __propDef.events}  FillerEvents */
+/** @typedef {typeof __propDef.slots}  FillerSlots */
+export default class Filler extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "lightblue";
+    background?: string;
+    width?: "narrow" | "medium" | "wide" | "full";
+    height?: "full" | "auto" | "tall";
+    marginTop?: boolean;
+    marginBottom?: boolean;
+    themeOverrides?: any;
+    id?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type FillerProps = typeof __propDef.props;
+export type FillerEvents = typeof __propDef.events;
+export type FillerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        theme?: "light" | "dark" | "lightblue";
+        background?: string;
+        width?: "narrow" | "medium" | "wide" | "full";
+        height?: "auto" | "tall" | "full";
+        marginTop?: boolean;
+        marginBottom?: boolean;
+        themeOverrides?: object;
+        id?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/Grid/Grid.svelte.d.ts

@@ -0,0 +1,45 @@
+/** @typedef {typeof __propDef.props}  GridProps */
+/** @typedef {typeof __propDef.events}  GridEvents */
+/** @typedef {typeof __propDef.slots}  GridSlots */
+export default class Grid extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "lightblue";
+    width?: "narrow" | "medium" | "wide" | "full";
+    height?: string | number;
+    marginTop?: boolean;
+    marginBottom?: boolean;
+    themeOverrides?: any;
+    id?: string;
+    colwidth?: "narrow" | "medium" | "wide" | "full";
+    caption?: string;
+    gap?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type GridProps = typeof __propDef.props;
+export type GridEvents = typeof __propDef.events;
+export type GridSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        theme?: "light" | "dark" | "lightblue";
+        width?: "narrow" | "medium" | "wide" | "full";
+        height?: number | string;
+        marginTop?: boolean;
+        marginBottom?: boolean;
+        themeOverrides?: object;
+        id?: string;
+        colwidth?: "narrow" | "medium" | "wide" | "full";
+        caption?: string;
+        gap?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/Hero/Hero.svelte.d.ts

@@ -0,0 +1,43 @@
+/** @typedef {typeof __propDef.props}  HeroProps */
+/** @typedef {typeof __propDef.events}  HeroEvents */
+/** @typedef {typeof __propDef.slots}  HeroSlots */
+export default class Hero extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "lightblue";
+    background?: string;
+    width?: "narrow" | "medium" | "wide" | "full";
+    height?: "full" | "auto" | "tall";
+    themeOverrides?: any;
+    title?: string;
+    id?: string;
+    lede?: string;
+    date?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type HeroProps = typeof __propDef.props;
+export type HeroEvents = typeof __propDef.events;
+export type HeroSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        theme?: "light" | "dark" | "lightblue";
+        background?: string;
+        width?: "narrow" | "medium" | "wide" | "full";
+        height?: "auto" | "tall" | "full";
+        themeOverrides?: object;
+        title?: string;
+        id?: string;
+        lede?: string;
+        date?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/Scroller/Scroller.svelte.d.ts

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  ScrollerProps */
+/** @typedef {typeof __propDef.events}  ScrollerEvents */
+/** @typedef {typeof __propDef.slots}  ScrollerSlots */
+export default class Scroller extends SvelteComponentTyped<{
+    marginBottom?: boolean;
+    id?: string;
+    progress?: number;
+    splitscreen?: boolean;
+    threshold?: number;
+    count?: number;
+    index?: number;
+    sectionId?: string;
+    offset?: number;
+    visible?: boolean;
+}, {
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    background: {};
+    foreground: {};
+}> {
+}
+export type ScrollerProps = typeof __propDef.props;
+export type ScrollerEvents = typeof __propDef.events;
+export type ScrollerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        marginBottom?: boolean;
+        id?: string;
+        progress?: number;
+        splitscreen?: boolean;
+        threshold?: number;
+        count?: number;
+        index?: number;
+        sectionId?: string;
+        offset?: number;
+        visible?: boolean;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        background: {};
+        foreground: {};
+    };
+};
+export {};

package/dist/@types/layout/Scroller/ScrollerSection.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  ScrollerSectionProps */
+/** @typedef {typeof __propDef.events}  ScrollerSectionEvents */
+/** @typedef {typeof __propDef.slots}  ScrollerSectionSlots */
+export default class ScrollerSection extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "lightblue";
+    title?: string;
+    id?: string;
+    hideTitle?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ScrollerSectionProps = typeof __propDef.props;
+export type ScrollerSectionEvents = typeof __propDef.events;
+export type ScrollerSectionSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        theme?: "light" | "dark" | "lightblue";
+        title?: string;
+        id?: string;
+        hideTitle?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/{components/layout → layout}/TitleBlock/Meta.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  MetaEvents */
 /** @typedef {typeof __propDef.slots}  MetaSlots */
 export default class Meta extends SvelteComponentTyped<{
-    [x: string]: never;
+    meta?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -13,7 +13,7 @@ export type MetaSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        meta?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/index.js

@@ -1,17 +1,17 @@
 // Wrappers
-export { default as Theme } from "./components/wrappers/Theme/Theme.svelte";
-export { default as Container } from "./components/wrappers/Container/Container.svelte";
+export { default as Theme } from "./wrappers/Theme/Theme.svelte";
+export { default as Container } from "./wrappers/Container/Container.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 Footer } from "./layout/Footer/Footer.svelte";
+export { default as Header } from "./layout/Header/Header.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 Em } from "./decorators/Em/Em.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";

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

@@ -1,5 +1,5 @@
 <script>
-  import Container from "$lib/components/wrappers/Container/Container.svelte";
+  import Container from "$lib/wrappers/Container/Container.svelte";
 
   /**
    * (Optional) Include a horizontal rule

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");