Merge pull request #194 from reuters-graphics/footer-referrals

Footer referrals
reuters-graphics · Nov 19, 2024 · 2d89b5b · 2d89b5b
2 parents e0ea86c + 492ce96
commit 2d89b5b
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 355 deletions.
diff --git a/.changeset/little-experts-jam.md b/.changeset/little-experts-jam.md
@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+Updates ReferralBlock and SiteFooter
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "git+https://github.com/reuters-graphics/graphics-components.git"
   },
-  "packageManager": "pnpm@9.6.0",
+  "packageManager": "pnpm@9.13.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"

diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -57,7 +57,7 @@
 
   let referrals = [];
 
-  onMount(async () => {
+  const getReferrals = async () => {
     const isCollection = Boolean(collection);
     const API = isCollection ? COLLECTION_API : SECTION_API;
     try {
@@ -82,82 +82,95 @@
     } catch {
       console.warn('Unable to fetch referral links.');
     }
-  });
+  };
 
-  getTime();
+  onMount(getReferrals);
 </script>
 
 {#if referrals.length === number}
   <Block {width} {id} class="referrals-block {cls}">
-    {#if heading}
-      <div
-        class="heading h4 font-bold"
-        class:stacked="{clientWidth && clientWidth < 750}"
-      >
-        {heading}
-      </div>
-    {/if}
     <div
-      class="referral-container inline-flex flex-wrap w-full justify-between"
+      class="block-container"
       class:stacked="{clientWidth && clientWidth < 750}"
-      class:xs="{clientWidth && clientWidth < 450}"
       bind:clientWidth
     >
-      {#each referrals as referral}
-        <div class="referral">
-          <a
-            href="https://www.reuters.com{referral.canonical_url}"
-            target="{linkTarget}"
-            rel="{linkTarget === '_blank' ? 'noreferrer' : null}"
-          >
-            <div class="referral-pack flex justify-around my-0 mx-auto">
-              <div
-                class="headline"
-                class:xs="{clientWidth && clientWidth < 450}"
-              >
-                <div
-                  class="kicker m-0 body-caption leading-tighter"
-                  data-chromatic="ignore"
-                >
-                  {referral.headline_category || referral.kicker.name}
-                </div>
+      {#if heading}
+        <div
+          class="heading h4 font-bold"
+          class:stacked="{clientWidth && clientWidth < 750}"
+        >
+          {heading}
+        </div>
+      {/if}
+      <div
+        class="referral-container inline-flex flex-wrap w-full justify-between"
+        class:stacked="{clientWidth && clientWidth < 750}"
+        class:xs="{clientWidth && clientWidth < 450}"
+      >
+        {#each referrals as referral}
+          <div class="referral">
+            <a
+              href="https://www.reuters.com{referral.canonical_url}"
+              target="{linkTarget}"
+              rel="{linkTarget === '_blank' ? 'noreferrer' : null}"
+            >
+              <div class="referral-pack flex justify-around my-0 mx-auto">
                 <div
-                  class="title m-0 body-caption leading-tighter"
-                  data-chromatic="ignore"
+                  class="headline"
+                  class:xs="{clientWidth && clientWidth < 450}"
                 >
-                  {referral.title}
+                  <div
+                    class="kicker m-0 body-caption leading-tighter"
+                    data-chromatic="ignore"
+                  >
+                    {referral.headline_category || referral.kicker.name}
+                  </div>
+                  <div
+                    class="title m-0 body-caption leading-tighter"
+                    data-chromatic="ignore"
+                  >
+                    {referral.title}
+                  </div>
+                  <div
+                    class="publish-time body-caption leading-tighter"
+                    data-chromatic="ignore"
+                  >
+                    {getTime(new Date(referral.display_time))}
+                  </div>
                 </div>
                 <div
-                  class="publish-time body-caption leading-tighter"
-                  data-chromatic="ignore"
+                  class="image-container block m-0 overflow-hidden relative"
+                  class:xs="{clientWidth && clientWidth < 450}"
                 >
-                  {getTime(new Date(referral.display_time))}
+                  <img
+                    class="block object-cover m-0 w-full"
+                    data-chromatic="ignore"
+                    src="{referral.thumbnail.renditions.landscape['240w']}"
+                    alt="{referral.thumbnail.caption ||
+                      referral.thumbnail.alt_text}"
+                  />
                 </div>
               </div>
-              <div
-                class="image-container block m-0 overflow-hidden relative"
-                class:xs="{clientWidth && clientWidth < 450}"
-              >
-                <img
-                  class="block object-cover m-0 w-full"
-                  data-chromatic="ignore"
-                  src="{referral.thumbnail.renditions.landscape['240w']}"
-                  alt="{referral.thumbnail.caption ||
-                    referral.thumbnail.alt_text}"
-                />
-              </div>
-            </div>
-          </a>
-        </div>
-      {/each}
+            </a>
+          </div>
+        {/each}
+      </div>
     </div>
   </Block>
 {/if}
 
 <style lang="scss">
   @use '../../scss/mixins' as *;
 
+  div.block-container.stacked {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   div.heading {
+    margin-top: 0;
+    font-family: Knowledge, sans-serif;
     &.stacked {
       max-width: 450px;
     }
@@ -168,6 +181,7 @@
       text-decoration: none;
     }
     &.stacked {
+      max-width: 450px;
       .referral {
         width: 100%;
         .headline {
@@ -194,18 +208,19 @@
         display: inline-block;
         width: calc(100% - 9rem);
         @include fpr-2;
-        &.xs {
-        }
         .kicker {
           @include text-xxs;
+          font-family: Knowledge, sans-serif;
         }
         .title {
           @include font-medium;
           @include text-sm;
           @include text-primary;
+          font-family: Knowledge, sans-serif;
         }
         .publish-time {
           @include text-xxs;
+          font-family: Knowledge, sans-serif;
         }
       }
       .image-container {

diff --git a/src/components/SiteFooter/Referrals/IntersectionObserver.svelte b/src/components/SiteFooter/Referrals/IntersectionObserver.svelte
diff --git a/src/components/SiteFooter/Referrals/Link.svelte b/src/components/SiteFooter/Referrals/Link.svelte
diff --git a/src/components/SiteFooter/Referrals/Referrals.svelte b/src/components/SiteFooter/Referrals/Referrals.svelte