@reuters-graphics/graphics-components 1.0.30 → 1.1.1

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         /**
@@ -33,11 +33,13 @@ declare const __propDef: {
         [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;
 /** `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) */
-export default class SimpleTimeline extends SvelteComponentTyped<SimpleTimelineProps, SimpleTimelineEvents, SimpleTimelineSlots> {
+export default class SimpleTimeline extends SvelteComponent<SimpleTimelineProps, SimpleTimelineEvents, SimpleTimelineSlots> {
 }
 export {};

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

@@ -0,0 +1,24 @@
+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/CompanyLinks.svelte

@@ -58,7 +58,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   width: 100%;
   margin: 0 auto;
 }
-
 .company {
   padding-top: 24px;
   padding-bottom: 24px;
@@ -84,7 +83,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     grid-template-columns: repeat(4, 1fr);
   }
 }
-
 .company {
   border-top: 1px solid var(--nav-rules);
 }
@@ -105,7 +103,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     padding-right: 32px;
   }
 }
-
 .company .content-container {
   grid-row-gap: 24px;
 }
@@ -122,7 +119,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     grid-row: auto;
   }
 }
-
 .links {
   padding: 0;
   margin: 0;
@@ -144,7 +140,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   align-items: center;
   color: inherit;
 }
-
 .symbol {
   list-style: none;
   display: inline-block;
@@ -154,7 +149,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .symbol:first-child {
   margin-left: 0;
 }
-
 section.company {
   max-width: 100%;
 }

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

@@ -1,8 +1,8 @@
 /** @typedef {typeof __propDef.props}  CompanyLinksProps */
 /** @typedef {typeof __propDef.events}  CompanyLinksEvents */
 /** @typedef {typeof __propDef.slots}  CompanyLinksSlots */
-export default class CompanyLinks extends SvelteComponentTyped<{
-    links?: {};
+export default class CompanyLinks extends SvelteComponent<{
+    links?: {} | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -10,14 +10,16 @@ export default class CompanyLinks extends SvelteComponentTyped<{
 export type CompanyLinksProps = typeof __propDef.props;
 export type CompanyLinksEvents = typeof __propDef.events;
 export type CompanyLinksSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        links?: {};
+        links?: {} | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/SiteFooter/LegalLinks.svelte

@@ -55,7 +55,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   width: 100%;
   margin: 0 auto;
 }
-
 .legal {
   padding-top: 24px;
   padding-bottom: 24px;
@@ -81,7 +80,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     grid-template-columns: repeat(4, 1fr);
   }
 }
-
 .legal {
   border-top: 1px solid var(--nav-rules);
 }
@@ -102,7 +100,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     padding-right: 32px;
   }
 }
-
 .legal .content-container {
   grid-row-gap: 1.1111111111vw;
 }
@@ -165,7 +162,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     grid-row: 4;
   }
 }
-
 .link-group {
   margin: 0;
   padding: 0;
@@ -182,12 +178,10 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-size: 14px;
   font-weight: 500;
 }
-
 section {
   max-width: 100%;
   margin: 0;
 }
