@reuters-graphics/graphics-components 1.0.29 → 1.1.0

package/dist/components/Scroller/stories/components/basic/Step.svelte

@@ -0,0 +1,12 @@
+<script>
+  export let colour = 'lightblue';
+</script>
+
+<div class="step" style="{`background: ${colour};`}"></div>
+
+<style>.step {
+  width: 100vw;
+  max-width: 100%;
+  margin: 0 auto;
+  height: 400px;
+}</style>

package/dist/components/Scroller/stories/components/basic/Step.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  StepProps */
+/** @typedef {typeof __propDef.events}  StepEvents */
+/** @typedef {typeof __propDef.slots}  StepSlots */
+export default class Step extends SvelteComponent<{
+    colour?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type StepProps = typeof __propDef.props;
+export type StepEvents = typeof __propDef.events;
+export type StepSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        colour?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};

package/dist/components/Scroller/stories/docs/ai2svelte.md

@@ -0,0 +1,124 @@
+A more detailed example of using `Scroller` with graphics created by [ai2svelte](https://github.com/reuters-graphics/ai2svelte).
+
+```svelte
+<script>
+  import { Scroller } from '@reuters-graphics/graphics-components';
+
+  import MyAiMap1 from './ai2svelte/my-map-step-1.svelte';
+  import MyAiMap2 from './ai2svelte/my-map-step-2.svelte';
+  import MyAiMap3 from './ai2svelte/my-map-step-3.svelte';
+
+  import { assets } from '$app/paths'; // If using with the Graphics Kit
+
+  const steps = [
+    {
+      background: MyAiMap1,
+      backgroundProps: { assetsPath: assets },
+      foreground: '#### Step 1\n\nLorem ipsum',
+      altText: 'A map showing TKTK',
+    },
+    {
+      background: MyAiMap2,
+      backgroundProps: { assetsPath: assets },
+      foreground: '#### Step 2\n\nLorem ipsum',
+      altText: 'The same map now highlights something interesting.',
+    },
+    {
+      background: MyAiMap3,
+      backgroundProps: { assetsPath: assets },
+      foreground: '#### Step 3\n\nLorem ipsum',
+      altText: 'The same map now shows something else that is interesting.',
+    },
+  ];
+</script>
+
+<Scroller
+  steps="{steps}"
+  backgroundWidth="fluid"
+  foregroundPosition="middle"
+  stackBackground="{true}"
+  embedded="{false}"
+/>
+```
+
+When working with a Google doc, here's an example of how you can tie your text into your steps.
+
+```yaml
+# Google doc block
+Type: scroller
+ID: map-scrolly
+Step1Text: #### Step 1
+
+Lorem Ipsum
+:end
+AltText1: A map showing the Upper West side in New York City.
+:end
+
+Step2Text: #### Step 2
+
+Lorem Ipsum
+:end
+AltText2: The same map now highlights 98th Street.
+:end
+
+Step3Text: #### Step 3
+
+Lorem Ipsum
+:end
+AltText3: The same map now highlights three locations near 98th Street where something particulary important happened.
+:end
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Previos imports and stuff...
+
+  // This should be already imported for you.
+  import content from '$locales/en/content.json';
+
+  // Get the data for the block in content by its ID
+  const scrollerBlock = content.blocks.find(
+    (block) => block.ID === 'map-scrolly'
+  );
+
+  // Now plug your text into your step foregrounds
+  const steps = [
+    {
+      background: MyAiMap1,
+      backgroundProps: { basePath: assets },
+      foreground: scrollerBlock.Step1Text,
+      altText: scrollerBlock.AltText1,
+    },
+    {
+      background: MyAiMap2,
+      backgroundProps: { basePath: assets },
+      foreground: scrollerBlock.Step2Text,
+      altText: scrollerBlock.AltText2,
+    },
+    {
+      background: MyAiMap3,
+      backgroundProps: { basePath: assets },
+      foreground: scrollerBlock.Step3Text,
+      altText: scrollerBlock.AltText3,
+    },
+  ];
+</script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... other blocks -->
+
+    <!-- Copy/paste into your blocks loop! -->
+  {:else if block.Type === 'scroller' && block.ID === 'map-scrolly'}
+    <Scroller
+      steps="{steps}"
+      backgroundWidth="fluid"
+      foregroundPosition="middle"
+      stackBackground="{true}"
+      embedded="{false}"
+    />
+    <!-- END copy/paste -->
+  {/if}
+{/each}
+```

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

@@ -0,0 +1,39 @@
+The `Scroller` component helps you quickly create basic scrollytelling graphics with several layout options.
+
+> This component is designed to handle most common layouts for scrollytelling. If you need something more complex, though, you should probably use [svelte-scroller](https://github.com/sveltejs/svelte-scroller), which is a lower level component you can more easily customize.
+
+```svelte
+<script>
+  import { Scroller } from '@reuters-graphics/graphics-components';
+
+  import MyColourBackground from './MyColourBackground.svelte';
+
+  const steps = [
+    {
+      background: MyColourBackground,
+      backgroundProps: { colour: 'red' },
+      foreground: '#### Step 1\n\nLorem ipsum red',
+      altText: 'Red background',
+    },
+    {
+      background: MyColourBackground,
+      backgroundProps: { colour: 'blue' },
+      foreground: '#### Step 2\n\nLorem ipsum blue',
+      altText: 'Blue background',
+    },
+    {
+      background: MyColourBackground,
+      backgroundProps: { colour: 'green' },
+      foreground: '#### Step 3\n\nLorem ipsum green',
+      altText: 'Green background',
+    },
+  ];
+</script>
+
+<Scroller
+  steps="{steps}"
+  backgroundWidth="fluid"
+  foregroundPosition="middle"
+  embedded="{false}"
+/>
+```

package/dist/components/Scroller/stories/docs/interactive.md

@@ -0,0 +1,36 @@
+Instead of just text, you can use any component in the foreground, too, and pass whatever props you need to it.
+
+If you're making your own custom foreground component, remember to add alt text describing the background graphic.
+
+```svelte
+<script>
+  // ...
+  import MyCounter from './MyCounter.svelte';
+
+  const steps = [
+    {
+      background: MyColourBackground,
+      backgroundProps: { colour: 'red' },
+      foreground: MyCounter,
+    },
+    {
+      background: MyColourBackground,
+      backgroundProps: { colour: 'blue' },
+      foreground: '#### Step 2\n\nLorem ipsum blue',
+    },
+    {
+      background: MyColourBackground,
+      backgroundProps: { colour: 'green' },
+      foreground: MyCounter,
+      foregroundProps: { count: 100 },
+    },
+  ];
+</script>
+
+<Scroller
+  steps="{steps}"
+  backgroundWidth="fluid"
+  foregroundPosition="middle"
+  embedded="{false}"
+/>
+```

package/dist/components/Scroller/stories/docs/quickit.md

@@ -0,0 +1,60 @@
+For Graphics Kit users, the `Scroller` component is built-in for scrollytelling with [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics and text.
+
+First, import your ai2svelte graphics in `App.svelte` and add them to the `aiCharts` object;
+
+```svelte
+<!-- App.svelte -->
+<script>
+  // Other stuff...
+
+  import AiMap1 from './ai2svelte/my-map-1.svelte';
+  import AiMap2 from './ai2svelte/my-map-2.svelte';
+  import AiMap3 from './ai2svelte/my-map-3.svelte';
+
+  const aiCharts = {
+    // Other charts...
+    AiMap1,
+    AiMap2,
+    AiMap3,
+  };
+</script>
+```
+
+Then add the following structure to your Google Doc, taking care that the names of your charts in the `aiCharts` object match the names of your step backgrounds:
+
+```yaml
+# Google doc block
+Type: ai-scroller
+ID: my-map-scroller
+Width: normal
+ForegroundPosition: middle
+StackBackground: true
+[.Steps]
+  Background: AiMap1
+  Text: #### Step 1
+
+  Lorem ipsum
+  :end
+  AltText: A map showing the Upper West side in New York City.
+
+  Can add paragraphs of alt text if you want to break up sentences.
+  :end
+
+  Background: AiMap2
+  Text: #### Step 2
+
+  Lorem ipsum
+  :end
+  AltText: The same map now highlights 98th Street.
+  :end
+
+  Background: AiMap3
+  Text: #### Step 3
+
+  Lorem ipsum
+  :end
+  AltText: The same map now highlights three locations near 98th Street where something particulary important happened.
+  :end
+[]
+
+```

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

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  MagnifyingGlassProps */
 /** @typedef {typeof __propDef.events}  MagnifyingGlassEvents */
 /** @typedef {typeof __propDef.slots}  MagnifyingGlassSlots */
-export default class MagnifyingGlass extends SvelteComponentTyped<{
+export default class MagnifyingGlass extends SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class MagnifyingGlass extends SvelteComponentTyped<{
 export type MagnifyingGlassProps = typeof __propDef.props;
 export type MagnifyingGlassEvents = typeof __propDef.events;
 export type MagnifyingGlassSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: never;
@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/SearchInput/SearchInput.stories.svelte

@@ -0,0 +1,22 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import SearchInput from './SearchInput.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+</script>
+
+<Meta
+  title="Components/SearchInput"
+  component="{SearchInput}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <SearchInput {...args} />
+</Template>
+
+<Story name="Default" args="{{}}" />

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SearchInputProps */
+/** @typedef {typeof __propDef.events}  SearchInputEvents */
+/** @typedef {typeof __propDef.slots}  SearchInputSlots */
+export default class SearchInput extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SearchInputProps = typeof __propDef.props;
+export type SearchInputEvents = typeof __propDef.events;
+export type SearchInputSlots = 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/SearchInput/SearchInput.svelte

@@ -1,26 +1,22 @@
 <!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SearchInput--default) -->
-<script>import { createEventDispatcher } from 'svelte';
-import MagnifyingGlass from './MagnifyingGlass.svelte';
-import X from './X.svelte';
-/**
- * The placeholder text that appears in the search box.
- * @type {string}
- */
-export let searchPlaceholder = 'Search...';
-let value = '';
-$: active = value !== '';
+<script>import { createEventDispatcher } from "svelte";
+import MagnifyingGlass from "./MagnifyingGlass.svelte";
+import X from "./X.svelte";
+export let searchPlaceholder = "Search...";
+let value = "";
+$: active = value !== "";
 const dispatch = createEventDispatcher();
 function input(event) {
-    value = event.target.value;
-    dispatch('search', { value });
+  value = event.target.value;
+  dispatch("search", { value });
 }
 function clear() {
-    value = '';
-    dispatch('search', { value: '' });
+  value = "";
+  dispatch("search", { value: "" });
 }
 </script>
 
-<div class="search relative inline-flex items-center" class:active="{active}">
+<div class="search relative inline-flex items-center" class:active>
   <div class="search--icon absolute">
     <MagnifyingGlass />
   </div>
@@ -30,7 +26,7 @@ function clear() {
     type="text"
     placeholder="{searchPlaceholder}"
     on:input="{input}"
-    bind:value="{value}"
+    bind:value
   />
   <div
     class="search--x absolute"

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

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

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

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  XProps */
 /** @typedef {typeof __propDef.events}  XEvents */
 /** @typedef {typeof __propDef.slots}  XSlots */
-export default class X extends SvelteComponentTyped<{
+export default class X extends SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -10,7 +10,7 @@ export default class X extends SvelteComponentTyped<{
 export type XProps = typeof __propDef.props;
 export type XEvents = typeof __propDef.events;
 export type XSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: never;
@@ -19,5 +19,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -0,0 +1,17 @@
+Invite users to search for something.
+
+```svelte
+<script>
+  import { SearchInput } from '@reuters-graphics/graphics-components';
+
+  function handleSearchInput(event) {
+    const searchText = event.detail.value;
+    // Here's where you might update a variable,
+    // filter a dataset or make an API call
+    // based on the user's input.
+    console.log(`Search for ${searchText}`);
+  }
+</script>
+
+<SearchInput on:search="{handleSearchInput}" />
+```

package/dist/components/SimpleTimeline/SimpleTimeline.stories.svelte

@@ -0,0 +1,110 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import SimpleTimeline from './SimpleTimeline.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const metaProps = {
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      symbolColour: { control: 'color' },
+      dateColour: { control: 'color' },
+    },
+  };
+
+  const dates = [
+    {
+      date: 'May 18',
+      events: [
+        {
+          title:
+            'Mariupol defenders surrender to Russia but their fate is uncertain',
+          titleLink:
+            'https://www.reuters.com/world/europe/ukrainian-troops-evacuate-mariupol-ceding-control-russia-2022-05-17/',
+          context:
+            "More than 250 Ukrainian fighters surrendered to Russian forces at the Azovstal steelworks in Mariupol after weeks of desperate resistance, bringing an end to the most devastating siege of Russia's war in Ukraine and allowing President Vladimir Putin to claim a rare victory in his faltering campaign.",
+        },
+      ],
+    },
+    {
+      date: 'May 10',
+      events: [
+        {
+          title:
+            'U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion',
+          context:
+            'The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion.',
+        },
+      ],
+    },
+    {
+      date: 'Mar. 3',
+      events: [
+        {
+          title:
+            '"We are being destroyed," city council of Ukraine\'s Mariupol says',
+          context:
+            'Mariupol city council said Russian forces were constantly and deliberately shelling [vital civilian infrastructure](https://google.com) in the southeastern Ukrainian port, leaving it without water, heating or power and preventing bringing supplies or evacuating people.',
+        },
+      ],
+    },
+    {
+      date: 'Feb. 27',
+      events: [
+        {
+          title: 'Russians push into Kharkiv',
+          titleLink:
+            'https://www.reuters.com/world/europe/western-allies-expel-key-russian-banks-global-system-ukraine-fights-2022-02-27/',
+        },
+        {
+          title:
+            'Human rights groups and Ukrainian ambassador accuse Russia of using cluster and vacuum bombs',
+        },
+      ],
+    },
+    {
+      date: 'Feb. 25',
+      events: [
+        {
+          title: 'NATO deploys more troops',
+          context:
+            'NATO leaders said on Friday they were deploying more troops to eastern Europe after Russia invaded Ukraine, saying that Moscow had lied about its intentions.',
+        },
+        {
+          title: 'Invasion continues',
+          context:
+            'Missiles pounded the Ukrainian capital as Russian forces pressed their advance and Ukrainian President Volodymyr Zelenskiy pleaded with the international community to do more, saying sanctions announced so far were not enough.\n\nRussian forces battered Ukrainian cities with artillery and cruise missiles but a defiant Zelenskiy said the capital Kyiv remained in Ukrainian hands.',
+        },
+      ],
+    },
+    {
+      date: 'Feb. 24',
+      events: [
+        {
+          title: 'Russia invades Ukraine',
+        },
+      ],
+    },
+  ];
+</script>
+
+<Meta
+  title="Components/SimpleTimeline"
+  component="{SimpleTimeline}"
+  {...metaProps}
+/>
+
+<Template let:args>
+  <SimpleTimeline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    dates,
+  }}"
+/>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SimpleTimelineProps */
+/** @typedef {typeof __propDef.events}  SimpleTimelineEvents */
+/** @typedef {typeof __propDef.slots}  SimpleTimelineSlots */
+export default class SimpleTimeline extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SimpleTimelineProps = typeof __propDef.props;
+export type SimpleTimelineEvents = typeof __propDef.events;
+export type SimpleTimelineSlots = 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/SimpleTimeline/SimpleTimeline.svelte

@@ -1,37 +1,17 @@
 <!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) -->
-<script>/**
- * An array of dates with events.
- * @required
- */
-export let dates;
-/**
- * Set a colour for the timeline bullet symbols and line.
- * @type {string}
- */
-export let symbolColour = 'var(--theme-colour-brand-rules)';
-/**
- * Set a colour for the date headings in the timeline.
- * @type {string}
- */
-export let dateColour = 'var(--theme-colour-accent, red)';
-/**
- * Set a class to target with SCSS.
- * @type {string}
- */
-let cls = '';
+<script>export let dates;
+export let symbolColour = "var(--theme-colour-brand-rules)";
+export let dateColour = "var(--theme-colour-accent, red)";
+let cls = "";
 export { cls as class };
-/**
- * Set an ID to target with SCSS.
- * @type {string}
- */
-export let id = '';
-import Block from '../Block/Block.svelte';
-import Fa from 'svelte-fa/src/fa.svelte';
-import { faLink } from '@fortawesome/free-solid-svg-icons';
-import Markdown from '../Markdown/Markdown.svelte';
+export let id = "";
+import Block from "../Block/Block.svelte";
+import Fa from "svelte-fa/src/fa.svelte";
+import { faLink } from "@fortawesome/free-solid-svg-icons";
+import Markdown from "../Markdown/Markdown.svelte";
 </script>
 
-<Block width="normal" id="{id}" class="simple-timeline-container fmy-6 {cls}">
+<Block width="normal" {id} class="simple-timeline-container fmy-6 {cls}">
   <div class="timeline pl-2 pr-3.5" style="--symbol-colour:{symbolColour};">
     {#each dates as date}
       <div class="date relative pt-0.5 pl-5 pb-4">
@@ -42,7 +22,8 @@ import Markdown from '../Markdown/Markdown.svelte';
             r="5"
             stroke="{symbolColour}"
             stroke-width="2"
-            fill="transparent"></circle>
+            fill="transparent"
+          ></circle>
         </svg>
         <div
           class="timeline-date font-note text-xs uppercase font-black tracking-wide fmb-0"