@financial-times/cp-content-pipeline-ui 6.4.6 → 6.6.0

package/lib/components/Flourish/index.js

@@ -9,20 +9,37 @@ const DisclaimerNotice = ({ id }) => (react_1.default.createElement("div", { id:
     react_1.default.createElement("div", { className: "o-message__container" },
         react_1.default.createElement("div", { className: "o-message__content" },
             react_1.default.createElement("p", { className: "o-message__content-main" }, "You are seeing a snapshot of an interactive graphic. This is most likely due to being offline or JavaScript being disabled in your browser.")))));
-function Flourish({ id, flourishType, description, layoutWidth, fallbackImage, }) {
+function Flourish({ id, flourishType, description, layoutWidth, fallbackImage, iFrame = false, inArticleBody = true, }) {
     const anchorHref = `#${id}`;
     const fullGrid = layoutWidth === 'full-grid' || layoutWidth === 'grid';
     const figureClassnames = (0, classnames_1.default)({
         'n-content-picture': true,
         'n-content-layout__container': true,
         'n-content-picture--wide': fullGrid,
+        flourish__figure: iFrame,
     });
-    return (react_1.default.createElement("div", { className: "n-content-layout", "data-layout-width": fullGrid ? 'full-grid' : null },
+    const iframeAspectRatio = iFrame && fallbackImage?.width && fallbackImage?.height
+        ? `${fallbackImage.width}/${fallbackImage.height}`
+        : '16/9';
+    const imageAspectRatio = !inArticleBody && fallbackImage?.width && fallbackImage?.height
+        ? {
+            width: '100%',
+            aspectRatio: `${fallbackImage.width}/${fallbackImage.height}`,
+        }
+        : {};
+    if (!id)
+        return null;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
+            'n-content-layout': inArticleBody,
+            flourish: iFrame,
+            'flourish--iFrame': iFrame,
+        }), "data-layout-width": fullGrid ? 'full-grid' : null, "data-component": "flourish" },
+        iFrame && (react_1.default.createElement("iframe", { src: `https://flo.uri.sh/visualisation/${id}/embed?hideTitle=${!inArticleBody}`, style: { width: '100%', aspectRatio: iframeAspectRatio }, className: "flourish__i-frame" })),
         react_1.default.createElement("figure", { className: figureClassnames, "data-original-image-width": fullGrid ? fallbackImage?.width : null, "data-original-image-height": fullGrid ? fallbackImage?.height : null },
             react_1.default.createElement("a", { href: anchorHref },
-                react_1.default.createElement("picture", { "data-asset-type": "flourish", "data-flourish-id": id, "data-flourish-type": flourishType },
+                react_1.default.createElement("picture", { "data-asset-type": iFrame ? 'flourish-embed' : 'flourish', "data-flourish-id": id, "data-flourish-type": flourishType },
                     react_1.default.createElement(DisclaimerNotice, { id: id }),
-                    react_1.default.createElement("img", { src: fallbackImage?.url, alt: description }))))));
+                    react_1.default.createElement("img", { src: fallbackImage?.url || '', alt: description, style: imageAspectRatio }))))));
 }
 exports.default = Flourish;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flourish/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAQnC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAmB,EAAE,EAAE,CAAC,CACpD,uCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,mEAAmE,sBAC5D,WAAW;IAE5B,uCAAK,SAAS,EAAC,sBAAsB;QACnC,uCAAK,SAAS,EAAC,oBAAoB;YACjC,qCAAG,SAAS,EAAC,yBAAyB,kJAIlC,CACA,CACF,CACF,CACP,CAAA;AACD,SAAwB,QAAQ,CAAC,EAC/B,EAAE,EACF,YAAY,EACZ,WAAW,EACX,WAAW,EACX,aAAa,GAC2B;IACxC,MAAM,UAAU,GAAG,IAAI,EAAE,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,WAAW,KAAK,WAAW,IAAI,WAAW,KAAK,MAAM,CAAA;IACtE,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAClC,mBAAmB,EAAE,IAAI;QACzB,6BAA6B,EAAE,IAAI;QACnC,yBAAyB,EAAE,QAAQ;KACpC,CAAC,CAAA;IAEF,OAAO,CACL,uCACE,SAAS,EAAC,kBAAkB,uBACT,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI;QAEhD,0CACE,SAAS,EAAE,gBAAgB,+BACA,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,gCACrC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI;YAEnE,qCAAG,IAAI,EAAE,UAAU;gBACjB,8DACkB,UAAU,sBACR,EAAE,wBACA,YAAY;oBAEhC,8BAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;oBAC5B,uCAAK,GAAG,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,EAAE,WAAW,GAAI,CAC1C,CACR,CACG,CACL,CACP,CAAA;AACH,CAAC;AAtCD,2BAsCC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Flourish/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,4DAAmC;AAqBnC,MAAM,gBAAgB,GAAG,CAAC,EAAE,EAAE,EAAmB,EAAE,EAAE,CAAC,CACpD,uCACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,mEAAmE,sBAC5D,WAAW;IAE5B,uCAAK,SAAS,EAAC,sBAAsB;QACnC,uCAAK,SAAS,EAAC,oBAAoB;YACjC,qCAAG,SAAS,EAAC,yBAAyB,kJAIlC,CACA,CACF,CACF,CACP,CAAA;AACD,SAAwB,QAAQ,CAAC,EAC/B,EAAE,EACF,YAAY,EACZ,WAAW,EACX,WAAW,EACX,aAAa,EACb,MAAM,GAAG,KAAK,EACd,aAAa,GAAG,IAAI,GACN;IACd,MAAM,UAAU,GAAG,IAAI,EAAE,EAAE,CAAA;IAC3B,MAAM,QAAQ,GAAG,WAAW,KAAK,WAAW,IAAI,WAAW,KAAK,MAAM,CAAA;IACtE,MAAM,gBAAgB,GAAG,IAAA,oBAAU,EAAC;QAClC,mBAAmB,EAAE,IAAI;QACzB,6BAA6B,EAAE,IAAI;QACnC,yBAAyB,EAAE,QAAQ;QACnC,gBAAgB,EAAE,MAAM;KACzB,CAAC,CAAA;IAEF,MAAM,iBAAiB,GACrB,MAAM,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QACrD,CAAC,CAAC,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;QAClD,CAAC,CAAC,MAAM,CAAA;IAEZ,MAAM,gBAAgB,GACpB,CAAC,aAAa,IAAI,aAAa,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM;QAC7D,CAAC,CAAC;YACE,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI,aAAa,CAAC,MAAM,EAAE;SAC9D;QACH,CAAC,CAAC,EAAE,CAAA;IAER,IAAI,CAAC,EAAE;QAAE,OAAO,IAAI,CAAA;IAEpB,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC;YACpB,kBAAkB,EAAE,aAAa;YACjC,QAAQ,EAAE,MAAM;YAChB,kBAAkB,EAAE,MAAM;SAC3B,CAAC,uBACiB,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,oBACjC,UAAU;QAExB,MAAM,IAAI,CACT,0CACE,GAAG,EAAE,oCAAoC,EAAE,oBAAoB,CAAC,aAAa,EAAE,EAC/E,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,iBAAiB,EAAE,EACxD,SAAS,EAAC,mBAAmB,GACrB,CACX;QACD,0CACE,SAAS,EAAE,gBAAgB,+BACA,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,gCACrC,QAAQ,CAAC,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI;YAEnE,qCAAG,IAAI,EAAE,UAAU;gBACjB,8DAGmB,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,sBACrC,EAAE,wBACA,YAAY;oBAEhC,8BAAC,gBAAgB,IAAC,EAAE,EAAE,EAAE,GAAI;oBAC5B,uCACE,GAAG,EAAE,aAAa,EAAE,GAAG,IAAI,EAAE,EAC7B,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE,gBAAgB,GACvB,CACM,CACR,CACG,CACL,CACP,CAAA;AACH,CAAC;AA1ED,2BA0EC"}

