@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte.d.ts

@@ -1,27 +1,6 @@
-/** @typedef {typeof __propDef.props}  SectionDropdownProps */
-/** @typedef {typeof __propDef.events}  SectionDropdownEvents */
-/** @typedef {typeof __propDef.slots}  SectionDropdownSlots */
-export default class SectionDropdown extends SvelteComponent<{
+declare const SectionDropdown: import("svelte").Component<{
+    section?: Record<string, any>;
     headingText: any;
-    section?: {} | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SectionDropdownProps = typeof __propDef.props;
-export type SectionDropdownEvents = typeof __propDef.events;
-export type SectionDropdownSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        headingText: any;
-        section?: {} | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+}, {}, "">;
+type SectionDropdown = ReturnType<typeof SectionDropdown>;
+export default SectionDropdown;

package/dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte

@@ -15,6 +15,7 @@
   padding-bottom: 100%;
   color: var(--nav-primary, var(--tr-dark-grey));
 }
+
 .spinner {
   position: absolute;
   top: 0;

package/dist/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte.d.ts

@@ -1,25 +1,26 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponent<{
+export default Index;
+type Index = SvelteComponent<{
     [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = 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 Index: $$__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/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte

@@ -1,29 +1,29 @@
-<script>
+<script lang="ts">
   import { normalizeUrl } from '../../utils';
   import { getTime } from './time';
 
-  export let story;
+  let { story } = $props();
 
-  $: thumbnail = story.thumbnail;
+  let thumbnail = $derived(story.thumbnail);
 </script>
 
-<div class="story-card">
-  <a href="{normalizeUrl(story.canonical_url)}">
-    <div class="story-text" class:has-thumbnail="{thumbnail}">
+<div class="story-card" data-chromatic="ignore">
+  <a href={normalizeUrl(story.canonical_url)}>
+    <div class="story-text" class:has-thumbnail={thumbnail}>
       <span>{story.title}</span>
-      <time datetime="{story.display_time}">{getTime(story.display_time)}</time>
+      <time datetime={story.display_time}>{getTime(story.display_time)}</time>
     </div>
     {#if thumbnail && (thumbnail.resizer_url || thumbnail?.renditions?.square?.['120w'])}
       <div class="thumbnail">
         {#if thumbnail.resizer_url}
           <img
             src="{thumbnail.resizer_url}&width=120&quality=80"
-            alt="{thumbnail.alt_text}"
+            alt={thumbnail.alt_text}
           />
         {:else}
           <img
-            src="{thumbnail.renditions.square['120w']}"
-            alt="{thumbnail.alt_text}"
+            src={thumbnail.renditions.square['120w']}
+            alt={thumbnail.alt_text}
           />
         {/if}
       </div>
@@ -51,9 +51,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 .story-card a:hover .story-text span, .story-card a:focus .story-text span {
   text-decoration: underline;
 }
-.story-card a:hover .story-text span.label, .story-card a:focus .story-text span.label {
-  text-decoration: none;
-}
 .story-card a .story-text {
   margin-right: 10px;
   width: 100%;
@@ -72,13 +69,6 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
     font-size: 18px;
   }
 }
-.story-card a .story-text span.label {
-  font-size: 14px;
-  line-height: 1.1;
-  margin-bottom: 8px;
-  display: block;
-  font-weight: 200;
-}
 .story-card a .story-text time {
   font-family: var(--theme-font-family-sans-serif);
   margin-top: 8px;

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte.d.ts

@@ -1,25 +1,5 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponent<{
+declare const Index: import("svelte").Component<{
     story: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        story: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+}, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.d.ts

@@ -1 +1,2 @@
-export function getTime(datetime: any): string;
+import dayjs from 'dayjs';
+export declare const getTime: (datetime: dayjs.ConfigType) => string;

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.js

@@ -5,66 +5,57 @@ import relativeTime from 'dayjs/plugin/relativeTime.js';
 import timezone from 'dayjs/plugin/timezone.js';
 import updateLocale from 'dayjs/plugin/updateLocale.js';
 import utc from 'dayjs/plugin/utc.js';
-
 dayjs.extend(relativeTime);
 dayjs.extend(localizedFormat);
 dayjs.extend(advancedFormat);
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(updateLocale);
-
 dayjs.updateLocale('en', {
-  relativeTime: {
-    future: 'in %s',
-    past: '%s ago',
-    s: 'a few seconds',
-    m: 'a min',
-    mm: '%d min',
-    h: 'an hour',
-    hh: '%d hours',
-    d: 'a day',
-    dd: '%d days',
-    M: 'a month',
-    MM: '%d months',
-    y: 'a year',
-    yy: '%d years',
-  },
+    relativeTime: {
+        future: 'in %s',
+        past: '%s ago',
+        s: 'a few seconds',
+        m: 'a min',
+        mm: '%d min',
+        h: 'an hour',
+        hh: '%d hours',
+        d: 'a day',
+        dd: '%d days',
+        M: 'a month',
+        MM: '%d months',
+        y: 'a year',
+        yy: '%d years',
+    },
 });
-
 const getTimeZone = (local) => {
-  if (local) {
-    return dayjs.tz.guess();
-  }
-
-  return 'UTC';
+    if (local) {
+        return dayjs.tz.guess();
+    }
+    return 'UTC';
 };
-
 const diff = (dateFrom, dateTo, measurement = 'day') => {
-  return dayjs(dateFrom).diff(dayjs(dateTo), measurement, true);
+    return dayjs(dateFrom).diff(dayjs(dateTo), measurement, true);
 };
-
 const olderThanHour = (dateFrom, dateTo, hours = 1) => {
-  return diff(dateFrom, dateTo, 'hour') < -hours;
+    return diff(dateFrom, dateTo, 'hour') < -hours;
 };
-
 const isSameDay = (dateFrom, dateTo) => {
-  const first = new Date(dateFrom);
-  const second = new Date(dateTo);
-  return (
-    first.getFullYear() === second.getFullYear() &&
-    first.getMonth() === second.getMonth() &&
-    first.getDate() === second.getDate()
-  );
+    const first = new Date(dateFrom);
+    const second = new Date(dateTo);
+    return (first.getFullYear() === second.getFullYear() &&
+        first.getMonth() === second.getMonth() &&
+        first.getDate() === second.getDate());
 };
-
 export const getTime = (datetime) => {
-  const publishTime = dayjs(datetime, { utc: true });
-  const showRelativeTime = !olderThanHour(publishTime, Date.now());
-  const showTime = isSameDay(publishTime, Date.now());
-  const timezone = getTimeZone(false);
-  if (showRelativeTime) {
-    return dayjs().to(publishTime);
-  }
-  if (showTime) return dayjs(datetime).tz(timezone).format('h:mm A z');
-  return publishTime.format('MMMM D, YYYY');
+    const publishTime = dayjs(datetime, { utc: true });
+    const showRelativeTime = !olderThanHour(publishTime.toDate(), Date.now());
+    const showTime = isSameDay(publishTime.toDate(), Date.now());
+    const timezone = getTimeZone(false);
+    if (showRelativeTime) {
+        return dayjs().to(publishTime);
+    }
+    if (showTime)
+        return dayjs(datetime).tz(timezone).format('h:mm A z');
+    return publishTime.format('MMMM D, YYYY');
 };

package/dist/components/SiteHeader/NavBar/NavDropdown/index.svelte

@@ -1,19 +1,34 @@
-<script>
-  import { afterUpdate } from 'svelte';
+<script lang="ts">
   import StoryCard from './StoryCard/index.svelte';
   import Spinner from './Spinner/index.svelte';
-  import { getContext } from 'svelte';
+  import { getContext, type Snippet } from 'svelte';
+  import type { Writable } from 'svelte/store';
 
-  const activeSection = getContext('nav-active-section');
+  interface Props {
+    headingText?: string;
+    children: Snippet;
+  }
+
+  let { headingText = 'Trending Stories', children }: Props = $props();
+
+  const activeSection =
+    getContext<Writable<null | string>>('nav-active-section');
 
-  export let headingText = 'Trending Stories';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let stories = $state<any[]>([]);
+  let lastFetched = $state<null | string>(null);
 
-  let stories = [];
-  let lastFetched = null;
+  $effect(() => {
+    try {
+      fetchSection($activeSection);
+    } catch {
+      console.log('Error fetching articles');
+    }
+  });
 
-  afterUpdate(async () => {
-    if (lastFetched === $activeSection) return;
-    if ($activeSection === 'more') {
+  const fetchSection = async (activeSection: null | string) => {
+    if (lastFetched === activeSection) return;
+    if (activeSection === 'more') {
       await fetch(
         'https://www.reuters.com/pf/api/v3/content/fetch/articles-by-trends-v1?' +
           new URLSearchParams({
@@ -26,14 +41,17 @@
         .then((response) => response.json())
         .then((data) => {
           stories = data.result.articles;
-          lastFetched = $activeSection;
+          lastFetched = activeSection;
+        })
+        .catch(() => {
+          console.log('Error fetching articles');
         });
     } else {
       await fetch(
         'https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?' +
           new URLSearchParams({
             query: JSON.stringify({
-              section_ids: $activeSection,
+              section_ids: activeSection,
               size: 4,
               website: 'reuters',
             }),
@@ -42,10 +60,13 @@
         .then((response) => response.json())
         .then((data) => {
           stories = data.result.articles;
-          lastFetched = $activeSection;
+          lastFetched = activeSection;
+        })
+        .catch(() => {
+          console.log('Error fetching articles');
         });
     }
-  });
+  };
 </script>
 
 <div class="dropdown">
@@ -53,11 +74,11 @@
     <div class="inner">
       <div class="submenu">
         <div class="inner">
-          <slot />
+          {@render children?.()}
         </div>
       </div>
       <div class="stories-container">
-        <div class="inner">
+        <div class="inner" data-chromatic="ignore">
           {#if stories.length > 0}
             <span class="latest">{headingText}</span>
             <ul class="story-list">
@@ -96,6 +117,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     top: 56px;
   }
 }
+
 .dropdown-container {
   border-top: 1px solid var(--nav-rules, var(--tr-muted-grey));
   box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
@@ -103,13 +125,13 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   background: var(--nav-background, #fff);
 }
 .dropdown-container > .inner {
+  margin: 0 auto;
+  max-width: 1440px;
   display: grid;
   grid-template-columns: repeat(12, 1fr);
+}
+.dropdown-container > .inner {
   grid-column-gap: 2.2222222222vw;
-  padding-left: 2.2222222222vw;
-  padding-right: 2.2222222222vw;
-  max-width: 1440px;
-  margin: 0 auto;
 }
 @media (max-width: 1023px) {
   .dropdown-container > .inner {
@@ -126,18 +148,29 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     grid-template-columns: repeat(4, 1fr);
   }
 }
+.dropdown-container > .inner {
+  padding-left: 2.2222222222vw;
+}
+.dropdown-container > .inner {
+  padding-right: 2.2222222222vw;
+}
 @media (max-width: 1023px) {
   .dropdown-container > .inner {
     padding-left: 4.2666666667vw;
+  }
+  .dropdown-container > .inner {
     padding-right: 4.2666666667vw;
   }
 }
 @media (min-width: 1440px) {
   .dropdown-container > .inner {
     padding-left: 32px;
+  }
+  .dropdown-container > .inner {
     padding-right: 32px;
   }
 }
+
 .submenu,
 .stories-container {
   padding: 24px 0;
@@ -148,6 +181,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   position: relative;
   height: 100%;
 }
+
 .submenu {
   grid-column: 1/span 4;
 }
@@ -161,14 +195,17 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     grid-column: 1/span 2;
   }
 }
+
 .stories-container {
   grid-column: 5/span 8;
   min-height: 300px;
 }
 .stories-container .inner {
-  padding-left: 2.2222222222vw;
   border-left: 1px solid var(--nav-rules, var(--tr-muted-grey));
 }
+.stories-container .inner {
+  padding-left: 2.2222222222vw;
+}
 @media (max-width: 1023px) {
   .stories-container .inner {
     padding-left: 4.2666666667vw;
@@ -189,10 +226,10 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     grid-column: 3/span 2;
   }
 }
+
 .story-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: 2.2222222222vw;
   list-style: none;
   padding: 0;
   margin: 20px 0 0 0;
@@ -202,6 +239,9 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   line-height: 1.5;
   color: var(--nav-primary, #404040);
 }
+.story-list {
+  grid-column-gap: 2.2222222222vw;
+}
 @media (max-width: 1023px) {
   .story-list {
     grid-column-gap: 4.2666666667vw;
@@ -217,6 +257,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     grid-template-columns: repeat(1, 1fr);
   }
 }
+
 .story-item {
   padding-bottom: 20px;
   margin: 0;
@@ -236,6 +277,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
     border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
   }
 }
+
 .spinner {
   width: 40px;
   margin-left: -20px;
@@ -243,6 +285,7 @@ To handle overlapping borders within components (e.g., buttons and inputs in inp
   top: 60px;
   left: 50%;
 }
+
 @keyframes fadein {
   from {
     opacity: 0;

package/dist/components/SiteHeader/NavBar/NavDropdown/index.svelte.d.ts

@@ -1,29 +1,8 @@
-/** @typedef {typeof __propDef.props}  IndexProps */
-/** @typedef {typeof __propDef.events}  IndexEvents */
-/** @typedef {typeof __propDef.slots}  IndexSlots */
-export default class Index extends SvelteComponent<{
-    headingText?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+import { type Snippet } from 'svelte';
+interface Props {
+    headingText?: string;
+    children: Snippet;
 }
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        headingText?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};
+declare const Index: import("svelte").Component<Props, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;