@financial-times/cp-content-pipeline-ui 6.7.0 → 6.7.2

package/src/components/LiveBlogPost/index.tsx

@@ -2,13 +2,10 @@ import React from 'react'
 import ShareButtons from './ShareButtons'
 import Timestamp from './Timestamp'
 import RichText from '../RichText'
-import Expander from '../Expander'
 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
 // this has been ported from x-dash, and a lot of what is expected into these arguments will take a lot of digging
@@ -17,26 +14,6 @@ type indicators = {
   isOpinion?: boolean
 }
 
-const TruncatedPost = ({ id, children }: { id: string; children: any }) => {
-  return (
-    <div
-      data-trackable="truncated-post"
-      data-trackable-context-post={id}
-      data-trackable-category="live-blog"
-      className="x-live-blog-post__body n-content-body article--body"
-    >
-      <Expander
-        expandLabel="Expand post"
-        collapseLabel="Collapse post"
-        onlyMobile={true}
-        id={`truncated-${id}`}
-      >
-        {children}
-      </Expander>
-    </div>
-  )
-}
-
 export type LiveBlogPostProps = {
   id: string
   postId: string // Remove once wordpress is no longer in use
@@ -62,6 +39,23 @@ export type LiveBlogPostProps = {
   authors: Array<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(',')
+}
+
 const LiveBlogPost = ({
   id,
   postId, // Remove once wordpress is no longer in use
@@ -88,15 +82,18 @@ const LiveBlogPost = ({
   if (body && 'structured' in body) {
     // Content comes from cp-content-pipeline-api
     postBody = (
-      <TruncatedPost id={id}>
+      <div className="x-live-blog-post__body n-content-body article--body">
         <RichText structuredContent={body.structured} />
-      </TruncatedPost>
+      </div>
     )
   } else {
-    const elements = 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 }}
+      />
+    )
   }
 
   const author = authors?.[0] ?? null
@@ -158,7 +155,23 @@ const LiveBlogPost = ({
         <div className="x-live-blog-post__breaking-news">Breaking news</div>
       )}
       {title && <h2 className="x-live-blog-post__title">{title}</h2>}
-      {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
+      )}
       <div className="x-live-blog-post__controls">
         {showShareButtons && (
           <ShareButtons

package/src/components/LiveBlogWrapper/index.tsx

@@ -193,7 +193,6 @@ class BaseLiveBlogWrapper extends Component<LiveBlogWrapperTypes, stateTypes> {
         className="x-live-blog-wrapper"
         data-live-blog-wrapper-id={id}
         ref={liveBlogWrapperElementRef}
-        data-component="live-blog-wrapper"
       >
         {postElements}
       </div>

package/src/components/Recommended/index.tsx

@@ -25,7 +25,6 @@ export default function Recommended({
       className={classnames('n-content-recommended--single-story', {
         'n-content-recommended--inset': !isInLiveBlog,
       })}
-      data-component="recommended"
     >
       {!isInLiveBlog && (
         <p className="n-content-recommended__title">{heading}</p>

package/src/components/Table/index.tsx

@@ -22,7 +22,6 @@ export default function Table({
           'o-table-container--contracted': Boolean(collapseAfterHowManyRows),
         })}
         data-layout-width={layoutWidth}
-        data-component="table"
       >
         <div
           className={classNames('o-table-overlay-wrapper', {

package/src/components/Video/index.tsx

@@ -8,10 +8,7 @@ export default function Video({
   title,
 }: VideoFragment & ContentTreeWorkarounds.Video) {
   return (
-    <div
-      className="n-content-video n-content-video--internal"
-      data-component="video"
-    >
+    <div className="n-content-video n-content-video--internal">
       <div
         className="n-content-video__placeholder"
         data-o-component="o-video"

package/src/components/YoutubeVideo/index.tsx

@@ -13,10 +13,7 @@ export default function YoutubeVideo({
     }
 
     return (
-      <div
-        className="n-content-video n-content-video--youtube"
-        data-component="youtube-video"
-      >
+      <div className="n-content-video n-content-video--youtube">
         <div className="n-content-video__placeholder">
           <iframe
             className="n-content-video__embedded"

package/src/stories/Clip.stories.tsx

@@ -1,9 +1,8 @@
-import ClipServer from '../components/Clip'
-import ClipClient from '../components/Clip/client'
 import React, { useEffect, ReactNode } from 'react'
 import oTracking from '@financial-times/o-tracking/main'
 import './Clip.stories.scss'
-import { ClipProps } from '../components/Clip/template/component'
+import ClipClient from '../components/Clip/client'
+import ClipServer, { ClipProps } from '../components/Clip/template/component'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 export default {