@onsvisual/svelte-components 0.0.3 → 0.0.5

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/datavis/Table/Table.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+export default class Table extends SvelteComponentTyped<{
+    compact?: boolean;
+    title?: string;
+    responsive?: boolean;
+    rowHover?: boolean;
+    data?: any[];
+    columns?: any[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        compact?: boolean;
+        title?: string;
+        responsive?: boolean;
+        rowHover?: boolean;
+        data?: any[];
+        columns?: any[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -1,12 +1,27 @@
-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 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";
+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";
+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";
+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";
+export { default as Table } from "./datavis/Table/Table.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;
+    id?: string;
+    title?: 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;
+        id?: string;
+        title?: string;
+        lede?: string;
+        date?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ListProps */
+/** @typedef {typeof __propDef.events}  ListEvents */
+/** @typedef {typeof __propDef.slots}  ListSlots */
+export default class List extends SvelteComponentTyped<{
+    mode?: "number" | "bullet" | "dash" | "bare";
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ListProps = typeof __propDef.props;
+export type ListEvents = typeof __propDef.events;
+export type ListSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        mode?: "bullet" | "dash" | "number" | "bare";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/layout/NavSections/NavSection.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  NavSectionProps */
+/** @typedef {typeof __propDef.events}  NavSectionEvents */
+/** @typedef {typeof __propDef.slots}  NavSectionSlots */
+export default class NavSection extends SvelteComponentTyped<{
+    id?: string;
+    title?: string;
+    hideTitle?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type NavSectionProps = typeof __propDef.props;
+export type NavSectionEvents = typeof __propDef.events;
+export type NavSectionSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id?: string;
+        title?: string;
+        hideTitle?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,43 @@
+/** @typedef {typeof __propDef.props}  NavSectionsProps */
+/** @typedef {typeof __propDef.events}  NavSectionsEvents */
+/** @typedef {typeof __propDef.slots}  NavSectionsSlots */
+export default class NavSections extends SvelteComponentTyped<{
+    tocId?: string;
+    contentsLabel?: string;
+    noContents?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    'before-nav': {};
+    'after-nav': {};
+    before: {};
+    default: {};
+    after: {};
+    footer: {};
+}> {
+}
+export type NavSectionsProps = typeof __propDef.props;
+export type NavSectionsEvents = typeof __propDef.events;
+export type NavSectionsSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tocId?: string;
+        contentsLabel?: string;
+        noContents?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        'before-nav': {};
+        'after-nav': {};
+        before: {};
+        default: {};
+        after: {};
+        footer: {};
+    };
+};
+export {};

package/dist/@types/layout/NavSections/SectionBacklink.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SectionBacklinkProps */
+/** @typedef {typeof __propDef.events}  SectionBacklinkEvents */
+/** @typedef {typeof __propDef.slots}  SectionBacklinkSlots */
+export default class SectionBacklink extends SvelteComponentTyped<{
+    tocId?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SectionBacklinkProps = typeof __propDef.props;
+export type SectionBacklinkEvents = typeof __propDef.events;
+export type SectionBacklinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        tocId?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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";
+    id?: string;
+    title?: 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";
+        id?: string;
+        title?: 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/@types/{components/layout → layout}/TitleBlock/TitleBlock.svelte.d.ts

@@ -2,10 +2,20 @@
 /** @typedef {typeof __propDef.events}  TitleBlockEvents */
 /** @typedef {typeof __propDef.slots}  TitleBlockSlots */
 export default class TitleBlock extends SvelteComponentTyped<{
-    [x: string]: never;
+    theme?: "light" | "dark" | "lightblue";
+    background?: string;
+    themeOverrides?: any;
+    title?: string;
+    meta?: any[];
+    natStatBadge?: boolean;
+    censusLogo?: boolean;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    before: {};
+    brand: {};
+    after: {};
+}> {
 }
 export type TitleBlockProps = typeof __propDef.props;
 export type TitleBlockEvents = typeof __propDef.events;
@@ -13,11 +23,21 @@ export type TitleBlockSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        theme?: "light" | "dark" | "lightblue";
+        background?: string;
+        themeOverrides?: object;
+        title?: string;
+        meta?: any[];
+        natStatBadge?: boolean;
+        censusLogo?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        before: {};
+        brand: {};
+        after: {};
+    };
 };
 export {};

package/dist/datavis/Table/Table.svelte

@@ -0,0 +1,129 @@
+<script>
+  import { commas, ascending, descending } from "$lib/js/utils.js";
+
+  /**
+   * An optional title for the table
+   * @type {string}
+   */
+  export let title = "";
+  /**
+   * Make the chart smaller/more compact
+   * @type {boolean}
+   */
+  export let compact = false;
+  /**
+   * Make the chart responsive (changes layout on narrow screens)
+   * @type {boolean}
+   */
+  export let responsive = false;
+  /**
+   * Highlight rows on hover
+   * @type {boolean}
+   */
+  export let rowHover = false;
+  /**
+   * Rows of data
+   * @type {array}
+   */
+  export let data = [];
+  /**
+   * Optional metadata for formatting columns. Array of {key, label, sortable?, numeric?} objects
+   * @type {array}
+   */
+  export let columns =
+    Array.isArray(data) && data[0] ? Object.keys(data[0]).map((key) => ({ key, label: key })) : [];
+  let _data = [...data];
+  let sort = columns.map((c) => "none");
+
+  const format = (val, numeric) => (numeric ? commas(val) : val);
+  $: sortable = columns.map((d) => d.sortable).includes(true);
+</script>
+
+<table
+  class="ons-table"
+  class:ons-table--sortable="{sortable}"
+  class:ons-table--compact="{compact}"
+  class:ons-table--responsive="{responsive}"
+  class:ons-table--row-hover="{rowHover}"
+  data-aria-sort="{sortable ? 'Sort by' : null}"
+  data-aria-asc="{sortable ? 'ascending' : null}"
+  data-aria-desc="{sortable ? 'descending' : null}"
+>
+  {#if title}<caption class="ons-table__caption">{title}</caption>{/if}
+  <thead class="ons-table__head">
+    <tr class="ons-table__row">
+      {#each columns as col, i}
+        {#if col.sortable}
+          <th
+            scope="col"
+            class="ons-table__header"
+            class:ons-table__header--numeric="{col.numeric}"
+            aria-sort="{sort[i]}"
+          >
+            <button
+              aria-label="Sort by {col.label}"
+              type="button"
+              data-index="{i}"
+              class="ons-table__sort-button"
+              on:click="{() => {
+                sort = sort.map((c, j) =>
+                  j === i && c === 'ascending' ? 'descending' : j === i ? 'ascending' : 'none'
+                );
+                _data = _data.sort((a, b) =>
+                  sort[i] === 'ascending'
+                    ? ascending(a[col.key], b[col.key])
+                    : descending(a[col.key], b[col.key])
+                );
+              }}"
+            >
+              {col.label}<svg
+                class="ons-svg-icon"
+                viewBox="0 0 12 19"
+                xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                fill="currentColor"
+              >
+                <path
+                  class="ons-topTriangle"
+                  d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"></path>
+                <path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"
+                ></path>
+              </svg>
+            </button>
+          </th>
+        {:else}
+          <th
+            scope="col"
+            class="ons-table__header"
+            class:ons-table__header--numeric="{col.numeric}"
+          >
+            <span class="ons-table__header-text">{col.label}</span>
+          </th>
+        {/if}
+      {/each}
+    </tr>
+  </thead>
+  <tbody class="ons-table__body">
+    {#each _data as row}
+      <tr class="ons-table__row">
+        {#each columns as col}
+          <td
+            class="ons-table__cell"
+            class:ons-table__cell--numeric="{col.numeric}"
+            data-th="{col.label}">{format(row[col.key], col.numeric)}</td
+          >
+        {/each}
+      </tr>
+    {/each}
+  </tbody>
+</table>
+
+<style>
+  .ons-table__sort-button {
+    color: var(--link, --ons-color-text-link) !important;
+  }
+  .ons-table__sort-button:hover {
+    color: var(--link-hover, --ons-color-text-link-hover) !important;
+    -webkit-text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px !important;
+            text-decoration: underline solid var(--link-hover, --ons-color-text-link-hover) 2px !important;
+  }</style>

package/dist/{components/layout → decorators}/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