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

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

@@ -763,6 +763,51 @@ describe('Clip', () => {
       clip.videoEl.addEventListener('playing', listener)
       clip.videoEl.play()
     })
+
+    it('shows loading indicator when waiting event is triggered', (done) => {
+      const clip = clips[0]
+      const spy = jest.spyOn(clip, 'fadeIn')
+
+      clip.videoEl.dispatchEvent(new Event('waiting'))
+
+      setTimeout(() => {
+        expect(clip.containerEl.classList.contains('cp-clip--loading')).toBe(
+          true
+        )
+        expect(spy).toHaveBeenCalled()
+        done()
+      }, 100)
+    })
+
+    it('hides loading indicator when canplay event is triggered', (done) => {
+      const clip = clips[0]
+      const spy = jest.spyOn(clip, 'fadeOut')
+
+      clip.videoEl.dispatchEvent(new Event('canplay'))
+
+      setTimeout(() => {
+        expect(clip.containerEl.classList.contains('cp-clip--loading')).toBe(
+          false
+        )
+        expect(spy).toHaveBeenCalledWith(true)
+        done()
+      }, 100)
+    })
+
+    it('hides loading indicator when canplaythrough event is triggered', (done) => {
+      const clip = clips[0]
+      const spy = jest.spyOn(clip, 'fadeOut')
+
+      clip.videoEl.dispatchEvent(new Event('canplaythrough'))
+
+      setTimeout(() => {
+        expect(clip.containerEl.classList.contains('cp-clip--loading')).toBe(
+          false
+        )
+        expect(spy).toHaveBeenCalledWith(true)
+        done()
+      }, 100)
+    })
   })
 
   describe('Captions, credits, and descriptions', () => {

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

@@ -0,0 +1,197 @@
+/**
+ * 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.
+   */
+  private container: Element | 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: Element,
+    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.container,
+        },
+      })
+    )
+  }
+
+  collapse() {
+    this.container?.setAttribute('data-state', 'collapsed')
+    this.container?.scrollIntoView()
+    this.dispatchBoundary?.dispatchEvent(
+      new CustomEvent('expander:collapsed', {
+        bubbles: true,
+        detail: {
+          component: this.container,
+        },
+      })
+    )
+  }
+
+  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, 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" aria-describedby={id}>
+        <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

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

@@ -0,0 +1,225 @@
+// 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
+    aria-describedby="test-id"
+    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
+    aria-describedby="test-id"
+    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
+    aria-describedby="test-id"
+    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
+    aria-describedby="test-id"
+    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>
+`;