@financial-times/cp-content-pipeline-ui 4.1.4 → 4.2.0-beta.0

package/.storybook/main.js

@@ -1,4 +1,6 @@
 /** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const path = require('path');
+const xEngine = require('@financial-times/x-engine/src/webpack')
 const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
@@ -22,5 +24,14 @@ const config = {
   docs: {
     autodocs: 'tag',
   },
+  webpackFinal: async (config) => {
+    config.plugins.push(xEngine());
+    config.resolve.modules.push(path.resolve(__dirname,"../../../node_modules/"));
+    config.resolve.alias.react = path.resolve(__dirname,"../../../node_modules/react");
+    config.resolve.alias['react-dom'] = path.resolve(__dirname,"../../../node_modules/react-dom");
+
+    
+    return config;
+  },
 }
 export default config

package/CHANGELOG.md

@@ -458,13 +458,6 @@
     * @financial-times/cp-content-pipeline-client bumped from ^3.0.1 to ^3.0.2
     * @financial-times/cp-content-pipeline-schema bumped from ^2.0.1 to ^2.0.2
 
-## [4.1.4](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v4.1.3...cp-content-pipeline-ui-v4.1.4) (2024-02-15)
-
-
-### Bug Fixes
-
-* issue with adslot in body for content package types ([76494f2](https://github.com/Financial-Times/cp-content-pipeline/commit/76494f2e8d94c14bcfd2edc87fae9e0016ad085c))
-
 ## [4.1.3](https://github.com/Financial-Times/cp-content-pipeline/compare/cp-content-pipeline-ui-v4.1.2...cp-content-pipeline-ui-v4.1.3) (2024-02-14)
 
 

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import type { ArticleQuery } from '@financial-times/cp-content-pipeline-client';
 import type { ComponentMapRecord } from '../RichText';
 import type { Serialiser } from '@financial-times/x-interaction';
@@ -15,7 +15,7 @@ export type BodyProps = {
     showBackToTop?: boolean;
     xInteractionSerialiser?: Serialiser;
     postTrackerConfig?: PostTrackerConfig;
-    AdSlot?: React.FC;
+    adSlot?: () => ReactElement;
 };
-export default function Body({ content, components, showBackToTop, showShareButtons, xInteractionSerialiser, postTrackerConfig, AdSlot, }: BodyProps): React.JSX.Element | null;
+export default function Body({ content, components, showBackToTop, showShareButtons, xInteractionSerialiser, postTrackerConfig, adSlot, }: BodyProps): React.JSX.Element | null;
 export {};

package/lib/components/Body/index.js

@@ -8,7 +8,7 @@ const ArticleBody_1 = __importDefault(require("../ArticleBody"));
 const LiveBlogBody_1 = __importDefault(require("../LiveBlogBody"));
 const PodcastBody_1 = __importDefault(require("../PodcastBody"));
 const ContentPackageBody_1 = __importDefault(require("../ContentPackageBody"));
-function Body({ content, components, showBackToTop, showShareButtons, xInteractionSerialiser, postTrackerConfig, AdSlot, }) {
+function Body({ content, components, showBackToTop, showShareButtons, xInteractionSerialiser, postTrackerConfig, adSlot, }) {
     if (!content?.body?.structured) {
         return null;
     }
@@ -23,7 +23,7 @@ function Body({ content, components, showBackToTop, showShareButtons, xInteracti
         return react_1.default.createElement(Podcast, { content: content, components: components });
     }
     else if (content.__typename === 'ContentPackage') {
-        return (react_1.default.createElement(ContentPackage, { content: content, components: components, AdSlot: AdSlot }));
+        return (react_1.default.createElement(ContentPackage, { content: content, components: components, adSlot: adSlot }));
     }
     return react_1.default.createElement(Article, { content: content, components: components });
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,iEAAwC;AACxC,mEAA0C;AAC1C,iEAAwC;AACxC,+EAAsD;AAsBtD,SAAwB,IAAI,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,MAAM,GACI;IACV,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,QAAQ,GAAG,UAAU,EAAE,CAAC,gBAAgB,CAAC,IAAI,sBAAY,CAAA;IAC/D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC,cAAc,CAAC,IAAI,qBAAW,CAAA;IAC3D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC,cAAc,CAAC,IAAI,qBAAW,CAAA;IAC3D,MAAM,cAAc,GAClB,UAAU,EAAE,CAAC,sBAAsB,CAAC,IAAI,4BAAkB,CAAA;IAE5D,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB,EAAE;QAC5C,OAAO,CACL,8BAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE,sBAAsB,EAC9C,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAA;KACF;SAAM,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,EAAE;QACzC,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;KAC7D;SAAM,IAAI,OAAO,CAAC,UAAU,KAAK,gBAAgB,EAAE;QAClD,OAAO,CACL,8BAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAA;KACF;IAED,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;AAC9D,CAAC;AA3CD,uBA2CC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Body/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA2C;AAC3C,iEAAwC;AACxC,mEAA0C;AAC1C,iEAAwC;AACxC,+EAAsD;AAsBtD,SAAwB,IAAI,CAAC,EAC3B,OAAO,EACP,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,MAAM,GACI;IACV,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE;QAC9B,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,QAAQ,GAAG,UAAU,EAAE,CAAC,gBAAgB,CAAC,IAAI,sBAAY,CAAA;IAC/D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC,cAAc,CAAC,IAAI,qBAAW,CAAA;IAC3D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC,cAAc,CAAC,IAAI,qBAAW,CAAA;IAC3D,MAAM,cAAc,GAClB,UAAU,EAAE,CAAC,sBAAsB,CAAC,IAAI,4BAAkB,CAAA;IAE5D,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB,EAAE;QAC5C,OAAO,CACL,8BAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,sBAAsB,EAAE,sBAAsB,EAC9C,iBAAiB,EAAE,iBAAiB,GACpC,CACH,CAAA;KACF;SAAM,IAAI,OAAO,CAAC,UAAU,KAAK,OAAO,EAAE;QACzC,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;KAC7D;SAAM,IAAI,OAAO,CAAC,UAAU,KAAK,gBAAgB,EAAE;QAClD,OAAO,CACL,8BAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,GACd,CACH,CAAA;KACF;IAED,OAAO,8BAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,GAAI,CAAA;AAC9D,CAAC;AA3CD,uBA2CC"}

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

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { BodyProps } from '../Body';
-export default function ContentPackageBody({ content, components, AdSlot, }: BodyProps): React.JSX.Element | null;
+export default function ContentPackageBody({ content, components, adSlot, }: BodyProps): React.JSX.Element | null;

package/lib/components/ContentPackageBody/index.js

@@ -10,7 +10,7 @@ const classnames_1 = __importDefault(require("classnames"));
 function validTeasers(teasers) {
     return teasers.filter((teaser) => !!teaser);
 }
-function ContentPackageBody({ content, components, AdSlot, }) {
+function ContentPackageBody({ content, components, adSlot, }) {
     if (content.__typename !== 'ContentPackage') {
         return null;
     }
@@ -25,20 +25,20 @@ function ContentPackageBody({ content, components, AdSlot, }) {
         : 'More from this Series';
     const secondaryTeaserMods = design?.theme === 'extra' ? ['inverse'] : [];
     return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: components },
-        react_1.default.createElement("article", { id: "site-content", role: "main", "data-attribute": "article-content-body", "data-content-id": content.id, "data-syndicatable": content.canBeSyndicated, className: design && design.theme
+        react_1.default.createElement("article", { id: "site-content", "data-attribute": "article-content-body", role: "main", className: design && design.theme
                 ? `design-theme--${design.theme} article`
                 : 'article n-content-body js-article__content-body n-content-body' },
-            react_1.default.createElement(PackageTeasers, { ...content, primaryTeasers: primaryTeasers, secondaryTeasers: secondaryTeasers, secondaryTeaserTitle: secondaryTeaserTitle, secondaryTeaserMods: secondaryTeaserMods, AdSlot: AdSlot }))));
+            react_1.default.createElement(PackageTeasers, { ...content, primaryTeasers: primaryTeasers, secondaryTeasers: secondaryTeasers, secondaryTeaserTitle: secondaryTeaserTitle, secondaryTeaserMods: secondaryTeaserMods, adSlot: adSlot }))));
 }
 exports.default = ContentPackageBody;
-function PackageTeasers({ primaryTeasers, secondaryTeasers, secondaryTeaserTitle, secondaryTeaserMods, AdSlot, }) {
+function PackageTeasers({ primaryTeasers, secondaryTeasers, secondaryTeaserTitle, secondaryTeaserMods, adSlot: AdSlot, }) {
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('package-container', {
             'package-grid-1-column': !AdSlot,
             'package-grid-3-column': AdSlot,
         }) },
-        !!primaryTeasers.length && react_1.default.createElement(PrimaryTeasers, { teasers: primaryTeasers }),
-        !!secondaryTeasers.length && (react_1.default.createElement(SecondaryTeasers, { teasers: secondaryTeasers, teaserTitle: secondaryTeaserTitle, teaserMods: secondaryTeaserMods })),
-        AdSlot && react_1.default.createElement(AdSlot, null)));
+        primaryTeasers.length && react_1.default.createElement(PrimaryTeasers, { teasers: primaryTeasers }),
+        AdSlot && react_1.default.createElement(AdSlot, null),
+        secondaryTeasers.length && (react_1.default.createElement(SecondaryTeasers, { teasers: secondaryTeasers, teaserTitle: secondaryTeaserTitle, teaserMods: secondaryTeaserMods }))));
 }
 function PrimaryTeasers({ teasers }) {
     return (react_1.default.createElement("div", { className: "package-contents package-teasers--large" },

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

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

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

@@ -2,5 +2,6 @@ import React from 'react';
 import type { BodyProps } from '../Body';
 export type LiveBlogBodyProps = BodyProps & {
     isPinnedPost?: boolean;
+    xInteractionSerialiser?: any;
 };
 export default function LiveBlogBody({ content, components, isPinnedPost, xInteractionSerialiser, showShareButtons, showBackToTop, postTrackerConfig, }: LiveBlogBodyProps): React.JSX.Element | null;

package/lib/components/LiveBlogBody/index.js

@@ -1,48 +1,23 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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 x_live_blog_wrapper_1 = require("@financial-times/x-live-blog-wrapper");
-const RichText_1 = __importStar(require("../RichText"));
+const RichText_1 = require("../RichText");
+const LiveBlogWrapper_1 = require("../LiveBlogWrapper");
 function LiveBlogBody({ content, components, isPinnedPost, xInteractionSerialiser, showShareButtons, showBackToTop = true, postTrackerConfig, }) {
     if (content.__typename !== 'LiveBlogPackage')
         return null;
-    const additionalProps = isPinnedPost
-        ? {
-            id: 'pinned-post-live-blog-wrapper',
-            posts: [content.pinnedPost],
-        }
-        : {
-            id: 'live-blog-wrapper',
-            posts: (content.liveBlogPosts || []).filter((post) => post?.id !== content.pinnedPost?.id),
-        };
+    let id = 'live-blog-wrapper';
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let posts = (content.liveBlogPosts || []).filter((post) => post?.id !== content.pinnedPost?.id);
+    if (isPinnedPost) {
+        id = 'pinned-post-live-blog-wrapper';
+        posts = [content.pinnedPost];
+    }
     return (react_1.default.createElement(RichText_1.ComponentsContext.Provider, { value: components },
-        react_1.default.createElement(x_live_blog_wrapper_1.LiveBlogWrapper, { articleUrl: `https://www.ft.com/content/${content.id}`, serialiser: xInteractionSerialiser, renderRichText: RichText_1.default, showShareButtons: showShareButtons ?? true, backToTop: showBackToTop ? 'o-topper' : undefined, postTrackerConfig: postTrackerConfig, ...additionalProps })));
+        react_1.default.createElement(LiveBlogWrapper_1.LiveBlogWrapper, { articleUrl: `https://www.ft.com/content/${content.id}`, id: id, posts: posts, serialiser: xInteractionSerialiser, showShareButtons: showShareButtons ?? true, backToTop: showBackToTop ? 'o-topper' : undefined, postTrackerConfig: postTrackerConfig })));
 }
 exports.default = LiveBlogBody;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAAyB;AACzB,8EAAsE;AAGtE,wDAAyD;AAMzD,SAAwB,YAAY,CAAC,EACnC,OAAO,EACP,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,gBAAgB,EAChB,aAAa,GAAG,IAAI,EACpB,iBAAiB,GACC;IAClB,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAA;IAEzD,MAAM,eAAe,GAAG,YAAY;QAClC,CAAC,CAAC;YACE,EAAE,EAAE,+BAA+B;YACnC,KAAK,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC;SAC5B;QACH,CAAC,CAAC;YACE,EAAE,EAAE,mBAAmB;YACvB,KAAK,EAAE,CAAC,OAAO,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,MAAM,CACzC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,OAAO,CAAC,UAAU,EAAE,EAAE,CAC9C;SACF,CAAA;IAEL,OAAO,CACL,8BAAC,4BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU;QAC3C,8BAAC,qCAAe,IACd,UAAU,EAAE,8BAA8B,OAAO,CAAC,EAAE,EAAE,EACtD,UAAU,EAAE,sBAAsB,EAClC,cAAc,EAAE,kBAAQ,EACxB,gBAAgB,EAAE,gBAAgB,IAAI,IAAI,EAC1C,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACjD,iBAAiB,EAAE,iBAAiB,KAChC,eAAe,GACnB,CACyB,CAC9B,CAAA;AACH,CAAC;AApCD,+BAoCC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/LiveBlogBody/index.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,0CAA+C;AAC/C,wDAAoD;AAUpD,SAAwB,YAAY,CAAC,EACnC,OAAO,EACP,UAAU,EACV,YAAY,EACZ,sBAAsB,EACtB,gBAAgB,EAChB,aAAa,GAAG,IAAI,EACpB,iBAAiB,GACC;IAClB,IAAI,OAAO,CAAC,UAAU,KAAK,iBAAiB;QAAE,OAAO,IAAI,CAAA;IAEzD,IAAI,EAAE,GAAG,mBAAmB,CAAA;IAC5B,8DAA8D;IAC9D,IAAI,KAAK,GAAe,CAAC,OAAO,CAAC,aAAa,IAAI,EAAE,CAAC,CAAC,MAAM,CAC1D,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,EAAE,KAAK,OAAO,CAAC,UAAU,EAAE,EAAE,CAC9C,CAAA;IAED,IAAI,YAAY,EAAE;QAChB,EAAE,GAAG,+BAA+B,CAAA;QACpC,KAAK,GAAG,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;KAC7B;IAED,OAAO,CACL,8BAAC,4BAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU;QAC3C,8BAAC,iCAAe,IACd,UAAU,EAAE,8BAA8B,OAAO,CAAC,EAAE,EAAE,EACtD,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,sBAAsB,EAClC,gBAAgB,EAAE,gBAAgB,IAAI,IAAI,EAC1C,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EACjD,iBAAiB,EAAE,iBAAiB,GACpC,CACyB,CAC9B,CAAA;AACH,CAAC;AAnCD,+BAmCC"}

package/lib/components/LiveBlogPost/ShareButtons.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const _default: ({ postId, articleUrl, title, }: {
+    postId: string;
+    articleUrl: string;
+    title: string;
+}) => React.JSX.Element;
+export default _default;

package/lib/components/LiveBlogPost/ShareButtons.js

@@ -0,0 +1,45 @@
+"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 svgIcons_1 = require("./svgIcons");
+exports.default = ({ postId, articleUrl, title, }) => {
+    const shareUrl = articleUrl ? new URL(articleUrl) : null;
+    if (shareUrl) {
+        shareUrl.hash = `post-${postId}`;
+    }
+    const shareUrlStr = shareUrl?.toString() ?? '';
+    const twitterUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrlStr)}&text=${encodeURIComponent(title)}&via=ft`;
+    const facebookUrl = `http://www.facebook.com/sharer.php?u=${encodeURIComponent(shareUrlStr)}&t=${encodeURIComponent(title)}`;
+    const linkedInUrl = `http://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrlStr)}&title=${encodeURIComponent(title)}&source=Financial+Times`;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { "data-o-component": "o-share", "data-o-share-location": `live-blog-post-${postId}`, className: "o-share o-share--small" },
+            react_1.default.createElement("ul", { "data-toolbar": "share" },
+                react_1.default.createElement("li", { className: "o-share__action", "data-share": "twitter" },
+                    react_1.default.createElement("a", { className: "o-share__icon o-share__icon--x", rel: "noopener", href: twitterUrl, "data-trackable": "twitter" },
+                        react_1.default.createElement("div", { className: "o-share__icon__image" },
+                            react_1.default.createElement(svgIcons_1.TwitterSVG, null)),
+                        react_1.default.createElement("span", { className: "o-share__text" },
+                            "Share $",
+                            title,
+                            " on X (opens in a new window)"))),
+                react_1.default.createElement("li", { className: "o-share__action", "data-share": "facebook" },
+                    react_1.default.createElement("a", { className: "o-share__icon o-share__icon--facebook", rel: "noopener", href: facebookUrl, "data-trackable": "facebook" },
+                        react_1.default.createElement("div", { className: "o-share__icon__image" },
+                            react_1.default.createElement(svgIcons_1.FacebookSVG, null)),
+                        react_1.default.createElement("span", { className: "o-share__text" },
+                            "Share $",
+                            title,
+                            " on Facebook (opens in a new window)"))),
+                react_1.default.createElement("li", { className: "o-share__action", "data-share": "linkedin" },
+                    react_1.default.createElement("a", { className: "o-share__icon o-share__icon--linkedin", rel: "noopener", href: linkedInUrl, "data-trackable": "linkedin" },
+                        react_1.default.createElement("div", { className: "o-share__icon__image" },
+                            react_1.default.createElement(svgIcons_1.LinkedInSVG, null)),
+                        react_1.default.createElement("span", { className: "o-share__text" },
+                            "Share $",
+                            title,
+                            " on LinkedIn (opens in a new window)")))))));
+};
+//# sourceMappingURL=ShareButtons.js.map

package/lib/components/LiveBlogPost/ShareButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareButtons.js","sourceRoot":"","sources":["../../../src/components/LiveBlogPost/ShareButtons.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AACzB,yCAAiE;AACjE,kBAAe,CAAC,EACd,MAAM,EACN,UAAU,EACV,KAAK,GAKN,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAA;IACxD,IAAI,QAAQ,EAAE;QACZ,QAAQ,CAAC,IAAI,GAAG,QAAQ,MAAM,EAAE,CAAA;KACjC;IACD,MAAM,WAAW,GAAW,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;IACtD,MAAM,UAAU,GAAG,wCAAwC,kBAAkB,CAC3E,WAAW,CACZ,SAAS,kBAAkB,CAAC,KAAK,CAAC,SAAS,CAAA;IAE5C,MAAM,WAAW,GAAG,wCAAwC,kBAAkB,CAC5E,WAAW,CACZ,MAAM,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAA;IAElC,MAAM,WAAW,GAAG,sDAAsD,kBAAkB,CAC1F,WAAW,CACZ,UAAU,kBAAkB,CAAC,KAAK,CAAC,yBAAyB,CAAA;IAE7D,OAAO,CACL;QACE,2DACmB,SAAS,2BACH,kBAAkB,MAAM,EAAE,EACjD,SAAS,EAAC,wBAAwB;YAElC,sDAAiB,OAAO;gBACtB,sCAAI,SAAS,EAAC,iBAAiB,gBAAY,SAAS;oBAClD,qCACE,SAAS,EAAC,gCAAgC,EAC1C,GAAG,EAAC,UAAU,EACd,IAAI,EAAE,UAAU,oBACD,SAAS;wBAExB,uCAAK,SAAS,EAAC,sBAAsB;4BACnC,8BAAC,qBAAU,OAAG,CACV;wBACN,wCAAM,SAAS,EAAC,eAAe;;4BACrB,KAAK;4DACR,CACL,CACD;gBACL,sCAAI,SAAS,EAAC,iBAAiB,gBAAY,UAAU;oBACnD,qCACE,SAAS,EAAC,uCAAuC,EACjD,GAAG,EAAC,UAAU,EACd,IAAI,EAAE,WAAW,oBACF,UAAU;wBAEzB,uCAAK,SAAS,EAAC,sBAAsB;4BACnC,8BAAC,sBAAW,OAAG,CACX;wBACN,wCAAM,SAAS,EAAC,eAAe;;4BACrB,KAAK;mEACR,CACL,CACD;gBACL,sCAAI,SAAS,EAAC,iBAAiB,gBAAY,UAAU;oBACnD,qCACE,SAAS,EAAC,uCAAuC,EACjD,GAAG,EAAC,UAAU,EACd,IAAI,EAAE,WAAW,oBACF,UAAU;wBAEzB,uCAAK,SAAS,EAAC,sBAAsB;4BACnC,8BAAC,sBAAW,OAAG,CACX;wBACN,wCAAM,SAAS,EAAC,eAAe;;4BACrB,KAAK;mEACR,CACL,CACD,CACF,CACD,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/LiveBlogPost/Timestamp.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type TimestampProps = {
+    publishedTimestamp: string;
+};
+declare const _default: ({ publishedTimestamp }: TimestampProps) => React.JSX.Element;
+export default _default;

package/lib/components/LiveBlogPost/Timestamp.js

@@ -0,0 +1,31 @@
+"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"));
+exports.default = ({ publishedTimestamp }) => {
+    const now = new Date();
+    const oneDay = 24 * 60 * 60 * 1000;
+    const date = new Date(publishedTimestamp);
+    const formatted = date.toLocaleString();
+    let format;
+    let showExactTime;
+    if (now.getTime() - date.getTime() < oneDay) {
+        // display published date in 'xx minutes ago' format
+        // and render exact time next to it
+        format = 'time-ago-no-seconds';
+        showExactTime = true;
+    }
+    else {
+        // don't display time string if the post is older than one day
+        // because it is already included in the formatted timestamp
+        format = 'MMM dd, HH:mm';
+        showExactTime = false;
+    }
+    return (react_1.default.createElement("span", { className: "x-live-blog-post__timestamp-container" },
+        react_1.default.createElement("time", { "data-o-component": "o-date", className: "o-date x-live-blog-post__timestamp", dateTime: publishedTimestamp, "data-o-date-format": format, itemProp: "datePublished" },
+            react_1.default.createElement("span", { "data-o-date-printer": true }, formatted),
+            showExactTime && (react_1.default.createElement("span", { className: "o-date x-live-blog-post__timestamp-exact-time", "data-o-date-printer": true, "data-o-date-format": "HH:mm", itemProp: "exactTime" })))));
+};
+//# sourceMappingURL=Timestamp.js.map

package/lib/components/LiveBlogPost/Timestamp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timestamp.js","sourceRoot":"","sources":["../../../src/components/LiveBlogPost/Timestamp.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAMzB,kBAAe,CAAC,EAAE,kBAAkB,EAAkB,EAAE,EAAE;IACxD,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAA;IACtB,MAAM,MAAM,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;IAClC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAA;IACzC,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,CAAA;IAEvC,IAAI,MAAc,CAAA;IAClB,IAAI,aAAsB,CAAA;IAE1B,IAAI,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,MAAM,EAAE;QAC3C,oDAAoD;QACpD,mCAAmC;QACnC,MAAM,GAAG,qBAAqB,CAAA;QAC9B,aAAa,GAAG,IAAI,CAAA;KACrB;SAAM;QACL,8DAA8D;QAC9D,4DAA4D;QAC5D,MAAM,GAAG,eAAe,CAAA;QACxB,aAAa,GAAG,KAAK,CAAA;KACtB;IAED,OAAO,CACL,wCAAM,SAAS,EAAC,uCAAuC;QACrD,4DACmB,QAAQ,EACzB,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,kBAAkB,wBACR,MAAM,EAC1B,QAAQ,EAAC,eAAe;YAExB,uEAA2B,SAAS,CAAQ;YAC3C,aAAa,IAAI,CAChB,wCACE,SAAS,EAAC,+CAA+C,qDAEtC,OAAO,EAC1B,QAAQ,EAAC,WAAW,GACd,CACT,CACI,CACF,CACR,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { RichTextProps } from '../RichText';
+type indicators = {
+    isOpinion?: boolean;
+};
+export type LiveBlogPostProps = {
+    id: string;
+    postId: string;
+    title: string;
+    content: string;
+    bodyHTML: string;
+    body: any;
+    publishedTimestamp: string;
+    publishedDate: string;
+    isBreakingNews: boolean;
+    standout?: {
+        breakingNews?: boolean;
+        editorsChoice?: boolean;
+        exclusive?: boolean;
+        scoop?: boolean;
+    };
+    articleUrl: string;
+    showShareButtons: boolean;
+    byline: string | RichTextProps;
+    ad: unknown;
+    backToTop: string | undefined | ((arg: any) => any);
+    indicators?: indicators;
+};
+declare const LiveBlogPost: ({ id, postId, title, content, bodyHTML, body, publishedTimestamp, publishedDate, isBreakingNews, standout, articleUrl, showShareButtons, byline, ad, backToTop, indicators, }: LiveBlogPostProps) => React.JSX.Element | null;
+export { LiveBlogPost };

package/lib/components/LiveBlogPost/index.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LiveBlogPost = void 0;
+const react_1 = __importDefault(require("react"));
+const ShareButtons_1 = __importDefault(require("./ShareButtons"));
+const Timestamp_1 = __importDefault(require("./Timestamp"));
+const RichText_1 = __importDefault(require("../RichText"));
+const classnames_1 = __importDefault(require("classnames"));
+const LiveBlogPost = ({ id, postId, // Remove once wordpress is no longer in use
+title, content, // Remove once wordpress is no longer in use
+bodyHTML, //ElasticSearch
+body, // cp-content-pipeline
+publishedTimestamp, // Remove once wordpress is no longer in use
+publishedDate, isBreakingNews, // Remove once wordpress is no longer in use
+standout = {}, articleUrl, showShareButtons = false, byline, ad, backToTop, indicators = {}, }) => {
+    const showBreakingNewsLabel = standout.breakingNews || isBreakingNews;
+    let postBody;
+    let postByline;
+    let backToTopElem;
+    if (body && 'structured' in body) {
+        // Content comes from cp-content-pipeline-api
+        postBody = (react_1.default.createElement("div", { className: "x-live-blog-post__body n-content-body article--body" },
+            react_1.default.createElement(RichText_1.default, { structuredContent: body.structured })));
+    }
+    else {
+        // Content comes from next-es or wordpress
+        postBody = (react_1.default.createElement("div", { className: "x-live-blog-post__body n-content-body article--body", dangerouslySetInnerHTML: { __html: bodyHTML || content } }));
+    }
+    if (byline && typeof byline === 'object' && 'tree' in byline) {
+        postByline = (react_1.default.createElement("p", { className: "x-live-blog-post__byline" },
+            react_1.default.createElement(RichText_1.default, { structuredContent: byline })));
+    }
+    else if (typeof byline === 'string') {
+        postByline = react_1.default.createElement("p", { className: "x-live-blog-post__byline" }, byline);
+    }
+    if (typeof backToTop === 'string') {
+        backToTopElem = (react_1.default.createElement("a", { href: backToTop.includes('#') ? backToTop : `#${backToTop}`, className: "x-live-blog-post-controls__back-to-top-link" }, "Back to top"));
+    }
+    else if (typeof backToTop === 'function') {
+        backToTopElem = (react_1.default.createElement("button", { onClick: backToTop, className: "x-live-blog-post-controls__back-to-top-button" }, "Back to top"));
+    }
+    else {
+        return null;
+    }
+    return (react_1.default.createElement("article", { className: (0, classnames_1.default)('x-live-blog-post', {
+            'x-live-blog-post--opinion': indicators.isOpinion,
+        }), "data-trackable": "live-post", id: `post-${id || postId}`, "data-x-component": "live-blog-post" },
+        react_1.default.createElement("div", { className: "x-live-blog-post__standout" },
+            indicators.isOpinion ? (react_1.default.createElement("span", { className: "icon icon-opinion icon--scale-3" })) : (''),
+            react_1.default.createElement("div", { className: "x-live-blog-post__right" },
+                react_1.default.createElement("div", { className: "x-live-blog-post__meta" },
+                    indicators.isOpinion ? (react_1.default.createElement("span", { className: "x-live-blog-post__label--opinion" }, "Live Opinion")) : (''),
+                    react_1.default.createElement("span", null,
+                        react_1.default.createElement(Timestamp_1.default, { publishedTimestamp: publishedDate || publishedTimestamp }))),
+                react_1.default.createElement("div", null, postByline))),
+        showBreakingNewsLabel && (react_1.default.createElement("div", { className: "x-live-blog-post__breaking-news" }, "Breaking news")),
+        title && react_1.default.createElement("h2", { className: "x-live-blog-post__title" }, title),
+        postBody,
+        react_1.default.createElement("div", { className: "x-live-blog-post__controls" },
+            showShareButtons && (react_1.default.createElement(ShareButtons_1.default, { postId: id || postId, articleUrl: articleUrl, title: title })),
+            backToTopElem),
+        ad));
+};
+exports.LiveBlogPost = LiveBlogPost;
+//# sourceMappingURL=index.js.map

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

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

package/lib/components/LiveBlogPost/svgIcons.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function TwitterSVG(): React.JSX.Element;
+export declare function FacebookSVG(): React.JSX.Element;
+export declare function LinkedInSVG(): React.JSX.Element;

package/lib/components/LiveBlogPost/svgIcons.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkedInSVG = exports.FacebookSVG = exports.TwitterSVG = void 0;
+const react_1 = __importDefault(require("react"));
+/*
+TODO: CI-1975 given the below comment, once we are happy this migration works, we should replace this with o-share
+
+These icons have been copied from Origami as their TSX components are currently incompatible with next-article.
+Once this is resolved, these components should be replaced with o-share https://github.com/Financial-Times/origami/tree/main/components/o-share.
+ */
+function TwitterSVG() {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 40 40" },
+        react_1.default.createElement("path", { d: "M21.647 18.469 28.932 10h-1.726l-6.326 7.353L15.827 10H10l7.64 11.12L10 30h1.726l6.68-7.765L23.744 30h5.827l-7.924-11.531Zm-2.365 2.748-.774-1.107-6.16-8.81H15l4.971 7.11.774 1.107 6.462 9.242h-2.652l-5.273-7.541Z" })));
+}
+exports.TwitterSVG = TwitterSVG;
+function FacebookSVG() {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" },
+        react_1.default.createElement("path", { d: "M643.9 342h-48.2c-37.8 0-45.1 18-45.1 44.3v58.1h90.1l-11.7 91h-78.4V769h-94V535.5H378v-91h78.6v-67.1c0-77.9 47.6-120.3 117.1-120.3 33.3 0 61.9 2.5 70.2 3.6V342z" })));
+}
+exports.FacebookSVG = FacebookSVG;
+function LinkedInSVG() {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" },
+        react_1.default.createElement("path", { d: "M264.4 426.2h106.2v341.4H264.4V426.2zm53.2-169.7c-34.1 0-61.6 27.6-61.6 61.5 0 34 27.5 61.5 61.6 61.5 33.9 0 61.5-27.6 61.5-61.5-.1-34-27.6-61.5-61.5-61.5zm323.1 161.2c-51.6 0-86.2 28.3-100.4 55.1h-1.5v-46.7H437.2v341.4h106V598.7c0-44.5 8.4-87.7 63.6-87.7 54.5 0 55.1 50.9 55.1 90.5v166H768V580.3c0-91.9-19.9-162.6-127.3-162.6z" })));
+}
+exports.LinkedInSVG = LinkedInSVG;
+//# sourceMappingURL=svgIcons.js.map

