Feat/wunderkind smart tag

src/components/AdSlot/WunderkindAd.stories.svelte

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

src/components/AdSlot/WunderkindAd.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  onMount(() => {
+    // Check user login status
+    let isLoggedIn = localStorage.getItem('ArcId.USER_PROFILE') !== null;
+    if (!isLoggedIn) {
+      const script = document.createElement('script');
+      script.textContent = `
+      freestar.config.enabled_slots.push({
+        placementName: 'reuters_1x1_bouncex',
+        slotId: 'reuters_1x1_bouncex',
+      });
+    `;
+      script.setAttribute('data-cfasync', 'false');
+      script.type = 'text/javascript';
+      document.head.appendChild(script);
+    }
+  });
+</script>
+
+<div id="reuters_1x1_bouncex"></div>

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

@@ -0,0 +1,27 @@
+Add a wunderkind ad to your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import { AdScripts } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { WunderkindAd } from '@reuters-graphics/graphics-components';
+
+  export let embedded = false;
+</script>
+
+<!-- Check if in an embed context! -->
+{#if !embedded}
+  <WunderkindAd />
+{/if}
+```

src/index.js

@@ -49,6 +49,7 @@ export { default as Theme, themes } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
+export { default as WunderkindAd } from './components/AdSlot/WunderkindAd.svelte';
 
 // Utilities
 export { getEndNotesPropsFromDoc } from './components/EndNotes/docProps.js';