@financial-times/cp-content-pipeline-ui 9.20.2 → 9.22.0

package/CHANGELOG.md

@@ -574,6 +574,34 @@
     * @financial-times/cp-content-pipeline-client bumped from ^3.7.2 to ^3.7.3
     * @financial-times/cp-content-pipeline-schema bumped from ^2.10.1 to ^2.10.2
 
+## [9.22.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.21.0...cp-content-pipeline-ui-v9.22.0) (2026-02-09)
+
+
+### Features
+
+* ci-3193 main image changes for ui ([f98adeb](https://github.com/Financial-Times/cp-content-pipeline/commit/f98adeb4c1be88306e09a0d4aaad42553359d195))
+
+## [9.21.0](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.20.2...cp-content-pipeline-ui-v9.21.0) (2026-02-06)
+
+
+### Features
+
+* ci-3193 main image content tree for simple topper types ([3ab0092](https://github.com/Financial-Times/cp-content-pipeline/commit/3ab0092676e6e663aff4807794b97e85fbbe30cf))
+* ci-3193 main image in lead images in content tree ([1d740ff](https://github.com/Financial-Times/cp-content-pipeline/commit/1d740ffa427b43267f3561583cdc46dc9af867c0))
+
+
+### Bug Fixes
+
+* ci-3193 reuse resolver ([b19e521](https://github.com/Financial-Times/cp-content-pipeline/commit/b19e521017bbe15de94161a31adc83466afefec1))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * devDependencies
+    * @financial-times/cp-content-pipeline-client bumped from ^4.23.4 to ^4.24.0
+    * @financial-times/cp-content-pipeline-schema bumped from ^3.27.1 to ^3.28.0
+
 ## [9.20.2](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v9.20.1...cp-content-pipeline-ui-v9.20.2) (2026-02-02)
 
 

package/lib/components/MainImage/MainImage.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/MainImage/MainImage.spec.js

@@ -0,0 +1,224 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const _1 = __importDefault(require("."));
+// Mock the dependent components
+jest.mock('../Topper/MainImage', () => {
+    return ({ topper }) => (react_1.default.createElement("div", { "data-testid": "topper-main-image", "data-topper": JSON.stringify(topper) }));
+});
+jest.mock('../content-tree/ImageSet/index', () => ({
+    __esModule: true,
+    default: ({ content, isMainImage }) => (react_1.default.createElement("div", { "data-testid": "image-set", "data-content": JSON.stringify(content), "data-is-main-image": isMainImage })),
+    FallbackImage: ({ content, isMainImage }) => (react_1.default.createElement("div", { "data-testid": "fallback-image", "data-content": JSON.stringify(content), "data-is-main-image": isMainImage })),
+}));
+describe('MainImage', () => {
+    it.each([
+        { type: 'BasicTopper' },
+        { type: 'BrandedTopper' },
+        { type: 'OpinionTopper' },
+    ], ('renders TopperMainImage when topper has $type type set and images',
+        ($type) => {
+            const mockContent = {
+                topper: {
+                    __typename: $type,
+                    images: [
+                        {
+                            __typename: 'ImageDesktop',
+                            url: 'https://example.com/image1.jpg',
+                            width: 800,
+                            height: 600,
+                            sourceSet: [{ url: 'https://example.com/image1.jpg', dpr: 1 }],
+                        },
+                    ],
+                    fallbackImage: {
+                        __typename: 'ImageDesktop',
+                        url: 'https://example.com/fallback.jpg',
+                        width: 800,
+                        height: 600,
+                        altText: 'Test fallback image',
+                        sourceSet: [{ url: 'https://example.com/fallback.jpg', dpr: 1 }],
+                    },
+                },
+                body: {
+                    structured: {
+                        references: [],
+                    },
+                },
+            };
+            const { container } = (0, react_2.render)(react_1.default.createElement(_1.default, { content: mockContent }));
+            const topperMainImage = container.querySelector('[data-testid="topper-main-image"]');
+            expect(topperMainImage).toBeTruthy();
+            const topperData = JSON.parse(topperMainImage.getAttribute('data-topper') || '{}');
+            expect(topperData).toEqual(mockContent.topper);
+        }));
+    it('renders ImageSet when main-image is present in body references', () => {
+        const mockMainImage = {
+            type: 'main-image',
+            picture: {
+                __typename: 'PictureFullBleed',
+                alt: 'Main image alt text',
+                caption: 'Main image caption',
+                credit: 'Photo credit',
+                imageType: 'image',
+                layoutWidth: 'standard',
+                images: [
+                    {
+                        __typename: 'ImageDesktop',
+                        url: 'https://example.com/main-image.jpg',
+                        width: 800,
+                        height: 600,
+                        sourceSet: [{ url: 'https://example.com/main-image.jpg', dpr: 1 }],
+                    },
+                ],
+            },
+        };
+        const mockContent = {
+            topper: {
+                images: [], // Empty images array should not trigger TopperMainImage
+            },
+            body: {
+                structured: {
+                    references: [mockMainImage],
+                },
+            },
+        };
+        const { container } = (0, react_2.render)(react_1.default.createElement(_1.default, { content: mockContent }));
+        const imageSet = container.querySelector('[data-testid="image-set"]');
+        expect(imageSet).toBeTruthy();
+        expect(imageSet.getAttribute('data-is-main-image')).toBe('true');
+        const contentData = JSON.parse(imageSet.getAttribute('data-content') || '{}');
+        expect(contentData).toEqual(mockMainImage);
+    });
+    it('renders FallbackImage when main-image-raw is present in body references', () => {
+        const mockMainImageRaw = {
+            type: 'main-image-raw',
+            url: 'https://example.com/raw-image.jpg',
+            width: 800,
+            height: 600,
+            altText: 'Raw image alt text',
+            caption: 'Raw image caption',
+        };
+        const mockContent = {
+            topper: null,
+            body: {
+                structured: {
+                    references: [mockMainImageRaw],
+                },
+            },
+        };
+        const { container } = (0, react_2.render)(react_1.default.createElement(_1.default, { content: mockContent }));
+        const fallbackImage = container.querySelector('[data-testid="fallback-image"]');
+        expect(fallbackImage).toBeTruthy();
+        expect(fallbackImage.getAttribute('data-is-main-image')).toBe('true');
+        const contentData = JSON.parse(fallbackImage.getAttribute('data-content') || '{}');
+        expect(contentData).toEqual(mockMainImageRaw);
+    });
+    it('renders null when no main image is found', () => {
+        const mockContent = {
+            topper: null,
+            body: {
+                structured: {
+                    references: [
+                        {
+                            type: 'other-reference',
+                            content: 'Some other content',
+                        },
+                    ],
+                },
+            },
+        };
+        const { container } = (0, react_2.render)(react_1.default.createElement(_1.default, { content: mockContent }));
+        expect(container.firstChild).toBeNull();
+    });
+    it('does not render main image when there are lead images but not the right topper type', () => {
+        const mockContent = {
+            topper: {
+                __typename: 'SplitTextTopper',
+                images: [
+                    {
+                        __typename: 'ImageDesktop',
+                        url: 'https://example.com/image1.jpg',
+                        width: 800,
+                        height: 600,
+                    },
+                ],
+            },
+            body: {
+                structured: {
+                    references: [],
+                },
+            },
+        };
+        const { container } = (0, react_2.render)(react_1.default.createElement(_1.default, { content: mockContent }));
+        expect(container.firstChild).toBeNull();
+    });
+    it('prioritizes TopperMainImage over main-image references when both are present', () => {
+        const mockMainImage = {
+            type: 'main-image',
+            picture: {
+                __typename: 'PictureFullBleed',
+                alt: 'Main image alt text',
+                images: [],
+            },
+        };
+        const mockContent = {
+            topper: {
+                __typename: 'BasicTopper',
+                images: [
+                    {
+                        __typename: 'ImageDesktop',
+                        url: 'https://example.com/image1.jpg',
+                        width: 800,
+                        height: 600,
+                        sourceSet: [{ url: 'https://example.com/image1.jpg', dpr: 1 }],
+                    },
+                ],
+                fallbackImage: {
+                    __typename: 'ImageDesktop',
+                    url: 'https://example.com/fallback.jpg',
+                    sourceSet: [{ url: 'https://example.com/fallback.jpg', dpr: 1 }],
+                },
+            },
+            body: {
+                structured: {
+                    references: [mockMainImage],
+                },
+            },
+        };
+        const { container } = (0, react_2.render)(react_1.default.createElement(_1.default, { content: mockContent }));
+        expect(container.querySelector('[data-testid="topper-main-image"]')).toBeTruthy();
+        expect(container.querySelector('[data-testid="image-set"]')).toBeNull();
+    });
+    it('prioritizes main-image over main-image-raw when both are present', () => {
+        const mockMainImage = {
+            type: 'main-image',
+            picture: {
+                __typename: 'PictureFullBleed',
+                alt: 'Main image alt text',
+                images: [],
+            },
+        };
+        const mockMainImageRaw = {
+            type: 'main-image-raw',
+            url: 'https://example.com/raw-image.jpg',
+        };
+        const mockContent = {
+            topper: null,
+            body: {
+                structured: {
+                    references: [mockMainImage, mockMainImageRaw],
+                },
+            },
+        };
+        const { container } = (0, react_2.render)(react_1.default.createElement(_1.default, { content: mockContent }));
+        expect(container.querySelector('[data-testid="image-set"]')).toBeTruthy();
+        expect(container.querySelector('[data-testid="fallback-image"]')).toBeNull();
+    });
+});
+//# sourceMappingURL=MainImage.spec.js.map

package/lib/components/MainImage/MainImage.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainImage.spec.js","sourceRoot":"","sources":["../../../src/components/MainImage/MainImage.spec.tsx"],"names":[],"mappings":"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"}

package/lib/components/MainImage/index.js

@@ -28,9 +28,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const index_1 = __importStar(require("../content-tree/ImageSet/index"));
+const MainImage_1 = __importDefault(require("../Topper/MainImage"));
 const MainImage = ({ content }) => {
     const references = content.body?.structured.references;
-    /* Spark publishes the MainImage at the top of the <body>. if the image is expected to be rendered at all
+    const mainImageTopper = content?.topper?.__typename === 'BasicTopper' ||
+        content?.topper?.__typename === 'OpinionTopper' ||
+        content?.topper?.__typename === 'BrandedTopper';
+    /* Main images for articles with simple toppers will be published as lead images in content tree
+       If the topper is one of the simple types and contains images, we render them
+       using TopperMainImage (which reuses MainImage markup but pulls from topper.images
+       instead of body references). This replaces the legacy 'main-image' reference approach. */
+    if (content.topper &&
+        mainImageTopper &&
+        'images' in content.topper &&
+        Array.isArray(content.topper.images) &&
+        content.topper.images.length > 0) {
+        return (react_1.default.createElement(MainImage_1.default, { topper: content.topper, hasValidTopperType: mainImageTopper }));
+    }
+    /* Fallback for pre-content tree data where main images are not in the 'images'
+      Spark publishes the MainImage at the top of the <body>. if the image is expected to be rendered at all
       We don't want it to appear there, however this is the only way we know whether editorial want to render it.
       So we use the ImageSet from the body to render this above the byline
       Github issue: https://github.com/Financial-Times/content-platform/issues/6

package/lib/components/MainImage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MainImage/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AAKzB,wEAAwE;AAOxE,MAAM,SAAS,GAA6B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1D,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,EAAE,UAAU,CAAC,UAAU,CAAA;IAEtD;;;;MAIE;IAEF,MAAM,SAAS,GAAG,UAAU,EAAE,IAAI,CAChC,CAAC,GAAG,EAAmD,EAAE,CACvD,GAAG,CAAC,IAAI,KAAK,YAAY,CAC5B,CAAA;IAED,IAAI,SAAS,EAAE,CAAC;QACd,gEAAgE;QAChE,IAAI,SAAS,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC;YAC3B,SAAS,CAAC,OAAO,CAAC,GAAG,GAAG,EAAE,CAAA;QAC5B,CAAC;QACD,OAAO,8BAAC,eAAQ,IAAC,WAAW,QAAC,OAAO,EAAE,SAAS,GAAI,CAAA;IACrD,CAAC;IAED,MAAM,YAAY,GAAG,UAAU,EAAE,IAAI,CACnC,CAAC,GAAG,EAA4C,EAAE,CAChD,GAAG,CAAC,IAAI,KAAK,gBAAgB,CAChC,CAAA;IAED,IAAI,YAAY,EAAE,CAAC;QACjB,gEAAgE;QAChE,YAAY,CAAC,GAAG,GAAG,EAAE,CAAA;QACrB,OAAO,8BAAC,qBAAa,IAAC,WAAW,QAAC,OAAO,EAAE,YAAY,GAAI,CAAA;IAC7D,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MainImage/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AAKzB,wEAAwE;AAGxE,oEAAiD;AAKjD,MAAM,SAAS,GAA6B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1D,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,EAAE,UAAU,CAAC,UAAU,CAAA;IAEtD,MAAM,eAAe,GACnB,OAAO,EAAE,MAAM,EAAE,UAAU,KAAK,aAAa;QAC7C,OAAO,EAAE,MAAM,EAAE,UAAU,KAAK,eAAe;QAC/C,OAAO,EAAE,MAAM,EAAE,UAAU,KAAK,eAAe,CAAA;IACjD;;;gGAG4F;IAC5F,IACE,OAAO,CAAC,MAAM;QACd,eAAe;QACf,QAAQ,IAAI,OAAO,CAAC,MAAM;QAC1B,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC;QACpC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAChC,CAAC;QACD,OAAO,CACL,8BAAC,mBAAe,IACd,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,kBAAkB,EAAE,eAAe,GACnC,CACH,CAAA;IACH,CAAC;IAED;;;;;MAKE;IAEF,MAAM,SAAS,GAAG,UAAU,EAAE,IAAI,CAChC,CAAC,GAAG,EAAmD,EAAE,CACvD,GAAG,CAAC,IAAI,KAAK,YAAY,CAC5B,CAAA;IAED,IAAI,SAAS,EAAE,CAAC;QACd,gEAAgE;QAChE,IAAI,SAAS,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC;YAC3B,SAAS,CAAC,OAAO,CAAC,GAAG,GAAG,EAAE,CAAA;QAC5B,CAAC;QACD,OAAO,8BAAC,eAAQ,IAAC,WAAW,QAAC,OAAO,EAAE,SAAS,GAAI,CAAA;IACrD,CAAC;IAED,MAAM,YAAY,GAAG,UAAU,EAAE,IAAI,CACnC,CAAC,GAAG,EAA4C,EAAE,CAChD,GAAG,CAAC,IAAI,KAAK,gBAAgB,CAChC,CAAA;IAED,IAAI,YAAY,EAAE,CAAC;QACjB,gEAAgE;QAChE,YAAY,CAAC,GAAG,GAAG,EAAE,CAAA;QACrB,OAAO,8BAAC,qBAAa,IAAC,WAAW,QAAC,OAAO,EAAE,YAAY,GAAI,CAAA;IAC7D,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA"}

package/lib/components/Topper/MainImage.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TopperFragment } from '@financial-times/cp-content-pipeline-client';
+export type TopperMainImageProps = {
+    topper: TopperFragment;
+    hasValidTopperType: boolean;
+};
+declare const TopperMainImage: React.FC<TopperMainImageProps>;
+export default TopperMainImage;

package/lib/components/Topper/MainImage.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/*
+    MainImage component renders the main image of a Topper.
+    It uses the leadImages for consistency with other toppers but
+    it will be rendered as Main Image in the content area, instead of in the topper area.
+*/
+const react_1 = __importDefault(require("react"));
+const ImageSet_1 = require("../content-tree/ImageSet");
+const ImageOverrideWrappers_1 = require("../ImageOverrideWrappers");
+// It outputs the same markup of the MainImage component.
+// This component should be temporary. When the article will support a shared grid between content and topper,
+// we will have a single component to render all the images in a topper.
+// The two components are this one and the Picture component in the Topper folder.
+const TopperMainImage = (props) => {
+    const { topper } = props;
+    // This topper is currently used only for simple topper types when they use leadImages
+    if (!topper ||
+        !('images' in topper) ||
+        !topper.fallbackImage ||
+        !props.hasValidTopperType) {
+        return null;
+    }
+    return (react_1.default.createElement("figure", { className: "n-content-image n-content-image--full", "data-component": "topper-main-image" },
+        react_1.default.createElement("picture", null,
+            react_1.default.createElement(ImageOverrideWrappers_1.PictureOverrideWrapper, { ...props },
+                react_1.default.createElement(ImageSet_1.Sources, { images: topper.images }),
+                react_1.default.createElement("img", { 
+                    // ts is this shape so we can update templates before api
+                    // can be simplified to alt={topper.fallbackImage.altText || ''}
+                    alt: topper.fallbackImage
+                        ?.altText || '', src: topper.fallbackImage.sourceSet[0]?.url, key: "fallback-image", width: topper.fallbackImage.width ?? undefined, height: topper.fallbackImage.height ?? undefined }))),
+        (topper.fallbackImage.caption || topper.fallbackImage.credit) && (react_1.default.createElement("figcaption", { className: "n-content-picture__caption o3-editorial-typography-caption" },
+            react_1.default.createElement("span", null, topper.fallbackImage.caption),
+            react_1.default.createElement("span", null,
+                topper.fallbackImage.caption ? ' ' : '',
+                topper.fallbackImage.credit)))));
+};
+exports.default = TopperMainImage;
+//# sourceMappingURL=MainImage.js.map

package/lib/components/Topper/MainImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MainImage.js","sourceRoot":"","sources":["../../../src/components/Topper/MainImage.tsx"],"names":[],"mappings":";;;;;AAAA;;;;EAIE;AACF,kDAAyB;AAEzB,uDAAkD;AAElD,oEAAiE;AAOjE,yDAAyD;AACzD,8GAA8G;AAC9G,wEAAwE;AACxE,kFAAkF;AAClF,MAAM,eAAe,GAAmC,CAAC,KAAK,EAAE,EAAE;IAChE,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;IAExB,sFAAsF;IACtF,IACE,CAAC,MAAM;QACP,CAAC,CAAC,QAAQ,IAAI,MAAM,CAAC;QACrB,CAAC,MAAM,CAAC,aAAa;QACrB,CAAC,KAAK,CAAC,kBAAkB,EACzB,CAAC;QACD,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,0CACE,SAAS,EAAC,uCAAuC,oBAClC,mBAAmB;QAElC;YACE,8BAAC,8CAAsB,OAAK,KAAK;gBAC/B,8BAAC,kBAAO,IAAC,MAAM,EAAE,MAAM,CAAC,MAAsC,GAAI;gBAClE;oBACE,yDAAyD;oBACzD,gEAAgE;oBAChE,GAAG,EACA,MAAM,CAAC,aAAyD;wBAC/D,EAAE,OAAO,IAAI,EAAE,EAEnB,GAAG,EAAE,MAAM,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GAAG,EAC3C,GAAG,EAAC,gBAAgB,EACpB,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC,KAAK,IAAI,SAAS,EAC9C,MAAM,EAAE,MAAM,CAAC,aAAa,CAAC,MAAM,IAAI,SAAS,GAChD,CACqB,CACjB;QACT,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAChE,8CAAY,SAAS,EAAC,4DAA4D;YAChF,4CAAO,MAAM,CAAC,aAAa,CAAC,OAAO,CAAQ;YAC3C;gBACG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;gBACvC,MAAM,CAAC,aAAa,CAAC,MAAM,CACvB,CACI,CACd,CACM,CACV,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,eAAe,CAAA"}

package/lib/components/Topper/index.js

@@ -59,6 +59,7 @@ const Topper = ({ content, slot, followButtonSlot, showPremiumLabel = false, rea
     const isOpinion = topper.__typename === 'OpinionTopper';
     const isFlourish = topper.__typename === 'TopperWithFlourish' && !!topper.leadFlourish;
     const isPartnerContent = topper.__typename === 'PartnerContentTopper';
+    const mainImageTopper = isBasic || isOpinion || topper.__typename === 'BrandedTopper';
     const hasLayout = 'layout' in topper && topper.layout;
     const hasLayoutWidth = 'layoutWidth' in topper && topper.layoutWidth;
     const hasDesign = 'design' in topper && topper.design;
@@ -134,7 +135,7 @@ const Topper = ({ content, slot, followButtonSlot, showPremiumLabel = false, rea
                     isOpinion && hasColumnists && (react_1.default.createElement(Columnists_1.default, { authorConcepts: [...topper.columnists], followButtonVariant: topper.followButtonVariant, followButtonSlot: followButtonSlot }))),
                 readNextSlot && (react_1.default.createElement("div", { className: "o-topper__read-next" }, readNextSlot())),
                 react_1.default.createElement("div", { className: "o-topper__background" }),
-                'images' in topper && react_1.default.createElement(Picture_1.default, { topper: topper })))));
+                'images' in topper && !mainImageTopper && (react_1.default.createElement(Picture_1.default, { topper: topper }))))));
 };
 exports.default = Topper;
 //# sourceMappingURL=index.js.map

package/lib/components/Topper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Topper/index.tsx"],"names":[],"mappings":"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"}

package/lib/index.d.ts

@@ -3,6 +3,7 @@ export { default as Byline } from './components/Byline';
 export { LiveBlogWrapper } from './components/LiveBlogWrapper';
 export { default as MainImage } from './components/MainImage';
 export { default as Topper } from './components/Topper';
+export { default as TopperMainImage } from './components/Topper/MainImage';
 export { default as Body } from './components/Body';
 export { default as ArticleBody } from './components/body-components/ArticleBody';
 export { default as LiveBlogBody } from './components/body-components/LiveBlogBody';

package/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PresentationOverridesContext = exports.PresentationFlagsContext = exports.CccFallbackText = exports.Cite = exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.InfoPair = exports.InfoBox = exports.Card = exports.TimelineEvent = exports.Timeline = exports.YoutubeVideo = exports.Video = exports.Tweet = exports.Table = exports.ScrollyBlock = exports.RecommendedList = exports.Recommended = exports.Pullquote = exports.Paragraph = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.Clip = exports.ImageSet = exports.ImagePair = exports.Heading = exports.Flourish = exports.CustomCodeComponent = exports.BigNumber = exports.RichText = exports.PodcastBody = exports.LiveBlogBody = exports.ArticleBody = exports.Body = exports.Topper = exports.MainImage = exports.LiveBlogWrapper = exports.Byline = exports.ArticleInfo = void 0;
+exports.PresentationOverridesContext = exports.PresentationFlagsContext = exports.CccFallbackText = exports.Cite = exports.Strikethrough = exports.Strong = exports.Emphasis = exports.HorizontalRule = exports.LineBreak = exports.Blockquote = exports.Link = exports.ListItem = exports.List = exports.InfoPair = exports.InfoBox = exports.Card = exports.TimelineEvent = exports.Timeline = exports.YoutubeVideo = exports.Video = exports.Tweet = exports.Table = exports.ScrollyBlock = exports.RecommendedList = exports.Recommended = exports.Pullquote = exports.Paragraph = exports.LayoutSlot = exports.LayoutContainer = exports.Layout = exports.Clip = exports.ImageSet = exports.ImagePair = exports.Heading = exports.Flourish = exports.CustomCodeComponent = exports.BigNumber = exports.RichText = exports.PodcastBody = exports.LiveBlogBody = exports.ArticleBody = exports.Body = exports.TopperMainImage = exports.Topper = exports.MainImage = exports.LiveBlogWrapper = exports.Byline = exports.ArticleInfo = void 0;
 var ArticleInfo_1 = require("./components/ArticleInfo");
 Object.defineProperty(exports, "ArticleInfo", { enumerable: true, get: function () { return __importDefault(ArticleInfo_1).default; } });
 var Byline_1 = require("./components/Byline");
@@ -14,6 +14,8 @@ var MainImage_1 = require("./components/MainImage");
 Object.defineProperty(exports, "MainImage", { enumerable: true, get: function () { return __importDefault(MainImage_1).default; } });
 var Topper_1 = require("./components/Topper");
 Object.defineProperty(exports, "Topper", { enumerable: true, get: function () { return __importDefault(Topper_1).default; } });
+var MainImage_2 = require("./components/Topper/MainImage");
+Object.defineProperty(exports, "TopperMainImage", { enumerable: true, get: function () { return __importDefault(MainImage_2).default; } });
 var Body_1 = require("./components/Body");
 Object.defineProperty(exports, "Body", { enumerable: true, get: function () { return __importDefault(Body_1).default; } });
 var ArticleBody_1 = require("./components/body-components/ArticleBody");

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAE1B,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAC/B,0EAAmF;AAA1E,6HAAA,OAAO,OAAgB;AAChC,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAE/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,qFAA8F;AAArF,2IAAA,OAAO,OAAuB;AACvC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,6DAAsE;AAA7D,mHAAA,OAAO,OAAW;AAC3B,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,+EAAmF;AAA1E,kHAAA,OAAO,OAAQ;AACxB,2DAIyC;AAHvC,gGAAA,MAAM,OAAA;AACN,yGAAA,eAAe,OAAA;AACf,oGAAA,UAAU,OAAA;AAEZ,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,mEAAgF;AAAvE,mHAAA,OAAO,OAAa;AAC7B,qEAA8E;AAArE,2HAAA,OAAO,OAAe;AAC/B,6EAAsF;AAA7E,mIAAA,OAAO,OAAmB;AACnC,2EAAuE;AAA9D,8GAAA,YAAY,OAAA;AACrB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,uEAAgF;AAAvE,6HAAA,OAAO,OAAgB;AAChC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,kFAA2F;AAAlF,+HAAA,OAAO,OAAiB;AACjC,uDAAgE;AAAvD,6GAAA,OAAO,OAAQ;AACxB,6DAAsE;AAA7D,mHAAA,OAAO,OAAW;AAC3B,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,yEAY8C;AAX5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA;AACb,uGAAA,IAAI,OAAA;AACJ,kHAAA,eAAe,OAAA;AAGjB,qCAGkB;AAFhB,mHAAA,wBAAwB,OAAA;AACxB,uHAAA,4BAA4B,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,wDAAiE;AAAxD,2HAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,oDAA6D;AAApD,uHAAA,OAAO,OAAa;AAC7B,8CAAuD;AAA9C,iHAAA,OAAO,OAAU;AAC1B,2DAA0E;AAAjE,6HAAA,OAAO,OAAmB;AAEnC,0CAAmD;AAA1C,6GAAA,OAAO,OAAQ;AACxB,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAC/B,0EAAmF;AAA1E,6HAAA,OAAO,OAAgB;AAChC,wEAAiF;AAAxE,2HAAA,OAAO,OAAe;AAE/B,kDAA2D;AAAlD,qHAAA,OAAO,OAAY;AAC5B,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,qFAA8F;AAArF,2IAAA,OAAO,OAAuB;AACvC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,6DAAsE;AAA7D,mHAAA,OAAO,OAAW;AAC3B,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,+EAAmF;AAA1E,kHAAA,OAAO,OAAQ;AACxB,2DAIyC;AAHvC,gGAAA,MAAM,OAAA;AACN,yGAAA,eAAe,OAAA;AACf,oGAAA,UAAU,OAAA;AAEZ,iEAA0E;AAAjE,uHAAA,OAAO,OAAa;AAC7B,mEAAgF;AAAvE,mHAAA,OAAO,OAAa;AAC7B,qEAA8E;AAArE,2HAAA,OAAO,OAAe;AAC/B,6EAAsF;AAA7E,mIAAA,OAAO,OAAmB;AACnC,2EAAuE;AAA9D,8GAAA,YAAY,OAAA;AACrB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,yDAAkE;AAAzD,+GAAA,OAAO,OAAS;AACzB,uEAAgF;AAAvE,6HAAA,OAAO,OAAgB;AAChC,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,kFAA2F;AAAlF,+HAAA,OAAO,OAAiB;AACjC,uDAAgE;AAAvD,6GAAA,OAAO,OAAQ;AACxB,6DAAsE;AAA7D,mHAAA,OAAO,OAAW;AAC3B,+DAAwE;AAA/D,qHAAA,OAAO,OAAY;AAC5B,yEAY8C;AAX5C,uGAAA,IAAI,OAAA;AACJ,2GAAA,QAAQ,OAAA;AACR,uGAAA,IAAI,OAAA;AACJ,6GAAA,UAAU,OAAA;AACV,4GAAA,SAAS,OAAA;AACT,iHAAA,cAAc,OAAA;AACd,2GAAA,QAAQ,OAAA;AACR,yGAAA,MAAM,OAAA;AACN,gHAAA,aAAa,OAAA;AACb,uGAAA,IAAI,OAAA;AACJ,kHAAA,eAAe,OAAA;AAGjB,qCAGkB;AAFhB,mHAAA,wBAAwB,OAAA;AACxB,uHAAA,4BAA4B,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "9.20.2",
+  "version": "9.22.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -17,8 +17,8 @@
     "@babel/preset-react": "^7.22.5",
     "@dotcom-tool-kit/npm": "^5.0.0",
     "@financial-times/content-tree": "github:financial-times/content-tree#746e23",
-    "@financial-times/cp-content-pipeline-client": "^4.23.4",
-    "@financial-times/cp-content-pipeline-schema": "^3.27.1",
+    "@financial-times/cp-content-pipeline-client": "^4.24.0",
+    "@financial-times/cp-content-pipeline-schema": "^3.28.0",
     "@financial-times/cp-content-pipeline-styles": "^4.6.1",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-grid": "^6.1.8",