Merge pull request #291 from reuters-graphics/jon-fixes

Fixes for Ad types and Framer Resizer

.changeset/shaky-colts-dress.md

@@ -0,0 +1,5 @@
+---
+'@reuters-graphics/graphics-components': patch
+---
+
+fixes for Ad types that were colliding with their component names and a bug in the Framer Resizer

src/components/AdSlot/@types/ads.ts

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

src/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}">

src/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);

src/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>
 

src/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>

src/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}" />
-```