From eb5328a718544093f423e6f251099acef394602a Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Fri, 18 Apr 2025 12:10:09 +0100
Subject: [PATCH] footer

---
 .../ReferralBlock/ReferralBlock.svelte        |  4 +-
 src/components/SiteFooter/CompanyLinks.svelte | 15 ++++++-
 src/components/SiteFooter/LegalLinks.svelte   | 23 ++++++++--
 src/components/SiteFooter/QuickLinks.svelte   | 34 ++++++++++++--
 src/components/SiteFooter/SiteFooter.mdx      | 45 +++++++++++++++++++
 .../SiteFooter/SiteFooter.stories.svelte      | 43 +++---------------
 src/components/SiteFooter/data.json           |  4 +-
 7 files changed, 120 insertions(+), 48 deletions(-)
 create mode 100644 src/components/SiteFooter/SiteFooter.mdx

diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index f1e49c90..bdf825c7 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -31,11 +31,11 @@
     /**
      * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
      */
-    linkTarget: string;
+    linkTarget?: string;
     /**
      * Add a heading to the referral block.
      */
-    heading: string;
+    heading?: string;
     /**
      * Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
      */
diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte
index 239a704d..d5bbba2b 100644
--- a/src/components/SiteFooter/CompanyLinks.svelte
+++ b/src/components/SiteFooter/CompanyLinks.svelte
@@ -14,7 +14,17 @@
     linkedin: LinkedIn,
   };
 
-  let { links = {} } = $props();
+  interface Props {
+    links: {
+      company_description?: string;
+      social_links?: {
+        type: string;
+        url: string;
+      }[];
+    };
+  }
+
+  let { links = {} }: Props = $props();
 </script>
 
 {#if links.social_links}
@@ -29,7 +39,8 @@
         <div>
           <ul class="links">
             {#each links.social_links as link}
-              {@const SvelteComponent = symbols[link.type]}
+              {@const SvelteComponent =
+                symbols[link.type as keyof typeof symbols]}
               <li class="social-links symbol">
                 <a href={normalizeUrl(link.url)}>
                   <div class="button">
diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte
index 4e1f5a26..0984115f 100644
--- a/src/components/SiteFooter/LegalLinks.svelte
+++ b/src/components/SiteFooter/LegalLinks.svelte
@@ -1,7 +1,24 @@
 <script lang="ts">
   import { normalizeUrl } from '../SiteHeader/NavBar/utils';
 
-  let { links = {} } = $props();
+  interface Props {
+    links: {
+      ad_links?: {
+        url: string;
+        text: string;
+      }[];
+      misc_links: {
+        self?: boolean;
+        url: string;
+        text: string;
+      }[];
+      disclaimer_link?: string;
+      copyright_year: string;
+      copyright_link: string;
+    };
+  }
+
+  let { links }: Props = $props();
 </script>
 
 {#if links.ad_links}
@@ -36,8 +53,8 @@
         </ul>
       </section>
       <p class="copyright">
-        © {links.copyright_year} Reuters.
-        <a href={normalizeUrl(links.copyright_link)}>All rights reserved</a>
+        © {new Date().getFullYear()} Reuters.
+        <a href={normalizeUrl(links.copyright_link)}>All rights reserved.</a>
       </p>
     </div>
   </section>
diff --git a/src/components/SiteFooter/QuickLinks.svelte b/src/components/SiteFooter/QuickLinks.svelte
index fbb07608..cccf2b98 100644
--- a/src/components/SiteFooter/QuickLinks.svelte
+++ b/src/components/SiteFooter/QuickLinks.svelte
@@ -11,7 +11,33 @@
     videos: Videos,
   };
 
-  let { links = {} } = $props();
+  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 = $state(1200);
   const mobileBreakpoint = 745;
@@ -39,7 +65,8 @@
             <h3>Media</h3>
             <ul>
               {#each links.media_links as link}
-                {@const SvelteComponent = symbols[link.symbol]}
+                {@const SvelteComponent =
+                  symbols[link.symbol as keyof typeof symbols]}
                 <li>
                   <div class="symbol">
                     <SvelteComponent />
@@ -80,7 +107,8 @@
           <h3>Media</h3>
           <ul>
             {#each links.media_links as link}
-              {@const SvelteComponent_1 = symbols[link.symbol]}
+              {@const SvelteComponent_1 =
+                symbols[link.symbol as keyof typeof symbols]}
               <li>
                 <div class="symbol">
                   <SvelteComponent_1 />
diff --git a/src/components/SiteFooter/SiteFooter.mdx b/src/components/SiteFooter/SiteFooter.mdx
new file mode 100644
index 00000000..bc50eca6
--- /dev/null
+++ b/src/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} />
+```
diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte
index a4be2141..a41de20c 100644
--- a/src/components/SiteFooter/SiteFooter.stories.svelte
+++ b/src/components/SiteFooter/SiteFooter.stories.svelte
@@ -1,42 +1,17 @@
 <script module lang="ts">
-  // @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 removeReferralsDocs from './stories/docs/removeReferrals.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import SiteFooter from './SiteFooter.svelte';
+  import Theme from '../Theme/Theme.svelte';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Page furniture/SiteFooter',
     component: SiteFooter,
-    ...withComponentDocs(componentDocs),
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+<Story name="Demo" />
 
-  import Theme from '../Theme/Theme.svelte';
-</script>
-
-<Template>
-  {#snippet children({ args })}
-    <div>
-      <SiteFooter {...args} />
-    </div>
-  {/snippet}
-</Template>
-
-<Story name="Default" />
-
-<Story name="Customised theme" {...withStoryDocs(darkThemeDocs)}>
+<Story name="Customised theme">
   <div>
     <Theme base="dark">
       <SiteFooter />
@@ -44,11 +19,7 @@
   </div>
 </Story>
 
-<Story
-  name="Remove referrals"
-  args={{ includeReferrals: false }}
-  {...withStoryDocs(removeReferralsDocs)}
-/>
+<Story name="Remove referrals" args={{ includeReferrals: false }} />
 
 <style>
   div {
diff --git a/src/components/SiteFooter/data.json b/src/components/SiteFooter/data.json
index 3c3e0039..76a8f61e 100644
--- a/src/components/SiteFooter/data.json
+++ b/src/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
       }
     ]
   }