@onsvisual/svelte-components 0.0.1 → 0.0.3

package/dist/@types/components/decorators/Blockquote/Blockquote.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  BlockquoteProps */
+/** @typedef {typeof __propDef.events}  BlockquoteEvents */
+/** @typedef {typeof __propDef.slots}  BlockquoteSlots */
+export default class Blockquote extends SvelteComponentTyped<{
+    attribution?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type BlockquoteProps = typeof __propDef.props;
+export type BlockquoteEvents = typeof __propDef.events;
+export type BlockquoteSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        attribution?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/components/layout/Divider/Divider.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  DividerProps */
+/** @typedef {typeof __propDef.events}  DividerEvents */
+/** @typedef {typeof __propDef.slots}  DividerSlots */
+export default class Divider extends SvelteComponentTyped<{
+    theme?: "light" | "dark" | "lightblue";
+    width?: "narrow" | "medium" | "wide" | "full";
+    marginTop?: boolean;
+    marginBottom?: boolean;
+    themeOverrides?: any;
+    hr?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DividerProps = typeof __propDef.props;
+export type DividerEvents = typeof __propDef.events;
+export type DividerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        theme?: "light" | "dark" | "lightblue";
+        width?: "narrow" | "medium" | "wide" | "full";
+        marginTop?: boolean;
+        marginBottom?: boolean;
+        themeOverrides?: object;
+        hr?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/components/layout/Section/Section.svelte.d.ts

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

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

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

package/dist/@types/components/layout/TitleBlock/TitleBlock.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TitleBlockProps */
+/** @typedef {typeof __propDef.events}  TitleBlockEvents */
+/** @typedef {typeof __propDef.slots}  TitleBlockSlots */
+export default class TitleBlock extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TitleBlockProps = typeof __propDef.props;
+export type TitleBlockEvents = typeof __propDef.events;
+export type TitleBlockSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/components/wrappers/Embed/Embed.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  EmbedProps */
+/** @typedef {typeof __propDef.events}  EmbedEvents */
+/** @typedef {typeof __propDef.slots}  EmbedSlots */
+export default class Embed extends SvelteComponentTyped<{
+    pymChild?: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type EmbedProps = typeof __propDef.props;
+export type EmbedEvents = typeof __propDef.events;
+export type EmbedSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        pymChild?: object;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/dist/@types/components/wrappers/Main/Main.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  MainProps */
+/** @typedef {typeof __propDef.events}  MainEvents */
+/** @typedef {typeof __propDef.slots}  MainSlots */
+export default class Main extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type MainProps = typeof __propDef.props;
+export type MainEvents = typeof __propDef.events;
+export type MainSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -1,9 +1,8 @@
+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 Container } from "./components/layout/Container/Container.svelte";
 export { default as Footer } from "./components/layout/Footer/Footer.svelte";
 export { default as Header } from "./components/layout/Header/Header.svelte";
-export { default as Section } from "./components/layout/Section/Section.svelte";
-export { default as Theme } from "./components/layout/Theme/Theme.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";

package/dist/components/decorators/Blockquote/Blockquote.svelte

@@ -0,0 +1,27 @@
+<script>
+  /**
+   * (Optional) attribution for the quote. If you leave this blank, you will just get an indented text block.
+   * @type {string}
+   */
+  export let attribution = "";
+</script>
+
+<blockquote class="ons-quote">
+  {#if attribution}
+    <svg
+      class="ons-svg-icon"
+      viewBox="0 0 14 10"
+      xmlns="http://www.w3.org/2000/svg"
+      focusable="false"
+      fill="currentColor"
+    >
+      <path
+        d="M13.44.77h-3l-2 4v6h6v-6h-3l2-4zm-8 0h-3l-2 4v6h6v-6h-3l2-4z"
+        transform="translate(-0.44 -0.77)"></path>
+    </svg>
+    <span class="ons-quote__text ons-u-fs-l"><slot /></span>
+    <span class="ons-quote__ref">&mdash; {attribution}</span>
+  {:else}
+    <span class="ons-quote__text ons-u-fs-l"><slot /></span>
+  {/if}
+</blockquote>

package/dist/components/layout/Divider/Divider.svelte

@@ -0,0 +1,53 @@
+<script>
+  import Container from "$lib/components/wrappers/Container/Container.svelte";
+
+  /**
+   * (Optional) Include a horizontal rule
+   * @type {boolean}
+   */
+  export let hr = true;
+  /**
+   * Sets the width of the container
+   * @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;
+</script>
+
+<Container
+  theme="{theme}"
+  themeOverrides="{themeOverrides}"
+  width="{width}"
+  marginTop="{marginTop}"
+  marginBottom="{marginBottom}"
+>
+  <hr style:border="{hr ? null : "none"}" />
+</Container>
+
+<style>
+  hr {
+    width: 75px;
+    border: none;
+    border-top: 2px solid;
+    margin: -10px auto 0;
+    color: var(--muted, #777);
+  }</style>

package/dist/components/layout/Footer/Footer.svelte

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

package/dist/components/layout/Header/Header.svelte

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

package/dist/components/layout/Section/Section.svelte

@@ -0,0 +1,65 @@
+<script>
+  import { slugify } from "$lib/js/utils.js";
+  import Container from "$lib/components/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 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/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/components/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/components/wrappers/Main/Main.svelte

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