ADSDEV-924 Add ads as children of LiveBlogPost article

Financial-Times · Oct 5, 2021 · b11a15a · b11a15a
1 parent e1307c4
commit b11a15a
Show file tree

Hide file tree

Showing 3 changed files with 51 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/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 {