package/lib/components/LiveBlogPost/svgIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svgIcons.js","sourceRoot":"","sources":["../../../src/components/LiveBlogPost/svgIcons.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AACzB;;;;;GAKG;AACH,SAAgB,UAAU;IACxB,OAAO,CACL,uCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW;QACzD,wCAAM,CAAC,EAAC,uNAAuN,GAAG,CAC9N,CACP,CAAA;AACH,CAAC;AAND,gCAMC;AAED,SAAgB,WAAW;IACzB,OAAO,CACL,uCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,eAAe;QAC7D,wCAAM,CAAC,EAAC,kKAAkK,GAAG,CACzK,CACP,CAAA;AACH,CAAC;AAND,kCAMC;AAED,SAAgB,WAAW;IACzB,OAAO,CACL,uCAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,eAAe;QAC7D,wCAAM,CAAC,EAAC,yUAAyU,GAAG,CAChV,CACP,CAAA;AACH,CAAC;AAND,kCAMC"}

package/lib/components/LiveBlogWrapper/dispatchEvent.d.ts

@@ -0,0 +1,2 @@
+declare const dispatchEvent: (target: any, eventType: any, data: any) => void;
+export { dispatchEvent };

package/lib/components/LiveBlogWrapper/dispatchEvent.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dispatchEvent = void 0;
+/*
+We dispatch live update events to notify the consuming app about added / updated posts.
+
+Consuming app uses these events to execute tasks like initialising Origami components
+on the updated elements.
+
+We want the rendering of the updates in the DOM to finish before dispatching this event,
+because the consumer needs to reference the updated DOM elements.
+
+If we dispatch the event in the same event loop with DOM element updates, consumer app
+will handle the event before the updates are complete.
+
+window.setTimeout(fn, 0) will defer the execution of the inner function until the
+current event loop completes, which is enough time for the DOM updates to finish.
+
+More information can be found in MDN setTimeout documentation. Please refer to
+"Late timeouts" heading in this page:
+https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Late_timeouts
+
+> ... the timeout can also fire later when the page (or the OS/browser itself) is busy
+> with other tasks. One important case to note is that the function or code snippet
+> cannot be executed until the thread that called setTimeout() has terminated.
+> ...
+> This is because even though setTimeout was called with a delay of zero, it's placed on
+> a queue and scheduled to run at the next opportunity; not immediately.
+*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
+//TODO: CI-1975 reset any types to something better, requires quite a bit of digging
+const dispatchEvent = (target, eventType, data) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    window.setTimeout(() => target.dispatchEvent(new CustomEvent(eventType, { detail: data })), 0);
+};
+exports.dispatchEvent = dispatchEvent;
+//# sourceMappingURL=dispatchEvent.js.map

package/lib/components/LiveBlogWrapper/dispatchEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dispatchEvent.js","sourceRoot":"","sources":["../../../src/components/LiveBlogWrapper/dispatchEvent.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;EAyBE;AACF,uDAAuD;AACvD,oFAAoF;AACpF,MAAM,aAAa,GAAG,CAAC,MAAW,EAAE,SAAc,EAAE,IAAS,EAAE,EAAE;IAC/D,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;QACjC,OAAM;KACP;IACD,MAAM,CAAC,UAAU,CACf,GAAG,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,EACxE,CAAC,CACF,CAAA;AACH,CAAC,CAAA;AAEQ,sCAAa"}

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

@@ -0,0 +1,3 @@
+import { PostTracker } from './post-tracker';
+declare const LiveBlogWrapper: any;
+export { LiveBlogWrapper, PostTracker };