@reuters-graphics/graphics-components 2.0.2 → 3.0.0

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

@@ -1,11 +0,0 @@
-Reuters Graphics team logo.
-
-> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
-
-```svelte
-<script>
-  import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
-</script>
-
-<ReutersGraphicsLogo />
-```

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

@@ -1,9 +0,0 @@
-The official Reuters logo.
-
-```svelte
-<script>
-  import { ReutersLogo } from '@reuters-graphics/graphics-components';
-</script>
-
-<ReutersLogo />
-```

package/dist/components/SEO/stories/docs/archieML.md

@@ -1,36 +0,0 @@
-```yaml
-slug:  ROOT-SLUG/WILD
-seoTitle: Page title for search
-seoDescription: Page description for search
-shareTitle: Page title for social media
-shareDescription: Page description for social media
-shareImgPath: images/reuters-graphics.jpg
-shareImgAlt: Alt text for share image.
-```
-
-```svelte
-<script>
-  import { SEO } from '@reuters-graphics/graphics-components';
-  import pkg from '$pkg';
-  import content from '$locales/en/content.json';
-  import { assets } from '$app/paths';
-  import { page } from '$app/stores';
-</script>
-
-<SEO
-  baseUrl="{VITE_BASE_URL}"
-  pageUrl="{$page.url}"
-  seoTitle="{content.seoTitle}"
-  seoDescription="{content.seoDescription}"
-  shareTitle="{content.shareTitle}"
-  shareDescription="{content.shareDescription}"
-  shareImgPath="{`${assets}/${content.shareImgPath}`}"
-  shareImgAlt="{content.shareImgAlt}"
-  publishTime="{pkg?.reuters?.graphic?.published}"
-  updateTime="{pkg?.reuters?.graphic?.updated}"
-  authors="{pkg?.reuters?.graphic?.authors}"
-/>
-```
-
-> **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the Graphics Kit and other Vite-based rigs.
-

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

@@ -1,26 +0,0 @@
-The `SEO` component adds essential metadata to published pages.
-
-```svelte
-<script>
-  import { SEO } from '@reuters-graphics/graphics-components';
-</script>
-
-<SEO
-  baseUrl="https://graphics.reuters.com"
-  pageUrl="{new URL(
-    'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/'
-  )}"
-  seoTitle="A title for Google"
-  seoDescription="A description for Google"
-  shareTitle="A title for Twitter/Facebook"
-  shareDecription="A description for Twitter/Facebook"
-  shareImgPath="https://graphics.reuters.com/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
-  shareImgAlt="An image showing global COVID infection rates"
-  publishTime="2020-09-15T00:00:00.000Z"
-  updateTime="2021-01-10T12:30:00.000Z"
-  authors="{[
-    { name: 'Jane Doe', url: 'https://twitter.com/JaneDoe' },
-    { name: 'John Doe', url: 'https://twitter.com/JohnDoe' },
-  ]}"
-/>
-```

package/dist/components/Scroller/stories/components/ai2svelte/ai-scroller-1.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  AiScroller_1Props */
-/** @typedef {typeof __propDef.events}  AiScroller_1Events */
-/** @typedef {typeof __propDef.slots}  AiScroller_1Slots */
-export default class AiScroller_1 extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AiScroller_1Props = typeof __propDef.props;
-export type AiScroller_1Events = typeof __propDef.events;
-export type AiScroller_1Slots = 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/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  AiScroller_2Props */
-/** @typedef {typeof __propDef.events}  AiScroller_2Events */
-/** @typedef {typeof __propDef.slots}  AiScroller_2Slots */
-export default class AiScroller_2 extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AiScroller_2Props = typeof __propDef.props;
-export type AiScroller_2Events = typeof __propDef.events;
-export type AiScroller_2Slots = 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/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  AiScroller_3Props */
-/** @typedef {typeof __propDef.events}  AiScroller_3Events */
-/** @typedef {typeof __propDef.slots}  AiScroller_3Slots */
-export default class AiScroller_3 extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type AiScroller_3Props = typeof __propDef.props;
-export type AiScroller_3Events = typeof __propDef.events;
-export type AiScroller_3Slots = 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/Scroller/stories/components/basic/InteractiveForeground.svelte

@@ -1,13 +0,0 @@
-<script>
-  export let count = 0;
-</script>
-
-<h4>Interactive step</h4>
-
-<p>The count is {count}</p>
-
-<button
-  on:click="{() => {
-    count += 1;
-  }}">Click Me</button
->

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

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

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

