Merge pull request #679 from Financial-Times/live-blog-post-coombined

feat: support cp-content-pipeline liveblog posts

components/x-live-blog-post/package.json

@@ -17,6 +17,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@financial-times/cp-content-pipeline-ui": "^0.3.6",
     "@financial-times/x-engine": "file:../../packages/x-engine"
   },
   "devDependencies": {

components/x-live-blog-post/readme.md

@@ -44,8 +44,9 @@ Feature             | Type   | Notes
 `id`                | String | Unique id to reference the content
 `postId`            | String | Deprecated - Unique id to reference the content
 `title`             | String | Title of the content
-`bodyHTML`          | String | Body of the content
-`byline`            | String | Byline for the post, sometimes used to render the author's name.
+`bodyHTML`          | String | Body of the content, if data is from next elasticsearch
+`body`              | Object | Structured Body of the content, if data is from cp-content-pipeline-api
+`byline`            | String or Object | Byline for the post, sometimes used to render the author's name. Will be an object if data is from cp-content-pipeline-api
 `content`           | String | Deprecated - Body of the content
 `isBreakingNews`    | Bool   | When `true` displays "breaking news" tag
 `publishedDate`     | String | ISO timestamp of publish date

components/x-live-blog-post/src/LiveBlogPost.jsx

@@ -1,6 +1,7 @@
 import { h } from '@financial-times/x-engine'
 import ShareButtons from './ShareButtons'
 import Timestamp from './Timestamp'
+import { RichText } from '@financial-times/cp-content-pipeline-ui'
 
 /**
  * Triggers a page scroll depending on what the type of `backToTop` is.
@@ -25,10 +26,7 @@ function BackToTop({ backToTop }) {
 
 	if (typeof backToTop === 'function') {
 		return (
-			<button
-				onClick={backToTop}
-				className="x-live-blog-post-controls__back-to-top-button"
-			>
+			<button onClick={backToTop} className="x-live-blog-post-controls__back-to-top-button">
 				Back to top
 			</button>
 		)
@@ -40,7 +38,8 @@ const LiveBlogPost = ({
 	postId, // Remove once wordpress is no longer in use
 	title,
 	content, // Remove once wordpress is no longer in use
-	bodyHTML,
+	bodyHTML, //ElasticSearch
+	body, // cp-content-pipeline
 	publishedTimestamp, // Remove once wordpress is no longer in use
 	publishedDate,
 	isBreakingNews, // Remove once wordpress is no longer in use
@@ -53,6 +52,33 @@ const LiveBlogPost = ({
 }) => {
 	const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
 
+	let postBody, postByline
+
+	if (body && 'structured' in body) {
+		// Content comes from cp-content-pipeline-api
+		postBody = (
+			<div className="x-live-blog-post__body n-content-body article--body">
+				<RichText structuredContent={body.structured} />
+			</div>
+		)
+	} else {
+		// Content comes from next-es or wordpress
+		postBody = (
+			<div
+				className="x-live-blog-post__body n-content-body article--body"
+				dangerouslySetInnerHTML={{ __html: bodyHTML || content }}
+			/>
+		)
+	}
+	if (typeof byline === 'object' && 'tree' in byline) {
+		postByline = (
+			<p className="x-live-blog-post__byline">
+				<RichText structuredContent={byline} />
+			</p>
+		)
+	} else if (typeof byline === 'string') {
+		postByline = <p className="x-live-blog-post__byline">{byline}</p>
+	}
 	return (
 		<article
 			className="x-live-blog-post"
@@ -65,11 +91,8 @@ const LiveBlogPost = ({
 			</div>
 			{showBreakingNewsLabel && <div className="x-live-blog-post__breaking-news">Breaking news</div>}
 			{title && <h2 className="x-live-blog-post__title">{title}</h2>}
-			{byline && <p className="x-live-blog-post__byline">{byline}</p>}
-			<div
-				className="x-live-blog-post__body n-content-body article--body"
-				dangerouslySetInnerHTML={{ __html: bodyHTML || content }}
-			/>
+			{postByline}
+			{postBody}
 			<div className="x-live-blog-post__controls">
 				{showShareButtons && <ShareButtons postId={id || postId} articleUrl={articleUrl} title={title} />}
 				<BackToTop backToTop={backToTop} />

components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx

@@ -47,6 +47,57 @@ const regularPostSpark = {
 	showShareButtons: true
 }
 
+const regularPostContentPipeline = {
+	id: '12345',
+	title: 'Test title',
+	byline: {
+		tree: {
+			type: 'root',
+			children: [
+				{
+					type: 'element',
+					tagName: 'AuthorLink',
+					properties: {
+						href: 'https://www.ft.com/stream/uuid/533620c9-ef05-4d69-8e1f-a338fba24ee5'
+					},
+					children: [
+						{
+							type: 'text',
+							value: 'Joshua Franklin'
+						}
+					]
+				},
+				{
+					type: 'text',
+					value: ' in New York'
+				}
+			]
+		}
+	},
+	body: {
+		structured: {
+			tree: {
+				type: 'root',
+				children: [
+					{
+						type: 'element',
+						tagName: 'Paragraph',
+						children: [
+							{
+								type: 'text',
+								value: 'structured live blog body'
+							}
+						]
+					}
+				]
+			}
+		}
+	},
+	publishedDate: new Date().toISOString(),
+	articleUrl: 'Https://www.ft.com',
+	showShareButtons: true
+}
+
 const backToTopPostSpark = {
 	id: '12345',
 	title: 'Test title',
@@ -185,6 +236,24 @@ describe('x-live-blog-post', () => {
 		})
 	})
 
+	describe('cp-content-pipeline-api', () => {
+		it('renders the title', () => {
+			const liveBlogPost = mount(<LiveBlogPost {...regularPostContentPipeline} />)
+			expect(liveBlogPost.html()).toContain('Test title')
+		})
+
+		it('renders the byline', () => {
+			const liveBlogPost = mount(<LiveBlogPost {...regularPostContentPipeline} />)
+			expect(liveBlogPost.html()).toContain('Joshua Franklin</a> in New York</p>')
+		})
+
+		it('renders the body', () => {
+			const liveBlogPost = mount(<LiveBlogPost {...regularPostContentPipeline} />)
+			expect(liveBlogPost.html()).toContain('class="x-live-blog-post__body')
+			expect(liveBlogPost.html()).toContain('<p>structured live blog body</p>')
+		})
+	})
+
 	it('adds a data-x-component attribute', () => {
 		const liveBlogPost = mount(<LiveBlogPost {...regularPostSpark} />)