AB#668532 - feat: Implement Dianomi Sponsor Module

docs/project.json

@@ -1 +1 @@
-{"generatedAt":1727177987669,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{},"packageManager":{"type":"npm","version":"10.8.2"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/svelte-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/svelte","storybookVersion":"8.2.9","storybookVersionSpecifier":"^8.2.9","language":"typescript","storybookPackages":{"@storybook/addon-essentials":{"version":"8.2.9"},"@storybook/addon-mdx-gfm":{"version":"8.2.9"},"@storybook/blocks":{"version":"8.2.9"},"@storybook/builder-vite":{"version":"8.2.9"},"@storybook/components":{"version":"8.2.9"},"@storybook/manager-api":{"version":"8.2.9"},"@storybook/mdx2-csf":{"version":"1.1.0"},"@storybook/svelte":{"version":"8.2.9"},"@storybook/svelte-vite":{"version":"8.2.9"},"@storybook/test":{"version":"8.2.9"},"@storybook/theming":{"version":"8.2.9"},"storybook":{"version":"8.2.9"}},"addons":{"@storybook/addon-svelte-csf":{"version":"4.1.5"},"@storybook/addon-links":{"version":"8.2.9"},"@storybook/addon-actions":{"version":"8.2.9"},"@storybook/addon-viewport":{"version":"8.2.9"},"@storybook/addon-docs":{"version":"8.2.9"},"@storybook/addon-controls":{"version":"8.2.9"},"@storybook/addon-backgrounds":{"version":"8.2.9"},"@storybook/addon-toolbars":{"version":"8.2.9"},"@storybook/addon-measure":{"version":"8.2.9"},"@storybook/addon-outline":{"version":"8.2.9"},"@storybook/addon-interactions":{"version":"8.2.9"},"@chromatic-com/storybook":{"version":"1.7.0"},"chromatic":{"version":null,"versionSpecifier":"^7.1.0"}}}
+{"generatedAt":1729247024480,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"testPackages":{},"packageManager":{"type":"npm","version":"10.8.3"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/svelte-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/svelte","storybookVersion":"8.2.9","storybookVersionSpecifier":"^8.2.9","language":"typescript","storybookPackages":{"@storybook/addon-essentials":{"version":"8.2.9"},"@storybook/addon-mdx-gfm":{"version":"8.2.9"},"@storybook/blocks":{"version":"8.2.9"},"@storybook/builder-vite":{"version":"8.2.9"},"@storybook/components":{"version":"8.2.9"},"@storybook/manager-api":{"version":"8.2.9"},"@storybook/mdx2-csf":{"version":"1.1.0"},"@storybook/svelte":{"version":"8.2.9"},"@storybook/svelte-vite":{"version":"8.2.9"},"@storybook/test":{"version":"8.2.9"},"@storybook/theming":{"version":"8.2.9"},"storybook":{"version":"8.2.9"}},"addons":{"@storybook/addon-svelte-csf":{"version":"4.1.5"},"@storybook/addon-links":{"version":"8.2.9"},"@storybook/addon-actions":{"version":"8.2.9"},"@storybook/addon-viewport":{"version":"8.2.9"},"@storybook/addon-docs":{"version":"8.2.9"},"@storybook/addon-controls":{"version":"8.2.9"},"@storybook/addon-backgrounds":{"version":"8.2.9"},"@storybook/addon-toolbars":{"version":"8.2.9"},"@storybook/addon-measure":{"version":"8.2.9"},"@storybook/addon-outline":{"version":"8.2.9"},"@storybook/addon-interactions":{"version":"8.2.9"},"@chromatic-com/storybook":{"version":"1.7.0"},"chromatic":{"version":null,"versionSpecifier":"^7.1.0"}}}

src/components/Dianomi/DianomiAd.stories.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Story, Meta } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore raw
+  import adDocs from './stories/docs/dianomi.md?raw';
+
+  import DianomiAd from './DianomiAd.svelte';
+
+  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
+
+  const meta = {
+    ...withComponentDocs(adDocs),
+  };
+</script>
+
+<Meta title="Components/DianomiAd" component="{DianomiAd}" {...meta} />
+
+<Story name="Default">
+  <DianomiAd />
+</Story>

src/components/Dianomi/DianomiAd.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { onMount } from 'svelte';
+  onMount(() => {
+    const script = document.createElement('script');
+    script.src = 'https://www.dianomi.com/js/contextfeed.js';
+    script.id = 'dianomi_context_script';
+    document.head.appendChild(script);
+  });
+</script>
+
+<div class="dianomi_context" data-dianomi-context-id="1948"></div>

src/components/Dianomi/stories/docs/dianomi.md

@@ -0,0 +1,19 @@
+Add a dianomi ad to your page.
+
+Dianomi sponsor module appears above the footer on Graphics pages in the same placement using the same tag as Topic pages.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { DianomiAd } from '@reuters-graphics/graphics-components';
+
+  export let embedded = false;
+</script>
+
+<!-- Check if in an embed context! -->
+{#if !embedded}
+  <DianomiAd />
+{/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 DianomiAd } from './components/Dianomi/DianomiAd.svelte';
 
 // Utilities
 export { getEndNotesPropsFromDoc } from './components/EndNotes/docProps.js';