Merge pull request #688 from Financial-Times/content-pipeline-circular-dep

Author: apaleslimghost

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

@@ -17,10 +17,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@financial-times/cp-content-pipeline-ui": "^0.3.6",
     "@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",

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.

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 = (
 			<div className="x-live-blog-post__body n-content-body article--body">
@@ -70,7 +70,7 @@ const LiveBlogPost = ({
 			/>
 		)
 	}
-	if (byline && typeof byline === 'object' && 'tree' in byline) {
+	if (byline && typeof byline === 'object' && 'tree' in byline && RichText) {
 		postByline = (
 			<p className="x-live-blog-post__byline">
 				<RichText structuredContent={byline} />

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 = {

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.
 

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}
 			/>
 		))