@reuters-graphics/graphics-components 1.1.1 → 1.1.3

package/dist/components/AdSlot/AdSlot.svelte

@@ -34,3 +34,9 @@ onMount(() => {
 </script>
 
 <div data-freestar-ad="{dataFreestarAd || null}" id="{adId}"></div>
+
+<style>
+  :global(div.freestar-adslot:has(.unfulfilled-ad)) {
+    display: none;
+  }
+</style>

package/dist/components/AdSlot/LeaderboardAd.svelte

@@ -33,7 +33,7 @@ onMount(() => {
 <svelte:window bind:innerWidth="{windowWidth}" />
 
 <div
-  class="leaderboard__sticky {cls}"
+  class="freestar-adslot leaderboard__sticky {cls}"
   class:sticky
   class:unstick
   {id}

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

@@ -45,6 +45,20 @@ export const loadBootstrap = () => {
             // @ts-ignore window global
             window.googletag.pubads().enableAsyncRendering();
             window.googletag.pubads().collapseEmptyDivs(true);
+            window.googletag
+                .pubads()
+                .addEventListener('slotRenderEnded', function (event) {
+                const adDiv = document.getElementById(event.slot.getSlotElementId());
+                if (!adDiv)
+                    return;
+                // If the ad slot is empty
+                if (event.isEmpty) {
+                    adDiv.classList.add('unfulfilled-ad');
+                }
+                else {
+                    adDiv.classList.remove('unfulfilled-ad');
+                }
+            });
         });
         // Set page-level key-values
         // cf: https://help.freestar.com/help/using-key-values

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte

@@ -3,7 +3,6 @@
   import { getTime } from './time';
 
   export let story;
-  export let withSection = false;
 
   $: thumbnail = story.thumbnail;
 </script>
@@ -11,17 +10,8 @@
 <div class="story-card">
   <a href="{normalizeUrl(story.canonical_url)}">
     <div class="story-text" class:has-thumbnail="{thumbnail}">
-      {#if withSection}
-        <a href="{normalizeUrl(story.primary_section.id)}">
-          <span class="label">{story.primary_section.name}</span>
-        </a>
-      {/if}
       <span>{story.title}</span>
-      {#if !withSection}
-        <time datetime="{story.display_time}"
-          >{getTime(story.display_time)}</time
-        >
-      {/if}
+      <time datetime="{story.display_time}">{getTime(story.display_time)}</time>
     </div>
     {#if thumbnail}
       <div class="thumbnail">

package/dist/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte.d.ts

@@ -3,7 +3,6 @@
 /** @typedef {typeof __propDef.slots}  IndexSlots */
 export default class Index extends SvelteComponent<{
     story: any;
-    withSection?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}> {
@@ -15,7 +14,6 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         story: any;
-        withSection?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/SiteHeader/NavBar/NavDropdown/index.svelte

@@ -63,10 +63,7 @@
             <ul class="story-list">
               {#each stories as story}
                 <li class="story-item">
-                  <StoryCard
-                    {story}
-                    withSection="{$activeSection === 'more'}"
-                  />
+                  <StoryCard {story} />
                 </li>
               {/each}
             </ul>

package/dist/docs/styles/intro.mdx

@@ -18,6 +18,6 @@ Import the SCSS directly in your top-level component. (This is done for you in t
 <script>
   // other imports and stuffs ...
 
-  import '@reuters-graphics/graphics-components/scss/main';
+  import '@reuters-graphics/graphics-components/scss/main.scss';
 </script>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",