diff --git a/src/components/AdSlot/InlineAd.stories.svelte b/src/components/AdSlot/InlineAd.stories.svelte index a0f04095..56d38cfe 100644 --- a/src/components/AdSlot/InlineAd.stories.svelte +++ b/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), }; diff --git a/src/components/AdSlot/SponsorshipAd.stories.svelte b/src/components/AdSlot/SponsorshipAd.stories.svelte new file mode 100644 index 00000000..32375c27 --- /dev/null +++ b/src/components/AdSlot/SponsorshipAd.stories.svelte @@ -0,0 +1,28 @@ + + + + + + + diff --git a/src/components/AdSlot/SponsorshipAd.svelte b/src/components/AdSlot/SponsorshipAd.svelte new file mode 100644 index 00000000..d4235c1a --- /dev/null +++ b/src/components/AdSlot/SponsorshipAd.svelte @@ -0,0 +1,75 @@ + + + + +
+
+
Today's Sponsor
+
+
+
+
+ +
+
+
+
+
+ + diff --git a/src/components/AdSlot/stories/docs/component.md b/src/components/AdSlot/stories/docs/inline.md similarity index 91% rename from src/components/AdSlot/stories/docs/component.md rename to src/components/AdSlot/stories/docs/inline.md index 4be666d0..0e868de8 100644 --- a/src/components/AdSlot/stories/docs/component.md +++ b/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. diff --git a/src/components/AdSlot/stories/docs/sponsorship.md b/src/components/AdSlot/stories/docs/sponsorship.md new file mode 100644 index 00000000..1ee2a424 --- /dev/null +++ b/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 + + + +{#if !embedded} + + +{/if} + + + +{#if !embedded} + +{/if} +``` diff --git a/src/index.js b/src/index.js index 3e7156d4..88c7d5e1 100644 --- a/src/index.js +++ b/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,