@reuters-graphics/graphics-components 0.0.1-beta.1

package/README.md

@@ -0,0 +1,7 @@
+![](https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg)
+
+# ⚙️ graphics-components
+
+Svelte components, SCSS and more for Reuters Graphics pages.
+
+[Read the docs.](https://reuters-graphics.github.io/graphics-components/)

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

@@ -0,0 +1,4 @@
+declare function _default(node: any, props: any): {
+    update(newProps: any): void;
+};
+export default _default;

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

@@ -0,0 +1,4 @@
+declare function _default(element: any, onResize: any): {
+    destroy: () => void;
+};
+export default _default;

package/dist/@types/components/@types/global.d.ts

@@ -0,0 +1,28 @@
+import type { ComponentType } from 'svelte';
+/**
+ * Used for any props that restrict width of a container to one of pre-fab widths.
+ */
+export declare type ContainerWidth = 'narrower' | 'narrow' | 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+/**
+ * A step in the Scroller component.
+ */
+export interface ScrollerStep {
+    /**
+     * A background component
+     * @required
+     */
+    background: ComponentType;
+    /**
+     * Optional props for background component
+     */
+    backgroundProps?: Object;
+    /**
+     * Foreground can either be a component or markdown-formatted string.
+     * @required
+     */
+    foreground: ComponentType | string;
+    /**
+     * Optional props for foreground component
+     */
+    foregroundProps?: Object;
+}

package/dist/@types/components/Article/Article.svelte.d.ts

@@ -0,0 +1,32 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Set to true for embeddables. */ embedded?: boolean;
+        /** Add an id to the article tag to target it with custom CSS. */ id?: string | null;
+        /** ARIA role of the article. */ role?: string | null;
+        /** Set custom widths for the normal, wide and wider column dimensions */ columnWidths?: {
+            /** Narrower column width */
+            narrower: number;
+            /** Narrow column width */
+            narrow: number;
+            /** Normal column width */
+            normal: number;
+            /** Wide column width */
+            wide: number;
+            /** Wider column width */
+            wider: number;
+        };
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type ArticleProps = typeof __propDef.props;
+export declare type ArticleEvents = typeof __propDef.events;
+export declare type ArticleSlots = typeof __propDef.slots;
+export default class Article extends SvelteComponentTyped<ArticleProps, ArticleEvents, ArticleSlots> {
+}
+export {};

package/dist/@types/components/BeforeAfter/BeforeAfter.svelte.d.ts

@@ -0,0 +1,57 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ContainerWidth } from '../@types/global';
+declare const __propDef: {
+    props: {
+        /** Width of the chart within the text well. */ width?: ContainerWidth;
+        /** Height of the component */ height?: number;
+        /**
+           * If set, makes the height a ratio of the component's width.
+           * @type {number}
+           */ heightRatio?: number | null;
+        /**
+           * Before image src
+           * @required
+           */ beforeSrc?: string | null;
+        /**
+           * Before image altText
+           * @required
+           */ beforeAlt?: string | null;
+        /**
+           * After image src
+           * @required
+           */ afterSrc?: string | null;
+        /**
+           * After image altText
+           * @required
+           */ afterAlt?: string | null;
+        /** Drag handle colour */ handleColour?: string;
+        /** Drag handle opacity */ handleInactiveOpacity?: number;
+        /** Margin at the edge of the image to stop dragging */ handleMargin?: number;
+        /** Percentage of the component width the handle will travel ona key press */ keyPressStep?: number;
+        /** Initial offset of the handle, between 0 and 1. */ offset?: number;
+        /**
+           * Add an ID to target with SCSS.
+           * @type {string}
+           */ id?: string;
+    };
+    events: {
+        mousedown: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        beforeOverlay: {
+            description: string;
+        };
+        afterOverlay: {
+            description: string;
+        };
+        caption: {};
+    };
+};
+export declare type BeforeAfterProps = typeof __propDef.props;
+export declare type BeforeAfterEvents = typeof __propDef.events;
+export declare type BeforeAfterSlots = typeof __propDef.slots;
+export default class BeforeAfter extends SvelteComponentTyped<BeforeAfterProps, BeforeAfterEvents, BeforeAfterSlots> {
+}
+export {};

