Merge pull request #618 from Financial-Times/ADSDEV-924_add_ads_to_li…

…ve_blogs ADSDEV-924 Insert ads into live blogs
Financial-Times · Oct 14, 2021 · 0d6ab16 · 0d6ab16
2 parents 011cb5b + 75d3597
commit 0d6ab16
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 5 deletions.
diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx
@@ -16,7 +16,8 @@ const LiveBlogPost = (props) => {
 		standout = {},
 		articleUrl,
 		showShareButtons = false,
-		byline
+		byline,
+		ad
 	} = props
 
 	const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
@@ -26,7 +27,8 @@ const LiveBlogPost = (props) => {
 			className={`live-blog-post ${styles['live-blog-post']}`}
 			data-trackable="live-post"
 			id={`post-${id || postId}`}
-			data-x-component="live-blog-post">
+			data-x-component="live-blog-post"
+		>
 			<div className="live-blog-post__meta">
 				<Timestamp publishedTimestamp={publishedDate || publishedTimestamp} />
 			</div>
@@ -38,6 +40,7 @@ const LiveBlogPost = (props) => {
 				dangerouslySetInnerHTML={{ __html: bodyHTML || content }}
 			/>
 			{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
+			{ad}
 		</article>
 	)
 }

diff --git a/components/x-live-blog-wrapper/src/LiveBlogWrapper.jsx b/components/x-live-blog-wrapper/src/LiveBlogWrapper.jsx
@@ -20,7 +20,14 @@ const withLiveBlogWrapperActions = withActions({
 	}
 })
 
-const BaseLiveBlogWrapper = ({ posts = [], articleUrl, showShareButtons, id, liveBlogWrapperElementRef }) => {
+const BaseLiveBlogWrapper = ({
+	posts = [],
+	ads = {},
+	articleUrl,
+	showShareButtons,
+	id,
+	liveBlogWrapperElementRef
+}) => {
 	posts.sort((a, b) => {
 		const timestampA = a.publishedDate || a.publishedTimestamp
 		const timestampB = b.publishedDate || b.publishedTimestamp
@@ -37,12 +44,13 @@ const BaseLiveBlogWrapper = ({ posts = [], articleUrl, showShareButtons, id, liv
 		return 0
 	})
 
-	const postElements = posts.map((post) => (
+	const postElements = posts.map((post, index) => (
 		<LiveBlogPost
 			key={`live-blog-post-${post.id}`}
 			{...post}
 			articleUrl={articleUrl}
 			showShareButtons={showShareButtons}
+			ad={ads[index]}
 		/>
 	))
 

diff --git a/components/x-live-blog-wrapper/src/__tests__/LiveBlogWrapper.test.jsx b/components/x-live-blog-wrapper/src/__tests__/LiveBlogWrapper.test.jsx
@@ -26,6 +26,14 @@ const post2 = {
 	showShareButtons: true
 }
 
+const ads = {
+	1: (
+		<div className="o-ads" data-o-ads-name="mid1">
+			Ads
+		</div>
+	)
+}
+
 describe('x-live-blog-wrapper', () => {
 	it('has a displayName', () => {
 		expect(LiveBlogWrapper.displayName).toContain('BaseLiveBlogWrapper')
@@ -49,6 +57,15 @@ describe('x-live-blog-wrapper', () => {
 		expect(articles.at(0).html()).toContain('Post 2 Title')
 		expect(articles.at(1).html()).toContain('Post 1 Title')
 	})
+
+	it('renders an ad slot element at the given position', () => {
+		const posts = [post1, post2]
+		const liveBlogWrapper = mount(<LiveBlogWrapper posts={posts} ads={ads} />)
+
+		const articles = liveBlogWrapper.find('article')
+		expect(articles.at(0).html()).not.toContain('Ads')
+		expect(articles.at(1).html()).toContain('Ads')
+	})
 })
 
 describe('liveBlogWrapperActions', () => {

diff --git a/components/x-live-blog-wrapper/storybook/index.jsx b/components/x-live-blog-wrapper/storybook/index.jsx
@@ -2,6 +2,37 @@ import React from 'react'
 import { LiveBlogWrapper } from '../src/LiveBlogWrapper'
 import '../../x-live-blog-post/dist/LiveBlogPost.css'
 
+const Ad = (props) => {
+	const {
+		slotName,
+		targeting,
+		defaultFormat = 'false',
+		small = 'false',
+		medium = 'false',
+		large = 'false',
+		extra = 'false',
+		alignment = 'center'
+	} = props
+
+	const classes = `o-ads o-ads--${alignment} o-ads--transition`
+
+	return (
+		<div
+			data-o-ads-name={slotName}
+			data-o-ads-targeting={targeting}
+			data-o-ads-formats-default={defaultFormat}
+			data-o-ads-formats-small={small}
+			data-o-ads-formats-medium={medium}
+			data-o-ads-formats-large={large}
+			data-o-ads-formats-extra={extra}
+			data-o-ads-label="true"
+			aria-hidden="true"
+			tabIndex="-1"
+			className={classes}
+		/>
+	)
+}
+
 const defaultProps = {
 	message: 'Test',
 	posts: [
@@ -32,7 +63,11 @@ const defaultProps = {
 			articleUrl: 'https://www.ft.com/content/2b665ec7-a88f-3998-8f39-5371f9c791ed',
 			showShareButtons: true
 		}
-	]
+	],
+	ads: {
+		1: <Ad />,
+		2: <Ad />
+	}
 }
 
 export default {