@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/SiteFooter/QuickLinks.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { normalizeUrl } from '../SiteHeader/NavBar/utils';
 
   import Graphics from './svgs/Graphics.svelte';
@@ -11,13 +11,39 @@
     videos: Videos,
   };
 
-  export let links = {};
+  interface Props {
+    links: {
+      latest_links: {
+        url: string;
+        text: string;
+      }[];
+      media_links: {
+        symbol: string;
+        url: string;
+        text: string;
+      }[];
+      browse_links: {
+        url: string;
+        text: string;
+      }[];
+      about_links: {
+        url: string;
+        text: string;
+      }[];
+      stay_informed_links: {
+        url: string;
+        text: string;
+      }[];
+    };
+  }
+
+  let { links }: Props = $props();
 
-  let windowWidth = 1200;
+  let windowWidth = $state(1200);
   const mobileBreakpoint = 745;
 </script>
 
-<svelte:window bind:innerWidth="{windowWidth}" />
+<svelte:window bind:innerWidth={windowWidth} />
 
 {#if links.latest_links}
   <section class="quick-links">
@@ -30,7 +56,7 @@
             <ul>
               {#each links.latest_links as link}
                 <li>
-                  <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                  <a href={normalizeUrl(link.url)}>{link.text}</a>
                 </li>
               {/each}
             </ul>
@@ -39,11 +65,13 @@
             <h3>Media</h3>
             <ul>
               {#each links.media_links as link}
+                {@const SvelteComponent =
+                  symbols[link.symbol as keyof typeof symbols]}
                 <li>
                   <div class="symbol">
-                    <svelte:component this="{symbols[link.symbol]}" />
+                    <SvelteComponent />
                   </div>
-                  <a href="{normalizeUrl(link.url)}">
+                  <a href={normalizeUrl(link.url)}>
                     {link.text}
                   </a>
                 </li>
@@ -57,7 +85,7 @@
           <ul>
             {#each links.latest_links as link}
               <li>
-                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
               </li>
             {/each}
           </ul>
@@ -69,7 +97,7 @@
         <ul>
           {#each links.browse_links as link}
             <li>
-              <a href="{normalizeUrl(link.url)}">{link.text}</a>
+              <a href={normalizeUrl(link.url)}>{link.text}</a>
             </li>
           {/each}
         </ul>
@@ -79,11 +107,13 @@
           <h3>Media</h3>
           <ul>
             {#each links.media_links as link}
+              {@const SvelteComponent_1 =
+                symbols[link.symbol as keyof typeof symbols]}
               <li>
                 <div class="symbol">
-                  <svelte:component this="{symbols[link.symbol]}" />
+                  <SvelteComponent_1 />
                 </div>
-                <a href="{normalizeUrl(link.url)}">
+                <a href={normalizeUrl(link.url)}>
                   {link.text}
                 </a>
               </li>
@@ -97,7 +127,7 @@
           <ul>
             {#each links.about_links as link}
               <li>
-                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
               </li>
             {/each}
           </ul>
@@ -107,7 +137,7 @@
           <ul>
             {#each links.stay_informed_links as link}
               <li>
-                <a href="{normalizeUrl(link.url)}">{link.text}</a>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
               </li>
             {/each}
           </ul>
@@ -125,10 +155,11 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 */
 /* Scales by 1.125 */
 .content-container {
-  max-width: 1440px;
   width: 100%;
   margin: 0 auto;
+  max-width: 1440px;
 }
+
 .quick-links {
   padding-top: 24px;
   padding-bottom: 24px;
@@ -137,6 +168,8 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .quick-links .content-container {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
+}
+.quick-links .content-container {
   grid-column-gap: 2.2222222222vw;
 }
 @media (max-width: 1023px) {
@@ -170,24 +203,33 @@ 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%;
 }
+section.quick-links .content-container {
+  box-sizing: border-box;
+}
 section.quick-links .content-container {
   padding-left: 2.2222222222vw;
+}
+section.quick-links .content-container {
   padding-right: 2.2222222222vw;
-  box-sizing: border-box;
 }
 @media (max-width: 1023px) {
   section.quick-links .content-container {
     padding-left: 4.2666666667vw;
+  }
+  section.quick-links .content-container {
     padding-right: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   section.quick-links .content-container {
     padding-left: 32px;
+  }
+  section.quick-links .content-container {
     padding-right: 32px;
   }
 }
@@ -197,6 +239,7 @@ section.quick-links h3 {
   font-weight: 400;
   margin: 0;
 }
+
 .quick-links .content-container {
   grid-row-gap: 2.2222222222vw;
 }
@@ -244,10 +287,12 @@ 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/components/SiteFooter/QuickLinks.svelte.d.ts

@@ -1,25 +1,28 @@
-/** @typedef {typeof __propDef.props}  QuickLinksProps */
-/** @typedef {typeof __propDef.events}  QuickLinksEvents */
-/** @typedef {typeof __propDef.slots}  QuickLinksSlots */
-export default class QuickLinks extends SvelteComponent<{
-    links?: {} | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type QuickLinksProps = typeof __propDef.props;
-export type QuickLinksEvents = typeof __propDef.events;
-export type QuickLinksSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        links?: {} | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
+interface Props {
+    links: {
+        latest_links: {
+            url: string;
+            text: string;
+        }[];
+        media_links: {
+            symbol: string;
+            url: string;
+            text: string;
+        }[];
+        browse_links: {
+            url: string;
+            text: string;
+        }[];
+        about_links: {
+            url: string;
+            text: string;
+        }[];
+        stay_informed_links: {
+            url: string;
+            text: string;
+        }[];
     };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+}
+declare const QuickLinks: import("svelte").Component<Props, {}, "">;
+type QuickLinks = ReturnType<typeof QuickLinks>;
+export default QuickLinks;

package/dist/components/SiteFooter/SiteFooter.mdx

@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/blocks';
+
+import * as SiteFooterStories from './SiteFooter.stories.svelte';
+
+<Meta of={SiteFooterStories} />
+
+# SiteFooter
+
+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 />
+```
+
+## Dark theme
+
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-sitefooter--customised-theme))
+
+```svelte
+<script>
+  import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="dark">
+  <SiteFooter />
+</Theme>
+```
+
+## Removing referrals
+
+Remove graphics referrals. ([Demo](?path=/story/components-page-furniture-sitefooter--remove-referrals))
+
+```svelte
+<script>
+  import { SiteFooter } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteFooter includeReferrals={false} />
+```

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

@@ -1,33 +1,17 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import darkThemeDocs from "./stories/docs/darkTheme.md?raw";
-import removeReferralsDocs from "./stories/docs/removeReferrals.md?raw";
-import SiteFooter from "./SiteFooter.svelte";
-import {
-  withComponentDocs,
-  withStoryDocs
-} from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Page furniture/SiteFooter",
-  component: SiteFooter,
-  ...withComponentDocs(componentDocs)
-};
-</script>
-
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SiteFooter from './SiteFooter.svelte';
   import Theme from '../Theme/Theme.svelte';
-</script>
 
-<Template let:args>
-  <div>
-    <SiteFooter {...args} />
-  </div>
-</Template>
+  const { Story } = defineMeta({
+    title: 'Components/Page furniture/SiteFooter',
+    component: SiteFooter,
+  });
+</script>
 
-<Story name="Default" />
+<Story name="Demo" />
 
-<Story name="Customised theme" {...withStoryDocs(darkThemeDocs)}>
+<Story name="Customised theme">
   <div>
     <Theme base="dark">
       <SiteFooter />
@@ -35,11 +19,7 @@ export const meta = {
   </div>
 </Story>
 
-<Story
-  name="Remove referrals"
-  args="{{ includeReferrals: false }}"
-  {...withStoryDocs(removeReferralsDocs)}
-/>
+<Story name="Remove referrals" args={{ includeReferrals: false }} />
 
 <style>
   div {

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

@@ -1,23 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    parameters: {
-        docs: any;
+import SiteFooter from './SiteFooter.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 SiteFooter;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [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;
-export default class SiteFooter extends SvelteComponent<SiteFooterProps, SiteFooterEvents, SiteFooterSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const SiteFooter: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SiteFooter = InstanceType<typeof SiteFooter>;
+export default SiteFooter;

package/dist/components/SiteFooter/SiteFooter.svelte

@@ -1,41 +1,55 @@
 <!-- @component `SiteFooter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-sitefooter--docs) -->
-<script>import QuickLinks from "./QuickLinks.svelte";
-import CompanyLinks from "./CompanyLinks.svelte";
-import LegalLinks from "./LegalLinks.svelte";
-import ReferralBlock from "../ReferralBlock/ReferralBlock.svelte";
-import PaddingReset from "../PaddingReset/PaddingReset.svelte";
-import starterData from "./data.json";
-import { onMount } from "svelte";
-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();
-    if (!footerData[0].company_description) return;
-    data = footerData;
-  } catch {
-    console.warn("Unable to fetch site footer data");
+<script lang="ts">
+  import QuickLinks from './QuickLinks.svelte';
+  import CompanyLinks from './CompanyLinks.svelte';
+  import LegalLinks from './LegalLinks.svelte';
+  import ReferralBlock from '../ReferralBlock/ReferralBlock.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+
+  import starterData from './data.json';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /**
+     * Set to `false` to remove graphics referrals
+     */
+    includeReferrals?: boolean;
   }
-});
+
+  let { includeReferrals = true }: Props = $props();
+
+  let data = $state(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');
+    }
+  });
 </script>
 
 <footer
   class="my-0"
-  style="{`
+  style={`
     --nav-background: var(--theme-colour-background, #fff);
     --nav-primary: var(--theme-colour-text-primary, #404040);
     --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
     --theme-font-family-sans-serif: Knowledge, sans-serif;
-  `}"
+  `}
 >
   <div>
     {#if includeReferrals}
@@ -47,9 +61,9 @@ onMount(async () => {
         />
       </PaddingReset>
     {/if}
-    <QuickLinks links="{data[0]}" />
-    <CompanyLinks links="{data[0]}" />
-    <LegalLinks links="{data[0]}" />
+    <QuickLinks links={data[0]} />
+    <CompanyLinks links={data[0]} />
+    <LegalLinks links={data[0]} />
   </div>
 </footer>
 

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

@@ -1,21 +1,10 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * Set to `false` to remove graphics referrals
-           */ includeReferrals?: boolean;
-    };
-    events: {
-        [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-page-furniture-sitefooter--docs) */
-export default class SiteFooter extends SvelteComponent<SiteFooterProps, SiteFooterEvents, SiteFooterSlots> {
+interface Props {
+    /**
+     * Set to `false` to remove graphics referrals
+     */
+    includeReferrals?: boolean;
 }
-export {};
+/** `SiteFooter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-sitefooter--docs) */
+declare const SiteFooter: import("svelte").Component<Props, {}, "">;
+type SiteFooter = ReturnType<typeof SiteFooter>;
+export default SiteFooter;

package/dist/components/SiteFooter/data.json

@@ -3,7 +3,7 @@
     "company_description": "Reuters, the news and media division of Thomson Reuters, is the world’s largest multimedia news provider, reaching billions of people worldwide every day. Reuters provides business, financial, national and international news to professionals via desktop terminals, the world's media organizations, industry events and directly to consumers.",
     "disclaimer_link": "https://www.reuters.com/info-pages/disclaimer/",
     "copyright_link": "https://www.thomsonreuters.com/en/policies/copyright.html",
-    "copyright_year": "2022",
+    "copyright_year": "2025",
     "latest_links": [
       {
         "text": "Home",
@@ -203,7 +203,7 @@
       {
         "text": "Do Not Sell My Personal Information",
         "url": "javascript:window.OneTrust.ToggleInfoDisplay();",
-        "self": "true"
+        "self": true
       }
     ]
   }

package/dist/components/SiteFooter/svgs/Facebook.svelte

@@ -1,5 +1,9 @@
-<script>
-  export let width = 20;
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
 </script>
 
 <svg

package/dist/components/SiteFooter/svgs/Facebook.svelte.d.ts

@@ -1,25 +1,6 @@
-/** @typedef {typeof __propDef.props}  FacebookProps */
-/** @typedef {typeof __propDef.events}  FacebookEvents */
-/** @typedef {typeof __propDef.slots}  FacebookSlots */
-export default class Facebook extends SvelteComponent<{
-    width?: number | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+interface Props {
+    width?: number;
 }
-export type FacebookProps = typeof __propDef.props;
-export type FacebookEvents = typeof __propDef.events;
-export type FacebookSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        width?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Facebook: import("svelte").Component<Props, {}, "">;
+type Facebook = ReturnType<typeof Facebook>;
+export default Facebook;

package/dist/components/SiteFooter/svgs/Graphics.svelte.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  GraphicsProps */
-/** @typedef {typeof __propDef.events}  GraphicsEvents */
-/** @typedef {typeof __propDef.slots}  GraphicsSlots */
-export default class Graphics extends SvelteComponent<{
+export default Graphics;
+type Graphics = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type GraphicsProps = typeof __propDef.props;
-export type GraphicsEvents = typeof __propDef.events;
-export type GraphicsSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
+}, {}> & {
+    $$bindings?: string | undefined;
 };
-export {};
+declare const Graphics: $$__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/SiteFooter/svgs/Instagram.svelte

@@ -1,5 +1,9 @@
-<script>
-  export let width = 20;
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
 </script>
 
 <svg