@reuters-graphics/graphics-components 1.0.15 → 1.0.17

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Add an ID to target with SCSS. */ id?: string;
+        /** Add a class to target with SCSS. */ class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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) */
+export default class SponsorshipAd extends SvelteComponentTyped<SponsorshipAdProps, SponsorshipAdEvents, SponsorshipAdSlots> {
+}
+export {};

package/dist/@types/components/AdSlot/adScripts/loadScript.d.ts

@@ -1 +1,6 @@
-export declare const loadScript: (src: string, onload?: () => void) => void;
+interface attributesInterface {
+    onload?: () => void;
+    async?: boolean;
+}
+export declare const loadScript: (src: string, attributes?: attributesInterface) => void;
+export {};

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

@@ -2,7 +2,6 @@ export { default as cssVariables } from "./actions/cssVariables/index.js";
 export { default as resizeObserver } from "./actions/resizeObserver/index.js";
 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";
@@ -17,6 +16,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";
@@ -33,6 +33,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 ToolsHeader } from "./components/ToolsHeader/ToolsHeader.svelte";
 export { default as Video } from "./components/Video/Video.svelte";

package/dist/components/AdSlot/AdScripts.svelte

@@ -8,8 +8,10 @@
     window.graphicsAdQueue = window.graphicsAdQueue || [];
     loadScript(
       'https://graphics.thomsonreuters.com/cdn/js/bootstrap.static.js',
-      loadBootstrap
+      { onload: loadBootstrap, async: false }
     );
+    // Load Freestar script
+    loadScript('https://a.pub.network/reuters-com/pubfig.min.js');
   });
 </script>
 

package/dist/components/AdSlot/SponsorshipAd.svelte

@@ -0,0 +1,68 @@
+<script>import Block from '../Block/Block.svelte';
+import ResponsiveAd from './ResponsiveAd.svelte';
+/** Add an ID to target with SCSS. */
+export let id = '';
+/** Add a class to target with SCSS. */
+let cls = 'my-12';
+export { cls as class };
+const 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>div.ad-block {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+div.ad-block 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-block div.ad-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 195px;
+  min-height: 24px;
+}
+div.ad-block div.ad-container div.ad-slot__inner {
+  margin: auto 0;
+  width: 100%;
+  max-width: 100%;
+  flex: unset;
+}
+div.ad-block div.ad-container div.ad-slot__inner > div {
+  display: block;
+}
+div.ad-block div.ad-container div.ad-slot__inner > div :global(div[data-freestar-ad]) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}</style>

package/dist/components/AdSlot/adScripts/bootstrap.js

@@ -1,6 +1,5 @@
 import getParameterByName from './getParameterByName';
 import Ias from './ias';
-import { loadScript } from './loadScript';
 const ONETRUST_LOGS = 'ot_logs';
 const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock';
 const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf-test';
@@ -32,8 +31,6 @@ export const loadBootstrap = () => {
         });
     });
     window.bootstrap.getResults((result) => {
-        // Load Freestar script
-        loadScript('https://a.pub.network/reuters-com/pubfig.min.js');
         // Set GAM
         window.googletag = window.googletag || { cmd: [] };
         window.googletag.cmd.push(() => {
@@ -54,9 +51,9 @@ export const loadBootstrap = () => {
                 window.googletag.pubads().setTargeting('adstest', adstest);
             }
             // Use the URL path to create a unique ID for the page.
-            const graphicId = window.location.pathname
-                .replace(/^\/(.*)\/$/, '$1')
-                .replaceAll('/', '-');
+            const graphicId = window.location.pathname.split('/')
+                // Get the first lowercase slug in the pathname, which is the graphic UID.
+                .filter(d => d.match(/[a-z0-9]+/) && d !== 'graphics')[0] || 'unknown-graphic';
             window.googletag.pubads().setTargeting('template', 'graphics');
             window.googletag.pubads().setTargeting('graphicId', graphicId);
         });

package/dist/components/AdSlot/adScripts/loadScript.js

@@ -1,6 +1,8 @@
-export const loadScript = (src, onload) => {
+export const loadScript = (src, attributes) => {
+    const { onload, async = true } = attributes || {};
     const script = document.createElement('script');
     script.addEventListener('load', onload);
+    script.async = async;
     script.src = src;
     document.head.append(script);
 };

package/dist/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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -140,6 +140,7 @@
     "./components/AdSlot/InlineAd.svelte": "./dist/components/AdSlot/InlineAd.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",
     "./components/AdSlot/adScripts/bootstrap.ts": "./dist/components/AdSlot/adScripts/bootstrap.ts",
     "./components/AdSlot/adScripts/getParameterByName.ts": "./dist/components/AdSlot/adScripts/getParameterByName.ts",
     "./components/AdSlot/adScripts/ias.ts": "./dist/components/AdSlot/adScripts/ias.ts",