@financial-times/cp-content-pipeline-schema 2.9.2 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-schema",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/queries/article.graphql

@@ -81,6 +81,23 @@ fragment Person on Person {
   streamPage
 }
 
+fragment FlourishSource on FlourishSource {
+  url
+  type
+  format
+  width
+  height
+}
+
+fragment LeadFlourish on LeadFlourish {
+   type
+   id
+   description
+   fallbackImage {
+      ...FlourishSource
+    }
+}
+
 fragment Topper on Topper {
   __typename
   headline
@@ -183,6 +200,15 @@ fragment Topper on Topper {
     isLargeHeadline
     layout
   }
+
+  ... on TopperWithFlourish {
+    layout
+    layoutWidth
+    leadFlourish {
+        ...LeadFlourish
+    }
+  }
+
   ... on TopperWithPackage {
     design
   }

package/src/generated/index.ts

@@ -7,6 +7,8 @@ import type { Clip as ClipModel } from '../model/Clip';
 import type { Picture as PictureModel } from '../model/Picture';
 import type { RichText as RichTextModel } from '../model/RichText';
 import type { Topper as TopperModel } from '../model/Topper';
+import type { LeadFlourish as LeadFlourishModel } from '../model/LeadFlourish';
+import type { FlourishSource as FlourishSourceModel } from '../model/FlourishSource';
 import type { ContentTree } from '@financial-times/content-tree';
 import type { ReferenceWithCAPIData } from '../resolvers/content-tree/references';
 import type { Video as VideoNode, ClipSet as ClipSetNode, OldClip as OldClipNode, RawImage as RawImageNode } from '../resolvers/content-tree/Workarounds';
@@ -549,6 +551,19 @@ export type FlourishFallback = {
   readonly width?: Maybe<Scalars['Int']['output']>;
 };
 
+export type FlourishSource = {
+  /** The format of the source, eg. 'standard'. */
+  readonly format?: Maybe<Scalars['String']['output']>;
+  /** The height of the source. */
+  readonly height?: Maybe<Scalars['Int']['output']>;
+  /** The type of the source, e.g. visualisation for leadFlourish  */
+  readonly type?: Maybe<Scalars['String']['output']>;
+  /** The Origami image service url */
+  readonly url?: Maybe<Scalars['String']['output']>;
+  /** The width of the source. */
+  readonly width?: Maybe<Scalars['Int']['output']>;
+};
+
 export type FullBleedTopper = Topper & TopperWithBrand & TopperWithImages & TopperWithTheme & {
   /** Whether the topper should have a background box. */
   readonly backgroundBox?: Maybe<Scalars['Boolean']['output']>;
@@ -909,6 +924,16 @@ export type LayoutImage = Reference & {
   readonly type: Scalars['String']['output'];
 };
 
+export type LeadFlourish = {
+  /** The description of the Flourish chart. */
+  readonly description?: Maybe<Scalars['String']['output']>;
+  readonly fallbackImage: FlourishSource;
+  /** The id of the Flourish chart. */
+  readonly id?: Maybe<Scalars['String']['output']>;
+  /** The type of the chart, eg. 'visualisation'. */
+  readonly type?: Maybe<Scalars['String']['output']>;
+};
+
 export type LiveBlogPackage = Content & {
   /** A scalar representing the access level of the article, eg. 'free'. */
   readonly accessLevel?: Maybe<Scalars['AccessLevel']['output']>;
@@ -1462,6 +1487,31 @@ export type TopperWithBrand = {
   readonly genreConcept?: Maybe<Concept>;
 };
 
+export type TopperWithFlourish = Topper & {
+  /** Whether the topper should have a background box. */
+  readonly backgroundBox?: Maybe<Scalars['Boolean']['output']>;
+  /** The background colour of the topper. */
+  readonly backgroundColour?: Maybe<Scalars['TopperBackgroundColour']['output']>;
+  /** The concept object to be displayed, eg. {'type': 'TOPIC', 'prefLabel': 'Non-dom tax status', ...}. */
+  readonly displayConcept?: Maybe<Concept>;
+  /** The variant of the follow button to be displayed on the topper. */
+  readonly followButtonVariant?: Maybe<Scalars['FollowButtonVariant']['output']>;
+  /** The concept object of the genre, eg. {'type': 'GENRE', 'prefLabel': 'Opinion', ...}. */
+  readonly genreConcept?: Maybe<Concept>;
+  /** The headline text of the topper. */
+  readonly headline: Scalars['String']['output'];
+  /** An abstract syntax tree of the introduction text. */
+  readonly intro?: Maybe<RichText>;
+  /** The layout type of the topper, eg. 'flourish'. */
+  readonly layout?: Maybe<Scalars['String']['output']>;
+  /** The layout width of the topper, eg. 'full-grid'. */
+  readonly layoutWidth?: Maybe<Scalars['String']['output']>;
+  /** The flourish object to be displayed, eg. {'type': 'visualisation', ...}. */
+  readonly leadFlourish?: Maybe<LeadFlourish>;
+  /** Whether the topper should have a text shadow. */
+  readonly textShadow?: Maybe<Scalars['Boolean']['output']>;
+};
+
 export type TopperWithHeadshot = {
   /** The url of the headshot image, eg. for columns with one key author. */
   readonly headshot?: Maybe<Scalars['String']['output']>;
@@ -1650,7 +1700,7 @@ export type ResolversInterfaceTypes<RefType extends Record<string, unknown>> = R
   Image: ( ImageModel ) | ( ImageModel ) | ( ImageModel ) | ( ImageModel ) | ( ImageModel ) | ( ImageModel ) | ( ImageModel ) | ( ImageModel ) | ( ImageModel );
   Picture: ( PictureModel ) | ( PictureModel ) | ( PictureModel );
   Reference: ( ReferenceWithCAPIData<ClipSetNode|OldClipNode> ) | ( ReferenceWithCAPIData<ContentTree.Flourish> ) | ( ReferenceWithCAPIData<ContentTree.ImageSet> ) | ( ReferenceWithCAPIData<ContentTree.LayoutImage> ) | ( ReferenceWithCAPIData<ContentTree.ImageSet> ) | ( ReferenceWithCAPIData<RawImageNode> ) | ( ReferenceWithCAPIData<ContentTree.Recommended> ) | ( ReferenceWithCAPIData<ContentTree.ScrollyImage> ) | ( ReferenceWithCAPIData<ContentTree.Tweet> ) | ( ReferenceWithCAPIData<VideoNode> );
-  Topper: ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel );
+  Topper: ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel );
   TopperWithBrand: ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel );
   TopperWithHeadshot: ( TopperModel ) | ( TopperModel );
   TopperWithImages: ( TopperModel ) | ( TopperModel ) | ( TopperModel ) | ( TopperModel );
@@ -1685,6 +1735,7 @@ export type ResolversTypes = ResolversObject<{
   Float: ResolverTypeWrapper<Scalars['Float']['output']>;
   Flourish: ResolverTypeWrapper<ReferenceWithCAPIData<ContentTree.Flourish>>;
   FlourishFallback: ResolverTypeWrapper<FlourishFallback>;
+  FlourishSource: ResolverTypeWrapper<FlourishSourceModel>;
   FollowButtonVariant: ResolverTypeWrapper<Scalars['FollowButtonVariant']['output']>;
   FullBleedTopper: ResolverTypeWrapper<TopperModel>;
   ID: ResolverTypeWrapper<Scalars['ID']['output']>;
@@ -1706,6 +1757,7 @@ export type ResolversTypes = ResolversObject<{
   Int: ResolverTypeWrapper<Scalars['Int']['output']>;
   JSON: ResolverTypeWrapper<Scalars['JSON']['output']>;
   LayoutImage: ResolverTypeWrapper<ReferenceWithCAPIData<ContentTree.LayoutImage>>;
+  LeadFlourish: ResolverTypeWrapper<LeadFlourishModel>;
   LiveBlogPackage: ResolverTypeWrapper<CapiResponse>;
   LiveBlogPost: ResolverTypeWrapper<CapiResponse>;
   MainImage: ResolverTypeWrapper<ReferenceWithCAPIData<ContentTree.ImageSet>>;
@@ -1736,6 +1788,7 @@ export type ResolversTypes = ResolversObject<{
   Topper: ResolverTypeWrapper<TopperModel>;
   TopperBackgroundColour: ResolverTypeWrapper<Scalars['TopperBackgroundColour']['output']>;
   TopperWithBrand: ResolverTypeWrapper<TopperModel>;
+  TopperWithFlourish: ResolverTypeWrapper<TopperModel>;
   TopperWithHeadshot: ResolverTypeWrapper<ResolversInterfaceTypes<ResolversTypes>['TopperWithHeadshot']>;
   TopperWithImages: ResolverTypeWrapper<TopperModel>;
   TopperWithPackage: ResolverTypeWrapper<TopperModel>;
@@ -1772,6 +1825,7 @@ export type ResolversParentTypes = ResolversObject<{
   Float: Scalars['Float']['output'];
   Flourish: ReferenceWithCAPIData<ContentTree.Flourish>;
   FlourishFallback: FlourishFallback;
+  FlourishSource: FlourishSourceModel;
   FollowButtonVariant: Scalars['FollowButtonVariant']['output'];
   FullBleedTopper: TopperModel;
   ID: Scalars['ID']['output'];
@@ -1793,6 +1847,7 @@ export type ResolversParentTypes = ResolversObject<{
   Int: Scalars['Int']['output'];
   JSON: Scalars['JSON']['output'];
   LayoutImage: ReferenceWithCAPIData<ContentTree.LayoutImage>;
+  LeadFlourish: LeadFlourishModel;
   LiveBlogPackage: CapiResponse;
   LiveBlogPost: CapiResponse;
   MainImage: ReferenceWithCAPIData<ContentTree.ImageSet>;
@@ -1823,6 +1878,7 @@ export type ResolversParentTypes = ResolversObject<{
   Topper: TopperModel;
   TopperBackgroundColour: Scalars['TopperBackgroundColour']['output'];
   TopperWithBrand: TopperModel;
+  TopperWithFlourish: TopperModel;
   TopperWithHeadshot: ResolversInterfaceTypes<ResolversParentTypes>['TopperWithHeadshot'];
   TopperWithImages: TopperModel;
   TopperWithPackage: TopperModel;
@@ -2121,6 +2177,15 @@ export type FlourishFallbackResolvers<ContextType = QueryContext, ParentType ext
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 }>;
 
+export type FlourishSourceResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['FlourishSource'] = ResolversParentTypes['FlourishSource']> = ResolversObject<{
+  format: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  height: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
+  type: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  url: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  width: Resolver<Maybe<ResolversTypes['Int']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+}>;
+
 export interface FollowButtonVariantScalarConfig extends GraphQLScalarTypeConfig<ResolversTypes['FollowButtonVariant'], any> {
   name: 'FollowButtonVariant';
 }
@@ -2324,6 +2389,14 @@ export type LayoutImageResolvers<ContextType = QueryContext, ParentType extends
   __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
 }>;
 
+export type LeadFlourishResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['LeadFlourish'] = ResolversParentTypes['LeadFlourish']> = ResolversObject<{
+  description: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  fallbackImage: Resolver<ResolversTypes['FlourishSource'], ParentType, ContextType>;
+  id: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  type: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+}>;
+
 export type LiveBlogPackageResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['LiveBlogPackage'] = ResolversParentTypes['LiveBlogPackage']> = ResolversObject<{
   accessLevel: Resolver<Maybe<ResolversTypes['AccessLevel']>, ParentType, ContextType>;
   altStandfirst: Resolver<Maybe<ResolversTypes['AltStandfirst']>, ParentType, ContextType>;
@@ -2617,7 +2690,7 @@ export type TeaserResolvers<ContextType = QueryContext, ParentType extends Resol
 }>;
 
 export type TopperResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['Topper'] = ResolversParentTypes['Topper']> = ResolversObject<{
-  __resolveType?: TypeResolveFn<'BasicTopper' | 'BrandedTopper' | 'DeepLandscapeTopper' | 'DeepPortraitTopper' | 'FullBleedTopper' | 'OpinionTopper' | 'PodcastTopper' | 'SplitTextTopper', ParentType, ContextType>;
+  __resolveType?: TypeResolveFn<'BasicTopper' | 'BrandedTopper' | 'DeepLandscapeTopper' | 'DeepPortraitTopper' | 'FullBleedTopper' | 'OpinionTopper' | 'PodcastTopper' | 'SplitTextTopper' | 'TopperWithFlourish', ParentType, ContextType>;
   backgroundBox: Resolver<Maybe<ResolversTypes['Boolean']>, ParentType, ContextType>;
   backgroundColour: Resolver<Maybe<ResolversTypes['TopperBackgroundColour']>, ParentType, ContextType>;
   displayConcept: Resolver<Maybe<ResolversTypes['Concept']>, ParentType, ContextType>;
@@ -2638,6 +2711,21 @@ export type TopperWithBrandResolvers<ContextType = QueryContext, ParentType exte
   genreConcept: Resolver<Maybe<ResolversTypes['Concept']>, ParentType, ContextType>;
 }>;
 
+export type TopperWithFlourishResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['TopperWithFlourish'] = ResolversParentTypes['TopperWithFlourish']> = ResolversObject<{
+  backgroundBox: Resolver<Maybe<ResolversTypes['Boolean']>, ParentType, ContextType>;
+  backgroundColour: Resolver<Maybe<ResolversTypes['TopperBackgroundColour']>, ParentType, ContextType>;
+  displayConcept: Resolver<Maybe<ResolversTypes['Concept']>, ParentType, ContextType>;
+  followButtonVariant: Resolver<Maybe<ResolversTypes['FollowButtonVariant']>, ParentType, ContextType>;
+  genreConcept: Resolver<Maybe<ResolversTypes['Concept']>, ParentType, ContextType>;
+  headline: Resolver<ResolversTypes['String'], ParentType, ContextType>;
+  intro: Resolver<Maybe<ResolversTypes['RichText']>, ParentType, ContextType>;
+  layout: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  layoutWidth: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType>;
+  leadFlourish: Resolver<Maybe<ResolversTypes['LeadFlourish']>, ParentType, ContextType>;
+  textShadow: Resolver<Maybe<ResolversTypes['Boolean']>, ParentType, ContextType>;
+  __isTypeOf?: IsTypeOfResolverFn<ParentType, ContextType>;
+}>;
+
 export type TopperWithHeadshotResolvers<ContextType = QueryContext, ParentType extends ResolversParentTypes['TopperWithHeadshot'] = ResolversParentTypes['TopperWithHeadshot']> = ResolversObject<{
   __resolveType?: TypeResolveFn<'OpinionTopper' | 'PodcastTopper', ParentType, ContextType>;
   headshot: Resolver<Maybe<ResolversTypes['String']>, ParentType, ContextType, Partial<TopperWithHeadshotHeadshotArgs>>;
@@ -2725,6 +2813,7 @@ export type Resolvers<ContextType = QueryContext> = ResolversObject<{
   Design: DesignResolvers<ContextType>;
   Flourish: FlourishResolvers<ContextType>;
   FlourishFallback: FlourishFallbackResolvers<ContextType>;
+  FlourishSource: FlourishSourceResolvers<ContextType>;
   FollowButtonVariant: GraphQLScalarType;
   FullBleedTopper: FullBleedTopperResolvers<ContextType>;
   Image: ImageResolvers<ContextType>;
@@ -2744,6 +2833,7 @@ export type Resolvers<ContextType = QueryContext> = ResolversObject<{
   Indicators: IndicatorsResolvers<ContextType>;
   JSON: GraphQLScalarType;
   LayoutImage: LayoutImageResolvers<ContextType>;
+  LeadFlourish: LeadFlourishResolvers<ContextType>;
   LiveBlogPackage: LiveBlogPackageResolvers<ContextType>;
   LiveBlogPost: LiveBlogPostResolvers<ContextType>;
   MainImage: MainImageResolvers<ContextType>;
@@ -2773,6 +2863,7 @@ export type Resolvers<ContextType = QueryContext> = ResolversObject<{
   Topper: TopperResolvers<ContextType>;
   TopperBackgroundColour: GraphQLScalarType;
   TopperWithBrand: TopperWithBrandResolvers<ContextType>;
+  TopperWithFlourish: TopperWithFlourishResolvers<ContextType>;
   TopperWithHeadshot: TopperWithHeadshotResolvers<ContextType>;
   TopperWithImages: TopperWithImagesResolvers<ContextType>;
   TopperWithPackage: TopperWithPackageResolvers<ContextType>;

package/src/model/CapiResponse.ts

@@ -236,6 +236,12 @@ export class CapiResponse {
       return this.capiData.embeds
     return []
   }
+
+  leadFlourish() {
+    if ('leadFlourish' in this.capiData) return this.capiData.leadFlourish
+    return null
+  }
+
   byline({ vanity }: Partial<ContentUrlArgs>) {
     const bylineText = this.rawByline()
 

package/src/model/FlourishSource.test.ts

@@ -0,0 +1,93 @@
+import { FlourishSource } from './FlourishSource'
+import { QueryContext } from '..'
+
+describe('FlourishSource', () => {
+  const mockFlourishData = {
+    id: '1234',
+    type: 'test-type',
+    description: 'Sample chart',
+  }
+
+  const origamiGetImageMetadataMock = jest.fn()
+  const context = {
+    systemCode: 'example-system',
+    dataSources: {
+      origami: {
+        getImageMetadata: origamiGetImageMetadataMock,
+      },
+    },
+  } as unknown as QueryContext
+
+  let flourishSource: FlourishSource
+
+  beforeEach(() => {
+    const MOCKED_CURRENT_TIME = 1715158800000 // 8 May 2024 09:00:00
+    jest.spyOn(Date, 'now').mockImplementation(() => MOCKED_CURRENT_TIME)
+
+    flourishSource = new FlourishSource(mockFlourishData, context)
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should return the correct id', () => {
+    expect(flourishSource.id()).toBe('1234')
+  })
+
+  it('should return the correct type', () => {
+    expect(flourishSource.type()).toBe('test-type')
+  })
+
+  it('should return the correct format', () => {
+    expect(flourishSource.format()).toBe('standard')
+  })
+
+  it('should return the correct flourishUrl', () => {
+    expect(flourishSource.flourishUrl()).toBe(
+      'https://public.flourish.studio/test-type/1234/thumbnail?cacheBuster=5717196'
+    )
+  })
+
+  it('should return the correct width', async () => {
+    const width = await flourishSource.width()
+    expect(width).toBe(2626)
+  })
+
+  it('should return the correct height', async () => {
+    const height = await flourishSource.height()
+    expect(height).toBe(1459)
+  })
+
+  it('should return the correct url', async () => {
+    const url = await flourishSource.url()
+    // Regex checks for flourish url whilst leaving spaces for arguments
+    // https://public.flourish.studio/{type}/{id}/thumbnail
+    const flourishImageUrlRegex = new RegExp(
+      /https:\/\/public.flourish.studio\/.*\/.*\/thumbnail/
+    )
+
+    expect(decodeURIComponent(url)).toMatch(flourishImageUrlRegex)
+  })
+
+  it('should bust the cache of the fallback image every five minutes', async () => {
+    const oldCacheBuster = '5717196'
+    const newCacheBuster = '5717197'
+
+    expect(flourishSource.flourishUrl()).toBe(
+      `https://public.flourish.studio/test-type/1234/thumbnail?cacheBuster=${oldCacheBuster}`
+    )
+
+    let newFlourishSource = new FlourishSource(mockFlourishData, context)
+    jest.spyOn(Date, 'now').mockImplementation(() => 1715159040000) // 8 May 2024 09:04:00
+    expect(newFlourishSource.flourishUrl()).toBe(
+      `https://public.flourish.studio/test-type/1234/thumbnail?cacheBuster=${oldCacheBuster}`
+    )
+
+    newFlourishSource = new FlourishSource(mockFlourishData, context)
+    jest.spyOn(Date, 'now').mockImplementation(() => 1715159100000) // 8 May 2024 09:05:00
+    expect(newFlourishSource.flourishUrl()).toBe(
+      `https://public.flourish.studio/test-type/1234/thumbnail?cacheBuster=${newCacheBuster}`
+    )
+  })
+})

package/src/model/FlourishSource.ts

@@ -0,0 +1,103 @@
+import imageServiceUrl from '../helpers/imageService'
+import isError from '../helpers/isError'
+import { OperationalError } from '@dotcom-reliability-kit/errors'
+import type { QueryContext } from '..'
+
+type ImageMetadata = {
+  width: number
+  height: number
+}
+
+type FlourishData =
+  | {
+      id: string
+      type?: string
+      description?: string
+    }
+  | null
+  | undefined
+
+export class FlourishSource {
+  #systemCode: string
+  private imageMetadata?: ImageMetadata
+
+  constructor(
+    private flourishData: FlourishData,
+    private context: QueryContext
+  ) {
+    this.#systemCode = context.systemCode ?? 'cp-content-pipeline'
+  }
+
+  id() {
+    return this.flourishData?.id || ''
+  }
+
+  type() {
+    return this.flourishData?.type || 'flourish'
+  }
+
+  format() {
+    return 'standard'
+  }
+
+  flourishUrl() {
+    // Timestamp rounded to the nearest 5 minutes to bust the cache every five minutes
+    const cacheBusterTimestamp = Math.floor(Date.now() / (5 * 60 * 1000))
+
+    return `https://public.flourish.studio/${this.type()}/${this.id()}/thumbnail?cacheBuster=${cacheBusterTimestamp}`
+  }
+
+  private async getImageMetadata(): Promise<ImageMetadata> {
+    const DEFAULT_WIDTH = 2626
+    const DEFAULT_HEIGHT = 1459
+
+    if (this.imageMetadata) {
+      return this.imageMetadata
+    }
+
+    try {
+      const metadata = await this.context.dataSources.origami.getImageMetadata(
+        this.flourishUrl()
+      )
+      this.imageMetadata = {
+        width: metadata?.width || DEFAULT_WIDTH,
+        height: metadata?.height || DEFAULT_HEIGHT,
+      }
+    } catch (error) {
+      if (isError(error)) {
+        this.context.logger.warn({
+          event: 'RECOVERABLE_ERROR',
+          error: new OperationalError({
+            code: 'FLOURISH_IMAGE_METADATA_ERROR',
+            message: `Error getting image dimensions for Flourish fallback image ${this.flourishUrl()}`,
+            cause: error,
+          }),
+        })
+      }
+      this.imageMetadata = {
+        width: DEFAULT_WIDTH,
+        height: DEFAULT_HEIGHT,
+      }
+    }
+    return this.imageMetadata
+  }
+  async width() {
+    const imageMetadata = await this.getImageMetadata()
+    return imageMetadata.width
+  }
+
+  async height() {
+    const imageMetadata = await this.getImageMetadata()
+    return imageMetadata.height
+  }
+
+  async url() {
+    const width = await this.width()
+    const imageServiceWrappedUrl = imageServiceUrl({
+      url: this.flourishUrl(),
+      systemCode: 'cp-content-pipeline',
+      width,
+    })
+    return imageServiceWrappedUrl
+  }
+}

package/src/model/LeadFlourish.test.ts

@@ -0,0 +1,71 @@
+import { LeadFlourish } from './LeadFlourish'
+import { FlourishSource } from './FlourishSource'
+import { CapiResponse } from './CapiResponse'
+import { baseCapiObject } from '../fixtures/capiObject'
+import type { QueryContext } from '..'
+import cloneDeep from 'clone-deep'
+
+const context = {} as unknown as QueryContext
+
+jest.mock('./FlourishSource', () => {
+  return {
+    FlourishSource: jest.fn().mockImplementation(() => ({})),
+  }
+})
+
+const leadFlourishData = {
+  id: 'test-id',
+  description: 'test-description',
+  type: 'test-type',
+}
+
+describe('LeadFlourish', () => {
+  let leadFlourish: LeadFlourish
+
+  beforeEach(() => {
+    const clonedBase = cloneDeep(baseCapiObject)
+    clonedBase.leadFlourish = leadFlourishData
+    clonedBase.topper = {
+      layout: 'flourish',
+      layoutWidth: 'full-width',
+    }
+    const capiResponse = new CapiResponse(clonedBase, context)
+    leadFlourish = new LeadFlourish(capiResponse, context)
+  })
+
+  describe('fallbackImage', () => {
+    it('should instantiate a new FlourishSource', async () => {
+      await leadFlourish.fallbackImage()
+
+      expect(FlourishSource).toHaveBeenCalledWith(leadFlourishData, context)
+    })
+  })
+
+  describe('id', () => {
+    it('should return the id', () => {
+      const result = leadFlourish.id()
+
+      expect(result).toBe('test-id')
+    })
+  })
+
+  describe('type', () => {
+    it('should return the type', () => {
+      const result = leadFlourish.type()
+
+      expect(result).toBe('test-type')
+    })
+  })
+
+  describe('description', () => {
+    it('should return the description', () => {
+      const descriptionMock = jest.fn().mockReturnValue('flourish-description')
+      leadFlourish.description = descriptionMock
+
+      const result = leadFlourish.description()
+
+      expect(result).toBe('flourish-description')
+      expect(descriptionMock).toHaveBeenCalled()
+    })
+  })
+})

package/src/model/LeadFlourish.ts

@@ -0,0 +1,30 @@
+import { CapiResponse } from './CapiResponse'
+import type { QueryContext } from '..'
+import { FlourishSource } from './FlourishSource'
+
+export class LeadFlourish {
+  #systemCode: string
+  constructor(
+    private capiResponse: CapiResponse,
+    private context: QueryContext
+  ) {
+    this.#systemCode = context.systemCode ?? 'cp-content-pipeline'
+  }
+
+  async fallbackImage() {
+    const flourishData = this.capiResponse.leadFlourish()
+    return new FlourishSource(flourishData, this.context)
+  }
+
+  id() {
+    return this.capiResponse.leadFlourish()?.id || null
+  }
+
+  type() {
+    return this.capiResponse.leadFlourish()?.type || 'visualisation'
+  }
+
+  description() {
+    return this.capiResponse.leadFlourish()?.description || ''
+  }
+}

package/src/model/Topper.test.ts

@@ -151,6 +151,32 @@ describe('produces the correct types', () => {
     expect(desiredColour).toEqual(actualColour)
   })
 
+  it('flourish topper', () => {
+    const clonedBase = cloneDeep(baseCapiObject)
+    clonedBase.leadFlourish = {
+        id: 'test-id',
+        description: 'test-description',
+        type: 'test-type'
+      }
+    clonedBase.topper = {
+        layout: 'flourish',
+        layoutWidth: 'full-width'
+    }
+    const capiResponse = new CapiResponse(clonedBase, context)
+    const topper = new Topper(capiResponse, context)
+
+    const desired = 'TopperWithFlourish'
+    const actual = topper.type()
+
+    expect(actual).toEqual(desired)
+
+    const LeadFlourish = topper.leadFlourish()
+
+    expect(LeadFlourish.id()).toEqual('test-id')
+    expect(LeadFlourish.description()).toEqual('test-description')
+    expect(LeadFlourish.type()).toEqual('test-type')
+  })
+
   it('live blog topper, is full bleed, large headline, paper background', () => {
     const clonedBase = cloneDeep(baseCapiObject)
     clonedBase.type = 'http://www.ft.com/ontology/content/LiveBlogPackage'

package/src/model/Topper.ts

@@ -8,6 +8,7 @@ import {
 import { TopperBackgroundColour } from '../resolvers/scalars'
 import { RichText } from './RichText'
 import imageServiceUrl from '../helpers/imageService'
+import { LeadFlourish } from './LeadFlourish'
 import type { TopperWithHeadshotHeadshotArgs } from '../generated'
 
 type TopperType =
@@ -19,6 +20,7 @@ type TopperType =
   | 'OpinionTopper'
   | 'BrandedTopper'
   | 'BasicTopper'
+  | 'TopperWithFlourish'
 
 type TopperBackgroundColourValues = LiteralUnionScalarValues<
   typeof TopperBackgroundColour
@@ -77,6 +79,10 @@ export class Topper {
       return 'SplitTextTopper'
     }
 
+    if (this.capiResponse.topper()?.layout === 'flourish') {
+      return 'TopperWithFlourish'
+    }
+
     if (
       this.capiResponse.topper()?.layout?.startsWith('full-bleed') ||
       this.capiResponse.type() === 'LiveBlogPackage'
@@ -138,6 +144,18 @@ export class Topper {
     return this.capiResponse.topper()?.layout || 'branded'
   }
 
+  layoutWidth() {
+    if (this.capiResponse.leadFlourish()) {
+      return this.capiResponse.topper()?.layoutWidth || 'full-grid'
+    } else {
+      return null
+    }
+  }
+
+  leadFlourish() {
+    return new LeadFlourish(this.capiResponse, this.context)
+  }
+
   backgroundColour(): TopperBackgroundColourValues {
     if (
       this.capiResponse.type() === 'ContentPackage' &&

package/src/model/schemas/capi/article.ts

@@ -36,6 +36,7 @@ const articleMediaSchema = baseMediaSchema.pick({
   mainImage: true,
   leadImages: true,
   alternativeImages: true,
+  leadFlourish: true,
   embeds: true,
 })