@financial-times/cp-content-pipeline-ui 9.12.1 → 9.13.0

package/src/components/content-tree/Clip/template/component.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { ClipTag, ContentLayout, Container } from '../components'
+import { ContentLayout } from '../../../ContentLayout'
+import { ClipTag } from '../components'
 import { ContentProps } from '../../../types'
 import type * as ComponentWorkarounds from '../../Workarounds'
 
@@ -21,7 +22,7 @@ export interface ClipPropsOld {
   clips?: ComponentWorkarounds.Clip[]
   poster?: string
   posterAlt?: string
-  dataLayout: string
+  dataLayout: 'in-line' | 'mid-grid' | 'full-grid'
   description?: string
   muted?: boolean
   caption?: string
@@ -90,28 +91,26 @@ const ClipComponent: React.FC<ClipProps> = ({
   }
 
   return (
-    <ContentLayout dataLayout={content.dataLayout}>
-      <Container dataLayout={content.dataLayout}>
-        <ClipTag
-          id={id}
-          dataLayout={content.dataLayout}
-          description={content.description ?? ''}
-          poster={posterAttribute}
-          autoplay={content.autoplay}
-          noAudio={noAudio}
-          loop={content.loop}
-          muted={content.muted}
-          clip={clip}
-          credits={content.credits ?? ''}
-          caption={content.caption ?? ''}
-          systemTitle={systemTitle}
-          accessibility={accessibility}
-          preload={preload}
-          dataTrackable="next-article-cp-clip"
-          maxClipWidth={maxClipWidth}
-          fragmentIdentifier={content.fragmentIdentifier ?? ''}
-        />
-      </Container>
+    <ContentLayout dataLayout={content.dataLayout} dataComponent="clip-set">
+      <ClipTag
+        id={id}
+        dataLayout={content.dataLayout}
+        description={content.description ?? ''}
+        poster={posterAttribute}
+        autoplay={content.autoplay}
+        noAudio={noAudio}
+        loop={content.loop}
+        muted={content.muted}
+        clip={clip}
+        credits={content.credits ?? ''}
+        caption={content.caption ?? ''}
+        systemTitle={systemTitle}
+        accessibility={accessibility}
+        preload={preload}
+        dataTrackable="next-article-cp-clip"
+        maxClipWidth={maxClipWidth}
+        fragmentIdentifier={content.fragmentIdentifier ?? ''}
+      />
     </ContentLayout>
   )
 }

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

@@ -1,5 +1,282 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Clip Snapshot component rendered on server ContentLayout integration tests edge case: custom dataLayout value should wrap in ContentLayout 1`] = `
+"<div class="n-content-layout__container--in-line" data-component="clip-set">
+  <div
+    data-cp-clip-layout="custom-layout"
+    data-cp-clip-poster=""
+    data-cp-clip-no-audio="false"
+    data-cp-clip-no-description="false"
+    data-cp-clip-caption=""
+    data-cp-clip-no-info-box="false"
+    data-cp-clip-no-caption="false"
+    data-cp-clip-closed-caption="false"
+    class="cp-clip"
+    data-trackable="next-article-cp-clip"
+    data-o-component="cp-clip"
+    data-cp-clip-id="localhost:8080/fakevideo.mpg"
+    data-cp-clip-system-title=""
+    id=""
+  >
+    <div
+      data-o-component="o-expander"
+      class="o-expander o-expander__info-box"
+      data-o-expander-shrink-to="hidden"
+      data-trackable="clip-info-box"
+      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 o-expander__toggle-empty"
+      >
+        <span class="o-expander__visually-hidden o3-type-detail"
+          >Show video info</span
+        >
+      </button>
+      <div class="o-expander__content video-info"></div>
+    </div>
+    <div class="cp-clip__video-container">
+      <video
+        class="cp-clip__video"
+        controls=""
+        controlsList="nodownload noremoteplayback noplaybackrate"
+        disablepictureinpicture=""
+        disableremoteplayback=""
+        playsinline=""
+        poster=""
+        preload="auto"
+        id="clip-localhost:8080/fakevideo.mpg"
+        crossorigin="anonymous"
+        style="height: fit-content; width: 100%"
+      >
+        <source
+          id="video-source-0-localhost:8080/fakevideo.mpg"
+          data-cp-component="cp-clip__video-source"
+          src="localhost:8080/fakevideo.mpg"
+          type="video/mp4"
+        />
+      </video>
+    </div>
+    <div
+      class="cp-clip__video-meta-info"
+      data-cp-clip-video-meta-info="true"
+    ></div>
+  </div>
+</div>
+"
+`;
+
+exports[`Clip Snapshot component rendered on server ContentLayout integration tests full-grid default render - should wrap in ContentLayout with proper classes 1`] = `
+"<div class="n-content-layout" data-layout-width="full-grid">
+  <div class="n-content-layout__container" data-component="clip-set">
+    <div
+      data-cp-clip-layout="full-grid"
+      data-cp-clip-poster=""
+      data-cp-clip-no-audio="false"
+      data-cp-clip-no-description="false"
+      data-cp-clip-caption=""
+      data-cp-clip-no-info-box="false"
+      data-cp-clip-no-caption="false"
+      data-cp-clip-closed-caption="false"
+      class="cp-clip"
+      data-trackable="next-article-cp-clip"
+      data-o-component="cp-clip"
+      data-cp-clip-id="localhost:8080/fakevideo.mpg"
+      data-cp-clip-system-title=""
+      id=""
+    >
+      <div
+        data-o-component="o-expander"
+        class="o-expander o-expander__info-box"
+        data-o-expander-shrink-to="hidden"
+        data-trackable="clip-info-box"
+        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 o-expander__toggle-empty"
+        >
+          <span class="o-expander__visually-hidden o3-type-detail"
+            >Show video info</span
+          >
+        </button>
+        <div class="o-expander__content video-info"></div>
+      </div>
+      <div class="cp-clip__video-container">
+        <video
+          class="cp-clip__video"
+          controls=""
+          controlsList="nodownload noremoteplayback noplaybackrate"
+          disablepictureinpicture=""
+          disableremoteplayback=""
+          playsinline=""
+          poster=""
+          preload="auto"
+          id="clip-localhost:8080/fakevideo.mpg"
+          crossorigin="anonymous"
+          style="height: fit-content; width: 100%"
+        >
+          <source
+            id="video-source-0-localhost:8080/fakevideo.mpg"
+            data-cp-component="cp-clip__video-source"
+            src="localhost:8080/fakevideo.mpg"
+            type="video/mp4"
+          />
+        </video>
+      </div>
+      <div
+        class="cp-clip__video-meta-info"
+        data-cp-clip-video-meta-info="true"
+      ></div>
+    </div>
+  </div>
+</div>
+"
+`;
+
+exports[`Clip Snapshot component rendered on server ContentLayout integration tests in-line render - should not wrap in ContentLayout div 1`] = `
+"<div class="n-content-layout__container--in-line" data-component="clip-set">
+  <div
+    data-cp-clip-layout="in-line"
+    data-cp-clip-poster=""
+    data-cp-clip-no-audio="false"
+    data-cp-clip-no-description="false"
+    data-cp-clip-caption=""
+    data-cp-clip-no-info-box="false"
+    data-cp-clip-no-caption="false"
+    data-cp-clip-closed-caption="false"
+    class="cp-clip"
+    data-trackable="next-article-cp-clip"
+    data-o-component="cp-clip"
+    data-cp-clip-id="localhost:8080/fakevideo.mpg"
+    data-cp-clip-system-title=""
+    id=""
+  >
+    <div
+      data-o-component="o-expander"
+      class="o-expander o-expander__info-box"
+      data-o-expander-shrink-to="hidden"
+      data-trackable="clip-info-box"
+      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 o-expander__toggle-empty"
+      >
+        <span class="o-expander__visually-hidden o3-type-detail"
+          >Show video info</span
+        >
+      </button>
+      <div class="o-expander__content video-info"></div>
+    </div>
+    <div class="cp-clip__video-container">
+      <video
+        class="cp-clip__video"
+        controls=""
+        controlsList="nodownload noremoteplayback noplaybackrate"
+        disablepictureinpicture=""
+        disableremoteplayback=""
+        playsinline=""
+        poster=""
+        preload="auto"
+        id="clip-localhost:8080/fakevideo.mpg"
+        crossorigin="anonymous"
+        style="height: fit-content; width: 100%"
+      >
+        <source
+          id="video-source-0-localhost:8080/fakevideo.mpg"
+          data-cp-component="cp-clip__video-source"
+          src="localhost:8080/fakevideo.mpg"
+          type="video/mp4"
+        />
+      </video>
+    </div>
+    <div
+      class="cp-clip__video-meta-info"
+      data-cp-clip-video-meta-info="true"
+    ></div>
+  </div>
+</div>
+"
+`;
+
+exports[`Clip Snapshot component rendered on server ContentLayout integration tests mid-grid default render - should wrap in ContentLayout with nested Container structure 1`] = `
+"<div class="n-content-layout" data-layout-width="full-grid">
+  <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"
+    >
+      <div
+        data-cp-clip-layout="mid-grid"
+        data-cp-clip-poster=""
+        data-cp-clip-no-audio="false"
+        data-cp-clip-no-description="false"
+        data-cp-clip-caption=""
+        data-cp-clip-no-info-box="false"
+        data-cp-clip-no-caption="false"
+        data-cp-clip-closed-caption="false"
+        class="cp-clip"
+        data-trackable="next-article-cp-clip"
+        data-o-component="cp-clip"
+        data-cp-clip-id="localhost:8080/fakevideo.mpg"
+        data-cp-clip-system-title=""
+        id=""
+      >
+        <div
+          data-o-component="o-expander"
+          class="o-expander o-expander__info-box"
+          data-o-expander-shrink-to="hidden"
+          data-trackable="clip-info-box"
+          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 o-expander__toggle-empty"
+          >
+            <span class="o-expander__visually-hidden o3-type-detail"
+              >Show video info</span
+            >
+          </button>
+          <div class="o-expander__content video-info"></div>
+        </div>
+        <div class="cp-clip__video-container">
+          <video
+            class="cp-clip__video"
+            controls=""
+            controlsList="nodownload noremoteplayback noplaybackrate"
+            disablepictureinpicture=""
+            disableremoteplayback=""
+            playsinline=""
+            poster=""
+            preload="auto"
+            id="clip-localhost:8080/fakevideo.mpg"
+            crossorigin="anonymous"
+            style="height: fit-content; width: 100%"
+          >
+            <source
+              id="video-source-0-localhost:8080/fakevideo.mpg"
+              data-cp-component="cp-clip__video-source"
+              src="localhost:8080/fakevideo.mpg"
+              type="video/mp4"
+            />
+          </video>
+        </div>
+        <div
+          class="cp-clip__video-meta-info"
+          data-cp-clip-video-meta-info="true"
+        ></div>
+      </div>
+    </div>
+  </div>
+</div>
+"
+`;
+
 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" data-component="clip-set">

package/src/components/content-tree/Clip/test/snapshot.spec.tsx

@@ -25,6 +25,46 @@ describe('Clip Snapshot', () => {
     const url = 'localhost:8080/fakevideo.mpg'
     const poster = 'localhost:8080/fakeposter.jpg'
 
+    describe('ContentLayout integration tests', () => {
+      it('in-line render - should not wrap in ContentLayout div', () => {
+        const tree = renderer
+          .create(
+            <ClipServer content={{ url, dataLayout: 'in-line' }}></ClipServer>
+          )
+          .toJSON()
+        expect(formatString(tree)).toMatchSnapshot()
+      })
+
+      it('full-grid default render - should wrap in ContentLayout with proper classes', () => {
+        const tree = renderer
+          .create(
+            <ClipServer content={{ url, dataLayout: 'full-grid' }}></ClipServer>
+          )
+          .toJSON()
+        expect(formatString(tree)).toMatchSnapshot()
+      })
+
+      it('mid-grid default render - should wrap in ContentLayout with nested Container structure', () => {
+        const tree = renderer
+          .create(
+            <ClipServer content={{ url, dataLayout: 'mid-grid' }}></ClipServer>
+          )
+          .toJSON()
+        expect(formatString(tree)).toMatchSnapshot()
+      })
+
+      it('edge case: custom dataLayout value should wrap in ContentLayout', () => {
+        const tree = renderer
+          .create(
+            <ClipServer
+              content={{ url, dataLayout: 'custom-layout' }}
+            ></ClipServer>
+          )
+          .toJSON()
+        expect(formatString(tree)).toMatchSnapshot()
+      })
+    })
+
     it('in-line render', () => {
       const tree = renderer
         .create(