@financial-times/cp-content-pipeline-ui 6.6.2 → 6.7.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=\\"\\"
@@ -23,11 +23,11 @@ exports[`Clip Snapshot component rendered on server full-grid default render 1`]
         class=\\"o-expander o-expander__info-box\\"
         data-o-expander-shrink-to=\\"hidden\\"
         data-trackable=\\"clip-info-box\\"
-        data-o-expander-collapsed-toggle-text=\\" \\"
-        data-o-expander-expanded-toggle-text=\\" \\"
+        data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
+        data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
       >
         <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-          <span>Expand</span>
+          <span class=\\"o-expander__visually-hidden\\">Show video info</span>
         </button>
         <div class=\\"o-expander__content video-info\\"></div>
       </div>
@@ -64,7 +64,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=\\"\\"
@@ -85,11 +85,11 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
         class=\\"o-expander o-expander__info-box\\"
         data-o-expander-shrink-to=\\"hidden\\"
         data-trackable=\\"clip-info-box\\"
-        data-o-expander-collapsed-toggle-text=\\" \\"
-        data-o-expander-expanded-toggle-text=\\" \\"
+        data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
+        data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
       >
         <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-          <span>Expand</span>
+          <span class=\\"o-expander__visually-hidden\\">Show video info</span>
         </button>
         <div class=\\"o-expander__content video-info\\"></div>
       </div>
