@reuters-graphics/graphics-components 1.0.30 → 1.1.1

package/dist/components/HeroHeadline/stories/graphics/quakemap.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  QuakemapProps */
+/** @typedef {typeof __propDef.events}  QuakemapEvents */
+/** @typedef {typeof __propDef.slots}  QuakemapSlots */
+export default class Quakemap extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type QuakemapProps = typeof __propDef.props;
+export type QuakemapEvents = typeof __propDef.events;
+export type QuakemapSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/InfoBox/InfoBox.stories.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import InfoBox from './InfoBox.svelte';
+  import BodyText from '../BodyText/BodyText.svelte';
+  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      theme: {
+        control: 'select',
+        options: ['light', 'dark'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+</script>
+
+<Meta title="Components/InfoBox" component="{InfoBox}" {...metaProps} />
+
+<Template let:args>
+  <InfoBox {...args} />
+</Template>
+
+<Story name="Default">
+  <BodyText
+    text="If you haven't seen Game of Thrones, go watch it right now. If you have then you'll totally get why this Hodor themed lorem ipsum generator is just brilliant."
+  />
+  <InfoBox
+    title="About this data"
+    text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
+    notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
+  />
+  <BodyText
+    text="In case you don't read Twitter, the news, or just can't get enough of The Apprentice host's legendary oration, try this Trump lorem ipsum generator on for size."
+  />
+</Story>
+
+<Story name="List">
+  <InfoBox
+    title="What you need to know about the war"
+    text="{"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. "}"
+  />
+</Story>

package/dist/components/InfoBox/InfoBox.stories.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  InfoBoxProps */
+/** @typedef {typeof __propDef.events}  InfoBoxEvents */
+/** @typedef {typeof __propDef.slots}  InfoBoxSlots */
+export default class InfoBox extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type InfoBoxProps = typeof __propDef.props;
+export type InfoBoxEvents = typeof __propDef.events;
+export type InfoBoxSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/InfoBox/InfoBox.svelte

@@ -1,43 +1,20 @@
 <!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InfoBox--default) -->
-<script>/**
- * Title of the box
- */
-export let title = null;
-/**
- * Contents of the note as a markdown string
- */
-export let text = '';
-/**
- * Additional footnotes
- */ export let notes = null;
-/**
- * Width of the component within the text well.
- * @type {string}
- */
-export let width = 'normal';
-/**
- * Add extra classes to the block tag to target it with custom CSS.
- * @type {string}
- */
-let cls = '';
+<script>export let title = null;
+export let text = "";
+export let notes = null;
+export let width = "normal";
+let cls = "";
 export { cls as class };
-/**
- * Add an id to the block tag to target it with custom CSS.
- * @type {string}
- */
-export let id = '';
-/**
- * Page theme
- */
-export let theme = 'light';
-import Block from '../Block/Block.svelte';
-import Markdown from '../Markdown/Markdown.svelte';
+export let id = "";
+export let theme = "light";
+import Block from "../Block/Block.svelte";
+import Markdown from "../Markdown/Markdown.svelte";
 </script>
 
 <aside class="infobox {theme}">
   <Block
-    width="{width}"
-    id="{id}"
+    {width}
+    {id}
     class="{cls} fmy-6 fpx-6 fpy-5 border border-solid rounded"
   >
     {#if $$slots.header}

package/dist/{@types/components → components}/InfoBox/InfoBox.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 import type { ContainerWidth } from '../@types/global';
 declare const __propDef: {
     props: {
@@ -35,11 +35,13 @@ declare const __propDef: {
         body: {};
         footer: {};
     };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type InfoBoxProps = typeof __propDef.props;
 export type InfoBoxEvents = typeof __propDef.events;
 export type InfoBoxSlots = typeof __propDef.slots;
 /** `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-InfoBox--default) */
-export default class InfoBox extends SvelteComponentTyped<InfoBoxProps, InfoBoxEvents, InfoBoxSlots> {
+export default class InfoBox extends SvelteComponent<InfoBoxProps, InfoBoxEvents, InfoBoxSlots> {
 }
 export {};

package/dist/components/InfoBox/stories/docs/component.md

@@ -0,0 +1,17 @@
+InfoBox is used to provide additional information that needs to be visually set aside from the main content flow. e.g. Methodology, Detailed notes about data, Extra context as text stories.
+
+Switch the theme prop to `dark` for a dark page infobox.
+
+Use the slots to customize the content as needed, e.g. adding icons and thumbnail images etc.
+
+```svelte
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+</script>
+
+<InfoBox
+  title="About this data"
+  text="{'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}"
+  notes="{'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}"
+/>
+```

package/dist/components/Markdown/Markdown.stories.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import Markdown from './Markdown.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  import Block from '../Block/Block.svelte';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+  };
+</script>
+
+<Meta title="Components/Markdown" component="{Markdown}" {...metaProps} />
+
+<Template let:args>
+  <Block>
+    <Markdown {...args} />
+  </Block>
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    source: 'This is *some* text in **markdown**.',
+  }}"
+/>

package/dist/components/Markdown/Markdown.stories.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  MarkdownProps */
+/** @typedef {typeof __propDef.events}  MarkdownEvents */
+/** @typedef {typeof __propDef.slots}  MarkdownSlots */
+export default class Markdown extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type MarkdownProps = typeof __propDef.props;
+export type MarkdownEvents = typeof __propDef.events;
+export type MarkdownSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/Markdown/Markdown.svelte

@@ -1,21 +1,19 @@
 <!-- @component `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Markdown--default) -->
-<script>import { marked } from 'marked';
-import { staticMarkdown } from './stores';
-/** A Markdown formatted string */
-export let source = '';
-/** Parse markdown inline, i.e., without wrapping it in paragraph tags */
+<script>import { marked } from "marked";
+import { staticMarkdown } from "./stores";
+export let source = "";
 export let parseInline = false;
 $: markdown = parseInline ? marked.parseInline(source) : marked.parse(source);
 const setInnerHTML = (node, html) => {
-    node.innerHTML = html;
-    return {
-        update(html) {
-            node.innerHTML = html;
-        },
-        destroy() {
-            node.innerHTML = '';
-        },
-    };
+  node.innerHTML = html;
+  return {
+    update(html2) {
+      node.innerHTML = html2;
+    },
+    destroy() {
+      node.innerHTML = "";
+    }
+  };
 };
 </script>
 
@@ -32,4 +30,5 @@ const setInnerHTML = (node, html) => {
 <style>
   div {
     display: contents;
-  }</style>
+  }
+</style>

package/dist/{@types/components → components}/Markdown/Markdown.svelte.d.ts

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /** A Markdown formatted string */ source?: string;
@@ -8,11 +8,13 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type MarkdownProps = typeof __propDef.props;
 export type MarkdownEvents = typeof __propDef.events;
 export type MarkdownSlots = typeof __propDef.slots;
 /** `Markdown` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-Markdown--default) */
-export default class Markdown extends SvelteComponentTyped<MarkdownProps, MarkdownEvents, MarkdownSlots> {
+export default class Markdown extends SvelteComponent<MarkdownProps, MarkdownEvents, MarkdownSlots> {
 }
 export {};

package/dist/{@types/components → components}/Markdown/stores.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 /**
  * Set to `false` in the browser to ensure Markdown content correctly updates
  * when a SvelteKit app hyrates.

package/dist/components/Markdown/stores.js

@@ -22,4 +22,3 @@ import { writable } from 'svelte/store';
  * ```
  */
 export const staticMarkdown = writable(true);
-//# sourceMappingURL=stores.js.map

package/dist/components/Markdown/stories/docs/component.md

@@ -0,0 +1,39 @@
+The Markdown component renders markdown into HTML. That's it!
+
+---
+
+```svelte
+<script>
+  import { Markdown } from '@reuters-graphics/graphics-components';
+</script>
+
+<Markdown source="{'My markdown **string**!'}" />
+```
+
+... well, almost.
+
+Owing to a weird quirk of Svelte's [`@html`](https://svelte.dev/docs/special-tags#html) directive (see [this issue](https://github.com/reuters-graphics/graphics-components/issues/148)), if you want your resulting HTML to be dynamic — e.g., update after a SvelteKit app [hydrates](https://kit.svelte.dev/docs/glossary#hydration) — then you may need to set the included `$staticMarkdown` store to `false` in the browser.
+
+For example, if you're refreshing some data with markdown strings in a SvelteKit project using a [load function](https://kit.svelte.dev/docs/load), set the store to reflect the [`building`](https://kit.svelte.dev/docs/modules#$app-environment-building) variable, which will correctly [prerender](https://kit.svelte.dev/docs/glossary#prerendering) your markdown content AND update it after fresh data is fetched in the browser.
+
+```javascript
+// +layout.js
+import { staticMarkdown } from '@reuters-graphics/graphics-components';
+import { building } from '$app/environment';
+
+/** @type {import('./$types').LayoutLoad} */
+export const load = async () => {
+  // Set the staticMarkdown store with the value of building.
+  staticMarkdown.set(building);
+
+  // Now this content will correctly refresh when a reader loads your page.
+  const resp = await fetch(
+    'https://graphics.thomsonreuters.com/data/my-page-content.json'
+  );
+  const content = await resp.json();
+
+  return { content };
+};
+```
+
+If you're not updating your markdown content as above, you can safely leave the `$staticMarkdown` store alone and your page will do the right thing.

package/dist/components/PaddingReset/PaddingReset.stories.svelte

@@ -0,0 +1,45 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import PaddingReset from './PaddingReset.svelte';
+  import Block from '../Block/Block.svelte';
+
+  import { withComponentDocs } from '../../lib/docs/utils/withParams.js';
+</script>
+
+<Meta
+  title="Components/PaddingReset"
+  component="{PaddingReset}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <Block width="fluid">
+    <div class="outer"></div>
+    <PaddingReset {...args}>
+      <div class="inner"></div>
+    </PaddingReset>
+  </Block>
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    containerIsFluid: true,
+  }}"
+/>
+
+<style>div {
+  height: 30px;
+  width: 100%;
+  margin-bottom: 2px;
+}
+div.outer {
+  background: grey;
+}
+div.inner {
+  background: salmon;
+}</style>

package/dist/components/PaddingReset/PaddingReset.stories.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  PaddingResetProps */
+/** @typedef {typeof __propDef.events}  PaddingResetEvents */
+/** @typedef {typeof __propDef.slots}  PaddingResetSlots */
+export default class PaddingReset extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PaddingResetProps = typeof __propDef.props;
+export type PaddingResetEvents = typeof __propDef.events;
+export type PaddingResetSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/PaddingReset/PaddingReset.svelte

@@ -19,4 +19,5 @@
   div {
     width: 100%;
     padding: 0 15px;
-  }</style>
+  }
+</style>

