@reuters-graphics/graphics-components 3.0.1 → 3.0.3

package/dist/components/@types/global.d.ts

@@ -21,7 +21,7 @@ export interface ScrollerStep {
     /**
      * A background component
      */
-    background: Component;
+    background: Component | undefined;
     /**
      * Optional props for background component
      */

package/dist/components/AdSlot/@types/ads.d.ts

@@ -1,4 +1,4 @@
-export type LeaderboardAd = {
+export type LeaderboardAdType = {
     mobile: {
         adType: 'leaderboard';
         placementName: 'reuters_mobile_leaderboard';
@@ -8,7 +8,7 @@ export type LeaderboardAd = {
         placementName: 'reuters_desktop_leaderboard_atf';
     };
 };
-export type SponsorshipAd = {
+export type SponsorshipAdType = {
     mobile: {
         adType: 'sponsorlogo';
         placementName: 'reuters_sponsorlogo';
@@ -18,7 +18,7 @@ export type SponsorshipAd = {
         placementName: 'reuters_sponsorlogo';
     };
 };
-export type InlineAd = {
+export type InlineAdType = {
     mobile: {
         adType: 'mpu' | 'native' | 'mpu2';
         placementName: 'reuters_mobile_mpu_1' | 'reuters_mobile_mpu_2' | 'reuters_mobile_mpu_3';
@@ -28,7 +28,7 @@ export type InlineAd = {
         placementName: 'reuters_desktop_native_1' | 'reuters_desktop_native_2' | 'reuters_desktop_native_3';
     };
 };
-export type DesktopPlacementName = LeaderboardAd['desktop']['placementName'] | SponsorshipAd['desktop']['placementName'] | InlineAd['desktop']['placementName'];
-export type MobilePlacementName = LeaderboardAd['mobile']['placementName'] | SponsorshipAd['mobile']['placementName'] | InlineAd['mobile']['placementName'];
-export type DesktopAdType = LeaderboardAd['desktop']['adType'] | SponsorshipAd['desktop']['adType'] | InlineAd['desktop']['adType'];
-export type MobileAdType = LeaderboardAd['mobile']['adType'] | SponsorshipAd['mobile']['adType'] | InlineAd['mobile']['adType'];
+export type DesktopPlacementName = LeaderboardAdType['desktop']['placementName'] | SponsorshipAdType['desktop']['placementName'] | InlineAdType['desktop']['placementName'];
+export type MobilePlacementName = LeaderboardAdType['mobile']['placementName'] | SponsorshipAdType['mobile']['placementName'] | InlineAdType['mobile']['placementName'];
+export type DesktopAdType = LeaderboardAdType['desktop']['adType'] | SponsorshipAdType['desktop']['adType'] | InlineAdType['desktop']['adType'];
+export type MobileAdType = LeaderboardAdType['mobile']['adType'] | SponsorshipAdType['mobile']['adType'] | InlineAdType['mobile']['adType'];

package/dist/components/AdSlot/InlineAd.svelte

@@ -2,7 +2,7 @@
 <!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-inlinead--docs) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
-  import type { InlineAd } from './@types/ads';
+  import type { InlineAdType } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
 
   interface Props {
@@ -16,7 +16,7 @@
 
   let { id = '', class: cls = 'my-12', n = 1 }: Props = $props();
 
-  const desktopPlacementName: InlineAd['desktop']['placementName'] = `reuters_desktop_native_${n}`;
+  const desktopPlacementName: InlineAdType['desktop']['placementName'] = `reuters_desktop_native_${n}`;
 </script>
 
 <Block {id} class="freestar-adslot {cls}">

package/dist/components/AdSlot/InlineAd.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { InlineAd } from './@types/ads';
 interface Props {
     /** Add an ID to target with SCSS. */
     id?: string;

package/dist/components/AdSlot/LeaderboardAd.svelte

@@ -1,6 +1,6 @@
 <!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) -->
 <script lang="ts">
-  import type { LeaderboardAd } from './@types/ads';
+  import type { LeaderboardAdType } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
   import { onMount } from 'svelte';
 
@@ -16,7 +16,7 @@
   let windowWidth = $state(1200);
   let adSize = $derived(windowWidth < 1024 ? 110 : 275);
 
-  const desktopPlacementName: LeaderboardAd['desktop']['placementName'] =
+  const desktopPlacementName: LeaderboardAdType['desktop']['placementName'] =
     'reuters_desktop_leaderboard_atf';
 
   let sticky = $state(false);

package/dist/components/AdSlot/LeaderboardAd.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { LeaderboardAd } from './@types/ads';
 interface Props {
     /** Add an ID to target with SCSS. */
     id?: string;

package/dist/components/AdSlot/SponsorshipAd.svelte

@@ -2,7 +2,7 @@
 <!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-sponsorshipad--docs) -->
 <script lang="ts">
   import Block from '../Block/Block.svelte';
-  import type { SponsorshipAd } from './@types/ads';
+  import type { SponsorshipAdType } from './@types/ads';
   import ResponsiveAd from './ResponsiveAd.svelte';
 
   interface Props {
@@ -18,7 +18,7 @@
 
   let { id = '', class: cls = 'my-12', adLabel = '' }: Props = $props();
 
-  const desktopPlacementName: SponsorshipAd['desktop']['placementName'] =
+  const desktopPlacementName: SponsorshipAdType['desktop']['placementName'] =
     'reuters_sponsorlogo';
 </script>
 

package/dist/components/AdSlot/SponsorshipAd.svelte.d.ts

@@ -1,4 +1,3 @@
-import type { SponsorshipAd } from './@types/ads';
 interface Props {
     /** Add an ID to target with SCSS. */
     id?: string;

package/dist/components/Framer/Dropdown/index.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  interface Props {
+    data: {
+      index: number;
+      embed: string;
+      title: string;
+    }[];
+    selected: string;
+  }
+
+  let { data = [], selected = $bindable() }: Props = $props();
+</script>
+
+<form>
+  <label for="embed-options">Select an embed</label>
+  <select id="embed-options" bind:value={selected}>
+    {#each data as d (d.index)}
+      <option value={d.embed}>{d.title}</option>
+    {/each}
+  </select>
+</form>
+
+<style>/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Generated from 
+https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
+*/
+/* Scales by 1.125 */
+label {
+  margin-bottom: 0.25rem;
+  display: inline-flex;
+  font-size: 0.75rem;
+  color: #aaa;
+  font-family: var(--theme-font-family-sans-serif);
+}
+
+select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  background: none;
+  font-size: 1rem;
+  border: 0;
+  border-radius: 0 !important;
+  background-color: #fff;
+  border: 1px solid #ddd;
+  font-family: var(--theme-font-family-sans-serif);
+}
+
+select:focus {
+  outline: none;
+  border: 1px solid #ccc;
+}</style>

package/dist/components/Framer/Dropdown/index.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    data: {
+        index: number;
+        embed: string;
+        title: string;
+    }[];
+    selected: string;
+}
+declare const Index: import("svelte").Component<Props, {}, "selected">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/components/Framer/Framer.svelte

@@ -7,6 +7,7 @@
   import { width } from './stores';
   import getUniqNames from './uniqNames';
   import Typeahead from './Typeahead/index.svelte';
+  import Dropdown from './Dropdown/index.svelte';
   import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
 
   interface Props {
@@ -14,6 +15,7 @@
     breakpoints?: number[];
     minFrameWidth?: number;
     maxFrameWidth?: number;
+    searchType?: 'dropdown' | 'typeahead';
   }
 
   let {
@@ -21,6 +23,7 @@
     breakpoints = [330, 510, 660, 930, 1200],
     minFrameWidth = 320,
     maxFrameWidth = 1200,
+    searchType = 'dropdown',
   }: Props = $props();
 
   const getDefaultEmbed = (embeds: Props['embeds']) => {
@@ -71,37 +74,62 @@
       <p>No embeds to show.</p>
     </div>
   {:else}
-    <div id="typeahead-container">
-      <div class="embed-link">
-        <a
-          rel="external"
-          target="_blank"
-          href={activeEmbed}
-          title={activeEmbed}
-        >
-          Live link <Fa icon={faLink} />
-        </a>
+    {#if searchType === 'typeahead'}
+      <div id="typeahead-container">
+        <div class="embed-link">
+          <a
+            rel="external"
+            target="_blank"
+            href={activeEmbed}
+            title={activeEmbed}
+          >
+            Live link <Fa icon={faLink} />
+          </a>
+        </div>
+        <Typeahead
+          label="Select an embed"
+          value={embedTitles[embeds.indexOf(activeEmbed)] ||
+            embedTitles[activeEmbedIndex] ||
+            embedTitles[0]}
+          extract={(d) => embedTitles[d.index]}
+          data={embeds.map((embed, index) => ({ index, embed }))}
+          showDropdownOnFocus={true}
+          onselect={(detail) => {
+            if (typeof window !== 'undefined') {
+              window.localStorage.setItem(
+                'framer-active-embed',
+                detail.original.embed
+              );
+            }
+            activeEmbed = detail.original.embed;
+            // activeEmbedIndex = detail.original.index;
+          }}
+        />
       </div>
-      <Typeahead
-        label="Select an embed"
-        value={embedTitles[embeds.indexOf(activeEmbed)] ||
-          embedTitles[activeEmbedIndex] ||
-          embedTitles[0]}
-        extract={(d) => embedTitles[d.index]}
-        data={embeds.map((embed, index) => ({ index, embed }))}
-        showDropdownOnFocus={true}
-        onselect={(detail) => {
-          if (typeof window !== 'undefined') {
-            window.localStorage.setItem(
-              'framer-active-embed',
-              detail.original.embed
-            );
-          }
-          activeEmbed = detail.original.embed;
-          // activeEmbedIndex = detail.original.index;
-        }}
-      />
-    </div>
+    {:else}
+      <div id="dropdown-container">
+        <div>
+          <div class="embed-link">
+            <a
+              rel="external"
+              target="_blank"
+              href={activeEmbed}
+              title={activeEmbed}
+            >
+              Live link <Fa icon={faLink} />
+            </a>
+          </div>
+        </div>
+        <Dropdown
+          data={embeds.map((embed, index) => ({
+            index,
+            embed,
+            title: embedTitles[index],
+          }))}
+          bind:selected={activeEmbed}
+        />
+      </div>
+    {/if}
 
     <div id="preview-label" style="width:{$width}px;">
       <p>Preview</p>
@@ -143,28 +171,29 @@ header {
   font-family: var(--theme-font-family-note);
 }
 
-div#typeahead-container {
+div#typeahead-container,
+div#dropdown-container {
   max-width: 660px;
   margin: 0 auto 15px;
   position: relative;
 }
-
-div#typeahead-container div.embed-link {
+div#typeahead-container div.embed-link,
+div#dropdown-container div.embed-link {
   position: absolute;
   top: 0;
   right: 0;
   display: inline-block;
   z-index: 2;
 }
-
-div#typeahead-container div.embed-link a {
+div#typeahead-container div.embed-link a,
+div#dropdown-container div.embed-link a {
   font-family: "Knowledge", "Source Sans Pro", Arial, sans-serif;
   color: #bbb;
   font-size: 12px;
   text-decoration: none !important;
 }
-
-div#typeahead-container div.embed-link a:hover {
+div#typeahead-container div.embed-link a:hover,
+div#dropdown-container div.embed-link a:hover {
   color: #666;
 }
 

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

@@ -3,6 +3,7 @@ interface Props {
     breakpoints?: number[];
     minFrameWidth?: number;
     maxFrameWidth?: number;
+    searchType?: 'dropdown' | 'typeahead';
 }
 declare const Framer: import("svelte").Component<Props, {}, "">;
 type Framer = ReturnType<typeof Framer>;

package/dist/components/Framer/Resizer/index.svelte

@@ -27,8 +27,7 @@
     if ($width > maxWidth) width.set(maxWidth);
   });
 
-  // svelte-ignore state_referenced_locally
-  let offset = $state(($width - minWidth) / pixelRange);
+  let offset = $derived(($width - minWidth) / pixelRange);
 
   let sliding = $state(false);
   let isFocused = $state(false);
@@ -55,7 +54,7 @@
     } else if (keyCode === 37) {
       offset = Math.max(0, offset - pixelWidth / sliderWidth);
     }
-    width.set(getPx());
+    $width = getPx();
   };
   const start = (e: MouseEvent) => {
     sliding = true;
@@ -77,17 +76,17 @@
       .filter((b) => b <= maxWidth)
       .filter((b) => b > $width);
     if (availableBreakpoints.length === 0) {
-      width.set(maxWidth);
+      $width = maxWidth;
     } else {
-      width.set(availableBreakpoints[0]);
+      $width = availableBreakpoints[0];
     }
   };
   const decrement = () => {
     const availableBreakpoints = breakpoints.filter((b) => b < $width);
     if (availableBreakpoints.length === 0) {
-      width.set(minWidth);
+      $width = minWidth;
     } else {
-      width.set(availableBreakpoints.slice(-1)[0]);
+      $width = availableBreakpoints.slice(-1)[0];
     }
   };
 </script>

package/dist/components/Framer/Typeahead/index.svelte

@@ -177,7 +177,6 @@
 
 <svelte:window
   onclick={({ target }) => {
-    console.log('HELLO', !comboboxRef?.contains(target as Node));
     if (!hideDropdown && !comboboxRef?.contains(target as Node)) {
       close();
     }

package/dist/components/ReferralBlock/ReferralBlock.svelte

@@ -67,6 +67,9 @@
   let referrals: Article[] = $state([]);
 
   const getReferrals = async () => {
+    if (typeof window === 'undefined') return;
+    // fetch only reliably works on prod sites
+    if (window?.location?.hostname !== 'www.reuters.com') return;
     const isCollection = Boolean(collection);
     const API = isCollection ? COLLECTION_API : SECTION_API;
     try {

package/dist/components/SEO/SEO.svelte

@@ -185,9 +185,11 @@
     <meta property="fb:admins" content="625796953" />
     <meta property="fb:admins" content="571759798" />
 
+    <!-- svelte-ignore hydration_html_changed -->
     {@html `<${'script'} type="application/ld+json">${JSON.stringify(
       orgLdJson
     )}</script>`}
+    <!-- svelte-ignore hydration_html_changed -->
     {@html `<${'script'} type="application/ld+json">${JSON.stringify(
       articleLdJson
     )}</script>`}

package/dist/components/SiteFooter/CompanyLinks.svelte

@@ -25,6 +25,11 @@
   }
 
   let { links = {} }: Props = $props();
+
+  const normaliseSocialName = (name: string) => {
+    if (name === 'twitter') return 'X';
+    return name;
+  };
 </script>
 
 {#if links.social_links}
@@ -42,7 +47,10 @@
               {@const SvelteComponent =
                 symbols[link.type as keyof typeof symbols]}
               <li class="social-links symbol">
-                <a href={normalizeUrl(link.url)}>
+                <a
+                  href={normalizeUrl(link.url)}
+                  aria-label="Visit Reuters on {normaliseSocialName(link.type)}"
+                >
                   <div class="button">
                     <div class="social">
                       <SvelteComponent />

package/dist/components/SiteHeader/MobileMenu/index.svelte

@@ -37,7 +37,11 @@
           textColour="var(--nav-primary)"
         />
       </div>
-      <button class="button close-button" onclick={releaseMobileMenu}>
+      <button
+        class="button close-button"
+        aria-label="Close menu"
+        onclick={releaseMobileMenu}
+      >
         <div class="button-container">
           <CloseIcon />
         </div>

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

@@ -69,7 +69,7 @@
   };
 </script>
 
-<div class="dropdown">
+<div class="dropdown" data-chromatic="ignore">
   <div class="dropdown-container">
     <div class="inner">
       <div class="submenu">
@@ -78,7 +78,7 @@
         </div>
       </div>
       <div class="stories-container">
-        <div class="inner" data-chromatic="ignore">
+        <div class="inner">
           {#if stories.length > 0}
             <span class="latest">{headingText}</span>
             <ul class="story-list">

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

@@ -66,7 +66,7 @@
               <a href={normalizeUrl(section.url)}>
                 {section.name}
               </a>
-              <button class="button">
+              <button class="button" aria-label="{section.name} menu">
                 <DownArrow rotate={section.id === $activeSection} />
               </button>
             </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",

package/dist/components/Framer/stories/docs/component.md

@@ -1,11 +0,0 @@
-An embed tool for development in the graphics kit.
-
-```svelte
-<script>
-  import { Framer } from '@reuters-graphics/graphics-components';
-
-  const embeds = ['/embeds/my-chart/index.html'];
-</script>
-
-<Framer embeds="{embeds}" />
-```