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

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

@@ -2,7 +2,7 @@
 
 exports[`Clip Snapshot component rendered on server full-grid default render 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-cp-clip-layout=\\"full-grid\\"
       data-cp-clip-poster=\\"\\"
@@ -41,7 +41,6 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
           playsinline=\\"\\"
           poster=\\"\\"
           preload=\\"auto\\"
-          tabindex=\\"0\\"
           style=\\"height: fit-content; width: 100%\\"
         >
           <source
@@ -64,7 +63,7 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
 
 exports[`Clip Snapshot component rendered on server full-grid render with attributes 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-cp-clip-layout=\\"full-grid\\"
       data-cp-clip-poster=\\"\\"
@@ -104,7 +103,6 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
           loop=\\"\\"
           poster=\\"\\"
           preload=\\"auto\\"
-          tabindex=\\"0\\"
           style=\\"height: fit-content; width: 100%\\"
         >
           <source
@@ -151,7 +149,7 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
 `;
 
 exports[`Clip Snapshot component rendered on server in-line render 1`] = `
-"<div class=\\"n-content-layout__container--in-line\\">
+"<div class=\\"n-content-layout__container--in-line\\" data-component=\\"clip-set\\">
   <div
     data-cp-clip-layout=\\"in-line\\"
     data-cp-clip-poster=\\"\\"
@@ -190,7 +188,6 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
         playsinline=\\"\\"
         poster=\\"\\"
         preload=\\"auto\\"
-        tabindex=\\"0\\"
         style=\\"height: fit-content; width: 100%\\"
       >
         <source
@@ -211,7 +208,7 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
 `;
 
 exports[`Clip Snapshot component rendered on server in-line render with attributes 1`] = `
-"<div class=\\"n-content-layout__container--in-line\\">
+"<div class=\\"n-content-layout__container--in-line\\" data-component=\\"clip-set\\">
   <div
     data-cp-clip-layout=\\"in-line\\"
     data-cp-clip-poster=\\"\\"
@@ -251,7 +248,6 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
         loop=\\"\\"
         poster=\\"\\"
         preload=\\"auto\\"
-        tabindex=\\"0\\"
         style=\\"height: fit-content; width: 100%\\"
       >
         <source
@@ -298,7 +294,7 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
 
 exports[`Clip Snapshot component rendered on server mid-grid default render 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-o-grid-colspan=\\"12 S12 M12 L10 XL10\\"
       class=\\"n-content-layout__container--mid-grid\\"
@@ -341,7 +337,6 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
             playsinline=\\"\\"
             poster=\\"\\"
             preload=\\"auto\\"
-            tabindex=\\"0\\"
             style=\\"height: fit-content; width: 100%\\"
           >
             <source
@@ -365,7 +360,7 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
 
 exports[`Clip Snapshot component rendered on server mid-grid render with attributes 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-o-grid-colspan=\\"12 S12 M12 L10 XL10\\"
       class=\\"n-content-layout__container--mid-grid\\"
@@ -409,7 +404,6 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
             loop=\\"\\"
             poster=\\"\\"
             preload=\\"auto\\"
-            tabindex=\\"0\\"
             style=\\"height: fit-content; width: 100%\\"
           >
             <source
@@ -463,7 +457,7 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
 `;
 
 exports[`Clip Snapshot component rendered on server renders multiple video sources 1`] = `
-"<div class=\\"n-content-layout__container--in-line\\">
+"<div class=\\"n-content-layout__container--in-line\\" data-component=\\"clip-set\\">
   <div
     data-cp-clip-layout=\\"in-line\\"
     data-cp-clip-poster=\\"https://whatever/1080x1920.jpg\\"
@@ -502,7 +496,6 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
         playsinline=\\"\\"
         poster=\\"https://whatever/1080x1920.jpg\\"
         preload=\\"auto\\"
-        tabindex=\\"0\\"
         style=\\"aspect-ratio: 1920/1080; width: 100%\\"
       >
         <source
@@ -561,7 +554,7 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
 
 exports[`Clip Snapshot component rendered on server supports new Origami images, fallbacking to the previous implementation 1`] = `
 "<div class=\\"n-content-layout\\" data-layout-width=\\"full-grid\\">
-  <div class=\\"n-content-layout__container\\">
+  <div class=\\"n-content-layout__container\\" data-component=\\"clip-set\\">
     <div
       data-cp-clip-layout=\\"full-grid\\"
       data-cp-clip-poster=\\"\\"
@@ -601,7 +594,6 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
           loop=\\"\\"
           poster=\\"\\"
           preload=\\"auto\\"
-          tabindex=\\"0\\"
           style=\\"height: fit-content; width: 100%\\"
         >
           <source

package/src/components/Clip/test/index.spec.ts

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
+
 import {
   inlineVideo,
   inlineVideoAutoplay,
@@ -47,7 +48,7 @@ const mockVideo = (video) => {
   }
   video.pause = () => {
     clearInterval(playInterval)
-    video.pause = true
+    video.paused = true
     //mock that when we pause the video at least has passed 100ms
     if (video.currentTime === 0) video.currentTime = 100
     video.dispatchEvent(new Event('pause'))
@@ -67,6 +68,10 @@ const mockVideo = (video) => {
     writable: true,
     value: false,
   })
+  Object.defineProperty(video, 'readyState', {
+    writable: true,
+    value: 4,
+  })
   Object.defineProperty(video, 'currentTime', {
     writable: true,
     value: 0,
@@ -715,10 +720,13 @@ describe('Clip', () => {
 
     it('should show pause button when the video is played and loop is true', () => {
       const clip = clips[0]
-      expect(document.body.querySelector('.cp-clip__pause-icon')).toBeFalsy()
+      clip.videoEl.pause()
+      expect(
+        document.body.querySelector('.cp-clip__playpause-icon-pause')
+      ).toBeFalsy()
       clip.videoEl.play()
       expect(
-        document.body.querySelector('.cp-clip__pause-icon-autoplay')
+        document.body.querySelector('.cp-clip__playpause-icon-pause')
       ).toBeTruthy()
     })
 
@@ -736,24 +744,42 @@ describe('Clip', () => {
       clip.videoEl.play()
     })
 
+    it('should toggle the pause button to a play button when the video is paused', () => {
+      const clip = clips[0]
+      clip.videoEl.play()
+      expect(
+        document.body.querySelector('.cp-clip__playpause-icon-play')
+      ).toBeFalsy()
+      clip.videoEl.pause()
+      expect(
+        document.body.querySelector('.cp-clip__playpause-icon-play')
+      ).toBeTruthy()
+    })
+
     it('it should have progress loop indicator', (done) => {
       const clip = clips[0]
       expect(
-        document.body.querySelector('.cp-clip__pause-icon-autoplay-progress')
+        document.body.querySelector(
+          '.cp-clip__playpause-icon-autoplay-progress'
+        )
       ).toBeTruthy()
       expect(
         isVisible(
-          document.body.querySelector('.cp-clip__pause-icon-autoplay-progress')
+          document.body.querySelector(
+            '.cp-clip__playpause-icon-autoplay-progress'
+          )
         )
       ).toEqual(false)
       const listener = () => {
         expect(
-          document.body.querySelector('.cp-clip__pause-icon-autoplay-progress')
+          document.body.querySelector(
+            '.cp-clip__playpause-icon-autoplay-progress'
+          )
         ).toBeTruthy()
         expect(
           isVisible(
             document.body.querySelector(
-              '.cp-clip__pause-icon-autoplay-progress'
+              '.cp-clip__playpause-icon-autoplay-progress'
             )
           )
         ).not.toEqual(true)

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

@@ -0,0 +1,201 @@
+/**
+ * trackEntireRead
+ * @description Track the entire read of a truncated post
+ * @param {HTMLElement} post - The post element
+ */
+class TrackEntireRead {
+  private observer: IntersectionObserver | null = null
+  private readElement: Element | null
+  // data can be any key value pair that needs to be tracked
+  private data: Record<string, string>
+  constructor(readElement: Element, data: Record<string, string>) {
+    this.readElement = readElement as Element
+    this.data = data
+    this.init()
+  }
+
+  private init() {
+    //Intersection observer that observes readElement and when in view tracks the entire read
+    this.observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.handleEntireRead()
+          this.observer?.disconnect()
+        }
+      })
+    })
+    this.observer.observe(this.readElement as Element)
+  }
+
+  private handleEntireRead = () => {
+    const trackingData = {
+      action: 'entire_read',
+      ...this.data,
+    }
+    const event = new CustomEvent('oTracking.event', {
+      detail: trackingData,
+      bubbles: true,
+    })
+    document.body.dispatchEvent(event)
+  }
+
+  destroy(): void {
+    this.observer?.disconnect()
+    this.observer = null
+  }
+}
+export class ExpanderClient {
+  /**
+   * The container element for all the elements that should be showned or be hidden.
+   */
+  public container: HTMLElement | null
+
+  /**
+   * An optional element to which the expander will dispatch the events to.
+   * If not provided, events will not be dispatched.
+   */
+  private dispatchBoundary?: Element | Document | null
+
+  /**
+   * Element that will be showned at the end of the content when the expander is expanded.
+   * We use this to track when the entire post is read.
+   */
+  private endContent: Element | null
+
+  /**
+   * Track the entire read of a truncated post
+   */
+  private trackingEntireRead: TrackEntireRead
+
+  /**
+   * The button that will expand the content
+   */
+  private expanderButton: HTMLElement | null
+
+  /**
+   * The button that will collapse the content
+   */
+  private collapserButton: HTMLElement | null
+
+  /**
+   * The tracking data that will be sent when the entire post is read
+   */
+  private trackingData: Record<string, string>
+
+  /**
+   *
+   * @param el
+   * @param dispatchBoundary
+   */
+
+  constructor(
+    el: HTMLElement,
+    dispatchBoundary?: Element | Document | null,
+    trackingData?: Record<string, string>
+  ) {
+    this.container = el
+    this.trackingData = trackingData || {}
+    this.expanderButton = el.querySelector(
+      '.cp-expander__expand [data-action="expand"]'
+    ) as HTMLElement
+    this.collapserButton = el.querySelector(
+      '.cp-expander__collapse [data-action="collapse"]'
+    ) as HTMLElement
+    this.endContent = el.querySelector('.cp-expander__collapse')
+
+    this.expanderButton?.addEventListener('click', this.handleExpand)
+    this.collapserButton?.addEventListener('click', this.handleCollapse)
+
+    this.container.classList.replace(
+      'cp-expander--not-initialised',
+      'cp-expander--initialised'
+    )
+    this.dispatchBoundary = dispatchBoundary || this.container
+    ;(this.trackingData['post_id'] =
+      this.container
+        .querySelector('[data-trackable-context-truncated-id]')
+        ?.getAttribute('data-trackable-context-truncated-id') || ''),
+      (this.trackingEntireRead = new TrackEntireRead(
+        this.endContent as Element,
+        this.trackingData
+      ))
+  }
+
+  expand() {
+    this.container?.setAttribute('data-state', 'expanded')
+    this.dispatchBoundary?.dispatchEvent(
+      new CustomEvent('expander:expanded', {
+        bubbles: true,
+        detail: {
+          component: this,
+        },
+      })
+    )
+  }
+
+  collapse() {
+    this.container?.setAttribute('data-state', 'collapsed')
+    this.container?.parentElement?.parentElement?.scrollIntoView()
+    this.dispatchBoundary?.dispatchEvent(
+      new CustomEvent('expander:collapsed', {
+        bubbles: true,
+        detail: {
+          component: this,
+        },
+      })
+    )
+  }
+
+  private handleExpand = (e: Event) => {
+    e.preventDefault()
+    this.expand()
+    this.expanderButton?.setAttribute('aria-expanded', 'true')
+    this.expanderButton?.setAttribute('aria-hidden', 'true')
+    this.collapserButton?.setAttribute('aria-expanded', 'true')
+    this.collapserButton?.setAttribute('aria-hidden', 'false')
+  }
+  private handleCollapse = (e: Event) => {
+    e.preventDefault()
+    this.collapse()
+    this.expanderButton?.setAttribute('aria-expanded', 'false')
+    this.expanderButton?.setAttribute('aria-hidden', 'false')
+    this.collapserButton?.setAttribute('aria-expanded', 'false')
+    this.collapserButton?.setAttribute('aria-hidden', 'true')
+  }
+
+  destroy(): void {
+    this.container?.setAttribute('data-state', 'collapsed')
+    this.container
+      ?.querySelector('.cp-expander__expand')
+      ?.removeEventListener('click', this.expand)
+    this.container
+      ?.querySelector('.cp-expander__collapse')
+      ?.removeEventListener('click', this.collapse)
+    this.container?.classList.remove('cp-expander--initialised')
+    this.trackingEntireRead.destroy()
+  }
+
+  static init(data?: {
+    rootElement?: HTMLElement | null
+    dispatchBoundary?: Element | Document | null
+    trackingData?: Record<string, string>
+  }): ExpanderClient[] {
+    const { rootElement, dispatchBoundary, trackingData } = data || {}
+    const root = rootElement || document.body
+
+    return (Array.from(
+      root.querySelectorAll(
+        ':not(.cp-expander--initialised)[data-component="expander"]'
+      )
+    ).map((el: Element) => {
+      if (!el.classList.contains('expander--initialised')) {
+        return new ExpanderClient(
+          el as HTMLElement,
+          dispatchBoundary,
+          trackingData
+        )
+      }
+    }) || []) as ExpanderClient[]
+  }
+}
+export default ExpanderClient

package/src/components/Expander/client/main.scss

@@ -0,0 +1,162 @@
+@import '@financial-times/o-icons/main';
+@import '@financial-times/o-colors/main';
+@import '@financial-times/o-grid/main';
+@import '@financial-times/o-spacing/main';
+
+$numberIntroductoryElements: 1;
+$dataComponentVisibleElements: (
+  'clip-set',
+  'recommended',
+  'flourish',
+  'image-set',
+  'video',
+  'youtube-video',
+  'table'
+);
+$alwaysVisibleComponentSelectors: ();
+
+@each $component-name in $dataComponentVisibleElements {
+  $alwaysVisibleComponentSelectors: append(
+    $alwaysVisibleComponentSelectors,
+    '[data-component="#{$component-name}"]'
+  );
+}
+@mixin AlwaysVisibleElements {
+  @each $component in $alwaysVisibleComponentSelectors {
+    #{$component} {
+      display: block;
+    }
+  }
+}
+@mixin IntroductoryElements {
+  & > :nth-child(-n + #{$numberIntroductoryElements + 1}):not(.cp-expander__expand) {
+    display: block;
+    order:1
+  }
+  & > :nth-child(n + #{$numberIntroductoryElements + 1}) {
+    order:3
+  }
+}
+@mixin expandeAndCollapse {
+  &[data-state='expanded'] {
+    .cp-expander-content {
+      // Show all the hidden children...
+      & > * {
+        display: block;
+      }
+      > .cp-expander__expand {
+        display: none;
+        }
+    }
+   
+
+  }
+
+  &[data-state='collapsed'] {
+    .cp-expander-content {
+      // Hide everything that comes after the expander...
+      // ... except the always visible children
+      & > * {
+        display: none;
+      }
+      &:target > * {
+        display: block;
+      }
+
+      > .cp-expander__expand {
+        display: block;
+        order: 2;
+      }
+
+      > .cp-expander__collapse {
+        display: none;
+      }
+
+      @include AlwaysVisibleElements;
+
+      @include IntroductoryElements;
+
+    }
+   
+  }
+}
+
+@mixin InnerStyles {
+
+      &.cp-expander--not-initialised {
+
+        .cp-expander__expand,
+        .cp-expander__collapse {
+          display: none;
+        }
+
+          .cp-expander-content {
+            // Target is used for the Core experience.
+            // It permits us to hide elements server-side via CSS preventing Cumulative Shift but it is also a fully functional solution without Javascript
+            &:target{
+              .cp-expander__collapse{
+                display: block;
+              }
+              .cp-expander__expand{
+                display: none;
+              }
+            }
+          }
+      }
+      .cp-expander__expand,
+        .cp-expander__collapse {
+          display: block;
+          padding-bottom: oSpacingByName('s6');
+          > a {
+            $icon-color: oColorsByName('ft-grey');
+            --_o-typography-body-color: $icon-color;
+            font-feature-settings: 'clig' off, 'liga' off;
+            
+            @include oTypographyBody();
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 20px;
+            &:hover {
+              
+              cursor: pointer;
+            }
+      
+            &:after {
+              content: '';
+              @include oIconsContent('arrow-down', $icon-color, $size: 20);
+              padding: 0 4px;
+              vertical-align: middle;
+            }
+          }
+        }
+    
+        .cp-expander__collapse a:after {
+          transform: rotate(180deg);
+        }
+
+      .cp-expander-content {
+        display: flex;
+        flex-direction: column;
+      }
+
+      @include expandeAndCollapse;
+    
+
+}
+
+.cp-expander{
+  &.cp-expander--mobile-only {
+    .cp-expander__expand,
+    .cp-expander__collapse {
+      display: none;
+    }
+    @include oGridRespondTo($until: S) {
+        @include InnerStyles;
+    }
+  }
+
+  &.cp-expander--all-resolutions {
+    @include InnerStyles;
+  }
+}
+

package/src/components/Expander/index.tsx

@@ -0,0 +1,74 @@
+import classnames from 'classnames'
+import React from 'react'
+
+export interface ExpanderProps extends React.PropsWithChildren {
+  /** The initial state of the expander */
+  state?: 'expanded' | 'collapsed'
+  /** The label for the Expand CTA */
+  expandLabel?: string
+  /** The label for the collapse CTA */
+  collapseLabel?: string
+  /** Show the expander only on mobile resolutions  */
+  onlyMobile?: boolean
+  /** Id of the component */
+  id: string
+}
+// React functional component with children
+export const ExpanderServer: React.FC<ExpanderProps> = ({
+  state = 'collapsed', // default value for "state
+  children,
+  id,
+  expandLabel = 'Expand',
+  collapseLabel = 'Collapse',
+  onlyMobile = false,
+}) => {
+  return (
+    <div
+      className={classnames({
+        'cp-expander': true,
+        'cp-expander--mobile-only': onlyMobile,
+        'cp-expander--all-resolutions': !onlyMobile,
+        'cp-expander--not-initialised': true,
+      })}
+      data-component="expander"
+      data-state={state}
+      id={`${id}__container`}
+    >
+      <div id={id} className="cp-expander-content">
+        <div className="cp-expander__expand">
+          <a
+            data-trackable="truncated-post"
+            data-trackable-context-truncated-post="expand"
+            data-trackable-context-truncated-id={id}
+            className="cp-expander__link"
+            href={`#${id}`}
+            aria-expanded={state === 'expanded' ? true : false}
+            aria-controls={id}
+            aria-hidden={state === 'expanded' ? true : false}
+            data-action="expand"
+          >
+            {expandLabel}
+          </a>
+        </div>
+        {children}
+        <div className="cp-expander__collapse">
+          <a
+            data-trackable="truncated-post"
+            data-trackable-context-truncated-post="collapse"
+            data-trackable-context-truncated-id={id}
+            href={`#${id}__container`}
+            className="cp-expander__link"
+            aria-expanded={state === 'expanded' ? true : false}
+            aria-controls={id}
+            aria-hidden={state === 'expanded' ? false : true}
+            data-action="collapse"
+          >
+            {collapseLabel}
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ExpanderServer