@financial-times/cp-content-pipeline-ui 6.11.3-beta.0 → 6.11.3

package/src/components/LiveBlogPost/index.tsx

@@ -7,7 +7,6 @@ import classnames from 'classnames'
 import Headshot from '../Headshot'
 import Byline from '../Byline'
 import { StructuredTreeFragment } from '@financial-times/cp-content-pipeline-client'
-import parse from 'html-react-parser'
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 //TODO: CI-1975 remove "any" types
@@ -37,6 +36,23 @@ const TruncatedPost = ({ id, children }: { id: string; children: any }) => {
   )
 }
 
+const truncatedSelector = () => {
+  const prefix = '.x-live-blog-post__body >'
+  const selectors = [
+    'p',
+    'blockquote',
+    'ul',
+    '.o-table-container',
+    '.n-content-recommended--single-story',
+    "[data-layout-name='card']",
+    '.n-content-big-number',
+    'hr',
+    '.n-content-tweet',
+    "[data-layout-name='timeline']",
+  ]
+  return selectors.map((item) => `${prefix} ${item}`).join(',')
+}
+
 export type LiveBlogPostProps = {
   id: string
   postId: string // Remove once wordpress is no longer in use
@@ -92,10 +108,31 @@ const LiveBlogPost = ({
       </TruncatedPost>
     )
   } else {
-    const elements = bodyHTML || content ? parse(bodyHTML || content) : []
-
     // Content comes from next-es or wordpress
-    postBody = <TruncatedPost id={id}>{elements}</TruncatedPost>
+    postBody = (
+      <div
+        className="x-live-blog-post__body n-content-body article--body"
+        dangerouslySetInnerHTML={{ __html: bodyHTML || content }}
+      />
+    )
+    // add pinned post old version when comming from next-es or wordpress
+    postBody = isPinned ? (
+      <div
+        data-o-component="o-expander"
+        className="o-expander"
+        data-o-expander-shrink-to="1"
+        data-o-expander-item-selector={truncatedSelector()}
+        data-o-expander-collapsed-toggle-text={'Expand post'}
+        data-o-expander-expanded-toggle-text={'Collapse post'}
+      >
+        <div className="o-expander__content">{postBody}</div>
+        <a className="o-expander__toggle o-expander__text--custom">
+          <span className="o-expander__visually-hidden">&nbsp;</span>
+        </a>
+      </div>
+    ) : (
+      postBody
+    )
   }
 
   const author = authors?.[0] ?? null