@reuters-graphics/graphics-components 1.0.18 → 1.0.20

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Add an ID to target with SCSS. */ id?: string;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LeaderboardAdProps = typeof __propDef.props;
+export type LeaderboardAdEvents = typeof __propDef.events;
+export type LeaderboardAdSlots = typeof __propDef.slots;
+/** `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) */
+export default class LeaderboardAd extends SvelteComponentTyped<LeaderboardAdProps, LeaderboardAdEvents, LeaderboardAdSlots> {
+}
+export {};

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

@@ -3,6 +3,9 @@ declare const __propDef: {
     props: {
         /** Add an ID to target with SCSS. */ id?: string;
         /** Add a class to target with SCSS. */ class?: string;
+        /**
+           * Label placed directly above the sponsorship ad
+           */ adLabel?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -12,7 +15,7 @@ declare const __propDef: {
 export type SponsorshipAdProps = typeof __propDef.props;
 export type SponsorshipAdEvents = typeof __propDef.events;
 export type SponsorshipAdSlots = typeof __propDef.slots;
-/** `SponsorshipeAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) */
+/** `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) */
 export default class SponsorshipAd extends SvelteComponentTyped<SponsorshipAdProps, SponsorshipAdEvents, SponsorshipAdSlots> {
 }
 export {};

package/dist/@types/index.d.ts

@@ -17,6 +17,7 @@ export { default as HeroHeadline } from "./components/HeroHeadline/Hero.svelte";
 export { default as EndNotes } from "./components/EndNotes/EndNotes.svelte";
 export { default as InfoBox } from "./components/InfoBox/InfoBox.svelte";
 export { default as InlineAd } from "./components/AdSlot/InlineAd.svelte";
+export { default as LeaderboardAd } from "./components/AdSlot/LeaderboardAd.svelte";
 export { default as Markdown } from "./components/Markdown/Markdown.svelte";
 export { default as PaddingReset } from "./components/PaddingReset/PaddingReset.svelte";
 export { default as PhotoCarousel } from "./components/PhotoCarousel/PhotoCarousel.svelte";

package/dist/components/AdSlot/LeaderboardAd.svelte

@@ -0,0 +1,53 @@
+<script>import ResponsiveAd from './ResponsiveAd.svelte';
+/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+export let cls = '';
+export { cls as class };
+let windowWidth = 1200;
+$: adSize = windowWidth < 1024 ? 110 : 275;
+const desktopPlacementName = 'reuters_desktop_leaderboard_atf';
+</script>
+
+<svelte:window bind:innerWidth="{windowWidth}" />
+
+<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-LeaderboardAd--default) -->
+<div class="leaderboard__sticky {cls}" id="{id}" style="--height: {adSize}px;">
+  <div class="ad-block">
+    <div class="ad-slot__container">
+      <div class="ad-slot__inner">
+        <div>
+          <ResponsiveAd desktopPlacementName="{desktopPlacementName}" />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>.leaderboard__sticky {
+  position: sticky;
+  position: initial;
+  top: 0;
+  transition: top 0.8s ease-in-out;
+  z-index: 1030;
+}
+
+div.ad-block {
+  width: 100%;
+  background: #f4f4f4;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  min-height: var(--height);
+}
+div.ad-block .ad-slot__container {
+  min-height: var(--height);
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+div.ad-block .ad-slot__container .ad-slot__inner {
+  height: 100%;
+  max-width: 100%;
+}</style>

package/dist/components/AdSlot/SponsorshipAd.svelte

@@ -5,15 +5,21 @@ export let id = '';
 /** Add a class to target with SCSS. */
 let cls = 'my-12';
 export { cls as class };
+/**
+ * Label placed directly above the sponsorship ad
+ */
+export let adLabel = '';
 const desktopPlacementName = 'reuters_sponsorlogo';
 </script>
 
-<!-- @component `SponsorshipeAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
+<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SponsorshipAd--default) -->
 <Block id="{id}" class="freestar-adslot {cls}">
   <div class="ad-block">
-    <div class="ad-label">
-      <div>Today's Sponsor</div>
-    </div>
+    {#if adLabel}
+      <div class="ad-label">
+        <div>{adLabel}</div>
+      </div>
+    {/if}
     <div class="ad-container">
       <div class="ad-slot__inner">
         <div>

package/dist/components/Block/Block.svelte

@@ -52,7 +52,7 @@ https://utopia.fyi/space/calculator/?c=320,18,1.125,1280,21,1.25,7,3,&s=0.75|0.5
 }
 .article-block.fluid {
   width: calc(100% + 30px);
-  margin-left: -15px;
+  margin-inline-start: -15px;
   max-width: none;
 }
 .article-block.snap {

package/dist/index.js

@@ -24,6 +24,7 @@ export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
+export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
 export { default as Markdown } from './components/Markdown/Markdown.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -138,6 +138,7 @@
     "./components/AdSlot/AdScripts.svelte": "./dist/components/AdSlot/AdScripts.svelte",
     "./components/AdSlot/AdSlot.svelte": "./dist/components/AdSlot/AdSlot.svelte",
     "./components/AdSlot/InlineAd.svelte": "./dist/components/AdSlot/InlineAd.svelte",
+    "./components/AdSlot/LeaderboardAd.svelte": "./dist/components/AdSlot/LeaderboardAd.svelte",
     "./components/AdSlot/OneTrust.svelte": "./dist/components/AdSlot/OneTrust.svelte",
     "./components/AdSlot/ResponsiveAd.svelte": "./dist/components/AdSlot/ResponsiveAd.svelte",
     "./components/AdSlot/SponsorshipAd.svelte": "./dist/components/AdSlot/SponsorshipAd.svelte",