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

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('do not initialised twice expanders', () => {
+    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,9 @@
+import { ExpanderClient } from '../../Expander/client'
+
+export class LiveBlogPostClient {
+  static init() {
+    return ExpanderClient.init({ trackingData: { category: 'live-blog-post' } })
+  }
+}
+
+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
@@ -82,18 +88,15 @@ const LiveBlogPost = ({
   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 = 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 +158,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

@@ -193,6 +193,7 @@ 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,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"

package/src/stories/Clip.stories.tsx

@@ -1,8 +1,9 @@
+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 ClipClient from '../components/Clip/client'
-import ClipServer, { ClipProps } from '../components/Clip/template/component'
+import { 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 {

package/src/stories/Expander.stories.scss

@@ -0,0 +1,3 @@
+$system-code: "cp-expander";
+@import "./article-page.scss";
+@import "../components/Expander/client/main.scss";

package/src/stories/Expander.stories.tsx

@@ -0,0 +1,159 @@
+import { ExpanderServer, ExpanderProps } from '../components/Expander'
+import { ExpanderClient } from '../components/Expander/client'
+import React, { useEffect } from 'react'
+import oTracking from '@financial-times/o-tracking/main'
+import './Expander.stories.scss'
+import ClipClient from '../components/Clip/client'
+import './Clip.stories.scss'
+import RichText from '../components/RichText'
+import { ContentTree } from '@financial-times/content-tree'
+import { ClipSet } from '@financial-times/cp-content-pipeline-schema/src/resolvers/content-tree/Workarounds'
+
+const structuredContent: ContentTree.Body = {
+  type: 'body',
+  version: 1,
+  children: [
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value:
+            'Mike Johnson has survived an attempt to oust him as speaker of the House of Representatives by Marjorie Taylor Greene, a hardline Republican congresswoman from Georgia. ',
+        },
+      ],
+    } as ContentTree.Paragraph,
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value:
+            'In a vote on Wednesday night, the lower chamber of Congress rejected Greene’s bid with overwhelming support from Democrats as well as Republicans. ',
+        },
+      ],
+    } as ContentTree.Paragraph,
+    ,
+    {
+      type: 'paragraph',
+      children: [
+        {
+          type: 'text',
+          value:
+            'The vote all but ensures that Johnson will remain in his post until after the November election, and will put a lid on a debate over his political future that has lasted for weeks among Republicans in Congress.  ',
+        },
+      ],
+    } as ContentTree.Paragraph,
+    {
+      type: 'clip-set',
+      id: 'http://api.ft.com/content/23a00095-d9fc-4cac-ad7c-477e61e3c159',
+      autoplay: false,
+      loop: false,
+      muted: false,
+      dataLayout: 'in-line',
+      data: {
+        referenceIndex: 3,
+      },
+    } as ClipSet,
+  ] as ContentTree.Body['children'],
+}
+const storyArgs: ExpanderProps = {
+  expandLabel: 'Open',
+  collapseLabel: 'Close',
+  onlyMobile: false,
+  id: '111232323-12123-2323',
+}
+
+export default {
+  title: 'Expander',
+  component: ExpanderServer,
+  tags: ['autodocs'],
+}
+
+const LiveBLogWrapper: React.FC<ExpanderProps & { classNames?: string }> = (
+  args
+) => {
+  const { classNames } = args
+
+  return (
+    <div className={classNames}>
+      <article
+        id="site-content"
+        role="main"
+        className="article article-grid  article-grid--no-full-width-graphics js enhanced"
+        data-article-type="no-full-width-graphics"
+      >
+        <div
+          className="article__content"
+          data-trackable="article-body"
+          data-component="article-body"
+          style={{ position: 'relative' }}
+        >
+          <div
+            className="article__content-body n-content-body js-article__content-body"
+            data-attribute="article-content-body"
+          >
+            <LiveBlogPostWrapper {...args} id="111"></LiveBlogPostWrapper>
+          </div>
+        </div>
+        <div className="article__right "></div>
+      </article>
+    </div>
+  )
+}
+
+const LiveBlogPostWrapper = (args: ExpanderProps) => {
+  useEffect(() => {
+    oTracking.init({
+      context: { product: 'next' },
+      test: true,
+    })
+
+    const clips = ClipClient.init(null, {})
+
+    return () => {
+      clips.forEach((clip) => clip.unload())
+    }
+  }, [])
+  return (
+    <article id={args.id}>
+      <div className="n-content-body">
+        <div
+          data-trackable="truncated-post"
+          data-trackable-context-post="1234"
+          data-component="example-boundary"
+        >
+          <ExpanderServer {...args} id={`${args.id}_expander`}>
+            <RichText structuredContent={{ tree: structuredContent }} />
+          </ExpanderServer>
+        </div>
+      </div>
+    </article>
+  )
+}
+
+export const OnlyServer = (args: ExpanderProps) => {
+  return <LiveBLogWrapper {...args} />
+}
+
+OnlyServer.args = { ...storyArgs }
+
+export const WithClient = (args: ExpanderProps) => {
+  useEffect(() => {
+    const clips = ClipClient.init(null, {})
+    const expanders = ExpanderClient.init()
+    return () => {
+      clips.forEach((clip) => clip.unload())
+      expanders.forEach((expander) => expander?.destroy())
+    }
+  }, [])
+  return <LiveBLogWrapper {...args} />
+}
+
+WithClient.args = { ...storyArgs }
+
+export const OnlyMobileWithClient = WithClient
+OnlyMobileWithClient.args = { ...storyArgs, onlyMobile: true }
+
+export const OnlyMobileServer = OnlyServer
+OnlyMobileServer.args = { ...storyArgs, onlyMobile: true }