@reuters-graphics/graphics-components 2.0.2 → 3.0.0

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -1,78 +1,136 @@
 <!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-referralblock--docs) -->
-<script>export let section = "/world/";
-export let collection;
-export let number = 4;
-export let linkTarget = "_self";
-export let heading = "";
-export let width = "wide";
-export let id = "";
-let cls = "fmy-8";
-export { cls as class };
-import Block from "../Block/Block.svelte";
-import { onMount } from "svelte";
-import { getTime } from "../SiteHeader/NavBar/NavDropdown/StoryCard/time";
-import { articleIsNotCurrentPage } from "./filterCurrentPage";
-let clientWidth;
-const SECTION_API = "recent-stories-by-sections-v1";
-const COLLECTION_API = "articles-by-collection-alias-or-id-v1";
-let referrals = [];
-const getReferrals = async () => {
-  const isCollection = Boolean(collection);
-  const API = isCollection ? COLLECTION_API : SECTION_API;
-  try {
-    const response = await fetch(
-      `https://www.reuters.com/pf/api/v3/content/fetch/${API}?` + new URLSearchParams({
-        query: JSON.stringify({
-          section_ids: isCollection ? void 0 : section,
-          collection_alias: isCollection ? collection : void 0,
-          size: 20,
-          website: "reuters"
-        })
-      })
-    );
-    const data = await response.json();
-    const articles = data.result.articles.filter((a) => a?.headline_category || a?.kicker?.name).filter(
-      (a) => a?.thumbnail?.renditions?.landscape?.["240w"] || a?.thumbnail?.resizer_url
-    ).filter((a) => !a?.content?.third_party).filter(articleIsNotCurrentPage).slice(0, number);
-    referrals = articles;
-  } catch {
-    console.warn("Unable to fetch referral links.");
+<script lang="ts">
+  // Utils
+  import { onMount } from 'svelte';
+  import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
+  import { articleIsNotCurrentPage } from './filterCurrentPage';
+
+  // Components
+  import Block from '../Block/Block.svelte';
+
+  // Types
+  import type { Article } from './types';
+  import type { Referrals } from './types';
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+
+  interface Props {
+    /**
+     * Section ID, which is often the URL path to the section page on reuters.com.
+     *
+     * Note that not all section pages will be available in the recent stories by section API.
+     */
+    section?: string;
+    /**
+     * Collection alias, as defined in Arc Collections editor.
+     */
+    collection?: string;
+    /**
+     * Number of referrals to show.
+     */
+    number?: number;
+    /**
+     * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+     */
+    linkTarget?: string;
+    /**
+     * Add a heading to the referral block.
+     */
+    heading?: string;
+    /**
+     * Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
   }
-};
-onMount(getReferrals);
+
+  let {
+    section = '/world/',
+    collection,
+    number = 4,
+    linkTarget = '_self',
+    heading = '',
+    width = 'wide',
+    id = '',
+    class: cls = 'fmy-8',
+  }: Props = $props();
+
+  let clientWidth = $state(0);
+
+  const SECTION_API = 'recent-stories-by-sections-v1';
+
+  /** @TODO - Check if collections alias API still exists*/
+  const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
+
+  let referrals: Article[] = $state([]);
+
+  const getReferrals = async () => {
+    const isCollection = Boolean(collection);
+    const API = isCollection ? COLLECTION_API : SECTION_API;
+    try {
+      const response = await fetch(
+        `https://www.reuters.com/pf/api/v3/content/fetch/${API}?` +
+          new URLSearchParams({
+            query: JSON.stringify({
+              section_ids: isCollection ? undefined : section,
+              collection_alias: isCollection ? collection : undefined,
+              size: 20,
+              website: 'reuters',
+            }),
+          })
+      );
+
+      const data = (await response.json()) as Referrals;
+
+      const articles = data.result.articles
+        .filter((a) => a?.headline_category || a?.kicker?.name)
+        .filter((a) => a?.thumbnail?.url)
+        .filter((a) => !a?.content?.third_party)
+        .filter(articleIsNotCurrentPage)
+        .slice(0, number);
+
+      referrals = articles;
+    } catch {
+      console.warn('Unable to fetch referral links.');
+    }
+  };
+
+  onMount(getReferrals);
 </script>
 
 {#if referrals.length === number}
   <Block {width} {id} class="referrals-block {cls}">
     <div
       class="block-container"
-      class:stacked="{clientWidth && clientWidth < 750}"
+      class:stacked={clientWidth && clientWidth < 750}
       bind:clientWidth
     >
       {#if heading}
         <div
           class="heading h4 font-bold"
-          class:stacked="{clientWidth && clientWidth < 750}"
+          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}"
+        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}"
+              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}"
+                  class:xs={clientWidth && clientWidth < 450}
                 >
                   <div
                     class="kicker m-0 body-caption leading-tighter"
@@ -95,26 +153,15 @@ onMount(getReferrals);
                 </div>
                 <div
                   class="image-container block m-0 overflow-hidden relative"
-                  class:xs="{clientWidth && clientWidth < 450}"
+                  class:xs={clientWidth && clientWidth < 450}
                 >
-                  {#if referral.thumbnail.resizer_url}
-                    <img
-                      class="block object-cover m-0 w-full"
-                      data-chromatic="ignore"
-                      src="{referral.thumbnail
-                        .resizer_url}&width=120&quality=80"
-                      alt="{referral.thumbnail.caption ||
-                        referral.thumbnail.alt_text}"
-                    />
-                  {:else}
-                    <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}"
-                    />
-                  {/if}
+                  <img
+                    class="block object-cover m-0 w-full"
+                    data-chromatic="ignore"
+                    src={referral.thumbnail.url}
+                    alt={referral.thumbnail.alt_text ||
+                      referral.thumbnail.caption}
+                  />
                 </div>
               </div>
             </a>

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

