@financial-times/cp-content-pipeline-ui 6.9.2 → 6.10.0

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

@@ -0,0 +1,221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Expander Snapshot component rendered on server default render 1`] = `
+<div
+  className="cp-expander cp-expander--all-resolutions cp-expander--not-initialised"
+  data-component="expander"
+  data-state="collapsed"
+  id="test-id__container"
+>
+  <div
+    className="cp-expander-content"
+    id="test-id"
+  >
+    <div
+      className="cp-expander__expand"
+    >
+      <a
+        aria-controls="test-id"
+        aria-expanded={false}
+        aria-hidden={false}
+        className="cp-expander__link"
+        data-action="expand"
+        data-trackable="truncated-post"
+        data-trackable-context-truncated-id="test-id"
+        data-trackable-context-truncated-post="expand"
+        href="#test-id"
+      >
+        Expand
+      </a>
+    </div>
+    <div>
+      Children 1
+    </div>
+    <div>
+      Children 2
+    </div>
+    <div
+      className="cp-expander__collapse"
+    >
+      <a
+        aria-controls="test-id"
+        aria-expanded={false}
+        aria-hidden={true}
+        className="cp-expander__link"
+        data-action="collapse"
+        data-trackable="truncated-post"
+        data-trackable-context-truncated-id="test-id"
+        data-trackable-context-truncated-post="collapse"
+        href="#test-id__container"
+      >
+        Collapse
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Expander Snapshot component rendered on server only on mobile 1`] = `
+<div
+  className="cp-expander cp-expander--mobile-only cp-expander--not-initialised"
+  data-component="expander"
+  data-state="collapsed"
+  id="test-id__container"
+>
+  <div
+    className="cp-expander-content"
+    id="test-id"
+  >
+    <div
+      className="cp-expander__expand"
+    >
+      <a
+        aria-controls="test-id"
+        aria-expanded={false}
+        aria-hidden={false}
+        className="cp-expander__link"
+        data-action="expand"
+        data-trackable="truncated-post"
+        data-trackable-context-truncated-id="test-id"
+        data-trackable-context-truncated-post="expand"
+        href="#test-id"
+      >
+        Expand
+      </a>
+    </div>
+    <div>
+      Children 1
+    </div>
+    <div>
+      Children 2
+    </div>
+    <div
+      className="cp-expander__collapse"
+    >
+      <a
+        aria-controls="test-id"
+        aria-expanded={false}
+        aria-hidden={true}
+        className="cp-expander__link"
+        data-action="collapse"
+        data-trackable="truncated-post"
+        data-trackable-context-truncated-id="test-id"
+        data-trackable-context-truncated-post="collapse"
+        href="#test-id__container"
+      >
+        Collapse
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Expander Snapshot component rendered on server with different labels 1`] = `
+<div
+  className="cp-expander cp-expander--all-resolutions cp-expander--not-initialised"
+  data-component="expander"
+  data-state="collapsed"
+  id="test-id__container"
+>
+  <div
+    className="cp-expander-content"
+    id="test-id"
+  >
+    <div
+      className="cp-expander__expand"
+    >
+      <a
+        aria-controls="test-id"
+        aria-expanded={false}
+        aria-hidden={false}
+        className="cp-expander__link"
+        data-action="expand"
+        data-trackable="truncated-post"
+        data-trackable-context-truncated-id="test-id"
+        data-trackable-context-truncated-post="expand"
+        href="#test-id"
+      >
+        Open
+      </a>
+    </div>
+    <div>
+      Children 1
+    </div>
+    <div>
+      Children 2
+    </div>
+    <div
+      className="cp-expander__collapse"
+    >
+      <a
+        aria-controls="test-id"
+        aria-expanded={false}
+        aria-hidden={true}
+        className="cp-expander__link"
+        data-action="collapse"
+        data-trackable="truncated-post"
+        data-trackable-context-truncated-id="test-id"
+        data-trackable-context-truncated-post="collapse"
+        href="#test-id__container"
+      >
+        Close
+      </a>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Expander Snapshot component rendered on server with different state 1`] = `
+<div
+  className="cp-expander cp-expander--all-resolutions cp-expander--not-initialised"
+  data-component="expander"
+  data-state="expanded"
+  id="test-id__container"
+>
+  <div
+    className="cp-expander-content"
+    id="test-id"
+  >
+    <div
+      className="cp-expander__expand"
+    >
+      <a
+        aria-controls="test-id"
+        aria-expanded={true}
+        aria-hidden={true}
+        className="cp-expander__link"
+        data-action="expand"
+        data-trackable="truncated-post"
+        data-trackable-context-truncated-id="test-id"
+        data-trackable-context-truncated-post="expand"
+        href="#test-id"
+      >
+        Expand
+      </a>
+    </div>
+    <div>
+      Children 1
+    </div>
+    <div>
+      Children 2
+    </div>
+    <div
+      className="cp-expander__collapse"
+    >
+      <a
+        aria-controls="test-id"
+        aria-expanded={true}
+        aria-hidden={false}
+        className="cp-expander__link"
+        data-action="collapse"
+        data-trackable="truncated-post"
+        data-trackable-context-truncated-id="test-id"
+        data-trackable-context-truncated-post="collapse"
+        href="#test-id__container"
+      >
+        Collapse
+      </a>
+    </div>
+  </div>
+</div>
+`;

package/src/components/Expander/test/client/index.spec.tsx

@@ -0,0 +1,129 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React from 'react'
+
+import Expander, { ExpanderProps } from '../../index'
+import { ExpanderClient } from '../../client'
+import { render, screen } from '@testing-library/react'
+
+//mock IntersectionObserver
+class IntersectionObserver {
+  //mock constructor
+  constructor(callback) {
+    this.callback = callback
+  }
+  observe() {
+    this.active = true
+  }
+  disconnect() {
+    this.active = false
+  }
+
+  intersects() {
+    if (this.active) {
+      this.callback([{ isIntersecting: true }])
+    }
+  }
+}
+
+//mock scrollIntoView
+window.HTMLElement.prototype.scrollIntoView = jest.fn()
+
+describe('Expander client test', () => {
+  beforeEach(() => {
+    window.IntersectionObserver = IntersectionObserver
+  })
+
+  it('find expanders markup and initialises it', () => {
+    const props: ExpanderProps = {
+      id: 'test-id',
+    }
+    render(
+      <Expander {...props}>
+        <div>Children 1</div>
+      </Expander>
+    )
+
+    const expanders = ExpanderClient.init()
+    expect(expanders.length).toBe(1)
+    expect(
+      document.querySelectorAll("[data-component='expander']").length
+    ).toBe(1)
+    expect(expanders[0].container.id).toBe('test-id__container')
+    expect(
+      expanders[0].container.classList.contains('cp-expander--initialised')
+    ).toBe(true)
+  })
+
+  it('does not initialise expanders twice', () => {
+    const props: ExpanderProps = {
+      id: 'test-id',
+    }
+    render(
+      <Expander {...props}>
+        <div>Children 1</div>
+      </Expander>
+    )
+    ExpanderClient.init()
+    const expanders = ExpanderClient.init()
+
+    expect(expanders.length).toBe(0)
+    expect(
+      document.querySelectorAll("[data-component='expander']").length
+    ).toBe(1)
+  })
+
+  it('expands and collapse', async () => {
+    const props: ExpanderProps = {
+      id: 'test-id',
+    }
+    render(
+      <Expander {...props}>
+        <div>Children 1</div>
+      </Expander>
+    )
+    const expanders = ExpanderClient.init()
+    const expanderButton = screen.getByText('Expand')
+    const collapserButton = screen.getByText('Collapse')
+    expect(expanderButton.getAttribute('aria-expanded')).toBe('false')
+    expect(expanderButton.getAttribute('aria-hidden')).toBe('false')
+    expect(collapserButton.getAttribute('aria-expanded')).toBe('false')
+    expect(collapserButton.getAttribute('aria-hidden')).toBe('true')
+
+    await expanderButton.click()
+    expect(expanderButton.getAttribute('aria-expanded')).toBe('true')
+    expect(expanders[0].container?.getAttribute('data-state')).toBe('expanded')
+    expect(expanderButton.getAttribute('aria-expanded')).toBe('true')
+    expect(expanderButton.getAttribute('aria-hidden')).toBe('true')
+    expect(collapserButton.getAttribute('aria-expanded')).toBe('true')
+    expect(collapserButton.getAttribute('aria-hidden')).toBe('false')
+
+    await collapserButton.click()
+    expect(expanders[0].container?.getAttribute('data-state')).toBe('collapsed')
+    expect(expanderButton.getAttribute('aria-expanded')).toBe('false')
+    expect(expanderButton.getAttribute('aria-hidden')).toBe('false')
+    expect(collapserButton.getAttribute('aria-expanded')).toBe('false')
+    expect(collapserButton.getAttribute('aria-hidden')).toBe('true')
+  })
+
+  it('track entire read only once', () => {
+    const props: ExpanderProps = {
+      id: 'test-id',
+    }
+    render(
+      <Expander {...props}>
+        <div>Children 1</div>
+      </Expander>
+    )
+
+    const expanders = ExpanderClient.init()
+    const spy = jest.spyOn(document.body, 'dispatchEvent')
+    spy.mockImplementation((event) => {
+      expect(event.detail.action).toBe('entire_read')
+    })
+    expanders[0].trackingEntireRead.observer.intersects()
+    expect(spy).toHaveBeenCalledTimes(1)
+    expanders[0].trackingEntireRead.observer.intersects()
+    expect(spy).toHaveBeenCalledTimes(1)
+  })
+})

package/src/components/Expander/test/index.spec.tsx

@@ -0,0 +1,77 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React from 'react'
+
+import Expander, { ExpanderProps } from '../index'
+import { render, screen } from '@testing-library/react'
+
+describe('Expander template', () => {
+  it('renders', () => {
+    const props: ExpanderProps = {
+      id: 'test-id',
+    }
+    const tree = render(
+      <Expander {...props}>
+        <div>Children 1</div>
+        <div>Children 2</div>
+      </Expander>
+    )
+    expect(
+      tree.container.querySelector('[data-component="expander"]')
+    ).toBeTruthy()
+    expect(
+      tree.container.querySelector('[data-state="collapsed"]')
+    ).toBeTruthy()
+    expect(
+      tree.container.querySelector('.cp-expander--not-initialised')
+    ).toBeTruthy()
+    expect(screen.getByText('Expand')).toBeTruthy()
+    expect(screen.getByText('Collapse')).toBeTruthy()
+    expect(screen.getByText('Children 1')).toBeTruthy()
+    expect(screen.getByText('Children 2')).toBeTruthy()
+  })
+
+  it('with different labels', () => {
+    const props: ExpanderProps = {
+      id: 'test-id',
+      collapseLabel: 'Close',
+      expandLabel: 'Open',
+    }
+    render(
+      <Expander {...props}>
+        <div>Children</div>
+      </Expander>
+    )
+
+    expect(screen.getByText('Open')).toBeTruthy()
+    expect(screen.getByText('Close')).toBeTruthy()
+  })
+
+  it('with different state', () => {
+    const props: ExpanderProps = {
+      id: 'test-id',
+      state: 'expanded',
+    }
+    const tree = render(
+      <Expander {...props}>
+        <div>Children</div>
+      </Expander>
+    )
+    expect(tree.container.querySelector('[data-state="expanded"]')).toBeTruthy()
+  })
+
+  it('add class for only mobile', () => {
+    const props: ExpanderProps = {
+      id: 'test-id',
+      onlyMobile: true,
+    }
+    const tree = render(
+      <Expander {...props}>
+        <div>Children</div>
+      </Expander>
+    )
+    expect(
+      tree.container.querySelector('.cp-expander--mobile-only')
+    ).toBeTruthy()
+  })
+})

package/src/components/Expander/test/snapshot.spec.tsx

@@ -0,0 +1,73 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Expander, { ExpanderProps } from '../index'
+
+describe('Expander Snapshot', () => {
+  describe('component rendered on server', () => {
+    it('default render', () => {
+      const props: ExpanderProps = {
+        id: 'test-id',
+      }
+      const tree = renderer
+        .create(
+          <Expander {...props}>
+            <div>Children 1</div>
+            <div>Children 2</div>
+          </Expander>
+        )
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('only on mobile', () => {
+      const props: ExpanderProps = {
+        id: 'test-id',
+        onlyMobile: true,
+      }
+      const tree = renderer
+        .create(
+          <Expander {...props}>
+            <div>Children 1</div>
+            <div>Children 2</div>
+          </Expander>
+        )
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('with different labels', () => {
+      const props: ExpanderProps = {
+        id: 'test-id',
+        collapseLabel: 'Close',
+        expandLabel: 'Open',
+      }
+      const tree = renderer
+        .create(
+          <Expander {...props}>
+            <div>Children 1</div>
+            <div>Children 2</div>
+          </Expander>
+        )
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+
+    it('with different state', () => {
+      const props: ExpanderProps = {
+        id: 'test-id',
+        state: 'expanded',
+      }
+      const tree = renderer
+        .create(
+          <Expander {...props}>
+            <div>Children 1</div>
+            <div>Children 2</div>
+          </Expander>
+        )
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+  })
+})

package/src/components/ImageSet/index.tsx

@@ -212,6 +212,7 @@ export default function ImageSet(
           'n-content-image'
         }
         style={figureWidth(imageSet.picture)}
+        data-component="image-set"
       >
         <picture>
           <Sources images={imageSet.picture.images} />

package/src/components/LiveBlogPost/client/index.ts

@@ -0,0 +1,16 @@
+import { ExpanderClient } from '../../Expander/client'
+
+export class LiveBlogPostClient {
+  static init() {
+    const expanders = ExpanderClient.init({
+      trackingData: { category: 'live-blog-post' },
+    })
+    expanders.forEach((expander) => {
+      expander.container?.addEventListener('expander:collapsed', () => {
+        expander?.container?.parentElement?.parentElement?.scrollIntoView()
+      })
+    })
+  }
+}
+
+export default LiveBlogPostClient

package/src/components/LiveBlogPost/index.tsx

@@ -2,10 +2,13 @@ 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
@@ -14,6 +17,26 @@ 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
@@ -39,23 +62,6 @@ 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
@@ -78,22 +84,18 @@ const LiveBlogPost = ({
   const showBreakingNewsLabel = standout.breakingNews || isBreakingNews
 
   let postBody
-
   if (body && 'structured' in body) {
     // Content comes from cp-content-pipeline-api
     postBody = (
-      <div className="x-live-blog-post__body n-content-body article--body">
+      <TruncatedPost id={id}>
         <RichText structuredContent={body.structured} />
-      </div>
+      </TruncatedPost>
     )
   } else {
+    const elements = bodyHTML || content ? parse(bodyHTML || content) : []
+
     // Content comes from next-es or wordpress
-    postBody = (
-      <div
-        className="x-live-blog-post__body n-content-body article--body"
-        dangerouslySetInnerHTML={{ __html: bodyHTML || content }}
-      />
-    )
+    postBody = <TruncatedPost id={id}>{elements}</TruncatedPost>
   }
 
   const author = authors?.[0] ?? null
@@ -155,23 +157,7 @@ const LiveBlogPost = ({
         <div className="x-live-blog-post__breaking-news">Breaking news</div>
       )}
       {title && <h2 className="x-live-blog-post__title">{title}</h2>}
-      {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
-      )}
+      {postBody}
       <div className="x-live-blog-post__controls">
         {showShareButtons && (
           <ShareButtons

package/src/components/LiveBlogWrapper/index.tsx

@@ -194,6 +194,7 @@ class BaseLiveBlogWrapper extends Component<
         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,6 +25,7 @@ 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,6 +22,7 @@ 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,7 +8,10 @@ export default function Video({
   title,
 }: VideoFragment & ContentTreeWorkarounds.Video) {
   return (
-    <div className="n-content-video n-content-video--internal">
+    <div
+      className="n-content-video n-content-video--internal"
+      data-component="video"
+    >
       <div
         className="n-content-video__placeholder"
         data-o-component="o-video"

package/src/components/YoutubeVideo/index.tsx

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