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

package/src/components/Clip/test/__snapshots__/snapshot.spec.tsx.snap

@@ -13,7 +13,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
       data-cp-clip-no-caption=\\"false\\"
       data-cp-clip-closed-caption=\\"false\\"
       data-cp-clip-loop=\\"false\\"
-      class=\\"cp-clip\\"
+      class=\\"cp-clip cp-clip--loading\\"
       data-trackable=\\"next-article-cp-clip\\"
       data-o-component=\\"cp-clip\\"
       data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -26,7 +26,10 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
         data-o-expander-collapsed-toggle-text=\\"<span class='o-expander__visually-hidden'>Show video info</span>\\"
         data-o-expander-expanded-toggle-text=\\"<span class='o-expander__visually-hidden'>Hide video info</span>\\"
       >
-        <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
+        <button
+          data-trackable=\\"toggle-open-close\\"
+          class=\\"o-expander__toggle o-expander__toggle-empty\\"
+        >
           <span class=\\"o-expander__visually-hidden\\">Show video info</span>
         </button>
         <div class=\\"o-expander__content video-info\\"></div>
@@ -74,7 +77,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
       data-cp-clip-no-caption=\\"false\\"
       data-cp-clip-closed-caption=\\"false\\"
       data-cp-clip-loop=\\"true\\"
-      class=\\"cp-clip\\"
+      class=\\"cp-clip cp-clip--loading\\"
       data-trackable=\\"next-article-cp-clip\\"
       data-o-component=\\"cp-clip\\"
       data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -87,7 +90,10 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
         data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
         data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
       >
-        <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
+        <button
+          data-trackable=\\"toggle-open-close\\"
+          class=\\"o-expander__toggle o-expander__toggle-empty\\"
+        >
           <span class=\\"o-expander__visually-hidden\\">Show video info</span>
         </button>
         <div class=\\"o-expander__content video-info\\"></div>
@@ -160,7 +166,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
     data-cp-clip-no-caption=\\"false\\"
     data-cp-clip-closed-caption=\\"false\\"
     data-cp-clip-loop=\\"false\\"
-    class=\\"cp-clip\\"
+    class=\\"cp-clip cp-clip--loading\\"
     data-trackable=\\"next-article-cp-clip\\"
     data-o-component=\\"cp-clip\\"
     data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -173,7 +179,10 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
       data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
       data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
     >
-      <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
+      <button
+        data-trackable=\\"toggle-open-close\\"
+        class=\\"o-expander__toggle o-expander__toggle-empty\\"
+      >
         <span class=\\"o-expander__visually-hidden\\">Show video info</span>
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
@@ -219,7 +228,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
     data-cp-clip-no-caption=\\"false\\"
     data-cp-clip-closed-caption=\\"false\\"
     data-cp-clip-loop=\\"true\\"
-    class=\\"cp-clip\\"
+    class=\\"cp-clip cp-clip--loading\\"
     data-trackable=\\"next-article-cp-clip\\"
     data-o-component=\\"cp-clip\\"
     data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -232,7 +241,10 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
       data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
       data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
     >
-      <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
+      <button
+        data-trackable=\\"toggle-open-close\\"
+        class=\\"o-expander__toggle o-expander__toggle-empty\\"
+      >
         <span class=\\"o-expander__visually-hidden\\">Show video info</span>
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
@@ -309,7 +321,7 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
         data-cp-clip-no-caption=\\"false\\"
         data-cp-clip-closed-caption=\\"false\\"
         data-cp-clip-loop=\\"false\\"
-        class=\\"cp-clip\\"
+        class=\\"cp-clip cp-clip--loading\\"
         data-trackable=\\"next-article-cp-clip\\"
         data-o-component=\\"cp-clip\\"
         data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -322,7 +334,10 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
           data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
           data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
         >
-          <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
+          <button
+            data-trackable=\\"toggle-open-close\\"
+            class=\\"o-expander__toggle o-expander__toggle-empty\\"
+          >
             <span class=\\"o-expander__visually-hidden\\">Show video info</span>
           </button>
           <div class=\\"o-expander__content video-info\\"></div>
@@ -375,7 +390,7 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
         data-cp-clip-no-caption=\\"false\\"
         data-cp-clip-closed-caption=\\"false\\"
         data-cp-clip-loop=\\"true\\"
-        class=\\"cp-clip\\"
+        class=\\"cp-clip cp-clip--loading\\"
         data-trackable=\\"next-article-cp-clip\\"
         data-o-component=\\"cp-clip\\"
         data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -388,7 +403,10 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
           data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
           data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
         >
-          <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
+          <button
+            data-trackable=\\"toggle-open-close\\"
+            class=\\"o-expander__toggle o-expander__toggle-empty\\"
+          >
             <span class=\\"o-expander__visually-hidden\\">Show video info</span>
           </button>
           <div class=\\"o-expander__content video-info\\"></div>
@@ -468,7 +486,7 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
     data-cp-clip-no-caption=\\"false\\"
     data-cp-clip-closed-caption=\\"false\\"
     data-cp-clip-loop=\\"false\\"
-    class=\\"cp-clip\\"
+    class=\\"cp-clip cp-clip--loading\\"
     data-trackable=\\"next-article-cp-clip\\"
     data-o-component=\\"cp-clip\\"
     data-cp-clip-id=\\"84d7e1b0-e8b2-4ffc-a798-306f29dc9d52\\"
@@ -481,7 +499,10 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
       data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
       data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
     >
-      <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
+      <button
+        data-trackable=\\"toggle-open-close\\"
+        class=\\"o-expander__toggle o-expander__toggle-empty\\"
+      >
         <span class=\\"o-expander__visually-hidden\\">Show video info</span>
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
@@ -565,7 +586,7 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
       data-cp-clip-no-caption=\\"false\\"
       data-cp-clip-closed-caption=\\"false\\"
       data-cp-clip-loop=\\"true\\"
-      class=\\"cp-clip\\"
+      class=\\"cp-clip cp-clip--loading\\"
       data-trackable=\\"next-article-cp-clip\\"
       data-o-component=\\"cp-clip\\"
       data-cp-clip-id=\\"localhost:8080/fakevideo.mpg\\"
@@ -578,7 +599,10 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
         data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
         data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
       >
-        <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
+        <button
+          data-trackable=\\"toggle-open-close\\"
+          class=\\"o-expander__toggle o-expander__toggle-empty\\"
+        >
           <span class=\\"o-expander__visually-hidden\\">Show video info</span>
         </button>
         <div class=\\"o-expander__content video-info\\"></div>

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