@@ -1,42 +1,37 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-           * Section ID, which is often the URL path to the section page on reuters.com.
-           *
-           * Note that not all section pages will be available in the recent stories by section API.
-           */ section?: string | undefined;
-        /**
-           * Collection alias, as defined in Arc Collections editor.
-           */ collection: string | undefined;
-        /**
-           * Number of referrals to show.
-           * @required
-           */ number?: number;
-        /**
-           * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
-           */ linkTarget?: string;
-        /**
-           * Add a heading to the referral block.
-           */ heading?: string;
-        /**
-           * Width of the component within the text well.
-           * @required
-           */ width?: "normal" | "wide" | "wider" | "widest" | "fluid";
-        /** Add an ID to target with SCSS. */ id?: string;
-        /** Add a class to target with SCSS. */ class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ReferralBlockProps = typeof __propDef.props;
-export type ReferralBlockEvents = typeof __propDef.events;
-export type ReferralBlockSlots = typeof __propDef.slots;
-/** `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-referralblock--docs) */
-export default class ReferralBlock extends SvelteComponent<ReferralBlockProps, ReferralBlockEvents, ReferralBlockSlots> {
+type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+interface Props {
+    /**
+     * Section ID, which is often the URL path to the section page on reuters.com.
+     *
+     * Note that not all section pages will be available in the recent stories by section API.
+     */
+    section?: string;
+    /**
+     * Collection alias, as defined in Arc Collections editor.
+     */
+    collection?: string;
+    /**
+     * Number of referrals to show.
+     */
+    number?: number;
+    /**
+     * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+     */
+    linkTarget?: string;
+    /**
+     * Add a heading to the referral block.
+     */
+    heading?: string;
+    /**
+     * Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
 }
-export {};
+/** `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-referralblock--docs) */
+declare const ReferralBlock: import("svelte").Component<Props, {}, "">;
+type ReferralBlock = ReturnType<typeof ReferralBlock>;
+export default ReferralBlock;

package/dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx

@@ -0,0 +1,21 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReutersGraphicsLogoStories from './ReutersGraphicsLogo.stories.svelte';
+
+<Meta of={ReutersGraphicsLogoStories} />
+
+# ReutersGraphicsLogo
+
+The `ReutersGraphicsLogo` component contains the Reuters Graphics team logo.
+
+> Generally, used only for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
+
+```svelte
+<script>
+  import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReutersGraphicsLogo />
+```
+
+<Canvas of={ReutersGraphicsLogoStories.Demo} />

package/dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte

@@ -1,19 +1,14 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import ReutersGraphicsLogo from "./ReutersGraphicsLogo.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Logos/ReutersGraphicsLogo",
-  component: ReutersGraphicsLogo,
-  ...withComponentDocs(componentDocs)
-};
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
+  const { Story } = defineMeta({
+    title: 'Components/Logos/ReutersGraphicsLogo',
+    component: ReutersGraphicsLogo,
+    argTypes: {
+      logoColour: { control: 'color' },
+      textColour: { control: 'color' },
+    },
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template let:args>
-  <ReutersGraphicsLogo {...args} />
-</Template>
-
-<Story name="Default" args="{{}}" />
+<Story name="Demo" />

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

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

package/dist/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte

@@ -1,7 +1,19 @@
 <!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
-<script>export let logoColour = "#D64000";
-export let textColour = "#212223";
-export let width = "100%";
+<script lang="ts">
+  interface Props {
+    /** "Kinesis" colour */
+    logoColour?: string;
+    /** Text colour */
+    textColour?: string;
+    /** CSS width value */
+    width?: string;
+  }
+
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
 </script>
 
 <svg

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

@@ -1,21 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** "Kinesis" colour */ logoColour?: string;
-        /** Text colour */ textColour?: string;
-        /** CSS width value */ width?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ReutersGraphicsLogoProps = typeof __propDef.props;
-export type ReutersGraphicsLogoEvents = typeof __propDef.events;
-export type ReutersGraphicsLogoSlots = typeof __propDef.slots;
-/** `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) */
-export default class ReutersGraphicsLogo extends SvelteComponent<ReutersGraphicsLogoProps, ReutersGraphicsLogoEvents, ReutersGraphicsLogoSlots> {
+interface Props {
+    /** "Kinesis" colour */
+    logoColour?: string;
+    /** Text colour */
+    textColour?: string;
+    /** CSS width value */
+    width?: string;
 }
-export {};
+/** `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) */
+declare const ReutersGraphicsLogo: import("svelte").Component<Props, {}, "">;
+type ReutersGraphicsLogo = ReturnType<typeof ReutersGraphicsLogo>;
+export default ReutersGraphicsLogo;

package/dist/components/ReutersLogo/ReutersLogo.mdx

@@ -0,0 +1,19 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReutersLogoStories from './ReutersLogo.stories.svelte';
+
+<Meta of={ReutersLogoStories} />
+
+# ReutersLogo
+
+The `ReutersLogo` component contains the official Reuters logo.
+
+```svelte
+<script>
+  import { ReutersLogo } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReutersLogo />
+```
+
+<Canvas of={ReutersLogoStories.Demo} />

package/dist/components/ReutersLogo/ReutersLogo.stories.svelte

@@ -1,23 +1,15 @@
-<script context="module">import componentDocs from "./stories/docs/component.md?raw";
-import ReutersLogo from "./ReutersLogo.svelte";
-import { withComponentDocs } from "../../lib/docs/utils/withParams.js";
-export const meta = {
-  title: "Components/Logos/ReutersLogo",
-  component: ReutersLogo,
-  ...withComponentDocs(componentDocs),
-  argTypes: {
-    logoColour: { control: "color" },
-    textColour: { control: "color" }
-  }
-};
-</script>
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ReutersLogo from './ReutersLogo.svelte';
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
+  const { Story } = defineMeta({
+    title: 'Components/Logos/ReutersLogo',
+    component: ReutersLogo,
+    argTypes: {
+      logoColour: { control: 'color' },
+      textColour: { control: 'color' },
+    },
+  });
 </script>
 
-<Template let:args>
-  <ReutersLogo {...args} />
-</Template>
-
-<Story name="Default" />
+<Story name="Demo" />

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

@@ -1,31 +1,19 @@
-import { SvelteComponent } from "svelte";
-export declare const meta: {
-    argTypes: {
-        logoColour: {
-            control: string;
-        };
-        textColour: {
-            control: string;
-        };
+import ReutersLogo from './ReutersLogo.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;
     };
-    parameters: {
-        docs: any;
-    };
-    title: string;
-    component: typeof ReutersLogo;
-};
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ReutersLogoProps = typeof __propDef.props;
-export type ReutersLogoEvents = typeof __propDef.events;
-export type ReutersLogoSlots = typeof __propDef.slots;
-export default class ReutersLogo extends SvelteComponent<ReutersLogoProps, ReutersLogoEvents, ReutersLogoSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ReutersLogo: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ReutersLogo = InstanceType<typeof ReutersLogo>;
+export default ReutersLogo;

package/dist/components/ReutersLogo/ReutersLogo.svelte

@@ -1,7 +1,19 @@
 <!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
-<script>export let logoColour = "#D64000";
-export let textColour = "#212223";
-export let width = "100%";
+<script lang="ts">
+  interface Props {
+    /** "Kinesis" colour */
+    logoColour?: string;
+    /** Text colour */
+    textColour?: string;
+    /** CSS width value */
+    width?: string;
+  }
+
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
 </script>
 
 <svg
@@ -10,22 +22,6 @@ export let width = "100%";
   viewBox="0 0 1760.4 558.7"
   style="width: {width}; --logoColour: {logoColour}; --textColour: {textColour};"
 >
-  <defs>
-    <style>
-      .cls-1 {
-        fill: var(--logoColour);
-      }
-
-      .cls-1,
-      .cls-2 {
-        stroke-width: 0px;
-      }
-
-      .cls-2 {
-        fill: var(--textColour);
-      }
-    </style>
-  </defs>
   <g id="Primary_Logo" data-name="Primary Logo">
     <g>
       <g>
@@ -175,3 +171,18 @@ export let width = "100%";
     </g>
   </g>
 </svg>
+
+<style>
+  .cls-1 {
+    fill: var(--logoColour);
+  }
+
+  .cls-1,
+  .cls-2 {
+    stroke-width: 0px;
+  }
+
+  .cls-2 {
+    fill: var(--textColour);
+  }
+</style>

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

@@ -1,21 +1,12 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        /** "Kinesis" colour */ logoColour?: string;
-        /** Text colour */ textColour?: string;
-        /** CSS width value */ width?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ReutersLogoProps = typeof __propDef.props;
-export type ReutersLogoEvents = typeof __propDef.events;
-export type ReutersLogoSlots = typeof __propDef.slots;
-/** `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) */
-export default class ReutersLogo extends SvelteComponent<ReutersLogoProps, ReutersLogoEvents, ReutersLogoSlots> {
+interface Props {
+    /** "Kinesis" colour */
+    logoColour?: string;
+    /** Text colour */
+    textColour?: string;
+    /** CSS width value */
+    width?: string;
 }
-export {};
+/** `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) */
+declare const ReutersLogo: import("svelte").Component<Props, {}, "">;
+type ReutersLogo = ReturnType<typeof ReutersLogo>;
+export default ReutersLogo;