@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/Scroller/{stories → demo}/components/ai2svelte/ai-scroller-3.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   // Hard-coding for demo purposes only...
   // @ts-ignore img
   import stepXl from './images/step-3-xl.png';
@@ -10,12 +10,12 @@
   import stepSm from './images/step-3-sm.png';
   // @ts-ignore img
   import stepXs from './images/step-3-xs.png';
-  let width = null;
+  let width = $state<null | number>(null);
 </script>
 
 <!-- Generated by ai2html v0.100.0 - 2021-09-30 14:28 -->
 
-<div id="g-step-3-box" bind:clientWidth="{width}">
+<div id="g-step-3-box" bind:clientWidth={width}>
   <!-- Artboard: XL -->
   {#if width && width >= 1200}
     <div id="g-step-3-xl" class="g-artboard" style="">

package/dist/components/Scroller/demo/components/ai2svelte/ai-scroller-3.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const AiScroller_3: import("svelte").Component<Record<string, never>, {}, "">;
+type AiScroller_3 = ReturnType<typeof AiScroller_3>;
+export default AiScroller_3;

package/dist/components/Scroller/demo/components/basic/InteractiveForeground.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props {
+    count?: number;
+  }
+
+  let { count = $bindable(0) }: Props = $props();
+</script>
+
+<h4>Interactive step</h4>
+
+<p class="font-sans">The count is <strong>{count}</strong></p>
+
+<button
+  onclick={() => {
+    count += 1;
+  }}>Click Me</button
+>

package/dist/components/Scroller/demo/components/basic/InteractiveForeground.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    count?: number;
+}
+declare const InteractiveForeground: import("svelte").Component<Props, {}, "count">;
+type InteractiveForeground = ReturnType<typeof InteractiveForeground>;
+export default InteractiveForeground;

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Props {
+    colour?: string;
+  }
+
+  let { colour = 'lightblue' }: Props = $props();
+</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/demo/components/basic/Step.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    colour?: string;
+}
+declare const Step: import("svelte").Component<Props, {}, "">;
+type Step = ReturnType<typeof Step>;
+export default Step;

package/dist/components/SearchInput/SearchInput.mdx

@@ -0,0 +1,29 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SearchInputStories from './SearchInput.stories.svelte';
+
+<Meta of={SearchInputStories} />
+
+# SearchInput
+
+The `SearchInput` component creates a search bar.
+
+```svelte
+<script>
+  import { SearchInput } from '@reuters-graphics/graphics-components';
+
+  function filterData(newSearchText: string) {
+    /** This function would typically filter a dataset based on the search input.*/
+    console.log('Filtering data with:', newSearchText);
+  }
+  function handleSearchInput(newSearchText: string) {
+    /** Here's where you might update a variable, 
+    filter a dataset or make an API call based on the user's input.*/
+    filterData(newSearchText);
+  }
+</script>
+
+<SearchInput onsearch={handleSearchInput} />
+```
+
+<Canvas of={SearchInputStories.Demo} />

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

@@ -1,19 +1,24 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import SearchInput from "./SearchInput.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Controls/SearchInput",
-  component: SearchInput,
-  ...withComponentDocs(componentDocs)
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SearchInput from './SearchInput.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Controls/SearchInput',
+    component: SearchInput,
+  });
 </script>
 
-<Template let:args>
-  <SearchInput {...args} />
-</Template>
+<script lang="ts">
+  function filterData(newSearchText: string) {
+    /** This function would typically filter a dataset based on the search input.*/
+    console.log('Filtering data with:', newSearchText);
+  }
+  function handleSearchInput(newSearchText: string) {
+    /** Here's where you might update a variable, filter a dataset or make an API call based on the user's input.*/
+    filterData(newSearchText);
+  }
+</script>
 
-<Story name="Default" args="{{}}" />
+<Story name="Demo">
+  <SearchInput onsearch={handleSearchInput} />
+</Story>

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import SearchInput from './SearchInput.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    title: string;
-    component: typeof SearchInput;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [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;
-export default class SearchInput extends SvelteComponent<SearchInputProps, SearchInputEvents, SearchInputSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SearchInput: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SearchInput = InstanceType<typeof SearchInput>;
+export default SearchInput;

package/dist/components/SearchInput/SearchInput.svelte

@@ -1,40 +1,51 @@
 <!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-searchinput--docs) -->
-<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 });
-}
-function clear() {
-  value = "";
-  dispatch("search", { value: "" });
-}
+<script lang="ts">
+  import MagnifyingGlass from './components/MagnifyingGlass.svelte';
+  import X from './components/X.svelte';
+
+  interface Props {
+    /** The placeholder text that appears in the search box.*/
+    searchPlaceholder?: string;
+    /** Optional function that runs when the input value changes. */
+    onsearch?: (newValue: string) => void;
+  }
+
+  let { searchPlaceholder = 'Search...', onsearch }: Props = $props();
+
+  let value = $state('');
+  let active = $derived(value !== '');
+
+  function clear() {
+    value = '';
+    if (onsearch) onsearch(value); // Call the prop to update the parent when cleared
+  }
+
+  function oninput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    if (onsearch) onsearch(value); // Update the parent on every input change
+  }
 </script>
 
 <div class="search relative inline-flex items-center" class:active>
   <div class="search--icon absolute">
     <MagnifyingGlass />
   </div>
