From 5aa129f2b66c63abc2ab9bb621b32220e5ea205a Mon Sep 17 00:00:00 2001 From: Arjun Gadhia Date: Mon, 7 Nov 2022 15:12:30 +0000 Subject: [PATCH] feat: support cp-content-pipeline liveblog posts Allow x-live-blog-post to handle posts coming from the new cp-content-pipeline-api, where body and byline are structured ASTs --- components/x-live-blog-post/package.json | 1 + components/x-live-blog-post/readme.md | 5 +- .../x-live-blog-post/src/LiveBlogPost.jsx | 43 +++++++++--- .../src/__tests__/LiveBlogPost.test.jsx | 69 +++++++++++++++++++ 4 files changed, 106 insertions(+), 12 deletions(-) diff --git a/components/x-live-blog-post/package.json b/components/x-live-blog-post/package.json index 9ecd2439e..ebd2d472d 100644 --- a/components/x-live-blog-post/package.json +++ b/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": { diff --git a/components/x-live-blog-post/readme.md b/components/x-live-blog-post/readme.md index b3d189401..81224ce73 100644 --- a/components/x-live-blog-post/readme.md +++ b/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 diff --git a/components/x-live-blog-post/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx index 7157156c4..73b402136 100644 --- a/components/x-live-blog-post/src/LiveBlogPost.jsx +++ b/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 ( - ) @@ -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 = ( +
+ +
+ ) + } else { + // Content comes from next-es or wordpress + postBody = ( +
+ ) + } + if (typeof byline === 'object' && 'tree' in byline) { + postByline = ( +

+ +

+ ) + } else if (typeof byline === 'string') { + postByline =

{byline}

+ } return (
{showBreakingNewsLabel &&
Breaking news
} {title &&

{title}

} - {byline &&

{byline}

} -
+ {postByline} + {postBody}
{showShareButtons && } diff --git a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx b/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx index fbba828f1..a37066eca 100644 --- a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx +++ b/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() + expect(liveBlogPost.html()).toContain('Test title') + }) + + it('renders the byline', () => { + const liveBlogPost = mount() + expect(liveBlogPost.html()).toContain('Joshua Franklin in New York

') + }) + + it('renders the body', () => { + const liveBlogPost = mount() + expect(liveBlogPost.html()).toContain('class="x-live-blog-post__body') + expect(liveBlogPost.html()).toContain('

structured live blog body

') + }) + }) + it('adds a data-x-component attribute', () => { const liveBlogPost = mount()