From 14f3513a1427b7acb96ef459f6ae489953b2cdac Mon Sep 17 00:00:00 2001 From: Kara Brightwell Date: Tue, 17 Jan 2023 15:40:50 +0000 Subject: [PATCH 1/4] feat!: don't import cp-content-pipeline-ui, pass the RichText component in --- components/x-live-blog-post/package.json | 1 - components/x-live-blog-post/src/LiveBlogPost.jsx | 6 +++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/components/x-live-blog-post/package.json b/components/x-live-blog-post/package.json index ebd2d472d..9ecd2439e 100644 --- a/components/x-live-blog-post/package.json +++ b/components/x-live-blog-post/package.json @@ -17,7 +17,6 @@ "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/src/LiveBlogPost.jsx b/components/x-live-blog-post/src/LiveBlogPost.jsx index 6eb960f77..dab342d49 100644 --- a/components/x-live-blog-post/src/LiveBlogPost.jsx +++ b/components/x-live-blog-post/src/LiveBlogPost.jsx @@ -1,7 +1,6 @@ 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. @@ -40,6 +39,7 @@ const LiveBlogPost = ({ content, // Remove once wordpress is no longer in use bodyHTML, //ElasticSearch body, // cp-content-pipeline + renderRichText: RichText, publishedTimestamp, // Remove once wordpress is no longer in use publishedDate, isBreakingNews, // Remove once wordpress is no longer in use @@ -54,7 +54,7 @@ const LiveBlogPost = ({ let postBody, postByline - if (body && 'structured' in body) { + if (body && 'structured' in body && RichText) { // Content comes from cp-content-pipeline-api postBody = (
@@ -70,7 +70,7 @@ const LiveBlogPost = ({ /> ) } - if (byline && typeof byline === 'object' && 'tree' in byline) { + if (byline && typeof byline === 'object' && 'tree' in byline && RichText) { postByline = (

From fdfea369adc90d8c1c9408dd126f9074acda5243 Mon Sep 17 00:00:00 2001 From: Kara Brightwell Date: Tue, 17 Jan 2023 15:42:20 +0000 Subject: [PATCH 2/4] feat: pass renderRichText through to posts from wrapper --- components/x-live-blog-wrapper/src/LiveBlogWrapper.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/x-live-blog-wrapper/src/LiveBlogWrapper.jsx b/components/x-live-blog-wrapper/src/LiveBlogWrapper.jsx index e09a89e7d..873526863 100644 --- a/components/x-live-blog-wrapper/src/LiveBlogWrapper.jsx +++ b/components/x-live-blog-wrapper/src/LiveBlogWrapper.jsx @@ -145,6 +145,7 @@ class BaseLiveBlogWrapper extends Component { articleUrl={articleUrl} showShareButtons={showShareButtons} ad={ads[index]} + renderRichText={this.props.renderRichText} /> )) From 5f78a36244c3c06cb417d3b0a8e8bbba1ccea69a Mon Sep 17 00:00:00 2001 From: Kara Brightwell Date: Tue, 17 Jan 2023 15:45:27 +0000 Subject: [PATCH 3/4] docs: document renderRichText prop --- components/x-live-blog-post/readme.md | 8 ++++---- components/x-live-blog-wrapper/readme.md | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/x-live-blog-post/readme.md b/components/x-live-blog-post/readme.md index 81224ce73..19abf5922 100644 --- a/components/x-live-blog-post/readme.md +++ b/components/x-live-blog-post/readme.md @@ -45,13 +45,13 @@ Feature | Type | Notes `postId` | String | Deprecated - Unique id to reference the content `title` | String | Title of the content `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 +`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` +| `renderRichText` | Function | A component to use for rendering structured content, e.g. `RichText` from `cp-content-pipeline-ui`. Required when rendering with data 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 `publishedTimestamp`| String | Deprecated - ISO timestamp of publish date `articleUrl` | String | Url of the main article that includes this post `showShareButtons` | Bool | default: `false` - Shows social media share buttons when `true` -`backToTop` | String | Function | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function or a hashed href (string). If this prop is a string it will rely on standard browser behaviour to navigate to the element `id` provided that represents the top. If this prop is a function then that function should control the experience of navigating/scrolling to the top position. When using a function please call event.preventDefault() at the top level. - +`backToTop` | String or Function | Shows the back to top link at the bottom of posts and manages navigating to `selected top` with a javascript function or a hashed href (string). If this prop is a string it will rely on standard browser behaviour to navigate to the element `id` provided that represents the top. If this prop is a function then that function should control the experience of navigating/scrolling to the top position. When using a function please call event.preventDefault() at the top level. diff --git a/components/x-live-blog-wrapper/readme.md b/components/x-live-blog-wrapper/readme.md index 6d70dcb88..2d1a9127f 100644 --- a/components/x-live-blog-wrapper/readme.md +++ b/components/x-live-blog-wrapper/readme.md @@ -202,6 +202,7 @@ wrapperElement.addEventListener('LiveBlogWrapper.INSERT_POST', | `showShareButtons` | Boolean | if `true` displays social media sharing buttons in posts | | `posts` | Array | Array of live blog post data | | `id` | String | **(required)** Unique id used for identifying the element in the document. | +| `renderRichText` | Component | A component to use for rendering structured content, e.g. `RichText` from `cp-content-pipeline-ui`. Required when rendering with data from `cp-content-pipeline-api`. ## Configuring the `next-live-event-api` endpoint URL. From b8d5e4b132d59dc9fae6fea27aada9c5bc4c27e0 Mon Sep 17 00:00:00 2001 From: Kara Brightwell Date: Tue, 17 Jan 2023 16:02:47 +0000 Subject: [PATCH 4/4] test: import cp-content-pipeline-ui to use RichText for tests --- components/x-live-blog-post/package.json | 1 + .../x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/x-live-blog-post/package.json b/components/x-live-blog-post/package.json index 9ecd2439e..e01550467 100644 --- a/components/x-live-blog-post/package.json +++ b/components/x-live-blog-post/package.json @@ -20,6 +20,7 @@ "@financial-times/x-engine": "file:../../packages/x-engine" }, "devDependencies": { + "@financial-times/cp-content-pipeline-ui": "^0.4.0", "@financial-times/o-colors": "^6.4.2", "@financial-times/o-spacing": "^3.2.1", "@financial-times/o-typography": "^7.2.2", 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 40700f084..7cbb70324 100644 --- a/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx +++ b/components/x-live-blog-post/src/__tests__/LiveBlogPost.test.jsx @@ -1,5 +1,6 @@ const { h } = require('@financial-times/x-engine') const { mount } = require('@financial-times/x-test-utils/enzyme') +const { RichText } = require('@financial-times/cp-content-pipeline-ui') import { LiveBlogPost } from '../LiveBlogPost' @@ -95,7 +96,8 @@ const regularPostContentPipeline = { }, publishedDate: new Date().toISOString(), articleUrl: 'Https://www.ft.com', - showShareButtons: true + showShareButtons: true, + renderRichText: RichText } const backToTopPostSpark = {