package/dist/@types/components/Block/Block.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ContainerWidth } from '../@types/global';
+declare const __propDef: {
+    props: {
+        /** Width of the block within the article well. */ width?: ContainerWidth;
+        /** Add an id to the block tag to target it with custom CSS. */ id?: string;
+        /** Add extra classes to the block tag to target it with custom CSS. */ cls?: string;
+        /** Snap block to column widths, rather than fluidly resizing them. */ snap?: boolean;
+        /** ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block */ role?: string | null;
+        /** ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block */ ariaLabel?: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type BlockProps = typeof __propDef.props;
+export declare type BlockEvents = typeof __propDef.events;
+export declare type BlockSlots = typeof __propDef.slots;
+export default class Block extends SvelteComponentTyped<BlockProps, BlockEvents, BlockSlots> {
+}
+export {};

package/dist/@types/components/BodyText/BodyText.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * A markdown text string.
+           * @type {string}
+           * @required
+           */ text: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BodyTextProps = typeof __propDef.props;
+export declare type BodyTextEvents = typeof __propDef.events;
+export declare type BodyTextSlots = typeof __propDef.slots;
+export default class BodyText extends SvelteComponentTyped<BodyTextProps, BodyTextEvents, BodyTextSlots> {
+}
+export {};

package/dist/@types/components/DatawrapperChart/DatawrapperChart.svelte.d.ts

@@ -0,0 +1,52 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ContainerWidth } from '../@types/global';
+declare const __propDef: {
+    props: {
+        /**
+           * Title of the graphic
+           * @type {string}
+           */ title?: string | null;
+        /**
+           * Description of the graphic, passed in as a markdown string.
+           * @type {string}
+           */ description?: string | null;
+        /**
+           * iframe title
+           * @required
+           */ frameTitle?: string;
+        /**
+           * Notes to the graphic, passed in as a markdown string.
+           * @type {string}
+           */ notes?: string | null;
+        /**
+           * iframe aria label
+           * @required
+           */ ariaLabel?: string;
+        /** iframe id */ id?: string;
+        /**
+           * Datawrapper embed URL
+           * @required
+           */ src: string;
+        /** iframe scrolling option */ scrolling?: "auto" | "yes" | "no";
+        /** Width of the chart within the text well. */ width?: ContainerWidth;
+        /**
+           * Set a different width for the text within the text well, for example,
+           * "normal" to keep the title, description and notes inline with the rest
+           * of the text well. Can't ever be wider than `width`.
+           * @type {string}
+           */ textWidth?: ContainerWidth | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        notes: {};
+    };
+};
+export declare type DatawrapperChartProps = typeof __propDef.props;
+export declare type DatawrapperChartEvents = typeof __propDef.events;
+export declare type DatawrapperChartSlots = typeof __propDef.slots;
+export default class DatawrapperChart extends SvelteComponentTyped<DatawrapperChartProps, DatawrapperChartEvents, DatawrapperChartSlots> {
+}
+export {};

package/dist/@types/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        dev?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type EmbedPreviewerLinkProps = typeof __propDef.props;
+export declare type EmbedPreviewerLinkEvents = typeof __propDef.events;
+export declare type EmbedPreviewerLinkSlots = typeof __propDef.slots;
+export default class EmbedPreviewerLink extends SvelteComponentTyped<EmbedPreviewerLinkProps, EmbedPreviewerLinkEvents, EmbedPreviewerLinkSlots> {
+}
+export {};

package/dist/@types/components/FeaturePhoto/FeaturePhoto.svelte.d.ts

@@ -0,0 +1,43 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ContainerWidth } from '../@types/global';
+declare const __propDef: {
+    props: {
+        /**
+           * Photo src
+           * @type {string}
+           * @required
+           */ src: string;
+        /**
+           * Photo altText
+           * @type {string}
+           * @required
+           */ altText: string;
+        /**
+           * Caption below the photo
+           * @type {string}
+           */ caption: string;
+        /**
+           * Height of the photo placeholder when lazy-loading
+           */ height?: number;
+        /**
+           * Width of the container, one of: normal, wide, wider, widest or fluid
+           */ width?: ContainerWidth;
+        /**
+           * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+           */ lazy?: boolean;
+        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading. */ top?: number;
+        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading. */ bottom?: number;
+        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading. */ left?: number;
+        /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading. */ right?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type FeaturePhotoProps = typeof __propDef.props;
+export declare type FeaturePhotoEvents = typeof __propDef.events;
+export declare type FeaturePhotoSlots = typeof __propDef.slots;
+export default class FeaturePhoto extends SvelteComponentTyped<FeaturePhotoProps, FeaturePhotoEvents, FeaturePhotoSlots> {
+}
+export {};

package/dist/@types/components/Framer/Framer.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  FramerProps */
+/** @typedef {typeof __propDef.events}  FramerEvents */
+/** @typedef {typeof __propDef.slots}  FramerSlots */
+export default class Framer extends SvelteComponentTyped<{
+    embeds: any;
+    breakpoints?: number[];
+    maxFrameWidth?: number;
+    minFrameWidth?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FramerProps = typeof __propDef.props;
+export type FramerEvents = typeof __propDef.events;
+export type FramerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        embeds: any;
+        breakpoints?: number[];
+        maxFrameWidth?: number;
+        minFrameWidth?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/components/Framer/Resizer/index.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  IndexProps */
+/** @typedef {typeof __propDef.events}  IndexEvents */
+/** @typedef {typeof __propDef.slots}  IndexSlots */
+export default class Index extends SvelteComponentTyped<{
+    breakpoints?: number[];
+    maxFrameWidth?: number;
+    minFrameWidth?: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        breakpoints?: number[];
+        maxFrameWidth?: number;
+        minFrameWidth?: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/@types/components/Framer/stores.d.ts

@@ -0,0 +1 @@
+export const width: import("svelte/store").Writable<number>;

package/dist/@types/components/Framer/uniqNames.d.ts

@@ -0,0 +1,2 @@
+declare function _default(embeds: any): any;
+export default _default;

package/dist/@types/components/GraphicBlock/AriaHidden.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * Whether to wrap the graphic with an aria hidden tag.
+           */ hidden?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type AriaHiddenProps = typeof __propDef.props;
+export declare type AriaHiddenEvents = typeof __propDef.events;
+export declare type AriaHiddenSlots = typeof __propDef.slots;
+export default class AriaHidden extends SvelteComponentTyped<AriaHiddenProps, AriaHiddenEvents, AriaHiddenSlots> {
+}
+export {};

package/dist/@types/components/GraphicBlock/GraphicBlock.svelte.d.ts

@@ -0,0 +1,64 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ContainerWidth } from '../@types/global';
+declare const __propDef: {
+    props: {
+        /**
+           * Width of the component within the text well.
+           * @type {string}
+           */ width?: ContainerWidth;
+        /**
+           * Add an id to the block tag to target it with custom CSS.
+           * @type {string}
+           */ id?: string;
+        /**
+           * Add extra classes to the block tag to target it with custom CSS.
+           * @type {string}
+           */ cls?: string;
+        /** Snap block to column widths, rather than fluidly resizing them. */ snap?: boolean;
+        /**
+           * ARIA [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) for the block
+           * @type {string}
+           */ role?: string | null;
+        /**
+           * Notes to the graphic, passed in as a markdown string.
+           * @type {string}
+           */ notes?: string | null;
+        /**
+           * Set a different width for the text within the text well, for example,
+           * "normal" to keep the title, description and notes inline with the rest
+           * of the text well. Can't ever be wider than `width`.
+           * @type {string}
+           */ textWidth?: ContainerWidth | null;
+        /**
+           * Title of the graphic
+           * @type {string}
+           */ title?: string | null;
+        /**
+           * Description of the graphic, passed in as a markdown string.
+           * @type {string}
+           */ description?: string | null;
+        /**
+           * ARIA [label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) for the block
+           * @type {string}
+           */ ariaLabel?: string;
+        /**
+           * ARIA description, passed in as a markdown string.
+           * @type {string}
+           */ ariaDescription?: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        title: {};
+        default: {};
+        aria: {};
+        notes: {};
+    };
+};
+export declare type GraphicBlockProps = typeof __propDef.props;
+export declare type GraphicBlockEvents = typeof __propDef.events;
+export declare type GraphicBlockSlots = typeof __propDef.slots;
+export default class GraphicBlock extends SvelteComponentTyped<GraphicBlockProps, GraphicBlockEvents, GraphicBlockSlots> {
+}
+export {};

package/dist/@types/components/GraphicBlock/TextBlock.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ContainerWidth } from '../@types/global';
+declare const __propDef: {
+    props: {
+        /** Width of the component within the text well. */ width?: ContainerWidth | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TextBlockProps = typeof __propDef.props;
+export declare type TextBlockEvents = typeof __propDef.events;
+export declare type TextBlockSlots = typeof __propDef.slots;
+export default class TextBlock extends SvelteComponentTyped<TextBlockProps, TextBlockEvents, TextBlockSlots> {
+}
+export {};

package/dist/@types/components/Headline/Headline.svelte.d.ts

@@ -0,0 +1,29 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * Headline
+           */ hed?: string;
+        /**
+           * Dek
+           */ dek?: string | null;
+        /**
+           * Section title
+           */ section?: string | null;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        crown: {};
+        hed: {};
+        byline: {};
+        dateline: {};
+    };
+};
+export declare type HeadlineProps = typeof __propDef.props;
+export declare type HeadlineEvents = typeof __propDef.events;
+export declare type HeadlineSlots = typeof __propDef.slots;
+export default class Headline extends SvelteComponentTyped<HeadlineProps, HeadlineEvents, HeadlineSlots> {
+}
+export {};

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

@@ -0,0 +1,41 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+            * Headline
+            */ hed?: string;
+        /**
+            * Hedline colour
+            */ hedColour?: string;
+        /**
+            * Dek
+            */ dek?: string | null;
+        /**
+            * Section title
+            */ section?: string | null;
+        /**
+            * Section colour
+            */ sectionColour?: string;
+        imgSrc: string;
+        imgAltText: string;
+        overlay?: boolean | string;
+        top?: boolean;
+        bottom?: boolean;
+        left?: boolean;
+        right?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        image: {};
+        hed: {};
+        dek: {};
+    };
+};
+export declare type HeroProps = typeof __propDef.props;
+export declare type HeroEvents = typeof __propDef.events;
+export declare type HeroSlots = typeof __propDef.slots;
+export default class Hero extends SvelteComponentTyped<HeroProps, HeroEvents, HeroSlots> {
+}
+export {};