+
   <input
     id="search--input"
     class="search--input body-caption pl-8"
     type="text"
-    placeholder="{searchPlaceholder}"
-    on:input="{input}"
+    placeholder={searchPlaceholder}
     bind:value
+    {oninput}
   />
   <div
     class="search--x absolute"
     role="button"
     tabindex="0"
-    class:invisible="{!active}"
-    on:click="{clear}"
-    on:keyup="{clear}"
+    class:invisible={!active}
+    onclick={clear}
+    onkeyup={clear}
   >
     <X />
   </div>

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

@@ -1,24 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * The placeholder text that appears in the search box.
-           * @type {string}
-           */ searchPlaceholder?: string;
-    };
-    events: {
-        search: CustomEvent<any>;
-    } & {
-        [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-controls-searchinput--docs) */
-export default class SearchInput extends SvelteComponent<SearchInputProps, SearchInputEvents, SearchInputSlots> {
+interface Props {
+    /** The placeholder text that appears in the search box.*/
+    searchPlaceholder?: string;
+    /** Optional function that runs when the input value changes. */
+    onsearch?: (newValue: string) => void;
 }
-export {};
+/** `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-searchinput--docs) */
+declare const SearchInput: import("svelte").Component<Props, {}, "">;
+type SearchInput = ReturnType<typeof SearchInput>;
+export default SearchInput;

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

@@ -0,0 +1,26 @@
+export default MagnifyingGlass;
+type MagnifyingGlass = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MagnifyingGlass: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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

@@ -0,0 +1,26 @@
+export default X;
+type X = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const X: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/SimpleTimeline/SimpleTimeline.mdx

@@ -0,0 +1,119 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SimpleTimelineStories from './SimpleTimeline.stories.svelte';
+
+<Meta of={SimpleTimelineStories} />
+
+# SimpleTimeline
+
+The `SimpleTimeline` component creates a basic timeline with dates, titles and descriptions of events.
+
+```svelte
+<script>
+  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
+
+  const dates = [
+    {
+      date: 'May 18',
+      events: [
+        {
+          title: 'A title for the event',
+          titleLink: 'https://...', // optional
+          context: 'Lorem ipsum...', // optional
+        },
+        // More events...
+      ],
+    },
+    // More dates...
+  ];
+</script>
+
+<SimpleTimeline {dates} />
+```
+
+<Canvas of={SimpleTimelineStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc.
+
+```yaml
+# Archie ML doc
+
+[timeline]
+
+# date object with events
+date: May 18
+[.events]
+title: Mariupol defenders surrender to Russia but their fate is uncertain
+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.
+titleLink: https://www.reuters.com/world/europe/ukrainian-troops-evacuate-mariupol-ceding-control-russia-2022-05-17/
+
+# More events...
+[]
+
+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.
+titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/
+[]
+
+# More dates and events...
+[]
+```
+
+... which you'll pass to the `SimpleTimeline` component.
+
+```svelte
+<!-- Graphics kit -->
+<script>
+  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+<EndNotes SimpleTimeline={content.timeline} />
+```
+
+<Canvas of={SimpleTimelineStories.Demo} />
+
+# Multiple events
+
+You can add multiple events to a single date by adding objects to the `events` array.
+
+```svelte
+<script>
+  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
+
+  const dates = [
+    {
+      date: 'Feb. 25',
+      // Multiple events for this date
+      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>
+
+<SimpleTimeline {dates} />
+```
+
+<Canvas of={SimpleTimelineStories.MultipleEvents} />

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

@@ -1,20 +1,18 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import SimpleTimeline from "./SimpleTimeline.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Text elements/SimpleTimeline",
-  component: SimpleTimeline,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    symbolColour: { control: "color" },
-    dateColour: { control: "color" }
-  }
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SimpleTimeline from './SimpleTimeline.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/SimpleTimeline',
+    component: SimpleTimeline,
+    argTypes: {
+      symbolColour: { control: 'color' },
+      dateColour: { control: 'color' },
+    },
+  });
+</script>
 
+<script lang="ts">
   const dates = [
     {
       date: 'May 18',
@@ -51,20 +49,9 @@ export const meta = {
         },
       ],
     },
-    {
-      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',
-        },
-      ],
-    },
+  ];
+
+  const datesMultipleEvents = [
     {
       date: 'Feb. 25',
       events: [
@@ -91,13 +78,18 @@ export const meta = {
   ];
 </script>
 
-<Template let:args>
-  <SimpleTimeline {...args} />
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     dates,
-  }}"
+  }}
+/>
+
+<Story
+  name="Multiple events"
+  exportName="MultipleEvents"
+  tags={['!autodocs', '!dev']}
+  args={{
+    dates: datesMultipleEvents,
+  }}
 />

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

@@ -1,31 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        symbolColour: {
-            control: string;
-        };
-        dateColour: {
-            control: string;
-        };
+import SimpleTimeline from './SimpleTimeline.svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof SimpleTimeline;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type SimpleTimelineProps = typeof __propDef.props;
-export type SimpleTimelineEvents = typeof __propDef.events;
-export type SimpleTimelineSlots = typeof __propDef.slots;
-export default class SimpleTimeline extends SvelteComponent<SimpleTimelineProps, SimpleTimelineEvents, SimpleTimelineSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SimpleTimeline: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SimpleTimeline = InstanceType<typeof SimpleTimeline>;
+export default SimpleTimeline;