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

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

@@ -24,12 +24,14 @@ describe('Flourish component', () => {
   it('renders with a full-grid layout and fallback image', async () => {
     const { container } = render(
       <Flourish
-        type="flourish"
-        id="123"
-        flourishType="bar"
-        description="foo"
-        layoutWidth="full-grid"
-        fallbackImage={anImage}
+        content={{
+          type: 'flourish',
+          id: '123',
+          flourishType: 'bar',
+          description: 'foo',
+          layoutWidth: 'full-grid',
+          fallbackImage: anImage,
+        }}
       />
     )
     expect(container).toMatchSnapshot()
@@ -38,12 +40,14 @@ describe('Flourish component', () => {
   it('renders ignoring layout different from full-grid', async () => {
     const { container } = render(
       <Flourish
-        type="flourish"
-        id="123"
-        flourishType="bar"
-        description="foo"
-        layoutWidth="whatever"
-        fallbackImage={anImage}
+        content={{
+          type: 'flourish',
+          id: '123',
+          flourishType: 'bar',
+          description: 'foo',
+          layoutWidth: 'whatever',
+          fallbackImage: anImage,
+        }}
       />
     )
     expect(container).toMatchSnapshot()
@@ -53,12 +57,14 @@ describe('Flourish component', () => {
     const iFrame = true
     const { container } = render(
       <Flourish
-        type="flourish"
-        id="123"
-        flourishType="bar"
-        description="foo"
-        layoutWidth="full-grid"
-        fallbackImage={anImage}
+        content={{
+          type: 'flourish',
+          id: '123',
+          flourishType: 'bar',
+          description: 'foo',
+          layoutWidth: 'full-grid',
+          fallbackImage: anImage,
+        }}
         iFrame={iFrame}
       />
     )
@@ -69,12 +75,14 @@ describe('Flourish component', () => {
     const inArticleBody = false
     const { container } = render(
       <Flourish
-        type="flourish"
-        id="123"
-        flourishType="bar"
-        description="foo"
-        layoutWidth="full-grid"
-        fallbackImage={anImage}
+        content={{
+          type: 'flourish',
+          id: '123',
+          flourishType: 'bar',
+          description: 'foo',
+          layoutWidth: 'full-grid',
+          fallbackImage: anImage,
+        }}
         inArticleBody={inArticleBody}
       />
     )
@@ -87,12 +95,14 @@ it('sets the hideTitle param in the iframe url to true when not in article body'
   const iFrame = true
   const { container } = render(
     <Flourish
-      type="flourish"
-      id="123"
-      flourishType="bar"
-      description="foo"
-      layoutWidth="full-grid"
-      fallbackImage={anImage}
+      content={{
+        type: 'flourish',
+        id: '123',
+        flourishType: 'bar',
+        description: 'foo',
+        layoutWidth: 'full-grid',
+        fallbackImage: anImage,
+      }}
       iFrame={iFrame}
       inArticleBody={inArticleBody}
     />
@@ -103,12 +113,14 @@ it('sets the hideTitle param in the iframe url to true when not in article body'
 it('does not set aspect ratios when in article body', async () => {
   const { container } = render(
     <Flourish
-      type="flourish"
-      id="123"
-      flourishType="bar"
-      description="foo"
-      layoutWidth="full-grid"
-      fallbackImage={anImage}
+      content={{
+        type: 'flourish',
+        id: '123',
+        flourishType: 'bar',
+        description: 'foo',
+        layoutWidth: 'full-grid',
+        fallbackImage: anImage,
+      }}
     />
   )
   expect(container).toMatchSnapshot()

package/src/components/Heading/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
 import type { ContentTree } from '@financial-times/content-tree'
+import { ContentProps } from '../types'
 
-const Heading: React.FC<React.PropsWithChildren<ContentTree.Heading>> = (
-  props
-) => {
-  if (!props.children.length) return null
+const Heading: React.FC<
+  React.PropsWithChildren<ContentProps<ContentTree.Heading>>
+> = (props) => {
+  if (!React.Children.count(props.children)) return null
 
-  switch (props.level) {
+  switch (props.content.level) {
     case 'chapter':
       return <h2 className="n-content-heading-2">{props.children}</h2>
     case 'subheading':

package/src/components/ImageOverrideWrappers/index.tsx

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react'
+
+import { PresentationOverridesContext } from '../../context'
+
+import type { PresentationOverrideTypes } from '../../context'
+
+export const FallbackImageOverrideWrapper: PresentationOverrideTypes['FallbackImage'] =
+  ({ children, ...props }) => {
+    const { FallbackImage } = useContext(PresentationOverridesContext)
+
+    return FallbackImage ? (
+      <FallbackImage {...props}>{children}</FallbackImage>
+    ) : (
+      children
+    )
+  }
+
+export const ImageSetOverrideWrapper: PresentationOverrideTypes['ImageSet'] = ({
+  children,
+  ...props
+}) => {
+  const { ImageSet } = useContext(PresentationOverridesContext)
+
+  return ImageSet ? <ImageSet {...props}>{children}</ImageSet> : children
+}
+
+export const PictureOverrideWrapper: PresentationOverrideTypes['Picture'] = ({
+  children,
+  ...props
+}) => {
+  const { Picture } = useContext(PresentationOverridesContext)
+
+  return Picture ? <Picture {...props}>{children}</Picture> : children
+}

package/src/components/ImageSet/index.tsx

@@ -1,24 +1,24 @@
 import React, { PropsWithChildren, useContext } from 'react'
+import {
+  FallbackImageOverrideWrapper,
+  ImageSetOverrideWrapper,
+} from '../ImageOverrideWrappers'
 
-import type {
-  ImageFragment,
-  ImageSetFragment,
-  ImageSourceFragment,
-  PictureFragment,
-} from '@financial-times/cp-content-pipeline-client'
 import type { ContentTree } from '@financial-times/content-tree'
 
 import { PresentationFlagsContext } from '../../context'
+import { ContentProps } from '../types'
+import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
+import { SetRequired } from 'type-fest'
+import type * as ComponentWorkarounds from '../Workarounds'
 
-type ImageWithSourceSet = ImageFragment & {
-  sourceSet: ImageSourceFragment[]
-}
+type ImageWithSourceSet = SetRequired<ContentTree.Image, 'sourceSet'>
 
-type ImageWithAliases = ImageFragment & {
+type ImageWithAliases = ContentTree.Image & {
   [alias: string]: ImageWithSourceSet['sourceSet']
 }
 
-const formatSourceSet = (sourceSet: ImageSourceFragment[]) =>
+const formatSourceSet = (sourceSet: ContentTree.ImageSource[]) =>
   sourceSet.map((src) => `${src.url} ${src.dpr}x`).join(',')
 
 const figureClassNameMap: Record<
@@ -42,7 +42,7 @@ export type AliasedBreakpoints = {
 }
 
 const defaultGetBreakpoints = (
-  image: ImageFragment
+  image: ComponentWorkarounds.Image
 ): Breakpoint | Array<Breakpoint> | AliasedBreakpoints | undefined => {
   switch (image.format) {
     case 'mobile':
@@ -66,7 +66,9 @@ const breakpointToMedia = (breakpoint: Breakpoint): string =>
     .filter(Boolean)
     .join(' and ')
 
-function hasSourceSet(image: ImageFragment): image is ImageWithSourceSet {
+function hasSourceSet(
+  image: ComponentWorkarounds.Image | ContentTreeWorkarounds.RawImage
+): image is ImageWithSourceSet {
   return image && 'sourceSet' in image
 }
 
@@ -80,7 +82,7 @@ function isAliasedBreakpoints(
   )
 }
 
-function figureWidth(picture: PictureFragment) {
+function figureWidth(picture: ComponentWorkarounds.ImageSetPicture) {
   if (picture.layoutWidth === 'inset-left') {
     const DEFAULT_WIDTH = 700
     const width = picture.images[0]?.width ?? DEFAULT_WIDTH
@@ -97,7 +99,7 @@ function figureWidth(picture: PictureFragment) {
 }
 
 type SourceProps = {
-  image: ImageFragment
+  image: ComponentWorkarounds.Image
   getBreakpoints?: BreakpointGetter
 }
 
@@ -141,7 +143,7 @@ const Source: React.FC<SourceProps> = ({
 }
 
 type SourcesProps = {
-  images: readonly ImageFragment[]
+  images: readonly ComponentWorkarounds.Image[]
   getBreakpoints?: BreakpointGetter
 }
 
@@ -155,24 +157,34 @@ export const Sources: React.FC<SourcesProps> = ({ images, getBreakpoints }) => {
   )
 }
 
-type FallbackImageProps = {
-  image: ImageFragment
+// HACK:20240809:IM This props type is quite a mess as the FallbackImage
+// component can be used both directly in a RichTextChild with a Content Tree
+// node, but also from the Image component above which the Image type. Image is
+// defined in Content Tree but is _not_ a node so this is a bit icky :(
+export type FallbackImageProps = (
+  | ContentProps<ComponentWorkarounds.RawImage>
+  | {
+      content: { image: ComponentWorkarounds.Image }
+    }
+) & {
   imageType?: string
-  picture?: PictureFragment
+  picture?: ComponentWorkarounds.ImageSetPicture
   className?: string
   inSourceSet?: boolean
   isMainImage?: boolean
 }
 
 // TODO should `fallback` be added to content-tree imageset?
-export const FallbackImage: React.FC<FallbackImageProps> = ({
-  image,
-  imageType = 'image',
-  picture,
-  className,
-  inSourceSet = false,
-  isMainImage = false,
-}) => {
+export const FallbackImage: React.FC<FallbackImageProps> = (props) => {
+  const {
+    content: { image },
+    imageType = 'image',
+    picture,
+    className,
+    inSourceSet = false,
+    isMainImage = false,
+  } = props
+
   const Wrapper = inSourceSet
     ? React.Fragment
     : ({ children }: PropsWithChildren) => (
@@ -181,29 +193,35 @@ export const FallbackImage: React.FC<FallbackImageProps> = ({
 
   return (
     <Wrapper>
-      <img
-        src={
-          hasSourceSet(image)
-            ? image.sourceSet[0]?.url
-            : image?.url ?? undefined
-        }
-        srcSet={
-          hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined
-        }
-        alt={picture?.alt ?? ''}
-        data-image-type={imageType}
-        width={image.width ?? undefined}
-        height={image.height ?? undefined}
-        className={className}
-        loading={isMainImage ? 'eager' : 'lazy'}
-      />
+      <FallbackImageOverrideWrapper {...props}>
+        <img
+          src={
+            hasSourceSet(image)
+              ? image.sourceSet[0]?.url
+              : image?.url ?? undefined
+          }
+          srcSet={
+            hasSourceSet(image) ? formatSourceSet(image.sourceSet) : undefined
+          }
+          alt={picture?.alt ?? ''}
+          data-image-type={imageType}
+          width={image.width ?? undefined}
+          height={image.height ?? undefined}
+          className={className}
+          loading={isMainImage ? 'eager' : 'lazy'}
+        />
+      </FallbackImageOverrideWrapper>
     </Wrapper>
   )
 }
 
-type ImageSetProps = ImageSetFragment & { isMainImage?: boolean }
+export interface ImageSetProps extends ContentProps<ComponentWorkarounds.ImageSet> {
+  isMainImage?: boolean
+}
+
+const ImageSet: React.FC<ImageSetProps> = (props) => {
+  const { content: imageSet, isMainImage } = props
 
-const ImageSet: React.FC<ImageSetProps> = (imageSet) => {
   if (!imageSet.picture?.images) {
     return null
   }
@@ -232,16 +250,18 @@ const ImageSet: React.FC<ImageSetProps> = (imageSet) => {
         style={figureWidth(imageSet.picture)}
         data-component="image-set"
       >
-        <picture>
-          <Sources images={imageSet.picture.images} />
-          <FallbackImage
-            picture={imageSet.picture}
-            image={imageSet.picture.fallbackImage}
-            imageType={imageSet.picture.imageType || 'image'}
-            inSourceSet={true}
-            isMainImage={imageSet.isMainImage}
-          />
-        </picture>
+        <ImageSetOverrideWrapper {...props}>
+          <picture>
+            <Sources images={imageSet.picture.images} />
+            <FallbackImage
+              picture={imageSet.picture}
+              content={{ image: imageSet.picture.fallbackImage }}
+              imageType={imageSet.picture.imageType || 'image'}
+              inSourceSet={true}
+              isMainImage={isMainImage}
+            />
+          </picture>
+        </ImageSetOverrideWrapper>
         {(imageSet.picture.caption || imageSet.picture.credit) && (
           <figcaption className="n-content-picture__caption">
             <span>{imageSet.picture.caption}</span>

package/src/components/Layout/index.tsx

@@ -1,21 +1,8 @@
 import { ContentTree } from '@financial-times/content-tree'
 import React from 'react'
+import { ContentProps } from '../types'
 
-interface ContentTreeLayoutSlot extends ContentTree.Node {
-  type: 'slot'
-  children: [ContentTree.ImageSet?, ...ContentTree.Paragraph[]]
-}
-
-interface BaseLayoutProps {
-  layoutWidth: 'inset-left' | 'full-width' | 'full-grid' | 'in-line'
-  layoutName?: string
-}
-
-interface ContentTreeCardLayout extends BaseLayoutProps, ContentTree.Node {
-  type: 'layout'
-  layoutName: 'auto' | 'card' | 'timeline'
-  children: ContentTreeLayoutSlot[]
-}
+interface LayoutProps extends ContentProps<ContentTree.transit.Layout> {}
 
 /*
  * @description Layout component is used to define the layout for content. It can be used with ContentTree Layout Nodes or as a static layout.
@@ -23,9 +10,10 @@ interface ContentTreeCardLayout extends BaseLayoutProps, ContentTree.Node {
  * @param layoutName - The name of the layout.
  * @param children - The content to be displayed in the layout.
  */
-export const Layout: React.FC<
-  React.PropsWithChildren<ContentTreeCardLayout | BaseLayoutProps>
-> = ({ children, layoutWidth, layoutName = 'auto' }) => {
+export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
+  content: { layoutWidth, layoutName = 'auto' },
+  children,
+}) => {
   return (
     <div
       className="n-content-layout"

package/src/components/MainImage/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import type {
   ArticleQuery,
-  ImageFragment,
-  ImageSetFragment,
+  MainImageFragment,
 } from '@financial-times/cp-content-pipeline-client'
 import ImageSet, { FallbackImage } from '../ImageSet/index'
 import { ContentTree } from '@financial-times/content-tree'
+import type * as ComponentWorkarounds from '../Workarounds'
 
 type MainImageProps = {
   content: ArticleQuery['content']
@@ -20,19 +20,21 @@ const MainImage: React.FC<MainImageProps> = ({ content }) => {
   */
 
   const mainImage = references?.find(
-    (ref) => ref.type === 'main-image'
-  ) as ContentTree.ImageSet & ImageSetFragment
+    (ref): ref is ContentTree.ImageSet & MainImageFragment =>
+      ref.type === 'main-image'
+  )
 
   if (mainImage) {
-    return <ImageSet isMainImage {...mainImage} />
+    return <ImageSet isMainImage content={mainImage} />
   }
 
   const mainImageRaw = references?.find(
-    (ref) => ref.type === 'main-image-raw'
-  ) as { image: ImageFragment }
+    (ref): ref is ComponentWorkarounds.MainImageRaw =>
+      ref.type === 'main-image-raw'
+  )
 
   if (mainImageRaw) {
-    return <FallbackImage isMainImage {...mainImageRaw} />
+    return <FallbackImage isMainImage content={mainImageRaw} />
   }
 
   return null

package/src/components/Paragraph/index.tsx

@@ -1,11 +1,14 @@
 import { ContentTree } from '@financial-times/content-tree'
 import React, { createContext, useContext } from 'react'
+import { ContentProps } from '../types'
 
 export const ParagraphContext = createContext<{ className: string } | null>(
   null
 )
 
-const Paragraph: React.FC<React.PropsWithChildren<ContentTree.Paragraph>> = (
+interface ParagraphProps extends ContentProps<ContentTree.Paragraph> {}
+
+const Paragraph: React.FC<React.PropsWithChildren<ParagraphProps>> = (
   props
 ) => {
   const { className } = useContext(ParagraphContext) ?? { className: undefined }

package/src/components/Pullquote/index.tsx

@@ -1,24 +1,31 @@
 import React from 'react'
 import { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
 import classnames from 'classnames'
+import { ContentProps } from '../types'
+
+interface PullquoteProps
+  extends ContentProps<ContentTreeWorkarounds.Pullquote> {}
+
+const Pullquote: React.FC<React.PropsWithChildren<PullquoteProps>> = ({
+  content: { text, source },
+  children,
+}) => {
+  const hasChildren = React.Children.count(children) > 0
 
-const Pullquote: React.FC<
-  React.PropsWithChildren<ContentTreeWorkarounds.ContentTreePullquote>
-> = (props) => {
   return (
     <blockquote
       className={classnames('n-content-pullquote', {
-        'n-content-pullquote--with-image': props.children.length > 0,
-        'n-content-pullquote--no-image': !props.children.length,
+        'n-content-pullquote--with-image': hasChildren,
+        'n-content-pullquote--no-image': !hasChildren,
       })}
       aria-hidden="true"
     >
       <div className="n-content-pullquote__content">
-        <p>{props.text}</p>
-        <footer className="n-content-pullquote__footer">{props.source}</footer>
+        <p>{text}</p>
+        <footer className="n-content-pullquote__footer">{source}</footer>
       </div>
 
-      {props.children}
+      {children}
     </blockquote>
   )
 }

package/src/components/Recommended/index.tsx

@@ -2,19 +2,19 @@ import React from 'react'
 
 //HACK: worked around missing Teaser type by declaring a module x-teaser.d.ts
 import { presets, Teaser } from '@financial-times/x-teaser/dist/Teaser.cjs'
-import { ContentTree } from '@financial-times/content-tree'
-import type { RecommendedFragment } from '@financial-times/cp-content-pipeline-client'
 import classnames from 'classnames'
-/**
- * Renders a Recommended teaser component
- * `<Teaser>` is imported from x-dash
- * https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)
- */
+import { ContentProps } from '../types'
+import type * as ComponentWorkarounds from '../Workarounds'
 
-const Recommended: React.FC<ContentTree.Recommended & RecommendedFragment> = ({
-  heading,
-  teaser,
-  isInLiveBlog,
+// Renders a Recommended teaser component
+// `<Teaser>` is imported from x-dash
+// https://github.com/Financial-Times/x-dash/tree/main/components/x-teaser)
+
+interface RecommendedProps
+  extends ContentProps<ComponentWorkarounds.Recommended> {}
+
+const Recommended: React.FC<RecommendedProps> = ({
+  content: { heading, teaser, isInLiveBlog },
 }) => {
   if (!teaser) {
     return null

package/src/components/RichText/BasicComponents.tsx

@@ -1,34 +1,36 @@
 import React from 'react'
 import type { ContentTree } from '@financial-times/content-tree'
 import type { ContentTreeWorkarounds } from '@financial-times/cp-content-pipeline-schema'
+import { ContentProps } from '../types'
 
-export const List: React.FC<React.PropsWithChildren<ContentTree.List>> = (
-  props
-) => (props.ordered ? <ol>{props.children}</ol> : <ul>{props.children}</ul>)
+export const List: React.FC<
+  React.PropsWithChildren<ContentProps<ContentTree.List>>
+> = (props) =>
+  props.content.ordered ? <ol>{props.children}</ol> : <ul>{props.children}</ul>
 
 export const ListItem: React.FC<
-  React.PropsWithChildren<ContentTree.ListItem>
+  React.PropsWithChildren<ContentProps<ContentTree.ListItem>>
 > = (props) => <li>{props.children}</li>
 
-export const Link: React.FC<React.PropsWithChildren<ContentTree.Link>> = (
-  props
-) => (
-  <a href={props.url} title={props.title}>
+export const Link: React.FC<
+  React.PropsWithChildren<ContentProps<ContentTree.Link>>
+> = (props) => (
+  <a href={props.content.url} title={props.content.title}>
     {props.children}
   </a>
 )
 
 export const Blockquote: React.FC<
-  React.PropsWithChildren<ContentTree.Blockquote>
+  React.PropsWithChildren<ContentProps<ContentTree.Blockquote>>
 > = (props) => {
   return (
     <blockquote className="n-content-blockquote">{props.children}</blockquote>
   )
 }
 
-export const Cite: React.FC<React.PropsWithChildren<ContentTree.Phrasing>> = (
-  props
-) => {
+export const Cite: React.FC<
+  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.Cite>>
+> = (props) => {
   return <cite>{props.children}</cite>
 }
 
@@ -37,23 +39,23 @@ export const LineBreak: React.FC = () => <br />
 export const HorizontalRule: React.FC = () => <hr />
 
 export const Emphasis: React.FC<
-  React.PropsWithChildren<ContentTree.Emphasis>
+  React.PropsWithChildren<ContentProps<ContentTree.Emphasis>>
 > = (props) => <em>{props.children}</em>
 
-export const Strong: React.FC<React.PropsWithChildren<ContentTree.Strong>> = (
-  props
-) => <strong>{props.children}</strong>
+export const Strong: React.FC<
+  React.PropsWithChildren<ContentProps<ContentTree.Strong>>
+> = (props) => <strong>{props.children}</strong>
 
 export const Strikethrough: React.FC<
-  React.PropsWithChildren<ContentTree.Strikethrough>
+  React.PropsWithChildren<ContentProps<ContentTree.Strikethrough>>
 > = (props) => <s>{props.children}</s>
 
 export const TableRow: React.FC<
-  React.PropsWithChildren<ContentTreeWorkarounds.TableRow>
+  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableRow>>
 > = (props) => <tr>{props.children}</tr>
 
 export const TableFooter: React.FC<
-  React.PropsWithChildren<ContentTreeWorkarounds.TableFooter>
+  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableFooter>>
 > = (props) => (
   <tfoot>
     <tr>
@@ -65,7 +67,7 @@ export const TableFooter: React.FC<
 )
 
 export const TableCaption: React.FC<
-  React.PropsWithChildren<ContentTreeWorkarounds.TableCaption>
+  React.PropsWithChildren<ContentProps<ContentTreeWorkarounds.TableCaption>>
 > = (props) => (
   <caption className="n-content-body__caption n-content-body__caption--auto">
     {props.children}