package/lib/components/Flourish/test/snapshot.spec.d.ts

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

package/lib/components/Flourish/test/snapshot.spec.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const __1 = __importDefault(require("../"));
+var acceptedFormat;
+(function (acceptedFormat) {
+    acceptedFormat["standard"] = "standard";
+})(acceptedFormat || (acceptedFormat = {}));
+const anImage = {
+    id: '123',
+    url: 'https://example.com/image.jpg',
+    width: 100,
+    height: 150,
+    format: 'standard',
+    sourceSet: [
+        {
+            url: 'https://example.com/anotherImage.jpg',
+            width: 200,
+            dpr: 2,
+        },
+    ],
+};
+describe('Flourish component', () => {
+    it('renders with a full-grid layout and fallback image', async () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(__1.default, { type: "flourish", id: "123", flourishType: "bar", description: "foo", layoutWidth: "full-grid", fallbackImage: anImage }));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders ignoring layout different from full-grid', async () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(__1.default, { type: "flourish", id: "123", flourishType: "bar", description: "foo", layoutWidth: "whatever", fallbackImage: anImage }));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders with an iframe rather than using the embed script to insert it', async () => {
+        const iFrame = true;
+        const { container } = (0, react_2.render)(react_1.default.createElement(__1.default, { type: "flourish", id: "123", flourishType: "bar", description: "foo", layoutWidth: "full-grid", fallbackImage: anImage, iFrame: iFrame }));
+        expect(container).toMatchSnapshot();
+    });
+    it('renders without n-content-layout class for charts not in article body', async () => {
+        const inArticleBody = false;
+        const { container } = (0, react_2.render)(react_1.default.createElement(__1.default, { type: "flourish", id: "123", flourishType: "bar", description: "foo", layoutWidth: "full-grid", fallbackImage: anImage, inArticleBody: inArticleBody }));
+        expect(container).toMatchSnapshot();
+    });
+});
+it('sets the hideTitle param in the iframe url to true when not in article body', async () => {
+    const inArticleBody = false;
+    const iFrame = true;
+    const { container } = (0, react_2.render)(react_1.default.createElement(__1.default, { type: "flourish", id: "123", flourishType: "bar", description: "foo", layoutWidth: "full-grid", fallbackImage: anImage, iFrame: iFrame, inArticleBody: inArticleBody }));
+    expect(container).toMatchSnapshot();
+});
+it('does not set aspect ratios when in article body', async () => {
+    const { container } = (0, react_2.render)(react_1.default.createElement(__1.default, { type: "flourish", id: "123", flourishType: "bar", description: "foo", layoutWidth: "full-grid", fallbackImage: anImage }));
+    expect(container).toMatchSnapshot();
+});
+//# sourceMappingURL=snapshot.spec.js.map