-
 p.copyright,
 p.disclaimer {
   margin: 0;

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

@@ -1,8 +1,8 @@
 /** @typedef {typeof __propDef.props}  LegalLinksProps */
 /** @typedef {typeof __propDef.events}  LegalLinksEvents */
 /** @typedef {typeof __propDef.slots}  LegalLinksSlots */
-export default class LegalLinks extends SvelteComponentTyped<{
-    links?: {};
+export default class LegalLinks extends SvelteComponent<{
+    links?: {} | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -10,14 +10,16 @@ export default class LegalLinks extends SvelteComponentTyped<{
 export type LegalLinksProps = typeof __propDef.props;
 export type LegalLinksEvents = typeof __propDef.events;
 export type LegalLinksSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        links?: {};
+        links?: {} | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/SiteFooter/QuickLinks.svelte

@@ -129,7 +129,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   width: 100%;
   margin: 0 auto;
 }
-
 .quick-links {
   padding-top: 24px;
   padding-bottom: 24px;
@@ -171,7 +170,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
   font-weight: 500;
   font-size: 16px;
 }
-
 section.quick-links {
   border-top: 1px solid var(--nav-rules);
   max-width: 100%;
@@ -199,7 +197,6 @@ section.quick-links h3 {
   font-weight: 400;
   margin: 0;
 }
-
 .quick-links .content-container {
   grid-row-gap: 2.2222222222vw;
 }
@@ -247,12 +244,10 @@ section.quick-links h3 {
 .quick-links .content-container .stay-informed {
   margin-top: 24px;
 }
-
 .symbol {
   width: 20px;
   margin-right: 16px;
 }
-
 .visually-hidden {
   border: 0;
   clip: rect(0 0 0 0);

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

@@ -1,8 +1,8 @@
 /** @typedef {typeof __propDef.props}  QuickLinksProps */
 /** @typedef {typeof __propDef.events}  QuickLinksEvents */
 /** @typedef {typeof __propDef.slots}  QuickLinksSlots */
-export default class QuickLinks extends SvelteComponentTyped<{
-    links?: {};
+export default class QuickLinks extends SvelteComponent<{
+    links?: {} | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -10,14 +10,16 @@ export default class QuickLinks extends SvelteComponentTyped<{
 export type QuickLinksProps = typeof __propDef.props;
 export type QuickLinksEvents = typeof __propDef.events;
 export type QuickLinksSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        links?: {};
+        links?: {} | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/SiteFooter/Referrals/IntersectionObserver.svelte

@@ -41,5 +41,5 @@
 </script>
 
 <div bind:this="{container}">
-  <slot intersecting="{intersecting}" />
+  <slot {intersecting} />
 </div>

package/dist/{@types/components → components}/SiteFooter/Referrals/IntersectionObserver.svelte.d.ts

@@ -1,12 +1,12 @@
 /** @typedef {typeof __propDef.props}  IntersectionObserverProps */
 /** @typedef {typeof __propDef.events}  IntersectionObserverEvents */
 /** @typedef {typeof __propDef.slots}  IntersectionObserverSlots */
-export default class IntersectionObserver extends SvelteComponentTyped<{
-    left?: number;
-    right?: number;
-    once?: boolean;
-    top?: number;
-    bottom?: number;
+export default class IntersectionObserver extends SvelteComponent<{
+    left?: number | undefined;
+    right?: number | undefined;
+    once?: boolean | undefined;
+    top?: number | undefined;
+    bottom?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -18,14 +18,14 @@ export default class IntersectionObserver extends SvelteComponentTyped<{
 export type IntersectionObserverProps = typeof __propDef.props;
 export type IntersectionObserverEvents = typeof __propDef.events;
 export type IntersectionObserverSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        left?: number;
-        right?: number;
-        once?: boolean;
-        top?: number;
-        bottom?: number;
+        left?: number | undefined;
+        right?: number | undefined;
+        once?: boolean | undefined;
+        top?: number | undefined;
+        bottom?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -35,5 +35,7 @@ declare const __propDef: {
             intersecting: boolean;
         };
     };
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/SiteFooter/Referrals/Link.svelte

@@ -36,14 +36,12 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 a {
   text-decoration: none;
 }
-
 .image {
   width: 100%;
   padding-bottom: 50%;
   background-size: cover;
   background-position: 50%;
 }
-
 .referral {
   padding: 0 0.75rem;
   width: 25%;

package/dist/{@types/components → components}/SiteFooter/Referrals/Link.svelte.d.ts

@@ -1,7 +1,7 @@
 /** @typedef {typeof __propDef.props}  LinkProps */
 /** @typedef {typeof __propDef.events}  LinkEvents */
 /** @typedef {typeof __propDef.slots}  LinkSlots */
-export default class Link extends SvelteComponentTyped<{
+export default class Link extends SvelteComponent<{
     url: any;
     image: any;
     title: any;
@@ -13,7 +13,7 @@ export default class Link extends SvelteComponentTyped<{
 export type LinkProps = typeof __propDef.props;
 export type LinkEvents = typeof __propDef.events;
 export type LinkSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         url: any;
@@ -25,5 +25,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

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

@@ -1,8 +1,8 @@
 /** @typedef {typeof __propDef.props}  ReferralsProps */
 /** @typedef {typeof __propDef.events}  ReferralsEvents */
 /** @typedef {typeof __propDef.slots}  ReferralsSlots */
-export default class Referrals extends SvelteComponentTyped<{
-    referrals?: any[];
+export default class Referrals extends SvelteComponent<{
+    referrals?: any[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -10,14 +10,16 @@ export default class Referrals extends SvelteComponentTyped<{
 export type ReferralsProps = typeof __propDef.props;
 export type ReferralsEvents = typeof __propDef.events;
 export type ReferralsSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        referrals?: any[];
+        referrals?: any[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/SiteFooter/Referrals/index.svelte

@@ -12,7 +12,7 @@
         <a href="https://graphics.reuters.com/">More from Reuters Graphics</a>
       </h2>
       {#if typeof window !== 'undefined'}
-        <Referrals referrals="{referrals}" />
+        <Referrals {referrals} />
       {/if}
     </section>
   {/if}

package/dist/{@types/components/SiteHeader/NavBar → components/SiteFooter/Referrals}/index.svelte.d.ts

@@ -1,8 +1,8 @@
 /** @typedef {typeof __propDef.props}  IndexProps */
 /** @typedef {typeof __propDef.events}  IndexEvents */
 /** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponentTyped<{
-    sections?: any[];
+export default class Index extends SvelteComponent<{
+    referrals?: any[] | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -10,14 +10,16 @@ export default class Index extends SvelteComponentTyped<{
 export type IndexProps = typeof __propDef.props;
 export type IndexEvents = typeof __propDef.events;
 export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        sections?: any[];
+        referrals?: any[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: undefined;
+    bindings?: undefined;
 };
 export {};

package/dist/components/SiteFooter/SiteFooter.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 darkThemeDocs from './stories/docs/darkTheme.md?raw';
+  // @ts-ignore raw
+  import customReferralsDocs from './stories/docs/customReferrals.md?raw';
+  // @ts-ignore raw
+  import removeReferralsDocs from './stories/docs/removeReferrals.md?raw';
+
+  import SiteFooter from './SiteFooter.svelte';
+  import Theme from '../Theme/Theme.svelte';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '../../lib/docs/utils/withParams.js';
+
+  const customReferrals = [
+    {
+      url: 'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/',
+      title: 'COVID-19: the latest global statistics, charts and maps',
+      description: 'Tracking the global coronavirus outbreak, updated daily',
+      image:
+        'https://graphics.thomsonreuters.com/cdn/2020/covid-global-tracker/share-cards/global/en/share.png',
+    },
+    {
+      url: 'https://graphics.reuters.com/world-coronavirus-tracker-and-maps/regions/europe',
+      title: 'Coronavirus in Europe: the latest counts, charts and maps',
+      description: 'Tracking the global coronavirus outbreak, updated daily',
+      image:
+        'https://graphics.thomsonreuters.com/cdn/2020/covid-global-tracker/share-cards/regions/en/europe.png',
+    },
+  ];
+</script>
+
+<Meta
+  title="Components/SiteFooter"
+  component="{SiteFooter}"
+  {...withComponentDocs(componentDocs)}
+/>
+
+<Template let:args>
+  <div>
+    <SiteFooter {...args} />
+  </div>
+</Template>
+
+<Story name="Default" />
+
+<Story name="Customised theme" {...withStoryDocs(darkThemeDocs)}>
+  <div>
+    <Theme base="dark">
+      <SiteFooter />
+    </Theme>
+  </div>
+</Story>
+
+<Story
+  name="Customised referrals"
+  args="{{
+    referrals: customReferrals,
+  }}"
+  {...withStoryDocs(customReferralsDocs)}
+/>
+
+<Story
+  name="Remove referrals"
+  args="{{ includeReferrals: false }}"
+  {...withStoryDocs(removeReferralsDocs)}
+/>
+
+<style>
+  div {
+    width: calc(100% + 30px);
+    margin-left: -15px;
+  }
+</style>

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

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

@@ -1,38 +1,30 @@
 <!-- @component `SiteFooter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SiteFooter--default) -->
-<script>import QuickLinks from './QuickLinks.svelte';
-import CompanyLinks from './CompanyLinks.svelte';
-import LegalLinks from './LegalLinks.svelte';
-import Referrals from './Referrals/index.svelte';
-import starterData from './data.json';
-import { onMount } from 'svelte';
-/**
- * Custom referrals to other Reuters Graphics projects
- */
+<script>import QuickLinks from "./QuickLinks.svelte";
+import CompanyLinks from "./CompanyLinks.svelte";
+import LegalLinks from "./LegalLinks.svelte";
+import Referrals from "./Referrals/index.svelte";
+import starterData from "./data.json";
+import { onMount } from "svelte";
 export let referrals = [];
-/**
- * Set to `false` to remove graphics referrals
- */
 export let includeReferrals = true;
 let data = starterData;
 onMount(async () => {
-    if (new URL(document.location.href).origin !== 'https://www.reuters.com') {
-        return;
-    }
-    try {
-        const response = await fetch('https://www.reuters.com/site-api/footer/?' +
-            new URLSearchParams({
-                _website: 'reuters',
-                outputType: 'json',
-            }));
-        const footerData = await response.json();
-        // Dumb verification...
-        if (!footerData[0].company_description)
-            return;
-        data = footerData;
-    }
-    catch {
-        console.warn('Unable to fetch site footer data');
-    }
+  if (new URL(document.location.href).origin !== "https://www.reuters.com") {
+    return;
+  }
+  try {
+    const response = await fetch(
+      "https://www.reuters.com/site-api/footer/?" + new URLSearchParams({
+        _website: "reuters",
+        outputType: "json"
+      })
+    );
+    const footerData = await response.json();
+    if (!footerData[0].company_description) return;
+    data = footerData;
+  } catch {
+    console.warn("Unable to fetch site footer data");
+  }
 });
 </script>
 
@@ -47,7 +39,7 @@ onMount(async () => {
 >
   <div>
     {#if includeReferrals}
-      <Referrals referrals="{referrals}" />
+      <Referrals {referrals} />
     {/if}
     <QuickLinks links="{data[0]}" />
     <CompanyLinks links="{data[0]}" />

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

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