@@ -1,12 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-/** @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

@@ -1,42 +0,0 @@
-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}"
-/>
-```

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

@@ -1,87 +0,0 @@
-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 ArchieML Doc, taking care that the names of your charts in the `aiCharts` object match the names of your step backgrounds:
-
-```yaml
-[blocks]
-# ...
-
-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
-[]
-
-# ...
-[]
-```
-
-```svelte
-<!-- App.svelte -->
-{#each content.blocks as block}
-  {#if block.type === 'text'}
-  <!-- ... -->
-  
-  {:else if block.type === 'ai-scroller'}
-      <Scroller
-        id="{block.id}"
-        backgroundWidth="{block.width}"
-        foregroundPosition="{block.foregroundPosition}"
-        stackBackground="{block.stackBackground === 'true'}"
-        steps="{block.steps.map((step) => ({
-          background: aiCharts[step.background],
-          backgroundProps: { assetsPath: assets || '/' },
-          foreground: step.text,
-          altText: step.altText,
-        }))}"
-      />
-  
-  <!-- ... -->
-  {/if}
-{/each}
-```

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

@@ -1,39 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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/SearchInput/MagnifyingGlass.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  MagnifyingGlassProps */
-/** @typedef {typeof __propDef.events}  MagnifyingGlassEvents */
-/** @typedef {typeof __propDef.slots}  MagnifyingGlassSlots */
-export default class MagnifyingGlass extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type MagnifyingGlassProps = typeof __propDef.props;
-export type MagnifyingGlassEvents = typeof __propDef.events;
-export type MagnifyingGlassSlots = 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/X.svelte.d.ts

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  XProps */
-/** @typedef {typeof __propDef.events}  XEvents */
-/** @typedef {typeof __propDef.slots}  XSlots */
-export default class X extends SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type XProps = typeof __propDef.props;
-export type XEvents = typeof __propDef.events;
-export type XSlots = 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/stories/docs/component.md

@@ -1,17 +0,0 @@
-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/stories/docs/component.md

@@ -1,24 +0,0 @@
-A simple, clean text timeline.
-
-```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="{dates}" />
-```

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

@@ -1,11 +0,0 @@
-Reuters dotcom site footer with graphics referrals, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-footer).
-
-> **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
-
-```svelte
-<script>
-  import { SiteFooter } from '@reuters-graphics/graphics-components';
-</script>
-
-<SiteFooter />
-```

package/dist/components/SiteFooter/stories/docs/darkTheme.md

@@ -1,11 +0,0 @@
-Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
-
-```svelte
-<script>
-  import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
-</script>
-
-<Theme base="dark">
-  <SiteFooter />
-</Theme>
-```

package/dist/components/SiteFooter/stories/docs/removeReferrals.md

@@ -1,9 +0,0 @@
-Remove graphics referrals.
-
-```svelte
-<script>
-  import { SiteFooter } from '@reuters-graphics/graphics-components';
-</script>
-
-<SiteFooter includeReferrals="{false}" />
-```

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

@@ -1,11 +0,0 @@
-Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).
-
-> **Note:** In the Graphics Kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
-
-```svelte
-<script>
-  import { SiteHeader } from '@reuters-graphics/graphics-components';
-</script>
-
-<SiteHeader />
-```

package/dist/components/SiteHeader/stories/docs/darkTheme.md

@@ -1,11 +0,0 @@
-Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component.
-
-```svelte
-<script>
-  import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
-</script>
-
-<Theme base="dark">
-  <SiteHeader />
-</Theme>
-```

package/dist/components/SiteHeadline/stories/docs/archieML.md

@@ -1,26 +0,0 @@
-```yaml
-section: Graphics
-sectionUrl: https://www.reuters.com/graphics/
-hed: A beautiful page
-authors: Samuel Granados,Dea Bankova
-published: 2022-09-12T08:30:00.000Z
-updated:
-```
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import { SiteHeadline } from '@reuters-graphics/graphics-components';
-
-  import content from '$locales/en/content.json';
-</script>
-
-<SiteHeadline
-  section="{content.section}"
-  sectionUrl="{content.sectionUrl}"
-  hed="{content.hed}"
-  authors="{content.authors.split(',')}"
-  publishTime="{content.published}"
-  updateTime="{content.updated}"
-/>
-```

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

@@ -1,21 +0,0 @@
-A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
-
-Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages.
-
-```svelte
-<script>
-  import { SiteHeadline } from '@reuters-graphics/graphics-components';
-</script>
-
-<SiteHeadline
-  hed="Ukraine makes suprising gains in swift counteroffensive"
-  authors="{[
-    'Dea Bankova',
-    'Michael Ovaska',
-    'Samuel Granados',
-    'Prasanta Kumar Dutta',
-  ]}"
-  publishTime="2021-09-12T00:00:00.000Z"
-  updateTime="2021-09-12T12:57:00.000Z"
-/>
-```

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

@@ -1,15 +0,0 @@
-Simple loading spinner. Use it to help hide long loading times for components that may be loading expensive media files or crunching through lots of data.
-
-```svelte
-<script>
-  import { Spinner } from '@reuters-graphics/graphics-components';
-
-  let somethingsLoading = true;
-</script>
-
-{#if somethingsLoading}
-  <Spinner />
-{:else}
-  <p>The real deal is here.</p>
-{/if}
-```