package/lib/components/Flourish/test/snapshot.spec.js.map

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

package/lib/components/Layout/index.d.ts

@@ -7,13 +7,19 @@ interface ContentTreeLayoutSlot extends ContentTree.Node {
     type: 'slot';
     children: [ContentTree.ImageSet?, ...ContentTree.Paragraph[]];
 }
-interface ContentTreeCardLayout extends ContentTree.Node {
+interface BaseLayoutProps {
+    layoutWidth: 'inset-left' | 'full-width' | 'full-grid';
+    layoutName?: string;
+}
+interface ContentTreeCardLayout extends BaseLayoutProps, ContentTree.Node {
     type: 'layout';
     layoutName: 'auto' | 'card' | 'timeline';
-    layoutWidth: 'inset-left' | 'full-width' | 'full-grid';
     children: ContentTreeLayoutSlot[];
 }
-export declare function Layout({ children, layoutWidth, layoutName, }: React.PropsWithChildren<ContentTreeCardLayout>): React.JSX.Element;
+interface StaticLayout extends BaseLayoutProps {
+    children: ReactNode;
+}
+export declare function Layout({ children, layoutWidth, layoutName, }: React.PropsWithChildren<ContentTreeCardLayout | StaticLayout>): React.JSX.Element;
 export declare function LayoutContainer({ children }: LayoutContainerProps): React.JSX.Element;
 export declare function LayoutSlot({ children }: React.PropsWithChildren): React.JSX.Element;
 export {};

package/lib/components/Layout/index.js

@@ -5,7 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutSlot = exports.LayoutContainer = exports.Layout = void 0;
 const react_1 = __importDefault(require("react"));
-function Layout({ children, layoutWidth, layoutName, }) {
+/*
+ * @description Layout component is used to define the layout for content. It can be used with ContentTree Layout Nodes or as a static layout.
+ * @param layoutWidth - The width of the layout within the containing grid.
+ * @param layoutName - The name of the layout.
+ * @param children - The content to be displayed in the layout.
+ */
+function Layout({ children, layoutWidth, layoutName = 'auto', }) {
     return (react_1.default.createElement("div", { className: "n-content-layout", "data-layout-name": layoutName, "data-layout-width": layoutWidth },
         react_1.default.createElement(LayoutContainer, null, children)));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Layout/index.tsx"],"names":[],"mappings":";;;;;;AACA,kDAAwC;AAkBxC,SAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,UAAU,GACqC;IAC/C,OAAO,CACL,uCACE,SAAS,EAAC,kBAAkB,sBACV,UAAU,uBACT,WAAW;QAE9B,8BAAC,eAAe,QAAE,QAAQ,CAAmB,CACzC,CACP,CAAA;AACH,CAAC;AAdD,wBAcC;AAED,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAwB;IAChE,OAAO,uCAAK,SAAS,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAA;AACtE,CAAC;AAFD,0CAEC;AAED,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAA2B;IAC9D,OAAO,uCAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CAAA;AACjE,CAAC;AAFD,gCAEC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Layout/index.tsx"],"names":[],"mappings":";;;;;;AACA,kDAAwC;AAyBxC;;;;;GAKG;AACH,SAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,WAAW,EACX,UAAU,GAAG,MAAM,GAC2C;IAC9D,OAAO,CACL,uCACE,SAAS,EAAC,kBAAkB,sBACV,UAAU,uBACT,WAAW;QAE9B,8BAAC,eAAe,QAAE,QAAQ,CAAmB,CACzC,CACP,CAAA;AACH,CAAC;AAdD,wBAcC;AAED,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAwB;IAChE,OAAO,uCAAK,SAAS,EAAC,6BAA6B,IAAE,QAAQ,CAAO,CAAA;AACtE,CAAC;AAFD,0CAEC;AAED,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAA2B;IAC9D,OAAO,uCAAK,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAO,CAAA;AACjE,CAAC;AAFD,gCAEC"}

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

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { FollowButtonSlot } from './FollowButtonSlot';
 import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client';
-type TopperProps = {
+export type TopperProps = {
     content: ArticleQuery['content'];
     slot?: string;
     followButtonSlot?: FollowButtonSlot;
@@ -9,4 +9,3 @@ type TopperProps = {
     readNextSlot?: () => ReactElement;
 };
 export default function Topper({ content, slot, followButtonSlot, showPremiumLabel, readNextSlot, }: TopperProps): React.JSX.Element | null;
-export {};

package/lib/components/Topper/index.js

@@ -12,6 +12,8 @@ const Picture_1 = __importDefault(require("./Picture"));
 const Headshot_1 = __importDefault(require("../Headshot"));
 const Columnist_1 = __importDefault(require("./Columnist"));
 const LiveBlogIndicator_1 = __importDefault(require("./LiveBlogIndicator"));
+const Flourish_1 = __importDefault(require("../Flourish"));
+const Layout_1 = require("../Layout");
 const classnames_1 = __importDefault(require("classnames"));
 function Topper({ content, slot, followButtonSlot, showPremiumLabel = false, readNextSlot, }) {
     const { topper } = content;
@@ -23,6 +25,7 @@ function Topper({ content, slot, followButtonSlot, showPremiumLabel = false, rea
     const isBasic = topper.__typename === 'BasicTopper';
     const isOpinion = topper.__typename === 'OpinionTopper';
     const isPodcast = topper.__typename === 'PodcastTopper';
+    const isFlourish = topper.__typename === 'TopperWithFlourish' && !!topper.leadFlourish;
     const isAudio = content.__typename === 'Audio';
     const hasLayout = 'layout' in topper && topper.layout;
     const hasDesign = 'design' in topper && topper.design;
@@ -67,6 +70,9 @@ function Topper({ content, slot, followButtonSlot, showPremiumLabel = false, rea
                     react_1.default.createElement(LiveBlogIndicator_1.default, { realtime: content.realtime ?? undefined, lastUpdatedDateTime: getMostRecentPostPublishedDate() }))) : (react_1.default.createElement(Tags_1.default, { __typename: topper.__typename, isPackage: isPackage, displayConcept: topper.displayConcept ?? undefined, brandConcept: ('brandConcept' in topper && topper.brandConcept) || undefined, genreConcept: ('genreConcept' in topper && topper.genreConcept) || undefined, headshot: hasHeadshot || undefined, hasColumnist: hasColumnist, followButtonVariant: topper.followButtonVariant, FollowButtonSlot: followButtonSlot })),
                 react_1.default.createElement(Headline_1.default, { headline: topper.headline, showPremiumLabel: showPremiumLabel && content.accessLevel === 'premium', isLargeHeadline: ('isLargeHeadline' in topper && topper.isLargeHeadline) ??
                         undefined }),
+                isLiveBlog && isFlourish ? (react_1.default.createElement(Layout_1.Layout, { layoutWidth: "full-grid" },
+                    react_1.default.createElement(Layout_1.LayoutContainer, null,
+                        react_1.default.createElement(Flourish_1.default, { id: topper.leadFlourish.id || '', flourishType: topper.leadFlourish.type || '', description: topper.leadFlourish.description || '', fallbackImage: topper.leadFlourish.fallbackImage || '', iFrame: true, inArticleBody: false })))) : (''),
                 topper.intro && (react_1.default.createElement(Intro_1.default, { structured: topper.intro.structured, source: topper.intro.source })),
                 hasHeadshot && !isAudio && isOpinion && topper.columnist && (react_1.default.createElement("div", { className: "o-topper__headshot" },
                     react_1.default.createElement(Headshot_1.default, { headshot: topper.headshot, prefLabel: topper.columnist.prefLabel, className: 'o-topper__headshot-image', altText: headshotAltText }))),

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/stories/Topper.stories.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import Topper from "../components/Topper";
+declare const _default: {
+    title: string;
+    component: typeof Topper;
+    content: {};
+};
+export default _default;
+export declare const Default: () => React.JSX.Element;

package/lib/stories/Topper.stories.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const Topper_1 = __importDefault(require("../components/Topper"));
+const content_1 = require("./content");
+const args = {
+    content: content_1.content
+};
+exports.default = {
+    title: 'Topper',
+    component: Topper_1.default,
+    content: {}
+};
+const Default = () => {
+    return (react_1.default.createElement("div", { className: "story-container" },
+        react_1.default.createElement(Topper_1.default, { ...args })));
+};
+exports.Default = Default;
+//# sourceMappingURL=Topper.stories.js.map

package/lib/stories/Topper.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Topper.stories.js","sourceRoot":"","sources":["../../src/stories/Topper.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,kEAA2D;AAC3D,uCAAoC;AAGpC,MAAM,IAAI,GAAgB;IACtB,OAAO,EAAE,iBAA6C;CACzD,CAAA;AAED,kBAAe;IACX,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,gBAAM;IACjB,OAAO,EAAE,EAAE;CACd,CAAA;AAEM,MAAM,OAAO,GAAG,GAAG,EAAE;IACxB,OAAO,CACH,uCAAK,SAAS,EAAC,iBAAiB;QAC5B,8BAAC,gBAAM,OAAK,IAAI,GAAI,CAClB,CACT,CAAA;AACL,CAAC,CAAA;AANY,QAAA,OAAO,WAMnB"}

package/lib/stories/content.d.ts

@@ -0,0 +1,65 @@
+export declare const content: {
+    __typename: string;
+    id: string;
+    title: string;
+    publishedDate: string;
+    firstPublishedDate: string;
+    standfirst: null;
+    topper: {
+        __typename: string;
+        layout: string;
+        layoutWidth: string;
+        headline: string;
+        backgroundColour: string;
+        backgroundBox: null;
+        textShadow: null;
+        followButtonVariant: string;
+        intro: {
+            source: string;
+            structured: {
+                tree: {
+                    type: string;
+                    version: number;
+                    children: {
+                        type: string;
+                        value: string;
+                    }[];
+                };
+            };
+        };
+        displayConcept: {
+            id: string;
+            prefLabel: string;
+            types: string[];
+            type: string;
+            directType: string;
+            isPackageBrand: boolean;
+            predicate: string;
+            url: string;
+            relativeUrl: string;
+        };
+        genreConcept: {
+            id: string;
+            prefLabel: string;
+            types: string[];
+            type: string;
+            directType: string;
+            isPackageBrand: boolean;
+            predicate: string;
+            url: string;
+            relativeUrl: string;
+        };
+        leadFlourish: {
+            type: string;
+            id: string;
+            description: string;
+            fallbackImage: {
+                url: string;
+                type: string;
+                format: string;
+                width: number;
+                height: number;
+            };
+        };
+    };
+};

package/lib/stories/content.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.content = void 0;
+exports.content = {
+    __typename: 'LiveBlogPackage',
+    id: 'f9d0da8a-ac43-4f0d-8af5-d597d1f13bb8',
+    title: 'News updates from February 2: US adds 353,000 jobs in January, US hits Iraq and Syria after drone deaths',
+    publishedDate: '2024-02-05T12:00:44.399Z',
+    firstPublishedDate: '2024-02-05T12:00:44.399Z',
+    standfirst: null,
+    topper: {
+        __typename: 'TopperWithFlourish',
+        layout: 'flourish',
+        layoutWidth: 'full-width',
+        headline: 'News updates from February 2: US adds 353,000 jobs in January, US hits Iraq and Syria after drone deaths',
+        backgroundColour: 'paper',
+        backgroundBox: null,
+        textShadow: null,
+        followButtonVariant: 'standard',
+        intro: {
+            source: 'standfirst',
+            structured: {
+                tree: {
+                    type: 'body',
+                    version: 1,
+                    children: [
+                        {
+                            type: 'text',
+                            value: 'Media sector scrambles to deal with fallout from phase out of cross-website trackers '
+                        }
+                    ]
+                }
+            }
+        },
+        displayConcept: {
+            id: '84cf4073-a674-4a93-aef9-dcc1832a65cb',
+            prefLabel: 'Amazon.com',
+            types: [
+                'http://www.ft.com/ontology/core/Thing',
+                'http://www.ft.com/ontology/concept/Concept',
+                'http://www.ft.com/ontology/organisation/Organisation',
+                'http://www.ft.com/ontology/company/Company',
+                'http://www.ft.com/ontology/company/PublicCompany'
+            ],
+            type: 'ORGANISATION',
+            directType: 'http://www.ft.com/ontology/company/PublicCompany',
+            isPackageBrand: false,
+            predicate: 'http://www.ft.com/ontology/hasDisplayTag',
+            url: 'https://www.ft.com/stream/84cf4073-a674-4a93-aef9-dcc1832a65cb',
+            relativeUrl: '/stream/84cf4073-a674-4a93-aef9-dcc1832a65cb'
+        },
+        genreConcept: {
+            id: 'a579350c-61ce-4c00-97ca-ddaa2e0cacf6',
+            prefLabel: 'News',
+            types: [
+                'http://www.ft.com/ontology/core/Thing',
+                'http://www.ft.com/ontology/concept/Concept',
+                'http://www.ft.com/ontology/classification/Classification',
+                'http://www.ft.com/ontology/Genre'
+            ],
+            type: 'GENRE',
+            directType: 'http://www.ft.com/ontology/Genre',
+            isPackageBrand: false,
+            predicate: 'http://www.ft.com/ontology/classification/isClassifiedBy',
+            url: 'https://www.ft.com/stream/a579350c-61ce-4c00-97ca-ddaa2e0cacf6',
+            relativeUrl: '/stream/a579350c-61ce-4c00-97ca-ddaa2e0cacf6'
+        },
+        leadFlourish: {
+            type: 'visualisation',
+            id: '15700475',
+            description: 'EU Airlines',
+            fallbackImage: {
+                url: 'https://www.ft.com/__origami/service/image/v2/images/raw/https%3A%2F%2Fpublic.flourish.studio%2Fvisualisation%2F15700475%2Fthumbnail?source=cp-content-pipeline&fit=scale-down&quality=highest&width=1020&dpr=1',
+                type: 'visualisation',
+                format: 'standard',
+                width: 1020,
+                height: 892
+            }
+        }
+    },
+};
+//# sourceMappingURL=content.js.map

package/lib/stories/content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sourceRoot":"","sources":["../../src/stories/content.tsx"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG;IACnB,UAAU,EAAE,iBAAiB;IAC7B,EAAE,EAAE,sCAAsC;IAC1C,KAAK,EAAE,0GAA0G;IACjH,aAAa,EAAE,0BAA0B;IACzC,kBAAkB,EAAE,0BAA0B;IAC9C,UAAU,EAAE,IAAI;IAChB,MAAM,EAAE;QACJ,UAAU,EAAE,oBAAoB;QAChC,MAAM,EAAE,UAAU;QAClB,WAAW,EAAE,YAAY;QACzB,QAAQ,EAAE,0GAA0G;QACpH,gBAAgB,EAAE,OAAO;QACzB,aAAa,EAAE,IAAI;QACnB,UAAU,EAAE,IAAI;QAChB,mBAAmB,EAAE,UAAU;QAC/B,KAAK,EAAE;YACH,MAAM,EAAE,YAAY;YACpB,UAAU,EAAE;gBACR,IAAI,EAAE;oBACF,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,CAAC;oBACV,QAAQ,EAAE;wBACN;4BACI,IAAI,EAAE,MAAM;4BACZ,KAAK,EAAE,uFAAuF;yBACjG;qBACJ;iBACJ;aACJ;SACJ;QACD,cAAc,EAAE;YACZ,EAAE,EAAE,sCAAsC;YAC1C,SAAS,EAAE,YAAY;YACvB,KAAK,EAAE;gBACH,uCAAuC;gBACvC,4CAA4C;gBAC5C,sDAAsD;gBACtD,4CAA4C;gBAC5C,kDAAkD;aACrD;YACD,IAAI,EAAE,cAAc;YACpB,UAAU,EAAE,kDAAkD;YAC9D,cAAc,EAAE,KAAK;YACrB,SAAS,EAAE,0CAA0C;YACrD,GAAG,EAAE,gEAAgE;YACrE,WAAW,EAAE,8CAA8C;SAC9D;QACD,YAAY,EAAE;YACV,EAAE,EAAE,sCAAsC;YAC1C,SAAS,EAAE,MAAM;YACjB,KAAK,EAAE;gBACH,uCAAuC;gBACvC,4CAA4C;gBAC5C,0DAA0D;gBAC1D,kCAAkC;aACrC;YACD,IAAI,EAAE,OAAO;YACb,UAAU,EAAE,kCAAkC;YAC9C,cAAc,EAAE,KAAK;YACrB,SAAS,EAAE,0DAA0D;YACrE,GAAG,EAAE,gEAAgE;YACrE,WAAW,EAAE,8CAA8C;SAC9D;QACD,YAAY,EAAE;YACV,IAAI,EAAE,eAAe;YACrB,EAAE,EAAE,UAAU;YACd,WAAW,EAAE,aAAa;YAC1B,aAAa,EAAE;gBACb,GAAG,EAAE,iNAAiN;gBACtN,IAAI,EAAE,eAAe;gBACrB,MAAM,EAAE,UAAU;gBAClB,KAAK,EAAE,IAAI;gBACX,MAAM,EAAE,GAAG;aACZ;SACF;KACN;CACJ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/cp-content-pipeline-ui",
-  "version": "6.4.6",
+  "version": "6.6.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -17,9 +17,9 @@
     "@babel/preset-react": "^7.22.5",
     "@dotcom-tool-kit/npm": "^3.1.4",
     "@financial-times/content-tree": "github:financial-times/content-tree#14370e3",
-    "@financial-times/cp-content-pipeline-client": "^3.7.0",
-    "@financial-times/cp-content-pipeline-schema": "^2.9.2",
-    "@financial-times/cp-content-pipeline-styles": "^2.4.1",
+    "@financial-times/cp-content-pipeline-client": "^3.7.1",
+    "@financial-times/cp-content-pipeline-schema": "^2.10.0",
+    "@financial-times/cp-content-pipeline-styles": "^2.4.3",
     "@financial-times/n-scrollytelling-image": "^1.1.0",
     "@financial-times/o-colors": "^6.6.2",
     "@financial-times/o-grid": "^6.1.5",
@@ -38,10 +38,11 @@
     "@storybook/react-webpack5": "^7.0.24",
     "@storybook/testing-library": "^0.2.0",
     "@sucrase/jest-plugin": "^3.0.0",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/financial-times__n-scrollytelling-image": "0.0.0",
     "@types/react": "^18.0.15",
+    "@types/react-test-renderer": "^18.3.0",
     "eslint-plugin-react": "^7.30.1",
     "jest-environment-jsdom": "^29.6.1",
     "n-ui-foundations": "^9.1.0",

package/src/client.ts

@@ -1,2 +1,3 @@
 export { default as Clip } from './components/Clip/client/index'
 export { default as BackToTopButton } from './components/BackToTopButton/client'
+export { default as FlourishSSREmbed } from './components/Flourish/client/index'