Merge pull request #149 from reuters-graphics/jon-ads

Sponsorship ad

src/components/AdSlot/InlineAd.stories.svelte

@@ -2,7 +2,7 @@
   import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
 
   // @ts-ignore
-  import componentDocs from './stories/docs/component.md?raw';
+  import adDocs from './stories/docs/inline.md?raw';
 
   import AdScripts from './AdScripts.svelte';
   import InlineAd from './InlineAd.svelte';
@@ -12,7 +12,7 @@
   const meta = {
     title: 'Components/InlineAd',
     component: InlineAd,
-    ...withComponentDocs(componentDocs),
+    ...withComponentDocs(adDocs),
   };
 </script>
 

src/components/AdSlot/SponsorshipAd.stories.svelte

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

src/components/AdSlot/SponsorshipAd.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  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. */
+  let cls: string = 'my-12';
+  export { cls as class };
+
+  const desktopPlacementName: DesktopPlacementName = 'reuters_sponsorlogo';
+</script>
+
+<!-- @component `SponsorshipeAd` [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>
+    <div class="ad-container">
+      <div class="ad-slot__inner">
+        <div>
+          <ResponsiveAd desktopPlacementName="{desktopPlacementName}" />
+        </div>
+      </div>
+    </div>
+  </div>
+</Block>
+
+<style lang="scss">
+  div.ad-block {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    div.ad-label {
+      font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif;
+      font-size: 12px;
+      margin: 0;
+      line-height: 1.333;
+      color: var(--theme-colour-text-secondary);
+      text-align: right;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      justify-items: center;
+    }
+    div.ad-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 195px;
+      min-height: 24px;
+      div.ad-slot__inner {
+        margin: auto 0;
+        width: 100%;
+        max-width: 100%;
+        flex: unset;
+        & > div {
+          display: block;
+          :global(div[data-freestar-ad]) {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+</style>

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

@@ -1,4 +1,4 @@
-Add programmatic ads to your page.
+Add programmatic ads inline on your page.
 
 > **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
 

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

@@ -0,0 +1,24 @@
+Add a sponsorship ad to your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<script>
+  import {
+    SponsorshipAd,
+    AdScripts,
+  } 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}
+  <SponsorshipAd />
+{/if}
+```

src/index.js

@@ -9,7 +9,6 @@ export {
 } from './components/Analytics/Analytics.svelte';
 export { default as Article } from './components/Article/Article.svelte';
 export { default as AdScripts } from './components/AdSlot/AdScripts.svelte';
-export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
 export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
@@ -24,6 +23,7 @@ export { default as Headline } from './components/Headline/Headline.svelte';
 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 PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
@@ -40,6 +40,7 @@ export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte';
 export { default as Table } from './components/Table/Table.svelte';
 export {
   default as Theme,