@financial-times/cp-content-pipeline-ui 6.15.6 → 7.0.0

package/src/components/Clip/test/fixtures.ts

@@ -5,108 +5,145 @@ if (typeof global.TextEncoder === 'undefined') {
 import Clip from '../template/index'
 
 export const inlineVideo = Clip({
-  dataLayout: 'in-line',
-  url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
-  description:
-    ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
-  poster:
-    'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
-  caption: 'Aenean lobortis volutpat nunc vitae elementum',
+  content: {
+    type: 'clip',
+    id: '',
+    dataLayout: 'in-line',
+    url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
+    description:
+      ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
+    poster:
+      'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
+    posterAlt: '',
+    posterCredits: '',
+    caption: 'Aenean lobortis volutpat nunc vitae elementum',
+    autoplay: false,
+    muted: false,
+    loop: false,
+    credits: '',
+  },
 })
 export const inlineVideoAutoplay = Clip({
-  dataLayout: 'in-line',
-  url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
-  description:
-    ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
-  poster:
-    'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
-  caption: 'Aenean lobortis volutpat nunc vitae elementum',
-  autoplay: true,
-  muted: true,
-  loop: true,
-  credits: 'Copyright Line',
-  accessibility: {
-    captions: [
-      {
-        url: 'https://next-media-api.ft.com/captions/16862228218010.vtt',
-      },
-    ],
+  content: {
+    type: 'clip',
+    id: '',
+    dataLayout: 'in-line',
+    url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
+    description:
+      ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
+    poster:
+      'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
+    posterAlt: '',
+    posterCredits: '',
+    caption: 'Aenean lobortis volutpat nunc vitae elementum',
+    autoplay: true,
+    muted: true,
+    loop: true,
+    credits: 'Copyright Line',
+    accessibility: {
+      captions: [
+        {
+          url: 'https://next-media-api.ft.com/captions/16862228218010.vtt',
+        },
+      ],
+    },
   },
 })
 export const inlineVideoNoAudio = Clip({
-  dataLayout: 'in-line',
-  url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
-  description:
-    ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
-  poster:
-    'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
-  caption: 'Aenean lobortis volutpat nunc vitae elementum',
-  autoplay: true,
-  muted: true,
-  loop: true,
-  noAudio: true,
-  credits: 'Copyright Line',
-  accessibility: {
-    captions: [
-      {
-        url: 'https://next-media-api.ft.com/captions/16862228218010.vtt',
-      },
-    ],
+  content: {
+    type: 'clip',
+    id: '',
+    dataLayout: 'in-line',
+    url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
+    description:
+      ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
+    poster:
+      'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
+    posterAlt: '',
+    posterCredits: '',
+    caption: 'Aenean lobortis volutpat nunc vitae elementum',
+    autoplay: true,
+    muted: true,
+    loop: true,
+    credits: 'Copyright Line',
+    accessibility: {
+      captions: [
+        {
+          url: 'https://next-media-api.ft.com/captions/16862228218010.vtt',
+        },
+      ],
+    },
+    noAudio: true,
   },
 })
 
 export const teaserClipWithoutExpander = Clip({
-  dataLayout: 'in-line',
-  url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
-  description: '',
-  poster:
-    'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
-  caption: '',
+  content: {
+    type: 'clip',
+    id: '',
+    dataLayout: 'in-line',
+    url: 'https://d1e00ek4ebabms.cloudfront.net/production/84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png',
+    description: '',
+    poster:
+      'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
+    posterAlt: '',
+    posterCredits: '',
+    caption: '',
+    autoplay: false,
+    muted: false,
+    loop: false,
+    credits: '',
+  },
   preset: 'thumbnail',
 })
 
 export const teaserClipWithMultipleSources = Clip({
-  dataLayout: 'in-line',
-  description:
-    ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
-  poster:
-    'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
-  caption: 'Aenean lobortis volutpat nunc vitae elementum',
-  autoplay: true,
-  muted: true,
-  loop: true,
+  content: {
+    type: 'clip',
+    id: '',
+    url: '',
+    dataLayout: 'in-line',
+    description:
+      ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
+    poster:
+      'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
+    posterAlt: '',
+    posterCredits: '',
+    caption: 'Aenean lobortis volutpat nunc vitae elementum',
+    autoplay: true,
+    muted: true,
+    loop: true,
+    credits: 'Copyright Line',
+    clips: [
+      {
+        dataSource: [
+          {
+            binaryUrl:
+              'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
+            mediaType: 'video/mp4',
+          },
+          {
+            binaryUrl:
+              'https://ark-clips-staging.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
+            mediaType: 'video/mp4',
+          },
+          {
+            binaryUrl:
+              'https://k-clips-staging.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
+            mediaType: 'video/mp4',
+          },
+        ],
+      },
+      {
+        dataSource: [
+          {
+            binaryUrl:
+              'https://ark-clips-staging.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
+            mediaType: 'video/mp4',
+          },
+        ],
+      },
+    ],
+  },
   preload: 'none',
-  credits: 'Copyright Line',
-  clips: [
-    {
-      dataSource: [
-        {
-          binaryUrl:
-            'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
-          mediaType: 'video/mp4',
-        },
-        {
-          binaryUrl:
-            'https://ark-clips-staging.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
-          mediaType: 'video/mp4',
-        },
-        {
-          binaryUrl:
-            'https://k-clips-staging.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
-          mediaType: 'video/mp4',
-        },
-      ],
-      id: 'inline-1',
-    },
-    {
-      dataSource: [
-        {
-          binaryUrl:
-            'https://ark-clips-staging.s3.eu-west-1.amazonaws.com/raw-media-files/17018837600780',
-          mediaType: 'video/mp4',
-        },
-      ],
-      id: 'inline-2',
-    },
-  ],
 })

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

@@ -27,19 +27,25 @@ describe('Clip Snapshot', () => {
 
     it('in-line render', () => {
       const tree = renderer
-        .create(<ClipServer url={url} dataLayout="in-line"></ClipServer>)
+        .create(
+          <ClipServer content={{ url, dataLayout: 'in-line' }}></ClipServer>
+        )
         .toJSON()
       expect(formatString(tree)).toMatchSnapshot()
     })
     it('full-grid default render', () => {
       const tree = renderer
-        .create(<ClipServer url={url} dataLayout="full-grid"></ClipServer>)
+        .create(
+          <ClipServer content={{ url, dataLayout: 'full-grid' }}></ClipServer>
+        )
         .toJSON()
       expect(formatString(tree)).toMatchSnapshot()
     })
     it('mid-grid default render', () => {
       const tree = renderer
-        .create(<ClipServer url={url} dataLayout="mid-grid"></ClipServer>)
+        .create(
+          <ClipServer content={{ url, dataLayout: 'mid-grid' }}></ClipServer>
+        )
         .toJSON()
       expect(formatString(tree)).toMatchSnapshot()
     })
@@ -48,16 +54,18 @@ describe('Clip Snapshot', () => {
       const tree = renderer
         .create(
           <ClipServer
-            url={url}
-            dataLayout="in-line"
-            autoplay
-            loop
-            description="Video description"
-            caption="caption text"
-            credits="@credits"
-            poster={poster}
-            posterAlt="text poster"
-            mute
+            content={{
+              url,
+              dataLayout: 'in-line',
+              autoplay: true,
+              loop: true,
+              description: 'Video description',
+              caption: 'caption text',
+              credits: '@credits',
+              poster,
+              posterAlt: 'text poster',
+              muted: true,
+            }}
           ></ClipServer>
         )
         .toJSON()
@@ -67,16 +75,18 @@ describe('Clip Snapshot', () => {
       const tree = renderer
         .create(
           <ClipServer
-            url={url}
-            dataLayout="full-grid"
-            autoplay
-            loop
-            description="Video description"
-            caption="caption text"
-            credits="@credits"
-            poster={poster}
-            posterAlt="text poster"
-            mute
+            content={{
+              url,
+              dataLayout: 'full-grid',
+              autoplay: true,
+              loop: true,
+              description: 'Video description',
+              caption: 'caption text',
+              credits: '@credits',
+              poster,
+              posterAlt: 'text poster',
+              muted: true,
+            }}
           ></ClipServer>
         )
         .toJSON()
@@ -86,16 +96,18 @@ describe('Clip Snapshot', () => {
       const tree = renderer
         .create(
           <ClipServer
-            url={url}
-            dataLayout="mid-grid"
-            autoplay
-            loop
-            description="Video description"
-            caption="caption text"
-            credits="@credits"
-            poster={poster}
-            posterAlt="text poster"
-            mute
+            content={{
+              url,
+              dataLayout: 'mid-grid',
+              autoplay: true,
+              loop: true,
+              description: 'Video description',
+              caption: 'caption text',
+              credits: '@credits',
+              poster,
+              posterAlt: 'text poster',
+              muted: true,
+            }}
           ></ClipServer>
         )
         .toJSON()
@@ -104,37 +116,39 @@ describe('Clip Snapshot', () => {
 
     it('renders multiple video sources', () => {
       const videoWithMultipleSources = {
-        dataLayout: 'in-line',
-        id: '84d7e1b0-e8b2-4ffc-a798-306f29dc9d52',
-        url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
-        description:
-          ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
-        clips: [
-          {
-            dataSource: [
-              {
-                binaryUrl: 'https://whatever/1080x1920.mp4',
-                mediaType: 'video/mp4',
-                pixelHeight: 1080,
-                pixelWidth: 1920,
-              },
-              {
-                binaryUrl: 'https://whatever/320x240.mp4',
-                mediaType: 'video/mp4',
-                pixelHeight: 320,
-                pixelWidth: 240,
-              },
-              {
-                binaryUrl: 'https://whatever/640x480.avi',
-                mediaType: 'video/avi',
-                pixelHeight: 640,
-                pixelWidth: 480,
-              },
-            ],
-            poster: 'https://whatever/1080x1920.jpg',
-          },
-        ],
-        caption: 'Aenean lobortis volutpat nunc vitae elementum',
+        content: {
+          dataLayout: 'in-line',
+          id: '84d7e1b0-e8b2-4ffc-a798-306f29dc9d52',
+          url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
+          description:
+            ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
+          caption: 'Aenean lobortis volutpat nunc vitae elementum',
+          clips: [
+            {
+              dataSource: [
+                {
+                  binaryUrl: 'https://whatever/1080x1920.mp4',
+                  mediaType: 'video/mp4',
+                  pixelHeight: 1080,
+                  pixelWidth: 1920,
+                },
+                {
+                  binaryUrl: 'https://whatever/320x240.mp4',
+                  mediaType: 'video/mp4',
+                  pixelHeight: 320,
+                  pixelWidth: 240,
+                },
+                {
+                  binaryUrl: 'https://whatever/640x480.avi',
+                  mediaType: 'video/avi',
+                  pixelHeight: 640,
+                  pixelWidth: 480,
+                },
+              ],
+              poster: 'https://whatever/1080x1920.jpg',
+            },
+          ],
+        },
       }
       const tree = renderer
         .create(<ClipServer {...videoWithMultipleSources}></ClipServer>)
@@ -144,36 +158,40 @@ describe('Clip Snapshot', () => {
 
     it('in-line rendered output is the same for CAPI and cp-content-pipeline data', () => {
       const inlineVideo = {
-        dataLayout: 'in-line',
-        url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
-        description:
-          ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
-        poster:
-          'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
-        caption: 'Aenean lobortis volutpat nunc vitae elementum',
+        content: {
+          dataLayout: 'in-line',
+          url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
+          description:
+            ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
+          poster:
+            'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
+          caption: 'Aenean lobortis volutpat nunc vitae elementum',
+        },
       }
 
       const inlineVideoCPPipeline = {
-        dataLayout: 'in-line',
-        id: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
-        url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
-        description:
-          ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
-        clips: [
-          {
-            dataSource: [
-              {
-                binaryUrl:
-                  'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
-                mediaType: 'video/mp4',
-              },
-            ],
-            id: '22a65f5a-ead3-4a25-bf79-c6b080f00547',
-            poster:
-              'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
-          },
-        ],
-        caption: 'Aenean lobortis volutpat nunc vitae elementum',
+        content: {
+          dataLayout: 'in-line',
+          id: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
+          url: 'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
+          description:
+            ' Dolor sit amet, consectetur adipiscing elit. Sed sit amet odio quis ante auctor dapibus. Sed dapibus cursus nisi, tincidunt sagittis sapien vehicula vitae.',
+          caption: 'Aenean lobortis volutpat nunc vitae elementum',
+          clips: [
+            {
+              dataSource: [
+                {
+                  binaryUrl:
+                    'https://spark-clips-staging.s3.eu-west-1.amazonaws.com/optimised-media-files/16968704765960/1080x1920.mp4',
+                  mediaType: 'video/mp4',
+                },
+              ],
+              id: '22a65f5a-ead3-4a25-bf79-c6b080f00547',
+              poster:
+                'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fd1e00ek4ebabms.cloudfront.net%2Fproduction%2F84d7e1b0-e8b2-4ffc-a798-306f29dc9d52.png?fit=scale-down&source=next&width=700',
+            },
+          ],
+        },
       }
 
       const capiContainer = renderer
@@ -190,17 +208,20 @@ describe('Clip Snapshot', () => {
       const tree = renderer
         .create(
           <ClipServer
-            url={url}
-            dataLayout="full-grid"
-            autoplay
-            loop
-            description="Video description"
-            caption="caption text"
-            credits="@credits"
-            // New Origami image
-            poster="https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F898c06df-6ffa-4ed6-87a3-48a8edc309ae?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1"
-            posterAlt="text poster"
-            mute
+            content={{
+              url,
+              dataLayout: 'full-grid',
+              autoplay: true,
+              loop: true,
+              description: 'Video description',
+              caption: 'caption text',
+              credits: '@credits',
+              // New Origami image
+              poster:
+                'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fspark-clips-prod.s3.eu-west-1.amazonaws.com%2Fposter-images%2F898c06df-6ffa-4ed6-87a3-48a8edc309ae?source=cp-content-pipeline&fit=scale-down&quality=highest&width=700&dpr=1',
+              posterAlt: 'text poster',
+              muted: true,
+            }}
           ></ClipServer>
         )
         .toJSON()

package/src/components/Flourish/index.tsx

@@ -1,25 +1,12 @@
 import React from 'react'
 import classnames from 'classnames'
+import { ContentProps } from '../types'
+import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
 
-type disclaimerProps = {
+interface disclaimerProps {
   id: string
 }
 
-type FlourishProps = {
-  id: string
-  type?: string
-  flourishType?: string
-  description?: string
-  layoutWidth?: string
-  fallbackImage: {
-    url?: string | null | undefined
-    width?: number | null | undefined
-    height?: number | null | undefined
-  }
-  iFrame?: boolean
-  inArticleBody?: boolean
-}
-
 const DisclaimerNotice = ({ id }: disclaimerProps) => (
   <div
     id={id}
@@ -37,12 +24,14 @@ const DisclaimerNotice = ({ id }: disclaimerProps) => (
     </div>
   </div>
 )
+
+interface FlourishProps extends ContentProps<ContentTreeWorkarounds.Flourish> {
+  iFrame?: boolean
+  inArticleBody?: boolean
+}
+
 const Flourish: React.FC<FlourishProps> = ({
-  id,
-  flourishType,
-  description,
-  layoutWidth,
-  fallbackImage,
+  content: { id, flourishType, description, layoutWidth, fallbackImage },
   iFrame = false,
   inArticleBody = true,
 }) => {