package/dist/@types/components/NoteText/NoteText.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * A markdown text string.
+           * @type {string}
+           * @required
+           */ text: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type NoteTextProps = typeof __propDef.props;
+export declare type NoteTextEvents = typeof __propDef.events;
+export declare type NoteTextSlots = typeof __propDef.slots;
+export default class NoteText extends SvelteComponentTyped<NoteTextProps, NoteTextEvents, NoteTextSlots> {
+}
+export {};

package/dist/@types/components/PaddingReset/index.svelte.d.ts

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

package/dist/@types/components/PhotoPack/PhotoPack.svelte.d.ts

@@ -0,0 +1,50 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * Array of image objects
+           * @required
+           */ images?: {
+            src: string;
+            altText: string;
+            caption?: string;
+            maxHeight?: number;
+        }[];
+        /**
+           * Array of layout objects
+           * @required
+           */ layouts?: {
+            breakpoint: number;
+            rows: number[];
+        }[];
+        /**
+           * Gap between images.
+           * @type {number}
+           */ gap?: number;
+        /**
+           * Add an ID to target with SCSS. Should be unique from all other elements.
+           * @type {string}
+           */ id?: string;
+        /**
+           * Add a class to target with SCSS.
+           * @type {string}
+           */ cls?: string;
+        /** Width of the component within the text well. */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
+        /**
+           * Set a different width for captions within the text well, for example,
+           * "normal" to keep captions inline with the rest of the text well.
+           * Can't ever be wider than `width`.
+           * @type {string}
+           */ captionWidth?: "normal" | "wide" | "wider" | "widest" | "fluid";
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type PhotoPackProps = typeof __propDef.props;
+export declare type PhotoPackEvents = typeof __propDef.events;
+export declare type PhotoPackSlots = typeof __propDef.slots;
+export default class PhotoPack extends SvelteComponentTyped<PhotoPackProps, PhotoPackEvents, PhotoPackSlots> {
+}
+export {};