Merge pull request #153 from reuters-graphics/leaderboard-ad

Leaderboard ad

src/components/AdSlot/LeaderboardAd.stories.svelte

@@ -0,0 +1,28 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import adDocs from './stories/docs/leaderboard.md?raw';
+
+  import AdScripts from './AdScripts.svelte';
+  import LeaderboardAd from './LeaderboardAd.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/LeaderboardAd',
+    component: LeaderboardAd,
+    ...withComponentDocs(adDocs),
+  };
+</script>
+
+<Meta title="Components/LeaderboardAd" {...meta} />
+
+<Template let:args>
+  <div>
+    <AdScripts />
+    <LeaderboardAd />
+  </div>
+</Template>
+
+<Story name="Default" />

src/components/AdSlot/LeaderboardAd.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { DesktopPlacementName } from './@types/ads';
+  import ResponsiveAd from './ResponsiveAd.svelte';
+
+  /** Add an ID to target with SCSS. */
+  export let id: string = '';
+
+  /** Add a class to target with SCSS. */
+  export let cls: string = '';
+  export { cls as class };
+
+  let windowWidth = 1200;
+  $: adSize = windowWidth < 1024 ? 110 : 275;
+
+  const desktopPlacementName: 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 lang="scss">
+  .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);
+    .ad-slot__container {
+      min-height: var(--height);
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      .ad-slot__inner {
+        height: 100%;
+        max-width: 100%;
+      }
+    }
+  }
+</style>

src/components/AdSlot/SponsorshipAd.svelte

@@ -10,15 +10,22 @@
   let cls: string = 'my-12';
   export { cls as class };
 
+  /**
+   * Label placed directly above the sponsorship ad
+   */
+  export let adLabel = '';
+
   const desktopPlacementName: 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>

src/components/AdSlot/stories/docs/leaderboard.md

@@ -0,0 +1,28 @@
+Add a leaderboard ad to your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import {
+    AdScripts,
+    LeaderboardAd,
+    SiteHeader,
+  } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- ALWAYS check if in an embed context! -->
+{#if !embedded}
+  <!-- Include AdScripts only ONCE per page -->
+  <AdScripts />
+{/if}
+
+<!-- ... -->
+
+{#if !embedded}
+  <!-- ALWAYS put the leaderboard ad directly above the SiteHeader -->
+  <SponsorshipAd />
+  <SiteHeader />
+{/if}
+```

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