package/dist/{@types/components → components}/PaddingReset/PaddingReset.svelte.d.ts

@@ -1,8 +1,8 @@
 /** @typedef {typeof __propDef.props}  PaddingResetProps */
 /** @typedef {typeof __propDef.events}  PaddingResetEvents */
 /** @typedef {typeof __propDef.slots}  PaddingResetSlots */
-export default class PaddingReset extends SvelteComponentTyped<{
-    containerIsFluid?: boolean;
+export default class PaddingReset extends SvelteComponent<{
+    containerIsFluid?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -12,10 +12,10 @@ export default class PaddingReset extends SvelteComponentTyped<{
 export type PaddingResetProps = typeof __propDef.props;
 export type PaddingResetEvents = typeof __propDef.events;
 export type PaddingResetSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        containerIsFluid?: boolean;
+        containerIsFluid?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -23,5 +23,7 @@ declare const __propDef: {
     slots: {
         default: {};
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/PaddingReset/stories/docs/component.md

@@ -0,0 +1,35 @@
+Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on text that's adajcent to it.
+
+The `PaddingReset` component resets padding on the `Article` well that's been cancelled by a `Block` with a `fluid` width.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="fluid">
+  <!-- An edge-to-edge image -->
+  <img src="https//..." alt="..." width="100%" />
+  <PaddingReset>
+    <p>A caption for the image that will still be padded.</p>
+  </PaddingReset>
+</Block>
+```
+
+You can also add the padding conditionally by using the `containerIsFluid` prop, which is what many other components in this library do.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+
+  export let src = 'https://...';
+  export let width = 'fluid';
+</script>
+
+<Block width="{width}">
+  <img src="{src}" alt="..." width="100%" />
+  <PaddingReset containerIsFluid="{width === 'fluid'}">
+    <p>A caption for the image that will be padded when Block is fluid.</p>
+  </PaddingReset>
+</Block>
+```

package/dist/components/PhotoCarousel/PhotoCarousel.stories.svelte

@@ -0,0 +1,80 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore raw
+  import customDocs from './stories/docs/withCustom.md?raw';
+
+  import PhotoCarousel from './PhotoCarousel.svelte';
+
+  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
+
+  import photosJson from './stories/photos.json';
+
+  const photos = photosJson.map((p) => ({ ...p, altText: p.caption }));
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  };
+</script>
+
+<Meta
+  title="Components/PhotoCarousel"
+  component="{PhotoCarousel}"
+  {...metaProps}
+/>
+
+<Template let:args>
+  <PhotoCarousel {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    width: 'wider',
+    photos,
+  }}"
+/>
+
+<Story
+  name="Custom credits and captions"
+  args="{{
+    width: 'wider',
+    photos,
+  }}"
+  {...withStoryDocs(customDocs)}
+>
+  <PhotoCarousel
+    {...{
+      width: 'wider',
+      photos,
+    }}
+  >
+    <p class="custom-credit" slot="credit" let:credit>{credit}</p>
+    <p class="custom-caption" slot="caption" let:caption>{caption}</p>
+  </PhotoCarousel>
+</Story>
+
+<style>p {
+  position: absolute;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.6);
+  font-family: sans-serif;
+  font-size: 0.8rem;
+  padding: 0 5px;
+}
+p.custom-credit {
+  top: 0;
+  right: 0;
+}
+p.custom-caption {
+  bottom: 5px;
+  left: 0;
+}</style>

package/dist/components/PhotoCarousel/PhotoCarousel.stories.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  PhotoCarouselProps */
+/** @typedef {typeof __propDef.events}  PhotoCarouselEvents */
+/** @typedef {typeof __propDef.slots}  PhotoCarouselSlots */
+export default class PhotoCarousel extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PhotoCarouselProps = typeof __propDef.props;
+export type PhotoCarouselEvents = typeof __propDef.events;
+export type PhotoCarouselSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};