@@ -121,11 +121,13 @@ exports[`Clip Snapshot component rendered on server full-grid render with attrib
           class=\\"o-expander o-expander__description-box\\"
           data-o-expander-shrink-to=\\"hidden\\"
           data-trackable=\\"description-box\\"
-          data-o-expander-collapsed-toggle-text=\\" \\"
-          data-o-expander-expanded-toggle-text=\\" \\"
+          data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video description&lt;/span&gt;\\"
+          data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
         >
           <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-            <span>Expand</span>
+            <span class=\\"o-expander__visually-hidden\\"
+              >Show video description</span
+            >
           </button>
           <div class=\\"o-expander__content\\">
             <div class=\\"video-description\\">
@@ -149,7 +151,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=\\"\\"
@@ -170,11 +172,11 @@ exports[`Clip Snapshot component rendered on server in-line render 1`] = `
       class=\\"o-expander o-expander__info-box\\"
       data-o-expander-shrink-to=\\"hidden\\"
       data-trackable=\\"clip-info-box\\"
-      data-o-expander-collapsed-toggle-text=\\" \\"
-      data-o-expander-expanded-toggle-text=\\" \\"
+      data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
+      data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
     >
       <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-        <span>Expand</span>
+        <span class=\\"o-expander__visually-hidden\\">Show video info</span>
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
     </div>
@@ -209,7 +211,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=\\"\\"
@@ -230,11 +232,11 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
       class=\\"o-expander o-expander__info-box\\"
       data-o-expander-shrink-to=\\"hidden\\"
       data-trackable=\\"clip-info-box\\"
-      data-o-expander-collapsed-toggle-text=\\" \\"
-      data-o-expander-expanded-toggle-text=\\" \\"
+      data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
+      data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
     >
       <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-        <span>Expand</span>
+        <span class=\\"o-expander__visually-hidden\\">Show video info</span>
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
     </div>
@@ -266,11 +268,13 @@ exports[`Clip Snapshot component rendered on server in-line render with attribut
         class=\\"o-expander o-expander__description-box\\"
         data-o-expander-shrink-to=\\"hidden\\"
         data-trackable=\\"description-box\\"
-        data-o-expander-collapsed-toggle-text=\\" \\"
-        data-o-expander-expanded-toggle-text=\\" \\"
+        data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video description&lt;/span&gt;\\"
+        data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
       >
         <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-          <span>Expand</span>
+          <span class=\\"o-expander__visually-hidden\\"
+            >Show video description</span
+          >
         </button>
         <div class=\\"o-expander__content\\">
           <div class=\\"video-description\\">
@@ -294,7 +298,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\\"
@@ -319,11 +323,11 @@ exports[`Clip Snapshot component rendered on server mid-grid default render 1`]
           class=\\"o-expander o-expander__info-box\\"
           data-o-expander-shrink-to=\\"hidden\\"
           data-trackable=\\"clip-info-box\\"
-          data-o-expander-collapsed-toggle-text=\\" \\"
-          data-o-expander-expanded-toggle-text=\\" \\"
+          data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
+          data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
         >
           <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-            <span>Expand</span>
+            <span class=\\"o-expander__visually-hidden\\">Show video info</span>
           </button>
           <div class=\\"o-expander__content video-info\\"></div>
         </div>
@@ -361,7 +365,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\\"
@@ -386,11 +390,11 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
           class=\\"o-expander o-expander__info-box\\"
           data-o-expander-shrink-to=\\"hidden\\"
           data-trackable=\\"clip-info-box\\"
-          data-o-expander-collapsed-toggle-text=\\" \\"
-          data-o-expander-expanded-toggle-text=\\" \\"
+          data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
+          data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
         >
           <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-            <span>Expand</span>
+            <span class=\\"o-expander__visually-hidden\\">Show video info</span>
           </button>
           <div class=\\"o-expander__content video-info\\"></div>
         </div>
@@ -425,14 +429,16 @@ exports[`Clip Snapshot component rendered on server mid-grid render with attribu
             class=\\"o-expander o-expander__description-box\\"
             data-o-expander-shrink-to=\\"hidden\\"
             data-trackable=\\"description-box\\"
-            data-o-expander-collapsed-toggle-text=\\" \\"
-            data-o-expander-expanded-toggle-text=\\" \\"
+            data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video description&lt;/span&gt;\\"
+            data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
           >
             <button
               data-trackable=\\"toggle-open-close\\"
               class=\\"o-expander__toggle\\"
             >
-              <span>Expand</span>
+              <span class=\\"o-expander__visually-hidden\\"
+                >Show video description</span
+              >
             </button>
             <div class=\\"o-expander__content\\">
               <div class=\\"video-description\\">
@@ -457,7 +463,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\\"
@@ -478,11 +484,11 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
       class=\\"o-expander o-expander__info-box\\"
       data-o-expander-shrink-to=\\"hidden\\"
       data-trackable=\\"clip-info-box\\"
-      data-o-expander-collapsed-toggle-text=\\" \\"
-      data-o-expander-expanded-toggle-text=\\" \\"
+      data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
+      data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
     >
       <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-        <span>Expand</span>
+        <span class=\\"o-expander__visually-hidden\\">Show video info</span>
       </button>
       <div class=\\"o-expander__content video-info\\"></div>
     </div>
@@ -525,11 +531,13 @@ exports[`Clip Snapshot component rendered on server renders multiple video sourc
         class=\\"o-expander o-expander__description-box\\"
         data-o-expander-shrink-to=\\"hidden\\"
         data-trackable=\\"description-box\\"
-        data-o-expander-collapsed-toggle-text=\\" \\"
-        data-o-expander-expanded-toggle-text=\\" \\"
+        data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video description&lt;/span&gt;\\"
+        data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
       >
         <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-          <span>Expand</span>
+          <span class=\\"o-expander__visually-hidden\\"
+            >Show video description</span
+          >
         </button>
         <div class=\\"o-expander__content\\">
           <div class=\\"video-description\\">
@@ -553,7 +561,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=\\"\\"
@@ -574,11 +582,11 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
         class=\\"o-expander o-expander__info-box\\"
         data-o-expander-shrink-to=\\"hidden\\"
         data-trackable=\\"clip-info-box\\"
-        data-o-expander-collapsed-toggle-text=\\" \\"
-        data-o-expander-expanded-toggle-text=\\" \\"
+        data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video info&lt;/span&gt;\\"
+        data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video info&lt;/span&gt;\\"
       >
         <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-          <span>Expand</span>
+          <span class=\\"o-expander__visually-hidden\\">Show video info</span>
         </button>
         <div class=\\"o-expander__content video-info\\"></div>
       </div>
@@ -610,11 +618,13 @@ exports[`Clip Snapshot component rendered on server supports new Origami images,
           class=\\"o-expander o-expander__description-box\\"
           data-o-expander-shrink-to=\\"hidden\\"
           data-trackable=\\"description-box\\"
-          data-o-expander-collapsed-toggle-text=\\" \\"
-          data-o-expander-expanded-toggle-text=\\" \\"
+          data-o-expander-collapsed-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Show video description&lt;/span&gt;\\"
+          data-o-expander-expanded-toggle-text=\\"&lt;span class=&#x27;o-expander__visually-hidden&#x27;&gt;Hide video description&lt;/span&gt;\\"
         >
           <button data-trackable=\\"toggle-open-close\\" class=\\"o-expander__toggle\\">
-            <span>Expand</span>
+            <span class=\\"o-expander__visually-hidden\\"
+              >Show video description</span
+            >
           </button>
           <div class=\\"o-expander__content\\">
             <div class=\\"video-description\\">

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