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

package/src/components/ImageSet/index.tsx

@@ -43,7 +43,7 @@ export type AliasedBreakpoints = {
 
 const defaultGetBreakpoints = (
   image: ImageFragment
-): Breakpoint | AliasedBreakpoints | undefined => {
+): Breakpoint | Array<Breakpoint> | AliasedBreakpoints | undefined => {
   switch (image.format) {
     case 'mobile':
       return { maxWidth: 490 }
@@ -73,7 +73,11 @@ function hasSourceSet(image: ImageFragment): image is ImageWithSourceSet {
 function isAliasedBreakpoints(
   breakpoints: ReturnType<BreakpointGetter>
 ): breakpoints is AliasedBreakpoints {
-  return Boolean(breakpoints && Object.values(breakpoints)[0] instanceof Object)
+  return Boolean(
+    breakpoints &&
+      Object.values(breakpoints)[0] instanceof Object &&
+      !Array.isArray(breakpoints)
+  )
 }
 
 type SourceProps = {
@@ -113,16 +117,22 @@ function Source({
       {Object.entries(breakpointsDict)
         .map(([key, breakpoint]) => {
           const sourceSet = (image as ImageWithAliases)[key]
+          const sourceSetMap = Array.isArray(breakpoint)
+            ? breakpoint
+            : [breakpoint]
           return (
-            sourceSet && (
-              <source
-                key={key}
-                media={breakpointToMedia(breakpoint)}
-                srcSet={formatSourceSet(sourceSet)}
-                width={image.width ?? undefined}
-                height={image.height ?? undefined}
-              />
-            )
+            sourceSet &&
+            sourceSetMap.map((breakpoint) => {
+              return (
+                <source
+                  key={key}
+                  media={breakpointToMedia(breakpoint)}
+                  srcSet={formatSourceSet(sourceSet)}
+                  width={image.width ?? undefined}
+                  height={image.height ?? undefined}
+                />
+              )
+            })
           )
         })
         .filter((elem) => elem)}

package/src/components/LiveBlogWrapper/index.tsx

@@ -111,7 +111,7 @@ class BaseLiveBlogWrapper extends Component<
      */
     const config = {
       query:
-        'article[data-trackable="live-post"],article[data-trackable="pinned-post"]',
+        'article[data-trackable="live-post"],article[data-trackable="pinned-post"],[data-component-type="flourish-topper"]',
       minMillisecondsToReport: 5000,
       returnVisibleElement: true,
       observerUpdateEventString: 'LiveBlogWrapper.INSERT_POST',

package/src/components/PartnerContentHeader/index.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
 import { TooltipToggle } from '@financial-times/o3-tooltip'
 
-const PartnerContentHeader = ({
-  name = 'Default Partner',
-}: {
-  name: string
-}) => {
+const PartnerContentHeader = ({ name = 'Partner' }: { name: string }) => {
   return (
     <div className="partner-content-header">
       <div className="partner-content-header__content">
@@ -15,7 +11,7 @@ const PartnerContentHeader = ({
           <div data-o3-brand="core">
             <TooltipToggle
               placement="bottom"
-              content={`This advertisement has been produced by the commercial department of the Financial Times on behalf of ${name}`}
+              content={`This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`}
               infoLabel="More information on Partner Content"
             />
           </div>

package/src/components/Topper/Picture.tsx

@@ -15,9 +15,9 @@ const topperGetBreakpointsMap: Partial<
   SplitTextTopper(image) {
     switch (image.format) {
       case 'square':
-        return { maxWidth: 490 }
+        return [{ maxWidth: 490 }, { minWidth: 740, maxWidth: 1220 }]
       case 'standard':
-        return { minWidth: 491, maxWidth: 1220 }
+        return { minWidth: 491, maxWidth: 739 }
       case 'wide':
         return {
           normal: { minWidth: 1221, maxWidth: 1440 },

package/src/components/Topper/client/flourish-tracking.ts

@@ -0,0 +1,83 @@
+class FlourishTopperTracker {
+  private startTime: number
+  private totalVisibleTime: number
+  private timeElapsedSeconds: number | null
+  private component: Element | null
+  private id: string | null
+  private observer: IntersectionObserver | null
+
+  constructor() {
+    this.startTime = 0
+    this.totalVisibleTime = 0
+    this.timeElapsedSeconds = null
+    this.component = document.querySelector(
+      '[data-component-type="flourish-topper"]'
+    )
+    this.id = this.component?.getAttribute('data-component-id') || null
+    this.observer = null
+  }
+
+  init(): void {
+    if (!window.IntersectionObserver || !this.component) {
+      return
+    }
+
+    if (this.component) {
+      this.dispatchEvent('mount')
+    }
+
+    this.observer = new IntersectionObserver(this.onChange.bind(this), {
+      threshold: [1.0],
+    })
+    this.observer.observe(this.component)
+  }
+
+  private dispatchEvent(action: string): void {
+    let component: object = {
+      name: 'flourish-topper',
+      id: this.id,
+    }
+    if (this.timeElapsedSeconds) {
+      component = { ...component, timeElapsedSeconds: this.timeElapsedSeconds }
+    }
+    const event = new CustomEvent('oTracking.event', {
+      detail: {
+        category: 'component',
+        action: action,
+        component,
+      },
+      bubbles: true,
+    })
+    document.body.dispatchEvent(event)
+  }
+
+  private onChange(changes: IntersectionObserverEntry[]): void {
+    changes.forEach((change) => {
+      if (change.target !== this.component) {
+        return
+      }
+      if (change.isIntersecting || change.intersectionRatio >= 1) {
+        this.dispatchEvent('view')
+        this.startTime = performance.now()
+      }
+      if (!change.isIntersecting || change.intersectionRatio === 0) {
+        this.totalVisibleTime = performance.now() - this.startTime
+        this.timeElapsedSeconds = parseFloat(
+          (this.totalVisibleTime / 1000).toFixed(2)
+        )
+        this.dispatchEvent('stop-view')
+        this.totalVisibleTime = 0
+        this.timeElapsedSeconds = null
+      }
+    })
+  }
+
+  disconnect(): void {
+    if (this.observer && this.component) {
+      this.observer.unobserve(this.component)
+      this.observer.disconnect()
+    }
+  }
+}
+
+export { FlourishTopperTracker }

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

@@ -0,0 +1,3 @@
+import { FlourishTopperTracker } from './flourish-tracking'
+
+export { FlourishTopperTracker }

package/src/components/Topper/test/client/flourish-tracking.spec.ts

@@ -0,0 +1,135 @@
+import { FlourishTopperTracker } from '../../client'
+
+// const CustomEventMock = jest.fn()
+// global.CustomEvent = CustomEventMock
+
+describe('FlourishTopperTracker', () => {
+  let mockIntersectionObserver: jest.Mock
+  let mockObserve: jest.Mock
+  let mockUnobserve: jest.Mock
+  let mockDisconnect: jest.Mock
+  let mockComponent: HTMLElement
+  let dispatchEventSpy: jest.SpyInstance
+
+  beforeEach(() => {
+    mockObserve = jest.fn()
+    mockUnobserve = jest.fn()
+    mockDisconnect = jest.fn()
+
+    mockIntersectionObserver = jest.fn(() => {
+      return {
+        observe: mockObserve,
+        unobserve: mockUnobserve,
+        disconnect: mockDisconnect,
+      }
+    })
+
+    window.IntersectionObserver = mockIntersectionObserver
+
+    mockComponent = document.createElement('div')
+    mockComponent.setAttribute('data-component-type', 'flourish-topper')
+    mockComponent.setAttribute('data-component-id', 'test-id')
+    document.body.appendChild(mockComponent)
+
+    jest.spyOn(document, 'querySelector').mockReturnValue(mockComponent)
+    jest
+      .spyOn(performance, 'now')
+      .mockImplementationOnce(() => 1)
+      .mockImplementationOnce(() => 12344)
+    dispatchEventSpy = jest.spyOn(document.body, 'dispatchEvent')
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+    document.body.removeChild(mockComponent)
+  })
+
+  it('should initialise and observe the component', () => {
+    const tracker = new FlourishTopperTracker()
+    tracker.init()
+
+    expect(mockIntersectionObserver).toHaveBeenCalled()
+    expect(mockObserve).toHaveBeenCalledWith(mockComponent)
+  })
+
+  it('should dispatch a mount event on intialisation', () => {
+    const tracker = new FlourishTopperTracker()
+    tracker.init()
+
+    const mountEvent = dispatchEventSpy.mock.calls[0][0] as CustomEvent
+    expect(mountEvent.type).toBe('oTracking.event')
+    expect(mountEvent.detail).toEqual({
+      category: 'component',
+      action: 'mount',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+      },
+    })
+  })
+
+  it('should handle component visibility changes', () => {
+    const tracker = new FlourishTopperTracker()
+    tracker.init()
+
+    const mockChanges: IntersectionObserverEntry[] = [
+      {
+        target: mockComponent,
+        isIntersecting: true,
+        intersectionRatio: 1.0,
+        boundingClientRect: {} as DOMRectReadOnly,
+        intersectionRect: {} as DOMRectReadOnly,
+        rootBounds: null,
+        time: 1,
+      },
+    ]
+
+    tracker['onChange'](mockChanges)
+
+    const viewEvent = dispatchEventSpy.mock.calls[1][0] as CustomEvent
+    expect(viewEvent.type).toBe('oTracking.event')
+    expect(viewEvent.detail).toEqual({
+      category: 'component',
+      action: 'view',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+      },
+    })
+
+    const mockChangesAfter: IntersectionObserverEntry[] = [
+      {
+        target: mockComponent,
+        isIntersecting: false,
+        intersectionRatio: 0.0,
+        boundingClientRect: {} as DOMRectReadOnly,
+        intersectionRect: {} as DOMRectReadOnly,
+        rootBounds: null,
+        time: 12.3444,
+      },
+    ]
+
+    tracker['onChange'](mockChangesAfter)
+
+    const stopViewEvent = dispatchEventSpy.mock.calls[2][0] as CustomEvent
+    expect(stopViewEvent.type).toBe('oTracking.event')
+    expect(stopViewEvent.detail).toEqual({
+      category: 'component',
+      action: 'stop-view',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+        timeElapsedSeconds: 12.34,
+      },
+    })
+  })
+
+  it('should disconnect the observer', () => {
+    const tracker = new FlourishTopperTracker()
+    tracker.init()
+    tracker.disconnect()
+
+    expect(mockUnobserve).toHaveBeenCalledWith(mockComponent)
+    expect(mockDisconnect).toHaveBeenCalled()
+  })
+})